/* =========================================================================
   legal.css — the five legal/compliance surfaces (spec §8).
   Cool only. Tokens only, no raw hex. Class prefix: legal- / sc-
   The Accessibility page is meant to be an exemplar: real headings, visible
   focus states, AA contrast — so focus styling here is deliberate.
   ========================================================================= */

.legal-page{ padding:var(--sp-20) 0 var(--sp-16); position:relative; }
.legal-page::before{
  content:""; position:absolute; inset:0 0 auto 0; height:420px; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% -10%, rgba(var(--glow-rgb),.10), transparent 62%);
}
.legal-wrap{ position:relative; z-index:1; max-width:820px; margin:0 auto; padding:0 var(--sp-6); }

/* ---- focus: visible everywhere (accessibility exemplar) ---- */
.legal-wrap a:focus-visible,
.legal-page button:focus-visible,
.sc-cell:focus-visible,
.sc-notify__input:focus-visible,
.sc-notify__select:focus-visible{
  outline:2px solid var(--accent-hover); outline-offset:3px; border-radius:var(--r-xs);
}

/* ---- masthead ---- */
.legal-masthead{ padding-bottom:var(--sp-8); border-bottom:1px solid var(--border-on-dark); margin-bottom:var(--sp-10); }
.legal-h1{
  font-family:var(--font-heading); font-weight:300; font-size:clamp(34px,4.4vw,52px);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-tight);
  color:var(--fg-on-dark-1); margin:var(--sp-4) 0 0;
}
.legal-summary{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-18);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-5) 0 0; max-width:60ch; }
.legal-owner{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-16);
  color:var(--fg-on-dark-1); margin:var(--sp-4) 0 0; max-width:62ch; }
.legal-dates{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  margin-top:var(--sp-6); font-size:var(--fs-13); color:var(--fg-on-dark-3); letter-spacing:.02em; }
.legal-dates__sep{ opacity:.5; }

/* ---- TL;DR card ---- */
.legal-tldr{ border:1px solid var(--border-on-dark-strong); border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-8); margin-bottom:var(--sp-10); background:rgba(var(--glow-rgb),.04); }
.legal-tldr__h{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover); margin-bottom:var(--sp-4); }
.legal-tldr__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--sp-3); }
.legal-tldr__list li{ position:relative; padding-left:var(--sp-6); font-size:var(--fs-16);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-1); }
.legal-tldr__list li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--accent); box-shadow:var(--glow-sm); }
.legal-tldr__link{ margin-top:var(--sp-5); }

/* ---- mandated HIPAA header (boxed, prominent) ---- */
.legal-mandated{ border:1px solid var(--gold-300); border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-7); margin-bottom:var(--sp-10);
  font-family:var(--font-edit); font-style:italic; font-size:var(--fs-18); line-height:var(--lh-snug);
  color:var(--fg-on-dark-1); background:var(--gold-soft); }

/* ---- table of contents ---- */
.legal-toc{ border:1px solid var(--border-on-dark); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-7); margin-bottom:var(--sp-12); }
.legal-toc__lead{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--fg-on-dark-3); margin-bottom:var(--sp-4); }
.legal-toc__list{ margin:0; padding:0; list-style:none; columns:2; column-gap:var(--sp-8); }
.legal-toc__list li{ break-inside:avoid; margin-bottom:var(--sp-2); }
.legal-toc__list a{ font-size:var(--fs-14); line-height:var(--lh-normal); color:var(--fg-on-dark-2);
  border-bottom:1px solid transparent; transition:color var(--dur-base), border-color var(--dur-base); }
.legal-toc__list a:hover{ color:var(--accent-hover); border-bottom-color:var(--accent-hover); }
@media(max-width:640px){ .legal-toc__list{ columns:1; } }

/* ---- formal section ---- */
.legal-section{ scroll-margin-top:var(--sp-16); padding:var(--sp-9) 0; border-top:1px solid var(--border-on-dark); }
.legal-section:first-of-type{ border-top:0; }
.legal-section__h{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-24);
  line-height:var(--lh-snug); color:var(--fg-on-dark-1); margin:0; letter-spacing:-.01em; }
.legal-section__summary{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-18);
  line-height:var(--lh-snug); color:var(--accent-hover); margin:var(--sp-4) 0 0; max-width:60ch; }
.legal-section__body{ margin-top:var(--sp-5); }

.legal-p{ font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2);
  margin:0 0 var(--sp-4); max-width:66ch; }
.legal-p strong{ color:var(--fg-on-dark-1); font-weight:600; }
.legal-sub{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-14);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-1);
  margin:var(--sp-6) 0 var(--sp-3); }
