/* The Editorial Desk — Book Life admin styles.
   A quiet publisher's back office: cool gray canvas, white paper cards,
   hairline rules, and the editor's blue pencil. Fraunces appears only on
   book titles; Inter carries the UI; monospace marks slugs and JSON. */

:root {
  --adm-bg: #f2f4f6;
  --adm-paper: #ffffff;
  --adm-ink: #1a2532;
  --adm-muted: #63707d;
  --adm-faint: #98a2ad;
  --adm-line: #dfe5ea;
  --adm-line-strong: #c9d3dc;
  --adm-blue: #35658f;
  --adm-blue-deep: #2b5275;
  --adm-blue-wash: #edf3f8;
  --adm-green: #2e7d52;
  --adm-green-wash: #e9f4ee;
  --adm-red: #b0413e;
  --adm-red-wash: #fbecea;
  --adm-amber: #9c641a;
  --adm-amber-wash: #faf2e2;
  --adm-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--adm-bg); color: var(--adm-ink); font: 400 14px/1.55 Inter, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Top bar ---------------------------------------------------------- */
.adm-bar { position: sticky; z-index: 30; top: 0; display: flex; gap: 1.4rem; align-items: center; min-height: 56px; padding: 0 clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--adm-line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); }
.adm-wordmark { display: flex; gap: .7rem; align-items: baseline; margin-right: auto; text-decoration: none; color: var(--adm-ink); }
.adm-wordmark strong { font: 600 1.15rem/1 Fraunces, serif; letter-spacing: -.01em; }
.adm-wordmark span { color: var(--adm-faint); font: 600 .62rem/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.adm-nav { display: flex; gap: .2rem; align-items: center; }
.adm-nav a { padding: .45rem .7rem; border-radius: 6px; color: var(--adm-muted); font-size: .82rem; font-weight: 500; text-decoration: none; }
.adm-nav a:hover { color: var(--adm-ink); background: #f2f5f8; }
.adm-nav a[aria-current="page"] { color: var(--adm-blue-deep); background: var(--adm-blue-wash); }
.adm-nav .adm-nav-external { margin-left: .8rem; color: var(--adm-faint); }
/* Desktop: the links wrapper is transparent so the link row lays out exactly
   as before. The Menu button and the collapsed panel only exist ≤720px. */
.adm-nav-links { display: contents; }
.adm-menu-btn { display: none; }
.adm-bar-user { display: flex; gap: .8rem; align-items: center; color: var(--adm-muted); font-size: .8rem; }
.adm-bar-user button { border: 0; background: none; padding: .45rem .7rem; border-radius: 6px; color: var(--adm-muted); font: inherit; cursor: pointer; }
.adm-bar-user button:hover { color: var(--adm-ink); background: #f2f5f8; }

/* --- Layout & sections ------------------------------------------------ */
.adm-main { max-width: 1080px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2rem) 5rem; }
.adm-page-head { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.4rem; flex-wrap: wrap; }
.adm-page-head h1 { margin: 0; font: 650 1.35rem/1.2 Inter, sans-serif; letter-spacing: -.01em; }
.adm-page-head .adm-count { color: var(--adm-faint); font-size: .82rem; }
.adm-crumb { display: block; margin-bottom: .35rem; color: var(--adm-faint); font-size: .78rem; text-decoration: none; }
.adm-crumb:hover { color: var(--adm-blue); }
.adm-card { margin-bottom: 1.1rem; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--adm-paper); box-shadow: 0 1px 2px rgba(26, 37, 50, .04); }
.adm-card-head { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid var(--adm-line); flex-wrap: wrap; }
.adm-card-head h2 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--adm-muted); }
.adm-card-head .adm-card-note { color: var(--adm-faint); font-size: .78rem; }
.adm-card-body { padding: 1.1rem; }
.adm-hint { margin: .4rem 0 0; color: var(--adm-faint); font-size: .78rem; }
.adm-empty { padding: 1.6rem 1.1rem; text-align: center; color: var(--adm-faint); font-size: .85rem; }

