:root{
  --bg:#faf8f4; --panel:#fff; --ink:#1d1a16; --muted:#7a7268;
  --line:#e2dcd2; --accent:#79D6B5; --accent-ink:#0d3f31;
  --warn:#b3261e; --ok:#1f6f4a;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#16150f; --panel:#1f1e17; --ink:#eee8dc; --muted:#9a9184;
         --line:#332f26; --accent:#79D6B5; --accent-ink:#08201a; }
}
*{box-sizing:border-box}
/* The `hidden` attribute is only display:none in the BROWSER's stylesheet,
   which any author rule outranks. `.row{display:flex}` therefore beat
   `<div id="newpoet" hidden class="row">`, so the inline new-poet name
   fields were on screen at all times — looking like they edited the
   selected poet, when they only do anything if you pick "+ new poet…".
   One rule, before everything else, so no future display: rule undoes it. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
main{max-width:1500px;margin:0 auto;padding:20px}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
   margin:0 0 12px;font-weight:600}
h3{margin:0 0 10px;font-size:16px}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:12.5px}

/* Yiddish */
.yid,[dir=rtl]{font-family:"Frank Ruehl","Times New Roman",serif;font-size:17px}
textarea.yid{font-size:18px;line-height:1.75}

/* chrome */
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:16px;align-items:center;
  padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.topbar strong{font-size:19px}
