@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --hud-green: #39ff8f;
  --hud-green-dim: #1c8a52;
  --hud-orange: #ff9130;
  --hud-red: #ff4655;
  --bg-deep: #050b10;
  --bg-panel: rgba(12, 26, 22, 0.85);
  --panel-border: rgba(57, 255, 143, 0.35);
  --text-main: #d9fbe8;
  --text-dim: #7fa695;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  color: var(--text-main);
  background: radial-gradient(circle at 50% 0%, #0e2a22, var(--bg-deep) 65%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- moving space backdrop ---- */
.starfield {
  position: fixed;
  inset: -400px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 85%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 90%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 25%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 55%, #fff 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.8;
  will-change: transform;
  animation: starfield-fly 22s linear infinite;
}
@keyframes starfield-fly {
  from { transform: translate(0, 0); }
  to   { transform: translate(-340px, 340px); }
}

.starfox-horizon {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.asteroid {
  position: absolute;
  left: -80px;
  width: var(--size, 40px);
  height: var(--size, 40px);
  opacity: var(--opacity, 0.4);
  animation: asteroid-drift var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.asteroid-spin {
  width: 100%;
  height: 100%;
  animation: asteroid-tumble var(--spin, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.asteroid-spin svg { display: block; width: 100%; height: 100%; }
.asteroid-spin polygon {
  fill: rgba(12, 26, 22, 0.6);
  stroke: var(--hud-green-dim);
  stroke-width: 1.4;
}
@keyframes asteroid-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 160px)); }
}
@keyframes asteroid-tumble {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(57, 255, 143, 0.03),
    rgba(57, 255, 143, 0.03) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ---- page layout ---- */
.page-wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 60px;
}

.hud-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-panel);
  border: 1px solid var(--panel-border);
  padding: 36px 32px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(57, 255, 143, 0.08), inset 0 0 60px rgba(0,0,0,0.4);
}
.hud-panel.wide { max-width: 860px; }

.corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--hud-green); }
.corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.callsign-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.toad-avatar-wrap { position: relative; flex-shrink: 0; width: 46px; height: 46px; }
.toad-avatar { filter: drop-shadow(0 0 6px rgba(57, 255, 143, 0.5)); }
.lock-reticle {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(57, 255, 143, 0.5);
  border-radius: 50%;
  animation: reticle-spin 6s linear infinite;
}
.lock-reticle::before, .lock-reticle::after {
  content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--hud-green);
}
.lock-reticle::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.lock-reticle::after { bottom: -3px; right: -3px; border-left: none; border-top: none; }
@keyframes reticle-spin { to { transform: rotate(360deg); } }

.auth-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.login-btn {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  padding: 5px 10px;
  flex-shrink: 0;
}
.login-btn:hover { color: var(--hud-green); border-color: var(--hud-green); }

/* Home button in the header. Same treatment as .login-btn -- matches the class
   name the lab / gambling hubs already use for theirs, so the header markup is
   identical across the estate. */
.logout-link {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  padding: 5px 10px;
  flex-shrink: 0;
}
.logout-link:hover { color: var(--hud-green); border-color: var(--hud-green); }

/* The header row never wrapped and .callsign carried the default min-width:auto,
   so it could not shrink below its longest word -- on a narrow phone the auth
   buttons ran past the right edge. Same fix as the hubs. */
.callsign-row { flex-wrap: wrap; }
.callsign { min-width: 0; }
.auth-controls { flex-wrap: wrap; }

.admin-console-btn { color: var(--hud-orange); border-color: var(--hud-orange); }
.admin-console-btn:hover { color: var(--hud-orange); border-color: var(--hud-orange); background: rgba(255, 145, 48, 0.12); }

.callsign {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--hud-orange);
  text-transform: uppercase;
}

h1 {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
  color: var(--hud-green);
  text-shadow: 0 0 12px rgba(57, 255, 143, 0.45);
}

.subtitle {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 22px;
  letter-spacing: 0.03em;
}

/* ---- console grid / cards ---- */
.console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.console-card {
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.console-card[hidden] {
  display: none;
}
.console-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 8px;
}
.console-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.console-icon { font-size: 1.1rem; flex-shrink: 0; }
.lock-icon { font-size: 0.85rem; flex-shrink: 0; opacity: 0.75; }
.console-name {
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--hud-green);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  flex-shrink: 0;
  color: var(--hud-green-dim);
}
.tag.stable { color: var(--hud-green); }
.tag.beta { color: var(--hud-orange); }
.tag.offline { color: var(--hud-red); }
.card-blurb { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-main); flex-grow: 1; }

