/* Between Hours - an off-hours corridor: mustard wallpaper, worn carpet, green-white strip lights; at night, a teal
 * dark hall with the lamps glowing. */
:root {
  --bg: #efe7cc; --wall: #e4d6a6; --paper: #fbf7ea; --ink: #2a2820; --muted: #6a6450; --line: #cdbf93; --accent: #8a6a12; --accent-ink: #fffaf0;
  --carpet: #7b3d30; --runner: #a3553f; --lamp-on: #f3fbdc; --lamp-off: #b9ae86; --glow: rgba(214, 245, 160, 0.9); --dim: #1d1c15;
  --felt: #232427; --felt-ink: #f4f1e6; --fob: #b44a2e; --fob-ink: #fff4e4;
  --ok: #2f6b3b; --warn: #8a5a00; --bad: #a3302a; --info: #33587a;
  --v-deep: #2e5e4e; --v-hour: #8a6a12; --v-place: #6a6450;
  --shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 18px rgba(60,48,10,.08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #10171a; --wall: #18242a; --paper: #172126; --ink: #ebe7d6; --muted: #a7a690; --line: #2e3d44; --accent: #e3c157; --accent-ink: #1a1606;
  --carpet: #4a2620; --runner: #6b3529; --lamp-on: #f6fbe2; --lamp-off: #3a4a50; --glow: rgba(226, 250, 180, 0.95); --dim: #000;
  --felt: #0b0c0e; --felt-ink: #f1eee2; --fob: #c45a3b; --fob-ink: #fff4e4;
  --ok: #7fcf8f; --warn: #f0c060; --bad: #ff8a80; --info: #8fc1ec;
  --v-deep: #78c9a8; --v-hour: #e3c157; --v-place: #b3b09a;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(138,106,18,.05) 46px 48px); }
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.2; overflow-wrap: anywhere; }
.hidden { display: none !important; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.note { border-left: 3px solid var(--accent); padding: 4px 10px; background: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--paper); border-bottom: 2px solid var(--line); }
.back { text-decoration: none; font-weight: 600; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.logo { width: 28px; height: 28px; flex: 0 0 auto; }
.lg-hall { fill: var(--wall); stroke: var(--ink); stroke-width: 1.6; }
.lg-door { fill: var(--accent); stroke: var(--ink); stroke-width: 1.2; }
.lg-lines { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.session { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 5px 13px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { min-height: 28px; padding: 3px 10px; font-size: .82rem; }
.pill.big { min-height: 44px; padding: 8px 20px; font-size: 1rem; }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.pill:focus-visible, .chip:focus-visible, select:focus-visible, textarea:focus-visible, .switch input:focus-visible + .plate { outline: 3px solid var(--accent); outline-offset: 2px; }

main { max-width: 1060px; margin: 0 auto; padding: 8px 16px 32px; }
.hero { padding: 14px 0 6px; }
.kicker { font-size: .84rem; color: var(--muted); max-width: 70ch; margin: 0 0 8px; }
.hero h1 { font-size: clamp(2rem, 7vw, 3.3rem); margin: 4px 0 8px; letter-spacing: .01em; font-family: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; font-stretch: condensed; }
.h1b { display: block; font-size: clamp(1rem, 3.4vw, 1.35rem); font-weight: 500; color: var(--muted); margin-top: 4px; font-family: system-ui, sans-serif; }
.lede { max-width: 70ch; margin: 0 0 10px; }
.samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { min-height: 34px; padding: 5px 12px; border-radius: 6px; border: 1.5px dashed var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; }
.chip.on { border-style: solid; border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 14px 0; box-shadow: var(--shadow); min-width: 0; }
.two-col .panel { margin: 0; }
.two-col { margin: 14px 0; }
.ph { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 10px; }
.step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: .85rem; font-family: ui-monospace, Menlo, monospace; flex: 0 0 auto; }
.lbl { display: block; font-weight: 600; margin: 4px 0; }
textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; }
textarea { resize: vertical; min-height: 120px; }
select { min-height: 40px; text-overflow: ellipsis; }
.pickrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pick { display: block; min-width: 0; }
.pick-l { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 3px; }

/* The switches: a row of wall plates with rocker toggles */
.switches { display: grid; grid-template-columns: 1fr; gap: 6px; }
.switch { position: relative; display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "plate no label" "plate no hint"; column-gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }
.switch:hover { border-color: var(--line); }
.switch.hinted { border: 1.5px dashed var(--accent); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plate { grid-area: plate; width: 30px; height: 40px; border-radius: 5px; background: var(--bg); border: 1.5px solid var(--line); display: grid; place-items: center; }
.toggle { width: 12px; height: 22px; border-radius: 3px; background: var(--lamp-off); box-shadow: inset 0 -9px 0 rgba(0,0,0,.18); transition: box-shadow .15s, background .15s; }
.switch input:checked + .plate .toggle { background: var(--lamp-on); box-shadow: inset 0 9px 0 rgba(0,0,0,.14), 0 0 8px var(--glow); }
.switch input:checked + .plate { border-color: var(--accent); }
.sw-no { grid-area: no; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--muted); width: 1.2em; text-align: right; }
.sw-l { grid-area: label; font-size: .93rem; }
.sw-hint { grid-area: hint; font-size: .76rem; color: var(--accent); font-style: italic; }

/* The corridor */
.hall-box { max-width: 760px; margin: 0 auto; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); background: var(--dim); }
.corridor { display: block; width: 100%; height: auto; }
.c-ceil { fill: #e6e0c6; }
.c-wall-l { fill: #d9c27c; }
.c-wall-r { fill: #cfb66b; }
.c-floor { fill: var(--carpet); }
.c-runner { fill: var(--runner); opacity: .7; }
.c-far { fill: #c4ab60; }
.c-door { fill: #9b8a5a; stroke: #5d5232; stroke-width: .8; }
.c-fardoor { fill: #7b6c44; }
.c-sign { fill: #1f5a3a; }
.c-sign-t { fill: #eafbe8; font: 700 6px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.c-clock { fill: #f5f1e2; stroke: #5d5232; stroke-width: .8; }
.c-hand { fill: none; stroke: #2a2820; stroke-width: .8; }
.c-lamp { fill: var(--lamp-off); stroke: rgba(0,0,0,.25); stroke-width: .5; }
.c-lamp.on { fill: var(--lamp-on); filter: drop-shadow(0 0 4px var(--glow)); }
.c-lamp.hint { fill: transparent; stroke: var(--lamp-on); stroke-width: 1.1; stroke-dasharray: 2 1.6; }
.c-dim { fill: #000; pointer-events: none; }
:root[data-theme="dark"] .c-ceil { fill: #2a383c; }
:root[data-theme="dark"] .c-wall-l { fill: #3c4a3e; }
:root[data-theme="dark"] .c-wall-r { fill: #344238; }
:root[data-theme="dark"] .c-far { fill: #2c3830; }
:root[data-theme="dark"] .c-door { fill: #4c4a36; stroke: #1b1a12; }
:root[data-theme="dark"] .c-fardoor { fill: #3d3b2a; }
.reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 4px; }
.reading b { font-size: 1.15rem; }
.key-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; }
.kl { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 22px; height: 10px; border-radius: 2px; }
.kx-on { background: var(--lamp-on); box-shadow: 0 0 6px var(--glow); border: 1px solid rgba(0,0,0,.3); }
.kx-hint { border: 1.5px dashed var(--accent); }
.kx-off { background: var(--lamp-off); }
.exports, .cardrow, .runrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.gate { border-left: 3px solid var(--warn); padding: 6px 10px; background: var(--bg); }

/* Progress */
.steps { list-style: none; padding: 0; margin: 6px 0; }
.step { padding: 2px 0; color: var(--muted); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--ok); }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; background: var(--bg); padding: 10px; border-radius: 6px; max-height: 360px; overflow: auto; }

/* The reading: key fob, letterboard, hour indicator */
.res-kick { text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 8px; }
.fob-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fob { position: relative; width: 168px; min-height: 250px; padding: 46px 16px 22px; background: var(--fob); color: var(--fob-ink); text-align: center; flex: 0 0 auto;
  clip-path: polygon(50% 0, 100% 14%, 100% 86%, 50% 100%, 0 86%, 0 14%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18); }
.fob.v-deeply_liminal { background: #2e6a55; }
.fob.v-at_the_right_hour { background: #7d5e0e; }
.fob.v-just_a_place { background: #6e6754; }
.fob-hole { position: absolute; top: 16px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25); }
.fob-no { font: 700 1.6rem/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.fob-v { font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; border-top: 1.5px solid rgba(255,255,255,.55); border-bottom: 1.5px solid rgba(255,255,255,.55); padding: 4px 0; width: 100%; }
.fob-t { font-size: .92rem; font-style: italic; overflow-wrap: anywhere; }
.fob-side { flex: 1 1 260px; min-width: 0; }
.letterboard { list-style: none; margin: 6px 0; padding: 14px 16px; border-radius: 6px; background-color: var(--felt); color: var(--felt-ink);
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px); border: 6px solid #6b4b2a; }
.lb-line { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 10px; padding: 6px 0; font-family: ui-monospace, Menlo, monospace; font-size: .86rem; text-transform: uppercase; letter-spacing: .05em; }
.lb-line + .lb-line { border-top: 1px dashed rgba(255,255,255,.12); }
.lb-cue { color: #f1d27a; font-weight: 700; }
.lb-seen { overflow-wrap: anywhere; }
.lb-line.none { display: block; color: #c9c6b6; }
.hours { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 6px 0; padding: 8px; background: #1d1f22; border-radius: 8px; }
.hr-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 5px; color: #8d8b7c; text-align: center; font-size: .74rem; line-height: 1.15; }
.hr-dot { width: 14px; height: 14px; border-radius: 50%; background: #3b3d40; }
.hr-cell.given .hr-dot { box-shadow: 0 0 0 2px #8d8b7c; }
.hr-cell.on { color: #ffe9a8; }
.hr-cell.on .hr-dot { background: #ffcc4d; box-shadow: 0 0 10px rgba(255,204,77,.85); }
.hr-t { overflow-wrap: anywhere; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.slip { background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.slip h4 { margin: 0 0 4px; font-size: .95rem; }
.slip p { margin: 0; }
.none { color: var(--muted); font-style: italic; }
.recon { padding-left: 18px; }
.recon li { margin: 3px 0; }
.recon li.bad { color: var(--bad); font-weight: 600; }
.recon li.warn { color: var(--warn); }
.recon li.info { color: var(--info); }
.recon li.change { font-weight: 600; }
.recon li.same { color: var(--muted, inherit); }

/* Saved places */
.saved { list-style: none; padding: 0; margin: 10px 0 0; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hdot { width: 12px; height: 12px; border-radius: 50%; background: var(--v-place); flex: 0 0 auto; }
.hdot.v-deeply_liminal { background: var(--v-deep); }
.hdot.v-at_the_right_hour { background: var(--v-hour); }
.hinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hinfo b { overflow-wrap: anywhere; }
.hbtns { display: flex; gap: 6px; flex: 0 0 auto; }

.foot { max-width: 1060px; margin: 0 auto; padding: 10px 16px 40px; font-size: .86rem; color: var(--muted); }
.toasts { position: fixed; right: 12px; bottom: 12px; z-index: 20; display: flex; flex-direction: column; gap: 6px; max-width: min(92vw, 380px); }
.toast { padding: 9px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: .9rem; box-shadow: var(--shadow); transition: opacity .5s; }
.toast.err { background: var(--bad); color: #fff; }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }
:root[data-theme="dark"] .toast.err { color: #1a0d0c; }

/* api.html tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.tab { padding: 4px 10px; border-radius: 6px 6px 0 0; border: 1.5px solid var(--line); border-bottom: 0; background: var(--bg); color: var(--ink); font: inherit; font-size: .84rem; cursor: pointer; }
.tab.active { background: var(--paper); font-weight: 700; color: var(--accent); }

@media (max-width: 760px) {
  .two-col, .pair { grid-template-columns: 1fr; }
  .pickrow { grid-template-columns: 1fr; }
  .back-t { display: none; }
  .bar { gap: 6px; padding: 8px 10px; }
  .session .pill { padding: 4px 9px; }
  .lb-line { grid-template-columns: 1fr; gap: 2px; }
  .fob { width: 150px; min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }