/* ============================================================================
   IGC Loyalty · UI/UX Audit
   One stylesheet for two templates (landing + module), ordered
   tokens -> base -> chrome -> landing -> panel -> module -> dialogs -> queries.

   Visual system: "Dossier", on IGC's violet.

   Structure is unchanged: serif display against a mono metadata voice,
   hairline rules instead of card borders, square frames, capture and findings
   side by side. The job of this site is to carry dense evidence credibly.

   Three deliberate departures from the original Dossier:
     1. The accent is IGC's own violet (#7C3AED, sampled from the product's
        primary button) rather than an oxidised orange, so the audit sits in
        the client's palette instead of fighting it.
     2. The ground is not flat black. A single soft violet light source sits
        at the top right of the page and is gone by 760px, so the masthead has
        depth and the evidence below it does not.
     3. Anything you click is rounded (--r-*). Anything you read — frames,
        rules, ledger cells — stays square. Rounding the surfaces too is what
        makes a dark violet UI read as generic.

   The audit reports problems only. There is no strength severity: it was
   removed from the data and from every code path, so adding a fourth colour
   back here would be re-introducing a category that no longer exists.

   Colour: every text/background pair below is at or above WCAG 1.4.3 AA
   (4.5:1 body, 3:1 large). Ratios are measured against --ink-lit, the ground
   at its brightest under the glow, not against flat --ink, because that is
   where the masthead text actually sits. Recorded beside each token so a
   future edit knows why the value is what it is. Re-check before changing one.
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --ink:#0A0812;              /* page ground */
  --ink-lit:#2F1C45;          /* ground composited under the glow at its peak;
                                 all ratios below are measured against this */
  --ink-2:#0D0A17;            /* raised ground: top bar, dialogs */
  --ink-3:#140F22;            /* a modest step up from --ink-2: the module
                                 panel's scrollable body, distinct enough to
                                 read as its own surface without competing
                                 with the fixed header above it */
  --panel:#120E1E;            /* framed surfaces */
  --line:rgba(232,229,243,0.12);
  --line-soft:rgba(232,229,243,0.065);

  --tx:#EDEAF6;               /* 12.89:1 on --ink-lit, 16.76:1 on --ink */
  --tx-2:#ABA5BC;             /*  6.44:1 on --ink-lit */
  --tx-3:#928C9E;             /*  4.71:1 on --ink-lit. Was #8E8799 = 4.43:1
                                  once the glow was added over it */

  --acc:#7C3AED;              /* fills. White label on it = 5.70:1. IGC's own
                                 primary; #8B5CF6 only reaches 4.23:1 */
  --acc-hv:#6D2FD9;           /* the fill on hover. 6.87:1 */
  --acc-tx:#BFA8FB;           /* the accent as text. 7.44:1 on --ink-lit */
  --acc-soft:rgba(124,58,237,0.13);
  --acc-line:rgba(124,58,237,0.34);

  --high:#F58BAC;             /*  6.68:1 on --ink-lit */
  --moderate:#E6BC6A;         /*  8.57:1 on --ink-lit */
  --minor:#7FCB94;            /*  7.92:1 on --ink-lit, 10.29:1 on --ink.
                                  Was grey (#9C96A8); moved to green so minor
                                  severity reads as its own hue rather than a
                                  fainter version of the metadata grey used
                                  everywhere else on the page */

  --fw-wcag:#8FB4E4;
  --fw-laws:#C9A2E8;
  --fw-heuristics:#E0B26F;
  --fw-platform:#84C3B4;

  --font-ui:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Radii apply to controls only. Frames, rules and ledger cells stay at 0. */
  --r-btn:10px;               /* buttons, tiles you can click */
  --r-ctl:8px;                /* smaller controls: tabs, chips, close buttons */

  --nav-h:64px;
  --shell:1440px;
  --pad:clamp(20px,4vw,56px);
  --ease:0.18s ease;
}

/* --- 2. Base ------------------------------------------------------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;}
/* One light source, top right, declared once.
   Two non-repeating radial layers sized to the top 760px of the page, so the
   glow cannot tile down the document however long a module gets. The magenta
   is a counterweight at 5.5%, not a second light — two competing glows is the
   thing that makes a dark violet page look machine-made. */
