/* ══════════════════════════════════════════════════════
   ZEXCA — the Legal & Regulatory Center
   ══════════════════════════════════════════════════════
   A hundred documents on one page. The design problem is not how they look —
   it is whether a reader can FIND the one they need, READ it without fatigue,
   and CITE it afterwards. Everything below serves one of those three.

   ── WHY ONE PAGE AND NOT A HUNDRED ──
   A legal centre split across a hundred URLs is a centre nobody reads: the
   reader loses their place, the browser's own find-in-page stops working, and
   printing the set becomes impossible. One document with a hundred anchors
   keeps Cmd-F, keeps deep links, and prints.

   ── THE MEASURE IS THE ACCESSIBILITY FEATURE ──
   Legal text is read under obligation rather than for pleasure, and the
   difference between a 110-character line and a 70-character one is whether
   somebody finishes the paragraph. Nothing here runs wider than 68ch, the
   line-height is 1.8, and the type is a size larger than the rest of the site.
   ══════════════════════════════════════════════════════ */

body.lg{
  --lg-s1:12px; --lg-s2:22px; --lg-s3:40px;
  --lg-s4:clamp(52px,6vw,88px);
  background:var(--bg-0);
}

/* ══ THE HEAD ═════════════════════════════════════════ */
.lg-head{
  padding-block:calc(var(--ld-nav-h) + var(--lg-s4)) var(--lg-s4);
  border-bottom:1px solid var(--line-2);
  background:
    radial-gradient(80% 60% at 20% 0%,rgba(232,182,71,.05),transparent 58%),
    var(--bg-0);
}
.lg-eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--lg-s2);
}
.lg-h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(30px,4.6vw,56px);line-height:1.06;letter-spacing:-.028em;
  color:var(--fg);margin-bottom:var(--lg-s2);
}
.lg-lead{
  font-size:clamp(15px,1.3vw,17px);line-height:1.75;color:var(--fg-2);
  max-width:68ch;
}

/* ── Version control ──
   The source document requires every document in this centre to carry these.
   They are set as a definition list because that is what they are. */
.lg-version{
  display:flex;flex-wrap:wrap;gap:var(--lg-s2) var(--lg-s3);
  margin-top:var(--lg-s3);padding-top:var(--lg-s2);
  border-top:1px solid var(--line-2);
}
.lg-version div{display:grid;gap:5px;}
.lg-version dt{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);
}
.lg-version dd{
  margin:0;font-family:var(--f-mono);font-size:13px;color:var(--fg-2);
}

/* ── AN UNFILLED FIELD LOOKS UNFILLED ──
   The one visual decision on this page that is really a legal one. A blank
   that renders as ordinary text reads as a value; this reads as a gap, which
   is what it is. Section 73 of the document set requires that nothing imply an
   authorization that does not exist. */
.lg-blank{
  font-style:normal;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--fg-3);
  padding:2px 8px;border:1px dashed var(--line);border-radius:3px;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.02) 0 6px,transparent 6px 12px);
  white-space:nowrap;
}
.lg-blank.sm{font-size:10.5px;padding:1px 6px;}

/* ── The status banner ── */
.lg-status{
  margin-top:var(--lg-s3);padding:clamp(18px,2.4vw,26px);
  border:1px solid rgba(232,182,71,.28);border-radius:var(--r3);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(232,182,71,.07),transparent 62%),
    var(--bg-1);
  max-width:78ch;
}
.lg-status b{
  display:block;font-family:var(--f-display);font-weight:700;font-size:16px;
  color:var(--gold-lt);margin-bottom:10px;
}
.lg-status p{font-size:14px;line-height:1.75;color:var(--fg-2);}

/* ══ THE NOTICES ══════════════════════════════════════
   Placed BEFORE the document list. A reader who gets no further than this
   screen has still read the risk notice, and that is the one thing on this page
   that must not depend on somebody scrolling. */
.lg-notices{padding-block:var(--lg-s4);}
.lg-notices .ld-wrap{display:grid;gap:var(--lg-s2);}
@media(min-width:1000px){ .lg-notices .ld-wrap{grid-template-columns:repeat(3,1fr);} }
.lg-notice{
  padding:clamp(18px,2.2vw,24px);
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--bg-1);
}
/* The risk notice carries the weight the others do not. */
.lg-notice.warn{
  border-color:rgba(246,70,93,.3);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(246,70,93,.07),transparent 60%),
    var(--bg-1);
}
.lg-notice-k{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:12px;
}
.lg-notice.warn .lg-notice-k{color:var(--down);}
.lg-notice p{font-size:13.5px;line-height:1.75;color:var(--fg-2);}

/* ══ THE SHELL ════════════════════════════════════════ */
.lg-shell{padding-block:var(--lg-s4);border-top:1px solid var(--line-2);}
.lg-grid{display:grid;gap:var(--lg-s3);align-items:start;}
@media(min-width:1040px){
  .lg-grid{grid-template-columns:290px minmax(0,1fr);gap:var(--lg-s4);}
}

