/* Science Lock — OCEAN
 *
 * The prototype design (#9's attached ocearch_science_lock.html), ported onto
 * the v1 app's components. Tokens, type scale, chip and button vocabulary,
 * card treatment and the wave background all come from that file; the class
 * names are this app's, because the behaviour underneath is not the
 * prototype's — verdicts act on an item *phase*, and there is no quest-level
 * approve. Where the prototype had no counterpart (stages, phase verdicts,
 * blast radius, the undo countdown) the styling extends its language rather
 * than inventing a second one.
 *
 * `slate.css` is the theme the v1 app was first built in and still ships, so
 * the two can be compared rather than argued about. See src/lib/theme.js.
 */

/* CCMonologous — the pal's own face, used for pal names only (Andrew,
 * 2026-08-18). Served from the PostPals CDN; `font-display: swap` keeps the
 * name readable in Montserrat until it lands, and `--body` is the fallback so
 * a blocked request degrades rather than disappearing.
 */
@font-face {
  font-family: "CCMonologous";
  src: url("https://cdn.postpalsworld.com/fonts/ccmonologous/CCMonologous-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CCMonologous";
  src: url("https://cdn.postpalsworld.com/fonts/ccmonologous/CCMonologous-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CCMonologous";
  src: url("https://cdn.postpalsworld.com/fonts/ccmonologous/CCMonologous-Italic.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "CCMonologous";
  src: url("https://cdn.postpalsworld.com/fonts/ccmonologous/CCMonologous-BoldItalic.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --deep: #001828;
  --mid: #002b45;
  --bright: #0077b6;
  --light: #00b4d8;
  --foam: #90e0ef;
  --sand: #f5e6c8;
  --orange: #ff6b35;
  --orange-dk: #cc4a15;
  --white: #fff;

  --success: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;

  --card-bg: rgba(0, 26, 48, 0.96);
  --border: rgba(0, 180, 216, 0.3);
  --radius: 14px;
  --radius-sm: 8px;

  /* Status colours, named for the model rather than the palette, so the
     status vocabulary reads the same in both themes. */
  --approved: var(--success);
  --in-review: var(--light);
  --needs-change: var(--warn);
  --blocked: rgba(255, 255, 255, 0.55);
  --pending: rgba(144, 224, 239, 0.74);

  /* ---- TYPE -------------------------------------------------------------
   * Andrew, 2026-08-17: "the fonts are too small ... use the same fonts we
   * use in the platform app", with the platform's scale.
   *
   * THIS IS THE WHOLE TYPE DECISION. Every font-family in this file resolves
   * to --stack and every font-size to one of the four steps below, so
   * reverting to the prototype's type is editing this block and nothing else:
   *
   *     --stack:  "Barlow", system-ui, sans-serif
   *     --display: "Bebas Neue", "Barlow Condensed", sans-serif
   *     --label:   "Barlow Condensed", sans-serif
   *     --note 9px  --small 11px  --normal 13px  --large 26px
   *
   * and restoring the Google Fonts <link> in app/index.html. Or just revert
   * the commit — it touches those two files only.
   *
   * The tokens stay distinct because the roles still differ even when the
   * family does not.
   */
  --stack: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Montserrat throughout (Andrew, 2026-08-18: "i think montserrat font is
     good for base font"). The roles stay separate tokens because they still
     differ in size and weight, and so one of them can move again without
     touching the others. The platform stack is the fallback in each, so a
     blocked font request degrades to the system face rather than to serif. */
  --display: "Montserrat", var(--stack);
  /* Pal names only — the shark's own voice on the page. */
  --pal: "CCMonologous", "Montserrat", var(--stack);
  /* The wordmark only. Bebas Neue ships one weight and is caps-only, so it is
     set at 400 and given its own size rather than inheriting the text scale. */
  --wordmark: "Bebas Neue", var(--display);
  --label: "Montserrat", var(--stack);
  --body: "Montserrat", var(--stack);

  /* The platform app's type scale. Everything here resolves to one of these
     four — the prototype's 9px labels were unreadable in a tool people work
     in all day. */
  --note: 11.5px;    /* metadata, chips, field labels */
  --small: 13px;     /* item, slot and phase names */
  --normal: 14px;    /* body copy */
  --large: 25px;     /* page and section headings */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body);
  color: #fff;
  min-height: 100vh;
  /* The prototype's depth gradient. The animated waves are a fixed layer
     behind everything, drawn by ::before/::after so no markup is needed. */
  background: linear-gradient(180deg, #000f1e 0%, #001828 50%, #002035 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  left: -60%;
  width: 220%;
  border-radius: 50%;
  background: var(--light);
  pointer-events: none;
  z-index: 0;
}
body::before {
  height: 180px;
  bottom: -120px;
  opacity: 0.028;
  animation: wave 20s linear infinite;
}
body::after {
  height: 140px;
  bottom: -100px;
  opacity: 0.018;
  animation: wave 26s linear infinite -10s;
}
@keyframes wave {
  0% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(20%) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* --- top bar ------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 28px;
  background: rgba(0, 10, 20, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}


/* --- partner brand mark ---------------------------------------------------
 * The asset is trimmed to its ink (650x153, 4.25:1) and already white, so this
 * is just a height — no crop window and no filter. The first lockup Andrew
 * pointed at was dark artwork inside 184px of transparent padding, which
 * needed both; the white horizontal one needs neither, which is the better
 * outcome. A partner that supplies a dark mark would need the filter back.
 */
.topbar__mark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.topbar__logo {
  height: 38px;
  width: auto;
  display: block;
}
@media (max-width: 700px) { .topbar__mark { display: none; } }

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.topbar__title {
  font-family: var(--wordmark);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fff;
  white-space: nowrap;
}

/* The prototype separates the wordmark from context with a hairline rule
   rather than whitespace alone. */
.topbar__scope {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.topbar__scope,
.topbar__email {
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.8);
  white-space: nowrap;
}

/* Was margin-left:auto alone, so every child butted against its neighbour:
   "INTERNALANDREW@POSTPALSWORLD.COMSLATE THEMESIGN OUT". */
.topbar__who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar__email { opacity: 0.75; }

/* --- layout -------------------------------------------------------------- */

.layout {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px;
}

.quests__inner {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 88px;
}

.quests__heading,
.quest__title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.quests__heading { font-size: var(--large); margin-bottom: 14px; }

/* --- quest list ---------------------------------------------------------- */

.quest-row {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 13px;
  margin-bottom: 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* The coloured strip every prototype card wears. */
.quest-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bright), var(--light));
}
.quest-row:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 180, 216, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 180, 216, 0.3);
}
.quest-row--active {
  border-color: rgba(0, 180, 216, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.35);
}

.quest-row__id {
  font-family: var(--display);
  font-size: var(--large);
  color: rgba(255, 255, 255, 0.05);
  position: absolute;
  right: 10px;
  top: 2px;
  pointer-events: none;
}
.quest-row__title {
  font-family: var(--display);
  font-size: var(--large);
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
}
.quest-row__top {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.8);
  margin-bottom: 6px;
}
.quest-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 180, 216, 0.1);
}

