/* ==========================================================================
   Venpo · ISO 27001 pages (/iso-27001 and /iso-27001/{controlSlug})

   Ported out of the inline <style> block the two pages used to push into
   <head> on every request (public/iso/partials/_styles.blade.php, deleted).
   The legacy palette it was written in — the rgb(10,37,64) navy, the
   rgb(99,91,255) indigo, #FAFBFD — is gone; everything here reads from the
   pub.css tokens so the pages sit in the same product as /tools and
   /vendors/directory.

   Loaded AFTER pub/pub.css, which supplies those tokens plus a handful of
   bare-element rules that reach into any page body:

     section { padding: 64px 0 0; scroll-margin-top: 26px }
     a       { color: var(--purple) }
     table   { width: 100%; border-collapse: collapse }
     thead th / tbody td   the shared table treatment

   The last two are wanted here — the change-events and Annex A index tables
   are real tables and inherit the site's header/row rhythm. The first two are
   not, so `section` is reset explicitly below and every link root states its
   own colour. Everything is scoped under the page root .iso, the way
   tools.css scopes under .tls, so nothing leaks into another page body.

   The FAQ is pub.css's own .faq/.chev, not a second copy of it; the two
   cards-with-a-table blocks share .iso-panel.

   Type is pub.css's: body text inherits its system sans, and the ids, tags
   and dates write its system mono stack in the rule, as pub.css and
   glossary.css do; no page-level font token.
   ========================================================================== */

/* pub.css's `section` padding belongs to the vendor profile's rail-driven
   layout. Here a section is an article block carrying its own margin, and an
   in-page anchor (the "On this page" nav) must clear the 66px fixed header. */
.iso section { padding: 0; scroll-margin-top: 90px; }

/* The prose column: 820px of text between the page's own gutters, centred the
   way .wrap centres the wider pages. */
.iso-layout { max-width: 900px; margin: 0 auto; padding: 0 40px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.iso-hero { max-width: 760px; margin: 0 0 44px; }
/* The hub opens on the hero; the control page opens on a .crumb, which brings
   its own top padding. */
.iso-layout > .iso-hero:first-child { padding-top: 64px; }
.iso-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--purple-soft);
    color: var(--purple-deep);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.iso-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); flex: none; }
.iso-hero h1 {
    margin: 0 0 16px;
    /* 38px is the vendor profile's h1; the floor is the size the old design
       stepped down to at 720px, since a control h1 runs to twelve words. */
    font-size: clamp(27px, 5.2vw, 38px);
    font-weight: 700;
    letter-spacing: -1.1px;
    line-height: 1.08;
    color: var(--ink);
    text-wrap: balance;
}
.iso-lead {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--body);
    text-wrap: pretty;
}
/* The two index intros run a step down from the hero lead and sit tight to
   the block they introduce. */
.iso-lead.iso-lead-sm { margin: 0 0 22px; font-size: 14.5px; }

/* --------------------------------------------------------------------------
   On this page
   -------------------------------------------------------------------------- */
