/* Rivalatch Door Board (/door/): board-only styles on top of the shared sheet
   /listing/rivalatch.css (tokens, backdrop, glass, door-state glyph masks).
   Same language as / and /listing/: near-black, one warm-gold accent, serif display,
   tracked labels, glass panels with an opaque no-blur fallback, transform/opacity motion.
   Every class app.js renders keeps a rule here; IDs and behaviour are unchanged.
   Notes: vibegate-ship/docs/RIVALATCH_MOTION_NOTES.md. No fonts or CDNs fetched. */

body.doorboard { padding-bottom: 48px; }
.shell { max-width: 1200px; }

/* ── Head ────────────────────────────────────────────── */
.board-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 20px 24px;
  padding: 40px 0 30px;
}
.board-mark {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  border: 1px solid rgba(226, 192, 114, 0.35);
  object-fit: cover;
}
.board-title .kicker { margin-bottom: 10px; }
.board-title h1 {
  margin: 0 0 6px;
  font: 400 44px/1.05 var(--serif);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.board-title p:not(.kicker) { margin: 0; color: var(--ink-2); font-size: 14px; }
.hmac-flash {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--mute);
}

/* ── Panels ──────────────────────────────────────────── */
.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.board-grid > .panel { margin-bottom: 0; }
.panel {
  --tone: var(--line);
  position: relative;
  padding: 20px 22px 22px 24px;
  margin-bottom: 14px;
  scroll-margin-top: 16px;
}
.panel::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--tone);
  border-radius: 3px 0 0 3px;
  opacity: 0.85;
}
#config-panel { --tone: var(--knock); }
.rival-panel { --tone: var(--contested); }
#feed-panel { --tone: var(--lodged); }
#watch-panel { --tone: var(--running); }
#jobs-panel { --tone: var(--running); }
#conflict-panel { --tone: var(--contested); }
.panel h2 {
  margin: 0 0 12px;
  font: 400 21px/1.2 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.panel > .meta { margin: 0 0 14px; max-width: 760px; }
.panel > .row + .meta { margin: 12px 0 0; }
.panel > .row { margin: 0 0 12px; }
.panel > .row:last-child { margin-bottom: 0; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
label.wide { flex: 2 1 280px; }
input, textarea, button, select { font: inherit; }
input, textarea {
  min-width: 0;
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid rgba(241, 236, 224, 0.12);
  color: var(--ink);
  border-radius: 3px;
  padding: 10px 12px;
  font: 13px/1.4 var(--mono);
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus {
  border-color: rgba(226, 192, 114, 0.6);
  box-shadow: 0 0 0 3px rgba(226, 192, 114, 0.12);
}
textarea {
  width: 100%;
  min-height: 120px;
  font-size: 12px;
  line-height: 1.55;
  resize: vertical;
}

/* Buttons: the listing's .btn. Solid = primary (gold), .ghost = plain. */
button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 11px 16px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(226, 192, 114, 0.5);
  background: linear-gradient(180deg, rgba(226, 192, 114, 0.12), rgba(226, 192, 114, 0.03));
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
button:hover { border-color: var(--gold); }
button:active { transform: translate3d(0, 1px, 0); }
button.ghost {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(241, 236, 224, 0.03);
}
button.ghost:hover { border-color: rgba(241, 236, 224, 0.5); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Live status ─────────────────────────────────────── */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.dot {
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: 1px;
  background: var(--faint);
}
.dot.live { background: var(--lodged); box-shadow: 0 0 0 3px rgba(143, 184, 152, 0.16); }
.dot.err { background: var(--fail); box-shadow: 0 0 0 3px rgba(215, 109, 97, 0.16); }

.meta { font-size: 13px; line-height: 1.6; color: var(--mute); overflow-wrap: anywhere; }
.meta strong { color: var(--ink-2); }
.empty {
  padding: 16px 18px;
  border: 1px dashed rgba(241, 236, 224, 0.12);
  border-radius: 3px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.7;
}
.err { margin-top: 10px; color: var(--fail); font-size: 13px; }
.busy {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--contested);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ── Door-state pills: glyph + word (shapes from the shared sheet) ── */
.pill {
  --tone: var(--knock);
  --glyph: var(--g-knock);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 7px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--tone) 9%, transparent);
}
.pill::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.pill.queued    { --tone: var(--running);   --glyph: var(--g-running); }
.pill.running   { --tone: var(--running);   --glyph: var(--g-running); }
.pill.running::before { animation: glyph-turn 2.4s linear infinite; }
.pill.succeeded { --tone: var(--lodged);    --glyph: var(--g-tick); }
.pill.failed    { --tone: var(--fail);      --glyph: var(--g-fail); }
.pill.unknown   { --tone: var(--mute);      --glyph: var(--g-knock); }
.pill.http202   { --tone: var(--lodged);    --glyph: var(--g-lodged); }
.pill.contested { --tone: var(--contested); --glyph: var(--g-contested); }
/* 409s are Occupied / Contested, not job failures: same wire, door-word glyph. */
.feed-card.conflict .pill.failed,
.pill.failed[title^="Rival conflict"] { --tone: var(--contested); --glyph: var(--g-contested); }
.pill.sample {
  --tone: var(--ink-2);
  border-style: dashed;
  background: transparent;
}
.pill.sample::before { -webkit-mask: none; mask: none; width: 6px; height: 6px; border-radius: 50%; }

/* ── Session feed ────────────────────────────────────── */
.feed { display: grid; gap: 10px; }
.feed-card {
  --tone: var(--lodged);
  position: relative;
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(8, 8, 10, 0.55);
}
/* Newest knock settles in; older cards stay still on re-render. */
.feed-card:first-child { animation: plate-settle 520ms var(--ease-settle) both; }
.feed-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--tone);
  border-radius: 3px 0 0 3px;
}
.feed-card.conflict {
  --tone: var(--contested);
  border-color: rgba(211, 156, 92, 0.35);
  background: linear-gradient(180deg, rgba(211, 156, 92, 0.06), transparent 70%), rgba(8, 8, 10, 0.55);
}
.feed-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}
.feed-head .meta { font: 11px/1.4 var(--mono); }
.feed-head button { padding: 8px 12px; }
.feed-stories {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  font: 11.5px/1.5 var(--mono);
  color: var(--mute);
  overflow-wrap: anywhere;
}
.tag {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 7px;
  font: 600 9px/1.2 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--contested);
  border: 1px solid rgba(211, 156, 92, 0.45);
  border-radius: 2px;
}
.tag.held { background: rgba(211, 156, 92, 0.14); }
.tag.incoming { background: transparent; border-style: dashed; }

/* ── Live jobs ───────────────────────────────────────── */
.jobs { display: grid; gap: 12px; }
.job-card {
  --tone: var(--running);
  position: relative;
  min-width: 0;
  padding: 16px 18px 16px 22px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(8, 8, 10, 0.55);
}
.job-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--tone);
  border-radius: 3px 0 0 3px;
}
.job-card.has-conflict {
  --tone: var(--contested);
  border-color: rgba(211, 156, 92, 0.35);
}
.job-card.is-sample {
  --tone: var(--ink-2);
  border-style: dashed;
  border-color: rgba(241, 236, 224, 0.2);
}
.job-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}
.job-head button { margin-left: auto; padding: 8px 12px; }
.job-id {
  min-width: 0;
  font: 13px/1.4 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.timeline { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tl-step {
  padding: 4px 8px;
  font: 11px/1.2 var(--mono);
  color: var(--faint);
  border: 1px solid rgba(241, 236, 224, 0.08);
  border-radius: 2px;
}
.tl-step.on { color: var(--ink-2); border-color: rgba(135, 150, 166, 0.5); background: rgba(135, 150, 166, 0.08); }
.tl-step.done { color: var(--lodged); border-color: rgba(143, 184, 152, 0.4); background: rgba(143, 184, 152, 0.06); }
.job-card .meta { font-size: 12px; }
.job-card .meta + .meta { margin-top: 6px; }
.job-card pre {
  margin: 10px 0 0;
  padding: 12px 14px;
  max-height: 240px;
  overflow: auto;
  font: 11.5px/1.6 var(--mono);
  color: var(--ink-2);
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid rgba(241, 236, 224, 0.08);
  border-radius: 3px;
}
.sample-note { color: var(--ink-2) !important; margin-top: 6px; }

/* ── Conflict panel: held | incoming, no crown ───────── */
#conflict-panel > label { margin-bottom: 12px; }
#conflict-view:not(:empty) { margin-top: 16px; }
.conflict-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.story {
  position: relative;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(211, 156, 92, 0.28);
  border-radius: 3px;
  background: rgba(211, 156, 92, 0.04);
}
.story.incoming { border-style: dashed; }
.story h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font: 600 10px/1.2 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--contested);
}
.story h3::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--g-contested) center / contain no-repeat;
  mask: var(--g-contested) center / contain no-repeat;
}
.story .no-crown { margin-bottom: 10px; font: italic 13px/1.4 var(--serif); color: var(--mute); }
.story dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 12px;
}
.story dt { font: 11px/1.5 var(--mono); color: var(--faint); }
.story dd { margin: 0; font: 11.5px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }

