/* Crate: brand guidelines v2. One ground (espresso), one panel tone (card brown), hairline cream borders
   for depth (no shadows), condensed headings, mono for every number, ember kept for scan, the active tab,
   prices and section overlines. Terracotta is only the "already in your crate" stamp and owned state. */
:root {
  --bg: #201B17;            /* espresso: app ground, nav bar */
  --panel: #2B241F;         /* crate card: cards, panels, stat tiles, sheets */
  --black: #1A1714;         /* record black: sleeve mounts, condition chips, inset fields */
  --ink: #F2E9D8;           /* sleeve cream: primary text */
  --ink-2: #C4B3A0;         /* secondary text */
  --muted: #A89684;         /* metadata */
  --line: rgba(242, 233, 216, .14);        /* hairline */
  --line-strong: rgba(242, 233, 216, .34); /* neutral outlines, hover */
  --accent: #D96B2B;        /* ember */
  --accent-ink: #201B17;    /* text on ember fills is espresso, never cream */
  --stamp: #B4522E;         /* burnt terracotta: owned only */
  --gain: #9DB86A; --gain-bg: #2F3322; --loss: #E08A7E; --loss-bg: #3F2621;
  --r-panel: 6px; --r-ctl: 4px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/24px var(--sans); overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ---- type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em;
                       line-height: .86; margin: 0; overflow-wrap: break-word; }
h1 { font-size: 56px; }
h1 .dot, .brand .dot, .word .dot { color: var(--accent); }
h2 { font-size: 34px; margin: 34px 0 14px; }
h3 { font-size: 24px; font-weight: 600; margin: 0 0 8px; }
/* Label: overlines, counts, states. DM Mono 500 11/16, .2em. */
.eyebrow, .panel-title, .upper, label, .stat .k, .fact .k, .copyinfo .box .k, .lmh .box .k, .table th, .press dt, .ontour .k,
.letter-head::after, .gig .d small, .pill, .badge, .art-badge {
  font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { color: var(--accent); margin: 0 0 10px; }
.eyebrow.muted { color: var(--muted); }
/* Data: DM Mono 400 13/20. */
.mono { font-family: var(--mono); font-weight: 400; }
.eyebrow .mono, .panel-title .mono { font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 22px; }
.tiny { font-size: 12px; line-height: 18px; }
.accent { color: var(--accent); }
.upper.small, .upper.tiny { font-size: 11px; line-height: 16px; }
@media (max-width: 700px) { h1 { font-size: 48px; } h2 { font-size: 30px; } }

/* ---- top bar and phone tab bar */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .inner { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; min-height: 60px; }
/* Horizontal lockup: mark + CRATE. (never re-tracked, never ember apart from the period) */
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 700 32px/1 var(--display); letter-spacing: 0; }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.top nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.top nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--ink-2); font: 500 13px/1 var(--sans);
             text-transform: uppercase; letter-spacing: .1em; border-radius: var(--r-ctl); }
.top nav a:hover { color: var(--ink); text-decoration: none; }
.top nav a.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.top nav a.scan { background: var(--accent); color: var(--accent-ink); margin: 0 6px; font: 700 16px/1 var(--display); letter-spacing: .06em; padding: 0 16px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
          background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: 700 18px/1 var(--display); }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-glyph { display: grid; place-items: center; } .av-glyph svg { width: 100%; height: 100%; }
