/* simketh — the website. The window's design, in a browser.
 *
 * Swiss for the work: one typeface, the 8px grid, hairline rules instead of
 * boxes, one red accent, flush left. Glass for the frame: backdrop, masthead,
 * rail, status bar, cards. Tokens mirror swiss.css and glass.css — change them
 * together. Both themes are authored; the dark one is not a filter.        */

:root {
  --paper: #FFFFFF; --ink: #111111; --rule: #E3E3E3; --hair: #EDEDED; --mute: #767676;
  --field: #F4F4F4; --accent: #E30613; --select: #F0F0F0;
  --new: #1E8E3E; --gone: #E8710A; --sold: #E30613; --repriced: #1A73E8; --fresh: #FFF6D6;
  --backdrop: #EEF0F4;
  --glow-a: rgba(227, 6, 19, 0.10); --glow-b: rgba(26, 115, 232, 0.12); --glow-c: rgba(30, 142, 62, 0.08);
  --glass: rgba(255, 255, 255, 0.62); --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.95); --glass-line: rgba(17, 17, 17, 0.07);
  --glass-shadow: rgba(20, 28, 45, 0.10); --glass-hover: rgba(17, 17, 17, 0.05); --glass-active: rgba(255, 255, 255, 0.95);
  --card: #FBFBFB;
  --u: 8px;
  --font: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D0D0D; --ink: #F2F2F2; --rule: #2A2A2A; --hair: #1F1F1F; --mute: #8C8C8C;
    --field: #171717; --accent: #FF2D1A; --select: #1C1C1C;
    --new: #34D399; --gone: #FB923C; --sold: #FF2D1A; --repriced: #60A5FA; --fresh: #2A2410;
    --backdrop: #0A0B0E;
    --glow-a: rgba(255, 45, 26, 0.14); --glow-b: rgba(96, 165, 250, 0.12); --glow-c: rgba(52, 211, 153, 0.07);
    --glass: rgba(30, 32, 38, 0.58); --glass-strong: rgba(34, 36, 43, 0.86);
    --glass-edge: rgba(255, 255, 255, 0.10); --glass-line: rgba(255, 255, 255, 0.07);
    --glass-shadow: rgba(0, 0, 0, 0.45); --glass-hover: rgba(255, 255, 255, 0.06); --glass-active: rgba(255, 255, 255, 0.10);
    --card: #161616;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D0D0D; --ink: #F2F2F2; --rule: #2A2A2A; --hair: #1F1F1F; --mute: #8C8C8C;
  --field: #171717; --accent: #FF2D1A; --select: #1C1C1C;
  --new: #34D399; --gone: #FB923C; --sold: #FF2D1A; --repriced: #60A5FA; --fresh: #2A2410;
  --backdrop: #0A0B0E;
  --glow-a: rgba(255, 45, 26, 0.14); --glow-b: rgba(96, 165, 250, 0.12); --glow-c: rgba(52, 211, 153, 0.07);
  --glass: rgba(30, 32, 38, 0.58); --glass-strong: rgba(34, 36, 43, 0.86);
  --glass-edge: rgba(255, 255, 255, 0.10); --glass-line: rgba(255, 255, 255, 0.07);
  --glass-shadow: rgba(0, 0, 0, 0.45); --glass-hover: rgba(255, 255, 255, 0.06); --glass-active: rgba(255, 255, 255, 0.10);
  --card: #161616;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: 13px; line-height: 1.45; color: var(--ink);
  background: var(--backdrop);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── The backdrop the glass sits on ─────────────────────────── */
