/* KaddieIQ legal documents - Terms, Privacy, Trade Marks.
 *
 * Built on the shared page template (kiq-page.css supplies the hero, the glass
 * card and the width rules). This sheet adds only what a long legal document
 * needs on top: the document picker, an "on this page" list that stays beside
 * the text, readable clause headings and print rules. Tokens only, so light and
 * dark both work; no colour is declared here.
 */

.lg-wrap{display:grid;gap:clamp(16px,2.4vw,24px)}

/* ---------- document picker ---------- */
.lg-hub{display:grid;gap:10px;padding:clamp(14px,2.4vw,20px);border:1px solid var(--hair);border-radius:var(--r,14px);background:var(--panel)}
.lg-hub-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.lg-hub-label{flex:0 0 150px;font:var(--fw-label) 11px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lg-hub-row.is-group .lg-hub-label{color:var(--gold)}
.lg-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lg-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--hair);border-radius:999px;
  font:var(--fw-title) 13.5px/1.2 var(--head);color:var(--soft);text-decoration:none;background:transparent;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.lg-pill b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-hi);font:var(--fw-label) 11px/1 var(--head)}
.lg-pill:hover{border-color:var(--gold);color:var(--ink)}
.lg-pill:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:2px}
.lg-pill.is-here{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold)}
.lg-pill.is-here b{background:color-mix(in srgb,var(--on-gold) 16%,transparent);color:var(--on-gold)}

/* ---------- two columns: contents beside the document ---------- */
.lg-cols{display:grid;gap:clamp(14px,2vw,22px);align-items:start}
@media (min-width:1040px){
  .lg-cols{grid-template-columns:260px minmax(0,1fr)}
  .lg-side{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain}
}
.lg-toc{padding:16px 18px;border:1px solid var(--hair);border-radius:var(--r,14px);background:var(--panel)}
.lg-toc summary{cursor:pointer;font:var(--fw-label) 11px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);list-style:none}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary::after{content:"+";float:right;color:var(--muted)}
.lg-toc[open] summary::after{content:"\2212"}
.lg-toc ol{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.lg-toc a{display:block;padding:5px 8px;margin:0 -8px;border-radius:8px;font:500 12.5px/1.35 var(--head);letter-spacing:.02em;color:var(--soft);text-decoration:none}
.lg-toc a:hover{color:var(--ink);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.lg-toc a.is-current{color:var(--gold-hi);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.lg-toc a:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:1px}

/* ---------- the document ---------- */
.lg-doc{padding:clamp(22px,4.4vw,48px)}
.lg-docmeta{margin:0 0 clamp(20px,3vw,30px);padding-bottom:clamp(16px,2.4vw,22px);border-bottom:1px solid var(--hair)}
.lg-docname{margin:0 0 .6em;font:var(--fw-label) 11px/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lg-docmeta p:not(.lg-docname){margin:0;font:400 14px/1.7 var(--body);color:var(--soft)}
.lg-body{max-width:76ch}
.lg-body h2,.lg-body h3,.lg-body h4{position:relative;scroll-margin-top:92px}
.lg-body h2{margin:2.2em 0 .6em;font:var(--fw-display) clamp(16px,2vw,19px)/1.3 var(--head);letter-spacing:.05em;color:var(--ink)}
.lg-body h2:first-child{margin-top:0}
.lg-body h3{margin:1.6em 0 .45em;font:var(--fw-title) 16px/1.35 var(--head);letter-spacing:.02em;color:var(--ink)}
.lg-body h4{margin:1.3em 0 .35em;font:var(--fw-title) 15px/1.4 var(--head);color:var(--gold-hi)}
.lg-body p{margin:0 0 .95em;font:400 15.5px/1.72 var(--body);color:var(--soft)}
.lg-body ul{margin:0 0 1.1em;padding-left:1.25em;color:var(--soft);font-size:15.5px;line-height:1.7}
.lg-body li{margin-bottom:.35em}
.lg-body li::marker{color:var(--gold)}
.lg-body strong{color:var(--ink);font-weight:700}
.lg-body a{color:var(--gold-hi);text-underline-offset:2px}
.lg-body a:hover{color:var(--gold)}
.lg-anchor{position:absolute;left:-1.1em;top:0;opacity:0;font-weight:400;text-decoration:none;color:var(--muted);transition:opacity .15s ease}
.lg-body h2:hover .lg-anchor,.lg-body h3:hover .lg-anchor,.lg-body h4:hover .lg-anchor,.lg-anchor:focus-visible{opacity:1}
@media (max-width:640px){.lg-anchor{display:none}}
.lg-body :target{animation:lgFlash 1.8s ease-out}
@keyframes lgFlash{from{background:color-mix(in srgb,var(--gold) 22%,transparent)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.lg-body :target{animation:none}}

/* wording the lawyers have left open: unmissable on a preview, never silently live */
mark.lg-todo{background:#f5d547;color:#2a2200;padding:1px 5px;border-radius:4px;font-weight:700}

/* ---------- related documents ---------- */
.lg-related{margin-top:clamp(26px,4vw,40px);padding-top:clamp(16px,2.4vw,22px);border-top:1px solid var(--hair)}
.lg-related-h{margin:0 0 10px;font:var(--fw-label) 11px/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lg-related ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lg-related a{display:inline-block;padding:8px 14px;border:1px solid var(--hair);border-radius:999px;font:var(--fw-title) 13px/1.2 var(--head);color:var(--soft);text-decoration:none}
.lg-related a:hover{border-color:var(--gold);color:var(--ink)}

@media (max-width:640px){
  .lg-hub-label{flex-basis:100%}
}

/* ---------- print: the document only ---------- */
@media print{
  .kiq-header,.kiq-navtab,.kiq-navdrawer,.kiq-navdrawer-backdrop,.bg-bp,.lg-hub,.lg-side,.lg-related,.lg-anchor,footer{display:none!important}
  body{background:#fff;color:#000}
  .lg-doc{border:0;box-shadow:none;background:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lg-body p,.lg-body ul,.lg-body li,.lg-body h2,.lg-body h3,.lg-body h4,.lg-body strong,.lg-docmeta p{color:#000}
  .lg-body{max-width:none}
}