.av-ember { background: var(--accent); color: #201B17; border-color: transparent; }
.av-terracotta { background: #B4522E; color: #F2E9D8; border-color: transparent; }
.av-cream { background: #F2E9D8; color: #201B17; border-color: transparent; }
.av-black { background: #1A1714; color: #F2E9D8; }
.avopt { display: inline-flex; cursor: pointer; position: relative; } .avopt input { position: absolute; opacity: 0; pointer-events: none; }
.avopt input:checked + .avatar { outline: 2px solid var(--accent); outline-offset: 2px; }
.avopt input:focus-visible + .avatar { outline: 2px dashed var(--accent); outline-offset: 2px; }
.avatar:hover { border-color: var(--line-strong); text-decoration: none; }
.tabbar { display: none; }
@media (max-width: 760px) {
  .top nav { display: none; }
  .top .inner { padding: 10px 16px; min-height: 56px; }
  .brand { font-size: 28px; }
  .brand svg { width: 26px; height: 26px; }
  .top .avatar { margin-left: auto; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
            background: var(--bg); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: grid; justify-items: center; gap: 4px; color: var(--muted); font: 500 10px/1 var(--sans);
              letter-spacing: .08em; text-transform: uppercase; padding: 6px 0; min-height: 44px; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--accent); }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a.scan { color: var(--ink); }
  .tabbar a.scan span.ring { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center;
                             margin-top: -26px; border: 4px solid var(--bg); color: var(--accent-ink); }
  .tabbar a.scan span.ring svg { width: 26px; height: 26px; }
  body.signed-in main { padding-bottom: 110px; }
}

main { max-width: 1180px; margin: 0 auto; padding: 30px 20px 70px; }
@media (max-width: 700px) { main { padding: 22px 16px 60px; } }
.flash { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-panel);
         padding: 12px 16px; margin: 0 0 20px; }

/* ---- panels, forms, buttons */
.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px; }
.panel.flush { padding: 0; }
.panel-title { color: var(--muted); margin: 0 0 14px; }
.panel-title.accent { color: var(--accent); }
.narrow { max-width: 460px; margin: 30px auto; }
form.stack { display: grid; gap: 14px; align-content: start; }
label { display: grid; gap: 6px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 8px; font: 400 15px/24px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
label .small { letter-spacing: 0; text-transform: none; font-family: var(--sans); font-weight: 400; }
label .mono { letter-spacing: 0; text-transform: none; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea {
  width: 100%; min-height: 44px; font: 400 15px/1.4 var(--sans); padding: 10px 13px; border-radius: var(--r-ctl); border: 1px solid var(--line);
  background: var(--black); color: var(--ink); text-transform: none; letter-spacing: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; }
textarea { min-height: 84px; }
/* Buttons: 44px min, small radius, Barlow Condensed 700 caps. Primary = ember fill, secondary = ember outline,
   neutral = cream outline. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font: 700 17px/1 var(--display);
       text-transform: uppercase; letter-spacing: .06em; padding: 0 20px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong);
       background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn.ghost { border-color: var(--line); color: var(--ink-2); }
.btn.danger { background: transparent; color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 15px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { align-items: flex-end; }
.grow { flex: 1; min-width: 0; }
.spread { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }

/* ---- filters, chips, grades, prices */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
/* Filters: one selected state per group (ember fill, espresso text); counts live in the label. */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
        color: var(--ink-2); font: 500 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; background: transparent; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); text-decoration: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip.olive { background: var(--panel); border-color: var(--line); color: var(--ink); min-height: 32px; }   /* crate names: neutral tags */
.chip .n { font: inherit; }
.chip form, form.inline { display: inline; margin: 0; }
.chip button.x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0 0 4px; font-size: 16px; line-height: 1; }
.badge { display: inline-block; background: var(--black); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; padding: 3px 7px;
         letter-spacing: .12em; }
.badge.hot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.badge.ghost { background: transparent; color: var(--muted); }
/* Condition grades: mono on record black with a hairline. Never coloured. */
.grade { display: inline-block; font: 500 12px/1 var(--mono); padding: 5px 7px; background: var(--black); color: var(--ink);
         border: 1px solid var(--line-strong); border-radius: 2px; }
/* Prices: mono in ember with an ember border. */
.tag { display: inline-block; font: 500 12px/1 var(--mono); padding: 5px 7px; background: var(--black); color: var(--accent);
       border: 1px solid var(--accent); border-radius: 2px; }
.gainchip { display: inline-flex; gap: 6px; align-items: center; font: 400 13px/1 var(--mono); padding: 7px 10px; border-radius: 2px; }
.gainchip.up { background: var(--gain-bg); color: var(--gain); }
.gainchip.down { background: var(--loss-bg); color: var(--loss); }
.pill { display: inline-block; padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); }
.pill.warn { border-color: var(--accent); color: var(--accent); }