.backdrop {
  min-height: 100vh;
  background:
    radial-gradient(55% 55% at 8% 0%, var(--glow-a), transparent),
    radial-gradient(60% 60% at 100% 12%, var(--glow-b), transparent),
    radial-gradient(70% 70% at 30% 110%, var(--glow-c), transparent),
    var(--backdrop);
  background-attachment: fixed;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  border-radius: 16px;
  box-shadow: 0 8px 28px var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

/* ── Type: 48 / 32 / 20 / 13 / 12 / 10, by size and weight only ── */
.display { font-size: 48px; font-weight: 700; line-height: 1.05; margin: 0; }
h1, .h1 { font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h2, .h2 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; }
.micro {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
}
.micro.ink { color: var(--ink); }
.micro.accent { color: var(--accent); }
.mute { color: var(--mute); }
.body { font-size: 13px; max-width: 72ch; }
.data, .num { font-size: 12px; font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }

/* ── Rules, not boxes ───────────────────────────────────────── */
.rule-heavy { height: 3px; background: var(--ink); border: 0; margin: 0; }
.rule { height: 1px; background: var(--ink); border: 0; margin: 0; }
.hair { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ── The frame ──────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; gap: calc(var(--u) * 1.5); flex-wrap: wrap;
  margin: 12px 12px 0; padding: 10px 20px 10px 16px;
}
.brand { display: flex; align-items: center; gap: calc(var(--u) * 1.5); text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.wordmark { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.wordmark b { color: var(--accent); }
.tagline { align-self: flex-end; padding-bottom: 4px; }
.spring { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--glass-hover); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.dot.on { background: var(--new); }
.who { display: flex; align-items: center; gap: var(--u); }

.frame {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px;
  padding: 12px; align-items: start;
}
.rail { padding: 16px 12px; position: sticky; top: 12px; }
.rail-group { margin: 0 0 4px; }
.rail-block + .rail-block { margin-top: 16px; }
.rail nav { display: flex; flex-direction: column; margin-top: 4px; }
.rail a {
  display: block; padding: 6px 0 6px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
}
.rail a:hover { background: var(--glass-hover); }
.rail a.active { border-left-color: var(--accent); background: var(--glass-active); }
.rail .hair { background: var(--glass-line); }

.sheet {
  background: var(--paper); border: 1px solid var(--glass-line); border-radius: 16px;
  box-shadow: 0 10px 32px var(--glass-shadow);
  padding: 24px 24px 32px 32px; min-width: 0; min-height: calc(100vh - 170px);
}
.sheet > .rule-heavy { margin-bottom: 16px; }

.statusbar {
  position: sticky; bottom: 12px; margin: 0 12px 12px; padding: 8px 16px;
  display: flex; gap: 12px; align-items: baseline; background: var(--glass-strong);
}
.statusbar .state { min-width: 64px; }
.statusbar .state.busy { color: var(--repriced); }
.statusbar .state.alert { color: var(--accent); }
.statusbar .state.ready { color: var(--new); }
.statusbar .text { font-size: 12px; overflow-wrap: anywhere; }

/* ── The work ───────────────────────────────────────────────── */
.page { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.head { display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u); }
.row.wide { gap: calc(var(--u) * 2); flex-wrap: nowrap; }
.row.wide > .search-field { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--u); }
.section { display: flex; flex-direction: column; gap: var(--u); margin-top: var(--u); }
.section > .rule { margin-bottom: 4px; }

.figures { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 6); }
.figure { display: flex; flex-direction: column; gap: 4px; min-width: 96px; }
.figure .value { font-size: 32px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }

/* Fields: a ruled baseline, not a box. */
.search-field {
  width: 100%; max-width: 720px; background: transparent; border: 0; border-bottom: 2px solid var(--ink);
  padding: 4px 0 6px; font-size: 20px; border-radius: 0;
}
.search-field:focus { outline: none; border-bottom-color: var(--accent); }
.field {
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 3px 0 4px;
  font-size: 12px; min-width: 0; border-radius: 0;
}
.field:focus { outline: none; border-bottom-color: var(--accent); }
.field.narrow { width: 88px; }
.field.mid { width: 220px; }
input::placeholder, textarea::placeholder { color: var(--mute); opacity: 1; }
select.field { padding-right: 16px; }

.btn {
  background: var(--ink); color: var(--paper); border: 0; padding: 8px 16px; cursor: pointer; border-radius: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap;
}
a.btn { text-decoration: none; display: inline-block; }
.btn:hover { background: var(--accent); }
.btn:disabled { background: var(--mute); cursor: default; }
.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 7px 15px; cursor: pointer;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border-radius: 0;
  white-space: nowrap; text-decoration: none; display: inline-block;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost:disabled { color: var(--mute); border-color: var(--rule); background: transparent; cursor: default; }
.btn-small { padding: 3px 8px; font-size: 10px; }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--accent); }

.chip {
  background: transparent; color: var(--mute); border: 1px solid var(--rule); padding: 5px 10px; cursor: pointer;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; border-radius: 0;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Tables: 1px grey rules between rows, ink under the head. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute);
  border-bottom: 1px solid var(--ink); padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: bottom;
}
td { border-bottom: 1px solid var(--hair); padding: 7px 12px 7px 0; vertical-align: top; }
th.num, td.num { text-align: right; }
tbody tr:hover td { background: var(--select); }
td.title { min-width: 240px; max-width: 520px; }
td .sub { color: var(--mute); font-size: 11px; }
td img.thumb { width: 40px; height: 40px; object-fit: contain; background: var(--field); display: block; }
.empty { color: var(--mute); padding: 16px 0; }

/* Change colours — figures that record a change, never plain text. */
.tone-new { color: var(--new); font-weight: 700; }
.tone-gone { color: var(--gone); font-weight: 700; }
.tone-sold { color: var(--sold); font-weight: 700; }
.tone-repriced { color: var(--repriced); font-weight: 700; }

.badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper); background: var(--mute); white-space: nowrap;
}
.badge.ok { background: var(--new); } .badge.warn { background: var(--gone); }
.badge.alert { background: var(--accent); } .badge.info { background: var(--repriced); } .badge.ink { background: var(--ink); }

