/* Palette and type match techshin-runner's house style exactly (navy/gold,
   -apple-system stack) so Scratchpad reads as the same product family. */
:root {
  --navy: #13243a;
  --gold: #c79a3c;
  --heading: var(--navy);
  --ink: #27384b;
  --rule: #dfe6ec;
  --paper: #f5f7f9;
  --surface: #fff;
  --surface-alt: #eef2f5;
  --surface-alt-hover: #e3e8ec;
  --mute: #6a7581;
  --mute2: #5f6c79;
  --danger: #9e2019;
  --danger-bg: #fdecea;
  --danger-border: #f5c6c2;
  --ok: #1b5e20;
  --ok-bg: #eef8f0;
  --ok-border: #b2dfc0;
  --tag-bg: #e8f0fe;
  --tag-fg: #1c3d6e;
  --tag-inactive-bg: #f3f4f6;
  --pin-bg: #fbf3e0;
  --pin-border: #e8d19d;
  --pin-fg: #8a6a24;
  --shadow-box: 0 8px 40px rgba(0, 0, 0, .12);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .06);
}

/* Dark mode: an explicit data-theme="dark" attribute (set by the inline
   head script from localStorage, or the system prefers-color-scheme on
   first visit — see theme.js) rather than a bare media query, so the
   toggle button can override the system setting per-visitor. Only the
   values that need to flip are redeclared; --gold, --danger*, --ok* etc.
   read fine unchanged on a dark background. */
:root[data-theme="dark"] {
  --heading: #eef2f7;
  --ink: #cfd8e2;
  --rule: #30425a;
  --paper: #0f1928;
  --surface: #17253a;
  --surface-alt: #1f3049;
  --surface-alt-hover: #28394f;
  --mute: #8ea0b3;
  --mute2: #a3b3c2;
  --danger: #ff9b8f;
  --danger-bg: #3a1a18;
  --danger-border: #6e2c26;
  --ok: #86dd95;
  --ok-bg: #16301c;
  --ok-border: #2c5233;
  --tag-bg: #1c3555;
  --tag-fg: #a9c6f5;
  --tag-inactive-bg: #26374e;
  --pin-bg: #332a14;
  --pin-border: #5c4a1f;
  --pin-fg: #e0b552;
  --shadow-box: 0 8px 40px rgba(0, 0, 0, .5);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
body, .card, .box, input, textarea, button, .btn {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
h1, h2, h3 { color: var(--heading); line-height: 1.25; }
a { color: var(--heading); }
.muted { color: var(--mute); font-size: 0.9em; }

.theme-toggle, .theme-toggle-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
}
.theme-toggle svg, .theme-toggle-fixed svg { display: block; }

.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.theme-toggle:active { background: rgba(255, 255, 255, .16); }

.theme-toggle-fixed {
  position: fixed;
  top: 14px;
  right: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--mute2);
  width: 32px;
  height: 32px;
  box-shadow: var(--shadow-card);
}
.theme-toggle-fixed:hover { background: var(--surface-alt); color: var(--ink); }
.theme-toggle-fixed:active { background: var(--surface-alt-hover); }

.theme-toggle:focus-visible, .theme-toggle-fixed:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* One visible focus ring for every interactive control that would
   otherwise fall back to a low-contrast UA outline (keyboard users). */
button:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
.subnav-tab:focus-visible, .session-row:focus-visible, .scratchpad-link:focus-visible,
.profile-menu-item:focus-visible, .crumb-trail a:focus-visible, .terms-link:focus-visible,
a.wm:focus-visible, .profile-toggle:focus-visible ~ .profile-chip-btn {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Bigger tap targets for the small icon controls on touch devices. */
@media (pointer: coarse) {
  .icon-btn, .pin-toggle button { padding: 9px 8px; }
}
/* Off-screen but announced — used for the copy live-region. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Brief green confirmation after a successful copy. */
.icon-btn.copied { color: var(--ok); }

/* App-shell pages: header bar + content wrap (matches Runner's ADMIN_PAGE) */
header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 2px solid var(--gold);
  background: var(--navy);
  color: #fff;
}
header .mark { font-weight: 700; letter-spacing: 2px; font-size: 13px; flex-shrink: 0; }