body{
  background:
    radial-gradient(880px 400px at 82% 0,rgba(139,92,246,0.20),transparent 64%) no-repeat,
    radial-gradient(620px 320px at 4% 0,rgba(236,72,153,0.055),transparent 62%) no-repeat,
    var(--ink);
  background-size:100% 760px,100% 760px,auto;
  color:var(--tx);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.62;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--acc-tx);}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--acc-tx);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad);}

/* The landing page reads as three sections stacked in a tall viewport: the
   brand row, the hero copy, and the ledger. Flex space-between spreads them
   out so the brand row and ledger drift toward the top and bottom of the
   viewport as it grows, while the hero copy holds the visual middle — without
   the outer two ever reaching the true edge, which the padding below (large
   screens only) guards against. On narrow screens there is rarely enough
   spare height for this to matter, so no extra inset is added there. */
#main{min-height:calc(100dvh - var(--nav-h));display:flex;flex-direction:column;justify-content:space-between;}
@media (min-width:861px){
  #main{padding-block:clamp(24px,5vh,64px);}
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:300;
  background:var(--acc);color:#fff;font-weight:600;font-size:14px;border-radius:var(--r-ctl);
  padding:10px 16px;text-decoration:none;transition:top var(--ease);
}
.skip-link:focus{top:16px;}

/* --- 3. Top bar ---------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-inline:var(--pad);
  /* Translucent rather than solid, so the glow behind it stays continuous with
     the masthead instead of being sliced off by an opaque bar. */
  background:rgba(10,8,18,0.78);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--ink-2);}}
.brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--tx);text-decoration:none;}
.brand-mark{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.brand-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-label b{color:var(--tx);font-weight:500;}
.brand-label i{font-style:normal;color:var(--tx-3);}
.modules-btn{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  min-height:40px;padding:0 14px;border-radius:var(--r-ctl);
  background:transparent;border:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tx);cursor:pointer;transition:border-color var(--ease),background var(--ease);
}
.modules-btn:hover{border-color:var(--acc-line);background:var(--acc-soft);}
.modules-btn i{display:block;width:14px;height:1px;background:currentColor;position:relative;flex-shrink:0;}
.modules-btn i::before,.modules-btn i::after{
  content:"";position:absolute;left:0;width:14px;height:1px;background:currentColor;
}
.modules-btn i::before{top:-4px;}
.modules-btn i::after{top:4px;}
.modules-btn .n{color:var(--acc-tx);}

/* --- 4. Severity and reference tags -------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tx-2);
}
.tag::before{content:"";width:14px;height:2px;background:currentColor;flex-shrink:0;}
.tag.high{color:var(--high);}
.tag.moderate{color:var(--moderate);}
.tag.minor{color:var(--minor);}
.tag.device{color:var(--tx-3);}
.tag.device::before{display:none;}
.tag.ref{color:var(--acc-tx);}
.tag.ref::before{display:none;}

/* --- 5. Landing masthead ------------------------------------------------- */
/* The brand row now lives in its own flex section (.mast-row) ahead of the
   hero copy, so the two can be pulled apart on tall viewports instead of
   sitting fused together. */
.mast-row{padding-top:clamp(20px,3vw,28px);}
.masthead{padding:clamp(20px,3vw,28px) 0 clamp(34px,4.4vw,54px);}
.masthead-top{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
}
.masthead-top .rule{flex:1;height:1px;background:var(--line);min-width:24px;}
.mast-logo{display:flex;align-items:center;gap:10px;}
.mast-logo img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.mast-logo span{font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;}
.mast-madison{width:clamp(112px,12vw,150px);height:auto;}

.masthead h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(42px,7.4vw,86px);line-height:0.98;letter-spacing:-0.015em;max-width:24ch;
}
.masthead h1 em{font-style:italic;color:var(--acc-tx);}
.mast-sub{
  margin:clamp(18px,2.4vw,26px) 0 0;max-width:60ch;
  font-size:clamp(15px,1.5vw,17px);color:var(--tx-2);line-height:1.6;
}
.mast-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px);}
/* Rounded, per the Studio direction. The label stays mono and uppercase — the
   roundness is the only thing borrowed; a rounded button with a soft sans
   label is the generic pairing this system is trying to avoid. */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;
  border-radius:var(--r-btn);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  border:1px solid var(--line);background:transparent;color:var(--tx);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:border-color var(--ease),background var(--ease);
}
.btn:hover{border-color:var(--acc-line);background:var(--acc-soft);}
/* Flat violet, no gradient. The gradient button was the one part of Studio
   that read as template, so it is dropped. */
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:500;}
.btn.primary:hover{background:var(--acc-hv);border-color:var(--acc-hv);}

