/* SHOPAROUND — app.css. Tokens + page frame + shared nav/footer + border classes (LUAT 56).
   Route bodies use these tokens/classes only — zero ad-hoc border/outline declarations outside this file. */

:root{
  /* §0/§3 DESIGN.md */
  --paper: #E0C847;
  --ink: #17140F;
  --paper-card: #F8EED1;
  --action-orange: #FE7304;
  --selection-green: #6E9823;
  --muted-line: #786F59;
  --accent-grad: linear-gradient(90deg, #FE7304 0%, #6E9823 100%);

  --font-display: 'Ranchers', Impact, sans-serif;
  --font-body: 'Mitr', Arial, sans-serif;
  --font-hand: 'Gaegu', Arial, sans-serif;

  /* LUAT 50 scale: page is 1:1 with the mockup at 1920, scales proportionally 1280-2560 */
  --scale: clamp(0.667, calc(100vw / 1966), 1.333); /* kept for reference; unitless/length mix is invalid in Chromium */
  --su: clamp(0.667px, calc(100vw / 1966), 1.333px); /* length unit: ~0.977px at 1920 — corrects ~2.4% page-height overshoot vs mockup (deploy presend fix 01/10) */
  --gutter: max(16px, calc(37 * var(--su)));

  --bg: var(--paper);
  --ink-color: var(--ink);
  --a: var(--action-orange);
  --b: var(--selection-green);
  --mute: var(--muted-line);
  --surface: var(--paper-card);
}

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

/* ---------- page frame (LUAT 53) — ONE container every route shares ---------- */
.page-frame{
  width:100%;
  max-width:none;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  box-sizing:border-box;
}
main{background:var(--paper);}
main > .route{display:block;}

/* ---------- nav (N12, from chrome/nav.html, measured @1920) ---------- */
.nav{
  background:var(--paper);
  border-bottom:max(1px, calc(3 * var(--su))) solid var(--ink);
}
.nav-frame{
  height:calc(84 * var(--su));
  min-height:56px;
  display:flex;
  align-items:center;
  gap:calc(34 * var(--su));
}
.brand{
  display:flex;
  align-items:center;
  gap:calc(12 * var(--su));
  margin-right:auto;
  font-family:var(--font-display);
  font-size:max(18px, calc(30 * var(--su)));
  letter-spacing:.5px;
  color:var(--ink);
  text-decoration:none;
}
.brand img{
  width:calc(48 * var(--su));
  height:calc(48 * var(--su));
  min-width:36px;
  min-height:36px;
  object-fit:contain;
}
.links{display:flex;align-items:center;gap:calc(10 * var(--su));}
.links a{
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  font-family:var(--font-body);
  font-weight:700;
  font-size:max(12px, calc(15 * var(--su)));
  letter-spacing:.65px;
  padding:calc(10 * var(--su)) calc(14 * var(--su));
  border:max(1px, calc(2 * var(--su))) solid transparent;
  border-radius:calc(4 * var(--su));
}
.links a:hover{text-decoration:underline;}
.links a.is-active{background:var(--ink);color:var(--paper-card);border-color:var(--ink);}
.social{display:flex;gap:calc(8 * var(--su));margin-left:calc(16 * var(--su));}
.social a{
  width:calc(38 * var(--su));
  height:calc(38 * var(--su));
  min-width:30px;
  min-height:30px;
  border:max(1px, calc(2 * var(--su))) solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  text-decoration:none;
  font-weight:800;
  font-size:max(11px, calc(13 * var(--su)));
}
.nav-drawer-btn{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;}

/* ---------- footer (F9, from chrome/footer.html, measured @1920) ---------- */
.footer{background:var(--ink);color:var(--paper-card);}
.footer-frame{padding-top:calc(34 * var(--su));padding-bottom:calc(22 * var(--su));}
.footer .title{
  font-family:var(--font-display);
  font-size:max(18px, calc(28 * var(--su)));
  letter-spacing:.8px;
  margin-bottom:calc(22 * var(--su));
  color:var(--paper-card);
}
.footer .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(14 * var(--su));}
.footer .card{
  display:block;
  border:max(1px, calc(2 * var(--su))) solid var(--paper-card);
  border-radius:calc(5 * var(--su));
  padding:calc(14 * var(--su)) calc(16 * var(--su));
  min-height:calc(128 * var(--su));
  text-decoration:none;
  color:inherit;
}
.footer .card b{
  display:block;
  font-family:var(--font-display);
  color:var(--action-orange);
  font-size:max(11px, calc(13 * var(--su)));
  letter-spacing:1px;
  margin-bottom:calc(8 * var(--su));
}
.footer .card span{
  display:block;
  font-family:var(--font-hand);
  font-size:max(14px, calc(23 * var(--su)));
  line-height:1.05;
  color:var(--paper-card);
}
.footer .bottom{
  margin-top:calc(24 * var(--su));
  padding-top:calc(18 * var(--su));
  border-top:max(1px, calc(1 * var(--su))) solid var(--muted-line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:calc(12 * var(--su));
  font-size:max(11px, calc(13 * var(--su)));
  color:#D9CFB4;
}
.footer .bottom-left{display:flex;flex-direction:column;gap:4px;}
.footer .bottom-right a{color:#D9CFB4;text-decoration:none;margin-left:calc(22 * var(--su));}
.footer .ca-row span{font-family:var(--font-hand);}

/* ---------- mobile nav drawer (below 1024, full drawer below 768 per base.css) ---------- */
@media (max-width:1023px){
  .nav-drawer-btn{display:block;}
  .nav-frame .nav-desktop{display:none;}
}
.nav-mobile{display:none;}
@media (max-width:1023px){
  .nav-mobile{
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:12px var(--gutter) 16px;
    background:var(--paper);
    border-bottom:2px solid var(--ink);
  }
  body.nav-open .nav-mobile{display:flex;}
  .nav-mobile a{padding:10px 0;}
}
@media (min-width:1024px){
  .nav-mobile{display:none !important;}
}
@media (max-width:1023px){
  .footer .cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:389px),(max-width:480px){
  .footer .cards{grid-template-columns:1fr;}
}

/* ---------- shared components (DESIGN.md §5), available to route threads ---------- */
.stall-card{background:var(--paper-card);border-radius:calc(10 * var(--su));}
.stall-card.is-winner{outline:none;}
.why-note{background:var(--paper-card);transform:rotate(-3deg);}
.rule-input{border:max(1px, calc(2 * var(--su))) solid var(--muted-line);}

/* ---------- LUAT 56 border table classes — widths/colours from BORDER_TABLE.md, never ad-hoc ---------- */
.rule-job-input{border:max(1px, calc(2.2 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-job-preset-button{border:max(1px, calc(2.2 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-job-preset-button.is-active{border-color:var(--ink);}
.rule-weights-panel{border:max(1px, calc(3 * var(--su))) solid var(--muted-line);border-radius:calc(8 * var(--su));}
.rule-rules-divider{border:max(1px, calc(2.4 * var(--su))) solid var(--ink);border-radius:calc(4 * var(--su));}
.rule-weight-slider-row{border:max(1px, calc(3.3 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-preset-row-panel{border:max(1px, calc(3 * var(--su))) solid var(--action-orange);border-radius:calc(6 * var(--su));}
.rule-preset-buttons{border:max(1px, calc(2.2 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-ask-count-row{border:max(1px, calc(2.3 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-stall-count-chip{border:max(1px, calc(2.1 * var(--su))) solid var(--muted-line);border-radius:999px;}
.rule-stall-count-chip.is-selected{border-color:var(--selection-green);}
.rule-job-select-row{border:max(1px, calc(1.8 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-formula-highlight{border:max(1px, calc(4.4 * var(--su))) double var(--action-orange);border-radius:calc(6 * var(--su));}
.rule-copy-button{border:max(1px, calc(2.1 * var(--su))) solid var(--selection-green);border-radius:calc(6 * var(--su));}
.rule-json-preview-panel{border:max(1px, calc(3.6 * var(--su))) solid var(--paper-card);border-radius:calc(6 * var(--su));}
.rule-stall-score-chip{border:max(1px, calc(2.9 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-job-caption-row{border:max(1px, calc(3.3 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-weights-mini-panel{border:max(1px, calc(2 * var(--su))) solid var(--paper-card);border-radius:calc(6 * var(--su));}
.rule-preset-active-highlight{border:max(1px, calc(3.3 * var(--su))) solid var(--action-orange);border-radius:calc(6 * var(--su));}
.rule-job-tab{border:max(1px, calc(2.9 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-job-tab.is-active{border-color:var(--ink);}
.rule-pick-number-chip{border:max(1px, calc(3.6 * var(--su))) solid var(--muted-line);border-radius:999px;}
.rule-pick-number-chip.is-active{border-color:var(--ink);}
.rule-agent-pick-card{border:max(1px, calc(2.3 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-revealed-stall-card{border:max(1px, calc(2.5 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-filter-chip{border:max(1px, calc(2.2 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-filter-chip.is-selected{border-color:var(--selection-green);}
.rule-receipt-row{border:max(1px, calc(2.1 * var(--su))) double var(--muted-line);border-radius:calc(4 * var(--su));}
.rule-open-receipt-panel{border:max(1px, calc(3.7 * var(--su))) solid var(--ink);border-radius:calc(8 * var(--su));}
.rule-receipt-meta-chip{border:max(1px, calc(2.1 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-replay-button{border:max(1px, calc(3.2 * var(--su))) solid var(--ink);border-radius:999px;}
.rule-wire-step-panel{border:max(1px, calc(1.8 * var(--su))) solid var(--paper-card);border-radius:calc(6 * var(--su));}
.rule-wire-step-button{border:max(1px, calc(2.1 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}
.rule-wire-step-button.is-active{border-color:var(--action-orange);}
.rule-protocol-card{border:max(1px, calc(3.3 * var(--su))) solid var(--paper-card);border-radius:calc(8 * var(--su));}
.rule-stall-switch-chip{border:max(1px, calc(3.8 * var(--su))) solid var(--action-orange);border-radius:calc(6 * var(--su));}
.rule-stall-switch-chip.is-inactive{border-color:var(--paper-card);}
.rule-chain-read-chip{border:max(1px, calc(2.1 * var(--su))) solid var(--muted-line);border-radius:calc(6 * var(--su));}

/* home stall-card body frame — mockup draws the card sides/bottom (presend border fix 01/10) */
.rule-stall-body{border:max(1px, calc(2 * var(--su))) solid var(--muted-line);border-top:0;}
.is-winner > .rule-stall-body{border-color:var(--selection-green);}

:where(button,input,select,textarea){border:0;font-family:inherit;background:none;}

[data-launch].is-soon{opacity:.62;cursor:default;}