:root {
  --bg: #faf8f5;
  --fg: #1d1b19;
  --muted: #6b655e;
  --line: #e6e1da;
  --accent: #c2410c;
  --accent-fg: #fff;
  --surface: #fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161412;
    --fg: #f1ede8;
    --muted: #a39b91;
    --line: #2e2a26;
    --accent: #fb923c;
    --accent-fg: #1d1b19;
    --surface: #1f1c19;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { font-weight: 700; letter-spacing: .01em; color: var(--fg); text-decoration: none; }
/* A segmented pill in the top bar on every page: both languages readable at a glance, the current one filled. */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: var(--surface);
  margin: 0;
}
.lang-switch button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lang-switch button[aria-current="true"] { background: var(--accent); color: var(--accent-fg); }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page { max-width: 640px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 12px; }
.lead { color: var(--muted); margin: 0 0 24px; }
.button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  text-decoration: none;
}
@media (min-width: 900px) {
  .page { padding-top: 64px; }
  h1 { font-size: 2.1rem; }
}

/* --- header tools ------------------------------------------------------------------------------ */
.topbar-tools { display: flex; align-items: center; gap: 8px; }
.signout { margin: 0; }
.signout button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* --- buttons and notices ----------------------------------------------------------------------- */
button.button, a.button { border: 0; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.button.secondary { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.button.danger { color: #b42318; }
@media (prefers-color-scheme: dark) { .button.danger { color: #fda29b; } }
.notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.notice.warn { border-color: #d97706; background: #fffbeb; color: #7c2d12; }
.notice.info { border-color: #3b82f6; background: #eff6ff; color: #1e3a8a; }
.notice.quiet { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .notice.warn { background: #2a1d0c; color: #fcd9a8; }
  .notice.info { background: #14213a; color: #bfd4fb; }
}
[hidden] { display: none !important; }
.hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.fine { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 16px 0 0; }

/* --- sign in with Telegram ---------------------------------------------------------------------- */
.tg { margin: 24px 0 0; }
.tg-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: #1a78a8;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tg-button[aria-disabled="true"] { opacity: .85; cursor: progress; pointer-events: none; }
.tg-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tg-spin .8s linear infinite;
}
@keyframes tg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tg-spinner { animation-duration: 3s; } }
.tg-waiting { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tg-waiting p { margin: 0 0 12px; }
.tg-waiting .tg-number-label { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.tg-waiting .tg-number {
  margin: 2px 0 12px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tg-waiting .button { display: block; text-align: center; line-height: 24px; }
.tg-alt { margin: 14px 0 0; text-align: center; }
.tg-alt-link {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.help { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.help p { margin: 0 0 12px; }
.help .button { display: block; text-align: center; line-height: 24px; }

/* --- join page ---------------------------------------------------------------------------------- */
.join h1 { font-size: 1.7rem; }
.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.collage li { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--line); }
.collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .collage li:nth-child(n + 3) { display: none; } } /* keep the button above the fold */
@media (min-width: 900px) { .collage { grid-template-columns: repeat(4, 1fr); } }

/* --- admin shell -------------------------------------------------------------------------------- */
.admin .page { max-width: 1080px; padding-top: 16px; }
.admin-nav {
  display: flex;
  gap: 4px;
  margin: 0 -16px 20px;
  padding: 0 16px 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.admin-nav a, .admin-nav .soon {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-bottom: 3px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
}
.admin-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.admin-nav .soon { color: var(--muted); font-weight: 400; cursor: default; }
.admin h1 { font-size: 1.4rem; }
.card { margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.count { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: .9rem; }
.muted { color: var(--muted); margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.invite-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 16px; }
.invite-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.invite-form .grow { flex: 1 1 220px; }
.invite-form select, .invite-form input {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.invite-list { margin: 0; padding: 0; list-style: none; }
.invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.invite-main { min-width: 0; flex: 1 1 260px; }
.invite-link { display: block; font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.invite-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.invite-actions { display: flex; gap: 8px; }
.invite-actions form { margin: 0; }
.invite.state-revoked .invite-link { text-decoration: line-through; color: var(--muted); }
.badge { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); }
.badge-open { color: #166534; border-color: #86efac; background: #f0fdf4; }
.badge-used { color: #1e3a8a; border-color: #93c5fd; background: #eff6ff; }
.badge-revoked { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .badge-open { color: #86efac; background: #11261a; border-color: #22543a; }
  .badge-used { color: #bfd4fb; background: #14213a; border-color: #2d4a80; }
}

/* --- avatar menu ---------------------------------------------------------------------------------- */
.avatar-menu { position: relative; }
.avatar-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -4px;
  list-style: none;
  cursor: pointer;
}
.avatar-menu summary::-webkit-details-marker { display: none; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
}
.avatar-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.menu-panel form { margin: 0; }
.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg); }

/* --- admin: Templates (ticket 07) ------------------------------------------------------------ */
/* minmax(0, 1fr): an auto track grows to the file input's intrinsic width (402 px with Linux fonts at 390 px). */
.upload-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.upload-form input[type="file"] { width: 100%; min-width: 0; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; }
.tpl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 0 20px; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); text-decoration: none; }
.pager a[rel="next"] { justify-self: end; }
.pager-pos { color: var(--muted); font-size: 14px; }
.admin .page.tpl-page { max-width: 1600px; }
.tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 20px; }
.tpl-search { display: flex; gap: 8px; }
.tpl-search input[type="search"] { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; }
.tpl-toggle { display: none; justify-self: start; }
.tpl-panel { padding: 8px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tpl-group { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.tpl-group:last-of-type { border-bottom: 0; }
.tpl-group > summary, .tpl-group-title { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; font-weight: 700; }
.tpl-group > summary { cursor: pointer; }
.tpl-sub { margin: 0 0 6px; padding: 0; border: 0; }
.tpl-sub legend { padding: 4px 0 0; color: var(--muted); font-size: 13px; }
.tpl-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.tpl-opt input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.tpl-opt .count { margin-left: auto; padding-left: 8px; }
.tpl-apply { margin-top: 10px; width: 100%; }
.js .tpl-apply { display: none; }
.tpl-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 0 8px; }
.tpl-summary-end { margin: 0 0 20px; justify-content: flex-end; }
.tpl-found { margin: 0; font-weight: 700; }
.tpl-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tpl-sizes-label { margin-right: 4px; color: var(--muted); font-size: 14px; }
.tpl-sizes a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); text-decoration: none; font-size: 15px; }
.tpl-sizes a[aria-current="true"] { border-color: var(--accent); font-weight: 700; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.tpl-chip, .tpl-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); text-decoration: none; font-size: 15px; }
.tpl-chip-x { font-size: 20px; line-height: 1; color: var(--muted); }
.tpl-reset { padding: 0 6px; border-color: transparent; background: transparent; color: var(--accent); font-weight: 600; text-decoration: underline; }
.tpl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.tpl-list > li { min-width: 0; }
@media (min-width: 700px) { .tpl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tpl-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tpl-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 999px) {
  .js .tpl-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .js .tpl-panel { display: none; }
  .js .panel-open .tpl-panel { display: block; }
}
@media (min-width: 1000px) {
  .tpl-layout { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "panel search" "panel results"; grid-template-rows: auto 1fr; column-gap: 20px; }
  .tpl-search { grid-area: search; }
  .tpl-panel { grid-area: panel; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
  .tpl-results { grid-area: results; min-width: 0; }
}
.tpl-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); text-decoration: none; overflow: hidden; }
.tpl-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--bg); }
.tpl-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 12px 12px; min-width: 0; }
.tpl-title { font-weight: 700; }
.tpl-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; }
.tpl-reject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #b42318; font-size: 14px; }
@media (prefers-color-scheme: dark) { .tpl-reject { color: #fda29b; } }
.badge-t-describing { color: #7c2d12; border-color: #fdba74; background: #fff7ed; }
.badge-t-review { color: #1e3a8a; border-color: #93c5fd; background: #eff6ff; }
.badge-t-active { color: #166534; border-color: #86efac; background: #f0fdf4; }
.badge-t-inactive { color: var(--muted); }
.badge-t-rejected { color: #b42318; border-color: #fda29b; background: #fef3f2; }
.badge-manual { color: #7c2d12; border-color: #fdba74; background: #fff7ed; font-size: 12px; margin-left: 6px; }
@media (prefers-color-scheme: dark) {
  .badge-t-describing, .badge-manual { color: #fcd9a8; background: #2a1d0c; border-color: #7c4a12; }
  .badge-t-review { color: #bfd4fb; background: #14213a; border-color: #2d4a80; }
  .badge-t-active { color: #86efac; background: #11261a; border-color: #22543a; }
  .badge-t-rejected { color: #fda29b; background: #2a1210; border-color: #7a271a; }
}
.back { margin: 0 0 4px; }
.editor-layout { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .editor-layout { grid-template-columns: 340px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .editor-ref { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 8px; }
  .editor-form { grid-column: 2; }
  .editor-status { grid-column: 2; }
  .editor-delete { grid-column: 2; }
}
.full-size-link { display: block; color: var(--fg); text-decoration: none; }
.full-size-caption { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; color: var(--accent); font-size: 14px; text-decoration: underline; }
.editor-delete { border-color: #fda29b; }
.delete-form .field { margin: 0 0 12px; font-size: 14px; }
.delete-form input[type="text"] { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; width: 100%; max-width: 240px; }
.ref-image { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 10px; background: var(--bg); }
.editor-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; }
.json-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13px !important; line-height: 1.4; }
.gaze-card { border-color: var(--accent); border-width: 2px; }
.gaze-box { font-size: 17px !important; font-weight: 600; }
.attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field select { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; width: 100%; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 22px; height: 22px; flex: none; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.editor-actions form { margin: 0; }
.json-detail { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.back a { color: var(--fg); }

/* --- admin: batches, slots, jobs (ticket 08) ------------------------------------------------------ */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.card-head h2 { margin: 0; }
.card-head form { margin: 0; }
.gen-list { margin: 0; padding: 0; list-style: none; }
.gen-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.gen-main { flex: 1 1 260px; min-width: 0; }
.gen-main p { margin: 6px 0 0; }
.gen-blocker { color: #b42318; font-size: 14px; }
.gen-cov, .delivery-line { font-size: 14px; }
.delivery-line { margin: 4px 0; }
.delivery-line > a::after { content: ":"; margin-right: 4px; }
.delivery-line > span + span::before { content: "\00b7"; margin: 0 6px; }
.delivery-failed { color: #b42318; }
.gen-row form { margin: 0; }
.button[disabled] { opacity: .45; cursor: not-allowed; }
.badge-b-generating { color: #7c2d12; border-color: #fdba74; background: #fff7ed; }
.badge-b-awaiting_review { color: #1e3a8a; border-color: #93c5fd; background: #eff6ff; }
.badge-b-released, .badge-b-scheduled, .badge-b-unlocked { color: #166534; border-color: #86efac; background: #f0fdf4; }
.badge-b-postponed { color: var(--muted); }
.badge-g-pass { color: #166534; border-color: #86efac; background: #f0fdf4; }
.badge-g-warn { color: #854d0e; border-color: #fde68a; background: #fefce8; }
.guard-issues { margin: 6px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.slot-refill, .slot-reason { overflow-wrap: anywhere; }
.refill-detail summary { cursor: pointer; font-size: 13px; }
.badge-j-queued { color: var(--muted); }
.badge-j-running { color: #7c2d12; border-color: #fdba74; background: #fff7ed; }
.badge-j-done { color: #166534; border-color: #86efac; background: #f0fdf4; }
.badge-j-failed { color: #b42318; border-color: #fda29b; background: #fef3f2; }
.badge-j-empty { color: #854d0e; border-color: #fde68a; background: #fefce8; }
.batch-meta { margin: 0 0 12px; }
.slot-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .slot-grid { grid-template-columns: repeat(3, 1fr); } }
.slot { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.slot-frame { position: relative; background: var(--bg); }
.slot-pic { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.slot-blank { display: flex; align-items: center; justify-content: center; min-height: 160px; color: var(--muted); font-weight: 600; }
.slot-failed .slot-blank { color: #b42318; }
.slot-template { position: absolute; top: 8px; right: 8px; width: 56px; height: 72px; border: 2px solid var(--surface); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.slot-template img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot-info { padding: 10px 12px 12px; }
.slot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.slot-line { margin: 4px 0 0; font-size: 13px; }
.slot-error { margin: 8px 0 0; color: #b42318; overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.tile { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tile-n { font-size: 1.5rem; font-weight: 700; }
.tile-l { font-size: 12px; color: var(--muted); }
.tile-failed .tile-n { color: #b42318; }
.tile-running .tile-n { color: #c2410c; }
.job-list { margin: 0; padding: 0; list-style: none; }
.job { padding: 12px 0; border-top: 1px solid var(--line); }
.job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.job-retry { margin: 0 0 0 auto; }
.job-error { margin: 8px 0 0; color: #b42318; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  .badge-b-generating, .badge-j-running { color: #fcd9a8; background: #2a1d0c; border-color: #7c4a12; }
  .badge-b-awaiting_review { color: #bfd4fb; background: #14213a; border-color: #2d4a80; }
  .badge-b-released, .badge-b-scheduled, .badge-b-unlocked, .badge-j-done { color: #86efac; background: #11261a; border-color: #22543a; }
  .badge-g-pass { color: #86efac; background: #11261a; border-color: #22543a; }
  .badge-g-warn { color: #fde68a; background: #2a2208; border-color: #6b5a12; }
  .badge-j-failed { color: #fda29b; background: #2a1210; border-color: #7a271a; }
  .badge-j-empty { color: #fde68a; background: #2a2208; border-color: #6b5a12; }
  .gen-blocker, .delivery-failed, .slot-error, .job-error, .slot-failed .slot-blank { color: #fda29b; }
  .tile-failed .tile-n { color: #fda29b; }
}
.batch-meta span + span::before { content: "\00b7"; margin: 0 8px; }
.back a::before { content: "\2190\00a0"; }
.slot-frame { width: 100%; box-sizing: border-box; }
.slot-blank { padding: 0 76px 0 16px; text-align: center; box-sizing: border-box; }
.tile-l { text-align: center; }
.job a, .slot a, .gen-main a, .review-link { color: var(--fg); }
.gen-main a { text-decoration: none; }
.gen-main a:hover { text-decoration: underline; }
@media (max-width: 599px) { .slot-pic { max-height: 340px; } }

/* --- admin: review, release, unlock (ticket 10) ---------------------------------------------------- */
[hidden] { display: none !important; }
.slot-open { display: block; cursor: zoom-in; }
.slot.is-current { outline: 3px solid var(--accent); outline-offset: 2px; }
.slot.is-dropped .slot-pic { filter: grayscale(1); opacity: .4; }
.drop-flag { display: none; position: absolute; left: 8px; top: 8px; padding: 2px 10px; border-radius: 999px; background: #b42318; color: #fff; font-size: 13px; font-weight: 700; }
.slot.is-dropped .drop-flag { display: inline-block; }
.decision { margin: 10px 0 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { min-height: 48px; border: 0; background: var(--bg); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"].seg-keep { background: #166534; color: #fff; }
.seg button[aria-pressed="true"].seg-drop { background: #b42318; color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.slot-retry { margin: 10px 0 0; }
.slot-retry .button { width: 100%; min-height: 48px; }
.slot-late { color: #854d0e; font-weight: 600; }
.badge-d-approved { color: #166534; border-color: #86efac; background: #f0fdf4; }
.badge-d-dropped { color: #b42318; border-color: #fda29b; background: #fef3f2; }
.when-banner p { margin: 0 0 6px; }
.when-banner form { margin: 8px 0 0; }
.release-bar { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -6px 18px rgba(0, 0, 0, .12); }
.release-when p { margin: 0 0 4px; }
.release-when[hidden] { display: none; }
.release-blocker { margin: 8px 0 0; }
.release-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 0; }
.release-actions form { margin: 0; }
.release-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.release-choices [hidden] { display: none; }
@media (min-width: 600px) { .release-actions { grid-template-columns: 2fr 1fr; } .release-choices { grid-template-columns: 1fr 1fr; } .release-choices .release-morning:only-child { grid-column: 1 / -1; } }
.release-actions .button { width: 100%; min-height: 48px; box-sizing: border-box; }
.keys-hint { margin: 8px 0 0; }
@media (hover: none) { .keys-hint { display: none; } }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 1fr auto; background: rgba(8, 7, 6, .94); }
.lb-img { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.lb-nav, .lb-close { border: 0; background: transparent; color: #fff; font-size: 32px; cursor: pointer; }
.lb-nav { grid-row: 1; min-height: 64px; align-self: center; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-prev::before { content: "\2190"; }
.lb-next::before { content: "\2192"; }
.lb-close { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; z-index: 2; }
.lb-close::before { content: "\00d7"; }
.lb-bar { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); color: #fff; }
.lb-original { color: #fff; }
.lb-drop { min-height: 44px; }
@media (max-width: 599px) { .lightbox { grid-template-columns: 44px 1fr 44px; } }
@media (prefers-color-scheme: dark) {
  .badge-d-approved { color: #86efac; background: #11261a; border-color: #22543a; }
  .badge-d-dropped { color: #fda29b; background: #2a1210; border-color: #7a271a; }
  .slot-late { color: #fde68a; }
}
.slot:focus { outline: none; }
.slot.is-current:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 1000px) {
  .release-bar { position: static; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
}

/* --- ticket 13: admin Feedback ------------------------------------------------------------------- */
.fb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.fb-filter { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fb-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; color: var(--muted); font-weight: 600; text-decoration: none; }
.fb-filter a[aria-current="page"] { background: var(--accent); color: var(--accent-fg); }
.fb-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fb-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.fb-row.fb-done { opacity: .62; }
.fb-thumb { grid-row: 1 / span 2; width: 84px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--line); display: grid; place-items: center; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb-gone { padding: 6px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.25; }
.fb-body { min-width: 0; }
.fb-body p { margin: 0 0 6px; }
.fb-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fb-person { font-weight: 700; color: var(--fg); text-decoration: none; }
.fb-person:hover { text-decoration: underline; }
.fb-links a { color: var(--accent); }
.fb-chips-admin { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chips-admin:empty { display: none; }
.fb-chip-badge { background: var(--bg); color: var(--fg); }
.fb-chip-likeness_good { color: #166534; border-color: #86efac; background: #f0fdf4; }
.fb-chip-likeness_bad, .fb-chip-anatomy, .fb-chip-proportions, .fb-chip-build_hair { color: #b42318; border-color: #fda29b; background: #fef3f2; }
.fb-text-admin { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-links { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }
.fb-act { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
@media (prefers-color-scheme: dark) {
  .fb-chip-likeness_good { color: #86efac; background: #14301f; border-color: #1f5a37; }
  .fb-chip-likeness_bad, .fb-chip-anatomy, .fb-chip-proportions, .fb-chip-build_hair { color: #fda29b; background: #3a1512; border-color: #7a2c24; }
}
@media (min-width: 700px) {
  .fb-row { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; }
  .fb-thumb { grid-row: 1; width: 96px; }
  .fb-act { grid-column: 3; flex-direction: column; align-items: flex-end; margin: 0; }
}

/* --- ticket 14: admin Costs ---------------------------------------------------------------------- */
:root {
  --p-batch: #c2410c;
  --p-guard: #2563eb;
  --p-capture: #0d9488;
  --p-template: #7c3aed;
  --p-adhoc: #ca8a04;
  --p-experiment: #78716c;
  --cost-bad: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root {
    --p-batch: #fb923c;
    --p-guard: #60a5fa;
    --p-capture: #2dd4bf;
    --p-template: #a78bfa;
    --p-adhoc: #facc15;
    --p-experiment: #a8a29e;
    --cost-bad: #fda29b;
  }
}
.p-batch { fill: var(--p-batch); background: var(--p-batch); }
.p-guard { fill: var(--p-guard); background: var(--p-guard); }
.p-capture { fill: var(--p-capture); background: var(--p-capture); }
.p-template { fill: var(--p-template); background: var(--p-template); }
.p-adhoc { fill: var(--p-adhoc); background: var(--p-adhoc); }
.p-experiment { fill: var(--p-experiment); background: var(--p-experiment); }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: baseline; }
.swatch-line { display: inline-block; width: 14px; height: 0; margin-right: 6px; border-top: 2px solid var(--fg); vertical-align: middle; }
.swatch-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.cost-red { border-color: var(--cost-bad); background: #fef3f2; color: #7a271a; }
.cost-red h2 { margin: 0 0 6px; font-size: 1.05rem; color: #b42318; }
.cost-red p { margin: 0 0 8px; }
.cost-red a { color: #b42318; font-weight: 600; }
.cost-unpriced { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cost-unpriced li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.cost-unpriced code, .cost-endpoints code, .cost-history code { overflow-wrap: anywhere; word-break: break-all; }
.cost-stale p { margin: 0 0 8px; }
.cost-error { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.cost-pull { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 0; }
.cost-pull button[disabled] { opacity: .5; cursor: default; }
.cost-head .cost-hero { margin: 0 0 14px; }
.cost-hero p { margin: 0; }
.cost-big { font-size: 2.6rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.cost-hero-l { font-weight: 600; }
.cost-figs { display: grid; grid-template-columns: 1fr; gap: 10px 24px; margin: 0; }
.cost-figs div { padding-top: 10px; border-top: 1px solid var(--line); }
.cost-figs dt { color: var(--muted); font-size: 13px; }
.cost-figs dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; }
.cost-figs dd .muted { display: block; font-size: 13px; font-weight: 400; }
.cost-range { margin: 0 0 14px; }
.cost-tiles { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
.cost-tiles .tile { text-align: center; padding: 10px 6px; }
.cost-tiles .tile-n { font-size: 1.25rem; }
.cost-tiles .tile-l { line-height: 1.2; }
.tile-warn .tile-n { color: #b45309; }
.cost-waste { margin: 0 0 18px; font-size: 14px; }
.cost-chart { display: block; width: 100%; max-width: 560px; height: auto; }
.cost-chart .grid { stroke: var(--line); stroke-width: 1; }
.cost-chart .base { stroke: var(--muted); stroke-width: 1; }
.cost-chart .axis { fill: var(--muted); font-size: 12px; }
.cost-chart .hit { fill: transparent; }
.cost-chart .actual-mark { stroke: var(--fg); stroke-width: 2; }
.cost-chart .nopull { fill: var(--muted); }
.cost-chart .actual-only .actual-mark { stroke: var(--cost-bad); stroke-width: 3; }
.cost-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.cost-days { margin-top: 12px; }
.cost-days summary, .cost-history summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--accent); font-weight: 600; }
.cost-barcell { width: 30%; min-width: 80px; }
.cost-bar { display: block; height: 8px; border-radius: 4px; }
.cost-flag td { background: #fff7ed; }
.cost-old td { color: var(--muted); }
.cost-note { white-space: normal; min-width: 160px; }
.cost-form .grow { flex: 1 1 200px; }
.cost-form button { align-self: end; }
.cost-more { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cost-more li { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.cost-more a { color: var(--accent); font-weight: 600; margin-right: 14px; }
.cost-warn { color: var(--cost-bad); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .cost-red { background: #3a1512; color: #fecdca; border-color: #7a2c24; }
  .cost-red h2, .cost-red a { color: #fda29b; }
  .cost-flag td { background: #2a1d0c; }
  .tile-warn .tile-n { color: #fbbf24; }
}
@media (min-width: 700px) {
  .cost-figs { grid-template-columns: 1fr 1fr; }
  .cost-tiles { grid-template-columns: repeat(9, 1fr); gap: 6px; }
  .cost-tiles .tile-n { font-size: 1.15rem; }
}
.cost-table a, .cost-head a { color: var(--accent); font-weight: 600; }
.cost-form { margin-top: 14px; }
@media (max-width: 699px) {
  /* A table becomes a stack of cards on a phone: every cell carries its column name in data-label. */
  .cost-table:not(.cost-compact) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cost-table:not(.cost-compact), .cost-table:not(.cost-compact) tbody, .cost-table:not(.cost-compact) tr, .cost-table:not(.cost-compact) td { display: block; width: 100%; }
  .cost-table:not(.cost-compact) tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .cost-table:not(.cost-compact) td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  .cost-table:not(.cost-compact) td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 13px; text-align: left; }
  .cost-table:not(.cost-compact) td:first-child { justify-content: flex-start; font-weight: 600; text-align: left; }
  .cost-table:not(.cost-compact) td:first-child::before { display: none; }
  .cost-table:not(.cost-compact) td:empty { display: none; }
  .cost-table:not(.cost-compact) td[class*="cost-barcell"] { padding-top: 0; }
  .cost-table:not(.cost-compact) td[class*="cost-barcell"]::before { display: none; }
}
.cost-purpose { min-width: 160px; white-space: normal; }
.cost-purpose .cost-bar { margin-top: 6px; max-width: 100%; }
.cost-compact td { vertical-align: top; }

/* --- ticket 15: rating, recipes, runs, settings ------------------------------------------------------ */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.rating-label { color: var(--muted); font-size: 14px; }
.rating-scale { display: inline-flex; gap: 6px; }
.rating-btn { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
.rating-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.rating-error .rating-btn { border-color: #b42318; }
.rating-gone { margin: 8px 0 0; }
.field input[type="text"], .field input[type="number"], .field input:not([type]) { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; width: 100%; }
.field [aria-invalid="true"] { border-color: #b42318; }
.settings-form h3 { margin: 18px 0 10px; font-size: 1rem; }
.settings-form .field { margin: 0 0 12px; }
.settings-history td.wrap { white-space: normal; min-width: 160px; overflow-wrap: anywhere; }
.row-live td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 14px; }
.stat-row.card { padding: 14px; }
.stat-row div { min-width: 0; }
.stat-row dt { color: var(--muted); font-size: 13px; }
.stat-row dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 16px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.recipe-versions td.wrap, .note-row td { white-space: normal; overflow-wrap: anywhere; }
.note-row td { border-bottom: 1px solid var(--line); padding-top: 0; font-size: 14px; }
.button.small { min-height: 40px; padding: 0 12px; font-size: 14px; }
.recipe-field { margin: 0 0 14px; }
.recipe-field textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.recipe-field textarea[aria-invalid="true"] { border-color: #b42318; }
.recipe-block { margin: 0 0 8px; }
.recipe-block summary { min-height: 40px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.block-text { white-space: pre-wrap; }
.from-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 14px; }
.from-pic { width: 100%; max-width: 260px; height: auto; border-radius: 10px; background: var(--line); }
@media (min-width: 700px) { .from-grid { grid-template-columns: 260px minmax(0, 1fr); } }
.block-checks { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.block-checks li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.check-missing code { opacity: .6; }
.run-form h2 { margin: 0 0 6px; }
.run-form .field { margin: 0 0 12px; }
.run-form input[type="file"] { width: 100%; min-width: 0; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; }
.flag-set, .pick-set { margin: 0 0 12px; padding: 0; border: 0; }
.flag-set legend, .pick-set legend { padding: 0; color: var(--muted); font-size: 13px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.tpl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 0; }
.tpl-item { display: grid; grid-template-columns: 22px 54px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 64px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; }
.tpl-item input { width: 22px; height: 22px; }
.tpl-item img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--line); }
.tpl-item small { display: block; }
.template-pick summary, .overrides summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.overrides { margin: 0 0 12px; }
.runs-table td { vertical-align: middle; }
.thumb-strip { display: inline-flex; gap: 4px; }
.thumb-strip img { width: 36px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--line); display: block; }
.badge-r-adhoc { color: #1e3a8a; border-color: #93c5fd; background: #eff6ff; }
.badge-r-experiment { color: #581c87; border-color: #d8b4fe; background: #faf5ff; }
.badge-r-queued { color: #854d0e; border-color: #fde68a; background: #fefce8; }
.badge-r-batch { color: #166534; border-color: #86efac; background: #f0fdf4; }
@media (prefers-color-scheme: dark) {
  .badge-r-adhoc { color: #bfd4fb; background: #14213a; border-color: #2d4a80; }
  .badge-r-experiment { color: #e9d5ff; background: #251433; border-color: #5b3b7a; }
  .badge-r-queued { color: #fde68a; background: #2a2208; border-color: #6b5a12; }
  .badge-r-batch { color: #86efac; background: #11261a; border-color: #22543a; }
}
.send-form { margin: 10px 0 0; }
.send-form .button { width: 100%; min-height: 48px; }
.hint { margin: 6px 0 0; font-size: 13px; }
.extras-title { margin: 22px 0 10px; font-size: 1.05rem; }
.review-state { margin: 8px 0 0; }
.run-form > p.muted { margin: 0 0 14px; }
a.button.small { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
.gate-headline { margin: 0 0 6px; font-size: 1.4rem; }
.gate-state { margin: 0 0 10px; font-weight: 600; }
.gate-passed { color: #166534; }
.gate-failed { color: #b42318; }
.gate-open { color: var(--muted); }
.gate-person .card-head h2 { overflow-wrap: anywhere; min-width: 0; }
.gate-badge-pending { color: #854d0e; border-color: #fde68a; background: #fefce8; }
.gate-badge-passing { color: #166534; border-color: #86efac; background: #f0fdf4; }
.gate-badge-failed { color: #b42318; border-color: #fda29b; background: #fef3f2; }
.gate-batches, .gate-notes { margin: 12px 0 0; }
.gate-batches summary, .gate-notes summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.gate-batches ul, .gate-notes ul { margin: 0; padding-left: 20px; }
.gate-nudge { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 14px 0 0; }
.gate-nudge .field { flex: 1 1 220px; }
.gate-person .notice { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  .gate-passed { color: #86efac; }
  .gate-failed { color: #fda29b; }
  .gate-badge-pending { color: #fde68a; background: #2a2208; border-color: #6b5a12; }
  .gate-badge-passing { color: #86efac; background: #11261a; border-color: #22543a; }
  .gate-badge-failed { color: #fda29b; background: #2a1210; border-color: #7a271a; }
}
.gate-person .card-head h2 a { color: inherit; text-decoration-thickness: 1px; }
.gate-notes li { margin: 0 0 4px; }
.gate-notes li .muted { display: block; font-size: 13px; }

/* --- ticket 17: Person page, delete confirm, data safety --------------------------------------------- */
.back { margin: 0 0 8px; font-size: 14px; }
.person-links { margin: 14px 0 0; }
.plain-list { margin: 0 0 12px; padding-left: 20px; }
.plain-list li { margin: 0 0 6px; }
.danger-zone { border-color: #fda29b; }
.danger-zone .button { width: 100%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; }
.confirm-form { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.confirm-form .button { width: 100%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 52px; text-align: center; }
.button.danger-solid { background: #b42318; color: #fff; }
@media (prefers-color-scheme: dark) {
  .danger-zone { border-color: #7a2e27; }
  .button.danger-solid { background: #d92d20; }
}
@media (min-width: 600px) {
  .confirm-form { flex-direction: row-reverse; justify-content: flex-start; }
  .confirm-form .button, .danger-zone .button { width: auto; padding-left: 24px; padding-right: 24px; }
}
.badge-failed { color: #b42318; border-color: #fda29b; background: #fef3f2; }
@media (prefers-color-scheme: dark) { .badge-failed { color: #fda29b; background: #2a1411; border-color: #7a2e27; } }
.person-links .button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 18px; min-height: 48px; text-decoration: none; }

/* --- review fixes: collapsed sections, unchecked chip, slot line ------------------------------------------- */
/* `display: flex` on a summary removes the browser's own marker, which left collapsed sections looking like empty
   headings. One chevron for all of them: right when closed, down when open. */
.cost-days summary, .cost-history summary, .recipe-block summary, .template-pick summary, .overrides summary,
.gate-batches summary, .gate-notes summary { gap: 10px; }
.cost-days summary::before, .cost-history summary::before, .recipe-block summary::before,
.template-pick summary::before, .overrides summary::before, .gate-batches summary::before,
.gate-notes summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
}
details[open] > summary::before { transform: rotate(45deg); }
.badge-g-none { color: var(--muted); border-color: var(--line); background: transparent; }
.slot-adapter::before { content: " \00b7  "; white-space: pre; }