/* Admin UI — functional and calm, theme-aware so it matches the site theme the
   owner picked (ink · bone · blueprint · phosphor). Synced via saved theme. */

:root, html[data-theme="ink"] {
  color-scheme:dark;
  --bg:#0d0f14; --panel:#15181f; --panel-2:#191d25; --line:#262b33; --line-2:#323844;
  --text:#e7e9ec; --muted:#8b93a1; --input:#0e1117;
  --brass:#d9a441; --brass-2:#ecc06a; --brass-dim:#7d6224; --brass-ink:#1a1206;
  --danger:#e06a6a; --ok:#5fbf86;
  --ok-bg:#13241a; --ok-bd:#234a32; --ok-fg:#bfe9cf; --err-bg:#2a1414; --err-bd:#5a2020; --err-fg:#f2b8b8;
  --draft-bg:#221c12; --draft-bd:#4a3a1c;
}
html[data-theme="bone"] {
  color-scheme:light;
  --bg:#efeae0; --panel:#fffdf8; --panel-2:#f8f4ec; --line:#e4ded1; --line-2:#d3cbbb;
  --text:#1b1a16; --muted:#807a6d; --input:#f3efe6;
  --brass:#b07b2c; --brass-2:#cf9540; --brass-dim:#caa66a; --brass-ink:#fff8ec;
  --danger:#b3402f; --ok:#1f6b3a;
  --ok-bg:#e6f3ea; --ok-bd:#bcdcc7; --ok-fg:#1f6b3a; --err-bg:#f6e3e3; --err-bd:#e2bcbc; --err-fg:#8a2a2a;
  --draft-bg:#f4ead2; --draft-bd:#e0cfa0;
}
html[data-theme="blueprint"] {
  color-scheme:dark;
  --bg:#0b1b2b; --panel:#0e2233; --panel-2:#123047; --line:#1d3b52; --line-2:#2a526f;
  --text:#e3f1fa; --muted:#6f93aa; --input:#0a1a28;
  --brass:#54c4e6; --brass-2:#84daf2; --brass-dim:#356e85; --brass-ink:#04141f;
  --danger:#f08a9f; --ok:#8fe6cf;
  --ok-bg:#0d2a22; --ok-bd:#1f5142; --ok-fg:#8fe6cf; --err-bg:#2a1620; --err-bd:#5a2438; --err-fg:#f2b8cf;
  --draft-bg:#0f2a3a; --draft-bd:#23506b;
}
html[data-theme="phosphor"] {
  color-scheme:dark;
  --bg:#0c0f10; --panel:#0e1213; --panel-2:#131819; --line:#1d2624; --line-2:#2c3a36;
  --text:#dcf0d2; --muted:#6f8a6a; --input:#0a0f10;
  --brass:#cfa64a; --brass-2:#ecc36a; --brass-dim:#7a6128; --brass-ink:#0a0d06;
  --danger:#f0a488; --ok:#aee8b4;
  --ok-bg:#0e2417; --ok-bd:#1f4a30; --ok-fg:#aee8b4; --err-bg:#241410; --err-bd:#4a261c; --err-fg:#f0c4a8;
  --draft-bg:#1c1810; --draft-bd:#3c3218;
}
:root { --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

* { box-sizing:border-box; }
body.admin { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55; display:flex; min-height:100vh; -webkit-font-smoothing:antialiased; transition:background-color .4s ease, color .4s ease; }
body.admin--auth { display:block; }
a { color:inherit; text-decoration:none; }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); }
code { font-family:var(--mono); font-size:.86em; background:var(--input); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }

.side { width:240px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side__brand { display:flex; align-items:center; gap:9px; font-weight:650; font-size:15px; padding:6px 10px 18px; }
.side__logo { flex:0 0 auto; color:var(--text); }
.side__nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.side__group { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:20px 10px 6px; }
.side__link { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; color:var(--text); opacity:.82; font-size:14px; transition:background .15s, color .15s, opacity .15s; }
.side__link:hover { background:var(--panel-2); opacity:1; }
.side__link.is-active { background:var(--panel-2); color:var(--brass-2); opacity:1; }
.side__icon { width:18px; text-align:center; opacity:.85; }
.side__out { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:16px; }
.side__view { font-family:var(--mono); font-size:12px; color:var(--muted); padding:0 10px; }
.side__view:hover { color:var(--brass-2); }
.side__out button { font-family:var(--mono); font-size:12.5px; color:var(--muted); background:none; border:1px solid var(--line); padding:9px; border-radius:8px; cursor:pointer; transition:all .15s; }
.side__out button:hover { border-color:var(--danger); color:var(--danger); }

.main { flex:1; padding:38px 44px 80px; max-width:920px; }
.head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.head__eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.head__title { font-size:1.8rem; font-weight:680; letter-spacing:-.02em; margin:0; }

.note { padding:12px 16px; border-radius:9px; font-size:14px; margin-bottom:24px; }
.note--ok { background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-fg); }
.note--error { background:var(--err-bg); border:1px solid var(--err-bd); color:var(--err-fg); }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-bottom:34px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:2px; transition:border-color .2s, transform .2s; }
.stat:hover { border-color:var(--brass-dim); transform:translateY(-2px); }
.stat__icon { font-size:18px; opacity:.7; margin-bottom:6px; }
.stat__num { font-size:2rem; font-weight:700; line-height:1; }
.stat__label { font-size:14px; }
.stat__sub { font-family:var(--mono); font-size:11px; color:var(--muted); }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.panel__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel__head h2 { font-size:1.1rem; margin:0; }
.link { color:var(--brass-2); font-size:13px; }
.link:hover { text-decoration:underline; }
.link--danger { color:var(--danger); background:none; border:0; font:inherit; cursor:pointer; padding:0; }
.mini-list { list-style:none; margin:0; padding:0; }
.mini-list li { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.mini-list li:last-child { border-bottom:0; }

.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 14px 12px; border-bottom:1px solid var(--line); }
.table td { padding:14px; border-bottom:1px solid var(--line); vertical-align:top; }
.table__primary a { font-weight:600; }
.table__primary a:hover { color:var(--brass-2); }
.table__actions { display:flex; gap:14px; align-items:center; white-space:nowrap; }
.badge { font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.badge--published { background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-bd); }
.badge--draft { background:var(--draft-bg); color:var(--brass); border:1px solid var(--draft-bd); }

.empty-admin { border:1px dashed var(--line-2); border-radius:12px; padding:40px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; }