/* Ledger: the audit's own numbers, stated plainly rather than illustrated.
   The rule above it sits on the full-width wrapper rather than the
   inner .shell, so it spans edge to edge the same way the masthead's
   divider used to, instead of stopping at the content column's padding. */
.ledger-wrap{border-top:1px solid var(--line);}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));}
.ledger div{
  padding:22px 14px 26px;border-right:1px solid var(--line-soft);text-align:center;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.ledger div:last-child{border-right:0;}
.ledger b{
  display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.6vw,44px);
  line-height:1;letter-spacing:0;color:var(--tx);margin-bottom:8px;
}
.ledger .high b{color:var(--high);}
.ledger .moderate b{color:var(--moderate);}
.ledger .minor b{color:var(--minor);}

/* Contact sheet: real captures, hairline framed, captioned. No tilt, no glow. */
.sheet{padding:clamp(30px,4.2vw,52px) 0 clamp(46px,7vw,80px);}
.sheet-head{
  display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;color:var(--tx-3);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
}
.sheet-head h2{margin:0;font:inherit;letter-spacing:inherit;}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);}
.sheet-item{min-width:0;margin:0;}
.sheet-item .frame{border:1px solid var(--line);background:var(--panel);overflow:hidden;}
.sheet-item img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;}
.sheet-item figcaption{
  padding-top:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}

/* --- 6. Module browser panel --------------------------------------------- */
.panel-overlay{position:fixed;inset:0;z-index:200;display:none;background:var(--ink);overflow:hidden;}
.panel-overlay.open{display:flex;flex-direction:column;}
.panel-fixed{
  position:relative;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--ink-2);
  padding:clamp(18px,2.6vw,26px) var(--pad) 0;
}
.panel-bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  max-width:var(--shell);margin:0 auto;padding-right:52px;
}
.panel-bar h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,3.4vw,38px);line-height:1;letter-spacing:-0.01em;
}
.panel-bar .count{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.panel-close{
  position:absolute;top:16px;right:var(--pad);z-index:2;
  width:40px;height:40px;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:var(--ink-2);
  color:var(--tx);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--ease);
}
.panel-close:hover{border-color:var(--acc);}
.panel-tabs{
  display:flex;gap:clamp(14px,2.4vw,30px);max-width:var(--shell);margin:0 auto;
  padding-top:clamp(16px,2.2vw,24px);overflow-x:auto;scrollbar-width:none;
}
.panel-tabs::-webkit-scrollbar{display:none;}
.panel-tab{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  background:0;border:0;border-bottom:3px solid transparent;padding:0 0 12px;
  cursor:pointer;color:var(--tx-3);white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  transition:color var(--ease),border-color var(--ease);
}
.panel-tab:hover{color:var(--tx-2);}
/* 3px rather than 1px so the active tab is legible as active at a glance,
   not just a slightly brighter label. */
.panel-tab[aria-selected="true"]{color:var(--tx);border-bottom-color:var(--acc);}
.tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc-tx);font-size:10px;
}
.panel-tab[aria-selected="true"] .tab-count{background:var(--acc);color:#fff;}
/* One step lighter than the fixed header above it (--ink-3 over --ink-2),
   so scrolling reads as moving into a distinct surface rather than a
   continuation of the same flat ground the title and tabs sit on. Left
   short of --panel, which the tiles' own frames use, so the tiles still
   read as objects sitting on this surface rather than blending into it. */
.panel-scroll{flex:1;background:var(--ink-3);overflow-y:auto;overscroll-behavior:contain;}
.panel-scroll-inner{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(24px,3.4vw,40px) var(--pad) clamp(48px,7vw,88px);
}

.mod-grid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:clamp(22px,2.4vw,34px);
}
.mod-cell{min-width:0;}
.mod-cell[hidden]{display:none;}
/* The title sits under the frame. It used to overlay the capture, where a
   light screenshot left it unreadable on roughly half the tiles. */