/* Cards: a chart, a group of settings — glass on the sheet. */
.card {
  background: var(--card); border: 1px solid var(--glass-line); border-top-color: var(--glass-edge);
  border-radius: 14px; padding: 20px 24px; box-shadow: 0 4px 18px var(--glass-shadow);
}
.setting { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--hair); }
.setting:first-of-type { border-top: 0; }
.setting .what { flex: 1 1 280px; }
.setting .what b { display: block; font-size: 13px; }
.setting .what span { color: var(--mute); font-size: 12px; }

/* Grid of listings: eBay's picture, price in figure type. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 24px; }
.cardlet { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ink); padding-top: 8px; min-width: 0; }
.cardlet .pic { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--field); display: block; }
.cardlet .nopic { width: 100%; aspect-ratio: 1 / 1; background: var(--field); display: flex; align-items: flex-end;
  padding: 8px; }
.cardlet .price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cardlet .t { font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cardlet .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.marked { outline: 2px solid var(--accent); outline-offset: 4px; }
label.mark { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); }
input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }

/* Compare: a grid, so a title on two lines keeps every row in step. */
.compare { display: grid; gap: 0 24px; grid-auto-flow: column; overflow-x: auto; }
.compare .cell { border-bottom: 1px solid var(--hair); padding: 8px 0; min-width: 180px; max-width: 280px; }
.compare .cell.label { min-width: 88px; max-width: 120px; }
.compare .label { color: var(--mute); }
.compare img { width: 160px; height: 160px; object-fit: contain; background: var(--field); display: block; }

/* Charts: bars and lines on a glass card. */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--mute); font-size: 10px; font-family: var(--font); }
.chart .grid-line { stroke: var(--rule); stroke-dasharray: 2 3; }
.chart .base { stroke: var(--ink); }
.chart .bar:hover { opacity: 0.75; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; }
.swatch-new { background: var(--new); } .swatch-gone { background: var(--gone); }
.swatch-sold { background: var(--sold); } .swatch-repriced { background: var(--repriced); } .swatch-ink { background: var(--ink); }
.fill-new { fill: var(--new); } .fill-gone { fill: var(--gone); } .fill-sold { fill: var(--sold); }
.fill-repriced { fill: var(--repriced); } .fill-ink { fill: var(--ink); }
.stroke-new { stroke: var(--new); } .stroke-gone { stroke: var(--gone); } .stroke-sold { stroke: var(--sold); }
.stroke-repriced { stroke: var(--repriced); } .stroke-ink { stroke: var(--ink); }

/* Ask: the conversation, newest first. */
.entry { border-top: 1px solid var(--ink); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.entry .q { font-size: 20px; font-weight: 700; }
.entry .lead { font-size: 16px; font-weight: 700; max-width: 72ch; }
.entry ul { margin: 0; padding-left: 18px; max-width: 72ch; }
.entry li { margin: 2px 0; }
.entry pre { white-space: pre-wrap; font-size: 11px; background: var(--field); padding: 12px; margin: 0; max-height: 280px;
  overflow: auto; font-family: ui-monospace, Menlo, monospace; }
.unverified { color: var(--accent); }
details summary { cursor: pointer; }
details summary::marker { color: var(--mute); }

/* A checksum: as shasum prints it — lower case, and allowed to wrap. */
.hash { margin: 0; display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.hash code { font: 11px/1.5 ui-monospace, Menlo, monospace; color: var(--mute); overflow-wrap: anywhere; }

.pager { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--ink); padding-top: 8px; }

/* ── Sign in ────────────────────────────────────────────────── */
.signin { padding: 48px 12px 12px calc(200px + 24px); }
.signin .sheet { max-width: 576px; min-height: 0; padding: 24px 32px 32px; }
.signin form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.signin .search-field { max-width: 384px; }
.signin .error { min-height: 16px; }

.noscript { padding: 32px; }
.hidden { display: none !important; }

/* ── Narrow screens: the rail becomes a strip, the sheet takes the width ── */
@media (max-width: 860px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; padding: 8px 12px; overflow-x: auto; display: flex; gap: 16px; align-items: flex-start; }
  .rail .rail-block { display: flex; flex-direction: column; min-width: max-content; }
  .rail-group + .rail-group, .rail .rail-block + .rail-block { margin-top: 0; }
  .rail nav { flex-direction: row; }
  .rail .hair, .rail .rail-group { display: none; }
  .rail nav { gap: 4px; }
  .sheet { padding: 16px; min-height: 0; }
  .tagline { display: none; }
  .wordmark { font-size: 24px; }
  .brand img { width: 32px; height: 32px; }
  .signin { padding: 24px 12px; }
  .figure .value { font-size: 24px; }
  .figures { gap: 16px 32px; }
  h1, .h1 { font-size: 24px; }
  .statusbar { bottom: 0; margin: 0 0 0; border-radius: 16px 16px 0 0; }
  .row.wide { flex-wrap: wrap; }
}