/* BOTHLEGS — app.css — design tokens, page scale, page frame, shared rule classes, motion helpers (DESIGN.md) */

:root{
  --paper:#FBF9F5;
  --ground:#7A79C5;
  --ink:#070923;
  --muted:#5A5D74;
  --party-a:#FFF000;
  --party-b:#2575E9;
  --hairline:#C7CAD1;
  --success:#1B8A3A;
  --success-bg:#DDF0DE;
  --danger:#C23B2B;
  --danger-bg:#FBE1DD;

  --nav-bg:#7F7AB8;
  --footer-bg:#f8f5ed;

  --gutter-l:3.4375rem;   /* 55px @1920 */
  --gutter-r:3rem;        /* 48px @1920 */
  --content-w:113.5rem;   /* 1816px @1920 */

  --rule-card:max(1px,2.3px);
  --rule-field:max(1px,2.2px);
  --rule-segmented:max(1px,2.2px);
  --rule-row:max(1px,1.4px);
  --rule-divider:max(1px,2.3px);
  --rule-thin:max(1px,1.1px);
  --rule-schedule:max(1px,1.5px);

  --ease-doc:cubic-bezier(.2,.65,.3,1); /* "paperwork completing" — brief, deterministic, no bounce */
  --dur-fast:250ms;
  --dur-mid:400ms;
  --dur-slow:500ms;
}

/* ---- LUAT 50: page scale — 1920 = mockup 1:1, 1280-2560 scales in proportion, floor keeps body text >=12px ---- */
html{
  font-size:clamp(12px, calc(100vw / 120), 21.333px); /* 16px at 1920 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* lavender ground painted on a fixed layer behind the page (same pixels; the sheet stays the surface under the viewport) */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--ground);pointer-events:none}
