@charset "UTF-8";
/* ==========================================================================
   Spools

   The chrome is deliberately quiet. Every reel on screen carries its own
   filament colour, and those colours have to read true — so the interface
   keeps to cool near-neutrals and spends its one accent (a deep petrol, far
   enough from common filament colours not to be mistaken for one) on the
   things you can actually press.

   Type has two roles: the system UI face for prose, and a monospace with
   tabular figures for references and gram counts, so SP-0001 reads as an
   identifier and columns of weights line up.
   ========================================================================== */

/* --- Tokens: light is the base ------------------------------------------ */

:root {
  --bg:          #f4f6f6;
  --surface:     #ffffff;
  --surface-2:   #e9eded;
  --surface-3:   #dfe5e5;
  --border:      #d8e0e0;
  --border-firm: #c3cfcf;
  --text:        #12181a;
  --text-muted:  #5d6b6e;
  --text-faint:  #8b989b;

  --accent:      #0e6f6b;
  --accent-hover:#0c5f5c;
  --accent-press:#094b48;
  --accent-ink:  #ffffff;
  --accent-wash: #e4efee;

  --warn:        #a86a08;
  --warn-wash:   #fbf0dc;
  --danger:      #b03a2c;
  --danger-wash: #fae5e2;
  --good:        #1f7a45;

  --shadow-1: 0 1px 2px rgba(16, 32, 34, .06), 0 1px 1px rgba(16, 32, 34, .04);
  --shadow-2: 0 6px 16px rgba(16, 32, 34, .10), 0 2px 6px rgba(16, 32, 34, .06);
  --shadow-3: 0 -6px 28px rgba(16, 32, 34, .16);

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* Dark, for viewers whose OS says dark and who haven't forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0e1213;
    --surface:     #171d1f;
    --surface-2:   #1f2729;
    --surface-3:   #273133;
    --border:      #2c3639;
    --border-firm: #3b4749;
    --text:        #e9eeee;
    --text-muted:  #93a2a5;
    --text-faint:  #6f7d80;

    --accent:      #35ada4;
    --accent-hover:#46bdb3;
    --accent-press:#2b8f88;
    --accent-ink:  #06201f;
    --accent-wash: #122c2b;

    --warn:        #dda63c;
    --warn-wash:   #2e2413;
    --danger:      #e0705f;
    --danger-wash: #2f1a17;
    --good:        #4dbd7b;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, .55);
    --shadow-3: 0 -6px 28px rgba(0, 0, 0, .6);
  }
}

/* And again for an explicit dark choice, so the toggle wins either way. */
:root[data-theme="dark"] {
  --bg:          #0e1213;
  --surface:     #171d1f;
  --surface-2:   #1f2729;
  --surface-3:   #273133;
  --border:      #2c3639;
  --border-firm: #3b4749;
  --text:        #e9eeee;
  --text-muted:  #93a2a5;
  --text-faint:  #6f7d80;

  --accent:      #35ada4;
  --accent-hover:#46bdb3;
  --accent-press:#2b8f88;
  --accent-ink:  #06201f;
  --accent-wash: #122c2b;

  --warn:        #dda63c;
  --warn-wash:   #2e2413;
  --danger:      #e0705f;
  --danger-wash: #2f1a17;
  --good:        #4dbd7b;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-3: 0 -6px 28px rgba(0, 0, 0, .6);
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; text-wrap: balance; line-height: 1.25; }

button, input, select, textarea { font: inherit; color: inherit; }

/* 16px on inputs is not a style choice — anything smaller makes iOS zoom in
   on focus and never zoom back out. */
input, select, textarea { font-size: 16px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.screen { min-height: 100dvh; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .6rem 1.1rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, transform .06s ease;
}
.btn:hover  { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { color: var(--danger); border-color: var(--border-firm); }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); }

.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: .35rem .7rem; font-size: .875rem; }

/* --- Sign in ------------------------------------------------------------ */

/* Flex, not `grid` + `place-items: center` — centring a grid item stops it
   stretching, so its width:100% resolves against a max-content track and the
   card overflows the viewport. */
.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem calc(2rem + var(--safe-b));
  background: var(--bg);
}
.auth-inner { width: 100%; max-width: 24rem; text-align: center; }