/* Wordmark: "TECH" + "SHIN" in the two-tone treatment, a hairline
   separator, then the product name — matches techshin-map's own
   chrome-logo pattern (.wm-tech/.wm-shin/.wm-sep) so the family reads as
   one product line. .wm-light swaps TECH to the theme-aware heading color
   for use on a white/surface background instead of the navy header bar. */
.wm { display: inline-flex; align-items: center; line-height: 1; flex-shrink: 0; }
.wm-tech, .wm-shin {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}
.wm-tech { color: #faf7f2; }
.wm-shin { color: var(--gold); }
.wm-sep { width: 1px; height: 13px; background: rgba(199, 154, 60, .45); margin: 0 8px; display: inline-block; }
.wm-product {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--gold);
  line-height: 1;
}
.wm.wm-light .wm-tech { color: var(--heading); }
header .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
header .sp { flex: 1; min-width: 0; }
header a.lnk { color: #fff; opacity: .7; font-size: 13px; text-decoration: none; }
header a.lnk:hover { opacity: 1; }
/* Header row that pairs a heading with an action (copy link, delete, etc.) —
   wraps instead of overflowing once the heading + buttons can't fit one line. */
.hd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 24px 0 28px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.wrap { max-width: 720px; margin: 32px auto; padding: 0 20px 80px; }
.wrap.narrow { max-width: 480px; }
.wrap.wide { max-width: 1040px; }

@media (max-width: 768px) {
  .wrap { margin: 20px auto; padding: 0 14px 60px; }
  .box { padding: 28px 22px; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Two-column Session layout: entries stream (main) + persistent facilitator
   message column (side) — stacks on narrow viewports. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
}
/* Sticky, but capped to the viewport and scrollable inside — otherwise a
   long Facilitator history taller than the screen would have its lower
   half stuck off-screen and unreachable. */
.col-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.card.current-message { border: 1px solid var(--gold); border-top: 3px solid var(--gold); }

/* A titled, bordered group — distinguishes "Facilitator" and
   "Contributions" as two distinct sections, not just two loose lists. */
.panel {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 22px 24px;
}
.panel > h3:first-child { margin-top: 0; }

/* Auth pages: centered card (matches Runner's LOGIN_PAGE/VERIFY_PAGE) */
body.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.box {
  background: var(--surface);
  border-radius: 4px;
  padding: 36px 40px;
  width: 420px;
  max-width: 92vw;
  box-shadow: var(--shadow-box);
}
.box.center { text-align: center; }
.logo { font-weight: 700; letter-spacing: 2px; font-size: 13px; color: var(--heading); margin-bottom: 22px; }
.box .sub { color: var(--mute); font-size: 13px; margin-bottom: 28px; }

.card {
  background: var(--surface);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.card h3 { margin: 0 0 14px; font-size: 15px; }

/* "Your Scratchpads" session list — a proper row (icon, hover fill, an
   arrow that slides in) instead of plain links separated by a hairline
   border, which read as a bare bulleted list rather than something
   clickable. */
.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 -10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
}
.session-row:hover { background: var(--surface-alt); }
.session-row-icon { color: var(--gold); flex-shrink: 0; display: flex; }
.session-row-name { flex: 1; font-weight: 600; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row-arrow {
  color: var(--mute);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
  flex-shrink: 0;
}
.session-row:hover .session-row-arrow { opacity: 1; transform: translateX(0); }
/* Richer row (scratchpad → sessions list): name plus a one-line preview
   of the latest prompt and when it was posted, so the list is scannable
   when you're hunting for a particular session. */
.session-row--rich { align-items: flex-start; padding: 12px 10px; }
.session-row--rich .session-row-icon { margin-top: 2px; }
.session-row--rich .session-row-arrow { margin-top: 2px; }
.session-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-row-body .session-row-name { flex: none; }
.session-row-preview { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row-meta { font-size: 12px; color: var(--mute); }
.session-row + .session-row { border-top: 1px solid var(--rule); }
.scratchpad-link { color: var(--heading); text-decoration: none; }
.scratchpad-link:hover { color: var(--gold); }

/* Uppercase field-label styling — scoped to labels inside a .field so it
   doesn't leak onto other <label> elements (the profile chip and the
   auto-update toggle are labels too, and were being shouted in caps). */
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.field { margin-bottom: 14px; }
/* Radio options inside a .field are choices, not field labels — undo the
   uppercase/block field-label styling so they read as normal inline text. */
.field .radio-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 18px 0 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
}
input:focus, textarea:focus {
  outline: 2px solid var(--gold);
  border-color: var(--gold);
}
textarea { resize: vertical; min-height: 5em; }

button, .btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background: var(--gold);
  color: #1a1300;
  cursor: pointer;
  /* Subtle elevation so the primary CTA sits in the same crafted,
     card-like language as the rest of the light UI rather than reading
     as a flat block of colour. */
  box-shadow: 0 1px 2px rgba(19, 36, 58, .16);
  transition: filter .12s ease, box-shadow .12s ease, transform .07s ease;
}
button:hover, .btn:hover { filter: brightness(1.04); box-shadow: 0 3px 8px rgba(199, 154, 60, .32); }
button:active, .btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(19, 36, 58, .16); }
/* Secondary/quiet buttons stay flat — the elevation is reserved for the
   primary action so it remains the clear focal point. Icon-only and
   theme-toggle buttons are transparent, so a shadow would float with no
   surface behind it — they must stay flat too. */
button.ghost, .btn.ghost, button.sm, button.small, .btn.small, button.danger, .btn.danger,
.icon-btn, .theme-toggle, .theme-toggle-fixed, .profile-menu-item, .pin-toggle button {
  box-shadow: none;
}
button.ghost:active, .btn.ghost:active, button.danger:active, .btn.danger:active { transform: translateY(1px); }
button.ghost, .btn.ghost, button.sm {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
button.ghost:hover, .btn.ghost:hover, button.sm:hover { background: var(--surface-alt-hover); filter: none; }
button.small, .btn.small { padding: 6px 12px; font-size: 0.85em; }
button.danger, .btn.danger, button.sm.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
button.danger:hover, .btn.danger:hover { filter: none; background: var(--danger-bg); }

.entry { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.entry:last-child { border-bottom: none; }
/* flex-wrap + min-width:0 so a long participant_email (an unbroken string
   — an address, no natural break point) can't force this row wider than
   its card and push the action icons out past the edge or off-screen. */
.entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.entry-name { font-weight: 600; color: var(--heading); min-width: 0; overflow-wrap: anywhere; }
.entry-name .tag { vertical-align: middle; margin-left: 4px; }
.entry-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* A dedicated "Pinned" section — separate from the regular stream —
   rather than a small icon buried next to the name, so what's pinned is
   obvious at a glance instead of something you have to notice per-row.
   Gold-family tint throughout (not the blue --tag-bg — that's a different
   component's color, mixing the two read as inconsistent), consistently
   applied to both entries and facilitator messages even though those two
   use different base components (.entry vs .card) — the .card override
   below strips its own white background/shadow so it blends into the box
   the same way .entry already does, instead of floating on top of it. */
.pinned-box {
  border: 1px solid var(--pin-border);
  background: var(--pin-bg);
  border-radius: 4px;
  padding: 4px 16px 8px;
  margin-bottom: 16px;
}
.pinned-box .entry:last-child, .pinned-box .card.history-item:last-child { margin-bottom: 0; }
.pinned-box-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pin-fg);
  padding-top: 10px;
}
.pinned-item.entry { border-bottom-color: var(--pin-border); }
.pinned-box .card.history-item {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--pin-border);
}
.pinned-box .card.history-item:last-child { border-bottom: none; }

.icon-btn {
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 1em;
}
.icon-btn:hover { color: var(--gold); }
/* Pin/unpin is just the last control in the action row: a pin icon to
   pin, an X to unpin (the icon states the action). Inline with
   copy/link/delete — no separate corner slot, no vertical spacing to
   manage. Gold to read as the "featured" control; the X warns red on
   hover since clicking it removes the pin. */
.pin-toggle { display: inline-flex; margin: 0; }
.pin-toggle .icon-btn { display: inline-flex; align-items: center; color: var(--pin-fg); }
.pin-toggle .icon-btn:hover { color: var(--gold); }
.pin-toggle--on .icon-btn:hover { color: var(--danger); }

.banner {
  display: none;
  width: 100%;
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: center;
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}
.banner.show { display: block; }

.msg { background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 4px; padding: 12px 14px; font-size: 13px; color: var(--ok); margin-bottom: 16px; }
.errmsg { background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 4px; padding: 12px 14px; font-size: 13px; color: var(--danger); margin-bottom: 16px; }

/* Freshness fade applies only to the timestamp text itself — never the
   message, the name, or the card as a whole. Full color for the first
   minute, faded after — computed client-side from data-posted-at-ms (see
   live.js), recalculated every ~15s and whenever content refreshes. */
.rel-time { transition: opacity .3s; }
.rel-time.stale { opacity: .5; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 13px; vertical-align: top; }
th { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); font-weight: 600; }