.form { max-width:680px; }
.field-block { margin-bottom:22px; }
.field-label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.req { color:var(--brass); }
.input { width:100%; background:var(--input); border:1px solid var(--line); border-radius:9px; color:var(--text); font:inherit; padding:11px 13px; transition:border-color .15s; }
.input:focus { outline:none; border-color:var(--brass-dim); }
.input--sm { max-width:200px; } .input--xs { max-width:90px; }
.textarea { resize:vertical; line-height:1.6; }
.textarea--mono { font-family:var(--mono); font-size:13.5px; }
.select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px; }
.hint { font-size:12px; color:var(--muted); margin:7px 0 0; }
.hint code { font-size:11px; }
.switch { display:inline-flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; }
.switch input { width:18px; height:18px; accent-color:var(--brass); }
.switch--sm { font-size:13px; }
.file { padding:9px; font-size:13px; }
.upload-current { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.upload-thumb { width:120px; height:80px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.form__actions { display:flex; align-items:center; gap:18px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }

.btn-primary { background:var(--brass); color:var(--brass-ink); border:0; border-radius:9px; padding:12px 22px; font-weight:650; font-size:14px; cursor:pointer; font-family:var(--sans); transition:background .15s, transform .15s; }
.btn-primary:hover { background:var(--brass-2); transform:translateY(-1px); }
.btn-primary--sm { padding:9px 16px; font-size:13px; }

.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth__card { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:34px; }
.auth__eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.auth__title { font-size:1.6rem; margin:0 0 22px; font-weight:700; }
.field { display:block; margin-bottom:16px; }
.field span { display:block; font-size:13px; color:var(--muted); margin-bottom:7px; }
.field input { width:100%; background:var(--input); border:1px solid var(--line); border-radius:9px; color:var(--text); font:inherit; padding:11px 13px; }
.field input:focus { outline:none; border-color:var(--brass-dim); }
.auth .btn-primary { width:100%; margin-top:8px; }

.tool-admin-list { display:flex; flex-direction:column; gap:12px; }
.tool-admin { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.tool-admin__id { display:flex; align-items:center; gap:14px; }
.tool-admin__icon { font-size:22px; }
.tool-admin__name { margin:0; font-weight:600; }
.tool-admin__meta { font-size:11.5px; color:var(--muted); margin:3px 0 0; }
.tool-admin__controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tool-admin__migrate { flex-basis:100%; display:flex; gap:12px; align-items:center; border-top:1px solid var(--line); padding-top:12px; margin-top:4px; }
.tool-admin__migrate .link { background:none; border:0; cursor:pointer; font-family:var(--mono); }

:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }

/* Any table wider than the phone scrolls inside its own box rather than
   pushing the whole page sideways. */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- phones ---------------------------------------------------------
   The 240px rail becomes a two-row header: who/where + sign out on top, the
   section links on one line that scrolls sideways underneath. */
html, body.admin { overflow-x:clip; }

@media (max-width:760px) {
  body.admin { flex-direction:column; }
  .side {
    width:auto; height:auto; flex-shrink:0;
    position:sticky; top:0; z-index:20;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
    padding:10px max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right));
    border-right:0; border-bottom:1px solid var(--line);
  }
  .side__brand { flex:1 1 auto; min-width:0; padding:0; font-size:14px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .side__out { order:2; flex:0 0 auto; flex-direction:row; align-items:center; gap:12px;
    border-top:0; padding-top:0; }
  .side__view { padding:0; }
  .side__out button { padding:7px 12px; }
  /* The links ride on one scrolling line — a wrapped block of eight would push
     the actual page below the fold before it started. */
  .side__nav { order:3; flex:1 0 100%; flex-direction:row; flex-wrap:nowrap; gap:2px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin:0 -6px; padding:4px 6px 0; }
  .side__nav::-webkit-scrollbar { display:none; }
  /* A strip that scrolls with no scrollbar and a hard edge looks like a strip
     that is simply cut off. The fade says "there is more this way"; JS adds the
     class only when the rail really does overflow. */
  .side__nav.is-scrollable { mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  .side__link { white-space:nowrap; border-radius:8px 8px 0 0; padding:9px 12px; }
  .side__link.is-active { box-shadow:inset 0 -2px 0 var(--brass); }
  .side__group { display:none; }

  .main { padding:22px max(16px, env(safe-area-inset-left)) calc(60px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); max-width:none; }
  .head { margin-bottom:24px; align-items:flex-start; }
  .head__title { font-size:1.5rem; }
  .stat-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
  .stat { padding:14px; }
  .stat__num { font-size:1.6rem; }
  .panel { padding:18px 16px; }
  .auth { padding:18px; }
  .auth__card { padding:26px 22px; }

  /* Delete sits right next to Edit; on a touch screen that is a mis-tap
     waiting to happen, so the actions get spaced out. */
  .table td, .table th { padding-left:10px; padding-right:10px; }
  .table__actions { gap:18px; }
  /* Left to fill 375px the table gives the title ~75px and wraps it to five
     lines while the actions still overflow. A floor width makes it scroll
     honestly instead, with the title readable at a glance. */
  .table { min-width:540px; }
  .form__actions { flex-wrap:wrap; gap:14px; }
  .upload-thumb { width:90px; height:60px; }
  .tool-admin { padding:16px; gap:12px; }
}

/* iOS zooms the page whenever a focused field is under 16px. */
@media (max-width:860px) {
  .input, .field input, .textarea, .select, select, textarea,
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=url], input[type=search] { font-size:16px; }
  .input--sm, .input--xs { max-width:none; }
  /* The body editor is monospaced and would rather be 13.5px, but anything
     under 16px makes iOS zoom the page the moment you tap into it. */
  .textarea--mono { font-size:16px; }
}

@media (pointer:coarse) {
  .btn-primary { min-height:44px; }
  .side__link { min-height:42px; display:flex; align-items:center; }
  .link, .link--danger { padding:6px 0; display:inline-block; }
  .side__out button { min-height:40px; }
  .side__view { padding:10px 0; }
  .side__brand { padding:8px 0; }
  /* A published/draft switch you have to aim at is a switch you get wrong. */
  .switch { min-height:36px; }
  .switch input { width:22px; height:22px; }
}