/* ---- nav cards (home page signposts) ---- */
.nav-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.nav-card:hover, .nav-card:focus-visible {
  border-color: var(--hud-green);
  background: rgba(57, 255, 143, 0.08);
  transform: translateY(-2px);
}
.nav-card:active { transform: translateY(0); }

/* ---- comm-link transmission window ---- */
.comm-window {
  margin-top: 28px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.comm-portrait {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(57, 255, 143, 0.06);
  border-right: 1px solid var(--panel-border);
}
.comm-portrait svg { filter: drop-shadow(0 0 6px rgba(57, 255, 143, 0.5)); }
.comm-body { padding: 10px 12px; flex: 1; min-width: 0; }
.comm-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hud-orange);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.comm-label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hud-red); flex-shrink: 0;
  animation: comm-blink 1s steps(1) infinite;
}
@keyframes comm-blink { 50% { opacity: 0; } }
.comm-body p { margin: 0; font-size: 0.78rem; font-style: italic; color: var(--text-main); line-height: 1.4; }

/* ---- contact form ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.field-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hud-orange);
  margin-top: 14px;
}
.field-input {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  padding: 10px 12px;
  resize: vertical;
}
.field-input:focus {
  outline: none;
  border-color: var(--hud-green);
  box-shadow: 0 0 8px rgba(57, 255, 143, 0.2);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-form button.hud-btn { cursor: pointer; border: 1px solid var(--hud-green); }
.contact-form button.hud-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- report form ----
   The report page reuses .contact-form wholesale; these are the controls the
   contact form never needed. */
select.field-input {
  appearance: none;
  cursor: pointer;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--hud-green) 50%),
                    linear-gradient(135deg, var(--hud-green) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.field-input:disabled { opacity: 0.6; cursor: not-allowed; }
/* The dropdown list itself is painted by the OS, which ignores the panel
   background -- set it explicitly or the options render dark-on-dark. */
select.field-input option,
select.field-input optgroup { background: #0b1a16; color: var(--text-main); }
select.field-input optgroup { font-style: normal; color: var(--hud-orange); }

.type-row { display: flex; flex-wrap: wrap; gap: 8px; }
.type-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  padding: 9px 12px;
  font-size: 0.8rem;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  cursor: pointer;
}
.type-opt:has(input:checked) {
  border-color: var(--hud-green);
  box-shadow: 0 0 8px rgba(57, 255, 143, 0.18);
}
.type-opt input { accent-color: var(--hud-green); width: 15px; height: 15px; cursor: pointer; }
.field-optional { text-transform: none; letter-spacing: 0; opacity: 0.65; }

.tracker-note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: 0.75;
  margin: 14px 0 0;
}
.tracker-note a { color: var(--hud-green); }

/* ---- phone-sized touch targets ----
   Same convention as the tool subdomains: sizing lives inside the media query
   so desktop is untouched, and only touch-action is unconditional. */
.field-input, .type-opt, .contact-form button.hud-btn { touch-action: manipulation; }
@media (max-width: 560px) {
  .field-input,
  .type-opt,
  .back-btn,
  .contact-form button.hud-btn { min-height: 44px; }
  .back-btn { display: flex; align-items: center; justify-content: center; }
  textarea.field-input { min-height: 120px; }
  .type-row { flex-direction: column; }
}

/* ---- action buttons ---- */
.hud-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(57,255,143,0.18), rgba(57,255,143,0.06));
  border: 1px solid var(--hud-green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -3px 0 rgba(0,0,0,0.35);
  color: var(--hud-green);
  font-family: "Press Start 2P", "Consolas", monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.62rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.05s;
}
.hud-btn:hover { background: rgba(57, 255, 143, 0.28); }
.hud-btn:active { transform: translateY(2px); }

/* ---- status strip ---- */
.status-strip {
  margin-top: 18px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-strip .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hud-green);
  box-shadow: 0 0 6px var(--hud-green);
  flex-shrink: 0;
}