/* --- Buttons ---------------------------------------------------------- */
.adm-btn { display: inline-flex; gap: .4rem; align-items: center; justify-content: center; min-height: 34px; padding: .45rem .85rem; border: 1px solid var(--adm-line-strong); border-radius: 7px; background: var(--adm-paper); color: var(--adm-ink); font: 600 .8rem/1 Inter, sans-serif; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.adm-btn:hover { border-color: var(--adm-faint); background: #f7f9fb; }
.adm-btn-primary { border-color: var(--adm-blue); background: var(--adm-blue); color: #fff; }
.adm-btn-primary:hover { border-color: var(--adm-blue-deep); background: var(--adm-blue-deep); color: #fff; }
.adm-btn-danger { border-color: #d9b2ae; color: var(--adm-red); }
.adm-btn-danger:hover { border-color: var(--adm-red); background: var(--adm-red-wash); }
.adm-btn-ghost { border-color: transparent; color: var(--adm-muted); background: transparent; }
.adm-btn-ghost:hover { background: #eef1f4; }
.adm-btn:focus-visible, .adm-nav a:focus-visible, .adm-wordmark:focus-visible,
.adm-input:focus-visible, .adm-btn-icon:focus-visible { outline: 2px solid var(--adm-blue); outline-offset: 2px; }
.adm-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.adm-actions form { margin: 0; }

/* --- Badges ----------------------------------------------------------- */
.admin-badge { display: inline-flex; gap: .35rem; align-items: center; padding: .18rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.admin-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-badge-draft { background: #eef1f4; color: var(--adm-muted); }
.admin-badge-published { background: var(--adm-green-wash); color: var(--adm-green); }
.admin-badge-idle { background: #eef1f4; color: var(--adm-faint); }
.admin-badge-generating { background: var(--adm-blue-wash); color: var(--adm-blue); }
.admin-badge-generating::before { animation: adm-pulse 1.4s ease-in-out infinite; }
.admin-badge-ready { background: var(--adm-green-wash); color: var(--adm-green); }
.admin-badge-failed { background: var(--adm-red-wash); color: var(--adm-red); }
@keyframes adm-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .admin-badge-generating::before { animation: none; } }

/* Feedback badges — semantic statuses and categories */
.admin-badge-open { background: var(--adm-amber-wash); color: var(--adm-amber); }
.admin-badge-resolved { background: #eef1f4; color: var(--adm-muted); }
.admin-badge-bug { background: var(--adm-red-wash); color: var(--adm-red); }
.admin-badge-suggestion { background: var(--adm-blue-wash); color: var(--adm-blue); }
.admin-badge-praise { background: var(--adm-green-wash); color: var(--adm-green); }
.admin-badge-responded { background: var(--adm-green-wash); color: var(--adm-green); }

/* Community mentions + leads */
.adm-mention-cell { max-width: 46ch; vertical-align: top; }
.adm-mention-cell a { color: var(--adm-blue-deep); }
.adm-lead-notes { max-width: 30ch; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-badge-lead-new { background: var(--adm-blue-wash); color: var(--adm-blue); }
.admin-badge-lead-contacted { background: var(--adm-amber-wash); color: var(--adm-amber); }
.admin-badge-lead-replied { background: var(--adm-blue-wash); color: var(--adm-blue-deep); }
.admin-badge-lead-meeting { background: var(--adm-green-wash); color: var(--adm-green); }
.admin-badge-lead-done { background: #eef1f4; color: var(--adm-muted); }
.admin-badge-pending { background: var(--adm-amber-wash); color: var(--adm-amber); }
.admin-badge-approved { background: var(--adm-green-wash); color: var(--adm-green); }
.admin-badge-rejected { background: #eef1f4; color: var(--adm-muted); }
.admin-badge-admin { background: var(--adm-green-wash); color: var(--adm-green); }
.admin-badge-student { background: #eef1f4; color: var(--adm-muted); }
.adm-request-cover { width: 32px; height: 44px; border-radius: 3px 6px 6px 3px; object-fit: cover; background: linear-gradient(160deg, #3d4854, #2a5c6e); }

/* Error occurrences table */
.adm-error-cell { max-width: 46ch; vertical-align: top; }
.adm-error-class { display: block; color: var(--adm-red); font: 600 .78rem var(--adm-mono); }
.adm-error-details { margin-top: .2rem; }
.adm-error-details summary { cursor: pointer; overflow-wrap: anywhere; }
.adm-error-details[open] summary { margin-bottom: .4rem; }
.adm-backtrace { margin: 0; padding: .55rem .7rem; border-radius: 6px; background: #f7f9fb; color: var(--adm-muted); font: .72rem/1.55 var(--adm-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }

/* --- Flash ------------------------------------------------------------ */
.adm-flash { position: fixed; z-index: 40; top: calc(56px + .75rem); left: 50%; display: flex; gap: .7rem; align-items: center; max-width: min(640px, calc(100% - 2rem)); margin: 0; padding: .7rem .95rem; border: 1px solid var(--adm-line); border-left: 3px solid var(--adm-blue); border-radius: 8px; transform: translateX(-50%); background: var(--adm-paper); color: var(--adm-ink); box-shadow: 0 8px 24px rgba(26, 37, 50, .12); font-size: .82rem; transition: opacity .3s ease; }
.adm-flash-alert { border-left-color: var(--adm-red); background: var(--adm-red-wash); color: #7c2d2a; }
.adm-flash-notice { border-left-color: var(--adm-green); background: var(--adm-green-wash); color: #1e5c3c; }
.adm-flash .flash-close { flex: 0 0 auto; display: inline-flex; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(26, 37, 50, .08); color: inherit; font: inherit; font-size: .9rem; line-height: 1; align-items: center; justify-content: center; cursor: pointer; }
.adm-flash .flash-close:hover { background: rgba(26, 37, 50, .16); }
@media (prefers-reduced-motion: reduce) { .adm-flash { transition: none; } }

/* --- Table (index) ----------------------------------------------------- */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.adm-table th { position: relative; padding: .6rem 1rem; border-bottom: 1px solid var(--adm-line); color: var(--adm-faint); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.adm-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--adm-line); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: #f8fafc; }
.adm-book-cell { display: flex; gap: .8rem; align-items: center; min-width: 220px; }
.adm-spine { display: inline-flex; flex: 0 0 30px; height: 44px; border-radius: 3px 6px 6px 3px; align-items: center; justify-content: center; background: linear-gradient(160deg, #3d4854, #232e3a); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18); font-size: .85rem; }
.adm-book-cell h2 { margin: 0; font: 600 .98rem/1.25 Fraunces, serif; }
.adm-book-cell .adm-slug { margin-top: .15rem; color: var(--adm-faint); font: .68rem/1.2 var(--adm-mono); }
.adm-num { font-variant-numeric: tabular-nums; }
.adm-actions-cell { white-space: nowrap; }
.adm-actions-cell .adm-btn { min-height: 30px; padding: .3rem .6rem; font-size: .75rem; }
.adm-feedback-message { max-width: 42ch; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Spine gradients — the book's own cover class */
.adm-spine-storm-boy-cover { background: linear-gradient(160deg, #15394d, #2fa8c7 49%, #c9a66a 50%, #896338); }
.adm-spine-harry-potter-cover { background: radial-gradient(circle at 50% 28%, #f9ce6b 0 5%, transparent 6%), linear-gradient(155deg, #26204c, #4a317b 54%, #17172f); }
.adm-spine-verne-cover { background: linear-gradient(160deg, #173a52, #2fa8c7 49%, #e0b45c 50%, #8a5a2b); }
.adm-spine-esio-trot-cover { background: linear-gradient(160deg, #3a5f3a, #7fae6b 49%, #2d4a2d 50%, #1d3320); }
.adm-spine-alchemist-cover { background: linear-gradient(160deg, #8a5a2b, #e0b45c 49%, #173a52 50%, #0d2233); }
.adm-spine-roller-coaster-cover { background: linear-gradient(160deg, #2d1b4e, #6a3fb5 49%, #ffd166 50%, #c9425f); }
.adm-spine-root-words-cover { background: linear-gradient(160deg, #234d3b, #3f8a68 49%, #e8dcc5 50%, #9c8a63); }
.adm-spine-rabbit-soldier-cover { background: linear-gradient(160deg, #414f63, #718096 49%, #e2e8f0 50%, #9fb3c8); }
.adm-spine-the-hope-cover { background: linear-gradient(160deg, #1e3a5f, #3a6ea5 49%, #f0f4f8 50%, #c9d6e3); }

/* --- Search ----------------------------------------------------------- */
.adm-search { position: relative; width: 260px; max-width: 100%; }
.adm-search input { width: 100%; height: 36px; padding: .45rem .8rem .45rem 2rem; border: 1px solid var(--adm-line-strong); border-radius: 7px; background: var(--adm-paper); color: var(--adm-ink); font: inherit; font-size: .84rem; }
.adm-search::before { position: absolute; top: 50%; left: .75rem; transform: translateY(-50%); content: "⌕"; color: var(--adm-faint); font-size: .95rem; }
.adm-toolbar { display: flex; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; }

/* --- Pipeline stepper (book page) -------------------------------------- */
.adm-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 1.4rem; padding: 0; list-style: none; border: 1px solid var(--adm-line); border-radius: 10px; background: var(--adm-paper); overflow: hidden; }
.adm-step { position: relative; display: flex; gap: .6rem; align-items: center; padding: .95rem 1rem; }
.adm-step + .adm-step { border-left: 1px solid var(--adm-line); }
.adm-step-mark { display: inline-flex; flex: 0 0 22px; height: 22px; border: 2px solid var(--adm-line-strong); border-radius: 50%; align-items: center; justify-content: center; color: var(--adm-faint); font-size: .68rem; font-weight: 700; }
.adm-step-name { display: block; font-size: .8rem; font-weight: 650; }
.adm-step-note { display: block; margin-top: .1rem; color: var(--adm-faint); font-size: .7rem; }
.adm-step-done .adm-step-mark { border-color: var(--adm-blue); background: var(--adm-blue); color: #fff; }
.adm-step-done .adm-step-name { color: var(--adm-blue-deep); }
.adm-step-current { background: var(--adm-blue-wash); }
.adm-step-current .adm-step-mark { border-color: var(--adm-blue); color: var(--adm-blue); }
.adm-step-failed .adm-step-mark { border-color: var(--adm-red); background: var(--adm-red-wash); color: var(--adm-red); }
.adm-step-failed .adm-step-name { color: var(--adm-red); }
@media (max-width: 720px) { .adm-pipeline { grid-template-columns: 1fr 1fr; } .adm-step + .adm-step { border-left: 0; } .adm-step:nth-child(2n) { border-left: 1px solid var(--adm-line); } }

/* --- Book page ---------------------------------------------------------- */
.adm-book-hero { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.adm-book-hero h1 { margin: 0; font: 600 1.6rem/1.15 Fraunces, serif; letter-spacing: -.01em; }
.adm-book-hero .adm-byline { margin: .25rem 0 0; color: var(--adm-muted); font-size: .88rem; }
.adm-book-hero .adm-badges { display: flex; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.adm-book-hero .admin-badges { display: flex; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.adm-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem 1.4rem; margin: 0; }
.adm-meta dt { margin: 0 0 .1rem; color: var(--adm-faint); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.adm-meta dd { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.adm-meta dd.adm-mono { font-family: var(--adm-mono); font-size: .78rem; }
.adm-stage-list, .adm-career-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.adm-stage-list li { display: flex; gap: .55rem; align-items: center; font-size: .85rem; }
.adm-career-list li { padding: .6rem .75rem; border: 1px solid var(--adm-line); border-radius: 8px; }
.adm-career-list .adm-career-name { font-weight: 650; font-size: .85rem; }
.adm-career-list .adm-career-stages { margin-top: .2rem; color: var(--adm-muted); font-size: .78rem; }
.adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 760px) { .adm-grid-2 { grid-template-columns: 1fr; } }

/* Questions table */
.adm-q-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.adm-q-table th { padding: .5rem .7rem; border-bottom: 1px solid var(--adm-line); color: var(--adm-faint); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.adm-q-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--adm-line); vertical-align: top; }
.adm-q-table tr:last-child td { border-bottom: 0; }
.adm-q-num { color: var(--adm-faint); font: .72rem var(--adm-mono); white-space: nowrap; }
.adm-q-cat { white-space: nowrap; }
.adm-q-text { min-width: 260px; }
.adm-q-answer { white-space: nowrap; }
.adm-q-answer mark { padding: .08rem .4rem; border-radius: 4px; background: var(--adm-green-wash); color: var(--adm-green); font-size: .76rem; font-weight: 600; }
.adm-q-answer .adm-bool { display: inline-block; padding: .08rem .45rem; border-radius: 4px; background: var(--adm-blue-wash); color: var(--adm-blue-deep); font-size: .76rem; font-weight: 600; }

/* Town preview */
.adm-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.adm-room { padding: .8rem .9rem; border: 1px solid var(--adm-line); border-radius: 8px; }
.adm-room h3 { margin: 0 0 .35rem; font-size: .88rem; font-weight: 650; }
.adm-room .adm-room-slug { color: var(--adm-faint); font: .68rem var(--adm-mono); }
.adm-room p { margin: .4rem 0 0; color: var(--adm-muted); font-size: .8rem; }
.adm-chips { display: flex; gap: .35rem; margin-top: .55rem; flex-wrap: wrap; }
.adm-chip { padding: .12rem .5rem; border: 1px solid var(--adm-line); border-radius: 999px; background: #f7f9fb; color: var(--adm-muted); font-size: .7rem; }
.adm-chip-world { border-color: var(--adm-blue); background: var(--adm-blue-wash); color: var(--adm-blue-deep); }
.adm-task-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.adm-task-list li { display: flex; gap: .6rem; align-items: baseline; font-size: .83rem; }
.adm-task-list .adm-task-kind { flex: 0 0 auto; padding: .05rem .4rem; border-radius: 4px; background: #eef1f4; color: var(--adm-muted); font: .66rem/1.6 var(--adm-mono); }

/* Error panel */
.adm-alert-panel { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 1.2rem; padding: .85rem 1rem; border: 1px solid #e5b9b4; border-radius: 10px; background: var(--adm-red-wash); }
.adm-alert-panel p { margin: 0; color: #7c2d2a; font-size: .84rem; }
.adm-alert-panel strong { display: block; margin-bottom: .15rem; }

/* --- Forms -------------------------------------------------------------- */
.adm-form .adm-field { margin: 0 0 1rem; }
.adm-form label { display: block; margin: 0 0 .3rem; color: var(--adm-ink); font-size: .78rem; font-weight: 600; }
.adm-form label .adm-opt { color: var(--adm-faint); font-weight: 400; }
.adm-input { width: 100%; padding: .5rem .65rem; border: 1px solid var(--adm-line-strong); border-radius: 7px; background: var(--adm-paper); color: var(--adm-ink); font: inherit; font-size: .88rem; }
.adm-input::placeholder { color: var(--adm-faint); }
.adm-input:focus { border-color: var(--adm-blue); box-shadow: 0 0 0 3px rgba(53, 101, 143, .15); outline: none; }
.adm-input-mono { font-family: var(--adm-mono); font-size: .8rem; }
.adm-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.adm-field-grid .adm-field-full { grid-column: 1 / -1; }
.adm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 720px) { .adm-field-grid, .adm-field-row { grid-template-columns: 1fr; } }
.adm-required::after { content: " *"; color: var(--adm-red); }
.admin-json { width: 100%; min-height: 130px; padding: .65rem .75rem; border: 1px solid var(--adm-line-strong); border-radius: 7px; background: #fbfcfd; color: var(--adm-ink); font: .78rem/1.6 var(--adm-mono); tab-size: 2; resize: vertical; }
.admin-json:focus { border-color: var(--adm-blue); box-shadow: 0 0 0 3px rgba(53, 101, 143, .15); outline: none; }

/* Question editor rows */
.adm-question-row { margin: 0 0 .7rem; padding: .85rem .95rem; border: 1px solid var(--adm-line); border-radius: 9px; background: #fbfcfd; }
.adm-question-row-head { display: flex; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.adm-question-row-num { color: var(--adm-faint); font: .7rem/1 var(--adm-mono); }
.adm-remove { border: 0; padding: .2rem .4rem; border-radius: 5px; background: none; color: var(--adm-faint); font: 600 .72rem Inter, sans-serif; cursor: pointer; }
.adm-remove:hover { background: var(--adm-red-wash); color: var(--adm-red); }
.adm-question-grid { display: grid; grid-template-columns: 170px 150px 1fr; gap: .6rem .8rem; align-items: start; }
.adm-question-grid .adm-q-text { grid-column: 1 / -1; }
.adm-question-grid .adm-q-explanation { grid-column: 1 / -1; }
.adm-question-grid .adm-q-mc { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: .4rem .8rem; }
.adm-question-grid .adm-q-tf { display: block; }
.admin-question-row.is-mc .adm-q-mc { display: grid; }
.admin-question-row.is-mc .adm-q-tf { display: none; }
.adm-question-grid textarea { width: 100%; padding: .45rem .6rem; border: 1px solid var(--adm-line-strong); border-radius: 7px; background: var(--adm-paper); color: var(--adm-ink); font: inherit; font-size: .84rem; resize: vertical; }
.adm-question-grid select, .adm-question-grid input[type="text"] { width: 100%; padding: .45rem .6rem; border: 1px solid var(--adm-line-strong); border-radius: 7px; background: var(--adm-paper); color: var(--adm-ink); font: inherit; font-size: .84rem; }
.adm-question-grid select:focus, .adm-question-grid textarea:focus, .adm-question-grid input[type="text"]:focus { border-color: var(--adm-blue); outline: none; }
@media (max-width: 720px) { .adm-question-grid { grid-template-columns: 1fr; } }

/* Sticky save footer */
.adm-savebar { position: sticky; z-index: 20; bottom: 0; display: flex; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 1.2rem; padding: .8rem 1.1rem; border: 1px solid var(--adm-line); border-top: 0; border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 -6px 20px rgba(26, 37, 50, .07); }
.adm-savebar .adm-savebar-note { color: var(--adm-faint); font-size: .78rem; }

/* Footer meta */
.adm-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--adm-line); color: var(--adm-faint); font-size: .75rem; }

/* --- Monitoring dashboard ------------------------------------------------ */
.adm-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.adm-metric { padding: .8rem .9rem; border: 1px solid var(--adm-line); border-radius: 8px; background: #fbfcfd; }
.adm-metric-label { display: flex; gap: .4rem; align-items: center; margin: 0 0 .35rem; color: var(--adm-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.adm-metric-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--adm-faint); }
.adm-metric-value { margin: 0; font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.adm-metric-unit { margin-left: .15rem; color: var(--adm-faint); font-size: .75rem; font-weight: 600; }
.adm-metric-threshold { margin: .25rem 0 0; color: var(--adm-faint); font-size: .7rem; }
.adm-metric-ok { color: var(--adm-green); }
.adm-metric-warn { color: var(--adm-amber); }
.adm-metric-crit { color: var(--adm-red); }
.adm-metric-na { color: var(--adm-faint); }
.adm-metric-dot.adm-metric-ok { background: var(--adm-green); }
.adm-metric-dot.adm-metric-warn { background: var(--adm-amber); }
.adm-metric-dot.adm-metric-crit { background: var(--adm-red); }
.adm-sparklines { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.adm-spark { margin: 0; }
.adm-spark figcaption { margin: 0 0 .35rem; color: var(--adm-muted); font-size: .72rem; font-weight: 600; }
.adm-sparkline { display: block; width: 100%; height: auto; }

/* --- Small screens ------------------------------------------------------ */
/* ≤720px the nav links collapse into a dropdown toggled by the Menu button
   (see application.js): the wordmark stays left, Menu + sign out stay right.
   The bar is sticky, so the absolutely-positioned panel anchors to it. */
@media (max-width: 720px) {
  .adm-bar { flex-wrap: nowrap; gap: .7rem; padding-top: .5rem; padding-bottom: .5rem; }
  .adm-wordmark { flex: 0 0 auto; }
  .adm-wordmark span, .adm-bar-user span { display: none; }
  .adm-bar-user { margin-left: 0; }
  .adm-menu-btn {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 34px;
    padding: .45rem .7rem;
    border: 1px solid var(--adm-line-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--adm-muted);
    font: inherit;
    align-items: center;
    cursor: pointer;
  }
  .adm-menu-btn:hover { color: var(--adm-ink); background: #f2f5f8; }
  .adm-menu-btn:focus-visible { outline: 2px solid var(--adm-blue); outline-offset: 2px; }
  .adm-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: .1rem;
    align-items: stretch;
    max-height: calc(100dvh - 3.5rem);
    padding: .6rem clamp(1rem, 3vw, 2rem) .8rem;
    overflow-y: auto;
    border-bottom: 1px solid var(--adm-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 28px rgba(26, 37, 50, .16);
  }
  body.adm-menu-open .adm-nav-links { display: flex; }
  .adm-nav-links a { padding: .6rem .75rem; }
  .adm-nav-links .adm-nav-external { margin-left: 0; }
  .adm-page-head h1 { font-size: 1.15rem; }
  .adm-question-grid .adm-q-mc { grid-template-columns: 1fr; }
}
