@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --paper:#F5EFE2; --card:#FDFAF3; --card-border:#E4D9C5;
  --ink:#26211A; --ink-soft:#3d362c;
  --tuerkis:#168B98; --tuerkis-soft:#D7ECEE; --tuerkis-dark:#115D63;
  --salbei:#3D6B4F; --salbei-soft:#E7EFE2;
  --terra:#C2613F;
  /* Soft terracotta — a derived warm tint of --terra used for conflict strips and
     parse-error emphasis. Kept literal (the in-CSS color-mix equivalent computed
     slightly less saturated than the Variant A palette in the prototype). */
  --terra-soft:#F6DDD2;
  --muted:#6E6450; --muted-soft:#8A7D68; --line:#B0A48C;
}

.admin *, .admin *::before, .admin *::after { box-sizing:border-box; }
.admin .admin-picker { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.admin {
  background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  font-feature-settings:"ss01","cv11";
}
.admin a, .admin button { color:inherit; }

/* ========= TOP BAR ========= */
.admin .topbar {
  display:flex; align-items:center; gap:14px;
  padding:14px 26px;
  background:var(--ink); color:var(--paper);
  border-bottom:1px solid var(--ink);
}
.admin .topbar .logo {
  display:grid; grid-template-columns:repeat(4,12px); grid-template-rows:repeat(4,12px); gap:2px;
  width:64px; height:64px;
}
.admin .topbar .logo i { display:block; border-radius:2px; background:var(--paper); }
.admin .topbar .logo i.t { background:var(--tuerkis); }
.admin .topbar .wordmark {
  font:700 20px/1 "Newsreader",Georgia,serif;
  letter-spacing:-.005em; color:var(--paper);
}
.admin .topbar .wordmark small {
  display:inline-block; margin-left:8px;
  font:500 13px/1 "Hanken Grotesk",sans-serif;
  color:var(--tuerkis-soft); letter-spacing:.04em;
}
.admin .topbar .spacer { flex:1; }
.admin .topbar .ghost-btn {
  all:unset; cursor:pointer; font-weight:700; font-size:13px;
  padding:8px 14px; border-radius:8px; color:var(--paper);
}
.admin .topbar .ghost-btn:hover { background:rgba(255,255,255,.08); }

/* "← Bibliothek" affordance — return to the empty/library state from a selection
   or the Inbox. Subtle on the dark top bar; mirrors the Esc keybinding. */
.admin .topbar .library-btn {
  all:unset; cursor:pointer; margin-left:10px;
  font:600 12px/1 ui-monospace,monospace; letter-spacing:.06em;
  padding:5px 10px; border-radius:6px;
  background:rgba(22,139,152,.16); color:var(--tuerkis-soft);
  border:1px solid rgba(22,139,152,.45);
}
.admin .topbar .library-btn:hover {
  background:rgba(22,139,152,.32); color:#fff;
}

/* ========= LOGIN ========= */
.admin .login-shell {
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 92px); padding:40px 24px;
}
.admin .login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width:min(420px,100%);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:40px 36px 36px;
  box-shadow:0 30px 60px -40px rgba(40,36,24,.4);
}
.admin .login-card .lockup {
  display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.admin .login-card .lockup .mini-logo {
  display:grid; grid-template-columns:repeat(4,7px); grid-template-rows:repeat(4,7px); gap:1.5px;
}
.admin .login-card .lockup .mini-logo i { display:block; background:var(--ink); border-radius:1.5px; }
.admin .login-card .lockup .mini-logo i.t { background:var(--tuerkis); }
.admin .login-card .lockup .lockup-text { font:500 13px/1.2 "Newsreader",Georgia,serif; font-style:italic; color:var(--muted); }
.admin .login-card h1 { margin:0 0 6px; font:600 28px/1 "Newsreader",Georgia,serif; color:var(--ink); }
.admin .login-card .lead { font-size:13px; color:var(--muted); font-weight:600; margin:0 0 24px; }
.admin .login-card label { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.admin .login-card label span { font:700 11px/1 "Hanken Grotesk",sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.admin .login-card input {
  font-family:inherit; font-size:14px;
  padding:11px 13px;
  border:1px solid var(--card-border); border-radius:9px;
  background:var(--paper); color:var(--ink);
}
.admin .login-card input:focus { outline:none; border-color:var(--tuerkis); box-shadow:0 0 0 3px var(--tuerkis-soft); }
.admin .login-card .submit {
  margin-top:18px;
}
.admin .login-card .submit button {
  all:unset; cursor:pointer; text-align:center;
  width:80%;
  align-self: center;
  padding:13px 18px;
  border-radius:9px;
  background:var(--ink); color:var(--paper);
  font-weight:800; font-size:13px;
  letter-spacing:.04em;
}
.admin .login-card .submit button:hover { background:#000; }
.admin .login-card .submit button:disabled { opacity:.5; cursor:default; }
.admin .login-card .err {
  margin-top:12px;
  padding:10px 12px; border-radius:8px;
  background:var(--terra-soft); color:var(--terra);
  font-size:13px; font-weight:600;
}

/* ========= WORKSPACE — rail + desk ========= */
.admin .workspace {
  display:flex;
  min-height:calc(100vh - 92px);
}
.admin .rail {
  width:340px; flex:0 0 340px;
  background:var(--paper);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top:92px;
  align-self:flex-start;
  height:calc(100vh - 92px);
  overflow-y:auto;
}
.admin .desk {
  flex:1; min-width:0;
  background:var(--paper);
  display:flex; flex-direction:column;
}

/* ========= LEFT RAIL: search + drafts banner + eingang + list ========= */
.admin .rail .rail-head {
  padding:20px 22px 12px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0;
  background:var(--paper);
  z-index:2;
}
.admin .rail .search {
  display:flex; align-items:center; gap:8px;
  padding:9px 11px;
  border:1px solid var(--card-border);
  border-radius:9px; background:var(--card);
  transition:border-color 140ms, box-shadow 140ms;
}
.admin .rail .search:focus-within { border-color:var(--tuerkis); box-shadow:0 0 0 3px var(--tuerkis-soft); }
.admin .rail .search .icon { color:var(--muted); font-size:14px; }
.admin .rail .search input {
  flex:1; border:0; background:transparent; font:inherit; font-size:13px;
  outline:0; color:var(--ink);
}
.admin .rail .search .kbd {
  font:700 11px ui-monospace,monospace; padding:2px 6px;
  border-radius:5px; background:var(--paper);
  border:1px solid var(--card-border); color:var(--muted);
}

/* drafts banner - the "X Entwürfe bereit" CTA */
.admin .rail .drafts-banner {
  margin:14px 18px 0;
  padding:14px 14px;
  border-radius:10px;
  background:var(--tuerkis-soft);
  border:1px solid var(--tuerkis);
  display:flex; align-items:center; gap:12px;
  animation:bannerIn 260ms ease-out;
}
.admin .rail .drafts-banner .label {
  font:700 12px/1.3 "Hanken Grotesk",sans-serif;
  color:var(--tuerkis-dark); letter-spacing:.04em;
  text-transform:uppercase;
}
.admin .rail .drafts-banner .label b { font-weight:800; color:var(--ink); }
.admin .rail .drafts-banner .label .count {
  display:inline-block; padding:2px 7px; margin-right:6px;
  border-radius:5px; background:var(--tuerkis); color:#fff;
  font:800 13px/1 ui-monospace,monospace;
  text-transform:none; letter-spacing:0;
}
.admin .rail .drafts-banner .label .text { display:block; margin-top:2px; color:var(--tuerkis-dark); font-weight:600; }
.admin .rail .drafts-banner button.batch {
  all:unset; cursor:pointer; font-weight:800; font-size:12px;
  padding:9px 12px; border-radius:7px;
  background:var(--tuerkis); color:#fff;
  white-space:nowrap;
}
.admin .rail .drafts-banner button.batch:hover { filter:brightness(.95); }
.admin .rail .drafts-banner button.batch:disabled { opacity:.4; cursor:default; }

/* eingang virtual row */
.admin .rail .eingang {
  display:flex; align-items:center; gap:10px;
  padding:14px 22px; margin-top:14px;
  border-bottom:1px solid var(--line);
  font-style:italic; cursor:pointer;
}
.admin .rail .eingang:hover { background:rgba(22,139,152,.04); }
.admin .rail .eingang.on { background:var(--tuerkis-soft); border-left:2px solid var(--tuerkis); padding-left:20px; }
.admin .rail .eingang .n {
  font:600 17px/1 "Newsreader",Georgia,serif; color:var(--ink);
}
.admin .rail .eingang .cnt {
  font:700 11px/1 ui-monospace,monospace;
  padding:3px 7px; border-radius:6px;
  background:var(--tuerkis); color:#fff;
  font-style:normal;
}
.admin .rail .eingang .sub {
  margin-left:auto;
  font:700 11px/1 ui-monospace,monospace; color:var(--muted);
  font-style:normal;
}

/* list (persisted puzzles) */
.admin .rail .lrow {
  display:flex; align-items:center; gap:12px;
  padding:11px 22px; border-bottom:1px solid var(--line);
  cursor:pointer;
  border-left:2px solid transparent;
}
.admin .rail .lrow:hover { background:rgba(0,0,0,.025); }
.admin .rail .lrow.on {
  background:#f1e9d8;
  border-left-color:var(--ink);
  padding-left:20px;
}
.admin .rail .lrow .id {
  font:700 16px/1 "Newsreader",Georgia,serif; color:var(--ink);
}
.admin .rail .lrow .ver {
  margin-left:auto; font:700 11px/1 ui-monospace,monospace; color:var(--muted-soft);
}

/* CHIP */
.admin .chip {
  display:inline-block;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.admin .chip.draft { color:var(--muted); background:transparent; border-color:var(--card-border); }
.admin .chip.scheduled { color:var(--tuerkis-dark); background:var(--tuerkis-soft); }
.admin .chip.published { color:var(--salbei); background:var(--salbei-soft); }
.admin .chip.ok { color:var(--salbei); background:var(--salbei-soft); }
.admin .chip.warn { color:var(--terra); background:var(--terra-soft); }

/* ========= DESK: Empty ========= */
.admin .desk-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 30px; text-align:center;
}
.admin .desk-empty .brand-block {
  display:grid; grid-template-columns:repeat(4,18px); grid-template-rows:repeat(4,18px); gap:3px;
  margin-bottom:32px; padding:18px;
  border-radius:12px; background:var(--card); border:1px solid var(--card-border);
}
.admin .desk-empty .brand-block i { display:block; background:var(--ink); border-radius:3px; }
.admin .desk-empty .brand-block i.t { background:var(--tuerkis); }
.admin .desk-empty h1 {
  margin:0;
  font:600 30px/1.15 "Newsreader",Georgia,serif; color:var(--ink); max-width:520px;
}
.admin .desk-empty h1 em { font-style:italic; color:var(--tuerkis-dark); }
.admin .desk-empty .sub {
  font-size:14px; color:var(--muted); font-weight:600;
  margin:14px 0 32px; max-width:480px;
}
.admin .desk-empty .actions { display:flex; gap:14px; }
.admin .desk-empty .pill {
  all:unset; cursor:pointer;
  padding:11px 20px; border-radius:9px;
  font:700 13px/1 "Hanken Grotesk",sans-serif;
  letter-spacing:.04em; text-transform:uppercase;
  background:var(--card); border:1px solid var(--card-border); color:var(--ink);
}
.admin .desk-empty .pill.primary { background:var(--ink); color:var(--paper); border:none; }
.admin .desk-empty .pill:hover { filter:brightness(.97); }

/* ========= DESK: Inbox ========= */
.admin .desk-inbox {
  padding:32px 36px 60px; max-width:1280px; margin:0 auto; width:100%;
}
.admin .desk-inbox .head {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.admin .desk-inbox .head h1 {
  margin:0;
  font:600 30px/1 "Newsreader",Georgia,serif; color:var(--ink);
}
.admin .desk-inbox .head h1 small {
  display:block;
  font:700 12px/1 ui-monospace,monospace; color:var(--muted);
  margin-top:6px; letter-spacing:.04em;
}
.admin .desk-inbox .head .verwerfen {
  all:unset; cursor:pointer;
  font:700 12px/1 ui-monospace,monospace;
  color:var(--muted); padding:7px 12px;
  border:1px solid var(--card-border); border-radius:6px;
  background:var(--card);
}
.admin .desk-inbox .head .verwerfen:hover { color:var(--terra); border-color:var(--terra); }

.admin .desk-inbox .body {
  /* Preview column grows with viewport — wider on desktop so a full 8–13 column
     crossword sits comfortably without scrolling; narrower panes clamp to 420px
     so the staged list still has room. */
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(420px,38%,560px);
  gap:32px;
}

/* drop target inside the inbox */
.admin .inbox-droptarget {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 30px; border:2px dashed var(--card-border); border-radius:12px;
  text-align:center; cursor:pointer;
  transition:border-color 150ms, background 150ms;
  background:var(--card);
}
.admin .inbox-droptarget:hover { border-color:var(--tuerkis); background:rgba(22,139,152,.04); }
.admin .inbox-droptarget.drag-over { border-color:var(--tuerkis); background:var(--tuerkis-soft); }
.admin .inbox-droptarget .big {
  font:600 22px/1 "Newsreader",Georgia,serif; margin-bottom:8px; color:var(--ink);
}
.admin .inbox-droptarget .sub { font-size:13px; color:var(--muted); margin-bottom:18px; }
.admin .inbox-droptarget .btn {
  all:unset; cursor:pointer;
  font-weight:800; font-size:13px; letter-spacing:.04em;
  padding:11px 22px; border-radius:9px;
  background:var(--ink); color:var(--paper);
}

/* staged list rows */
.admin .desk-inbox .staged-list { display:flex; flex-direction:column; gap:8px; }
.admin .desk-inbox .staged-row {
  display:grid; grid-template-columns:64px 1fr auto; align-items:center;
  gap:14px; padding:14px 16px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--card); cursor:pointer;
  transition:border-color 150ms, box-shadow 150ms;
}
.admin .desk-inbox .staged-row:hover { border-color:var(--tuerkis); }
.admin .desk-inbox .staged-row.on { outline:2px solid var(--tuerkis); }
.admin .desk-inbox .staged-row .id {
  font:700 18px/1 "Newsreader",Georgia,serif; color:var(--ink);
}
.admin .desk-inbox .staged-row .files {
  font:600 12px/1.4 ui-monospace,monospace; color:var(--muted);
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.admin .desk-inbox .staged-row .files span { display:inline-block; }
.admin .desk-inbox .staged-row .files .plus { color:var(--muted-soft); }
.admin .desk-inbox .staged-row .conflict {
  grid-column:1 / -1;
  display:flex; gap:8px; align-items:center;
  margin-top:8px; padding:8px 10px;
  border-radius:6px; background:var(--terra-soft);
  font:700 11px/1.4 ui-monospace,monospace; color:var(--terra);
}
.admin .desk-inbox .staged-row .conflict .chip { font-size:10px; }
.admin .desk-inbox .staged-row .err-line {
  grid-column:1 / -1;
  font:700 11px/1.4 ui-monospace,monospace; color:var(--terra);
  padding:6px 0 0;
}
.admin .desk-inbox .staged-row .saved-mark {
  grid-column:1 / -1; font:700 11px/1 ui-monospace,monospace; color:var(--salbei);
  padding-top:6px;
}

/* inbox actions */
.admin .desk-inbox .actions {
  margin-top:24px; display:flex; gap:14px; align-items:center;
  padding:18px 0; border-top:1px solid var(--ink);
}
.admin .desk-inbox .actions .batch {
  all:unset; cursor:pointer;
  padding:13px 22px; border-radius:9px;
  background:var(--ink); color:var(--paper);
  font:800 13px/1 "Hanken Grotesk",sans-serif;
  letter-spacing:.04em;
}
.admin .desk-inbox .actions .batch:disabled { opacity:.4; cursor:default; }
.admin .desk-inbox .actions .batch .count {
  display:inline-block; padding:2px 7px; margin-right:8px;
  border-radius:5px; background:var(--tuerkis); color:#fff;
  font:800 12px/1 ui-monospace,monospace;
}
.admin .desk-inbox .actions .verw {
  all:unset; cursor:pointer;
  font:700 12px/1 ui-monospace,monospace; color:var(--muted);
  padding:8px 12px; border:1px solid var(--card-border); border-radius:6px;
  background:var(--card);
}
.admin .desk-inbox .actions .verw.confirm {
  color:var(--terra); border-color:var(--terra);
}
.admin .desk-inbox .actions .kbd-hint {
  margin-left:auto;
  font:700 11px ui-monospace,monospace; color:var(--muted-soft);
}
.admin .desk-inbox .actions .kbd-hint .kbd {
  padding:2px 5px; border:1px solid var(--card-border); border-radius:4px;
  background:var(--card); margin-right:4px;
}

/* preview pane — a container-query context so PuzzleGridView's --cell scales
   to fit the available width regardless of the pane size. */
.admin .deck-preview {
  background:var(--card); border:1px solid var(--card-border); border-radius:12px;
  padding:20px; display:flex; flex-direction:column; align-items:center;
  container-type:inline-size;
}
.admin .deck-preview .gridview {
  /* Reskins the component: cell caps at 36px so the grid doesn't blow up in a
     560px preview, and floors at 20px so even a phone-sized preview renders a
     recognisable grid (the gridcard itself scrolls horizontally past that). */
  --cell:clamp(20px, calc((100cqi - 56px) / 12), 36px);
  width:100%;
}
.admin .deck-preview .gridview .clues { grid-template-columns:1fr; }
@container (min-width: 520px) {
  .admin .deck-preview .gridview .clues { grid-template-columns:1fr 1fr; }
}
.admin .deck-preview .label { font:700 11px/1 ui-monospace,monospace; color:var(--muted); margin-bottom:12px; letter-spacing:.04em; }
.admin .deck-preview .label b { color:var(--ink); }
.admin .deck-preview-empty {
  background:var(--card); border:1px dashed var(--card-border); border-radius:12px;
  padding:30px 18px; text-align:center;
  font:600 14px/1.4 "Newsreader",Georgia,serif; color:var(--muted); font-style:italic;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.admin .deck-preview-empty .pip { font:700 11px/1 ui-monospace,monospace; color:var(--muted-soft); font-style:normal; }

/* ========= DESK: Detail ========= */
.admin .desk-detail {
  padding:32px 36px 60px; max-width:1280px; margin:0 auto; width:100%;
}
.admin .desk-detail .hero {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:24px; margin-bottom:0;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:14px;
}
.admin .desk-detail .hero .hero-id {
  margin:0;
  font:600 64px/1 "Newsreader",Georgia,serif;
  letter-spacing:-.02em; color:var(--ink);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
.admin .desk-detail .hero .hero-id small {
  display:block;
  font-family:"Newsreader",Georgia,serif;
  font-weight:500; font-style:italic; font-size:13px;
  color:var(--muted); margin-top:8px;
}
.admin .desk-detail .hero .actions { display:flex; gap:10px; align-items:center; }
.admin .btn-primary {
  all:unset; cursor:pointer;
  font:800 13px/1 "Hanken Grotesk",sans-serif;
  letter-spacing:.04em;
  padding:11px 18px; border-radius:9px;
  background:var(--ink); color:var(--paper);
}
.admin .btn-primary:hover { background:#000; }
.admin .btn-primary:disabled { opacity:.4; cursor:default; }
.admin .btn-ghost {
  all:unset; cursor:pointer;
  font:700 13px/1 "Hanken Grotesk",sans-serif;
  letter-spacing:.04em;
  padding:11px 18px; border-radius:9px;
  background:transparent; color:var(--muted);
  border:1px solid var(--card-border);
}
.admin .btn-ghost:hover { background:var(--card); color:var(--ink); }
.admin .btn-danger {
  all:unset; cursor:pointer;
  font:700 13px/1 "Hanken Grotesk",sans-serif;
  letter-spacing:.04em;
  padding:11px 18px; border-radius:9px;
  background:transparent; color:var(--terra);
  border:1px solid var(--terra);
}
.admin .btn-danger:hover { background:var(--terra); color:var(--paper); }

.admin .desk-detail .meta-strip {
  display:flex; gap:36px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink);
  flex-wrap:wrap;
}
.admin .desk-detail .meta-strip .k { color:var(--muted); font-weight:700; margin-right:8px; }
.admin .desk-detail .meta-strip .v { font-family:ui-monospace,monospace; font-weight:600; }

/* delete confirm bar inline */
.admin .desk-detail .confirm {
  margin:18px 0 0;
  padding:14px 18px;
  background:var(--terra-soft);
  border:1px solid var(--terra); border-radius:10px;
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.admin .desk-detail .confirm .msg { font-weight:700; font-size:14px; color:var(--terra); }
.admin .desk-detail .confirm .msg b { font:800 14px ui-monospace,monospace; color:var(--ink); margin-right:4px; }
.admin .desk-detail .confirm button.cancel {
  all:unset; cursor:pointer; margin-left:auto;
  font:700 12px ui-monospace,monospace; color:var(--muted);
  padding:7px 11px; border:1px solid var(--card-border); border-radius:6px; background:var(--card);
}

/* ========= DRAG OVERLAY (transient) ========= */
.admin-drag-overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(245,239,226,.94);
  border:6px dashed var(--tuerkis);
  margin:14px; border-radius:16px;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px;
  pointer-events:none;
}
.admin-drag-overlay.show { display:flex; }
.admin-drag-overlay .brand {
  display:grid; grid-template-columns:repeat(4,28px); grid-template-rows:repeat(4,28px); gap:5px;
  background:var(--card); padding:32px; border-radius:18px;
  border:1px solid var(--card-border); margin-bottom:36px;
  box-shadow:0 30px 60px -40px rgba(40,36,24,.4);
}
.admin-drag-overlay .brand i { background:var(--ink); border-radius:4px; }
.admin-drag-overlay .brand i.t { background:var(--tuerkis); }
.admin-drag-overlay .big {
  font:600 42px/1.1 "Newsreader",Georgia,serif; color:var(--ink); max-width:560px;
}
.admin-drag-overlay .big em { font-style:italic; color:var(--tuerkis-dark); }
.admin-drag-overlay .sub {
  font:700 13px/1.3 ui-monospace,monospace; color:var(--muted);
  margin-top:14px; letter-spacing:.04em;
}
.admin-drag-overlay .paste {
  margin-top:36px;
  font:700 12px ui-monospace,monospace; color:var(--tuerkis-dark);
  padding:10px 16px; border-radius:8px;
  border:1px solid var(--tuerkis); background:var(--tuerkis-soft);
}

/* FOCUS RINGS (a11y, unmistakably ours) */
.admin button:focus-visible, .admin input:focus-visible,
.admin [role="button"]:focus-visible, .admin a:focus-visible {
  outline:2px solid var(--tuerkis); outline-offset:2px;
  border-radius:inherit;
}

/* ANIMATIONS */
@keyframes bannerIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes flash-row {
  0%   { background:var(--salbei-soft); }
  100% { background:transparent; }
}
.admin .lrow.flash       > .id { animation:flash-row 900ms ease-out; }
@keyframes bannerPulse {
  0%, 100% { background:var(--tuerkis-soft); }
  50%      { background:var(--salbei-soft); }
}
.admin .drafts-banner.flashing { animation:bannerPulse 800ms ease-out; }
@keyframes barBannerOut {
  from { opacity:1; transform:translateY(0); max-height:80px; padding-top:14px; padding-bottom:14px; margin-top:14px; }
  to   { opacity:0; transform:translateY(-6px); max-height:0; padding-top:0; padding-bottom:0; margin-top:0; }
}
.admin .drafts-banner.outro { animation:barBannerOut 220ms ease-out forwards; overflow:hidden; }

/* MOBILE — at <900px the rail collapses into a horizontal strip; desk goes below */
@media (max-width: 900px) {
  .admin .topbar { padding:12px 16px; }
  .admin .topbar .wordmark { font-size:18px; }
  .admin .workspace { flex-direction:column; }
  .admin .rail {
    position:static; width:100%; flex:0 0 auto;
    height:auto; max-height:38vh;
    border-right:0; border-bottom:1px solid var(--line);
  }
  .admin .desk-inbox .body, .admin .desk-inbox { grid-template-columns:1fr; }
  .admin .desk-detail .hero .hero-id { font-size:42px; }
  .admin .desk-detail .hero { gap:10px; }
}

/* PHONES — at <600px the rail takes 30vh and the desk-inbox preview becomes a sticky
   top strip instead of stacking under a long list. Keeps batch-publish reachable. */
@media (max-width: 600px) {
  .admin .rail { max-height:30vh; }
  .admin .desk-inbox { padding:18px 16px 32px; }
  .admin .desk-inbox .head h1 { font-size:22px; }
  .admin .desk-inbox .body {
    /* Inbox: preview sticky at top so it stays glanceable while batching. */
    grid-template-rows:minmax(220px,auto) 1fr;
  }
  .admin .desk-inbox .deck-preview, .admin .desk-inbox .deck-preview-empty {
    order:-1;
    position:sticky; top:0; z-index:3;
    basis:auto; padding:14px;
  }
  .admin .desk-inbox .preview .grid { transform:scale(.7); transform-origin:top left; }
  .admin .desk-inbox .actions { position:sticky; bottom:0; background:var(--paper); padding:14px 0; }
}