.auth-mark {
  width: 76px; height: 76px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--bg) 0 15%, transparent 15.5%),
    conic-gradient(var(--accent) 0 72%, var(--surface-3) 72% 100%);
  box-shadow: inset 0 0 0 1px var(--border);
}

.auth h1 { font-size: 1.9rem; letter-spacing: -.02em; }
.auth-sub { margin: .35rem 0 2rem; color: var(--text-muted); }

.auth-form { display: grid; gap: .7rem; text-align: left; }
.auth-form label { font-size: .8125rem; font-weight: 650; color: var(--text-muted); }

.auth-form input {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .9rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.auth-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }

.code-input {
  font-family: var(--font-mono);
  font-size: 1.75rem !important;
  letter-spacing: .3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-note  { margin: 0; font-size: .8125rem; color: var(--text-faint); line-height: 1.5; }
.auth-error {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: .875rem;
  text-align: left;
}

/* The choice between an account and this-device-only, and the explainers
   under it. Collapsed by default so the screen still reads as "type your
   email", but there for anyone who wants to know what they are agreeing to. */

.auth-or {
  position: relative;
  margin: 1.4rem 0 1rem;
  text-align: center;
}
.auth-or::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  border-top: 1px solid var(--border);
}
.auth-or span {
  position: relative;
  padding: 0 .7rem;
  background: var(--bg);
  color: var(--text-faint);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.auth-help { margin-top: 2rem; text-align: left; }

.auth-help details {
  border-top: 1px solid var(--border);
}
.auth-help details:last-child { border-bottom: 1px solid var(--border); }

.auth-help summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--tap);
  padding: .7rem 0;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  list-style: none;
}
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.auth-help details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.auth-help-body { padding: 0 0 1rem; }
.auth-help-body p {
  margin: 0 0 .7rem;
  font-size: .875rem;
  line-height: 1.62;
  color: var(--text-muted);
}
.auth-help-body p:last-of-type { margin-bottom: .8rem; }
.auth-help-body strong { color: var(--text); font-weight: 650; }
.auth-help-body em { font-style: normal; font-weight: 600; color: var(--text); }

/* --- App frame ---------------------------------------------------------- */

#app { display: flex; flex-direction: column; min-height: 100dvh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: calc(var(--safe-t) + .7rem) 1rem .7rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: 1.15rem; letter-spacing: -.01em; }
.topbar-actions { display: flex; gap: .4rem; align-items: center; }

.content {
  flex: 1;
  padding: 1rem 1rem calc(6.5rem + var(--safe-b));
  max-width: 60rem;
  width: 100%;
  margin-inline: auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 650;
  white-space: nowrap;
}
.pill-offline { background: var(--surface-3); color: var(--text-muted); }
.pill-queue   { background: var(--warn-wash); color: var(--warn); }

/* --- Tab bar and add button --------------------------------------------- */

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .5rem .25rem .55rem;
  min-height: 54px;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: .6875rem;
  font-weight: 600;
  cursor: pointer;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tab[aria-current="page"] { color: var(--accent); }

.fab {
  position: fixed;
  right: 1rem;
  bottom: calc(4.6rem + var(--safe-b));
  z-index: 31;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .1s ease, background .13s ease;
}
.fab:hover  { background: var(--accent-hover); }
.fab:active { transform: scale(.94); }
.fab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* --- Search, filters, stats --------------------------------------------- */

.searchbar {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: .75rem;
}
.searchbar-icon {
  position: absolute;
  left: .8rem;
  width: 18px; height: 18px;
  fill: none; stroke: var(--text-faint); stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
.searchbar input {
  width: 100%;
  min-height: var(--tap);
  padding: .55rem 2.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  -webkit-appearance: none;
  appearance: none;
}
.searchbar input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar-clear {
  position: absolute;
  right: .45rem;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8rem;
}

.chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  margin-bottom: .8rem;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.chip-count { opacity: .65; margin-left: .3rem; font-variant-numeric: tabular-nums; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
.stat {
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.stat:first-child { background: var(--accent-wash); border-color: transparent; }
.stat:first-child .stat-value { color: var(--accent); }
.stat:first-child .stat-label { color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); }
.stat-value {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.stat-label { font-size: .6875rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }

/* --- The reel grid ------------------------------------------------------ */

.reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .75rem;
}

.reel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .85rem .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  text-align: center;
  transition: transform .1s ease, box-shadow .13s ease, border-color .13s ease;
}
.reel-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-firm); }
.reel-card:active { transform: scale(.985); }
.reel-card.is-empty { opacity: .58; }