.mod-tile{display:block;text-decoration:none;color:inherit;}
.mod-tile .frame{border:1px solid var(--line);background:var(--panel);overflow:hidden;border-radius:var(--r-btn);}
.mod-tile img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transition:opacity var(--ease);
}
.mod-tile:hover .frame{border-color:var(--acc);}
.mod-tile:hover img{opacity:0.86;}
.tile-body{padding-top:12px;display:flex;flex-direction:column;gap:7px;}
.tile-body h3{margin:0;font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-0.005em;}
.tile-meta{
  display:flex;flex-wrap:wrap;gap:4px 12px;min-height:16px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--tx-3);
}
.tile-meta .high{color:var(--high);}
.tile-meta .moderate{color:var(--moderate);}
.tile-meta .minor{color:var(--minor);}
.mod-tile.disabled{
  border:1px dashed var(--line);background:var(--ink-2);padding:26px 20px;min-height:186px;
  display:flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--r-btn);
}
.pending-body{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--tx-3);}
.pending-icon{display:block;width:22px;height:22px;}
.pending-icon svg{width:100%;height:100%;}
.pending-body p{margin:0;font-size:15px;color:var(--tx-2);}
.pending-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;}

/* --- 7. Module page ------------------------------------------------------ */
.mod-page{padding-bottom:clamp(46px,6.5vw,78px);}
.mod-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:var(--tx-3);
}
.mod-bar .crumb{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.mod-bar .crumb b{color:var(--acc-tx);font-weight:400;}
.mod-bar .crumb em{font-style:normal;color:var(--tx);}

.mod-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);
  align-items:end;padding:clamp(32px,4.4vw,58px) 0 clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--line);
}
.mod-head h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,5.6vw,68px);line-height:0.99;letter-spacing:-0.015em;
}
.mod-head .lede{margin:16px 0 0;max-width:60ch;color:var(--tx-2);font-size:15.5px;}
.tally{display:flex;}
.tally div{
  padding:0 clamp(14px,1.6vw,22px);border-left:1px solid var(--line);text-align:right;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.tally div:first-child{border-left:0;padding-left:0;}
.tally div:last-child{padding-right:0;}
.tally b{
  display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.2vw,38px);
  line-height:1;letter-spacing:0;margin-bottom:6px;
}
.tally .high b{color:var(--high);}
.tally .moderate b{color:var(--moderate);}
.tally .minor b{color:var(--minor);}

.mod-body{
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(318px,1fr);
  border-bottom:1px solid var(--line);
}
.mod-evidence{
  padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px) clamp(30px,4vw,46px) 0;
  border-right:1px solid var(--line);min-width:0;
}
.mod-rail{padding:clamp(24px,3vw,36px) 0 clamp(30px,4vw,46px) clamp(24px,3vw,38px);min-width:0;}

.device-tabs{display:flex;flex-wrap:wrap;gap:6px clamp(12px,1.8vw,24px);margin-bottom:22px;}
.device-tab{
  background:0;border:0;border-bottom:1px solid transparent;padding:0 0 8px;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tx-3);transition:color var(--ease),border-color var(--ease);
}
.device-tab:hover{color:var(--tx-2);}
.device-tab[aria-selected="true"]{color:var(--tx);border-bottom-color:var(--acc);}

.shot-frame[hidden]{display:none;}
.shot-stack{display:grid;gap:clamp(16px,2vw,24px);}
.shot-media{position:relative;border:1px solid var(--line);background:var(--panel);}
.shot-media img{width:100%;}
.shot-caption,.shot-hint{
  margin:12px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}
.shot-hint{margin-top:16px;text-align:center;}
/* Portrait phone captures render at phone width rather than stretched to the
   column, and the evidence column narrows to suit them. A 1170 x 2532 capture
   filling a 900px column reads as a blurred wall of interface rather than as a
   phone screen, and leaves the findings rail cramped for no gain. */
.mod-page--mobile .mod-body{grid-template-columns:minmax(0,0.62fr) minmax(340px,1fr);}
.mod-page--mobile .shot-media{max-width:392px;}
.mod-page--mobile .shot-stack{
  grid-template-columns:repeat(auto-fit,minmax(240px,392px));justify-content:start;
}