.legal-ul{ margin:0 0 var(--sp-5); padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--sp-2); max-width:66ch; }
.legal-ul li{ position:relative; padding-left:var(--sp-6); font-size:var(--fs-16);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.legal-ul li::before{ content:""; position:absolute; left:2px; top:.7em; width:5px; height:5px;
  border-radius:50%; background:var(--fg-on-dark-3); }
.legal-ul li strong{ color:var(--fg-on-dark-1); font-weight:600; }
.legal-note{ font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-3);
  margin:0 0 var(--sp-4); max-width:66ch; font-style:italic; }
.legal-inlink{ margin:0 0 var(--sp-4); }

/* ---- counsel placeholder block ---- */
.legal-counsel{ border:1px dashed var(--gold-300); border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-6); margin:var(--sp-3) 0 var(--sp-5); background:var(--gold-soft); }
.legal-counsel__tag{ display:inline-block; font-family:var(--font-mono); font-size:var(--fs-12);
  letter-spacing:.04em; color:var(--gold-200); margin-bottom:var(--sp-2); }
.legal-counsel__body{ margin:0; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.legal-counsel__body strong{ color:var(--fg-on-dark-1); }
.legal-counsel--owner{ margin-bottom:var(--sp-10); border-style:solid; }

/* ---- §2.3 seam block ---- */
.legal-seam{ margin:var(--sp-12) 0; border:1px solid var(--border-on-dark-strong); border-radius:var(--r-lg);
  padding:var(--sp-8); background:rgba(255,255,255,.02); }
.legal-seam__head{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover); margin-bottom:var(--sp-4); }
.legal-seam__lede{ font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; max-width:70ch; }
.legal-seam__lede strong{ color:var(--fg-on-dark-1); font-weight:600; }
.legal-seam__rows{ margin-top:var(--sp-6); display:flex; flex-direction:column; }
.legal-seam__row{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-5); align-items:baseline;
  padding:var(--sp-4) 0; border-top:1px solid var(--border-on-dark); }
.legal-seam__row:first-child{ border-top:0; }
.legal-seam__fn{ font-size:var(--fs-15); color:var(--fg-on-dark-2); }
.legal-seam__who{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-13);
  letter-spacing:.02em; color:var(--fg-on-dark-1); text-align:right; }

/* ---- contact block ---- */
.legal-contacts{ margin:var(--sp-12) 0; }
.legal-contacts__h{ margin-bottom:var(--sp-2); }
.legal-contacts__grid{ margin-top:var(--sp-6); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
@media(max-width:640px){ .legal-contacts__grid{ grid-template-columns:1fr; } }
.legal-contact{ border:1px solid var(--border-on-dark); border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6); }
.legal-contact__label{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-3); margin-bottom:var(--sp-2); }
.legal-contact__value{ font-size:var(--fs-16); color:var(--fg-on-dark-1); font-weight:500; }
.legal-contact__note{ font-size:var(--fs-13); line-height:var(--lh-normal); color:var(--fg-on-dark-3); margin-top:var(--sp-2); }

/* ---- cross-links ---- */
.legal-crosslinks{ margin-top:var(--sp-12); padding-top:var(--sp-8); border-top:1px solid var(--border-on-dark); }
.legal-crosslinks__lead{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--fg-on-dark-3); margin-bottom:var(--sp-4); }
.legal-crosslinks__row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.legal-crosslinks__link{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-13);
  letter-spacing:.02em; color:var(--fg-on-dark-2); border:1px solid var(--border-on-dark);
  border-radius:var(--r-pill); padding:8px 16px; transition:color var(--dur-base), border-color var(--dur-base), background var(--dur-base); }
.legal-crosslinks__link:hover{ color:var(--fg-on-dark-1); border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.03); }

/* =========================================================================
   STATE COVERAGE (sc-)
   ========================================================================= */
.sc{ margin-top:var(--sp-4); }
.sc-legend{ display:flex; flex-direction:column; gap:var(--sp-4); border:1px solid var(--border-on-dark);
  border-radius:var(--r-lg); padding:var(--sp-7); margin-bottom:var(--sp-8); }
.sc-legend__item{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); align-items:center; }
.sc-legend__signals{ display:flex; align-items:center; gap:var(--sp-3); min-width:190px; }
.sc-legend__text{ display:flex; flex-direction:column; }
.sc-legend__label{ font-size:var(--fs-15); font-weight:500; color:var(--fg-on-dark-1); }
.sc-legend__note{ font-size:var(--fs-13); line-height:var(--lh-normal); color:var(--fg-on-dark-3); }
.sc-legend__law{ margin:var(--sp-2) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--border-on-dark);
  font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-3); }
.sc-legend__law strong{ color:var(--fg-on-dark-1); }

/* dot = availability signal */
.sc-dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.sc-dot.is-avail{ background:var(--status-success); box-shadow:0 0 8px rgba(79,181,138,.6); }
.sc-dot.is-unavail{ background:var(--c-stone-3); box-shadow:none; }

