/* ============================================================================
   storekit — stylesheet

   The palette, the ink ranks, the pills and the square corners are the studio
   design system: docs/boss-dashboard/14-design-system.md.

   Two rules this file may never break:
   1. No EXTERNAL network request. No @import, no CDN, no fonts.googleapis. The
      same-origin url("/static/fonts/...") below is fine — this app serves its own
      static directory.
   2. Raw tracker pink #FA1D60 is not a text colour. It measures 3.75:1 on the
      paper ground. Text takes --brand-deep; pill grounds and bar fills take
      --brand.

   Ink ranks:
     --ink    headings and field values
     --ink-2  every number and small label
     --ink-3  graphics only, never text
   ========================================================================= */

/* Geist Sans and Geist Mono, SIL Open Font License 1.1, licence at
   static/fonts/OFL.txt. Self-hosted because the studio is Turkish and a system stack
   renders `Işık` differently on every machine. Geist covers ş ğ ı İ ö ü ç. */
@font-face{
  font-family:"Geist";
  src:url("/static/fonts/Geist%5Bwght%5D.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("/static/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --paper:#F3F3F2; --card:#FFFFFF; --sunk:#F8F8F7;
  --ink:#2C2C2C; --ink-2:#5C5C5C; --ink-3:#8B8B8B;
  --rule:#E4E4E2; --rule-2:#EDEDEB;
  --brand:#FA1D60; --brand-soft:#FDE7EE; --brand-deep:#C4104A;
  --good:#1E7A4C; --good-soft:#E4F3EA;
  --warn:#8A5B00; --warn-soft:#FBF0DA;
  --bad:#B4231C;  --bad-soft:#FBE6E4;
  --sans:"Geist",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:400 14.5px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-deep)}
h1,h2,h3{margin:0; letter-spacing:-.02em}
.wrap{max-width:1240px; margin:0 auto; padding:28px 24px 96px}

