@import url('https://fonts.googleapis.com/css2?family=Candal&family=Arsenal:wght@400;600;700&family=Chathura:wght@700;800&display=swap');

:root{
  /* ---- page scale (LUAT 50): 1:1 at 1920, proportional 1280-2560 ---- */
  --scale: clamp(0.6667, calc(100vw / 1920px), 1.3333);

  /* ---- colour tokens (DESIGN.md S0/S3) ---- */
  --paper: #EB0E1B;
  --nav-red: #FE1024;
  --ink: #070707;
  --paper-white: #F7F6F2;
  --signal-cyan: #0BD5D4;
  --signal-yellow: #F8E92C;
  --arc-blue: #2775CA;
  --muted: #4A4A4A;

  /* ---- border table (DESIGN.md S4c, hairlines never disappear) ---- */
  --rule-hair: max(1px, calc(1.1px * var(--scale)));
  --rule-mid: max(1px, calc(2.3px * var(--scale)));
  --rule-heavy: max(1px, calc(4.2px * var(--scale)));

  /* ---- page frame (DESIGN.md S0): 5px left / 54px right gutter at 1920 ---- */
  --gutter-l: calc(5px * var(--scale));
  --gutter-r: calc(54px * var(--scale));
  --container-max: calc(1860px * var(--scale));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:Arsenal,sans-serif;min-height:100vh;overflow-x:hidden}
