/* ==========================================================================
   Floods of Spin — Site Manager (admin only)

   Deliberately separate from the public site's styles.css. Nothing in here is
   ever loaded by the public page, so an admin tweak cannot affect the band's
   site. The visual language is borrowed on purpose (same dark panel, same red,
   same PLACEHOLDER badge) so what Tom sees here reads as the same product.
   ========================================================================== */

:root{
  --bg:#0a0a0c; --panel:#141418; --panel2:#1b1b21; --panel3:#212129;
  --line:#2a2a32; --ink:#ececf0; --dim:#9a9aa8; --steel:#8b95a3;
  --red:#d5232e; --good:#77dd99; --warn:#e6b455; --bad:#ff8188;
  --body:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);
  -webkit-font-smoothing:antialiased;padding-bottom:0}
a{color:var(--steel)}
a:hover{color:var(--ink)}
.hidden{display:none!important}
[hidden]{display:none!important}

.brand{font:700 12px/1 var(--mono);letter-spacing:.22em;color:var(--red);
  text-transform:uppercase;margin-bottom:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--red);color:#fff;border:0;border-radius:8px;padding:11px 18px;
  font:700 14px var(--body);cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--steel);filter:none}
.btn.small{padding:7px 12px;font-size:13px}
.btn.block{width:100%}
.btn:focus-visible,.icon:focus-visible,.addrow:focus-visible,a:focus-visible{
  outline:2px solid var(--steel);outline-offset:2px}

/* ---------- fields ---------- */
label{display:block;font-size:12.5px;color:var(--dim);margin:0 0 5px;font-weight:600}
input[type=text],input[type=password],input[type=url],input[type=email],
input[type=date],textarea,select{
  width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:10px 12px;font:14px/1.5 var(--body);
  -webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
  linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=date]{min-height:41px}
textarea{resize:vertical;min-height:78px;font-family:var(--body)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--steel)}
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.subhint{font-size:11.5px;color:var(--dim);margin-top:5px}
.subhint code{font:11px var(--mono);color:var(--steel)}
.subhead{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  margin:22px 0 4px}

/* The site's placeholder language, repeated here so an unfilled box in the
   editor looks like the unfilled box it produces on the live site. */
.field.is-ph > input,.field.is-ph > textarea,.field.is-ph > select{
  border-color:var(--red);border-style:dashed}
.field.is-ph > label::after{content:"PLACEHOLDER";margin-left:8px;
  font:700 8px/1 var(--mono);letter-spacing:.14em;color:#fff;background:var(--red);
  padding:3px 5px;border-radius:2px;vertical-align:1px}