/* ── The contents ──
   Sticky on a wide screen, a closed disclosure on a narrow one. A hundred
   links stacked above the content would be a wall to scroll past on a phone. */
.lg-aside{position:relative;}
@media(min-width:1040px){
  .lg-aside{position:sticky;top:calc(var(--ld-nav-h) + 16px);
    max-height:calc(100vh - var(--ld-nav-h) - 32px);
    max-height:calc(100dvh - var(--ld-nav-h) - 32px);display:flex;}
  .lg-toc-wrap{display:flex;flex-direction:column;min-height:0;width:100%;}
}
.lg-toc-sum{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
  padding-bottom:var(--lg-s1);border-bottom:1px solid var(--line-2);
}
.lg-toc-sum::-webkit-details-marker{display:none;}
.lg-toc-sum span{
  margin-inline-start:auto;letter-spacing:.04em;text-transform:none;
  color:var(--fg-3);
}

/* ── The filter ──
   A hundred titles is exactly the size at which scanning stops working and
   typing starts. It filters the CONTENTS and the DOCUMENTS together, so the
   page never shows a list that disagrees with what is under it. */
.lg-find{padding-block:var(--lg-s2) var(--lg-s1);}
.lg-find-l{
  display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:7px;
}
.lg-find-i{
  width:100%;padding:9px 12px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2);
  color:var(--fg);font-family:var(--f-body);font-size:13.5px;
  transition:border-color .2s var(--ease);
}
.lg-find-i:focus{outline:none;border-color:var(--gold);}
.lg-find-i::placeholder{color:var(--fg-3);}
.lg-find-n{
  font-family:var(--f-mono);font-size:10.5px;color:var(--fg-3);
  margin-top:8px;min-height:1em;
}

.lg-toc{
  list-style:none;margin:0;padding:0 4px 0 0;
  overflow-y:auto;min-height:0;flex:1;
}
.lg-toc::-webkit-scrollbar{width:3px;}
.lg-toc::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}
.lg-toc-cat{margin-bottom:var(--lg-s2);}
.lg-toc-h{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);
  padding-block:6px;text-decoration:none;
  transition:color .2s var(--ease);
}
.lg-toc-h:hover{color:var(--gold);}
.lg-toc-sub{list-style:none;margin:0;padding:0;display:grid;}
.lg-toc-sub a{
  display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:baseline;
  padding:5px 8px;border-radius:var(--r1);
  font-size:12.5px;line-height:1.4;color:var(--fg-3);text-decoration:none;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lg-toc-sub a span{
  font-family:var(--f-mono);font-size:9.5px;color:var(--gold-dk);
}
.lg-toc-sub a:hover{color:var(--fg-2);background:rgba(255,255,255,.035);}
/* Where the reader is. Set by `legal.js`; without it nothing is highlighted
   and the list still works. */
.lg-toc-sub a.on{color:var(--gold-lt);background:rgba(232,182,71,.09);}
.lg-toc-sub a.on span{color:var(--gold);}

/* ══ A CATEGORY ═══════════════════════════════════════ */
.lg-cat{margin-bottom:var(--lg-s4);scroll-margin-top:calc(var(--ld-nav-h) + 20px);}
.lg-cat-h{
  padding-bottom:var(--lg-s2);margin-bottom:var(--lg-s3);
  border-bottom:1px solid var(--line);
  display:grid;gap:8px;
}
.lg-cat-t{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(22px,2.8vw,34px);line-height:1.1;letter-spacing:-.024em;
  color:var(--fg);
}
.lg-cat-d{font-size:14px;line-height:1.65;color:var(--fg-3);max-width:60ch;}
.lg-cat-c{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dk);
}

/* ══ A DOCUMENT ═══════════════════════════════════════ */
.lg-doc{
  padding-block:var(--lg-s3);
  border-top:1px solid var(--line-2);
  /* So a deep link does not land the heading under the fixed header. */
  scroll-margin-top:calc(var(--ld-nav-h) + 20px);
}
.lg-cat .lg-doc:first-of-type{border-top:0;padding-top:0;}
.lg-doc-h{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;
  align-items:baseline;margin-bottom:var(--lg-s2);
}
.lg-n{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  color:var(--gold);
}
.lg-doc-t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(17px,1.9vw,23px);line-height:1.24;letter-spacing:-.016em;
  color:var(--fg);
}
/* The anchor. Present always rather than on hover — a citable document should
   not hide the thing you cite it by, and a hover-only control does not exist
   on a touch screen at all. */