/* --- quest detail -------------------------------------------------------- */

.detail__empty {
  flex: 1;
  font-family: var(--body);
  color: rgba(255, 255, 255, 0.62);
  padding: 40px 0;
}

/* --- what is holding this quest up --------------------------------------- */
.notices:empty { display: none; }
.notices {
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-left: 3px solid var(--warn);
  background: rgba(245, 158, 11, 0.07);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
}
.notices__head {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 8px;
}
.notices__list { list-style: none; margin: 0; padding: 0; }
.notice {
  font-family: var(--body);
  font-size: var(--normal);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  padding: 3px 0;
}
.notice__text { color: inherit; }
a.notice__text { text-decoration: underline; text-underline-offset: 2px; }
a.notice__text:hover { color: #fff; }
/* A board problem cannot be fixed in this app, so it is marked as different. */
.notice--board::before {
  content: "Notion";
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-family: var(--label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
}

.quest__head { margin-bottom: 22px; }
.quest__title { font-size: var(--large); line-height: 0.9; }
.quest__tagline {
  font-family: var(--label);
  font-size: var(--normal);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--light);
  margin-top: 4px;
}
.quest__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--label);
  font-size: var(--note);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.7);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, max-content 1fr);
  gap: 7px 12px;
  margin: 16px 0 22px;
}
.facts dt {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.62);
  align-self: baseline;
}
.facts dd {
  font-family: var(--label);
  font-size: var(--normal);
  font-weight: 600;
  color: var(--sand);
  align-self: baseline;
}
.facts dd.missing { color: var(--warn); font-style: italic; }