.iso-toc {
    margin: 0 0 44px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.iso-toc-label {
    margin-bottom: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}
.iso-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.iso-toc a { font-size: 14px; font-weight: 500; color: var(--body); }
.iso-toc a:hover { color: var(--purple); }

/* --------------------------------------------------------------------------
   Sections + prose
   -------------------------------------------------------------------------- */
.iso-section { margin: 0 0 44px; }
.iso-section > h2,
.iso-section-label {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    line-height: 1.2;
    color: var(--ink);
    text-wrap: pretty;
}
.iso-prose h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
.iso-prose > h3:first-child { margin-top: 0; }
.iso-prose p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.iso-prose ul,
.iso-prose ol { margin: 0 0 16px; padding-left: 22px; }
.iso-prose li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.iso-prose li::marker { color: var(--faint); }
.iso-prose a { color: var(--purple); font-weight: 500; }
.iso-prose a:hover { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 3px; }
.iso-prose strong { color: var(--ink); font-weight: 600; }
.iso-prose > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Panel — the card the two tables and the FAQ sit in
   pub.css's .panel is the same idea at a 20px radius; these blocks are inside
   an 820px column and read better a step tighter.
   -------------------------------------------------------------------------- */
.iso-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* A table can still be wider than a phone; the card scrolls, never the body.
   Naming one axis makes the other compute to auto, so the vertical one is
   pinned back to keep the rounded corners clipping. */
.iso-panel.iso-scroll { overflow-x: auto; overflow-y: hidden; }

/* A table name for assistive tech that the layout has no room to show. */
.iso-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   ISO 27002 control attributes — one row per attribute, tags in the cells
   -------------------------------------------------------------------------- */
.iso-attr { margin: 0 0 44px; }
.iso-attr-table th,
.iso-attr-table td { padding: 15px 22px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.iso-attr-table tr:last-child th,
.iso-attr-table tr:last-child td { border-bottom: none; }
/* pub.css tints table rows on hover; these rows are a definition list, not a
   list of things to click. */
.iso-attr-table tbody tr:hover { background: none; }
.iso-attr-table th { width: 220px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.iso-attr-vals { display: flex; flex-wrap: wrap; gap: 7px; }
.iso-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--soft);
    color: var(--body);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 11px;
    font-weight: 500;
}
.iso-tag::before { content: '#'; color: var(--faint); }

/* --------------------------------------------------------------------------
   Supplier changes that trigger a 5.22 review
   Header row and cell rhythm come from pub.css; only the first column's
   emphasis and width are this table's own.
   -------------------------------------------------------------------------- */
.iso-events { margin: 0 0 44px; }
.iso-events-table td { font-size: 14px; line-height: 1.6; vertical-align: top; }
.iso-events-table td:first-child { width: 40%; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Point-in-time vs continuous evidence — an illustration, not vendor data
   -------------------------------------------------------------------------- */
.iso-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 12px; }
.iso-figure {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.iso-figure-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px 9px;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.iso-figure--stale .iso-figure-tag { color: var(--amber); background: var(--amber-soft); }
.iso-figure--live .iso-figure-tag { color: var(--pos); background: var(--pos-soft); }
.iso-figure-title { margin-bottom: 4px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
.iso-figure-sub { margin-bottom: 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.iso-figrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 13px;
    line-height: 1.45;
    border-top: 1px solid var(--soft);
}
.iso-figrow:first-of-type { border-top: none; }
.iso-figrow-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.iso-figrow-date { margin-left: auto; padding-left: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
.iso-figure--stale .iso-figrow { color: var(--dim); }
.iso-figure--stale .iso-figrow-dot { background: var(--amber-line); }
.iso-figure--stale .iso-figrow-date { color: var(--faint); }
.iso-figure--live .iso-figrow { color: var(--body); }
.iso-figure--live .iso-figrow-dot { background: var(--pos); }
.iso-figure--live .iso-figrow-date { color: var(--dim); }
.iso-figrow-strike { text-decoration: line-through; text-decoration-color: var(--amber-line); }
.iso-figures-note { margin: 0 0 44px; font-size: 12px; color: var(--dim); }

/* --------------------------------------------------------------------------
   5.22 change events, on real vendors
   Same row as pub.css's .ev / .frow, minus the impact counters.
   -------------------------------------------------------------------------- */
.iso-live { margin: 0; }
.iso-live-list { display: flex; flex-direction: column; gap: 10px; }
.iso-live-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    color: var(--ink);
}
.iso-live-item:hover { border-color: var(--purple-line); color: var(--ink); }
.iso-live-favicon { width: 20px; height: 20px; border-radius: 5px; flex: none; background: #fff; object-fit: contain; }
.iso-live-vendor { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); flex: none; }
.iso-live-doc {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iso-live-date { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.iso-live-empty {
    padding: 26px 22px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Control cards — the supplier cluster on the hub, the related controls on a
   control page
   -------------------------------------------------------------------------- */
.iso-cluster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 44px; }
.iso-cluster-card {
    display: block;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.iso-cluster-card:hover {
    border-color: var(--purple-line);
    box-shadow: var(--shadow-n);
    transform: translateY(-2px);
    color: var(--ink);
}
.iso-cluster-id {
    margin-bottom: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--purple);
}
.iso-cluster-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ink); }
.iso-cluster-desc { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   All 93 Annex A controls — one card per theme
   -------------------------------------------------------------------------- */
.iso-index { margin: 0 0 44px; }
.iso-index-theme + .iso-index-theme { margin-top: 26px; }
.iso-index-theme h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--ink);
}
.iso-index-count { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 11px; font-weight: 500; color: var(--faint); }
.iso-index-table th,
.iso-index-table td { padding: 11px 16px; }
.iso-index-table td { font-size: 13.5px; color: var(--body); vertical-align: top; }
.iso-index-table td.iso-index-id {
    width: 62px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}
/* The 2013 ids are comma-separated lists up to 30 characters long. They used
   to be white-space:nowrap, which pushed the whole page sideways on a phone;
   they wrap now and the column is sized for two of them per line. */
.iso-index-table td.iso-index-legacy {
    width: 90px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.iso-index-table a { color: var(--purple); font-weight: 500; }
.iso-index-table a:hover { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   FAQ — pub.css's .faq/.chev inside .iso-panel; only the outer margin is here
   -------------------------------------------------------------------------- */
.iso-faq { margin: 0 0 44px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .iso-figures { grid-template-columns: 1fr; }
    .iso-cluster { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .iso-attr-table th { width: 170px; }
    .iso-events-table td:first-child { width: auto; }
}

@media (max-width: 640px) {
    .iso-layout { padding: 0 22px; }
    .iso-layout > .iso-hero:first-child { padding-top: 44px; }
    .iso-toc { padding: 18px 18px; }
    /* Label over values: two table columns will not both fit on a phone, and
       an attribute value is a single unbreakable token. */
    .iso-attr-table tr,
    .iso-attr-table th,
    .iso-attr-table td { display: block; }
    .iso-attr-table th { width: auto; padding: 15px 18px 0; border-bottom: none; }
    .iso-attr-table td { padding: 9px 18px 15px; }
    .iso-events-table th,
    .iso-events-table td { padding: 12px 16px; }
    .iso-index-table th,
    .iso-index-table td { padding: 10px 12px; }
    .iso-index-table td.iso-index-id { width: 52px; }
    .iso-index-table td.iso-index-legacy { width: 76px; }
    /* The row's three parts stop fitting on one line; the date stays on the
       vendor's line and the document label drops under both, rather than being
       ellipsised into nothing. */
    .iso-live-item { flex-wrap: wrap; row-gap: 4px; }
    .iso-live-date { order: 1; margin-left: auto; }
    .iso-live-doc { order: 2; flex-basis: 100%; white-space: normal; overflow: visible; }
}