/* pill = why / start-type signal (never the same channel as the dot) */
.sc-pill{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill);
  border:1px solid transparent; white-space:nowrap; }
.sc-pill.is-async{ color:var(--status-success); border-color:rgba(79,181,138,.4); background:rgba(79,181,138,.10); }
.sc-pill.is-sync{ color:var(--gold-200); border-color:var(--gold-300); background:var(--gold-soft); }
.sc-pill.is-unavail{ color:var(--fg-on-dark-3); border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.03); }

/* toolbar */
.sc-toolbar{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); }
.sc-counts{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; font-size:var(--fs-13); color:var(--fg-on-dark-2); }
.sc-counts .sc-dot{ margin-right:6px; transform:translateY(1px); }
.sc-viewtoggle{ display:inline-flex; border:1px solid var(--border-on-dark); border-radius:var(--r-pill); overflow:hidden; }
.sc-viewtoggle button{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:8px 16px; color:var(--fg-on-dark-3); }
.sc-viewtoggle button.is-active{ background:var(--accent); color:#fff; }

/* the grid */
.sc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:var(--sp-2); }
.sc-cell{ position:relative; display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-3); border:1px solid var(--border-on-dark); border-radius:var(--r-md);
  background:var(--bg-dark-card); transition:border-color var(--dur-base), background var(--dur-base), transform var(--dur-fast); }
.sc-cell:hover{ border-color:var(--border-on-dark-strong); background:var(--bg-dark-hover); transform:translateY(-1px); }
.sc-cell.is-sel{ border-color:var(--accent); box-shadow:var(--glow-rim); }
.sc-cell__code{ font-size:var(--fs-14); font-weight:600; color:var(--fg-on-dark-1); letter-spacing:.04em; }
.sc-cell__flag{ position:absolute; top:5px; right:7px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold-200); }
.sc-cell--sync{ background:linear-gradient(180deg, var(--gold-soft), var(--bg-dark-card)); }

/* detail panel */
.sc-detail{ margin-top:var(--sp-5); border:1px solid var(--accent); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-7); background:rgba(var(--glow-rgb),.06); }
.sc-detail__top{ display:flex; align-items:center; gap:var(--sp-3); }
.sc-detail__name{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-20); color:var(--fg-on-dark-1); }
.sc-detail__note{ margin:var(--sp-4) 0 0; font-size:var(--fs-15); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.sc-detail__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; margin-top:var(--sp-6); }
.sc-detail__fine{ font-size:var(--fs-13); color:var(--fg-on-dark-3); }

/* table fallback */
.sc-table{ width:100%; border-collapse:collapse; font-size:var(--fs-14); }
.sc-table__cap{ text-align:left; font-size:var(--fs-13); color:var(--fg-on-dark-3); margin-bottom:var(--sp-4); font-style:italic; }
.sc-table th, .sc-table td{ text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-on-dark); vertical-align:top; }
.sc-table thead th{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-3); }
.sc-table tbody th{ font-weight:500; color:var(--fg-on-dark-1); }
.sc-table__code{ color:var(--fg-on-dark-3); font-size:var(--fs-12); margin-left:4px; }
.sc-table__note{ color:var(--fg-on-dark-3); max-width:36ch; }

/* caveat */
.sc-caveat{ margin-top:var(--sp-10); border-left:2px solid var(--gold-300); padding:var(--sp-2) 0 var(--sp-2) var(--sp-6); }
.sc-caveat__h{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-20); color:var(--fg-on-dark-1); margin:0 0 var(--sp-3); }
.sc-caveat__body{ font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0 0 var(--sp-4); max-width:66ch; }
.sc-caveat__body strong{ color:var(--fg-on-dark-1); }

/* notify */
.sc-notify{ margin-top:var(--sp-10); border:1px solid var(--border-on-dark-strong); border-radius:var(--r-lg); padding:var(--sp-8); }
.sc-notify__h{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-24); color:var(--fg-on-dark-1); margin:0 0 var(--sp-3); }
.sc-notify__body{ font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0 0 var(--sp-5); }
.sc-notify__form{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.sc-notify__select, .sc-notify__input{ font:inherit; font-size:var(--fs-15); color:var(--fg-on-dark-1);
  background:var(--bg-dark-card); border:1px solid var(--border-on-dark-strong); border-radius:var(--r-sm);
  padding:14px 16px; }
.sc-notify__select{ min-width:180px; }
.sc-notify__input{ flex:1; min-width:220px; }
.sc-notify__input::placeholder{ color:var(--fg-on-dark-3); }
.sc-notify__fine{ margin-top:var(--sp-4); }
.sc-notify__done{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-18); color:var(--fg-on-dark-1); }

@media(max-width:560px){
  .sc-legend__item{ grid-template-columns:1fr; gap:var(--sp-2); }
  .sc-notify__form{ flex-direction:column; align-items:stretch; }
  .sc-notify__input{ min-width:0; }
}