/* ---------- login ---------- */
.login{max-width:390px;margin:9vh auto;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:30px 26px}
.login h1{font-size:20px;margin-bottom:2px}
.login p.sub{color:var(--dim);font-size:13px;margin-bottom:22px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}
.note{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:8px;padding:11px 13px;font-size:13px;color:#d8d8de;margin-bottom:18px}

/* ---------- boot failure ---------- */
.boot{max-width:460px;margin:12vh auto;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:12px;padding:28px 26px}
.boot h1{font-size:20px;margin-bottom:10px}
.boot p{color:var(--dim);font-size:13.5px;margin-bottom:12px}

/* ---------- banners ---------- */
.banners{position:sticky;top:0;z-index:60;display:flex;flex-direction:column;gap:1px}
.banner{background:var(--panel2);border-bottom:1px solid var(--line);
  border-left:4px solid var(--steel);padding:13px 18px;display:flex;gap:14px;
  align-items:flex-start;flex-wrap:wrap}
.banner.warn{border-left-color:var(--warn);background:#241f16}
.banner.error{border-left-color:var(--red);background:#251618}
.banner.ok{border-left-color:var(--good);background:#16211a}
.banner .btxt{flex:1 1 260px;min-width:0}
.banner .btitle{font-weight:700;font-size:13.5px;margin-bottom:2px}
.banner .bmsg{font-size:13px;color:#c9c9cf}
.banner .bacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- editor shell ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:22px 20px 120px}
.topline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.topline h1{font-size:20px}
.topline-tools{display:flex;gap:8px;flex-wrap:wrap}
.lede{color:var(--dim);font-size:13.5px;margin-bottom:14px;max-width:70ch}
.phsummary{font-size:13px;color:#e8d9a8;background:#241f16;border:1px solid #4a3d22;
  border-left:3px solid var(--warn);border-radius:8px;padding:11px 13px;margin-bottom:16px}
.phsummary b{color:#fff}
.phsummary ul{margin:6px 0 0 18px;padding:0}
.phsummary li{font:12px/1.7 var(--mono);color:#d6c79a}

.jump{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.jump a{font:600 11.5px/1 var(--body);color:var(--dim);border:1px solid var(--line);
  border-radius:20px;padding:7px 12px;text-decoration:none}
.jump a:hover{color:var(--ink);border-color:var(--steel)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:22px;align-items:start}
body.no-preview .layout{grid-template-columns:minmax(0,1fr)}
body.no-preview .previewpane{display:none}
.cols{min-width:0}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:20px;margin-bottom:20px;scroll-margin-top:70px}
.card > h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  margin-bottom:4px}
.card > .hint{color:var(--dim);font-size:12.5px;margin-bottom:14px;max-width:74ch}
.card > .hint:last-child{margin-bottom:0}
.warnline{color:#e8d9a8;background:#241f16;border:1px solid #4a3d22;border-radius:8px;
  padding:10px 12px;font-size:12.5px;margin-bottom:14px;max-width:74ch}

/* ---------- repeatable rows ---------- */
.list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.list:empty{margin-bottom:0}
.row{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px}
.row.sub{background:var(--panel3);padding:12px}
.rowbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.rowbar .n{font:700 11px/1 var(--mono);color:var(--dim);letter-spacing:.1em}
.rowbar .tools{display:flex;gap:4px}
.icon{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:6px;
  width:28px;height:28px;cursor:pointer;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.icon:hover{color:var(--ink);border-color:var(--steel)}
.icon.rm:hover{color:var(--bad);border-color:#6b2f34}
.icon:disabled{opacity:.3;cursor:default}
.addrow{background:transparent;border:1px dashed var(--line);color:var(--ink);border-radius:8px;
  padding:10px 14px;font:600 13px var(--body);cursor:pointer;width:100%}
.addrow:hover{border-color:var(--steel)}
.empty{color:var(--dim);font-size:12.5px;font-style:italic;padding:4px 0 10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .full{grid-column:1 / -1}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid3 .full{grid-column:1 / -1}
.gridDate{display:grid;grid-template-columns:180px 1fr;gap:12px}
.gridDate .full{grid-column:1 / -1}
@media(max-width:640px){.grid2,.grid3,.gridDate{grid-template-columns:1fr}}

/* inline style toggle inside release paragraphs */
.styletoggle{display:flex;gap:6px;align-items:center}
.styletoggle select{width:auto;min-width:190px}

/* ---------- preview ---------- */
.previewpane{position:sticky;top:16px;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;height:calc(100vh - 150px);min-height:420px}
.previewbar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:10px}
.previewlabel{font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.previewstate{font:11px/1.4 var(--mono);color:var(--dim);text-align:right}
.previewstate.bad{color:var(--bad)}
#previewFrame{flex:1;width:100%;border:1px solid var(--line);border-radius:8px;
  background:#0a0a0c;min-height:0}
.previewfoot{font-size:11px;color:#6a6a74;padding-top:8px}
@media(max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .previewpane{position:static;height:70vh}
}

/* ---------- sticky save bar ---------- */
.savebar{position:fixed;left:0;right:0;bottom:0;background:rgba(10,10,12,.94);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 20px;z-index:70}
.savebar .inner{width:100%;max-width:1360px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.savestate{font-size:13px;color:var(--dim)}
.savestate.ok{color:var(--good)}
.savestate.bad{color:var(--bad)}
.savestate.busy{color:var(--warn)}
.savebtns{display:flex;gap:8px;align-items:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}