/*
 * Sebastian — "strip-mall at dusk".
 *
 * A Spirit Halloween pop-up in a dead retail unit under a sodium lamp. Dense
 * product-catalog logic, shelf labels, spec blocks. The one loud thing on the
 * page is the spook-level system, because that is what he reads the shelf by.
 */

:root {
  --ink:    #1A1220;
  --shelf:  #2A1E36;
  --rail:   #3B2B4A;
  --sodium: #FFA630;
  --toxic:  #8FD14F;
  --bone:   #EDE6DA;
  --blood:  #A8324A;
  --muted:  #A697B0;
  --focus:  var(--sodium);

  /* Shelf-label character now comes from weight and tracking, not from a
     condensed face: the narrow fallbacks (Haettenschweiler, Arial Narrow) were
     unreadable at card size on Windows. */
  --label: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --spec: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: 3rem;
}

/* The sodium lamp. Static, one per page, sits behind everything. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 60vh; pointer-events: none;
  background: radial-gradient(70% 100% at 50% -10%, rgba(255, 166, 48, .18), transparent 65%);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---------- masthead + tabs ---------- */

.masthead {
  padding: .9rem 1rem .6rem;
  display: flex; align-items: center; gap: .75rem;
}
.masthead .wordmark { margin-right: auto; }

.wordmark {
  font-family: var(--label); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1;
  font-size: clamp(1.35rem, 5vw, 1.9rem); color: var(--sodium); margin: 0;
}
.wordmark small {
  display: block; font-family: var(--text); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; color: var(--muted); text-transform: uppercase;
}
/*
 * The countdown is the one thing on this page that moves. It counts up to the
 * real number on load, then keeps a slow sodium pulse so it catches the eye
 * from across the room without ever being the thing you have to look away from.
 */
.countdown {
  flex: 0 0 auto; text-align: center; line-height: 1;
  padding: .35rem .8rem .45rem; border: 1px solid var(--rail);
  background: linear-gradient(180deg, rgba(255,166,48,.10), transparent);
}
.countdown b {
  display: block; font-family: var(--label); font-weight: 800;
  font-size: clamp(2rem, 9vw, 3rem); color: var(--sodium);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(255, 166, 48, .55);
}
.countdown small {
  display: block; font-family: var(--text); font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-top: .25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .countdown b { animation: lamp 2.8s ease-in-out infinite; }
  .countdown.hit b { animation: lamp 2.8s ease-in-out infinite, thump .5s ease-out; }
}
@keyframes lamp {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 166, 48, .35); opacity: .92; }
  50%      { text-shadow: 0 0 26px rgba(255, 166, 48, .8); opacity: 1; }
}
@keyframes thump {
  0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}

.tabs {
  display: flex; gap: .25rem; padding: 0 1rem;
  border-bottom: 1px solid var(--rail); margin-bottom: .75rem;
}
.tab {
  padding: .6rem .9rem; font-family: var(--label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; font-size: .84rem;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
  text-decoration: none;
}
.tab[aria-current="page"] { color: var(--sodium); border-bottom-color: var(--sodium); }

/* ---------- filter chips ---------- */

.chips {
  display: flex; gap: .4rem; overflow-x: auto; padding: 0 1rem .8rem;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: .35rem .8rem; border: 1px solid var(--rail);
  background: var(--shelf); color: var(--muted); border-radius: 2px;
  font-size: .82rem; letter-spacing: .03em; white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--sodium); border-color: var(--sodium); color: var(--ink); font-weight: 600;
}

/* ---------- the grid ---------- */

/*
 * Deliberately the same grid as Alexander's sheet — same columns, same gap, so
 * a card is the same size in both profiles. That trades away some of §8's
 * "dense, spec-forward" shelf feel for a bigger picture; the density now comes
 * from the spec block inside the card rather than from packing more per row.
 */