@media (max-width: 1000px) {
  .facts { grid-template-columns: max-content 1fr; }
}
.identity__name {
  font-family: var(--pal);
  font-size: var(--large);
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
  margin: 0 0 4px;
}

.field {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.field__label {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.field__value {
  font-family: var(--body);
  font-size: var(--normal);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  white-space: pre-line;
}

/* --- stages -------------------------------------------------------------- */

.stage { margin-bottom: 34px; }
.stage__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 180, 216, 0.12);
}
.stage__title { font-size: 28px; }

/* --- items --------------------------------------------------------------- */

.item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.item--approved { border-left-color: var(--success); }
.item--needs_change { border-left-color: var(--warn); }
.item--in_review { border-left-color: var(--light); }
.item--blocked,
.item--inert { opacity: 0.88; }

/* Folded: the head stays, everything under it goes. */
.item--folded .phase-row,
.item--folded .item__waiting { display: none; }
.item--folded { background: transparent; }
.item__fold {
  background: none;
  border: none;
  color: var(--foam);
  cursor: pointer;
  font-size: var(--note);
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0.6;
}
.item__fold:hover { opacity: 1; background: rgba(0, 180, 216, 0.1); }

/* --- contents (the right-hand map of the page) --------------------------- */
.contents { margin: 20px 0 6px; }
.contents__group { margin-bottom: 12px; }
.contents__stage {
  display: block;
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.62);
  text-decoration: none;
  padding: 4px 0;
}
.contents__stage:hover { color: var(--foam); }
.contents__list { list-style: none; margin: 0 0 0 2px; padding: 0; }
.contents__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0 3px 8px;
  border-left: 2px solid rgba(0, 180, 216, 0.18);
  font-family: var(--body);
  font-size: var(--note);
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.contents__link:hover { color: #fff; border-left-color: var(--light); }
.contents__link.is-current {
  color: #fff;
  border-left-color: var(--orange);
}
.contents__dot { display: none; }
.contents__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Anchor jumps must clear the sticky top bar. */
.stage, .item { scroll-margin-top: 78px; }

.item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--border);
}
.item__titles { min-width: 0; }
.item__title {
  font-family: var(--label);
  font-size: var(--normal);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.item__phase {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.item__badges { display: flex; gap: 6px; flex-shrink: 0; }
.phase-row--solo { display: contents; }
.phase-row + .phase-row {
  border-top: 1px solid rgba(0, 180, 216, 0.22);
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.16);
}
.phase-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 0;
}
.phase-row__label {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
/* A gated phase reads as waiting, not as broken. */
.phase-row--blocked .phase-row__label,
.phase-row--pending .phase-row__label { color: rgba(144, 224, 239, 0.66); }

.item__body { padding: 18px; }
.item__waiting {
  font-family: var(--body);
  font-size: var(--normal);
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
  padding: 12px 18px;
}

/* --- chips --------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}
.chip--approved { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.chip--in-review { background: rgba(0, 180, 216, 0.15); color: var(--light); }
.chip--needs-change { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
.chip--blocked { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.62); }
.chip--pending { background: rgba(144, 224, 239, 0.1); color: var(--pending); }
.chip--fresh { background: rgba(245, 158, 11, 0.18); color: var(--warn); }
.chip--internal,
.chip--grant { background: rgba(0, 180, 216, 0.14); color: var(--foam); }
.chip--current { background: var(--bright); color: #fff; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  font-family: var(--label);
  font-size: var(--normal);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 30px;
  border: 1.5px solid rgba(0, 180, 216, 0.35);
  background: transparent;
  color: var(--foam);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover:not(:disabled) {
  border-color: var(--light);
  color: #fff;
  transform: translateY(-2px);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
  color: #fff;
}
.btn--warn { border-color: rgba(245, 158, 11, 0.7); color: var(--warn); }
.btn--warn:hover:not(:disabled) { background: rgba(245, 158, 11, 0.12); color: var(--warn); }
.btn--danger { border-color: rgba(239, 68, 68, 0.7); color: var(--danger); }
.btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); }
.btn--sm { font-size: var(--note); padding: 5px 12px; border-radius: 14px; }
.btn--link {
  border: none;
  background: none;
  padding: 0;
  color: var(--light);
  letter-spacing: 0.08em;
}
.btn--link:hover:not(:disabled) { color: #fff; transform: none; }

.verdicts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
.phase-row > .thread { padding: 0 18px 16px; }
.ready-gate { display: flex; align-items: center; gap: 10px; margin: 14px 0; }

/* --- quiz, beats, touchpoints -------------------------------------------- */

.quiz__question {
  font-family: var(--body);
  font-size: var(--normal);
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.5;
}
.quiz__options { display: grid; gap: 7px; margin-bottom: 12px; }
.quiz__options li,
.option--correct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 180, 216, 0.1);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--body);
  font-size: var(--normal);
  color: rgba(255, 255, 255, 0.74);
  list-style: none;
}
.quiz__options li.option--correct {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}
.option__flag {
  font-family: var(--label);
  font-size: var(--note);
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--success);
  flex-shrink: 0;
}