/* ---- artwork: sleeves sit in a 1px cream-tinted mount on record black, never touching a panel edge */
.cover { aspect-ratio: 1; overflow: hidden; background: var(--black); border: 1px solid var(--line); position: relative; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.empty { display: grid; place-items: center; }
.cover.empty .disc { width: 62%; aspect-ratio: 1; border-radius: 50%; background:
  radial-gradient(circle, var(--accent) 0 12%, var(--black) 12.5% 14%, #221D19 14% 100%); box-shadow: inset 0 0 0 1px var(--line),
  inset 0 0 0 10px #221D19, inset 0 0 0 11px rgba(242,233,216,.08), inset 0 0 0 20px #221D19, inset 0 0 0 21px rgba(242,233,216,.08); }
.art-frame { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px; background: var(--panel); position: relative; }
.art-frame .fmt { position: absolute; right: 22px; bottom: 22px; }
.art-frame .orig { position: absolute; left: 22px; top: 22px; }
.art-badge { padding: 6px 9px; background: var(--black); border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); letter-spacing: .14em; }
.art-badge.hot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- collection grid */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tile { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 8px 8px 12px; color: var(--ink); min-width: 0; }
.tile:hover { border-color: var(--line-strong); text-decoration: none; }
.tile .art { position: relative; }
.tile .art .tag { position: absolute; left: 6px; top: 6px; }
.tile .art .grade, .tile .art .badge { position: absolute; right: 6px; bottom: 6px; }
.tile .t { font: 700 21px/.86 var(--display); text-transform: uppercase; margin-top: 12px; overflow-wrap: break-word; }
.tile .a { color: var(--ink-2); font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.tile .foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; font: 400 12px/18px var(--mono); color: var(--muted); }
.tile .foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .foot span:last-child { flex: none; }
@media (max-width: 600px) { .tile .t { font-size: 19px; } .tile .foot { font-size: 11px; } }
/* A–Z headings are crate dividers: a tile-sized card with the letter on its tab. */
.letter-head { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--r-panel);
               background: repeating-linear-gradient(135deg, var(--panel) 0 10px, #251F1B 10px 20px); padding: 12px;
               font: 700 72px/.86 var(--display); color: var(--accent); scroll-margin-top: 80px; min-height: 120px; }
.letter-head::after { content: "Divider"; color: var(--muted); }
@media (max-width: 600px) { .letter-head { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; font-size: 34px; padding: 8px 12px; } }
.az { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;
      z-index: 5; font: 500 11px/1.25 var(--mono); }
.az a { padding: 1px 6px; color: var(--accent); text-align: center; }
@media (max-width: 760px) { .az { right: 0; font-size: 10px; } main.has-az { padding-right: 26px; } }

/* Tabs: a segmented group, one ember-filled selection. */
.tabs { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); margin: 22px 0 4px; overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; color: var(--ink-2); font: 500 13px/1 var(--sans);
          text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.tabs a + a { border-left: 1px solid var(--line); }
.tabs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.on:hover { color: var(--accent-ink); }
.tabs .n { font: inherit; }
@media (max-width: 480px) { .tabs { width: 100%; } .tabs a { flex: 1; justify-content: center; padding: 0 10px; font-size: 12px; } }
.searchbar { display: flex; gap: 0; margin: 18px 0 0; }
.searchbar input { border-radius: var(--r-ctl) 0 0 var(--r-ctl); border-right: 0; }
.searchbar .btn { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.listhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 16px; }
.listhead select { width: auto; padding: 8px 10px; font-size: 14px; }

/* ---- home */
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.home-head h1 { font-size: 88px; letter-spacing: 0; }   /* the app wordmark: never re-tracked */
@media (max-width: 700px) { .home-head h1 { font-size: 64px; } }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
/* Stat tiles: card, hairline, mono overline, big Barlow number. The value tile's number is ember. */
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; min-width: 0; }
.stat .k { color: var(--muted); }
.stat .v { font: 700 52px/.86 var(--display); margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v small { font: 500 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .2em; margin-left: 6px; }
.stat .v.price { color: var(--accent); }
@media (max-width: 700px) { .statrow { gap: 8px; } .stat { padding: 12px 10px; } .stat .v { font-size: 36px; }
                            .stat .k { font-size: 10px; letter-spacing: .14em; } .stat .v small { display: block; margin: 6px 0 0; font-size: 10px; letter-spacing: .14em; } }
/* Scan call-out: a card with the ember scan tile, like the app's home screen. */
.scanblock { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--panel); color: var(--ink);
             border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; margin: 0 0 26px; }
.checkbtn { margin: -12px 0 26px; }
.scanblock:hover { text-decoration: none; border-color: var(--accent); }
.scanblock .ring { width: 60px; height: 60px; border-radius: var(--r-ctl); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.scanblock .ring svg { width: 30px; height: 30px; }
.scanblock .t { display: block; font: 700 38px/.86 var(--display); text-transform: uppercase; }
.scanblock .s { font-size: 14px; line-height: 22px; color: var(--ink-2); margin-top: 8px; }
.scanblock .go { font: 700 34px/1 var(--display); color: var(--accent); }
@media (max-width: 600px) { .scanblock { grid-template-columns: auto 1fr; padding: 16px; gap: 16px; } .scanblock .go { display: none; } .scanblock .t { font-size: 30px; }
                            .scanblock .ring { width: 52px; height: 52px; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .two, .three { grid-template-columns: 1fr; } }
.shelfrow { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; align-items: start; }
.shelfrow .tile { width: 168px; }
.bigcount { font: 700 64px/.86 var(--display); }
.bigcount small { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .2em; margin-left: 6px; }

/* ---- needle drop */
.needle { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.needle .play { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 0; cursor: pointer;
                display: grid; place-items: center; }
.needle .play svg { width: 24px; height: 24px; }
.needle .play .i-pause, .needle .play.playing .i-play { display: none; }
.needle .play.playing .i-pause { display: block; }
.needle .play:disabled { opacity: .5; cursor: default; }
.needle .bar { height: 3px; background: var(--line); margin: 10px 0 6px; position: relative; border-radius: 2px; }
.needle .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.needle .meta { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/18px var(--mono); color: var(--muted); }
.needle .track { font: 700 22px/.9 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- album page */
.detail { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; gap: 24px; } }
.detail h1 { font-size: 56px; }
@media (max-width: 700px) { .detail h1 { font-size: 48px; } }
.byline { font: 500 20px/1.3 var(--sans); color: var(--ink-2); margin: 12px 0 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.fact { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); padding: 12px 14px; min-width: 0; }
.fact .k { color: var(--muted); }
.fact .v { font: 600 24px/.9 var(--display); text-transform: uppercase; margin-top: 8px; overflow-wrap: anywhere; }
.fact .v.mono { font: 400 13px/20px var(--mono); text-transform: none; }
.copyinfo .boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.copyinfo .box { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px; background: var(--black); min-width: 0; }
.copyinfo .box .v { font: 400 18px/1.2 var(--mono); margin-top: 8px; overflow-wrap: anywhere; }
.copyinfo .box .v.price { color: var(--accent); }
.copyinfo .box .k { color: var(--muted); letter-spacing: .16em; }
@media (max-width: 480px) { .copyinfo .box .v { font-size: 15px; } .copyinfo .box { padding: 10px 8px; } .copyinfo .box .k { font-size: 10px; letter-spacing: .1em; } }
blockquote.note { margin: 16px 0 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink); font-size: 16px; }
.bigprice { font: 400 48px/1 var(--mono); color: var(--accent); letter-spacing: -.02em; }
@media (max-width: 480px) { .bigprice { font-size: 38px; } }
.lmh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.lmh .box { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; background: var(--black); min-width: 0; }
.lmh .box .k { color: var(--muted); letter-spacing: .14em; }
.lmh .box .v { font: 400 16px/20px var(--mono); margin-top: 8px; }
.lmh .box.mid { border-color: var(--accent); }
.lmh .box.mid .v { color: var(--accent); }
@media (max-width: 480px) { .lmh .box { padding: 10px 8px; } .lmh .box .k { font-size: 10px; letter-spacing: .08em; } .lmh .box .v { font-size: 14px; } }
.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tracklist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); align-items: baseline; }
.tracklist .pos { font: 400 13px/20px var(--mono); color: var(--accent); }
.tracklist .dur { font: 400 13px/20px var(--mono); color: var(--muted); }
.spinlog { list-style: none; margin: 0; padding: 0; }
.spinlog li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.spinlog .when { font: 400 13px/20px var(--mono); color: var(--muted); }
.matrix { font: 400 15px/1.6 var(--mono); background: var(--black); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px 14px; overflow-wrap: anywhere; letter-spacing: .04em; }
.ontour { display: flex; gap: 12px; align-items: center; border: 1px solid var(--accent); border-radius: var(--r-panel); padding: 12px 14px; margin: 18px 0 0; }
.ontour .k { color: var(--accent); flex: none; }
details.edit > summary { cursor: pointer; list-style: none; }
details.edit > summary::-webkit-details-marker { display: none; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .formgrid { grid-template-columns: 1fr; } }
.section { margin-top: 34px; }
.section > .panel-title { margin-bottom: 12px; }

/* ---- lists */
.list { display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 10px; color: var(--ink); }
.item:hover { border-color: var(--line-strong); text-decoration: none; }
.item .cover { width: 64px; }
.item strong { font: 700 21px/.9 var(--display); text-transform: uppercase; }
button.item { font: inherit; text-align: left; cursor: pointer; width: 100%; }

/* ---- check result */
.verdict-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .verdict-wrap { grid-template-columns: 1fr; gap: 24px; } }
.brackets { position: relative; padding: 16px; }
.brackets::before, .brackets::after, .brackets > .b1, .brackets > .b2 { content: ""; position: absolute; width: 30px; height: 30px; border: 2px solid var(--accent); }
.brackets::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.brackets::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.brackets > .b1 { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.brackets > .b2 { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.stampwrap { position: relative; }
.stampwrap > img { border: 1px solid var(--line); background: var(--black); }
/* The owned stamp: terracotta fill, cream text, DM Sans 700 caps, tracked. Terracotta is used for nothing else. */
.stamp { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--stamp); color: var(--ink);
         font: 700 14px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .14em; padding: 11px 18px; border-radius: var(--r-ctl);
         text-align: center; white-space: nowrap; max-width: calc(100% - 24px); }
.stamp.wish { background: var(--bg); color: var(--accent); border: 1px solid var(--accent); }
@media (max-width: 480px) { .stamp { font-size: 12px; padding: 9px 12px; letter-spacing: .1em; } }
.dupe { border: 1px solid var(--stamp); border-radius: var(--r-panel); background: color-mix(in srgb, var(--stamp) 10%, var(--panel)); padding: 16px 18px; margin-top: 20px; }
.dupe .panel-title { color: var(--ink-2); }
.pricebar { position: relative; height: 8px; margin-top: 40px !important; border-radius: 2px;
            background: linear-gradient(90deg, #5E7440, #8C7A2E 50%, #9A4A3E); margin: 26px 0 30px; }
.pricebar .mk { position: absolute; top: -6px; width: 2px; height: 20px; background: var(--ink); }
.pricebar .mk span { position: absolute; top: 26px; transform: translateX(-50%); font: 400 12px/1 var(--mono); white-space: nowrap; color: var(--muted); }
.pricebar .mk.up span { top: -20px; }
.pricebar .you { position: absolute; top: -10px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg);
                 transform: translateX(-50%); display: none; }
.zone { font: 700 26px/.9 var(--display); text-transform: uppercase; margin-top: 12px; }
.zone.good { color: var(--gain); } .zone.fair { color: #D9B44A; } .zone.high { color: var(--loss); }
.drop { display: grid; place-items: center; gap: 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-panel); padding: 34px 16px; text-align: center;
        background: var(--black); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink); font: 400 15px/24px var(--sans); }
.drop:hover { border-color: var(--accent); }
.drop input { max-width: 100%; color: var(--muted); }
.drop .ring { width: 64px; height: 64px; border-radius: var(--r-ctl); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.drop .ring svg { width: 30px; height: 30px; }
.warnbox { border: 1px solid var(--accent); border-radius: var(--r-panel); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); padding: 16px; }

/* ---- pressing sheet */
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sheet { grid-template-columns: 1fr; } }
.press { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.press.first { border-color: var(--accent); }
.press.match { border: 2px solid var(--gain); padding: 13px; }
.press .head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.press .cc { font: 700 34px/.86 var(--display); text-transform: uppercase; }
.press .yr { font: 400 16px/1 var(--mono); color: var(--ink-2); margin-top: 6px; }
.press dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 13px; line-height: 20px; }
.press dt { color: var(--muted); font-size: 10px; letter-spacing: .14em; padding-top: 2px; }
.press dd { margin: 0; overflow-wrap: anywhere; }
.press .mx { font: 400 12px/1.5 var(--mono); background: var(--black); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px; overflow-wrap: anywhere; }
.press .mx div + div { border-top: 1px dotted var(--line); margin-top: 4px; padding-top: 4px; }
.press .mx .hit, .lines .hit { background: color-mix(in srgb, var(--gain) 30%, transparent); color: var(--ink); }
.press .notes { font-size: 12px; line-height: 18px; color: var(--muted); }
.press form { margin-top: auto; }
.lines { font: 400 15px/1.7 var(--mono); list-style: none; padding: 0; margin: 10px 0; }
.lines li { padding: 2px 8px; }