.reel { width: 88px; height: 88px; display: block; margin-bottom: .4rem; }
.reel-track { fill: none; stroke: var(--surface-3); }
.reel-arc   { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.reel-disc-edge { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.reel-hub   { fill: var(--surface); stroke: var(--border-firm); stroke-width: 1; }

.reel-ref {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-faint);
}
.reel-brand { font-size: .875rem; font-weight: 650; line-height: 1.2; }
.reel-desc  { font-size: .75rem; color: var(--text-muted); line-height: 1.3; }
.reel-grams {
  margin-top: .3rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  font-weight: 650;
}
.reel-where {
  margin-top: .15rem;
  font-size: .6875rem;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
}
.reel-where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  display: inline-block;
  padding: .08rem .4rem;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tag-low   { background: var(--warn-wash);   color: var(--warn); }
.tag-empty { background: var(--surface-2);   color: var(--text-faint); }
.tag-sealed{ background: var(--accent-wash); color: var(--accent); }

/* A reminder that the list has been narrowed to one colour, and the way out. */
.narrow-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .7rem;
  padding: .35rem .5rem .35rem .4rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 650;
  cursor: pointer;
}
.narrow-x { opacity: .7; font-size: .75rem; }

/* --- The by-colour table -------------------------------------------------
   For anyone holding several reels of each colour: how many, and how much
   filament in total, without adding it up in your head. */

.view-bar { display: flex; gap: .5rem; align-items: stretch; margin-bottom: .8rem; }
.seg-views { flex: 1; margin: 0; }

.sort-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  height: 100%;
  min-height: 40px;
  padding: 0 .7rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.sort-btn:hover { background: var(--surface-2); color: var(--text); }
.sort-icon { font-size: .95rem; line-height: 1; opacity: .8; }

.ctable {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.ctable-head,
.ctable-row,
.ctable-total {
  display: grid;
  grid-template-columns: 1fr 3.5rem 5.5rem;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  text-align: left;
}

.ctable-head {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-weight: 700;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.ctable-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  min-height: 48px;
  font: inherit;
  color: inherit;
}
.ctable-row:hover { background: var(--surface-2); }
.ctable-row:last-of-type { border-bottom: 0; }

.ctable-colour { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ctable-colour .reel { margin: 0; flex: none; }
.ctable-name { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.ctable-sub  { display: block; font-size: .6875rem; color: var(--text-faint); }

.ctable .num { text-align: right; font-variant-numeric: tabular-nums; }

.ctable-total {
  border-top: 1px solid var(--border-firm);
  background: var(--surface-2);
  font-weight: 650;
  font-size: .875rem;
}

/* --- Empty states ------------------------------------------------------- */

.empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.empty h3 { margin-bottom: .4rem; font-size: 1.05rem; color: var(--text); }
.empty p  { margin: 0 auto 1.2rem; max-width: 28ch; font-size: .9rem; line-height: 1.55; }

/* --- The Where board ---------------------------------------------------- */

.board { display: grid; gap: 1rem; }

.place {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.place-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--border);
}
.place-name { font-size: .95rem; font-weight: 650; }
.place-meta { font-size: .75rem; color: var(--text-faint); }
.place-dry {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  color: var(--warn);
  font-weight: 650;
}

/* 72px is chosen so a 4-slot AMS still fits on one row of a 390px phone:
   the card's own padding leaves ~327px, and 4 × 72 + 3 × 8 = 312. */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .5rem;
  padding: .8rem .9rem 1rem;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .55rem .3rem .5rem;
  border: 1px dashed var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  min-height: 104px;
  justify-content: center;
}
.slot.is-loaded { border-style: solid; background: var(--surface); }
.slot:hover { border-color: var(--accent); }
.slot .reel { width: 46px; height: 46px; margin: 0; }
.slot-no {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .04em;
}
.slot-label {
  font-size: .6875rem;
  line-height: 1.25;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.slot-empty { color: var(--text-faint); font-size: .75rem; }

.storage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .8rem .9rem 1rem;
}

/* --- Settings ----------------------------------------------------------- */

.settings { display: grid; gap: 1.25rem; }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.05rem .55rem;
}
/* A small accent tick against each heading — enough to break up a long column
   of grey label/value rows without turning it into decoration. */
