/* 3D Interactive Time Table: stage, desk, tiles, threads, feed. Uses the tokens in site.css. */
/* ---------- stage ---------- */
.stage { display: grid; gap: 18px; }
.stagebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.step { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); cursor: pointer; font: 600 14px/1.2 var(--display); color: var(--t2); transition: background .3s, color .3s; }
.step .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--mono); background: var(--paper); border: 1px solid var(--rule); }
.step[aria-current="step"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.step[aria-current="step"] .n { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.ctl { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); cursor: pointer; font: 700 12px/1.2 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; }

.board {
  position: relative; display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2.6fr) minmax(160px, 1fr);
  gap: clamp(18px, 2.6vw, 40px); align-items: center;
  perspective: 1500px; perspective-origin: 50% 30%;
  padding-block: 30px 10px;
}
.threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
.threads path { fill: none; stroke-linecap: round; }
.threads .casing { stroke: var(--ink); stroke-width: 4.5; }
.threads .core { stroke: var(--lime); stroke-width: 2; }
.threads g { transition: opacity .3s; }
.threads g.dim { opacity: .14; }
.threads g.hl .casing { stroke-width: 6.5; }
.threads g.hl .core { stroke-width: 3; }
.threads circle { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }

/* the eight functions: paper cards, angled towards the desk */
.nodes { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 6; transform-style: preserve-3d; }
.nodes.left { transform: rotateY(14deg); transform-origin: right center; }
.nodes.right { transform: rotateY(-14deg); transform-origin: left center; }
.node {
  --nc: var(--ink);
  text-align: left; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 3px 12px; align-items: start;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; background: var(--white); border: 1px solid var(--rule);
  transition: border-color .4s, box-shadow .4s, transform .5s cubic-bezier(.2,1.3,.4,1), opacity .4s;
}
.node .ico { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--t3); transition: background .4s, color .4s, box-shadow .4s; }
.node .ico svg { width: 19px; height: 19px; }
.node .t { font: 700 15px/1.25 var(--display); }
.node .d { font: 400 12px/1.45 var(--mono); color: var(--t3); min-width: 0; overflow-wrap: anywhere; }
.node.lit { border-color: var(--ink); box-shadow: 0 22px 40px -18px rgba(11,11,12,.55); transform: translateZ(24px); }
.node.lit .ico { background: var(--nc); color: var(--white); box-shadow: 0 6px 14px -4px var(--nc); }
.node.lit .d { color: var(--t2); }
.node.hl { transform: translateZ(60px) scale(1.04); }
.node.faded { opacity: .4; box-shadow: none; transform: none; }

/* ---------- the 3D desk ---------- */
.device-col { position: relative; min-width: 0; transform-style: preserve-3d; z-index: 4; }
.ground {
  position: absolute; left: 6%; right: 6%; top: 18%; height: 70%;
  background: radial-gradient(closest-side, rgba(11,11,12,.55), transparent);
  filter: blur(22px); transform: translateY(40px) scale(1.05); pointer-events: none;
}
.device {
  position: relative; transform-style: preserve-3d; will-change: transform;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(200,240,49,.12), transparent 60%),
    linear-gradient(180deg, #1C1C20, var(--ink));
  color: var(--white); border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 50px 80px -30px rgba(11,11,12,.7);
}
/* slab thickness: the front edge folds down 22px */
.device::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 22px;
  transform-origin: bottom center; transform: rotateX(-90deg);
  background: linear-gradient(180deg, #2A2A30, #050506); border-radius: 0 0 12px 12px;
}
.sheen {
  position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; transform: translateZ(1px);
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 10%), rgba(255,255,255,.14), transparent 60%);
}
.panelhead { position: relative; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px 12px; border-bottom: 1px solid var(--rule-d); transform: translateZ(2px); }
.ph-title { font: 700 12.5px/1.2 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); }
.ph-right { display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--d2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.publish { font: 700 12px/1 var(--display); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-d); color: var(--white); transition: background .25s, color .25s, transform .15s; }
.publish.pressed { background: var(--lime); color: var(--ink); border-color: var(--lime); transform: translateZ(-4px) scale(.94); }

.gridwrap { position: relative; padding: 12px 12px 14px; transform-style: preserve-3d; }
.tt { display: grid; grid-template-columns: 54px repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(42px, auto); gap: 6px; position: relative; transform-style: preserve-3d; }
.hd { font: 600 11px/1.2 var(--mono); color: var(--d3); padding: 6px 4px; text-align: center; letter-spacing: .05em; text-transform: uppercase; }
.tm { font: 500 11px/1.2 var(--mono); color: var(--d3); padding: 6px 2px; display: flex; flex-direction: column; justify-content: center; }
.tm b { color: var(--d2); font-weight: 600; }