.topbar a{color:var(--muted);text-decoration:none;font-size:14px}
.topbar a.on,.topbar a:hover{color:var(--ink)}
.spacer{flex:1}
.pill{background:var(--warn);color:#fff;border-radius:9px;padding:0 6px;font-size:11px}

.btn{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;
  text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn.sm{padding:3px 9px;font-size:12.5px}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px}
.flash.err{background:#fdecea;color:var(--warn);border:1px solid #f5c6c2}
.flash.ok{background:#e7f5ee;color:var(--ok);border:1px solid #b8e0cc}

/* gap filters */
.gaps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.gaps a{padding:6px 12px;border:1px solid var(--line);border-radius:20px;
  text-decoration:none;color:var(--muted);font-size:13.5px;background:var(--panel)}
.gaps a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.gaps b{font-variant-numeric:tabular-nums}

.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
textarea{width:100%;resize:vertical}
label{display:block;margin-bottom:11px;font-size:13px;color:var(--muted)}
label input,label select,label textarea{display:block;width:100%;margin-top:4px;
  color:var(--ink);font-size:14.5px}
label.inline{display:flex;align-items:center;gap:7px}
label.inline input{width:auto;margin:0}
label.danger{color:var(--warn)}
.row{display:flex;gap:9px;align-items:flex-end;margin-bottom:11px;flex-wrap:wrap}
.row>label{flex:1;margin:0;min-width:110px}
.row>input{flex:1}

/* layout */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.pane,.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:16px}
.panel{margin-bottom:18px}

/* the two-pane composer: line-locked so stanzas stay level */
.poemtext{line-height:1.75;font-size:16px;min-height:420px;tab-size:4}

/* tabs */
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px;
  border-bottom:1px solid var(--line);padding-bottom:9px}
.tab{padding:5px 11px;border:1px solid var(--line);border-radius:16px;background:transparent;
  color:var(--muted);cursor:pointer;font:inherit;font-size:13px}
.tab.has{color:var(--ink);border-color:var(--muted)}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tabpane{display:none} .tabpane.on{display:block}

/* table */
.grid{width:100%;border-collapse:collapse;font-size:14px}
.grid th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);padding:7px 9px;border-bottom:1px solid var(--line);font-weight:600}
.grid td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
.grid tr:hover td{background:rgba(121,214,181,.07)}
.grid a{color:var(--ink)}
.ytitle{font-family:"Frank Ruehl",serif;font-size:17px;text-decoration:none}
.code{display:block;font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
i.yes{color:var(--ok);font-style:normal} i.no{color:var(--line);font-style:normal}

/* normaliser diff */
.normbox{margin:11px 0;padding:11px;border:1px dashed var(--line);border-radius:8px}
.normbox summary{cursor:pointer;color:var(--muted);font-size:13.5px}
.diff{width:100%;border-collapse:collapse;font-size:16px;margin:9px 0}
.diff td{padding:3px 8px;vertical-align:top}
.diff .ln{color:var(--muted);font-size:11px;width:36px;font-family:ui-monospace,monospace}
.diff .was{background:#fdecea;color:#8a1c16;text-decoration:line-through;opacity:.75}
.diff .now{background:#e7f5ee;color:#14523a}
@media (prefers-color-scheme:dark){
  .diff .was{background:#3a1512;color:#f0b4ae}
  .diff .now{background:#0f3226;color:#9fe0c2}
  .flash.err{background:#3a1512;border-color:#5c211c;color:#f0b4ae}
  .flash.ok{background:#0f3226;border-color:#1b4a37;color:#9fe0c2}
}

.savebar{position:sticky;bottom:0;display:flex;gap:11px;align-items:center;
  padding:11px 0;background:linear-gradient(transparent,var(--bg) 30%)}
.preview{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:9px;max-height:260px;overflow:auto;font-size:15px;margin:5px 0}
audio{width:100%;margin:5px 0}

/* sign-in */
.loginwrap{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:20px}
.login{width:100%;max-width:330px}
.login h1{margin:0;font-size:34px;text-align:center;
  font-family:"Frank Ruehl","Times New Roman",serif}
.login p.muted{text-align:center;margin:2px 0 18px}
.login label{margin-bottom:14px}

/* attached media on a pending submission */
.attach{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin:10px 0}
.attach strong{width:100%;font-size:13px;color:var(--muted)}
.attach figure{margin:0;max-width:190px}
.attach img{max-width:190px;max-height:150px;border-radius:7px;
  border:1px solid var(--line);display:block}
.attach audio{width:250px}
.attach figcaption{font-size:11.5px;color:var(--muted);margin-top:3px}
.attach-err{font-size:12px;color:var(--warn);border:1px dashed var(--warn);
  border-radius:7px;padding:8px;max-width:190px}
.attach-err code{display:block;margin-top:4px;font-size:10.5px;word-break:break-all}

/* delete */
.danger-zone{border-color:var(--warn)}
.danger-zone h3{color:var(--warn)}
.trash summary{cursor:pointer;color:var(--muted);font-size:13.5px}
.trash[open] summary{margin-bottom:10px}

/* A hidden mirror of the language tabs, on the Yiddish side only. It exists
   so both columns start their textarea at the same height; see edit.php. */
.tabs.ghost{visibility:hidden;pointer-events:none;user-select:none}

/* ---------------------------------------------------------------
   Published / Draft.

   The most consequential control on the editor, previously a plain
   checkbox in a column of plain checkboxes. Sized and coloured so the
   current state is readable without hunting for a tick.
   --------------------------------------------------------------- */
.pubbox{
  display:flex; align-items:flex-start; gap:11px;
  margin:16px 0 4px; padding:12px 14px;
  border:2px solid var(--line); border-radius:11px;
  cursor:pointer; transition:border-color .12s ease, background-color .12s ease;
}
.pubbox input{width:19px;height:19px;margin:1px 0 0;flex:0 0 auto;cursor:pointer;
  accent-color:var(--ok)}
.pubbox .pubstate{display:block;font-size:15px;color:var(--ink)}
.pubbox .pubnote{display:block;margin-top:1px}
.pubbox.is_live{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.pubbox.is_live .pubstate{color:var(--ok)}
/* Draft is the state worth noticing, so it is the one that is tinted warm. */
.pubbox.is_draft{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.pubbox.is_draft .pubstate{color:var(--warn)}
.pubbox:hover{border-color:var(--accent)}
/* color-mix is recent; older browsers simply get the border and no tint. */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .pubbox.is_live,.pubbox.is_draft{background:transparent}
}

/* Sortable column headings on the poets list. */
th.sortable{padding:0}
th.sortable a{display:block;padding:9px 11px;color:inherit;text-decoration:none;white-space:nowrap}
th.sortable a:hover{color:var(--accent)}
th.sortable .arrow{opacity:.55;font-size:11px;margin-left:3px}
th.sortable.on a{color:var(--accent)}