/* The console's look. Loaded after the page's base styles, so it only restyles; it changes no behaviour.
   Direction: an editorial workbench. Ink-blue for the one action that moves a book forward, calm neutrals for everything else,
   a serif for headings (the product is books), and status colours that always mean the same thing. */
:root {
  --ink: #14171c;
  --ink-2: #4a5160;
  --ink-3: #6b7280;
  --paper: #f3f4f7;
  --card: #ffffff;
  --line: #e1e4ea;
  --line-strong: #c9cfd8;
  --accent: #163a5f;
  --accent-hover: #0f2d4b;
  --accent-soft: #e7eef6;
  --ok: #1f7a4d;
  --ok-soft: #e2f3ea;
  --warn: #8a5300;
  --warn-soft: #fdf0d5;
  --bad: #b3261e;
  --bad-soft: #fbe4e2;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body.console { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.console h1, body.console h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
body.console h1 { font-size: 1.6rem; }
body.console h2 { font-size: 1.2rem; margin: 0 0 0.4rem; }
body.console h3 { font-size: 0.95rem; margin: 0 0 0.25rem; }
body.console h3.sec { margin: 1.6rem 0 0.5rem; font: 600 0.72rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
body.console .meta { color: var(--ink-2); font-size: 0.85rem; line-height: 1.45; }
body.console .err { color: var(--bad); }

/* ---- layout ---- */
body.console #work { padding: 1.4rem 2rem 4rem; max-width: 1180px; }
body.console .topbar { padding-bottom: 0.9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
body.console #session-info { margin-right: 0.5rem; }

/* ---- sidebar ---- */
body.console #sidebar { background: #101828; width: 212px; padding: 1.1rem 0.7rem; color: #cfd6e4; }
body.console #sidebar .sb-title { font-family: var(--serif); font-size: 1.05rem; padding: 0.2rem 0.6rem 1rem; color: #fff; }
body.console #sidebar .sb-group { color: #7f8aa3; font-size: 0.66rem; letter-spacing: 0.1em; padding: 1.1rem 0.6rem 0.35rem; }
body.console #sidebar a { border-radius: var(--radius-sm); padding: 0.45rem 0.65rem; color: #cfd6e4; transition: background 0.15s, color 0.15s; }
body.console #sidebar a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.console #sidebar a.on { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 600; }

/* ---- the stage rail ---- */
body.console #stagerail { background: var(--card); border-right: 1px solid var(--line); width: 300px; padding: 1rem 0.7rem 1.5rem 0.9rem; }
body.console .sr-item { border-radius: var(--radius-sm); padding: 0.55rem 0.5rem; transition: background 0.15s; }
body.console .sr-item:hover { background: var(--paper); }
body.console .sr-item.sel { background: var(--accent-soft); }
body.console .sr-item.sel .sr-ring { background: var(--accent-soft); }
body.console .sr-ring { background: var(--card); }
body.console .sr-lab { font-size: 0.9rem; }
body.console .sr-act { color: var(--ink-3); }
body.console .sr-tabs a { border-color: var(--line-strong); color: var(--ink-2); padding: 0.25rem 0.7rem; }
body.console .sr-tabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.console .stagehead h2 { font-size: 1.5rem; }

/* ---- surfaces ---- */
body.console .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
body.console .card .card { box-shadow: none; background: #fafbfc; }
body.console .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
body.console table.grid { font-size: 0.86rem; }
body.console table.grid td, body.console table.grid th { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); }
body.console table.grid th { color: var(--ink-3); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; }
body.console table.grid td:first-child { color: var(--ink-2); }
body.console table.grid tr:last-child td { border-bottom: 0; }
body.console details > summary { cursor: pointer; }

/* ---- buttons: one look, three weights ---- */
body.console button, #login button, #speed-box button {
  font: 550 0.88rem/1 var(--sans);
  min-height: 36px;
  padding: 0 0.95rem;
  margin: 0;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
body.console button:hover, #login button:hover { background: #f1f4f8; border-color: #aeb7c4; }
body.console button:active { background: #e8ecf2; }
body.console button:focus-visible, #login button:focus-visible, #sidebar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.console button:disabled { opacity: 0.5; cursor: not-allowed; }
body.console button.primary, #login button[type=submit] { background: var(--accent); border-color: var(--accent); color: #fff; }
body.console button.primary:hover, #login button[type=submit]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
body.console button.quiet { background: transparent; border-color: transparent; color: var(--accent); }
body.console button.quiet:hover { background: var(--accent-soft); border-color: transparent; }
body.console button.danger { color: var(--bad); border-color: #e3b5b1; }
body.console button.danger:hover { background: var(--bad-soft); }
body.console .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0; align-items: center; }
body.console .files button { background: transparent; border-color: var(--line-strong); font-weight: 500; }
body.console .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- status ---- */
body.console .pill, body.console .badge, body.console .st { border-radius: 999px; font-weight: 600; padding: 0.12rem 0.6rem; font-size: 0.72rem; background: #eceff3; color: var(--ink-2); }
body.console .pill.on, body.console .badge.approved, body.console .badge.q-PASS, body.console .st.passed, body.console .st.complete { background: var(--ok-soft); color: var(--ok); }
body.console .pill.off, body.console .badge.rejected, body.console .badge.q-REJECT, body.console .st.failed { background: var(--bad-soft); color: var(--bad); }
body.console .badge.q-REVISE, body.console .badge.review, body.console .st.processing, body.console .st.review { background: var(--warn-soft); color: var(--warn); }

/* ---- the print build: a real sequence, so it is numbered ---- */
.steps { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.4rem 0 0.4rem; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 0.9rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
.step.now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.step.locked { background: #f8f9fb; box-shadow: none; }
.step.locked h3, .step.locked .meta { color: var(--ink-3); }
.step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 0.85rem var(--sans); background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-strong); }
.step.now .step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.done .step-n { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.step h3 { font-size: 1rem; margin: 0.15rem 0 0.15rem; }
.step .meta { margin: 0 0 0.6rem; max-width: 62ch; }
.step-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step-actions:empty { display: none; }

/* ---- less-used choices stay out of the way ---- */
details.more { margin: 1.4rem 0 0.4rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
details.more > summary { font-weight: 600; font-size: 0.88rem; color: var(--ink-2); list-style: none; padding: 0.2rem 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-block; width: 1.2rem; color: var(--ink-3); }
details.more[open] > summary::before { content: "\2212"; }

/* ---- floating things ---- */
body.console .toast { border-radius: var(--radius); }
#speed-box { border-radius: var(--radius) !important; border-color: var(--line-strong) !important; }
@media (max-width: 900px) {
  body.console #work { padding: 1rem 1rem 3rem; }
  body.console #sidebar, body.console #stagerail { width: auto; }
  .step { grid-template-columns: 30px 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- the agents: the production line, what is next, and the book's details ---- */
.ag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ag-head h2 { margin: 0; }
ol.line { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0.8rem 0 1rem; }
.ln { display: grid; grid-template-columns: 10px auto; column-gap: 0.55rem; align-items: center; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fafbfc; }
.ln .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); grid-row: span 2; }
.ln .nm { font-weight: 600; font-size: 0.86rem; line-height: 1.2; }
.ln .sub { font-size: 0.72rem; color: var(--ink-3); line-height: 1.2; }
.ln.ok .dot { background: var(--ok); }
.ln.wait .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ln.go .dot, .ln.next .dot { background: var(--accent); }
.ln.warn .dot { background: #d18a00; }
.ln.bad .dot { background: var(--bad); }
.ln.cur { border-color: var(--accent); background: var(--accent-soft); }
.now { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbfc; }
.now h3 { font-size: 1rem; margin: 0 0 0.1rem; }
.now .meta { margin: 0; max-width: 64ch; }
.now-act { display: flex; gap: 0.5rem; flex-wrap: wrap; }
dl.facts { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact { display: grid; grid-template-columns: 11rem 1fr auto; gap: 0.8rem; align-items: center; padding: 0.35rem 0.6rem 0.35rem 1rem; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--ink-2); font-size: 0.85rem; }
.fact dd { margin: 0; font-size: 0.9rem; font-weight: 500; }
.card.handover { border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); margin-top: 1rem; }
@media (max-width: 700px) { .fact { grid-template-columns: 1fr auto; } .fact dt { grid-column: 1 / -1; } }

/* ---- a book's home ---- */
.bookhead { margin: 0.4rem 0 1.1rem; }
.bookhead h2 { font-size: 1.7rem; margin: 0 0 0.2rem; }
.crumb a { color: var(--accent); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.stagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.stagetile { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.stagetile:hover { border-color: var(--accent); background: var(--accent-soft); }
.stagetile b { font-size: 0.88rem; }

/* ---- a flow's stages as a plain list ---- */
.lead { max-width: 70ch; margin: 0 0 1rem; font-size: 0.95rem !important; }
.stagelist { margin-top: 0.6rem; border-top: 1px solid var(--line); }
.stagerow { border-bottom: 1px solid var(--line); }
.stagerow > summary { display: grid; grid-template-columns: 10px 12rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0.4rem; cursor: pointer; list-style: none; }
.stagerow > summary::-webkit-details-marker { display: none; }
.stagerow > summary:hover { background: #fafbfc; }
.stagerow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.stagerow .dot.ok { background: var(--ok); } .stagerow .dot.warn { background: #d18a00; }
.sl-name { font-weight: 600; font-size: 0.9rem; }
.sl-does { color: var(--ink-2); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stagedetail { margin: 0 0 0.9rem 1.7rem; display: grid; gap: 0.5rem; max-width: 70ch; }
.stagedetail div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.8rem; }
.stagedetail dt { color: var(--ink-3); font-size: 0.8rem; }
.stagedetail dd { margin: 0; font-size: 0.86rem; }
@media (max-width: 700px) { .stagerow > summary { grid-template-columns: 10px 1fr auto; } .sl-does { display: none; } .stagedetail div { grid-template-columns: 1fr; } }