/* Carnival Staff — brutalist concrete.

   The defining move of this design is what is NOT drawn: no filled cards, no
   colour, no rounded corners. Structure comes from hairlines, a few 2px boxes,
   and a hard type hierarchy on one flat ground. Filling every block with a
   surface colour — the obvious thing to do — is what makes it stop looking
   like this. */

:root {
  --ink: #111110;
  --bg: #d9d7d1;
  --fill: #e3e1db;          /* keypad cells and inputs only */
  --accent: #57564f;
  --a700: #56554e;          /* secondary text, solid — never alpha-mixed */
  --a900: #161512;
  --paper: #e8e7e2;
  --hair: rgba(17, 17, 16, .22);
  --ok: #1a5c2a;
  --bad: #8c1c1c;
  --warn: #7a5a00;
  --line: 2px solid var(--ink);
  --thin: 1.5px solid var(--ink);
  --shadow: 5px 5px 0 var(--accent);
  --shadow-sm: 3px 3px 0 var(--accent);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bai Jamjuree', 'Barlow', 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px; line-height: 1.5;
  overscroll-behavior-y: none;
}

/* Barlow Condensed has no ฿ and no Thai, so both fall back to Bai Jamjuree at a
   noticeably wider advance. Every condensed run therefore states both faces. */
.cond, h1, h2, h3, .display, .num-lg, .btn, button, th, .chip, .tag {
  font-family: 'Barlow Condensed', 'Bai Jamjuree', 'Barlow', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 600;
}
/* Thai never gets uppercased — it has no case, and the transform only breaks
   the shaping of tone marks in some renderers. */
.th, .th * { text-transform: none; }

