/*
 * Stall Register — the ceramic-studio register
 * ---------------------------------------------
 * DESIGN LAYER (Mara Voss). The interaction + visual pass over Rafael's
 * machine. Wiring untouched: every id, data-action, data-view, and every
 * JS-generated class name is preserved. This file owns surfaces, type,
 * palette, spacing, states, and the two faces at all three widths.
 *
 * The register is "The Maker's Table": warm oatmeal ground, glaze-brown ink,
 * a terracotta accent for the day's take and primary actions, and a celadon
 * (glaze green) for specials + the "it's saved" moments. Fraunces (soft
 * serif) carries the numbers and headings — the money should read like it
 * was thrown on a wheel, not printed on a receipt. Hanken Grotesk carries
 * the UI. Both self-hosted, fully offline.
 *
 * Undo law: the undo control keeps sell-button real estate on every face,
 * always in reach, never buried. Touch targets stay generous. Contrast is
 * tuned for a bright outdoor screen.
 */

/* ============================ fonts ============================= */
/* Self-hosted variable fonts — no network at the stall. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- palette: real glaze tones, not a gray POS ---- */
  --paper:      #f4ece0;   /* warm oatmeal — the tabletop */
  --paper-2:    #efe4d4;   /* a shade deeper, for wells */
  --card:       #fffaf3;   /* fired-clay white, warm not blue */
  --card-2:     #fbf3e8;
  --ink:        #33271d;   /* deep glaze brown, near-black warm */
  --ink-soft:   #7a6a5b;   /* stoneware grey-brown */
  --ink-faint:  #a89684;   /* faint slip */
  --line:       #e2d3bf;   /* hairline, warm */
  --line-soft:  #ece0cf;

  --accent:      #b0502b;   /* terracotta — the take, the primary tap */
  --accent-deep: #984525;   /* pressed terracotta */
  --accent-ink:  #fff8f1;
  --accent-dim:  #f3ddcd;   /* terracotta wash */
  --accent-dim2: #ecd0bc;

  --glaze:      #5d7c60;    /* celadon glaze green — specials + "saved" */
  --glaze-deep: #4a6a4d;
  --glaze-dim:  #dfe7d8;
  --glaze-ink:  #f2f6ee;

  --danger:     #a6392e;
  --danger-dim: #f0d8d1;
  --ok:         var(--glaze);
  --warn:       #a86a26;

  --shadow-sm:  0 1px 2px rgba(51,39,29,.06), 0 2px 6px rgba(51,39,29,.06);
  --shadow:     0 2px 6px rgba(51,39,29,.07), 0 10px 26px rgba(51,39,29,.10);
  --shadow-lg:  0 4px 14px rgba(51,39,29,.10), 0 20px 50px rgba(51,39,29,.16);
  --shadow-tap: 0 1px 0 rgba(51,39,29,.14), 0 4px 10px rgba(51,39,29,.10);

  /* ---- type ---- */
  --font:      "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:     "Fraunces", Georgia, "Times New Roman", serif;
  --fs-take:   clamp(3.2rem, 2.2rem + 5vw, 4.6rem);
  --fs-big:    2rem;

  /* ---- geometry ---- */
  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 9px;
  --tap:       58px;
  --tap-lg:    92px;    /* sell buttons + undo */
  --gap:       12px;
  --pad:       18px;
  --maxw:      720px;
}

* { box-sizing: border-box; }

/* [hidden] must always win over any display rule. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 450;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* A faint stoneware grain over the ground — texture without noise. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(176,80,43,.05), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(93,124,96,.045), transparent 46%);
}

body.sheet-locked { overflow: hidden; }

#app {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================ topbar ============================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.tabs {
  display: flex;
  gap: 2px;
  background: var(--paper-2);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}

.tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 42px;
  transition: color .15s ease, background .18s ease, box-shadow .18s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-current {
  background: var(--card);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.topbar__settings {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 42px;
  transition: color .15s ease, border-color .15s ease;
}
.topbar__settings:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ============================ panels ============================= */

.panel { display: none; flex: 1; padding: var(--pad); }
.panel.is-active { display: block; }

