@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,400&family=Instrument+Sans:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

* { box-sizing: border-box; margin: 0; }
body { background: #241C16; }
.shop {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, #3A2C21 0%, transparent 55%),
    #241C16;
  color: #EFE5D5;
  font-family: 'Instrument Sans', sans-serif;
  max-width: 540px; margin: 0 auto; padding: 22px 18px 64px;
}
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; }

.masthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  border: 2px solid #C9A876; border-radius: 6px; padding: 4px 12px 5px;
  transform: rotate(-2deg); color: #C9A876; line-height: 1; text-decoration: none;
}
.stamp.big { transform: rotate(-2deg) scale(1.5); margin-bottom: 30px; }
.stamp-top { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; }
.stamp-bottom { font-size: 8.5px; font-weight: 600; letter-spacing: 0.42em; margin-top: 2px; padding-left: 0.42em; }

.tabs { display: flex; gap: 6px; }
.tabs a {
  background: transparent; border: 1px solid #4A3B2D; color: #C4B49E;
  padding: 6px 12px; border-radius: 99px; font: 500 13px 'Instrument Sans', sans-serif;
  cursor: pointer; text-decoration: none;
}
.tabs a.on { background: #EFE5D5; color: #241C16; border-color: #EFE5D5; }
.tabs em { font-style: normal; font-weight: 600; margin-left: 4px; }

.hero { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.hero .count { font-family: 'Fraunces', serif; font-weight: 700; font-size: 86px; line-height: 0.9; color: #C9A876; }
.hero-label { font-family: 'Fraunces', serif; font-style: italic; font-size: 22px; line-height: 1.15; }
.hero.small { margin-bottom: 18px; }

.crate { display: flex; flex-direction: column; gap: 18px; }

.single { position: relative; padding-right: 58px; transition: opacity .5s ease, transform .5s ease; }
.single.filing { opacity: 0; transform: translateY(10px); }

.record-slot {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  transition: right .5s ease;
}
.single.filing .record-slot { right: 120px; }

.disc {
  border-radius: 50%; position: relative; display: grid; place-items: center;
  background:
    conic-gradient(from 210deg, rgba(255,255,255,.10), transparent 24%, transparent 50%, rgba(255,255,255,.06) 62%, transparent 78%),
    repeating-radial-gradient(circle, #16110D 0 1.6px, #251D16 1.6px 3.2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.disc-label {
  border-radius: 50%; display: grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.25);
}
.disc-label.artwork { background-size: cover; background-position: center; }
.rpm {
  position: absolute; bottom: 6%; font: 700 8px 'Instrument Sans', sans-serif;
  color: rgba(255,255,255,.75); letter-spacing: .08em;
}
.spindle {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #241C16; box-shadow: 0 0 0 1.5px rgba(255,255,255,.25);
}
.spin { animation: rot 6s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .single, .record-slot { transition: none; }
}

.sleeve {
  /* No z-index: a stacking context here would trap .actions beneath the
     card-link overlay. DOM order keeps the sleeve above the disc. */
  position: relative;
  background: linear-gradient(160deg, #C9A876, #B08D5F 70%, #A5825A);
  color: #2A2015; border-radius: 6px; padding: 14px 74px 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.sleeve::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 14px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.18));
  border-radius: 0 6px 6px 0;
}
.sleeve-head { display: flex; justify-content: space-between; gap: 8px; }
.sleeve h2 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18.5px; letter-spacing: -0.01em; }
.artist { font-size: 13px; color: #55432C; margin-top: 2px; font-weight: 500; }
.artist.big { color: #C4B49E; font-size: 15px; margin: 4px 0 12px; }
.when { font-size: 11px; color: #6B563A; white-space: nowrap; padding-top: 3px; }
.scrawl {
  /* Caveat runs visually small for its px size — sizes here look right
     only in the handwriting font. */
  font-family: 'Caveat', cursive; font-weight: 600; font-size: 21px; line-height: 1.1;
  color: #3B2C1A; margin-top: 8px; transform: rotate(-1.2deg); transform-origin: left;
}
.scrawl.small { font-size: 17px; color: #C9A876; transform: none; margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.pill {
  text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px;
}
.pill.spotify { background: #1DB954; color: #08240F; }
.pill.apple { background: #FA586A; color: #33060C; }
.pill.songlink { background: transparent; border: 1.5px solid #7A6142; color: #55432C; }
.song-page .pill.songlink { color: #C4B49E; border-color: #4A3B2D; }
.file-form, .inline-form { display: inline; margin-left: auto; }
.file-it {
  background: transparent; border: 1.5px solid #7A6142; color: #55432C;
  border-radius: 99px; padding: 6px 12px; font: 600 12.5px 'Instrument Sans', sans-serif; cursor: pointer;
}
.file-it:hover { background: #2A2015; color: #C9A876; border-color: #2A2015; }

.shelf { margin-top: 36px; }
.shelf h3 {
  font: 600 11px 'Instrument Sans', sans-serif; text-transform: uppercase;
  letter-spacing: 0.14em; color: #8A7458; margin-bottom: 10px;
}
.shelf-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 4px;
  border-bottom: 1px solid #33291F; font-size: 13.5px;
  position: relative; /* anchors .row-link whole-row tap targets */
}
/* Buttons/chips inside a linked row stay clickable above the overlay. */
.shelf-row .inline-form, .shelf-row .notes-chip { position: relative; z-index: 3; }
.shelf-row.tall { align-items: flex-start; padding: 12px 4px; }
.shelf-row.tall > div:first-child { flex: 1; }
.shelf-title { font-weight: 600; }
.shelf-artist { color: #C4B49E; }
.shelf-when, .heard-badge { margin-left: auto; color: #8A7458; font-size: 11px; }
.shelf-row.tall .shelf-when { margin-left: 0; }
.linkish { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.linkish:hover { color: #C9A876; }
.heard-badge {
  font-weight: 600; padding: 3px 9px; border-radius: 99px;
  background: #2E251C; border: 1px solid #4A3B2D; color: #C4B49E;
}
.heard-badge.yes { background: #22392A; border-color: #2E8B57; color: #8FE0A9; }

.empty {
  border: 1.5px dashed #4A3B2D; border-radius: 10px; padding: 30px 20px;
  text-align: center; color: #C4B49E; font-size: 14px;
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #EFE5D5; color: #241C16; font-weight: 600;
  padding: 10px 18px; border-radius: 99px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  font-family: 'Caveat', cursive; font-size: 18px;
  transition: opacity .4s ease;
}
.toast.hide { opacity: 0; }

/* Secondary paste box — desktop fallback, deliberately quiet. */
.paste { margin-top: 30px; }
.paste summary {
  color: #8A7458; font-size: 12.5px; cursor: pointer; list-style-position: inside;
}
.paste summary:hover { color: #C9A876; }
.paste form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.paste input {
  background: #2E251C; border: 1px solid #4A3B2D; border-radius: 10px;
  color: #EFE5D5; padding: 11px 13px; font: 400 16px 'Instrument Sans', sans-serif;
}
.paste input::placeholder { color: #8A7458; }
.paste input:focus { outline: 2px solid #C9A876; outline-offset: 1px; }
.paste button, .login button {
  background: #C9A876; color: #241C16; border: 0; border-radius: 10px; align-self: flex-start;
  padding: 10px 16px; font: 600 14px 'Instrument Sans', sans-serif; cursor: pointer;
}

.signout { margin-top: 40px; text-align: center; }
.signout button {
  background: none; border: 0; color: #8A7458; font: 500 12px 'Instrument Sans', sans-serif;
  cursor: pointer; text-decoration: underline;
}

/* Login */
.login {
  min-height: 80vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 10px;
}
.login .tagline { color: #C4B49E; margin-bottom: 18px; }
.login form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.login input {
  background: #2E251C; border: 1px solid #4A3B2D; border-radius: 10px;
  color: #EFE5D5; padding: 12px 14px; font: 400 16px 'Instrument Sans', sans-serif; text-align: center;
}
.login input:focus { outline: 2px solid #C9A876; outline-offset: 1px; }
.login button { align-self: stretch; }
.notice {
  background: #2E251C; border: 1px solid #4A3B2D; border-radius: 10px;
  color: #C9A876; padding: 10px 16px; font-size: 14px; max-width: 320px;
}
.notice.error { color: #FA586A; border-color: #6b3038; }

/* Song detail */
.song-page .song-hero { display: flex; gap: 20px; align-items: center; margin: 10px 0 8px; }
.song-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 26px; letter-spacing: -0.01em; }

/* Setup page */
.setup .notice { max-width: none; margin-bottom: 10px; }
.setup .secrets pre { margin-top: 8px; white-space: pre-wrap; word-break: break-all; font-size: 12.5px; }
.setup-h { font: 600 11px 'Instrument Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; color: #8A7458; margin: 24px 0 10px; }
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #33291F; }
.setup-row form { display: flex; gap: 8px; }
.setup-row .file-it { color: #C4B49E; border-color: #4A3B2D; }
.setup-row .file-it:hover { background: #C9A876; color: #241C16; border-color: #C9A876; }
.setup details.admin {
  border: 1px solid #33291F; border-radius: 12px; background: rgba(46,37,28,.35);
  padding: 2px 16px 6px; margin-bottom: 12px;
}
.setup details.admin summary {
  cursor: pointer; padding: 12px 0; user-select: none;
  font: 600 11px 'Instrument Sans', sans-serif; text-transform: uppercase;
  letter-spacing: 0.14em; color: #C9A876;
}
.setup details.admin[open] summary { border-bottom: 1px solid #33291F; margin-bottom: 10px; }
.setup details.admin.danger { border-color: #5a2c33; }
.setup details.admin.danger summary { color: #FA586A; }
.setup details.admin > :last-child:not(summary) { margin-bottom: 8px; }
.setup details.admin .setup-h { margin-top: 16px; }
.setup-hint { color: #8A7458; font-size: 12.5px; padding: 8px 0 4px; }

.probe-form { display: flex; gap: 8px; margin-bottom: 12px; }
.probe-form input[type="url"] {
  flex: 1; background: #2E251C; border: 1px solid #4A3B2D; border-radius: 10px;
  color: #EFE5D5; padding: 9px 12px; font: 400 13px 'Instrument Sans', sans-serif;
}
.probe-form .file-it { color: #C4B49E; border-color: #4A3B2D; }
.forgot-link { color: #8A7458; font-size: 12.5px; margin-top: 14px; display: inline-block; }
.forgot-link:hover { color: #C9A876; }
.footer-links { margin-top: 40px; display: flex; gap: 18px; justify-content: center; align-items: center; }
.footer-links .signout { margin-top: 0; }
.footer-link { color: #8A7458; font: 500 12px 'Instrument Sans', sans-serif; text-decoration: underline; }
.footer-link:hover { color: #C9A876; }
.stack-form { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin-bottom: 10px; }
.stack-form input {
  background: #2E251C; border: 1px solid #4A3B2D; border-radius: 10px;
  color: #EFE5D5; padding: 11px 13px; font: 400 16px 'Instrument Sans', sans-serif;
}
.stack-form input:focus { outline: 2px solid #C9A876; outline-offset: 1px; }
.stack-form button {
  background: #C9A876; color: #241C16; border: 0; border-radius: 10px; align-self: flex-start;
  padding: 10px 16px; font: 600 14px 'Instrument Sans', sans-serif; cursor: pointer;
}

/* Sleeve notes — Phase 2 scrawls (spec v1.4) */
.note-row { padding: 9px 0; border-bottom: 1px solid #33291F; }
.note-row .scrawl { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 24px; line-height: 1.15; }
.note-meta { display: block; font: 500 11.5px 'Instrument Sans', sans-serif; color: #8A7458; margin-top: 3px; }
.note-empty { color: #8A7458; font-size: 13.5px; padding: 6px 0; }
.note-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 14px; }
.note-form textarea {
  width: 100%; background: #2E251C; border: 1px solid #4A3B2D; border-radius: 10px;
  color: #EFE5D5; padding: 10px 12px;
  /* 16px+ stops iOS focus-zoom; Caveat so you scrawl in handwriting. */
  font: 500 24px 'Caveat', cursive; line-height: 1.2;
  resize: vertical; min-height: 68px;
}
.note-form textarea::placeholder { color: #8A7458; }
.note-form textarea:focus { outline: 2px solid #C9A876; outline-offset: 1px; }

/* 💬 notes chips + the inbox New-notes shelf (Phase 2) */
.notes-chip {
  text-decoration: none; font: 600 11.5px 'Instrument Sans', sans-serif;
  color: #55432C; border: 1.5px solid #7A6142; border-radius: 99px;
  padding: 4px 10px; white-space: nowrap;
}
.notes-chip.new {
  background: #C9A876; color: #241C16; border-color: #C9A876;
  box-shadow: 0 0 10px rgba(201, 168, 118, 0.45);
}
.shelf-row .notes-chip { color: #C4B49E; border-color: #4A3B2D; margin-left: 8px; }
.shelf-row .notes-chip.new { color: #241C16; border-color: #C9A876; }
.new-notes { margin: -6px 0 26px; }
.new-notes .notes-chip { margin-left: auto; }

/* Stamps — Phase 2 reactions */
.stamps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stamp-btn {
  background: transparent; border: 1.5px solid #4A3B2D; color: #C4B49E;
  border-radius: 99px; padding: 6px 12px; font: 600 14px 'Instrument Sans', sans-serif;
  cursor: pointer;
}
.stamp-btn:hover { border-color: #C9A876; }
.stamp-btn.on { background: #C9A876; border-color: #C9A876; color: #241C16; }

/* Playlist export — the crate boxed up for Spotify / Apple Music */
.crate-tools { margin-top: 26px; text-align: center; }
.export { margin-top: 26px; }
.export h3 {
  font: 600 11px 'Instrument Sans', sans-serif; text-transform: uppercase;
  letter-spacing: 0.14em; color: #8A7458; margin-bottom: 8px;
}
.export-hint { color: #C4B49E; font-size: 13px; line-height: 1.4; margin-bottom: 10px; }
.copy-btn {
  border: 0; border-radius: 99px; padding: 9px 16px; cursor: pointer;
  font: 600 13px 'Instrument Sans', sans-serif;
}
.copy-btn.spotify { background: #1DB954; color: #08240F; }
.copy-btn.apple { background: #FA586A; color: #33060C; }
.linkbox { margin-top: 10px; }
.linkbox summary { color: #8A7458; font-size: 12.5px; cursor: pointer; }
.linkbox summary:hover { color: #C9A876; }
.linkbox textarea {
  width: 100%; margin-top: 8px; background: #2E251C; border: 1px solid #4A3B2D;
  border-radius: 10px; color: #EFE5D5; padding: 10px 12px;
  font: 400 12px ui-monospace, monospace; resize: vertical;
}
.export-miss { color: #8A7458; font-size: 12.5px; margin-top: 8px; }
.playlist-row { flex-wrap: wrap; }
.row-pills { margin-left: auto; display: flex; gap: 6px; }
.row-pills .pill { padding: 4px 9px; font-size: 11px; }
.playlist .pill.songlink { color: #C4B49E; border-color: #4A3B2D; }

/* Whole card opens the song page; buttons stack above the overlay. */
.card-link { position: absolute; inset: 0; z-index: 3; border-radius: 6px; }
.single .actions { position: relative; z-index: 4; }
.stamp-who { font-size: 11px; letter-spacing: 0.02em; }

/* Crate wall — one card per crate (v2.0) */
.crate-wall { display: flex; flex-direction: column; gap: 14px; }
.wall-card {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: linear-gradient(160deg, #C9A876, #B08D5F 70%, #A5825A);
  color: #2A2015; border-radius: 6px; padding: 20px 18px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.wall-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; }
.wall-count { font: 600 12.5px 'Instrument Sans', sans-serif; color: #55432C; white-space: nowrap; }
.wall-count.hot { background: #241C16; color: #C9A876; border-radius: 99px; padding: 5px 11px; }

/* Shelf rows with a .row-link are one big tap target. */
.row-link { position: absolute; inset: 0; z-index: 2; }