a { color: inherit; }
.muted { color: var(--a700); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.hide { display: none !important; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ typography */
/* The small caps label that heads every screen: "ROUND METER · รอบ 3 · 2026" */
.label {
  font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .22em;
  color: var(--a700); font-weight: 600;
}
.display {
  font-size: 68px; line-height: .92; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.display .unit { font-size: 17px; letter-spacing: .02em; margin-left: 6px; }
.num-lg { font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
h1 { font-size: 40px; line-height: 1.02; margin: 0; font-weight: 700; }
h2 { font-size: 19px; margin: 0 0 8px; }
h3 { font-size: 15px; margin: 0 0 6px; }

/* ----------------------------------------------------------------- rules */
.rule { border: 0; border-top: 2.5px solid var(--ink); margin: 14px 0 10px; }
.hairline { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ----------------------------------------------------------------- shell */
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; }
.screen { display: none; padding: 18px 20px calc(100px + var(--safe-b)); }
.screen.on { display: block; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 2px solid var(--ink);
  margin: -18px -20px 14px; padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
}
/* The logo file is a 1500x1500 plate with the wordmark as a thin strip across
   the middle — measured ink bounds x 13.93%-86.13%, y 42.53%-59.93%. Dropping
   it in whole leaves a third of the screen as empty plate, so the box is the
   wordmark's own aspect ratio (1083:261) and the image is scaled and shifted
   until only the ink shows. Replace with a cropped transparent SVG and all of
   this goes away. */
.logo { overflow: hidden; flex: none; display: block; aspect-ratio: 1083 / 261; }
.logo img {
  /* White wordmark on a black plate: inverting it and letting it multiply into
     the concrete drops the plate entirely, so it reads as ink with no box. */
  filter: invert(1); mix-blend-mode: multiply; display: block;
  width: 138.5%;                       /* 100 / 0.7220 — crop width to the ink */
  transform: translate(-13.93%, -42.53%);   /* % of the image, i.e. the ink origin */
}
.logo-sm { width: 104px; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg); border-top: 2px solid var(--ink);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  background: none; border: 0; border-right: 1px solid var(--hair);
  padding: 12px 4px; font-size: 11.5px; color: var(--a700); cursor: pointer;
  letter-spacing: .06em;
}
.tabbar button:last-child { border-right: 0; }
.tabbar button.on { background: var(--ink); color: var(--paper); }

/* ----------------------------------------------------------------- boxes */
/* A framed block. No fill — the ground shows through, which is the point. */
.box { border: var(--line); padding: 12px 13px; position: relative; }
.box + .box { margin-top: 12px; }
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
         align-items: stretch; }
/* Inside the grid the gap already does the spacing; the stacking margin would
   step each column down by one more row. */
.boxes .box + .box { margin-top: 0; }
.boxes.c2 { grid-template-columns: repeat(2, 1fr); }
.box .k { font-size: 12.5px; color: var(--a700); }
.box .v { font-size: 22px; line-height: 1.1; margin-top: 6px;
          font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif;
          font-weight: 700; font-variant-numeric: tabular-nums; }
.box .n { font-size: 11px; color: var(--a700); margin-top: 5px; line-height: 1.4;
          word-break: keep-all; }

/* Registration marks at the corners, as on a print plate. The box itself
   supplies two through ::before/::after; the two empty spans supply the other
   two — via their OWN pseudo-elements, because `content` does nothing on an
   ordinary element. */
.marks::before, .marks::after,
.marks > .m1::before, .marks > .m2::before {
  content: "+"; position: absolute; font-size: 14px; line-height: 1;
  color: var(--ink); font-family: 'Barlow', sans-serif; font-weight: 400;
}
.marks::before { top: -8px; left: -6px; }
.marks::after { bottom: -8px; right: -6px; }
.marks > .m1::before { top: -8px; right: -6px; }
.marks > .m2::before { bottom: -8px; left: -6px; }

/* --------------------------------------------------------------- list rows */
/* name + note on the left, a chip or a figure on the right, hairline between. */
.rows { border-top: 1px solid var(--hair); }
.rows .r {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
}
.rows .r .t { font-size: 16px; }
.rows .r .n { font-size: 11.5px; color: var(--a700); margin-top: 2px; }
.rows .r.off .t, .rows .r.off .n { color: var(--a700); }
.rows .r.tap { cursor: pointer; }

/* A data table with no frame: hairlines only. */
table.sheet { width: 100%; border-collapse: collapse; }
table.sheet th {
  font-size: 11.5px; color: var(--a700); font-weight: 600; text-align: left;
  padding: 0 0 7px; border-bottom: 1px solid var(--ink); letter-spacing: .06em;
}
table.sheet td { padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
table.sheet td.n, table.sheet th.n { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-left: 10px; }

/* ---------------------------------------------------------------- chips */
.chip-pct {
  background: var(--ink); color: var(--paper); font-weight: 700;
  font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif;
  font-size: 13px; padding: 4px 10px; letter-spacing: .04em; white-space: nowrap;
}
.chip-pct.off { background: none; color: var(--a700); border: 1.5px solid var(--hair); }
.tag {
  display: inline-block; border: var(--thin); background: transparent;
  font-size: 10.5px; padding: 2px 7px; letter-spacing: .05em; white-space: nowrap;
}
.tag-fill { background: var(--a900); color: var(--paper); border-color: var(--a900); }
.tag-ok { border-color: var(--ok); color: var(--ok); }
.tag-bad { border-color: var(--bad); color: var(--bad); }
.tag-warn { border-color: var(--warn); color: var(--warn); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  border: var(--thin); background: transparent; padding: 6px 11px;
  font-size: 12.5px; cursor: pointer; color: inherit; letter-spacing: .04em;
}
.chip.on { background: var(--ink); color: var(--paper); }
.chip[disabled] { opacity: .32; text-decoration: line-through; pointer-events: none; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-block; text-align: center; padding: 13px 18px;
  border: var(--line); background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow); font-size: 16px; cursor: pointer; text-decoration: none;
  letter-spacing: .04em;
}
.btn:active { box-shadow: 0 0 0 var(--accent); transform: translate(3px, 3px); }
.btn-2 { background: transparent; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--ink);
             border: 2px dashed var(--ink); box-shadow: none; }
.btn-ghost:active { transform: none; }
.btn[disabled], .btn.off { opacity: .4; box-shadow: none; pointer-events: none; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 13.5px; box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- inputs */
label { display: block; font-size: 11.5px; margin-bottom: 4px; color: var(--a700);
        letter-spacing: .05em; text-transform: uppercase; }
input, select, textarea {
  width: 100%; padding: 11px; border: var(--line); background: var(--fill);
  color: var(--ink); font-family: inherit; font-size: 16px; /* 16px stops iOS zooming */
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent);
}
.field + .field { margin-top: 12px; }
.field-err { color: var(--bad); font-size: 12.5px; margin-top: 5px; }

/* ---------------------------------------------------------------- keypad */
.pips { display: flex; gap: 11px; margin: 4px 0 20px; }
.pip { width: 19px; height: 19px; border: var(--thin); background: transparent; }
.pip.on { background: var(--ink); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.keypad button {
  padding: 22px 0; border: var(--thin); background: var(--fill); cursor: pointer;
  font-size: 23px; font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif;
  font-weight: 600; color: var(--ink);
}
.keypad button:active { background: var(--ink); color: var(--paper); }
/* The empty cell keeps the grid square without offering a key. */
.keypad button.blank { visibility: hidden; pointer-events: none; }

/* ----------------------------------------------------------------- misc */
.banner { border: var(--line); padding: 10px 12px; font-size: 13.5px; }
.banner.bad { border-color: var(--bad); color: var(--bad); }
.banner.ok { border-color: var(--ok); color: var(--ok); }
.banner.warn { border-color: var(--warn); color: var(--warn); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b)); z-index: 60;
  border: var(--line); background: var(--ink); color: var(--paper);
  padding: 11px 15px; font-size: 13.5px; max-width: 92vw; box-shadow: var(--shadow);
}
.toast.bad { background: var(--bad); border-color: var(--bad); }

/* The slide-up confirmation panel. Named `modal`, not `sheet`: `table.sheet`
   is the entitlement sheet, and a shared class name handed that table a 2px
   frame it was never supposed to have. */
.modal-bg {
  position: fixed; inset: 0; background: rgba(17, 17, 16, .55); z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--bg); border: var(--line); width: 100%; max-width: 560px;
  max-height: 88vh; overflow: auto; padding: 18px 20px;
  padding-bottom: calc(18px + var(--safe-b));
}
.skel { border: var(--thin); height: 62px; }
.skel + .skel { margin-top: 10px; }