.grid {
  display: grid; gap: 1.25rem; padding: 0 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/*
 * Spook level is the visual system. --lvl drives the spine, the border and the
 * meter, so the shelf is readable at a glance without reading a number.
 */
.card { --lvl: var(--bone); --lvl-soft: rgba(237, 230, 218, .25); }
.card[data-spook="2"] { --lvl: #C9BFA8; --lvl-soft: rgba(201, 191, 168, .3); }
.card[data-spook="3"] { --lvl: var(--sodium); --lvl-soft: rgba(255, 166, 48, .3); }
.card[data-spook="4"] { --lvl: var(--toxic); --lvl-soft: rgba(143, 209, 79, .35); }
.card[data-spook="5"] { --lvl: var(--blood); --lvl-soft: rgba(168, 50, 74, .45); }

.card {
  position: relative; text-align: left; width: 100%;
  background: var(--shelf); border: 1px solid var(--rail);
  border-left: 7px solid var(--lvl);
  display: flex; flex-direction: column; overflow: hidden;
}
.card[data-spook="4"] { border-color: var(--lvl-soft); box-shadow: 0 0 14px -4px var(--lvl-soft); }
.card[data-spook="5"] {
  border-color: var(--lvl); box-shadow: 0 0 20px -3px var(--lvl-soft);
  background:
    repeating-linear-gradient(135deg, var(--lvl-soft) 0 6px, transparent 6px 13px) top / 100% 6px no-repeat,
    var(--shelf);
}
@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color .15s ease, transform .15s ease; }
  .card:hover { transform: translateY(-2px); }
}

.card .pic { position: relative; display: block; }
/* The generated motif sits underneath as the permanent fallback; a real photo
   covers it when there is one, and is removed again if it fails to load. */
.card .photo, .detail .photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #201530;
}
.detail .pic { position: relative; display: block; }
/* The price rides on the picture like a shelf sticker, which leaves the whole
   caption line for the store name instead of eliding it to "Spirit Ha...". */
.card .tag {
  position: absolute; left: 0; bottom: 0; padding: .3rem .7rem;
  background: var(--ink); color: var(--sodium);
  font-family: var(--spec); font-size: .95rem; font-weight: 600;
  border-top: 1px solid var(--lvl); border-right: 1px solid var(--lvl);
}