/* ---- intel */
.bars { display: grid; gap: 10px; }
.bars .b { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.bars .b .track { height: 8px; background: var(--black); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bars .b .fill { height: 100%; background: var(--accent); }
.bars .b .num { font: 400 13px/20px var(--mono); color: var(--muted); }
.bars .b .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gig { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.gig .d { font: 700 28px/.9 var(--display); text-align: center; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); padding: 8px 4px; }
.gig .d small { display: block; color: var(--accent); margin-bottom: 4px; letter-spacing: .14em; }
.gig .who { font: 700 22px/.9 var(--display); text-transform: uppercase; margin-bottom: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table td, .table th { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--muted); }

/* ---- verdicts and misc */
.verdict { margin: 18px 0; }
.ok { color: var(--gain); } .no { color: var(--muted); }
.progress { height: 6px; background: var(--black); border: 1px solid var(--line); border-radius: 2px; margin: 10px 0; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--r-panel); padding: 34px 20px; text-align: center; color: var(--ink-2); }

/* ---- the mark. Notch and ring are cut out of the tile, so it takes the colour of the ground behind it. */
.crate-mark .tile-fill { fill: var(--ink); }
.crate-mark .spindle { fill: var(--accent); }

/* ---- opening animation (first visit): the tile settles in, the ring cuts round like a groove, the spindle
   dot drops in, then the stacked lockup's name and strap rise. */
#splash { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center;
          animation: splashOut .35s ease 2.1s forwards; }