.card-head::before {
  content: "";
  width: 3px;
  height: .85rem;
  border-radius: 2px;
  background: var(--accent);
  opacity: .65;
}
.card-head h2 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 700;
}
.card-body { padding: .1rem 1.05rem .9rem; }

.card { box-shadow: var(--shadow-1); }
.row { padding: .7rem 0; }
.row:hover .row-label { color: var(--accent); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--tap);
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row-static { cursor: default; }
.row-label { font-size: .9375rem; }
.row-sub   { display: block; font-size: .75rem; color: var(--text-faint); margin-top: .1rem; }
.row-value { color: var(--text-muted); font-size: .875rem; display: flex; align-items: center; gap: .4rem; }
.row-value.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chev { width: 8px; height: 8px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(-45deg); }

.release { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.release:last-child { border-bottom: 0; }
.release h4 {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 650;
}
.release time { font-family: var(--font); font-size: .75rem; color: var(--text-faint); font-weight: 400; }
.release ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.release li { font-size: .875rem; color: var(--text-muted); line-height: 1.5; margin-bottom: .15rem; }

.about-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.about-links a {
  flex: 1 1 auto;
  text-align: center;
  padding: .55rem .8rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  color: var(--accent);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
}
.about-links a:hover { background: var(--accent-wash); }

.credit { margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: var(--text-faint); }
.credit a { color: inherit; }

/* --- The change log ------------------------------------------------------- */

.log { border-top: 1px solid var(--border); }
.log-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
}
.log-text { font-size: .875rem; line-height: 1.45; }
.log-when {
  flex: none;
  font-size: .75rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* --- The print log -------------------------------------------------------- */

.print-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.print-row:last-child { border-bottom: 0; }
.print-row:hover .print-name { color: var(--accent); }
.print-main { min-width: 0; }
.print-name {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.print-sub { display: block; font-size: .75rem; color: var(--text-faint); }
.print-figs { flex: none; text-align: right; font-variant-numeric: tabular-nums; font-size: .875rem; }
.print-cost { display: block; font-size: .75rem; color: var(--text-faint); }

/* --- Planning ------------------------------------------------------------
   The two shortcuts above the shelf, and the lists they open. Rows here carry
   a figure on the right and a quieter note under it, so the eye runs down the
   numbers rather than reading every line. */

.tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }

.tool {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: 0 .85rem;
  border: 1px solid var(--border-firm);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.tool:hover { background: var(--surface-2); }
.tool:active { transform: translateY(1px); }
.tool-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .75rem;
  line-height: 1;
}
.tool-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border-firm)); }
.tool-warn .tool-icon { background: var(--warn-wash); color: var(--warn); font-weight: 700; }
.tool-count {
  min-width: 20px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--warn);
  color: #fff;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.plan-verdict {
  margin: 1.2rem 0 .2rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
.plan-verdict.is-bad { background: var(--warn-wash); color: var(--warn); }

.plan-list { border-top: 1px solid var(--border); }

.plan-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.plan-row:last-child { border-bottom: 0; }
.plan-row:hover .plan-name { color: var(--accent); }
.plan-row .reel { margin: 0; flex: none; }