.tag { display: inline-block; background: var(--tag-bg); color: var(--tag-fg); border-radius: 4px; padding: 1px 7px; font-size: 12px; }
.tag.inactive { background: var(--tag-inactive-bg); color: var(--mute); }

/* Audit "view in context" page: the item someone followed a link to see,
   picked out from the rest of the Session's stream around it. */
.audit-highlight { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ── Admin skin (body.admin-new — every /admin/* page) ────────────────
   A brighter, card-grid take on the admin section — navy/gold palette,
   generous whitespace, a two-tier header (topbar + subnav) instead of
   forms stacked in a single column. Scoped to body.admin-new rather than
   applied globally so the participant-facing pages keep their own,
   separately-tuned look. */
:root:not([data-theme="dark"]) body.admin-new { --paper: #f6f8fb; }
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.topbar .mark { font-weight: 700; letter-spacing: 2px; font-size: 13px; flex-shrink: 0; }
.topbar .sp { flex: 1; min-width: 0; }
.topbar a.lnk { color: #fff; opacity: .75; font-size: 13px; text-decoration: none; white-space: nowrap; }
.topbar a.lnk:hover { opacity: 1; }

.profile-chip { position: relative; display: flex; align-items: center; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .25); flex-shrink: 0; }
/* Visually hidden but still in the tab order and focusable, so the
   profile menu can be opened with the keyboard (Space/Enter) — display:none
   would drop it out of the tab order entirely. */
.profile-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.profile-chip-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 4px;
  color: inherit;
}
.profile-chip-btn:hover { background: rgba(255, 255, 255, .08); }
.profile-avatar {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--gold);
  color: #1a1300;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-name { font-size: 13px; opacity: .9; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-caret { font-size: 9px; opacity: .65; }

.profile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  min-width: 244px;
  padding: 6px;
  z-index: 30;
}
.profile-toggle:checked ~ .profile-menu { display: block; }
.profile-menu-name {
  padding: 8px 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  word-break: break-word;
}
.profile-menu-email {
  padding: 2px 10px 8px;
  font-size: 12px;
  color: var(--mute);
  word-break: break-all;
}
/* Inline "your name" editor in the participant profile menu — one field
   shared by their comments and this menu (see set_display_name route). */
.profile-menu-nameform { padding: 0 10px 8px; }
.pmn-label { display: block; font-size: 11px; color: var(--mute); margin-bottom: 5px; }
.pmn-row { display: flex; gap: 6px; }
.pmn-row input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 6px 8px;
  font-size: 13px;
}
.pmn-row button.small { flex-shrink: 0; padding: 6px 10px; }
.profile-menu-item {
  display: block;
  padding: 8px 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  border-radius: 4px;
}
.profile-menu-item:hover { background: var(--surface-alt); }
.profile-menu-sep { height: 1px; background: var(--rule); margin: 4px 0; }
.profile-menu-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.profile-menu-check:hover { background: var(--surface-alt); }

