/* ==========================================================================
   compliance.html — page-only compositions (One Light). Sandbox, Sept 27, 2026.
   Tokens only: every colour comes from site.css custom properties, so Night,
   Day and the always-night stages all work without overrides here.

   1  Hero: grid, faint instrument grid, the chain of authority
   2  Rule cards and the rule accordions (the federal chain)
   3  Numbered and icon lists (signing steps, auditor stack)
   4  Sample record card, auditor stack, keeping records
   5  Driver agreement
   6  Sources (folded into one details)
   ========================================================================== */

/* ---------------------------------------------------------------- 1 HERO */
.comp-hero::after{   /* the home hero's faint instrument grid, fading out */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;
  background-image:linear-gradient(var(--line-hair) 1px, transparent 1px), linear-gradient(90deg, var(--line-hair) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(60% 70% at 80% 30%, var(--ink-strong) 0%, transparent 75%);
  mask-image:radial-gradient(60% 70% at 80% 30%, var(--ink-strong) 0%, transparent 75%);
}
.comp-hero > .wrap{position:relative;z-index:1}
.comp-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.comp-hero h1{margin-top:16px}
.comp-hero h1 .dim{display:block}
@media (max-width: 1020px){ .comp-hero-grid{grid-template-columns:1fr} }

.chain{
  border-radius:var(--r-xl);padding:clamp(20px, 2.4vw, 28px);
  background-color:var(--surface-1);background-image:var(--sheen);
  box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong);
}
.chain-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.chain-group{margin-top:18px}
.chain-group + .chain-group{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.chain-group > .label{display:block;margin-bottom:6px}
.chain-list{list-style:none;position:relative;display:grid}
.chain-list::before{   /* the line that ties the chain together */
  content:"";position:absolute;left:15px;top:24px;bottom:24px;width:2px;border-radius:2px;background:var(--line-strong);
}
.chain-list a{
  position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:8px 8px 8px 0;border-radius:var(--r-md);color:inherit;text-decoration:none;
}
.chain-node{
  position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.chain-node .ic{width:16px;height:16px}
.chain-txt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.chain-what{font-size:var(--fs-small);line-height:1.4;color:var(--ink-2)}
.chain-go{width:18px;height:18px;color:var(--ink-3);transition:transform var(--dur-state) var(--ease-standard)}
.chain-list a:hover .chain-what{color:var(--ink-strong)}
.chain-list a:hover .chain-go{transform:translateY(2px);color:var(--ink-strong)}
@media (max-width: 420px){
  .chain-list a{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .chain-go{display:none}
}

/* The disclaimer sits right under the proof strip */
.comp-disclaimer{margin-top:clamp(20px, 2.4vw, 32px)}

/* ---------------------------------------------------------- 2 RULE CARDS */
.rules{display:grid;gap:clamp(16px, 2vw, 24px)}
.card.rule{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(22px, 3.2vw, 52px);
  padding:clamp(22px, 3vw, 40px);scroll-margin-top:calc(var(--nav-h) + 20px);
}
.rule-main{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.rule-main h3{font-size:clamp(1.3rem, 1.12rem + .7vw, 1.65rem)}
.rule-main > p{color:var(--ink-2);line-height:1.6}
.rule-main .chips{margin-top:2px}
.rule-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.rule-side .link-arrow{margin-top:4px}

.rule-quote{
  padding:14px 16px 14px 18px;border-radius:var(--r-md);
  background:var(--surface-inset);box-shadow:inset 3px 0 0 var(--line-control), inset 0 0 0 1px var(--line-hair);
}
.rule-quote p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-strong)}
.rule-quote figcaption{margin-top:6px;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;color:var(--ink-3)}

.rule-row{display:grid;gap:6px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.rule-row p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.rule-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3);
}
.rule-label .ic{width:18px;height:18px}
.rule-row.is-does .rule-label .ic{color:var(--go);stroke-width:2.4}
.rule-row.is-note .rule-label .ic{color:var(--ink-3)}
@media (max-width: 900px){ .card.rule{grid-template-columns:1fr} }

/* The rule accordions (federal chain, signature law): a cite tag, a title and a one-line
   summary stacked in each summary row; the open rule shows its two columns. */
.rule-list details{scroll-margin-top:calc(var(--nav-h) + 20px)}
.rule-list summary .sum{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rule-list summary .sum .meta{font-family:var(--font-ui);font-weight:600}
.rule-list .faq-a > .grid{gap:clamp(22px, 3.2vw, 44px)}

.law-head{margin-top:clamp(48px, 6vw, 80px);margin-bottom:clamp(20px, 2.4vw, 28px);max-width:760px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.law-head h3{font-size:clamp(1.35rem, 1.15rem + .8vw, 1.8rem)}
.law-head p{margin-top:10px}
.card.law{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.card.law .rule-quote{align-self:stretch}
.card.law .link-arrow{margin-top:auto;padding-top:4px}

/* Washington + retention cards: a quiet stack of text inside a card */
.card.stack-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%}
.card.stack-card .icon-well{margin-bottom:6px}
.card.stack-card .rule-quote{align-self:stretch}
.card.stack-card .link-arrow{margin-top:auto;padding-top:6px}
.card.stack-card .gauge{font-size:clamp(2.8rem, 2.2rem + 2vw, 3.8rem)}
.rule-side .check-list + .label{margin-top:8px}
.check-list{list-style:none;display:grid;gap:8px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.check-list li{display:flex;gap:10px;align-items:flex-start}
.check-list .ic{width:18px;height:18px;margin-top:2px;color:var(--ink-3)}
.check-list .is-key .ic{color:var(--ink-strong)}
.check-list .is-key{color:var(--ink-strong);font-weight:600}

/* "Does it apply?" answer panel */
.answer{
  border-radius:var(--r-xl);padding:clamp(22px, 3vw, 36px);
  background:var(--surface-2);box-shadow:var(--sh-2), inset 0 0 0 1.5px var(--line-control);
}
.answer > p{font-family:var(--font-display);font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem);font-weight:750;line-height:1.35;letter-spacing:-.01em;color:var(--ink-strong);text-wrap:balance}
.answer .feature-list{margin-top:22px}

/* ------------------------------------------------- 3 NUMBERED / ICON LISTS */
.num-list{list-style:none;display:grid;gap:24px;counter-reset:step}
.num-list > li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start;counter-increment:step}
.num-list .step-n{margin:0}
.num-list h3{font-size:1.15rem;line-height:1.3;padding-top:9px}
.num-list p{margin-top:6px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}

.icon-list{list-style:none;display:grid;gap:22px}
.icon-list > li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.icon-list h3{font-size:1.15rem;line-height:1.3;padding-top:11px}
.icon-list p{margin-top:6px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.icon-list .lifecycle{margin-top:12px}

.fine-note{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-meta);line-height:1.5;color:var(--ink-3)}
.fine-note .ic{width:18px;height:18px;margin-top:1px}

.phone-col{display:flex;flex-direction:column;align-items:center}
.phone-col .device-note{margin-top:18px}

/* -------------------------------------------------------- 4 SAMPLE RECORD */
.record{max-width:500px;width:100%;margin:0 auto}
.record .receipt-head .icon-well{margin:0}
.record .receipt-head b{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:800;line-height:1.2}
.record .receipt-row > span:last-child{min-width:0;overflow-wrap:anywhere}
.record .is-sig > span:last-child{display:inline-flex;align-items:center;gap:6px;color:var(--go)}
.record .is-sig .ic{width:16px;height:16px}

/* Auditor stack: a printed per-bus page */
.audit-visual{display:flex;justify-content:center}
.audit-visual .paper-stack{width:100%;max-width:440px}
.no-pins{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;margin-top:28px}
.no-pins .icon-well{margin:0}
.no-pins p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.no-pins b{display:block;margin-bottom:4px;font-size:var(--fs-body)}

/* Keeping records: closes the auditor section, under its own small heading */
.keep-grid h4{font-family:var(--font-display);font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem);font-weight:750;line-height:1.3;letter-spacing:-.01em}
@media (max-width: 680px){
  .keep-grid{gap:12px}
  .card.stack-card.keep-card{gap:8px;padding:18px}
  .card.stack-card.keep-card .icon-well{width:40px;height:40px;margin-bottom:2px}
  .card.stack-card.keep-card .icon-well .ic{width:20px;height:20px}
  .card.stack-card.keep-card .gauge{font-size:2.6rem}
}

/* ---------------------------------------------------------- 5 AGREEMENT */
.agreement-facts{margin-top:22px}
.agreement.faq details{scroll-margin-top:calc(var(--nav-h) + 20px)}
.agreement summary .sum{display:flex;flex-direction:column;gap:4px}
.agreement summary .sum .meta{font-family:var(--font-ui);font-weight:600}
.agreement .legal-well h4{font-family:var(--font-display);font-size:1.1rem}
.agreement .legal-well p,.agreement .legal-well ul{max-width:68ch}
.agreement .legal-well p + p,.agreement .legal-well ul + p,.agreement .legal-well p + ul{margin-top:12px}
.agreement-notes{margin-top:clamp(28px, 3vw, 40px)}
.agreement-notes h3{font-size:1.15rem;margin-bottom:14px}

/* ------------------------------------------------------------- 6 SOURCES */
.source-list{list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:2px 32px;margin-top:18px}
.source-list a{
  display:flex;gap:10px;align-items:flex-start;padding:10px 0;min-height:44px;
  font-size:var(--fs-small);line-height:1.45;font-weight:600;text-decoration:none;
}
.source-list a:hover{text-decoration:underline}
.source-list a .ic{width:16px;height:16px;margin-top:3px;flex:none}
.source-list .src{color:var(--ink-2);font-weight:450;white-space:nowrap}
@media (max-width: 760px){ .source-list{grid-template-columns:1fr} }

/* The list sits folded inside one details, so the page ends sooner on a phone */
.sources-fold summary .sum{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sources-fold summary .sum .meta{font-family:var(--font-ui);font-weight:600}
.faq.sources-fold .faq-a .source-list{margin-top:0;padding-left:0}
.faq.sources-fold .faq-a .source-list li + li{margin-top:0}