.plan-main { min-width: 0; flex: 1; }
.plan-name {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-sub {
  display: block;
  font-size: .75rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-figs {
  flex: none;
  text-align: right;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.plan-note { display: block; font-size: .6875rem; color: var(--text-faint); }
.plan-note.is-tight { color: var(--warn); }
.plan-note.is-short { color: var(--text-faint); }

/* A row with its own reorder link alongside. */
.plan-pair {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--border);
}
.plan-pair:last-child { border-bottom: 0; }
.plan-pair .plan-row { border-bottom: 0; flex: 1 1 auto; min-width: 0; }
.plan-buy {
  flex: none;
  padding: .3rem .6rem;
  border: 1px solid var(--border-firm);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.plan-buy:hover { background: var(--accent-wash); }

.plan-actions { display: grid; gap: .5rem; margin-top: 1.4rem; }

.quick-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 .2rem; }
.quick {
  min-height: 34px;
  padding: 0 .7rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.quick:hover { background: var(--surface-2); color: var(--text); }

/* Spending, by manufacturer. */
.bars { display: grid; gap: .5rem; margin-top: .2rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 7rem) 1fr auto; align-items: center; gap: .6rem; }
.bar-name {
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bar-value { font-size: .8125rem; color: var(--text-muted); }

/* --- Sheets ------------------------------------------------------------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 16, 18, .45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade .16s ease;
}
.sheet {
  width: 100%;
  max-width: 34rem;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-3);
  animation: rise .2s cubic-bezier(.2, .8, .3, 1);
}
@media (min-width: 44rem) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--radius-lg); max-height: 86dvh; }
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
}
.sheet-head h2 { font-size: 1.05rem; }
.sheet-body { padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-foot {
  display: flex;
  gap: .6rem;
  padding: .85rem 1rem calc(.85rem + var(--safe-b));
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.sheet-foot .btn { flex: 1; }
.sheet-close {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  flex: none;
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

/* --- Forms -------------------------------------------------------------- */

.field { display: grid; gap: .3rem; margin-bottom: .9rem; }
.field > label { font-size: .8125rem; font-weight: 650; color: var(--text-muted); }
.field-hint { font-size: .75rem; color: var(--text-faint); line-height: 1.45; }
/* Two fields sit side by side only when there is genuinely room for both.
   Below that they stack — which is what stops the two weight fields drifting
   out of line on a phone when one label wraps and the other doesn't. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem;
  align-items: start;
}

/* When they are side by side, pin label / input / hint to shared rows so the
   inputs line up even with labels of different lengths. */
@supports (grid-template-rows: subgrid) {
  .field-row { grid-template-rows: auto auto auto; }
  .field-row > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-bottom: 0; }
}

/* The unit lives inside the box, so a number is never ambiguous. */
.input-unit { position: relative; display: block; }
.input-unit .input { width: 100%; padding-right: 2.6rem; }
.input-unit .unit {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: .875rem;
  font-family: var(--font-mono);
  pointer-events: none;
}

.input, .select-btn {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .8rem;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.input:focus, .select-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.input.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
textarea.input { min-height: 5rem; resize: vertical; line-height: 1.5; }

.select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  text-align: left;
  cursor: pointer;
}
.select-btn .placeholder { color: var(--text-faint); }
.select-btn .swatch { flex: none; }

.swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
  display: inline-block;
  vertical-align: middle;
}
.swatch-lg { width: 34px; height: 34px; }

.seg { display: flex; gap: .35rem; }
.seg button {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.quick-row { display: flex; gap: .35rem; margin: -.3rem 0 .9rem; }
.quick-btn {
  flex: 1;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.quick-btn:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }

.seg button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

input[type="range"] { width: 100%; accent-color: var(--accent); height: 30px; }

/* --- Searchable dropdown ------------------------------------------------ */

.picker-search { position: sticky; top: 0; padding-bottom: .6rem; background: var(--bg); }
.picker-list { display: grid; gap: .15rem; }
.picker-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: var(--tap);
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: .9375rem;
}
.picker-item:hover { background: var(--surface-2); }
.picker-item[aria-selected="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 650; }
.picker-item .meta { margin-left: auto; font-size: .75rem; color: var(--text-faint); font-family: var(--font-mono); }
.picker-add {
  margin-top: .5rem;
  border: 1px dashed var(--border-firm);
  color: var(--accent);
  font-weight: 650;
}
.picker-group {
  padding: .8rem .7rem .25rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-weight: 700;
}
.picker-none { padding: 1.5rem .7rem; text-align: center; color: var(--text-faint); font-size: .875rem; }

/* --- Colour picker ------------------------------------------------------ */

.colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: .5rem;
}
.colour-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  position: relative;
}
.colour-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 3px var(--accent); }
.owned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .55rem; }
.owned-cell {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  border: 0; background: none; cursor: pointer; padding: .2rem;
  border-radius: var(--radius-sm);
}
.owned-cell:hover { background: var(--surface-2); }
.owned-cell .reel { width: 44px; height: 44px; margin: 0; }
.owned-cell span { font-size: .6875rem; color: var(--text-muted); line-height: 1.2; text-align: center; }

