/* Mobile-first: one column, 16px text in fields (no iOS zoom), 44px touch targets, no horizontal scrolling. */
:root { --bg:#f5f4f0; --card:#fff; --ink:#1d2430; --muted:#566070; --line:#d4d0c7; --accent:#1f4e79; --accent-ink:#fff; --warn:#8a5200; --bad:#a12a2a; --ok:#22663a; --soft:rgba(31,78,121,.07); }
@media (prefers-color-scheme: dark) { :root { --bg:#15181d; --card:#1e232a; --ink:#e8e6e1; --muted:#a8afba; --line:#3a414c; --accent:#8db8e8; --accent-ink:#0f1720; --warn:#e0a54a; --bad:#ef8a8a; --ok:#7fd093; --soft:rgba(141,184,232,.08); } }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; overflow-wrap:anywhere; }
img, iframe { max-width:100%; }

.bar { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 16px 0; padding-top:max(8px, env(safe-area-inset-top)); }
.bar-top { display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; }
.bar h1 { font-size:18px; margin:0; }
.tag { font-size:13px; color:var(--warn); }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:6px; }
.steps a { display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:4px 2px; text-align:center; font-size:14px; line-height:1.2;
  color:var(--muted); text-decoration:none; border-bottom:3px solid transparent; }
.steps a[aria-current="step"] { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
.count { font-size:13px; color:var(--muted); font-weight:400; }

main { max-width:760px; margin:0 auto; padding:16px; padding-bottom:max(32px, env(safe-area-inset-bottom)); }
h2 { font-size:20px; margin:4px 0 12px; }
h3 { font-size:17px; margin:0 0 4px; line-height:1.3; }
.step[hidden] { display:none; }

fieldset.block { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px 14px 14px; margin:0 0 14px; min-width:0; }
fieldset.block > legend { font-weight:600; padding:0 6px; }
label { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--muted); margin:10px 0 0; }
input, select, textarea { font:inherit; font-size:16px; min-height:44px; width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); scroll-margin-top:130px; scroll-margin-bottom:24px; }
textarea { resize:vertical; min-height:64px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
details.more { margin-top:12px; }
details.more summary, details.draft summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--accent); }