/* Operator clarity: summary + focus. */
.rival-summary {
  position: relative;
  margin-top: 14px;
  padding: 12px 14px 12px 18px;
  font: italic 15px/1.45 var(--serif);
  color: var(--ink);
  border: 1px solid rgba(226, 192, 114, 0.3);
  border-radius: 3px;
  background: rgba(226, 192, 114, 0.05);
  animation: plate-settle 520ms var(--ease-settle) both;
}
.rival-summary::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--gold);
}
.btn-show-conflict {
  color: var(--gold) !important;
  border: 1px solid rgba(226, 192, 114, 0.6) !important;
  background: linear-gradient(180deg, rgba(226, 192, 114, 0.16), rgba(226, 192, 114, 0.04)) !important;
}
.btn-show-conflict.pulse-attention { animation: attention 0.7s ease-in-out 3; }
@keyframes attention {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
#conflict-panel.panel-focus {
  border-color: rgba(226, 192, 114, 0.55);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 0 1px rgba(226, 192, 114, 0.3),
    0 18px 50px -18px rgba(226, 192, 114, 0.18);
}
.sample-banner {
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-2);
  border: 1px dashed rgba(241, 236, 224, 0.3);
  border-radius: 3px;
  background: rgba(241, 236, 224, 0.03);
}
.sample-banner code { color: var(--ink); }

footer.note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 236, 224, 0.06);
  font-size: 12px;
  line-height: 1.7;
  color: var(--mute);
}

/* Mid widths: wordmark on its own line, nav as one swipeable row (same as the shared mobile bar). */
@media (min-width: 681px) and (max-width: 900px) {
  .doorboard .top { flex-wrap: wrap; gap: 4px 18px; padding: 14px 0 8px; }
  .doorboard .top nav {
    flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 80px); margin: 0 -40px;
    padding: 0 28px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    mask: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  }
  .doorboard .top nav::-webkit-scrollbar { display: none; }
  .doorboard .top nav a { flex: none; }
}

@media (max-width: 1000px) {
  .board-grid { grid-template-columns: 1fr; }
  .board-head { grid-template-columns: auto minmax(0, 1fr); }
  .hmac-flash { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .board-head { padding: 26px 0 22px; gap: 16px; }
  .board-mark { width: 44px; height: 44px; align-self: start; margin-top: 4px; }
  .board-title h1 { font-size: 34px; }
  .panel { padding: 16px 16px 18px 18px; }
  .panel h2 { font-size: 19px; }
  .conflict-grid { grid-template-columns: 1fr; }
  .job-head button { margin-left: 0; }
  .story dl { grid-template-columns: 1fr; gap: 2px; }
  .story dd { margin-bottom: 6px; }
}