/* --- Cropping a colour photograph ----------------------------------------
   The window is a circle because the reel's disc is a circle: what you frame
   is exactly what the grid will draw. */

.crop { display: flex; flex-direction: column; align-items: center; }

/* Let CSS decide the size, and keep it square with aspect-ratio. The previous
   `max-width: 100%` shrank the width but not the height, so the canvas was
   displayed as a rectangle while its pixel buffer stayed square — CSS then
   stretched it unevenly, the circle became an ellipse, and screen coordinates
   no longer matched the ones the crop was calculated in. */
.crop-canvas {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--surface-3);
  touch-action: none;          /* we handle the dragging and pinching */
  cursor: grab;
}
.crop-canvas:active { cursor: grabbing; }

.crop-zoom {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  max-width: 320px;
  margin-top: .9rem;
  color: var(--text-faint);
  font-size: 1rem;
}
.crop-zoom input { flex: 1; }

/* --- Colour picker -------------------------------------------------------- */

.colour-preview {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1rem 0 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.preview-disc {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.preview-hex { font-size: .9375rem; font-weight: 650; letter-spacing: .02em; }

.colour-panel { min-height: 12rem; }

/* The mixer: hue on the rail, shade of that hue in the square. */
/* No overflow clipping: at zero saturation the marker sits on the very edge
   of the field, and hiding half of it looks like a rendering fault. */
.mix-wrap { position: relative; }
.mix-field {
  display: block;
  width: 100%;
  height: 190px;
  touch-action: none;
  cursor: crosshair;
  border-radius: var(--radius-sm);
}
.mix-marker {
  position: absolute;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4);
  pointer-events: none;
}
.mix-rail { margin: .9rem 0 .2rem; }
.mix-hue {
  width: 100%;
  height: 26px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: linear-gradient(to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
    #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.mix-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  cursor: pointer;
}
.mix-hue::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.35);
  cursor: pointer;
}

/* --- Roll detail -------------------------------------------------------- */

.detail-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.detail-hero .reel { width: 96px; height: 96px; margin: 0; flex: none; }
.detail-title { font-size: 1.15rem; line-height: 1.2; }
.detail-sub { color: var(--text-muted); font-size: .875rem; margin-top: .15rem; }
.detail-ref {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-faint);
  letter-spacing: .03em;
}
.detail-remaining {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 650;
  margin-top: .4rem;
  letter-spacing: -.02em;
}
.detail-remaining small { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }

.dl { display: grid; gap: 0; margin: 0; }
.dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
}
.dl div:last-child { border-bottom: 0; }
.dl dt { font-size: .875rem; color: var(--text-muted); }
.dl dd { margin: 0; font-size: .875rem; text-align: right; }
.dl dd.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.history { display: grid; gap: 0; }
.history-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .8125rem;
}
.history-item:last-child { border-bottom: 0; }
.history-when { color: var(--text-faint); font-size: .75rem; white-space: nowrap; }
.history-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 650; }
.history-delta.down { color: var(--danger); }
.history-delta.up   { color: var(--good); }

.section-label {
  margin: 1.4rem 0 .5rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-weight: 700;
}

/* --- Help ---------------------------------------------------------------- */

.help-lead {
  margin: 0 0 1.4rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.help-section { margin-bottom: 1.5rem; }
.help-section h3 {
  margin-bottom: .45rem;
  font-size: .9375rem;
  color: var(--text);
}
.help-p {
  margin: 0 0 .65rem;
  font-size: .875rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 62ch;
}
.help-p:last-child { margin-bottom: 0; }
.help-p strong { color: var(--text); font-weight: 650; }
.help-p a { color: var(--accent); }

/* --- Toast -------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.2rem + var(--safe-b));
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100vw - 2rem);
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  animation: rise .18s ease;
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}