/* ------------------------------------------------------------ lock screen */
#screen-lock, #screen-register { padding: 0; }
.lockwrap {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 26px calc(32px + var(--safe-b)); max-width: 460px; margin: 0 auto;
}
.lockwrap .logo { width: 78%; max-width: 340px; margin-bottom: 20px; }
.lockwrap h1 { margin: 14px 0 10px; }

/* --------------------------------------------------------------- the bell */
/* Notifications are not a place you go, so they are not a tab — they are a
   mark on the header that appears when something has happened. */
.bell {
  border: var(--thin); background: transparent; color: var(--ink);
  width: 34px; height: 30px; padding: 0; cursor: pointer; position: relative;
  display: grid; place-items: center; flex: none;
}
.bell svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
            stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell .dot {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  background: var(--ink); color: var(--paper); font-size: 10px; line-height: 16px;
  text-align: center; font-style: normal; padding: 0 3px;
  font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif; font-weight: 700;
}

/* ------------------------------------------------------------- catalogue */
/* Two per row, because a garment has to be big enough to judge. No fill and no
   frame around the whole card — the photo is the block, and a hairline under
   each one keeps the column reading as a list rather than a set of tiles. */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.plist { border-top: 1px solid var(--hair); }
.plist .card { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.plist .card .spread { align-items: flex-start; }
.plist .card .nm { margin: 0; font-size: 14px; }
.plist .card .pr { margin: 0 0 0 10px; white-space: nowrap; }
.plist .card .mt .tag { margin-left: 6px; }
.plist .card.blocked .nm { color: var(--a700); }
.link { background: none; border: 0; padding: 0; margin-top: 7px; color: var(--ink);
  text-decoration: underline; cursor: pointer; align-self: flex-start; }
.card { display: flex; flex-direction: column; min-width: 0; }
.card .shot {
  position: relative; border: var(--thin); background: var(--paper);
  aspect-ratio: 1 / 1.08; overflow: hidden; cursor: pointer;
}
.card .shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card .shot.ph { display: grid; place-items: center; cursor: default; }
/* Its own class, not a bare `span`: the corner flags are spans too, and a
   descendant selector on the element name repainted them placeholder grey. */
.card .shot .ph-label {
  font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif; font-size: 10.5px;
  letter-spacing: .14em; color: var(--a700); text-align: center; padding: 0 8px;
}
/* A corner flag, printed over the photo rather than pushed below it. */
.card .flag {
  position: absolute; top: 0; left: 0; background: var(--ink); color: var(--paper);
  font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: .1em; padding: 3px 7px;
}
/* Over a photograph a transparent flag is unreadable, so "หมด" keeps the
   ground colour rather than nothing at all. */
.card .flag.out { background: var(--bg); color: var(--ink);
                  border-right: var(--thin); border-bottom: var(--thin); }
/* Two solid flags would be indistinguishable at a glance, so the sale mark is
   told apart by its corner, not by a colour this design does not have. */
.card .flag.sale { left: auto; right: 0; }
.card .more {
  position: absolute; bottom: 0; right: 0; background: var(--bg);
  border-left: var(--thin); border-top: var(--thin);
  font-size: 10px; letter-spacing: .08em; padding: 2px 6px;
}
.card .nm { font-size: 13px; line-height: 1.35; margin: 8px 0 2px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; }
.card .mt { font-size: 10.5px; color: var(--a700); line-height: 1.4; }
.card .pr { font-size: 16px; margin-top: 4px; font-variant-numeric: tabular-nums;
            font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif;
            font-weight: 700; }
.card .pr s { color: var(--a700); font-size: 12px; font-weight: 500; margin-left: 6px; }
.card .why { font-size: 10.5px; color: var(--a700); line-height: 1.4; margin-top: 4px; }
.card .szrow { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.card.blocked .shot img { filter: grayscale(1); opacity: .7; }

/* A size chip is small enough that the 2px frame would eat the letter. */
.szchip {
  border: 1.5px solid var(--ink); background: transparent; color: inherit;
  font-family: 'Barlow Condensed', 'Bai Jamjuree', sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: .04em; padding: 3px 7px; cursor: pointer;
  min-width: 26px;
}
.szchip.on { background: var(--ink); color: var(--paper); }
.szchip[disabled] { border-color: var(--hair); color: var(--a700);
                    text-decoration: line-through; pointer-events: none; }
.szchip i { font-style: normal; margin-left: 3px; font-size: 10px; }

/* --------------------------------------------------- the product overlay */
/* The card's photo is 160px, which is not enough to decide anything. Tapping it
   opens the shot full width, with every size and where each one physically is. */
.shotwrap { border: var(--line); background: var(--paper); aspect-ratio: 1 / 1.08; }
.shotwrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sides { display: flex; gap: 7px; margin-top: 10px; }
.sides .chip { flex: 1; text-align: center; }
.stocktable td.b { width: 55%; }
.stocktable .sz { font-size: 11px; color: var(--a700); margin-top: 3px;
                  line-height: 1.4; }