/* STANDBY — app.css (shell). Tokens + page frame + nav/footer + border classes.
   Route bodies (clone/hydrate) must use the .rule-* classes below and add ZERO
   border/outline declarations of their own (LUAT 56 border_lint). */

:root{
  --paper:#CEE93D;
  --surface:#FFFDF7;
  --ink:#070B24;
  --muted:#526080;
  --blue:#0969F5;
  --orange:#FF5110;
  --violet:#8D00F6;
  --success:#16943C;
  --hairline: rgba(7,11,36,.10);
  --accent-grad: linear-gradient(90deg, var(--orange), var(--blue));

  --font-display:'Lilita One', system-ui, sans-serif;
  --font-body:'Varela Round', system-ui, sans-serif;
  --font-mono:'Monomaniac One', ui-monospace, monospace;

  /* base.css hooks */
  --bg: var(--paper);
  --surface-alt: var(--surface);
  --a: var(--orange);
  --b: var(--blue);

  /* rule tokens (LUAT 56 §4b BORDER TABLE) */
  --rule-footer-w:      max(1px, 0.14375rem);
  --rule-footer-card-w: max(1px, 0.1375rem);
  --rule-panel-w:       max(1px, 0.14375rem);
  --rule-table-w:       max(1px, 0.14375rem);
  --rule-input-w:       max(1px, 0.14375rem);
  --rule-input-w-thick: max(1px, 0.2125rem);
  --rule-row-w:         max(1px, 0.06875rem);
  --rule-rail-w:        max(1px, 0.06875rem);

  --radius-panel:1.25rem;
  --radius-card:1rem;
  --radius-pill:62.4375rem;
}

/* ---- page unit (LUAT 50 §0.2): 1 root unit = 100vw/1920, base 16px @1920.
   Proportional scaling 1024..2560 wide; below 1024 a fixed mobile layout. ---- */
html{font-size:16px}
@media (min-width:1024px){
  html{font-size:calc(100vw / 120);} /* 1920/120 = 16px baseline at 1920 */
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
}

/* ---- ONE PAGE FRAME (LUAT 53 / USER_FIXES): ground #CEE93D, one container,
   50px left / 47px right gutter @1920, scaled with the page unit.
   Route bodies never redeclare max-width, side padding or page background. ---- */
.page{
  width:100%;
  max-width:none;
  padding-left:3.125rem;
  padding-right:2.9375rem;
  box-sizing:border-box;
}
@media (max-width:1023px){
  .page{padding-left:1.25rem;padding-right:1.25rem;}
}

main{background:var(--paper);}

/* ---- N12 nav (copied verbatim from mockup/v1/chrome/nav.html, LUAT 52) ---- */
header[data-chrome="nav"]{
  width:100%;
  background:var(--paper);
}
.nav-inner{
  height:6rem;
  padding:1.25rem 5rem;
  display:grid;
  grid-template-columns:20.625rem 1fr 11.25rem;
  align-items:center;
  gap:0.75rem;
}
.brand{
  display:flex;align-items:center;gap:0.75rem;
  font:2.625rem/1 var(--font-display);
  color:var(--ink);text-decoration:none;
}
.brand img{width:3.375rem;height:3.375rem;object-fit:contain}
.routes{
  justify-self:center;display:flex;gap:0.3125rem;
  background:var(--surface);
  border:var(--rule-panel-w) solid var(--ink);
  border-radius:var(--radius-pill);
  padding:0.3125rem;
}
.routes a{
  color:var(--ink);text-decoration:none;
  padding:0.75rem 1.375rem;border-radius:1.5rem;
  font-size:1.0625rem;white-space:nowrap;
}
.routes a.is-active{background:#BCEA2D;font-weight:700}
.nav-mobile{display:none}
@media (max-width:1023px){
  .nav-inner{grid-template-columns:1fr auto;height:auto;padding:0.9rem 1.25rem;gap:0.6rem;row-gap:.6rem;flex-wrap:wrap}
  .nav-desktop{display:none}
  .nav-mobile{
    display:flex;gap:0.4rem;overflow-x:auto;padding:0.4rem;
    grid-column:1 / -1;order:3;
    background:var(--surface);border:0.15rem solid var(--ink);border-radius:2rem;
    scrollbar-width:none;
  }
  .nav-mobile::-webkit-scrollbar{display:none}
  .nav-mobile a{padding:0.6rem 1rem;border-radius:1.5rem;font-size:0.95rem;flex:0 0 auto}
  .brand{font-size:1.6rem}
  .brand img{width:2rem;height:2rem}
}
.social{justify-self:end;display:flex;gap:0.75rem}
.icon-btn{
  width:3.25rem;height:3.25rem;
  border:var(--rule-panel-w) solid var(--ink);border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--ink);
  text-decoration:none;font-size:1.5rem;
}