/* `list-style: none` matters here: the universal reset above zeroes the <ol>'s
 * padding, so the default decimal marker renders outside the list box and
 * `.item { overflow: hidden }` clips it — and it duplicated `.beat__number`
 * ("1. Beat 1") anyway. */
.beats { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.beat {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.beat:last-child { border-bottom: none; }
.beat__number {
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  color: var(--light);
}
.beat__copy {
  font-family: var(--body);
  font-size: var(--normal);
  color: rgba(255, 255, 255, 0.87);
  white-space: pre-line;
}
.beat__still { border-radius: var(--radius-sm); max-width: 100%; }

.touchpoints { display: flex; flex-direction: column; gap: 6px; }
.touchpoints__image { border-radius: var(--radius-sm); max-width: 100%; }
.touchpoint {
  font-family: var(--body);
  font-size: var(--normal);
  color: rgba(255, 255, 255, 0.8);
}

.postcard__art { border-radius: var(--radius-sm); max-width: 100%; }

/* --- media players and upload slots -------------------------------------- */

.media__players { display: flex; flex-wrap: wrap; gap: 14px; }
.player { display: flex; flex-direction: column; gap: 6px; }
.player__slot {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.66);
}
.player__video {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: cover;
}

.uploader { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.uploader__note {
  font-family: var(--body);
  font-size: var(--small);
  color: rgba(255, 255, 255, 0.62);
}
.slot { display: flex; flex-direction: column; gap: 6px; }
.slot__head { display: flex; align-items: center; gap: 8px; }
.slot__name {
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foam);
}
.slot__accept {
  font-family: var(--body);
  font-size: var(--note);
  color: rgba(255, 255, 255, 0.55);
}
.slot__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px dashed rgba(0, 180, 216, 0.3);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foam);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.slot__drop:hover,
.slot__drop--over { border-color: var(--light); background: rgba(0, 180, 216, 0.06); }
.postcard__art-link {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--light);
}
.postcard__art-link:hover { color: var(--foam); }

.slot__input { display: none; }
.slot-group { display: flex; flex-direction: column; gap: 10px; }
.slot-group__add { align-self: flex-start; }
/* The answer this cut belongs to, beside the slot's name. */
.slot__hint-text {
  font-family: var(--body);
  font-size: var(--small);
  color: rgba(255, 255, 255, 0.7);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar { display: flex; align-items: center; gap: 10px; }
.bar__line {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.bar__fill { height: 100%; background: var(--bright); transition: width 0.15s; }
.bar__controls { display: flex; gap: 6px; }

/* --- comments ------------------------------------------------------------ */

.comments { margin-top: 18px; }
.comments__label {
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.comments--internal .comments__label { color: var(--foam); }

.comment__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.comment__author {
  font-family: var(--label);
  font-size: var(--normal);
  font-weight: 600;
  color: #fff;
}
.comment__body {
  font-family: var(--body);
  font-size: var(--normal);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
  white-space: pre-line;
}
.comment--deleted { opacity: 0.4; font-style: italic; }
.comment__actions { display: flex; gap: 8px; margin-top: 6px; }

.thread { margin-bottom: 0; }
.thread__summary {
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--light);
  cursor: pointer;
}

.composer { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.composer__row { display: flex; gap: 8px; align-items: flex-start; }
.composer__thread,
.composer__beat {
  font-family: var(--label);
  font-size: var(--note);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.7);
}
.composer__input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 180, 216, 0.2);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--body);
  font-size: var(--normal);
  padding: 9px 13px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
}
.composer__input:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus { border-color: var(--light); }

/* The ready gate is a switch, not a field. */
.ready-gate {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--foam);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ready-gate:hover { border-color: var(--light); color: #fff; }
.ready-gate input { accent-color: var(--orange); cursor: pointer; }
select option { background: var(--deep); }

/* --- modal, toast, sign-in ------------------------------------------------ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 8, 16, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: #001e38;
  border: 1px solid rgba(0, 180, 216, 0.25);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 520px;
  width: 100%;
}
.modal__title {
  font-family: var(--display);
  font-size: var(--large);
  color: #fff;
  margin-bottom: 12px;
}
.modal__body {
  font-family: var(--body);
  font-size: var(--normal);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
}
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 3000;
  background: #001e38;
  border: 1px solid var(--border);
  border-left: 3px solid var(--light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--body);
  font-size: var(--normal);
  color: #fff;
  transition: opacity 0.3s, transform 0.3s;
}
.toast--error { border-left-color: var(--danger); }
.toast--out { opacity: 0; transform: translateY(8px); }

.signin {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 40px;
}
.signin__title {
  font-family: var(--wordmark);
  font-weight: 400;
  /* Deliberately outside the four-step text scale: this is a full-page splash,
     not content, and --large (25px) is a section heading's size. Clamped so it
     fills a desktop without overflowing a phone. */
  font-size: clamp(46px, 8vw, 88px);
  letter-spacing: 0.04em;
  line-height: 0.9;
  color: #fff;
}
.signin__sub {
  font-family: var(--label);
  /* Was --large, i.e. 25px — the same size the title was, and uppercase, so
     "SCIENCE LOCK" and "LOADING…" read as one weight of thing. The regex that
     introduced the type scale mapped this clamp to the wrong step. A splash
     sub-line sits outside the four-step scale like the title above it. */
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand);
}

/* --- utility -------------------------------------------------------------- */

.muted { color: rgba(255, 255, 255, 0.66); font-family: var(--body); font-size: var(--normal); }
.ok { color: var(--success); }
.error { color: var(--danger); font-family: var(--body); font-size: var(--normal); }
.approved { color: var(--success); }
.approved__by {
  font-family: var(--label);
  font-size: var(--note);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.7);
}

/* --- the theme toggle ------------------------------------------------------ */