button, .btn { font:inherit; font-size:16px; min-height:44px; padding:10px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; gap:6px; }
button.ghost, .btn.ghost { background:transparent; color:var(--accent); }
button:disabled { opacity:.55; cursor:default; }
.wide { width:100%; }
.actions { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.row { display:flex; flex-wrap:wrap; gap:8px; }
.row > button { flex:1 1 140px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.picked { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.picked li { position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg); }
.picked img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.picked .name { display:block; font-size:13px; padding:2px 6px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picked .remove { position:absolute; top:4px; right:4px; min-height:36px; min-width:36px; padding:0 8px; font-size:13px; background:rgba(0,0,0,.65); border-color:transparent; color:#fff; }
.picked li.bad { border-color:var(--bad); }
.picked li.bad .name { color:var(--bad); white-space:normal; }

.upload { margin:6px 0 14px; }
.upload progress { width:100%; height:12px; }
.notice { border:1px solid var(--bad); color:var(--bad); background:var(--card); border-radius:10px; padding:10px 12px; margin:0 0 14px; }
.notice.ok { border-color:var(--ok); color:var(--ok); }

.cards { display:flex; flex-direction:column; gap:14px; }
.case { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0; scroll-margin-top:120px; }
.case.flash { box-shadow:0 0 0 3px var(--accent); }
.meta { color:var(--muted); font-size:14px; margin:2px 0 8px; }
.muted, .opt { color:var(--muted); }
.small { font-size:14px; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:6px; margin:8px 0; }
.thumbs img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.ask { border-left:4px solid var(--warn); padding:8px 10px; margin:8px 0; background:rgba(224,165,74,.09); border-radius:0 8px 8px 0; }
.ask label { color:var(--ink); margin-top:0; }

.badge { display:inline-block; font-size:13px; line-height:1.3; padding:2px 9px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; vertical-align:middle; }
.badge.ok { color:var(--ok); } .badge.no { color:var(--bad); } .badge.wait { color:var(--warn); }

/* Schedule post */
.sched { border:2px solid var(--accent); background:var(--soft); border-radius:12px; padding:12px; margin:12px 0; }
.sched-head { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; }
.sched-title { font-weight:700; font-size:16px; margin:0; }
.sched-when { font-size:17px; font-weight:600; margin:6px 0 0; }
.sched-zone { font-size:14px; color:var(--muted); margin:2px 0 0; }
.sched-form { margin-top:8px; }
.sched-form .pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sched-form .pair label { margin-top:0; }
.sched-form input[type="date"], .sched-form input[type="time"] { -webkit-appearance:none; appearance:none; display:block; text-align:left; }
.sched-note { font-size:14px; margin:8px 0 0; }
.sched-msg { font-size:14px; margin:8px 0 0; }
.sched-msg:empty { display:none; }
.error { color:var(--bad); }
.okmsg { color:var(--ok); }

.tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 0; }
.tabs button { font-size:14px; padding:8px; }
.tabs button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.panel { border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:8px; min-width:0; }
.panel iframe { display:block; width:100%; height:70vh; min-height:420px; border:0; border-radius:6px; background:#fff; }
pre { white-space:pre-wrap; font:15px/1.5 system-ui, sans-serif; margin:6px 0; }
code { font-size:13px; word-break:break-all; }

dl.facts { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0 0; font-size:15px; }
dl.facts dt { color:var(--muted); }
dl.facts dd { margin:0; min-width:0; }
.history { margin:8px 0 0; padding-left:18px; font-size:14px; color:var(--muted); }
.sum { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px 14px; }

@media (min-width: 900px) {
  main { max-width:980px; }
  .bar-top, .steps { max-width:948px; margin-left:auto; margin-right:auto; }
  .steps { grid-template-columns:repeat(4, max-content); justify-content:start; gap:4px 18px; }
  .actions { flex-direction:row; flex-wrap:wrap; }
  .actions .wide { width:auto; }
  .tabs { grid-template-columns:repeat(4, auto); justify-content:start; }
  .sched-form .pair { grid-template-columns:220px 180px; }
}

/* On-screen keyboard open (short viewport): let the header scroll away so the field being typed in has room. */
@media (max-height: 520px) {
  .bar { position:static; }
  input, select, textarea, .case { scroll-margin-top:12px; }
}

/* Sign-in page and production details */
.login { max-width:420px; margin:10vh auto 0; }
.login h1 { font-size:24px; margin:0 0 6px; }
.block-form { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 14px 14px; margin-top:14px; }
.bar-top .signout { margin-left:auto; min-height:36px; padding:4px 10px; font-size:14px; }
.photo-edit { display:grid; grid-template-columns:88px 1fr; gap:8px 10px; align-items:start; margin:10px 0 0; }
.photo-edit img { width:88px; aspect-ratio:4/3; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.photo-edit label { margin-top:0; }
.alt-preview { font-size:13px; color:var(--muted); margin:4px 0 0; }

/* Edit case */
.case-actions { margin:8px 0; }
.case.editing { border-color:var(--accent); }
.notice-inline { border-left:4px solid var(--accent); background:var(--soft); padding:8px 10px; border-radius:0 8px 8px 0; font-size:14px; }
.notice-inline.warn { border-left-color:var(--warn); background:rgba(224,165,74,.1); }
.text-field { margin-top:10px; }
.text-field .regen { margin-top:6px; min-height:40px; font-size:14px; }
.ed-photo { display:grid; grid-template-columns:96px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.ed-photo:first-of-type { border-top:0; }
.ed-photo img { width:96px; aspect-ratio:4/3; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.ed-photo.off img { opacity:.45; }
.ed-photo .row { margin-top:8px; }
.ed-photo .row > button { flex:1 1 90px; font-size:14px; padding:8px; }
label.check { flex-direction:row; align-items:center; gap:10px; color:var(--ink); min-height:44px; }
label.check input { width:22px; min-height:22px; height:22px; }
@media (min-width: 900px) { .case-actions .wide { width:auto; } }

/* Approval blockers */
.sum.blocked { border-color:var(--warn); }
ul.blockers { margin:6px 0 0; padding-left:18px; }
ul.blockers li { margin:0 0 10px; }
ul.blockers .fix { display:flex; margin-top:6px; min-height:40px; font-size:14px; padding:6px 12px; }
.ask.flash, .sched.flash { box-shadow:0 0 0 3px var(--accent); }