.section-title {
  font-family: var(--serif);
  font-weight: 560;
  font-optical-sizing: auto;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.section-note { color: var(--ink-soft); font-size: .94rem; line-height: 1.45; margin: 0 0 16px; }

/* ========================= no market ============================ */

.no-market {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64vh;
  text-align: center;
}
.no-market__inner {
  max-width: 360px;
  padding: 40px 28px 44px;
}
.no-market__inner::before {
  content: "";
  display: block;
  width: 66px; height: 66px;
  margin: 0 auto 22px;
  border-radius: 50% 50% 48% 52% / 56% 54% 46% 44%;
  background:
    radial-gradient(circle at 38% 34%, var(--card) 0 18%, transparent 19%),
    linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,.16), var(--shadow);
}
.no-market__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -.015em;
  margin: 0 0 10px;
}
.no-market__body { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; margin: 0 0 28px; }

/* ========================== live register ======================= */

.live { padding-bottom: calc(var(--tap-lg) + 44px); } /* room for the pinned dock */

/* Phone: the take is a full-width band, the maker's till slip. Market name
   and date ride the top line; the big money owns its own line, glanceable. */
.live__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--gap);
  margin-bottom: 20px;
  padding: 18px 22px 20px;
  background: linear-gradient(158deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.live__header::before {
  content: "";
  position: absolute;
  top: -50%; right: -12%;
  width: 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(255,248,241,.12), transparent 68%);
  pointer-events: none;
}
.live__market { display: flex; flex-direction: column; min-width: 0; position: relative; }
.live__market-name {
  font-family: var(--serif);
  font-weight: 540;
  font-size: 1.14rem;
  letter-spacing: -.005em;
  line-height: 1.15;
  color: var(--accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live__market-date {
  color: color-mix(in srgb, var(--accent-ink) 78%, transparent);
  font-size: .8rem;
  font-weight: 560;
  margin-top: 2px;
  letter-spacing: .01em;
}

.live__take {
  grid-column: 1 / -1;
  text-align: left;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  position: relative;
}
.live__take-num {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-take);
  font-weight: 560;
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.live__take-count {
  color: color-mix(in srgb, var(--accent-ink) 76%, transparent);
  font-size: .74rem;
  font-weight: 640;
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* the sell grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-bottom: 18px;
}

.sell-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--card) 0%, var(--card-2) 100%);
  color: var(--ink);
  border-radius: var(--radius);
  min-height: var(--tap-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform .07s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: var(--shadow-tap);
}
.sell-btn::after {
  /* pressed glaze wash — lands on tap, fades on release */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-dim);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.sell-btn:hover { border-color: var(--accent-dim2); }
.sell-btn:active { transform: scale(.975); box-shadow: var(--shadow-sm); }
.sell-btn:active::after { opacity: 1; }
.sell-btn__name {
  font-weight: 680;
  font-size: 1.12rem;
  line-height: 1.15;
  position: relative;
  letter-spacing: -.005em;
}
.sell-btn__price {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  position: relative;
}

/* a special piece reads unmistakably different — a glaze-green throw tag */
.sell-btn--special {
  border-color: color-mix(in srgb, var(--glaze) 40%, var(--line));
  background: linear-gradient(165deg, var(--card) 0%, var(--glaze-dim) 130%);
}
.sell-btn--special::before {
  content: "one-off";
  position: absolute;
  top: 10px; right: 10px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--glaze-ink);
  background: var(--glaze);
  padding: 3px 7px 2px;
  border-radius: 999px;
}
.sell-btn--special::after { background: var(--glaze-dim); }
.sell-btn--special .sell-btn__price { color: var(--glaze-deep); }
.sell-btn--special .sell-btn__name { padding-right: 46px; }