.pin-btn{
  position:absolute;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  background:rgba(10,8,18,0.86);color:var(--tx);border:1.5px solid var(--acc-tx);
  box-shadow:0 0 0 3px rgba(10,8,18,0.5);
  transition:transform var(--ease),background var(--ease),color var(--ease);
}
.pin-btn:hover,.pin-btn:focus-visible{background:var(--acc);color:#fff;transform:translate(-50%,-50%) scale(1.12);}
.pin-btn.is-active{background:var(--acc);color:#fff;}
.pin-btn[disabled]{cursor:default;opacity:0.5;}

.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 14px 6px;}
.rail-head h2,.rail-head span{
  margin:0;font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--tx-3);
}
/* Findings rows.
   Severity is a colour bar down the left edge rather than a word, so the mix
   of a module is readable from the shape of the column before anything in it
   is read. The bar is the row's only saturated element; the title, summary and
   citations are a single grey ramp, which is what keeps a dense column calm. */
.find-item{
  display:grid;grid-template-columns:3px minmax(0,1fr);gap:14px;width:100%;
  padding:16px 14px;border:0;border-top:1px solid var(--line-soft);border-radius:var(--r-ctl);
  background:transparent;text-align:left;cursor:pointer;transition:background var(--ease);
}
.find-item:first-of-type{border-top:1px solid var(--line);}
.find-item::before{content:"";border-radius:2px;background:var(--tx-3);margin:2px 0;}
.find-item.high::before{background:var(--high);}
.find-item.moderate::before{background:var(--moderate);}
.find-item.minor::before{background:var(--minor);}
.find-item:hover{background:var(--acc-soft);}
.find-body{display:block;min-width:0;}
.find-top{display:flex;align-items:baseline;gap:14px;}
.find-item h3{
  margin:0;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:-0.005em;color:var(--tx);
}
/* Echoes .pin-btn so the number here reads as the same marker shown on the
   capture, rather than a per-module code ("TNB-01") that meant nothing to a
   visitor and didn't visually tie back to anything on screen. Turns accent
   when its row is hovered or focused, in sync with the real marker. */
.find-marker{
  margin-left:auto;flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:500;
  background:rgba(10,8,18,0.86);color:var(--tx);border:1.5px solid var(--acc-tx);
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.find-item:hover .find-marker,.find-item:focus-visible .find-marker{
  background:var(--acc);color:#fff;border-color:var(--acc);
}
/* Two lines of the finding's own "why it matters". Clamped rather than
   truncated server-side so the full sentence stays in the DOM for search and
   for anyone reading with a screen reader. */
.find-sum{
  margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--tx-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden;
}
.find-refs{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
.find-refs span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.07em;
  padding:2px 8px;border:1px solid var(--line-soft);border-radius:var(--r-ctl);
  background:rgba(255,255,255,0.06);color:var(--tx-3);white-space:nowrap;cursor:help;
}

.mod-nav{display:flex;justify-content:space-between;gap:16px;padding-top:clamp(22px,3vw,32px);}
.mod-nav a{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;max-width:46%;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.mod-nav a:last-child{text-align:right;align-items:flex-end;}
.mod-nav a b{
  font-family:var(--font-ui);font-size:15px;font-weight:500;letter-spacing:-0.005em;
  text-transform:none;color:var(--tx);line-height:1.35;
}
.mod-nav a:hover b{color:var(--acc-tx);}

.mod-error{padding:clamp(56px,9vw,110px) 0;max-width:56ch;}
.mod-error h1{
  margin:0 0 14px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,4.4vw,52px);line-height:1.02;
}
.mod-error p{margin:0 0 26px;color:var(--tx-2);}

/* --- 8. Dialogs ---------------------------------------------------------- */
.dialog-overlay{
  position:fixed;inset:0;z-index:220;display:none;
  align-items:stretch;justify-content:center;
  padding:clamp(10px,1.8vh,28px) clamp(10px,2vw,28px);
  background:rgba(6,5,4,0.84);overscroll-behavior:contain;
}
.dialog-overlay.open{display:flex;}
.dialog{
  position:relative;width:100%;max-width:none;border-radius:var(--r-btn);
  background:var(--ink-2);border:1px solid var(--line);padding:clamp(26px,3.4vw,44px);
  overflow-y:auto;overscroll-behavior:contain;
}
/* position:sticky kept leaving a ghost of scrolled content behind the header
   in some browsers no matter what was tried to force a clean repaint, so the
   header isn't sticky anymore, it's a structurally separate, non-scrolling
   region. .finding-dialog becomes a fixed-height column; .finding-head is a
   normal block at the top of it; .finding-body is the only part that scrolls,
   in its own box with its own overflow. Nothing to bleed through because the
   header was never part of the scrolling content in the first place, and
   unlike the earlier version, the rounded corner here is just clipping a
   flex column via overflow:hidden, not sitting on the same element as the
   scrolling content, so it's back to matching every other dialog on the
   site, executive summary included, without reintroducing the bug. */
.dialog.finding-dialog{
  display:flex;flex-direction:column;border-radius:var(--r-btn);padding:0;overflow:hidden;
}
.dialog-close{
  position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:var(--r-ctl);
  border:1px solid var(--acc);background:var(--acc);color:#fff;
  font-size:19px;line-height:1;cursor:pointer;transition:background var(--ease),border-color var(--ease);
}
.dialog-close:hover{background:var(--acc-hv);border-color:var(--acc-hv);}

.finding-head{
  position:relative;flex:none;
  padding:clamp(26px,3.4vw,44px) 52px 22px clamp(26px,3.4vw,44px);
  background:var(--ink-2);border-bottom:1px solid var(--line);
}
.finding-num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--acc-tx);margin-bottom:12px;
}
.finding-head h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(25px,3.2vw,38px);line-height:1.08;letter-spacing:-0.01em;
}
.finding-tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;}