body{
  background:transparent;
  color:var(--ink);
  font-family:Arimo,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:where(button,input,select,textarea){border:0;outline:0;background:none;font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}

/* ---- one page frame: every route sits inside this sheet, never sets its own max-width/padding/bg ---- */
.page-sheet{
  background:var(--paper);
  max-width:var(--content-w);
  margin:0 auto;
  padding:0 0;
  border-radius:1rem;
  overflow:hidden;
}
.page-shell{
  padding:0 var(--gutter-r) 0 var(--gutter-l); /* the last sheet runs on into the footer: the frame closes below the footer (mockup) */
}
main{display:block}
main.is-leaving{opacity:.001}

/* ---- N12 nav (verbatim from mockup/v1/chrome/nav.html, converted to rem) ---- */
.n12-nav{
  height:5.875rem; /* 94px */
  box-sizing:border-box;
  display:grid;
  grid-template-columns:19.375rem 1fr 13.75rem;
  align-items:center;
  padding:0 3rem; /* 48px */
  background:var(--nav-bg);
  color:#17172e;
  font-family:Arimo,Arial,sans-serif;
  font-size:.875rem;
}
.n12-brand{display:flex;align-items:center;gap:.875rem;font-weight:700;letter-spacing:.06em;font-size:1.375rem}
.n12-brand img{width:3rem;height:3rem;object-fit:contain}
.n12-routes{justify-self:center;display:flex;gap:.25rem;padding:.3125rem;border:1px solid rgba(255,255,255,.48);border-radius:1.75rem}
.n12-routes a{padding:.6875rem 1.5625rem;border-radius:1.375rem;color:inherit;text-decoration:none;white-space:nowrap}
.n12-routes a.is-active{background:#fff;color:#17172e;font-weight:700}
.n12-social{justify-self:end;display:flex;gap:.75rem}
.n12-social a{display:grid;place-items:center;width:2.875rem;height:2.875rem;border-radius:50%;background:#393967;color:#fff}

[data-launch][aria-disabled="true"]{opacity:.55;cursor:default}

/* ---- F8 footer (verbatim from mockup/v1/chrome/footer.html, converted to rem) ---- */
.f8-footer{
  height:5rem; /* 80px */
  box-sizing:border-box;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:1.75rem;
  padding:0 3rem;
  background:var(--footer-bg);
  color:#17172e;
  border-top:1px solid #55557a;
  font-family:Arimo,Arial,sans-serif;
}
.f8-footer .f8-mark{width:2.25rem;height:2.25rem;object-fit:contain}
.f8-footer strong{font:700 2.625rem Spectral,Georgia,serif}
.f8-social{display:flex;gap:.75rem}
.f8-social a{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#393967;color:#fff}
.f8-footer small{color:#17172e;font-size:.8125rem}

/* ---- shared border classes (LUAT 56/23) — routes use these, never write their own border/outline ---- */
.rule-card{border:var(--rule-card) solid var(--ink);border-radius:1rem}
.rule-field{border:var(--rule-field) solid var(--hairline);border-radius:.5rem;box-sizing:border-box}
.rule-segmented{border:var(--rule-segmented) solid var(--hairline);border-radius:999px}
.rule-row{border-bottom:var(--rule-row) solid var(--hairline)}
.rule-divider{border-bottom:var(--rule-divider) solid var(--hairline)}
.rule-divider-double{border-bottom:var(--rule-divider) solid var(--hairline);box-shadow:0 6px 0 -4px var(--hairline)}
.rule-col{border-left:var(--rule-thin) solid var(--hairline)}
.rule-party{border:var(--rule-field) solid var(--hairline);border-radius:.5rem}
.rule-schedule{border:var(--rule-schedule) solid var(--hairline);border-radius:.5rem}
.rule-track{border:var(--rule-thin) solid var(--hairline)}
.rule-sheet-foot{margin:0 var(--gutter-r) .75rem var(--gutter-l);border:var(--rule-card) solid var(--ink);border-top:1px solid #55557a;border-radius:0 0 1rem 1rem}
main .page-sheet.rule-card:not(:has(~ .page-sheet)){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.rule-sel{border:var(--rule-field) solid transparent;border-radius:.5rem}
.rule-sel.is-on{border-color:var(--hairline)}

/* ---- state tokens ---- */
.state-success{color:var(--success);background:var(--success-bg)}
.state-danger{color:var(--danger);background:var(--danger-bg)}

/* ---- motion helpers: signature character = brief, deterministic, document-like (DESIGN.md §8/§10) ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(.75rem);transition:opacity var(--dur-mid) var(--ease-doc),transform var(--dur-mid) var(--ease-doc)}
  .reveal.is-in{opacity:1;transform:translateY(0)}
  .stroke-draw{stroke-dasharray:var(--len,240);stroke-dashoffset:var(--len,240);transition:stroke-dashoffset var(--dur-slow) var(--ease-doc)}
  .stroke-draw.is-signed{stroke-dashoffset:0}
  .lock-half{transition:transform var(--dur-mid) var(--ease-doc)}
  .crossfade{opacity:0;transition:opacity var(--dur-fast) var(--ease-doc)}
  .crossfade.is-in{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.stroke-draw,.lock-half,.crossfade{transition:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important}
}

/* ---- mobile drawer (<1024, LUAT 50 §1 breakpoints) ---- */
.n12-toggle{display:none}
@media (max-width:1023px){
  .page-shell{padding:0 1.25rem}
  .rule-sheet-foot{margin:0 1.25rem .75rem}
  .n12-nav{grid-template-columns:1fr auto auto;padding:0 1.25rem;height:4.25rem}
  .n12-brand{font-size:1.125rem}
  .n12-brand img{width:2.25rem;height:2.25rem}
  .n12-routes{
    position:fixed;inset:4.25rem 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--nav-bg);border-radius:0;padding:1rem;gap:.5rem;
    transform:translateY(-110%);transition:transform var(--dur-mid) var(--ease-doc);
    z-index:40;justify-self:auto;border:none;
  }
  .n12-routes.is-open{transform:translateY(0)}
  .n12-routes a{padding:.9rem 1rem;border-radius:.5rem;text-align:left}
  .n12-toggle{
    display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;
    background:#393967;color:#fff;font-size:1.125rem;cursor:pointer;
  }
  .f8-footer{grid-template-columns:1fr auto;height:auto;padding:1.25rem;row-gap:.75rem}
  .f8-footer .f8-social{grid-column:2;grid-row:1}
  .f8-footer strong{font-size:1.5rem;grid-column:1;grid-row:1}
  .f8-footer small{grid-column:1 / -1}
}