.lg-anchor{
  font-family:var(--f-mono);font-size:13px;color:var(--line);
  text-decoration:none;padding:2px 6px;border-radius:var(--r1);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lg-anchor:hover,.lg-anchor:focus-visible{color:var(--gold);background:rgba(232,182,71,.1);}
.lg-doc:target .lg-doc-t{color:var(--gold-lt);}
.lg-doc:target{
  background:linear-gradient(90deg,rgba(232,182,71,.055),transparent 60%);
  box-shadow:inset 3px 0 0 var(--gold);
  padding-inline-start:clamp(14px,1.8vw,22px);
}

/* ── The body ──
   Everything below is set for reading under obligation: a short measure, an
   open line-height, and a size a step above the rest of the site. */
.lg-body{max-width:68ch;}
.lg-body p{font-size:14.5px;line-height:1.8;color:var(--fg-3);}
.lg-body p + p{margin-top:var(--lg-s1);}
.lg-h4{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-2);
  margin:var(--lg-s2) 0 10px;
}
.lg-doc-h + .lg-body > .lg-h4:first-child{margin-top:0;}

/* Lists are requirements, not prose. Marked with a rule rather than a bullet:
   a hundred documents of bulleted lists reads as a slide deck. */
.lg-list{list-style:none;margin:12px 0;padding:0;display:grid;}
.lg-list li{
  position:relative;padding:7px 0 7px 20px;
  font-size:14px;line-height:1.6;color:var(--fg-3);
  border-bottom:1px solid rgba(255,255,255,.035);
}
.lg-list li:last-child{border-bottom:0;}
.lg-list li::before{
  content:'';position:absolute;inset-inline-start:0;top:1.05em;
  width:8px;height:1px;background:var(--gold-dk);
}

/* A named risk and its definition. */
.lg-defs{margin:var(--lg-s2) 0;display:grid;gap:0;}
.lg-defs dt{
  font-family:var(--f-display);font-weight:700;font-size:14.5px;
  color:var(--fg-2);padding-top:14px;
}
.lg-defs dd{
  margin:5px 0 0;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:14px;line-height:1.7;color:var(--fg-3);
}
.lg-defs dd:last-child{border-bottom:0;}

/* ── THE OPERATIVE SENTENCE ──
   Most of this document set describes what a policy shall contain. A handful of
   lines are the actual promise — or the actual refusal to promise. Those are
   the ones a reader must not skim, so they are the only text on the page given
   a rule and full contrast. */
.lg-key{
  margin:var(--lg-s2) 0 0;padding-inline-start:clamp(14px,1.8vw,20px);
  border-inline-start:2px solid var(--gold);
  font-size:14.5px !important;line-height:1.72 !important;
  color:var(--fg-2) !important;
}

/* ── An unfilled contact block ── */
.lg-fields{display:grid;gap:10px;margin:var(--lg-s2) 0;}
@media(min-width:640px){ .lg-fields{grid-template-columns:repeat(2,1fr);} }
.lg-field{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r2);
  background:var(--bg-1);
}
.lg-field span{font-size:12.5px;color:var(--fg-3);}

/* Hidden by the filter. `hidden` is not enough against `display:grid`. */
.lg-doc[hidden],.lg-cat[hidden],.lg-toc-cat[hidden],.lg-toc-sub li[hidden]{display:none !important;}

/* ══ CLOSING ══════════════════════════════════════════ */
.lg-close{padding-block:var(--lg-s4);border-top:1px solid var(--line-2);}
.lg-close .ld-wrap{display:grid;gap:var(--lg-s3);}
@media(min-width:900px){ .lg-close .ld-wrap{grid-template-columns:repeat(2,1fr);} }
.lg-panel{
  padding:clamp(20px,2.6vw,32px);
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--bg-1);
}
.lg-panel-t{
  font-family:var(--f-display);font-weight:700;font-size:19px;
  letter-spacing:-.018em;color:var(--fg);margin-bottom:var(--lg-s2);
}
.lg-panel p{font-size:14px;line-height:1.78;color:var(--fg-3);}
.lg-panel p + p{margin-top:var(--lg-s1);}

/* ══ PRINT ════════════════════════════════════════════
   A legal centre has to print. The navigation, the filter and the contents are
   controls and they go; every document stays, on a white ground, with its
   anchor number kept so a printed page can still be cited. */
@media print{
  .ld-nav,.lg-aside,.ld-foot,.ld-cursor,.lg-anchor{display:none !important;}
  body.lg{background:#fff;color:#000;}
  .lg-h1,.lg-cat-t,.lg-doc-t,.lg-panel-t{color:#000;}
  .lg-body p,.lg-list li,.lg-defs dd,.lg-lead,.lg-panel p{color:#222;}
  .lg-grid{display:block;}
  .lg-doc{break-inside:avoid;border-top:1px solid #ccc;}
  .lg-key{border-inline-start-color:#000;color:#000 !important;}
  .lg-blank{border-color:#999;color:#555;background:none;}
  .lg-notice,.lg-status,.lg-panel{border-color:#ccc;background:none;}
}

@media(prefers-reduced-motion:reduce){
  .lg-toc-sub a,.lg-anchor,.lg-find-i{transition:none;}
}