.finding-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:26px clamp(26px,3.4vw,44px) clamp(30px,4vw,46px);
}
.fw-note{padding:22px 0;border-bottom:1px solid var(--line-soft);}
.fw-note:first-child{padding-top:0;}
.fw-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 4px;}
.fw-source{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--acc-tx);
}
.fw-wcag .fw-source{color:var(--fw-wcag);}
.fw-laws .fw-source{color:var(--fw-laws);}
.fw-heuristics .fw-source{color:var(--fw-heuristics);}
.fw-platform .fw-source{color:var(--fw-platform);}
.fw-concept{font-size:16px;font-weight:500;letter-spacing:-0.005em;color:var(--tx);}
/* Plain-language line, so a reader who has never met the framework still knows
   what is being claimed before they read the evidence. */
.fw-gloss{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--tx-3);}
.fw-text{margin:0;color:var(--tx-2);font-size:15px;}

.impact{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.impact-label,.rec-label{
  margin:0 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--tx-3);
}
.impact p{margin:0;color:var(--tx);font-size:15.5px;}
.finding-note{margin:18px 0 0;color:var(--tx-3);font-size:14px;}

.rec{margin-top:26px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.rec-block{border-left:2px solid var(--acc);padding-left:18px;}
.rec-block ul{margin:0;padding-left:18px;color:var(--tx-2);font-size:15px;}
.rec-block li+li{margin-top:8px;}
.rec-block p.single{margin:0;color:var(--tx-2);font-size:15px;}

/* Executive summary */
.exec-dialog{max-width:none;}
.exec-head{padding:0 52px 22px 0;border-bottom:1px solid var(--line);}
.exec-eyebrow{
  margin:0 0 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--acc-tx);
}
.exec-head h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.6vw,44px);line-height:1.04;letter-spacing:-0.01em;
}
.exec-scope{
  margin:12px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}
.exec-body{padding-top:28px;}
.exec-grid{display:grid;gap:clamp(26px,3.4vw,52px);grid-template-columns:minmax(0,1.35fr) minmax(258px,1fr);}
.exec-block+.exec-block{margin-top:32px;}
.exec-block h3{
  margin:0 0 14px;font-family:var(--font-mono);font-size:10px;font-weight:400;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--tx-3);
}
.exec-block p{margin:0 0 12px;color:var(--tx-2);font-size:15.5px;}
.exec-block ul{margin:0;padding:0;list-style:none;}
.exec-block li{padding:14px 0;border-top:1px solid var(--line-soft);color:var(--tx-2);font-size:15px;}
.exec-block li:first-child{border-top:0;padding-top:0;}
.exec-block li b{color:var(--tx);font-weight:500;}
.exec-head .auditor-card{display:flex;align-items:center;gap:22px;margin-top:20px;}
.auditor-photo{width:112px;height:112px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.auditor-info{min-width:0;}
.auditor-name{margin:0;font-size:19px;font-weight:500;color:var(--tx);}
/* Matches the typographic voice of the "Prepared by" line it replaced: mono,
   tracked, uppercase, the same quiet grey. */
.auditor-title{
  margin:5px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}
.auditor-link{
  display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--acc-tx);text-decoration:none;
}
.auditor-link:hover{text-decoration:underline;}