/* ---- bottom row: status strip + fun button side by side ---- */
.bottom-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bottom-row .status-strip { margin-top: 0; }

/* ---- fun rec room button (links out to fun.slippylabs.com) ---- */
.fun-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-block;
  font-family: inherit;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hud-green);
  background: rgba(57, 255, 143, 0.08);
  border: 1px solid var(--panel-border);
  padding: 7px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fun-btn:hover { border-color: var(--hud-green); background: rgba(57, 255, 143, 0.2); }

@media (max-width: 480px) {
  .page-wrap { padding: 24px 14px 40px; }
  .hud-panel { padding: 26px 18px; }
  .bottom-row { justify-content: center; }
  .fun-widget { margin-left: 0; }
}

/* ---- perf-lite -------------------------------------------------------------
   Toggled on <html> by the inline perf-lite snippet (low-power devices) or by
   the user's "reduce effects" preference. The starfield itself stays: it is a
   compositor transform now and costs essentially nothing. What this drops are
   the two effects that force full-viewport work every frame -- mix-blend-mode
   compositing and backdrop-filter blur. */
.perf-lite { --bg-panel: rgba(12, 26, 22, 0.95); }
.perf-lite .scanlines { mix-blend-mode: normal; opacity: 0.4; }
.perf-lite .starfield,
.perf-lite .asteroid,
.perf-lite .asteroid-spin { animation: none; }
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- privacy / legal link in the bottom row --------------------------------
   Sits between .status-strip and .fun-btn. .fun-btn keeps margin-left:auto, so
   it stays pinned right and this link rides beside the status strip. Sized for
   a 44px tap target inside the phone media query below, same convention as the
   .field-input/.type-opt block above. */
.legal-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 7px 10px;
  border: 1px solid transparent;
  touch-action: manipulation;
  transition: color 0.15s, border-color 0.15s;
}
.legal-link:hover,
.legal-link:focus-visible { color: var(--hud-green); border-color: var(--panel-border); }

/* Inline variant for the bottom of the form pages, where it reads as a
   sentence rather than a control -- no border box, no uppercasing. */
.legal-note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: 0.75;
  margin: 10px 0 0;
}
.legal-note a { color: var(--hud-green); }

/* ---- privacy page body copy ------------------------------------------------
   The panel had no prose typography before this page: only .subtitle,
   .card-blurb and .tracker-note existed. Modelled on .tracker-note, scaled up
   to be readable at length. Headings deliberately stay on the monospace body
   stack rather than Press Start 2P -- the pixel font renders 8 as S and 0 as O,
   which would wreck "14 days" and the effective date. */
/* A long document needs a wider column than the 460px form panel, but not the
   860px of the hub grid -- 680px lands at ~80 monospace characters per line. */
.hud-panel.legal { max-width: 680px; }

.legal-body {
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-main);
}
.legal-body h2 {
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hud-green);
  margin: 30px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-border);
}
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 20px; }
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--text-main); font-weight: 700; }
.legal-body a { color: var(--hud-green); }
.legal-body code {
  font-family: inherit;
  font-size: 0.95em;
  color: var(--hud-green);
  background: rgba(57, 255, 143, 0.08);
  border: 1px solid var(--panel-border);
  padding: 0 4px;
  /* long tokens like the Permissions-Policy value must not widen the page */
  overflow-wrap: anywhere;
}
.legal-lead {
  color: var(--text-dim);
  border-left: 2px solid var(--panel-border);
  padding-left: 12px;
  margin: 0 0 8px;
}
.legal-updated { color: var(--hud-orange); }

@media (max-width: 480px) {
  .legal-link { min-height: 44px; padding: 7px 12px; }
  .legal-body { font-size: 0.8rem; }
  .legal-body h2 { margin-top: 26px; }
}

/* ---- signed-in status strip (weather + next events) -----------------------
   Sits above the card grid and only exists for a signed-in visitor. The
   [hidden] rule is stated with the id as well as the attribute: `hidden` is a
   presentation hint that ANY later display declaration beats, and .deck-strip
   below sets display:grid. Without this the strip would be laid out for
   everyone, signed in or not.
   -------------------------------------------------------------------------- */
#deck-strip[hidden] { display: none !important; }

