/* =========================================================
   spot.css: Spot the System viewing page.
   Loads after ../css/site.css and uses its tokens
   (--paper, --sheet, --ink, --spot, --font-display ...).
   ========================================================= */

/* --board: backing for the sample boards (transparent PNGs with dark text),
   kept light in both themes, on the page and in the zoom view */
.spot-page { --wide: 1240px; --board: #ffffff; }
.spot-page .topbar { grid-template-columns: max-content minmax(0, 1fr); align-items: center; }
.spot-page .topbar .brand { width: auto; margin: 0; }
@media (max-width: 999px) { .spot-page .topbar { grid-template-columns: minmax(0, 1fr); } }

.spot-main { max-width: var(--wide); margin: 0 auto; padding: 28px 20px 72px; }
.spot-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.spot-intro h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); margin: 0 0 10px; }
.spot-intro .lede { margin: 0; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.tasks li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 10px; align-items: center; margin: 0; }
.tasks b { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--spot); color: var(--sheet); font: 700 1rem var(--font-code); }
@media (max-width: 760px) { .spot-intro { grid-template-columns: minmax(0, 1fr); } }

/* Station tabs */
.station-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 26px; padding: 0; list-style: none; }
.station-tabs li { margin: 0; min-width: 0; }
.station-tab { display: grid; gap: 2px; width: 100%; height: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-top: 5px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; }
.station-tab .k { font: 700 1.5rem/1 var(--font-display); }
.station-tab .n { font-size: 0.88rem; color: var(--muted); line-height: 1.25; }
.station-tab:hover { border-top-color: var(--spot); }
.station-tab[aria-selected="true"] { border-color: var(--spot); border-top-color: var(--spot); background: var(--spot-soft); }
.station-tab[aria-selected="true"] .k { color: var(--spot); }
@media (max-width: 520px) { .station-tabs { gap: 6px; } .station-tab { padding: 8px 10px; } }

/* Station */
.station { min-width: 0; }
.station .eyebrow { margin-bottom: 8px; }
.station h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 0 0 8px; }
.station .st-intro { margin: 0; max-width: 44rem; }
.wall-group { margin-top: 22px; }
.wall-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.wall-head h3 { margin: 0; font: 700 0.78rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wall-head span { font-size: 0.88rem; color: var(--muted); }
.wall { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; align-items: end; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .wall { --cols: 2 !important; } .wall.wall-few { --cols: 1 !important; } }
.pin { margin: 0; display: grid; gap: 6px; min-width: 0; }
/* Every board sits in the same 16:10 frame, so boards of any shape line up */
.pin .zoom { display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--board); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 8px 18px -14px rgba(0,0,0,.5); transition: transform .15s ease; }
.pin .zoom:hover { transform: translateY(-2px); }
.pin img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.pin .cap { font-size: 0.9rem; line-height: 1.3; }
.pin .cap small { display: block; font-size: 0.78rem; color: var(--muted); }
.look { margin: 18px 0 0; padding: 12px 16px; background: var(--spot-soft); border-left: 5px solid var(--spot); border-radius: 0 var(--radius) var(--radius) 0; }
.look strong { display: block; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--spot); }
.station .links { max-width: none; }
.station .links a { overflow-wrap: anywhere; }
.station .credit { margin-top: 18px; }

/* Zoom view: fills the window; the whole board always fits, no scrolling */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox { box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 8px; border: 0; background: rgb(10, 14, 18); color: #f2f4f5; overflow: hidden; }
.lightbox::backdrop { background: rgba(10, 14, 18, .92); }
.lightbox .lb { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; height: 100%; }
.lb-stage { position: relative; min-height: 0; }
.lb-stage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: var(--board); border-radius: 4px; }
.lb-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-text { flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font-size: 0.95rem; line-height: 1.3; }
.lb-count { white-space: nowrap; color: #a3b0b8; }
.lb-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 4px; cursor: pointer; font: 700 2rem/1 var(--font-body); color: #f2f4f5; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.lb-btn:hover { background: rgba(255,255,255,.24); }
.lb-btn[hidden] { display: none; }
.lightbox .lb-close { flex: none; margin: 0; cursor: pointer; font: 700 1rem var(--font-body); }
.lightbox button:focus-visible { outline: 3px solid #5cc8bf; outline-offset: 2px; }
@media (max-width: 520px) {
  .lb-bar { flex-wrap: wrap; gap: 6px 8px; }
  .lb-text { order: -1; flex-basis: 100%; font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #lb-next { margin-right: auto; }
}