/* ------------------------------------------------------------------ header */
.top{
  display:flex; align-items:center; gap:16px;
  border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:26px;
}
.brandmark{font:700 19px/1 var(--sans); letter-spacing:-.03em}
.brandmark span{color:var(--brand-deep)}
.tagline{font:600 12.5px/1.4 var(--sans); color:var(--ink-2)}
.top nav{margin-left:auto; display:flex; align-items:center; gap:14px}
.top nav a{font:600 13px/1 var(--sans); text-decoration:none}
.top nav a.here{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.whoami{font:400 12.5px/1.4 var(--sans); color:var(--ink-2)}

/* ------------------------------------------------------------------- panels */
.panel{background:var(--card); border:1px solid var(--rule); padding:20px 22px; margin-bottom:18px}
.sunk{background:var(--sunk); border:1px solid var(--rule); padding:14px 16px}
.eyebrow{font:600 12.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px}
.h2{font:700 20px/1.3 var(--sans); margin-bottom:4px}
.sub{font:400 13.5px/1.5 var(--sans); color:var(--ink-2); max-width:66ch}

/* -------------------------------------------------------------------- pills */
.pill{
  display:inline-block; font:700 11.5px/1.5 var(--sans); padding:2px 8px;
  color:#fff; background:var(--ink-3); white-space:nowrap;
}
.pill--good{background:var(--good)}
.pill--warn{background:var(--warn)}
.pill--bad{background:var(--bad)}
.pill--brand{background:var(--brand)}
.pill--quiet{background:var(--ink-3)}

/* ------------------------------------------------------------------ banners */
.banner{border:1px solid var(--rule); padding:12px 15px; margin-bottom:18px;
        font:400 13.5px/1.55 var(--sans); white-space:pre-wrap}
.banner--note{background:var(--good-soft); border-color:#BFE0CD; color:#14432C}
.banner--error{background:var(--bad-soft); border-color:#EFC4C0; color:#7A1712}
.banner--live{background:var(--brand-soft); border-color:#F6C4D5; color:#7B0B31}
.banner--dry{background:var(--warn-soft); border-color:#E8D6AC; color:#5C3D00}
.banner b{font-weight:700}

/* ------------------------------------------------------------------- kpis */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--rule)}
.kpi{background:var(--card); padding:14px 16px}
.kpi-k{font:600 12px/1.3 var(--sans); color:var(--ink-2)}
.kpi-v{font:700 27px/1.15 var(--sans); letter-spacing:-.03em; margin-top:2px}
.kpi-n{font:400 12.5px/1.4 var(--sans); color:var(--ink-2)}
.kpi--brand .kpi-v{color:var(--brand-deep)}

/* -------------------------------------------------------------- game cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--rule); padding:18px 20px; display:flex; flex-direction:column; gap:10px}
.card--ready{border-left:4px solid var(--good)}
.card--blocked{border-left:4px solid var(--brand)}
.card h3{font:700 17px/1.3 var(--sans)}
.card h3 a{text-decoration:none; color:var(--ink)}
.card h3 a:hover{color:var(--brand-deep)}
.card .meta{font:400 12.5px/1.5 var(--mono); color:var(--ink-2); word-break:break-all}
.card .rowline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card .storename{font:400 13.5px/1.45 var(--sans); color:var(--ink-2)}

/* --------------------------------------------------------------- mini bars */
.mini{height:8px; background:var(--rule-2); position:relative; overflow:hidden}
.mini i{display:block; height:100%; background:var(--ink)}
.mini i.is-brand{background:var(--brand)}
.mini i.is-good{background:var(--good)}
.mini i.is-bad{background:var(--bad)}
.barline{display:flex; align-items:center; gap:10px}
.barline .mini{flex:1}
.barline .n{font:400 12.5px/1 var(--sans); color:var(--ink-2); min-width:78px; text-align:right}
.barline .n b{font:600 12.5px/1 var(--mono)}

/* ------------------------------------------------------------------ fields */
.field{border-top:1px solid var(--rule-2); padding:16px 0}
.field:first-child{border-top:0}
.field-head{display:flex; align-items:baseline; gap:10px; margin-bottom:3px}
.field-head label{font:700 14.5px/1.3 var(--sans); text-transform:capitalize}
.field-help{font:400 12.5px/1.5 var(--sans); color:var(--ink-2); margin-bottom:8px; max-width:72ch}
.field input[type=text], .field textarea{
  width:100%; font:400 14px/1.55 var(--sans); color:var(--ink);
  background:var(--sunk); border:1px solid var(--rule); padding:9px 11px;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus, .field textarea:focus{outline:2px solid var(--brand); outline-offset:-1px; background:#fff}
.field.is-over input, .field.is-over textarea{border-color:var(--bad); background:var(--bad-soft)}
.counter{display:flex; align-items:center; gap:10px; margin-top:7px}
.counter .mini{flex:1; max-width:320px}
.counter .n{font:600 12.5px/1 var(--mono); color:var(--ink-2)}
.counter .n.is-full{color:var(--warn)}
.counter .n.is-over{color:var(--bad)}
.applenow{margin-top:9px; padding:9px 11px; background:var(--sunk); border-left:3px solid var(--ink-3);
          font:400 13px/1.5 var(--sans); color:var(--ink-2); white-space:pre-wrap}
.applenow b{font:600 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:4px}
.applenow.is-same{border-left-color:var(--good)}
.applenow.is-diff{border-left-color:var(--brand)}

/* ----------------------------------------------------------------- buttons */
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:4px}
button, .btn{
  font:700 13.5px/1 var(--sans); padding:11px 16px; cursor:pointer;
  border:1px solid var(--ink); background:var(--card); color:var(--ink); text-decoration:none;
}
button:hover, .btn:hover{background:var(--sunk)}
.btn--go{background:var(--ink); color:#fff}
.btn--go:hover{background:#000}
.btn--send{background:var(--brand); border-color:var(--brand); color:#fff}
.btn--send:hover{background:var(--brand-deep); border-color:var(--brand-deep)}
.btn--quiet{border-color:var(--rule); color:var(--ink-2)}
.btn-note{font:400 12.5px/1.45 var(--sans); color:var(--ink-2); flex-basis:100%; max-width:80ch}

/* ------------------------------------------------------------------ tables */
.tscroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font:400 13px/1.5 var(--sans)}
thead th{font:600 12px/1.3 var(--sans); color:var(--ink-2); background:var(--sunk);
         text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule); white-space:nowrap}
tbody td{padding:8px 10px; border-bottom:1px solid var(--rule-2); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.mono, .mono{font-family:var(--mono)}
td.was{color:var(--ink-2); text-decoration:line-through}

/* ------------------------------------------------------------------- steps */
.step{border-top:1px solid var(--rule-2); padding:15px 0; display:flex; gap:14px; align-items:flex-start}
.step:first-child{border-top:0}
.step-body{flex:1}
.step h4{margin:0 0 4px; font:700 14.5px/1.35 var(--sans)}
.step.is-done h4{color:var(--ink-2)}
.step dl{margin:8px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
         font:400 13px/1.5 var(--sans); color:var(--ink-2)}
.step dt{font:600 12px/1.5 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
.step dd{margin:0}
.step form{margin:0}

/* ------------------------------------------------------------------- forms */
.authwrap{max-width:412px; margin:9vh auto 0; padding:0 20px}
.authwrap .panel{padding:26px 26px 28px}
.authwrap label{display:block; font:600 12.5px/1 var(--sans); color:var(--ink-2); margin:14px 0 5px}
.authwrap input{width:100%; font:400 14.5px/1.5 var(--sans); background:var(--sunk);
                border:1px solid var(--rule); padding:10px 12px}
.authwrap input:focus{outline:2px solid var(--brand); outline-offset:-1px; background:#fff}
.authwrap button{width:100%; margin-top:20px}
.authwrap .alt{font:400 13px/1.5 var(--sans); color:var(--ink-2); margin-top:16px}

@media (max-width:560px){
  /* One column, so three KPI tiles never leave a fourth empty cell showing the grid
     background. `auto-fit` gives two columns at this width and an odd count then reads
     as a missing tile. */
  .kpis{grid-template-columns:1fr}
  .wrap{padding:20px 14px 72px}
  .top{flex-wrap:wrap; gap:8px}
  .top nav{margin-left:0; flex-basis:100%}
  .step{flex-direction:column; gap:8px}
  .step dl{grid-template-columns:1fr}
}