.deck-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 12px;
  margin: 0 0 16px;
}
.ds-panel {
  min-width: 0;
  border: 1px solid var(--panel-border, rgba(57, 255, 143, 0.35));
  background: rgba(0, 0, 0, 0.28);
  padding: 10px 13px;
}
a.ds-panel { text-decoration: none; color: inherit; display: flex; }
a.ds-panel:hover { border-color: var(--hud-green, #39ff8f); background: rgba(57, 255, 143, 0.07); }

.ds-weather { align-items: center; gap: 12px; }
.ds-icon { font-size: 1.95rem; line-height: 1; flex: 0 0 auto; }
.ds-wx-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Plain monospace, never Press Start 2P: that face renders 0 as O and 8 as S,
   and every character in here is a number. */
.ds-temp {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--hud-green, #39ff8f);
}
.ds-cond { font-size: 0.78rem; color: var(--text-main, #d9fbe8); }
.ds-meta { font-size: 0.68rem; color: var(--text-dim, #7fa695); }
.ds-setup .ds-cond { color: var(--hud-orange, #ff9130); }

.ds-agenda { display: flex; flex-direction: column; gap: 5px; }
.ds-agenda-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-today {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hud-orange, #ff9130);
}
.ds-more {
  font-size: 0.7rem;
  color: var(--hud-green, #39ff8f);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
}
.ds-more:hover { text-decoration: underline; }
.ds-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-ev { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ds-dot { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid; }
/* A generated day (holiday, moon phase, launch) carries its glyph instead of a
   dot. Same 7px box so both kinds of row line up in the same column, and the
   glyph is centred in it rather than sitting on the text baseline. */
.ds-glyph {
  width: 7px;
  flex: 0 0 auto;
  font-size: 0.66rem;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-when {
  flex: 0 0 auto;
  min-width: 78px;
  font-size: 0.68rem;
  color: var(--text-dim, #7fa695);
}
.ds-ev-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--text-main, #d9fbe8);
  text-decoration: none;
  min-height: 22px;
  display: flex;
  align-items: center;
}
.ds-ev-title:hover { color: var(--hud-green, #39ff8f); text-decoration: underline; }
.ds-empty { font-size: 0.72rem; color: var(--text-dim, #7fa695); margin: 0; line-height: 1.55; }
.ds-empty a { color: var(--hud-green, #39ff8f); }

/* Event colours, matching calendar.slippylabs.com's palette. */
.ds-dot.c-green  { border-color: #1c8a52; background: #39ff8f; }
.ds-dot.c-orange { border-color: #a55e18; background: #ff9130; }
.ds-dot.c-cyan   { border-color: #1b7d8f; background: #4fe6ff; }
.ds-dot.c-violet { border-color: #6c4bb8; background: #c3a6ff; }
.ds-dot.c-red    { border-color: #a52833; background: #ff4655; }

/* The glyph takes the same palette as ink rather than as fill. */
.ds-glyph.c-green  { color: #39ff8f; }
.ds-glyph.c-orange { color: #ff9130; }
.ds-glyph.c-cyan   { color: #4fe6ff; }
.ds-glyph.c-violet { color: #c3a6ff; }
.ds-glyph.c-red    { color: #ff4655; }

@media (max-width: 720px) {
  .deck-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ds-when { min-width: 72px; }
}

/* The rows above are sized for a mouse. A thumb still needs 44px, so restore it
   at phone width -- same split the rest of the estate uses, where every 44px
   floor lives inside a media query and desktop is deliberately tighter. Must
   stay after the 720px block: equal specificity, so source order decides. */
@media (max-width: 560px) {
  .ds-ev-title, .ds-more { min-height: 44px; }
  .ds-panel { padding: 12px 13px; }
}

/* ---- phone-sized touch targets on the home page ----
   Found by tools/audit_home.py while auditing the status strip: the login chip
   (24px tall) and the Random Clip button (30px) predate this and were missed by
   the 2026-08-13 sitewide pass, which covered the tool and game subdomains but
   not this page. Both are real controls a thumb has to hit. Sizing lives inside
   the media query, so desktop is unchanged; last block in the file so nothing
   later can beat it. */
@media (max-width: 560px) {
  .login-btn,
  .fun-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Both sit in flex rows that would otherwise squeeze them narrower than a
     thumb; `flex-shrink` defeats a min-width on its own. */
  .login-btn { flex-shrink: 0; }
  .fun-btn { min-width: 44px; }
}