#splash .mark { display: block; width: 112px; height: 112px; margin: 0 auto; overflow: visible; }
#splash .word { font: 700 72px/.86 var(--display); letter-spacing: 0; text-align: center; margin-top: 26px; color: var(--ink);
                animation: rise .5s cubic-bezier(.22,1,.36,1) .8s both; }
#splash .strap { font: 500 13px/1 var(--sans); letter-spacing: .3em; color: var(--muted); text-align: center; margin-top: 14px; padding-left: .3em;
                 animation: rise .6s ease-out 1.05s both; }
#splash .mark .tile-fill { transform-box: view-box; transform-origin: 64px 64px; animation: settle .55s cubic-bezier(.34,1.56,.64,1) both; }
#splash .mark .groove { stroke-dasharray: 240; stroke-dashoffset: 240; animation: groove .6s cubic-bezier(.55,0,.25,1) .3s forwards; }
#splash .mark .spindle { transform-box: fill-box; transform-origin: center; animation: pop .35s cubic-bezier(.34,1.56,.64,1) .8s both; }
@keyframes settle { from { transform: translateY(-24px) scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes groove { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } to { transform: none; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #splash { display: none; } }
.spinlog .pill { margin-left: 8px; }
.tile .foot.wrap { flex-wrap: wrap; row-gap: 2px; }
.tile .foot.wrap span { white-space: nowrap; overflow: visible; }

/* Price sits beside the year, not over the cover. */
.tile .foot { display: flex; align-items: baseline; gap: 8px; }
.tile .foot .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .foot .price { margin-left: auto; flex: none; color: var(--accent); font: 500 13px/1.2 var(--mono); }

/* On tour, on the album page */
.tourrow { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.tourrow:first-child { border-top: 0; }
.tourrow:hover { text-decoration: none; background: rgba(242,233,216,.03); }
.tourrow .mono { flex: none; width: 96px; }