/* spot.css: the Spot-IT page, rebuilt 13 Nov (PROPOSAL) on the same grid system as Play-IT.
   Light grey page (#ECECEA, Nora 10 Nov) with a dark dot grid. Desktop: 1440 frame, dots every 60 px × --u;
   mobile: 390 frame, dots every 20. Positions and sizes are set by spot-tree.js (frame px × --u).
   The old version is in archive/spot-2026-11-10.css. */
.spot-page {
  --spot-bg: #ECECEA; --u: 1px;
  background-color: var(--spot-bg);
  background-image: radial-gradient(circle, rgba(0, 0, 0, .28) calc(var(--u) * 1), transparent calc(var(--u) * 1.3));
  color: var(--black);
}
.spot-page .site-header { --hdr-bg: var(--spot-bg); }
.spot-page .site-header:not(.menu-open) { background: color-mix(in srgb, var(--spot-bg) 92%, transparent); }

.sp { position: relative; overflow: hidden; }
.sp > * { position: absolute; margin: 0; }
.sp-title { font-family: var(--font-heading); font-weight: 700; line-height: 1; white-space: nowrap; }
.sp-intro { font: 400 calc(var(--u) * 30)/calc(var(--u) * 60) var(--font-body); }
.sp-credit { font: 400 calc(var(--u) * 15)/calc(var(--u) * 30) var(--font-body); color: rgba(0, 0, 0, .65); }

/* the tree: one SVG in frame units */
.st-tree, .sp-filters { left: 0; top: 0; }
.st-svg { display: block; overflow: visible; }
.st-thread { fill: none; stroke: rgba(0, 0, 0, .38); stroke-width: .6; }
.st-thread-root { stroke-opacity: .75; }
.st-ground { stroke: var(--black); stroke-width: 1; stroke-dasharray: 2 4; }
.st-ring { fill: var(--spot-bg); stroke-width: 1.2; }
.st-main { stroke: var(--black); stroke-width: 1; }
.st-work-dot { fill: var(--yellow); stroke: var(--black); stroke-width: 1; }
.st-leaf-box { fill: var(--spot-bg); stroke: var(--black); stroke-width: .8; }
.st-leaf-x { stroke: rgba(0, 0, 0, .3); stroke-width: .6; }
.st-svg text { font-family: var(--font-body); fill: var(--black); paint-order: stroke; stroke: var(--spot-bg); stroke-width: 3px; stroke-linejoin: round; }
.st-root { font-weight: 700; text-anchor: middle; }
.st-sub { text-anchor: middle; }
.st-tip { dominant-baseline: middle; }
.st-work { font-weight: 700; text-anchor: middle; }
.st-legend { fill: rgba(0, 0, 0, .6) !important; }

/* follow one branch, one root or one purpose (instant, no animation) */
.st-focus .st-thread, .st-focus .st-dot, .st-focus .st-tip, .st-focus .st-sub, .st-focus .st-root,
.st-focus .st-leaf, .st-focus .st-work, .st-focus .st-work-dot { opacity: .18; }
.st-focus .on { opacity: 1 !important; }
.st-focus .st-thread.on { stroke-width: 1.1; stroke-opacity: 1; }
.st-focus .st-thread:not(.st-thread-root).on { stroke: var(--black); }

/* filters: Syfte / Medium / Typ, one row each, on the dot rows */
.sp-flabel { position: absolute; margin: 0; font: 700 calc(var(--u) * 12)/1 var(--font-heading); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.sp-chips { position: absolute; display: flex; flex-wrap: wrap; }
.sp-chip { height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 15); border: 1px solid var(--black); border-radius: 999px; background: transparent;
  color: var(--black); font: 600 calc(var(--u) * 14)/1 var(--font-heading); cursor: pointer; white-space: nowrap; }
.sp-chip:hover, .sp-chip:focus-visible { background: var(--white); }
.sp-chip[aria-pressed="true"] { background: var(--black); color: var(--yellow); }

@media (max-width: 760px) {
  .spot-page main.sp { padding: 0 !important; }   /* this page places everything itself */
  .sp-intro { font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 40); }
  .sp-credit { font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 20); }
  .sp-chip { height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 10); }
  .sp-flabel { font-size: calc(var(--u) * 9); }
}

/* leaves = Nora's projects (links); branches = definitions (13 Nov) */
.st-svg a.st-leaf { cursor: pointer; }
.st-svg a.st-leaf:hover text, .st-svg a.st-leaf:focus-visible text { text-decoration: underline; }
.st-def { font-weight: 600; }

/* tree above the ground: brown trunk, branches and twigs; projects as leaves (Nora, 13 Nov) */
.spot-page { --bark: #4A3324; }
.st-trunk { fill: var(--bark); }
.st-branch, .st-twig { fill: none; stroke: var(--bark); stroke-linecap: round; }
.st-leaf-shape { fill: var(--yellow); stroke: var(--black); stroke-width: 1; }
.st-leaf-vein { stroke: var(--black); stroke-width: .8; fill: none; }
.st-focus .st-branch, .st-focus .st-twig, .st-focus .st-def { opacity: .18; }
.sp-chip { text-align: center; }