.subnav { background: var(--surface); border-bottom: 1px solid var(--rule); }
.subnav-inner { display: flex; align-items: center; gap: 4px; padding: 0 24px; overflow-x: auto; }
/* Second, secondary bar under the tab row — "where am I" — left-aligned,
   visually a notch quieter than the primary navy-adjacent tab bar above
   it so the two don't read as one crowded row. Also used standalone (no
   tab row above it) on the participant side. */
.crumb-row { background: var(--paper); }
.crumb-row .subnav-inner { justify-content: space-between; padding-top: 2px; padding-bottom: 2px; }

/* A real breadcrumb trail — every ancestor a link, the current page
   plain text, "/" between. Not .subnav-tab (that's for switching
   between sibling sections; this is "how did I get here"). */
.crumb-trail { display: flex; align-items: center; gap: 7px; padding: 12px 0; font-size: 13px; overflow: hidden; min-width: 0; }
.crumb-trail a { color: var(--mute); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.crumb-trail a:hover { color: var(--heading); }
.crumb-trail .crumb-sep { color: var(--mute); flex-shrink: 0; }
.crumb-trail .crumb-current {
  color: var(--heading);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Same look as a crumb link but not clickable — used for an ancestor
   crumb that has no destination (e.g. an anonymous hidden-link visitor
   who has no "Your Scratchpads" list to drill through). */
.crumb-trail .crumb-muted { color: var(--mute); white-space: nowrap; flex-shrink: 0; }
.crumb-row .copy-link-inline { flex-shrink: 0; }
.profile-menu-copy { display: none; }
@media (max-width: 768px) {
  .crumb-row .copy-link-inline { display: none; }
  .profile-menu-copy { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; }
}
.subnav-tab {
  display: inline-block;
  padding: 14px 4px;
  margin-right: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav-tab:hover { color: var(--heading); }
.subnav-tab.active { color: var(--heading); border-bottom-color: var(--gold); }

/* Same bar, but for pages with nothing to switch between (the
   participant side has no multi-page nav like admin's Scratchpads/Users/
   Audit tabs) — just an "you're looking at X" advisory, not a menu. Same
   height/padding as .subnav-tab so it lines up when paired with one
   (e.g. the "← Your Scratchpads" back-link), but no hover/active state
   since it isn't interactive. */
.crumb-advisory {
  padding: 14px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin: 36px 0 28px;
}

.dash-head .eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.dash-head .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); display: inline-block; }
.dash-head h1 { margin: 0 0 6px; font-size: 26px; }
.rename-row { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.rename-row input[type="text"] { font-size: 20px; padding: 4px 8px; }
.new-scratchpad-form { display: flex; gap: 8px; }
.new-scratchpad-form input { width: 220px; }

/* Small stroke icons — clock/shield/users, matching the theme-toggle's
   sun/moon in weight so the whole admin speaks one icon language instead
   of mixing in emoji. Sized and muted via this wrapper rather than baked
   into each inline SVG, so color/spacing stays consistent everywhere. */
.ic { display: inline-flex; vertical-align: -3px; margin-right: 5px; opacity: .6; }
.ic svg { display: block; }

/* Section headers within a new-admin page (e.g. "Scratchpad-level
   access") — icon + title + a hairline rule to actually separate one
   section from the next, instead of headings floating in open space. */
.section-title {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 36px 0 16px;
}
.section-title h2, .section-title h3 { margin: 0; font-size: 15px; white-space: nowrap; display: flex; align-items: center; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

body.admin-new table tr:nth-child(even) td { background: var(--surface-alt); }
body.admin-new table th, body.admin-new table td { padding: 11px 14px; }

/* Access overview — one table per section, grants grouped under each
   person/domain: the email/domain shows once (bold) on its first row, a
   heavier rule separates one group from the next, and the whole thing
   reads as a single list rather than a stack of boxes. Zebra striping is
   turned off here so it doesn't fight the grouping. */
/* Fixed layout with matching column widths so the People and Domains
   tables line up column-for-column when scanning down the page. */
.access-table { table-layout: fixed; }
.access-table th:nth-child(1), .access-table td:nth-child(1) { width: 32%; }
.access-table th:nth-child(3), .access-table td:nth-child(3) { width: 118px; }
.access-table th:nth-child(4), .access-table td:nth-child(4) { width: 104px; }
.access-table .who-cell { font-weight: 600; color: var(--heading); word-break: break-word; vertical-align: top; }
body.admin-new .access-table tr:nth-child(even) td { background: transparent; }
.access-table tr.grp-start:not(:first-child) td { border-top: 2px solid var(--rule); }
.access-table tr:last-child td { border-bottom: none; }
.access-table td form { margin: 0; }

.scratchpad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.scratchpad-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.scratchpad-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); border-color: var(--accent); }
/* Complementary "fresh" accents — deliberately kept OUT of the topbar/CTA
   (those stay navy/gold, that's the brand mark), used only for per-card
   variety so the dashboard doesn't read as one more heavy navy surface.
   .accent-brand is navy/gold itself, folded into the same rotation so the
   mark still shows up regularly rather than disappearing. */
.accent-brand { --accent: var(--navy); --accent-fg: var(--gold); --accent-tint: var(--tag-bg); --accent-tint-fg: var(--tag-fg); }
.accent-teal   { --accent: #2f8f98; --accent-fg: #fff; --accent-tint: #e3f3f4; --accent-tint-fg: #1f6871; }
.accent-coral  { --accent: #c96a4e; --accent-fg: #fff; --accent-tint: #fbe9e3; --accent-tint-fg: #9c4c34; }
.accent-sage   { --accent: #4a9b6e; --accent-fg: #fff; --accent-tint: #e6f5ec; --accent-tint-fg: #337752; }
:root[data-theme="dark"] .accent-teal  { --accent: #58b7c1; --accent-tint: #16343a; --accent-tint-fg: #8fd3db; }
:root[data-theme="dark"] .accent-coral { --accent: #e0876c; --accent-tint: #3a241d; --accent-tint-fg: #f0ac96; }
:root[data-theme="dark"] .accent-sage  { --accent: #6cc493; --accent-tint: #16351f; --accent-tint-fg: #9adcb6; }

/* Owner marker on a Scratchpad tile — a quiet "You" on your own, a
   coloured chip naming the other admin on Scratchpads someone else made,
   so a superadmin can tell them apart at a glance. */
.sc-owner { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; color: var(--mute); max-width: 100%; }
.sc-owner svg { flex-shrink: 0; opacity: .8; }
.sc-owner--other {
  color: var(--accent-tint-fg);
  background: var(--accent-tint);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.sc-body { flex: 1; min-width: 0; }
/* Clamp the name to two lines (ellipsis + full text on hover via the
   title attr) and reserve that two-line height even for short names, so
   the meta row below always sits at the same place — tiles stay a
   uniform height regardless of how long the Scratchpad name is. */
.sc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.sc-meta { font-size: 12px; color: var(--mute); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.sc-meta-chip {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-tint-fg);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 2px;
}
.sc-delete { position: relative; z-index: 2; flex-shrink: 0; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (max-width: 768px) {
  .topbar { padding: 10px 14px; }
  .profile-name { display: none; }
  .subnav-inner { padding: 0 14px; }
  .dash-head { align-items: flex-start; }
  .new-scratchpad-form { width: 100%; }
  .new-scratchpad-form input { flex: 1; width: auto; }
}

@media (max-width: 480px) {
  /* Narrow phones: wordmark + theme toggle + toggle-link + profile chip
     doesn't fit on one line at full size (measured ~410px of content
     against a 375px viewport). Shrinking the wordmark to just "TECH SHIN"
     (dropping the separator + serif product name) claws back ~90px —
     enough to fit without hiding or reflowing any actual control, so
     the profile dropdown and everything else in the row stay exactly
     where they are and stay fully usable. */
  .topbar { gap: 6px; padding: 10px; }
  .topbar .wm-sep, .topbar .wm-product { display: none; }
}

footer {
  text-align: center;
  padding: 20px 20px 28px;
  margin-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--mute);
}
footer a { color: var(--mute); }
footer a:hover { color: var(--heading); }
footer .terms-link { text-decoration: underline; }

/* First-visit terms notice — a non-blocking bar pinned to the bottom,
   shown once per browser (see terms.js). */
.terms-pop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 14px;
  /* Clear the iOS home indicator; terms.js lifts the whole bar above the
     Safari toolbar via the visual viewport, this covers browsers without it. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.terms-pop--in { opacity: 1; transform: translateY(0); }
.terms-pop--hide { opacity: 0; transform: translateY(16px); }
.terms-pop-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-box);
}
.terms-pop-text { flex: 1; font-size: 13px; line-height: 1.5; }
.terms-pop-text a { color: var(--gold); }
.terms-pop-ok { flex-shrink: 0; }
@media (max-width: 560px) {
  .terms-pop-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .terms-pop-ok { width: 100%; }
}

/* Terms page body copy. */
.legal h3 { margin: 22px 0 6px; font-size: 15px; color: var(--heading); }
.legal p { margin: 0 0 10px; line-height: 1.6; color: var(--ink); }

/* Auth "box" pages center their single card with body-level flexbox, so a
   normal in-flow footer would get vertically centered along with it —
   pin it to the viewport bottom instead. */
.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 12px 20px;
  font-size: 12px;
  color: var(--mute);
}
.footer-fixed a { color: var(--mute); }
.footer-fixed a:hover { color: var(--heading); }