.grid-empty {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  text-align: center;
  padding: 34px 18px;
  line-height: 1.5;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.live__actions {
  display: flex;
  gap: var(--gap);
}
.live__actions .btn-ghost { flex: 1; }

/* ===================== the pinned UNDO dock ===================== */
/* Same real estate as selling. Always in reach. */

.undo-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: var(--gap);
  padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top,
    var(--paper) 62%,
    color-mix(in srgb, var(--paper) 70%, transparent) 88%,
    rgba(244,236,224,0) 100%);
}
.undo-dock[hidden] { display: none; }

.undo-btn {
  appearance: none;
  flex: 2;
  border: none;
  background: linear-gradient(168deg, #3d2f23 0%, var(--ink) 100%);
  color: #fff8f1;
  border-radius: var(--radius);
  min-height: var(--tap-lg);
  font: inherit;
  font-weight: 720;
  font-size: 1.16rem;
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .07s ease, opacity .15s ease;
}
.undo-btn:active { transform: scale(.98); }
.undo-btn__icon { font-size: 1.5rem; line-height: 1; margin-top: -2px; }
.undo-btn.is-disabled { opacity: .32; }

.close-btn {
  appearance: none;
  flex: 1;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  min-height: var(--tap-lg);
  font: inherit;
  font-weight: 660;
  font-size: 1.02rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .07s ease, border-color .12s ease;
}
.close-btn:active { transform: scale(.98); }
.close-btn:hover { border-color: var(--accent-dim2); }

/* ============================ buttons =========================== */

.btn-primary {
  appearance: none;
  border: none;
  background: linear-gradient(168deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 15px 22px;
  min-height: var(--tap);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .07s ease, filter .12s ease;
}
.btn-primary:active { transform: scale(.985); filter: brightness(.96); }

.btn-ghost {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 620;
  font-size: 1rem;
  padding: 15px 22px;
  min-height: var(--tap);
  cursor: pointer;
  transition: transform .07s ease, border-color .12s ease;
}
.btn-ghost:active { transform: scale(.985); }
.btn-ghost:hover { border-color: var(--ink-faint); }

.btn-danger {
  appearance: none;
  border: 1px solid var(--danger);
  background: var(--card);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 680;
  padding: 15px 22px;
  min-height: var(--tap);
  cursor: pointer;
  transition: background .12s ease;
}
.btn-danger:active { background: var(--danger-dim); }

.btn-big { font-size: 1.18rem; min-height: var(--tap-lg); padding: 20px 34px; border-radius: var(--radius); }
.btn-block { display: block; width: 100%; }

/* ============================ ledger =========================== */

.ledger-empty { text-align: center; padding: 56px 20px; }
.ledger-empty::before {
  content: "";
  display: block;
  width: 60px; height: 60px;
  margin: 0 auto 22px;
  border-radius: 46% 54% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(150deg, var(--glaze) 0%, var(--glaze-deep) 100%);
  box-shadow: inset 0 -5px 12px rgba(0,0,0,.16), var(--shadow-sm);
}
.ledger-empty__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 12px;
}
.ledger-empty__body { color: var(--ink-soft); max-width: 380px; margin: 0 auto; line-height: 1.55; }

/* season summary — the header of the ledger */
.season { margin-bottom: 30px; }
.season .section-title { margin-bottom: 14px; }
/* Phone: total take is a full-width hero row; the two supporting numbers
   share the row beneath. No cramped three-up with clipped digits. */
.season__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.stat {
  background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.stat:first-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(158deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  padding: 20px 22px;
}
.stat:first-child .stat__num { font-size: 2.4rem; }
.stat:first-child .stat__lbl { margin-top: 0; }
.stat:first-child .stat__num { color: var(--accent-ink); }
.stat:first-child .stat__lbl { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.stat__num {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 560;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -.015em;
}
.stat:not(:first-child) .stat__num { color: var(--accent); }
.stat__lbl {
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 8px;
  display: block;
}

.ranking { margin-bottom: 30px; }
.ranking-list { display: flex; flex-direction: column; gap: 10px; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease;
}
.rank-row:first-child {
  border-color: var(--accent-dim2);
  background: linear-gradient(120deg, var(--card) 0%, var(--accent-dim) 220%);
}
.rank-row__pos {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-weight: 800;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.rank-row:first-child .rank-row__pos {
  background: linear-gradient(158deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.rank-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-row__name { font-weight: 680; font-size: 1.05rem; letter-spacing: -.005em; }
.rank-row__meta { color: var(--ink-soft); font-size: .82rem; }
.rank-row__avg { text-align: right; }
.rank-row__avg-num {
  display: block;
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.28rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.rank-row__avg-lbl { color: var(--ink-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

.closed { margin-bottom: 8px; }
.closed-list { display: flex; flex-direction: column; gap: 10px; }

.closed-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease;
}
.closed-card.is-open { box-shadow: var(--shadow); }
.closed-card__head {
  width: 100%;
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  cursor: pointer;
  text-align: left;
  min-height: var(--tap);
}
.closed-card__headmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.closed-card__name { font-weight: 680; font-size: 1.08rem; letter-spacing: -.005em; }
.closed-card__date { color: var(--ink-soft); font-size: .82rem; }
.closed-card__take {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.4rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  flex: 0 0 auto;
}
.closed-card__detail {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 40%);
}

.bytype { margin-top: 8px; }
.bytype__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.bytype__row--head {
  color: var(--ink-faint);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}
.bytype__name { font-weight: 560; }
.bytype__row--foot {
  border-bottom: none;
  font-weight: 800;
  padding-top: 14px;
  margin-top: 2px;
  border-top: 1.5px solid var(--line);
}
.bytype__row--foot .bytype__name { font-family: var(--serif); font-weight: 560; font-size: 1.05rem; }
.bytype__row--foot .bytype__rev { font-family: var(--serif); font-weight: 560; color: var(--accent); font-size: 1.05rem; }
.bytype__count, .bytype__rev { font-variant-numeric: tabular-nums; text-align: right; }
.bytype__count { min-width: 40px; color: var(--ink-soft); }
.bytype__rev { min-width: 76px; font-weight: 680; }
.bytype__tag {
  display: inline-block;
  margin-left: 8px;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--glaze-ink);
  background: var(--glaze);
  padding: 3px 7px 2px;
  border-radius: 999px;
  vertical-align: middle;
}

/* ============================ catalog ========================== */

.catalog .section-title { margin-bottom: 4px; }
.cat-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px 8px 16px;
  box-shadow: var(--shadow-sm);
}
.cat-row__name {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 640;
  font-size: 1.04rem;
  color: var(--ink);
  padding: 12px 0;
  border-radius: var(--radius-xs);
}
.cat-row__name:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.cat-row__pricewrap {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
}
.cat-row__euro { color: var(--ink-soft); font-weight: 600; }
.cat-row__price {
  width: 58px;
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 680;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cat-row__price:focus { outline: none; }
.cat-row__pricewrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.cat-row__del {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: .82rem;
  font-weight: 640;
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-xs);
  transition: background .12s ease;
}
.cat-row__del:active { background: var(--danger-dim); }

/* ============================ sheets =========================== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}
.sheet.is-open { display: block; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(38,28,20,.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: scrim-in .22s ease;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

.sheet__card {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  padding: 8px var(--pad) calc(var(--pad) + 6px + env(safe-area-inset-bottom));
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 -10px 50px rgba(38,28,20,.28);
  animation: sheet-up .26s cubic-bezier(.2,.8,.25,1);
}
.sheet__card--tall { min-height: 62vh; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet__handle {
  width: 42px; height: 5px;
  border-radius: 999px;
  background: var(--line);
  margin: 8px auto 16px;
}
.sheet__title {
  font-family: var(--serif);
  font-weight: 540;
  font-size: 1.5rem;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}
.sheet__titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheet__total {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.4rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sheet__note { color: var(--ink-soft); font-size: .94rem; line-height: 1.5; margin: 0 0 18px; }

.sheet__actions {
  display: flex;
  gap: var(--gap);
  margin-top: 20px;
}
.sheet__actions .btn-ghost,
.sheet__actions .btn-primary { flex: 1; }
.sheet__actions--single { justify-content: stretch; }

/* fields */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field__label { font-size: .8rem; color: var(--ink-soft); font-weight: 640; text-transform: uppercase; letter-spacing: .05em; }
.field__input {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 560;
  color: var(--ink);
  padding: 15px 16px;
  min-height: var(--tap);
}
.field__input::placeholder { color: var(--ink-faint); font-weight: 450; }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.field-row { display: flex; gap: var(--gap); align-items: flex-end; }
.field--grow { flex: 1; }
.field--price { width: 108px; flex: 0 0 auto; }

/* special list inside its sheet */
.special-list { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.special-row {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(165deg, var(--card) 0%, var(--glaze-dim) 150%);
  border: 1px solid color-mix(in srgb, var(--glaze) 30%, var(--line));
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.special-row__name { font-weight: 640; }
.special-row__price { color: var(--glaze-deep); font-weight: 760; font-variant-numeric: tabular-nums; }

/* today list inside its sheet */
.today-list { display: flex; flex-direction: column; gap: 9px; }
.sale-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  animation: line-in .2s ease;
}
@keyframes line-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sale-line__name { font-weight: 640; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-line__time { color: var(--ink-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.sale-line__price { font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink); }
.sale-line__strike {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--danger);
  font: inherit;
  font-size: .82rem;
  font-weight: 640;
  border-radius: var(--radius-xs);
  padding: 9px 13px;
  min-height: 42px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.sale-line__strike:active { background: var(--danger-dim); border-color: var(--danger); }

.sheet-empty {
  color: var(--ink-soft);
  text-align: center;
  padding: 28px 12px;
  line-height: 1.5;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
}

/* close-take block — the "it's saved forever" moment */
.close-take {
  text-align: center;
  background: linear-gradient(162deg, var(--accent) 0%, var(--accent-deep) 100%);
  border: none;
  border-radius: var(--radius);
  padding: 34px 22px 30px;
  margin: 12px 0 6px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.close-take::before {
  content: "";
  position: absolute;
  top: -40%; left: -10%; right: -10%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255,248,241,.16), transparent 70%);
  pointer-events: none;
}
.close-take__lbl {
  display: block;
  color: color-mix(in srgb, var(--accent-ink) 82%, transparent);
  font-size: .8rem;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: .1em;
  position: relative;
}
.close-take__num {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-take);
  font-weight: 540;
  color: var(--accent-ink);
  line-height: 1;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  margin: 12px 0 8px;
  position: relative;
  animation: take-rise .5s cubic-bezier(.2,.85,.25,1);
}
@keyframes take-rise { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.close-take__count {
  display: block;
  color: color-mix(in srgb, var(--accent-ink) 78%, transparent);
  font-size: .88rem;
  font-weight: 560;
  position: relative;
}

/* settings blocks */
.settings-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.settings-block__title { font-family: var(--serif); font-weight: 540; font-size: 1.15rem; margin: 0 0 6px; }
.settings-block__body { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; margin: 0 0 16px; }
.settings-block__actions { display: flex; flex-direction: column; gap: 10px; }
.settings-block--danger { border-color: var(--danger-dim); background: linear-gradient(180deg, var(--card) 0%, var(--danger-dim) 260%); }

.import-result-body { margin: 8px 0; }
.import-result-body p { line-height: 1.55; margin: 0; }
.import-ok { color: var(--glaze-deep); font-weight: 560; }
.import-err { color: var(--danger); font-weight: 560; }

/* ============================ toast ============================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tap-lg) + 34px);
  transform: translate(-50%, 20px);
  z-index: 60;
  background: var(--ink);
  color: #fff8f1;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 640;
  font-size: .94rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.25,1);
  max-width: 92vw;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="sold"] { background: linear-gradient(150deg, var(--glaze) 0%, var(--glaze-deep) 100%); }
.toast[data-tone="undo"] { background: var(--ink); }
.toast[data-tone="warn"] { background: linear-gradient(150deg, #b6742c 0%, var(--warn) 100%); }
.toast[data-tone="ok"]   { background: linear-gradient(150deg, var(--glaze) 0%, var(--glaze-deep) 100%); }
.toast[data-tone="muted"]{ background: var(--ink-soft); }

/* ======================= desktop face ========================= */
/* Phone-first above. Desktop is a real layout — the register works as a
   two-column trading station, the take always in the eyeline, undo docked
   one reach away at the bottom of the sell column. */

@media (min-width: 900px) {
  :root { --maxw: 1120px; --pad: 26px; }

  .panel { padding: 30px var(--pad) 40px; }

  /* Register: sell grid left, a standing "till" rail right holding the
     market, the take, and the day's actions — a real trading station.
     The right column holds .live__header (row 1) then .live__actions
     (row 2) by source order; both sit in the sticky rail. */
  .live {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "grid  side"
      "grid  actions";
    column-gap: 26px;
    row-gap: 16px;
    padding-bottom: calc(var(--tap-lg) + 36px);
    align-items: start;
    /* Center the trading station in the working height so the keys and the
       till read as one balanced composition floating on the maker's table,
       never clustered against the top edge with a void beneath. */
    min-height: calc(100dvh - 66px - var(--tap-lg) - 90px);
    align-content: center;
  }
  .live__header {
    grid-area: side;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    align-self: start;
  }
  .live__market {
    padding: 17px 20px 15px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  .live__market-name { color: var(--ink); font-size: 1.2rem; }
  .live__market-date { color: var(--ink-soft); }
  .live__take {
    text-align: left;
    align-items: flex-start;
    margin-top: 0;
    padding: 24px 22px 26px;
    background: linear-gradient(162deg, var(--accent) 0%, var(--accent-deep) 100%);
  }
  .live__take-num { color: var(--accent-ink); font-size: var(--fs-take); line-height: .9; }
  .live__take-count { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); margin-top: 10px; }

  /* Two roomy columns read as a real till, not a thin strip beside a void.
     A ceramicist keeps a handful of piece types — bigger targets serve the
     cold thumb and fill the trading surface honestly. */
  .grid {
    grid-area: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 132px;
    align-content: start;
    align-self: center;
    margin-bottom: 0;
  }
  .sell-btn { min-height: 132px; padding: 22px 24px; }
  .sell-btn__name { font-size: 1.28rem; }
  .sell-btn__price { font-size: 1.08rem; }

  /* Day actions stacked in the rail beneath the till. */
  .live__actions {
    grid-area: actions;
    flex-direction: column;
    align-self: start;
  }
  .live__actions .btn-ghost { flex: none; min-height: var(--tap); }

  /* On desktop the dock is a real full-size control pinned to the bottom of
     the app column — undo is still one reach from the sell grid. */
  .undo-dock {
    flex-direction: row;
    background: linear-gradient(to top,
      var(--paper) 60%, rgba(244,236,224,0) 100%);
    padding: 16px var(--pad) 20px;
    left: 0; right: 0;
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    bottom: 0;
  }
  .undo-btn { flex: 3; }
  .close-btn { flex: 1; }

  /* Comfortable reading measures on wide screens — lists don't stretch. */
  .cat-list { max-width: 640px; }
  .catalog .btn-primary { }
  /* Desktop has room for the classic three-up row. */
  .season__stats { max-width: 760px; grid-template-columns: 1.3fr 1fr 1fr; }
  .stat:first-child {
    grid-column: auto;
    display: block;
    padding: 18px 18px 16px;
  }
  .stat:first-child .stat__num { font-size: 1.7rem; }
  .stat:first-child .stat__lbl { margin-top: 8px; }
  .closed-list, .ranking-list { max-width: 820px; }

  .sheet__card {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    max-width: 540px;
    border-radius: 24px;
    padding: 10px 30px 30px;
    animation: sheet-fade .2s ease;
  }
  @keyframes sheet-fade { from { opacity: 0; transform: translate(-50%, calc(50% + 12px)); } to { opacity: 1; transform: translate(-50%, 50%); } }
}

/* ======================= wide face ============================ */
@media (min-width: 1500px) {
  :root { --maxw: 1240px; }
  .live { grid-template-columns: 1fr 360px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .sell-btn::after { transition: none; }
}