/* Methodology and framework: each reference is a real link out to its source,
   so the citation is checkable rather than asserted. */
.method-list{display:flex;flex-wrap:wrap;gap:10px;}
.method-link{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:8px 13px;border-radius:var(--r-ctl);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--tx-2);text-decoration:none;transition:border-color var(--ease),background var(--ease);
}
.method-link:hover{border-color:var(--acc-line);background:var(--acc-soft);color:var(--tx);}
.method-link i{font-style:normal;color:var(--tx-3);}
.sev-table{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;}
.sev-count{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;text-align:right;}
.sev-count.high{color:var(--high);}
.sev-count.moderate{color:var(--moderate);}
.sev-count.minor{color:var(--minor);}
.sev-label{color:var(--tx-3);font-size:13.5px;line-height:1.45;}
.sev-label b{display:block;color:var(--tx);font-size:15px;font-weight:500;}
.focus-list{display:flex;flex-wrap:wrap;gap:8px;}
.focus-chip{
  border:1px solid var(--line);padding:6px 11px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--tx-2);
}

/* --- 9. Breakpoints ------------------------------------------------------ */
@media (max-width:1120px){
  .mod-body,.mod-page--mobile .mod-body{grid-template-columns:minmax(0,1fr);}
  .mod-evidence{border-right:0;border-bottom:1px solid var(--line);padding-right:0;}
  .mod-rail{padding-left:0;}
  .exec-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:860px){
  .mod-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:26px;}
  .tally{justify-content:flex-start;flex-wrap:wrap;gap:14px 0;}
  .sheet-grid{grid-template-columns:1fr;}
  .sheet-item:nth-child(n+3){display:none;}
  .ledger{grid-template-columns:repeat(2,1fr);}
  .ledger div{border-bottom:1px solid var(--line-soft);}
  .ledger div:nth-child(2n){border-right:0;}
  /* Five stats in a two-up grid leaves one cell orphaned on its own row. It
     spans both columns instead of sitting half-width with an empty cell
     beside it, and drops the divider since nothing follows it. */
  .ledger div:last-child{grid-column:1 / -1;border-right:0;border-bottom:0;}
}
@media (max-width:640px){
  body{font-size:15.5px;}
  .brand-label i{display:none;}
  .modules-btn .label{display:none;}
  .modules-btn{padding:0 12px;}
  /* Stacked buttons that each hug their own label read as mismatched once
     they are full-width rows rather than a side-by-side pair. Matching
     widths reads as one deliberate pair of actions instead of two
     differently-sized accidents. */
  .mast-cta{flex-direction:column;align-items:stretch;}
  .mast-cta .btn{width:100%;justify-content:center;}
  .mod-bar{flex-direction:column;align-items:flex-start;gap:8px;}
  .mod-page--mobile .shot-media{max-width:100%;}
  .find-item{grid-template-columns:24px minmax(0,1fr);gap:10px;}
  .dialog{padding:24px 18px 30px;}
  .dialog.finding-dialog{padding:0;}
  .finding-head{padding:24px 44px 18px 18px;}
  .finding-body{padding:20px 18px 30px;}
  .exec-head{padding-right:44px;}
  .rec{grid-template-columns:minmax(0,1fr);gap:18px;}
  .mod-nav{flex-direction:column;gap:20px;}
  .mod-nav a,.mod-nav a:last-child{max-width:100%;align-items:flex-start;text-align:left;}
  .panel-bar{flex-direction:column;align-items:flex-start;gap:6px;}
}
@media (max-width:360px){
  .ledger{grid-template-columns:1fr;}
  .ledger div{border-right:0;border-bottom:1px solid var(--line-soft);padding-bottom:18px;}
  .ledger div:last-child{border-bottom:0;}
}