:where(button,input,select){border:0;outline:0;font-family:inherit;background:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- one page frame used by every route; routes never add their own max-width/padding/background ---- */
.page-frame{width:100%;max-width:none;padding:0 var(--gutter-r) 0 var(--gutter-l)}
.page-frame>.frame-inner{width:100%;max-width:var(--container-max);margin:0 auto}

main{display:block}
main.is-leaving{opacity:0.001}

/* ================= NAV ================= */
[data-chrome="nav"]{
  box-sizing:border-box;width:100%;
  height:calc(106px * var(--scale));
  background:var(--nav-red);color:#fff;
  display:flex;align-items:center;flex-wrap:nowrap;
  padding:0 calc(48px * var(--scale));
  font-family:Arsenal,sans-serif;
  gap:calc(24px * var(--scale));
}
[data-chrome="nav"] .brand{
  display:flex;align-items:center;gap:calc(14px * var(--scale));
  font-family:Candal,sans-serif;font-size:clamp(20px, calc(30px * var(--scale)), 40px);
  flex:0 0 auto;margin-right:auto;
}
[data-chrome="nav"] .brand img{height:calc(44px * var(--scale));min-height:40px;width:auto;display:block}
[data-chrome="nav"] .nav-links{
  display:flex;border:var(--rule-mid) solid #fff;border-radius:calc(28px * var(--scale));overflow:hidden;
  flex:0 0 auto;
}
[data-chrome="nav"] .nav-links a{
  color:#fff;font-size:clamp(12px, calc(16px * var(--scale)), 18px);
  padding:calc(11px * var(--scale)) calc(24px * var(--scale));
  font-weight:600;white-space:nowrap;
}
[data-chrome="nav"] .nav-links a.is-active{background:#fff;color:var(--nav-red)}
[data-chrome="nav"] .nav-actions{
  display:flex;align-items:center;gap:calc(20px * var(--scale));
  font-size:clamp(12px, calc(16px * var(--scale)), 18px);flex:0 0 auto;
}
[data-chrome="nav"] .social{color:#fff;font-weight:600}
[data-chrome="nav"] [data-wallet-connect]{
  background:var(--ink);color:#fff;border-radius:calc(14px * var(--scale));
  padding:calc(16px * var(--scale)) calc(30px * var(--scale));
  font:700 clamp(12px, calc(16px * var(--scale)), 18px) Arsenal,sans-serif;
}
[data-chrome="nav"] .nav-menu-btn{display:none}

/* ================= FOOTER ================= */
[data-chrome="footer"]{
  background:var(--paper-white);color:var(--ink);
  padding:calc(18px * var(--scale)) calc(0px) calc(16px * var(--scale));
  font:clamp(11px, calc(14px * var(--scale)), 15px) Arsenal,sans-serif;
  border-top:calc(10px * var(--scale)) dashed var(--nav-red);
  box-sizing:border-box;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(16px * var(--scale));
}
[data-chrome="footer"] .footer-mark{height:calc(28px * var(--scale));width:auto}
[data-chrome="footer"] .footer-links{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(16px * var(--scale));
  flex:1 1 100%;border-bottom:var(--rule-hair) solid var(--ink);
  padding-bottom:calc(12px * var(--scale));
}
[data-chrome="footer"] .footer-meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(16px * var(--scale));
  flex:1 1 100%;
}
[data-chrome="footer"] .footer-social{display:flex;gap:calc(14px * var(--scale));align-items:center}
[data-chrome="footer"] a:hover{text-decoration:underline}

/* ================= MOBILE (<=1024) ================= */
@media (max-width: 1024px){
  [data-chrome="nav"]{flex-wrap:wrap;height:auto;padding:16px 20px;gap:12px}
  [data-chrome="nav"] .nav-menu-btn{
    display:block;margin-left:auto;background:#fff;color:var(--nav-red);
    border-radius:10px;padding:10px 18px;font:700 14px Arsenal,sans-serif;
  }
  [data-chrome="nav"] .nav-links{display:none;flex-direction:column;width:100%;border-radius:12px}
  [data-chrome="nav"][data-nav-open="true"] .nav-links{display:flex}
  [data-chrome="nav"] .nav-links a{text-align:center;padding:14px}
  [data-chrome="nav"] .nav-actions{display:none;width:100%;justify-content:space-between}
  [data-chrome="nav"][data-nav-open="true"] .nav-actions{display:flex}
}

/* ---- .rule-* component classes (DESIGN.md S4c) — routes use these, never their own border/outline ---- */
.rule-row{border-bottom:var(--rule-hair) solid var(--muted)}
.rule-row-top{border-top:var(--rule-hair) solid var(--muted)}
.rule-cell{border-left:var(--rule-hair) solid var(--muted)}
.rule-cell-light{border-left:var(--rule-hair) solid rgba(255,255,255,.7)}
.rule-input{border:var(--rule-mid) solid var(--ink)}
.rule-panel{border:var(--rule-mid) solid var(--ink)}
.rule-card{border:var(--rule-mid) solid var(--muted)}
.rule-tabstrip{border:var(--rule-hair) solid var(--ink)}
.rule-chart-axis{border-left:var(--rule-heavy) solid var(--ink)}
.rule-modal{border:var(--rule-hair) solid var(--paper)}
.rule-footer-top{border-top:var(--rule-hair) solid var(--muted)}

/* ===== more .rule-* classes (DESIGN.md S4c) — ticket receipt, data grids, sign modal ===== */
:root{--ru:calc(100vw / 1920);--rh:max(1px, calc(1.1 * var(--ru)));--rm:max(1px, calc(2.3 * var(--ru)))}
.rule-chip{border:var(--rh) solid #BFC3C9}
.rule-chip.is-on{border-color:var(--paper-white)}
.rule-grid{border:var(--rh) solid #C9CDD3;border-collapse:collapse}
.rule-grid th,.rule-grid td{border-left:var(--rh) solid #DFE2E9;border-top:var(--rh) solid #DFE2E9}
.rule-grid th:first-child,.rule-grid td:first-child{border-left:0}
.rule-grid thead th{border-top:0;border-left-color:#3A3A3A}
.rule-vsep{border-left:var(--rh) solid #BFC3C9}
.rule-hline{border-top:var(--rh) solid #C9CDD3}
.rule-dash{border-top:max(1px, calc(2 * var(--ru))) dashed var(--ink)}
.rule-modal-dark{border:var(--rh) solid #2A2A2A}
.rule-field{border:var(--rm) solid #5E6265}
/* ===== fix-presend: white tiles/panels on the red ground, receipt frame, table/grid bottoms (BORDER_BRIEF) ===== */
.rule-tile{border:var(--rh) solid #BFC3C9}
.rule-voucher{border:var(--rm) solid var(--paper)}
.rule-rowb{border-bottom:var(--rh) solid #C9CDD3}
.rule-vsep-r{border-right:var(--rh) solid #BFC3C9}
.rule-ink-b{border-bottom:var(--rm) solid var(--ink)}
.rule-paper-b{border-bottom:var(--rm) solid var(--paper)}
.rule-ink-t{border-top:var(--rm) solid var(--ink)}
:where(main) :where(a,button,input):focus-visible{outline:max(2px, calc(2 * var(--ru))) solid var(--signal-yellow);outline-offset:2px}