/* Hatched pegboard behind every motif — the flat back wall of the pop-up. */
.card .art, .detail .art {
  background:
    repeating-linear-gradient(45deg, rgba(237, 230, 218, .07) 0 1px, transparent 1px 7px),
    #201530;
}
.card .art {
  width: 100%; aspect-ratio: 5 / 4;
  color: var(--lvl); fill: var(--bone); opacity: .92;
}
.card .art .feat { fill: #201530; }
.card .art .feat-stroke { fill: none; stroke: var(--bone); stroke-width: 4; stroke-linecap: round; }
.card .art .teeth { stroke: #201530; stroke-width: 3; fill: none; }
.card[data-spook="4"] .art, .card[data-spook="5"] .art { fill: var(--lvl); }
.card[data-spook="4"] .art .feat-stroke, .card[data-spook="5"] .art .feat-stroke { stroke: var(--lvl); }

/* minmax(0,1fr): without it the auto column takes its max-content width from
   the nowrap store/price line and pushes the whole body past the card edge. */
.card .body {
  padding: .85rem 1rem 1rem; display: grid; gap: .45rem;
  grid-template-columns: minmax(0, 1fr); min-width: 0;
}
/* Title case, not uppercase, and a normal-width face: this is the line he
   actually has to read on every card. */
.card .name {
  font-family: var(--label); font-weight: 700;
  font-size: 1.35rem; line-height: 1.2; letter-spacing: 0;
  color: var(--bone);
}
.card .line {
  font-family: var(--spec); font-size: .85rem; color: var(--muted);
  display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
}
.card .line span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the meter: five bars, filled to the level */
.meter { display: flex; gap: 2px; align-items: center; min-width: 0; }
/* Capped so five bars read as a gauge, not a progress bar across the card. */
.meter i { width: 100%; max-width: 46px; height: 7px; background: var(--rail); }
.meter i.on { background: var(--lvl); }
.meter span {
  font-family: var(--spec); font-size: .78rem; color: var(--lvl);
  margin-left: auto; letter-spacing: .05em; white-space: nowrap;
}

.flag {
  position: absolute; top: 0; right: 0; padding: .3rem .7rem .3rem .6rem;
  font-family: var(--spec); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.flag--new { background: var(--sodium); color: var(--ink); font-weight: 700; }
.flag--pending { background: var(--ink); color: var(--bone); border-left: 3px solid var(--sodium); }

/* ---------- detail sheet ---------- */

dialog.detail {
  border: 1px solid var(--rail); border-left: 6px solid var(--lvl, var(--bone));
  background: var(--shelf); color: var(--bone); padding: 0;
  width: min(560px, 100%); max-height: 90svh; margin: auto;
  overflow: auto; overscroll-behavior: contain;
}
dialog.detail::backdrop { background: rgba(10, 6, 14, .82); }
.detail .art { aspect-ratio: 16 / 10; color: var(--lvl); fill: var(--bone); }
.detail .inner { padding: 1rem 1.1rem 1.4rem; }
.detail h2 {
  font-family: var(--label); font-weight: 800;
  font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.15; margin: 0 0 .2rem;
}
.detail .reason {
  border-left: 3px solid var(--lvl); padding-left: .7rem; margin: .9rem 0;
  color: var(--muted); font-style: italic;
}
.spec { width: 100%; border-collapse: collapse; font-family: var(--spec); font-size: .82rem; }
.spec th {
  text-align: left; font-weight: 400; color: var(--muted); padding: .35rem .6rem .35rem 0;
  letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; width: 8.5rem;
  vertical-align: top;
}
.spec td { padding: .35rem 0; border-bottom: 1px solid var(--rail); }
.detail .prose { margin: 1rem 0 0; }
.detail .standin {
  margin: .8rem 0 0; font-family: var(--spec); font-size: .7rem;
  color: var(--muted); letter-spacing: .04em;
}
.detail .actions { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.btn {
  padding: .65rem 1.1rem; border: 1px solid var(--sodium); color: var(--sodium);
  text-decoration: none; font-family: var(--label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
}
.btn--solid { background: var(--sodium); color: var(--ink); font-weight: 700; }

/* ---------- states + footer ---------- */

.note {
  padding: 2.5rem 1rem; text-align: center; color: var(--muted);
  font-family: var(--spec); font-size: .85rem;
}
.note b { display: block; color: var(--bone); font-family: var(--label);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: 1rem; margin-bottom: .4rem; }

.channel-list { display: grid; gap: .5rem; padding: 0 1rem; }
.channel {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .85rem;
  align-items: center; padding: .75rem;
  background: var(--shelf); border: 1px solid var(--rail);
  border-left: 3px solid var(--rail); text-decoration: none;
}
.channel:hover { border-left-color: var(--sodium); }
.channel .name {
  font-family: var(--label); font-weight: 700; font-size: 1rem; color: var(--bone);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One line, as PROJECT.md §6 asks — YouTube's own description runs long. */
.channel .line {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .8rem; line-height: 1.35; color: var(--muted);
  font-family: var(--text);
}
.channel .avatar {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; overflow: hidden;
  background: var(--rail); display: grid; place-content: center;
  font-family: var(--label); font-weight: 700; color: var(--sodium); font-size: 1.2rem;
}

.foot {
  margin-top: 2rem; padding: 1rem; border-top: 1px solid var(--rail);
  display: flex; justify-content: space-between; font-family: var(--spec);
  font-size: .72rem; color: var(--muted);
}
.foot a { color: var(--muted); }


/* top menu, in Sebastian's colours */
.menu { color: var(--sodium); }
.menu-btn { background: var(--shelf); border-color: var(--rail); }
.menu-btn:hover { border-color: var(--sodium); }
.menu-pop { background: var(--shelf); border-color: var(--rail); box-shadow: 0 10px 30px -12px #000; }
.menu-pop a { color: var(--bone); }
.menu-pop a:hover, .menu-pop a:focus-visible { background: var(--rail); color: var(--sodium); }