.layout-toggle,
.theme-toggle {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: rgba(144, 224, 239, 0.8);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.layout-toggle:hover,
.theme-toggle:hover { color: var(--foam); border-color: var(--light); }

@media (max-width: 900px) {
  .layout { flex-direction: column; padding: 16px; }
  .quests__inner { width: 100%; position: static; }
  .facts { grid-template-columns: 1fr 1fr; }
}

/* --- the quest board ------------------------------------------------------
 *
 * A full-width grid rather than a sidebar list: twelve quests fit on one
 * screen, which is how you see the shape of a collection instead of scrolling
 * a column. The prototype's .quest-summary-grid, at four across.
 */

.layout { flex-direction: column; max-width: 1400px; min-height: calc(100vh - 60px); }
.quests, .detail { width: 100%; }
[hidden] { display: none !important; }
.quests { display: flex; flex: 1; }
.board { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.board__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.board__overline {
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.board__heading,
.stage__title {
  font-family: var(--wordmark);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
}
.board__heading { font-size: 30px; }
.board__stats { display: flex; gap: 34px; flex-wrap: wrap; }
.board__stat-value {
  font-family: var(--display);
  font-size: var(--large);
  color: var(--orange);
  line-height: 1;
}
.board__stat-label {
  font-family: var(--label);
  font-size: var(--note);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--foam);
  opacity: 0.65;
  margin-top: 3px;
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.qcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.qcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bright), var(--light));
}
.qcard:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 180, 216, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 180, 216, 0.3);
}
.qcard__num {
  position: absolute;
  right: 12px;
  top: 4px;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.qcard__badge {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--foam);
  opacity: 0.6;
  margin-bottom: 8px;
}
.qcard__name {
  font-family: var(--pal);
  font-size: var(--large);
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
  margin-bottom: 2px;
}
.qcard__title {
  font-family: var(--body);
  font-size: var(--small);
  font-weight: 500;
  color: var(--light);
  margin-bottom: 10px;
  line-height: 1.35;
}
.qcard__meta { display: flex; flex-direction: column; gap: 4px; }
.qcard__row { display: flex; align-items: baseline; gap: 6px; }
.qcard__label {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.62);
  min-width: 92px;
}
.qcard__value {
  font-family: var(--body);
  font-size: var(--small);
  color: rgba(255, 255, 255, 0.8);
}
.qcard__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 180, 216, 0.1);
}
.qcard__progress {
  font-family: var(--label);
  font-size: var(--note);
  letter-spacing: 0.05em;
  color: rgba(144, 224, 239, 0.7);
}
.qcard__arrow { margin-left: auto; color: var(--light); transition: transform 0.2s; }
.qcard:hover .qcard__arrow { transform: translateX(4px); }

/* --- quest detail: values left, summary right ----------------------------- */

.quest__back {
  margin-bottom: 18px;
  font-family: var(--label);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.quest__layout { display: flex; gap: 20px; align-items: flex-start; }
.quest__main { flex: 1; min-width: 0; }

.quest__summary {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: #001e38;
  border: 1px solid rgba(0, 180, 216, 0.25);
  border-radius: var(--radius);
  padding: 22px;
}
.summary__eyebrow {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 20px 0 8px;
}
.summary__eyebrow:first-child { margin-top: 0; }
.summary__status { display: flex; gap: 6px; flex-wrap: wrap; }
.summary__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 14px;
}
.summary__bar-fill { height: 100%; background: var(--success); transition: width 0.3s; }
.summary__progress {
  font-family: var(--label);
  font-size: var(--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.74);
  margin-top: 6px;
}
.summary__rows { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.summary__row:last-child { border-bottom: none; }
.summary__row-label {
  font-family: var(--label);
  font-size: var(--note);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(144, 224, 239, 0.66);
}
.summary__row-value { font-family: var(--body); font-size: var(--normal); color: rgba(255, 255, 255, 0.9); }
.summary__row-value--approved { color: var(--success); }
.summary__row-value--needs-change { color: var(--warn); }
.summary__row-value--in-review { color: var(--light); }
.summary__row-value--blocked { color: rgba(255, 255, 255, 0.55); }
.summary__stage,
.summary__fresh {
  font-family: var(--label);
  font-size: var(--normal);
  font-weight: 600;
  color: #fff;
}
.summary__fresh { color: var(--warn); }

@media (max-width: 1200px) { .quest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .quest-grid { grid-template-columns: repeat(2, 1fr); }
  .quest__layout { flex-direction: column; }
  .quest__summary { width: 100%; position: static; max-height: none; }
}
@media (max-width: 600px) { .quest-grid { grid-template-columns: 1fr; } }