/* ---- F9 footer (copied verbatim from mockup/v1/chrome/footer.html, LUAT 52) ---- */
footer[data-chrome="footer"]{
  width:100%;background:var(--paper);
  padding:1.5rem 5rem 1.875rem;
}
.footer-band{
  min-height:12.875rem;
  background:var(--surface);
  border:var(--rule-footer-w) solid var(--ink);
  border-radius:var(--radius-panel);
  padding:1.125rem;
  display:grid;
  grid-template-columns:15.3125rem repeat(6,1fr) 11.25rem 7.5rem;
  gap:0.625rem;align-items:stretch;
}
.f-brand{
  display:flex;flex-direction:column;justify-content:center;
  border-right:0.0625rem solid #9BA0AD;
  font:2.125rem/1.1 var(--font-display);
}
.f-brand small{font:0.875rem var(--font-body);color:var(--muted);margin-top:.35rem}
.f-card{
  display:flex;flex-direction:column;justify-content:center;
  padding:0.8125rem;border-radius:var(--radius-card);
  color:var(--ink);text-decoration:none;
}
.f-card b{font-size:1rem}
.f-card span{font-size:0.75rem;color:var(--muted);margin-top:.3rem}
.f-sources{
  display:flex;flex-direction:column;justify-content:center;padding:0.625rem;
  border-left:0.0625rem solid #9BA0AD;
}
.f-sources b{font-size:1rem}
.f-sources span{font-size:0.75rem;color:var(--muted);margin-top:.25rem}
footer .social{justify-self:auto;align-items:center;justify-content:center}
footer .icon-btn{width:2.6875rem;height:2.6875rem;font-size:1.25rem}
@media (max-width:1023px){
  .footer-band{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  .f-brand{grid-column:1 / -1;border-right:0;border-bottom:0.0625rem solid #9BA0AD;padding-bottom:.6rem}
  .f-sources{grid-column:1 / -1;border-left:0;border-top:0.0625rem solid #9BA0AD;padding-top:.6rem}
  footer .social{grid-column:1 / -1;justify-content:flex-start}
}

/* ---- border classes (LUAT 56, §4b) — route bodies use these, never ad-hoc border/outline ---- */
/* rule-edge: the soft dark contour every cream paper panel / pill shows against the lime ground in the mockup
   (measured ~#BFDF33 on #CEE93D: ink at ~15% over the ground, 1 px) */
.rule-edge{border:max(1px,0.0625rem) solid rgba(7,11,36,.16);background-clip:padding-box}
.rule-panel{border:var(--rule-panel-w) solid var(--blue);border-radius:var(--radius-panel)}
.rule-panel-selected{border:var(--rule-panel-w) double var(--blue);border-radius:var(--radius-panel)}
.rule-table{border:var(--rule-table-w) solid var(--muted);border-radius:var(--radius-card)}
.rule-input{border:var(--rule-input-w) solid var(--blue);border-radius:var(--radius-pill);box-sizing:border-box}
.rule-row{border-bottom:var(--rule-row-w) solid var(--hairline)}
.rule-rail{border-left:var(--rule-rail-w) solid var(--hairline)}
.rule-rail.right{border-left:0;border-right:var(--rule-rail-w) solid var(--hairline)}
.rule-footer-card{border:var(--rule-footer-card-w) solid var(--muted);border-radius:var(--radius-card)}
.rule-footer{border:var(--rule-footer-w) solid var(--ink);border-radius:var(--radius-panel)}
/* browser default borders never leak into a route */
:where(button,input,select,textarea){border:0}

/* ---- motion character (DESIGN.md §10 — worksite shift-change: flow bands + tag flips) ---- */
@media (prefers-reduced-motion:no-preference){
  [data-flow]{stroke-dasharray:8 6;animation:standby-flow 2.4s linear infinite}
  [data-tag-flip]{transition:transform .24s ease}
  [data-reveal-group] > *{opacity:0;transform:translateY(10px)}
}
@keyframes standby-flow{to{stroke-dashoffset:-56}}

/* X / Telegram before launch.json is filled: the button answers with a short note instead of jumping to #/ */
.icon-btn{position:relative}
.icon-btn.is-soon::after{content:'Opens at launch';position:absolute;top:calc(100% + 0.5rem);right:0;white-space:nowrap;background:var(--ink);color:#fff;font:400 0.875rem/1 var(--font-body);padding:0.5rem 0.75rem;border-radius:0.5rem;z-index:30;pointer-events:none}
footer .icon-btn.is-soon::after{top:auto;bottom:calc(100% + 0.5rem)}