/* lesson tiles: raised, glossy, extruded */
.cell {
  --c: #2A2A30; --on: #FFFFFF; --z: 10px;
  position: relative; border-radius: 9px; padding: 6px 8px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  color: var(--on);
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 46%, color-mix(in srgb, var(--c) 78%, #000) 100%);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--c) 70%, #000),
    0 2px 0 color-mix(in srgb, var(--c) 62%, #000),
    0 3px 0 color-mix(in srgb, var(--c) 55%, #000),
    0 4px 0 color-mix(in srgb, var(--c) 48%, #000),
    0 5px 0 color-mix(in srgb, var(--c) 42%, #000),
    0 14px 18px -6px color-mix(in srgb, var(--c) 60%, transparent),
    0 18px 24px -10px rgba(0,0,0,.7);
  transform: translateZ(var(--z));
  transition: transform .5s cubic-bezier(.2,1.3,.4,1), box-shadow .4s, opacity .3s, filter .4s;
}
.cell::after { content: ""; position: absolute; inset: 1px 1px 45% 1px; border-radius: 8px 8px 14px 14px / 8px 8px 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)); pointer-events: none; }
.cell b { position: relative; font: 800 12.5px/1.1 var(--display); letter-spacing: .03em; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.cell span { position: relative; font: 500 10.5px/1.25 var(--mono); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.cell.dark-text b, .cell.dark-text span { text-shadow: none; }
.cell.fixed { --z: 2px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: var(--d3); }
.cell.fixed::after { display: none; }
.cell.fixed span { text-shadow: none; }
.cell.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); --z: 0px; }
.cell.ghost::after { display: none; }
.cell.ghost > * { opacity: 0; }
.cell.absent {
  --c: #2B0A12; --on: #FFFFFF;
  background: repeating-linear-gradient(135deg, var(--alert) 0 8px, #B5122F 8px 16px);
}
.cell.covered { outline: 2px solid var(--lime); outline-offset: 2px; }
.cell.focus {
  --z: 78px;
  filter: brightness(1.12) saturate(1.1);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--c) 70%, #000), 0 2px 0 color-mix(in srgb, var(--c) 62%, #000),
    0 3px 0 color-mix(in srgb, var(--c) 55%, #000), 0 4px 0 color-mix(in srgb, var(--c) 48%, #000),
    0 5px 0 color-mix(in srgb, var(--c) 42%, #000), 0 6px 0 color-mix(in srgb, var(--c) 36%, #000),
    0 0 0 3px var(--lime), 0 0 40px 6px rgba(200,240,49,.55), 0 60px 50px -20px rgba(0,0,0,.85);
  z-index: 3;
}
.badge { position: absolute; top: -8px; right: -4px; font: 700 9px/1 var(--mono); letter-spacing: .06em; padding: 4px 6px; border-radius: 5px; background: var(--white); color: #B5122F; box-shadow: 0 4px 10px rgba(0,0,0,.4); transform: translateZ(8px); }
.badge.ok { background: var(--lime); color: var(--ink); }

.scanner { position: absolute; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 22px 6px rgba(200,240,49,.6); opacity: 0; transition: left .5s cubic-bezier(.6,.05,.3,1), opacity .3s; pointer-events: none; transform: translateZ(40px); }
.scanner.on { opacity: 1; }

/* agent feed row, floating above the slab */
.feed {
  position: absolute; left: 50%; bottom: 18px; width: min(94%, 470px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: rgba(22,22,24,.97); border: 1px solid var(--rule-d);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px) translateZ(110px);
  box-shadow: 0 30px 50px -16px rgba(0,0,0,.85);
  transition: opacity .35s, transform .45s cubic-bezier(.2,1.3,.4,1), border-color .35s, background .35s;
}
.feed.show { opacity: 1; transform: translate(-50%, 0) translateZ(120px); }
.feed.ok { border-color: rgba(200,240,49,.7); background: rgba(34,40,14,.97); }
.feed .ft { font: 500 12px/1 var(--mono); color: var(--d3); }
.feed .fb { min-width: 0; }
.feed .fb b { display: block; font: 600 14px/1.3 var(--display); color: var(--white); }
.feed .fb small { display: block; font: 400 11.5px/1.35 var(--mono); color: var(--d3); }
.feed .tag { font: 700 10.5px/1 var(--mono); letter-spacing: 1.2px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--d2); }
.feed.ok .tag { background: var(--lime); color: var(--ink); }

.panelfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; padding: 10px 18px 16px; font: 400 12px/1.4 var(--mono); color: var(--d3); border-top: 1px solid var(--rule-d); }
.panelfoot b { color: var(--white); font-weight: 500; }

.recips { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.recip { border: 1px solid var(--rule); border-radius: 14px; padding: 10px 14px; background: var(--white); opacity: .6; transition: opacity .4s, border-color .4s, box-shadow .4s, transform .5s cubic-bezier(.2,1.3,.4,1); }
.recip .k { font: 700 11px/1 var(--mono); color: var(--t3); text-transform: uppercase; letter-spacing: 1.4px; }
.recip .v { font: 900 1.6rem/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.recip.on { opacity: 1; border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-4px); }
.ripple { position: absolute; left: 50%; top: -60%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(200,240,49,.25); opacity: 0; pointer-events: none; z-index: 5; }
.ripple.go { animation: ripple 1.4s ease-out; }
@keyframes ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(14); opacity: 0; } }

.caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 16px; }
.caption .when { font: 700 12.5px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.caption p { margin: 0; font: 600 clamp(1.05rem, 1.6vw, 1.25rem)/1.45 var(--serif); color: var(--navy); max-width: 70ch; }
.example { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--t3); letter-spacing: .04em; }

/* ---------- narrow screens: stack, gentler 3D, no threads ---------- */
@media (max-width: 960px) {
  .board { grid-template-columns: minmax(0, 1fr); perspective: 1100px; }
  .threads { display: none; }
  .nodes, .nodes.left, .nodes.right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: none; }
  .device-col { order: 1; } .nodes.left { order: 2; } .nodes.right { order: 3; }
  .node.lit, .node.hl { transform: none; }
}
@media (max-width: 560px) {
  .nodes, .nodes.left, .nodes.right { grid-template-columns: minmax(0, 1fr); }
  .tt { grid-template-columns: 38px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .cell { padding: 4px; }
  .cell span { display: none; }
  .cell b { font-size: 9.5px; }
  .recip .v { font-size: 1.2rem; }
  .caption { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .feed { grid-template-columns: minmax(0, 1fr) auto; }
  .feed .ft { display: none; }
}

/* role label on each part of the school (hero v2: one school, one live system) */
.node .t { display: flex; flex-direction: column; gap: 3px; }
.node .r { font: 700 10px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3); }
.node.lit .r { color: var(--nc); }