/* Layout concept: a post-production slate — sticky brand bar, a metrics band,
   then a two-column working area (clip list beside the contract spec sheet). */
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EEF1F6;
  --line:#DEE3EA; --line-strong:#C6CEDA;
  --fg:#14181F; --fg-2:#4B5563; --fg-3:#78828F;
  --accent:#2449C9; --accent-ink:#1A389F; --accent-soft:#E6EBFA; --on-accent:#FFFFFF;
  --filmed:#5B6B82; --filmed-soft:#E7EAF0;
  --editing:#A86A10; --editing-soft:#FAEFDC;
  --done:#18724F; --done-soft:#E2F2EA;
  --danger:#B3261E; --danger-soft:#FBE9E7;
  --track:#E3E7EE;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -16px rgba(16,24,40,.22);
  --radius:10px;
  --font-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1015; --surface:#15191F; --surface-2:#1A1F26; --surface-3:#202630;
    --line:#262D37; --line-strong:#39414E;
    --fg:#E9ECF2; --fg-2:#A6AFBD; --fg-3:#7A8493;
    --accent:#7593FF; --accent-ink:#9DB2FF; --accent-soft:#1A2440; --on-accent:#0A0E18;
    --filmed:#9AA6B8; --filmed-soft:#232A35;
    --editing:#E3A53F; --editing-soft:#2E2514;
    --done:#4FC793; --done-soft:#12291F;
    --danger:#F2766B; --danger-soft:#2E1715;
    --track:#242B35;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1015; --surface:#15191F; --surface-2:#1A1F26; --surface-3:#202630;
  --line:#262D37; --line-strong:#39414E;
  --fg:#E9ECF2; --fg-2:#A6AFBD; --fg-3:#7A8493;
  --accent:#7593FF; --accent-ink:#9DB2FF; --accent-soft:#1A2440; --on-accent:#0A0E18;
  --filmed:#9AA6B8; --filmed-soft:#232A35;
  --editing:#E3A53F; --editing-soft:#2E2514;
  --done:#4FC793; --done-soft:#12291F;
  --danger:#F2766B; --danger-soft:#2E1715;
  --track:#242B35;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-.015em}
button{font:inherit; color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:14px; padding-block:12px; min-height:62px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.mark{
  width:34px; height:34px; flex:0 0 auto; border-radius:8px;
  background:var(--fg); color:var(--bg);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.04em;
}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.1}
.brand-sub{font-size:11.5px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.09em}
.spacer{flex:1 1 auto}

.who{display:flex; align-items:center; gap:8px; min-width:0}
.who-name{font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw}
.badge{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .15s;
}
.icon-btn:hover{background:var(--surface-3); border-color:var(--line-strong)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:17px; height:17px; display:block}
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:8px 13px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--line); color:var(--fg);
  transition:background .15s, border-color .15s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--surface-3); border-color:var(--line-strong)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--line))}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{padding:6px 10px; font-size:12.5px}
.btn svg{width:15px; height:15px; flex:0 0 auto}

/* ---------- login ---------- */
.login-page{min-height:100svh; display:flex; flex-direction:column}
.login-body{flex:1 1 auto; display:grid; place-items:center; padding-block:34px 56px}
.login-shell{
  width:100%; max-width:884px; display:grid; grid-template-columns:1.04fr .96fr;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden;
}
@media (max-width:840px){ .login-shell{grid-template-columns:minmax(0,1fr); max-width:420px} .login-aside{display:none} }
.login-aside{
  padding:32px 30px; background:var(--surface-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px;
}
.login-aside h2{font-size:20px; font-weight:700; line-height:1.25}
.login-aside .sub{font-size:13.5px; color:var(--fg-2); margin-top:7px}
.login-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.login-list li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start}
.login-list b{display:block; font-size:13.5px; font-weight:600}
.login-list span{font-size:12.5px; color:var(--fg-2)}
.lmark{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink)}
.lmark svg{width:15px; height:15px}
.login-card{width:100%; padding:32px 28px 28px}
.login-mark{width:44px; height:44px; border-radius:10px; font-size:14px}
.login-card h1{font-size:23px; font-weight:700; margin-top:18px}
.login-card p.lede{color:var(--fg-2); font-size:13.5px; margin:7px 0 22px}
.field{display:block; margin-bottom:12px}
.field > span{display:block; font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3); margin-bottom:6px}
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea{
  width:100%; padding:10px 12px; font:inherit; color:var(--fg);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:92px; resize:vertical}
.pw-row{display:flex; gap:8px}
.pw-row input{flex:1 1 auto}
.login-err{
  display:none; margin:2px 0 12px; font-size:13px; color:var(--danger);
  background:var(--danger-soft); border:1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius:8px; padding:8px 11px;
}
.login-err.on{display:block}
.shake{animation:shake .32s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.login-foot{margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:12.5px; color:var(--fg-3)}
.login-strip{display:flex; gap:7px}
.login-strip i{flex:1 1 0; height:4px; border-radius:2px; background:var(--track)}
.login-strip i:nth-child(1){background:var(--filmed)}
.login-strip i:nth-child(2){background:var(--editing)}
.login-strip i:nth-child(3){background:var(--done)}
@media (prefers-reduced-motion: reduce){ .shake{animation:none} }

/* ---------- metrics band ---------- */
main{padding-block:22px 56px}
.pagehead{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-bottom:18px}
.pagehead h1{font-size:26px; font-weight:700}
.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:5px}
.cycle-chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--line); font-size:13px; box-shadow:var(--shadow);
}
.cycle-chip b{font-weight:600}

.band{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) 1.45fr; gap:12px; margin-bottom:12px}
@media (max-width:980px){ .band{grid-template-columns:repeat(3, minmax(0,1fr))} .band .progress-card{grid-column:1/-1} }
@media (max-width:560px){ .brand-sub{display:none} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.stat{padding:14px 15px; display:flex; flex-direction:column; gap:3px; position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--sc, var(--line-strong))}
.stat .k{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3)}
.stat .v{font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat .s{font-size:12.5px; color:var(--fg-2)}
.stat.filmed{--sc:var(--filmed)} .stat.editing{--sc:var(--editing)} .stat.done{--sc:var(--done)}
.stat.done .v{color:var(--done)}

.progress-card{padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.progress-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.progress-top .k{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3)}
.progress-top .pct{font-family:var(--font-display); font-weight:700; font-size:21px; font-variant-numeric:tabular-nums}
.meter{display:flex; height:11px; border-radius:6px; overflow:hidden; background:var(--track); gap:1.5px}
.meter span{display:block; transition:width .5s cubic-bezier(.22,.7,.3,1)}
.meter .m-done{background:var(--done)}
.meter .m-edit{background:var(--editing)}
.meter .m-film{background:var(--filmed)}
.legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--fg-2)}
.legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:baseline}
@media (prefers-reduced-motion: reduce){ .meter span{transition:none} }

/* phone: one stat per row, value pulled to the right so no tile sits half empty */
@media (max-width:660px){
  .band{grid-template-columns:minmax(0,1fr)}
  .stat{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k v" "s v"; align-items:center; column-gap:14px; row-gap:2px}
  .stat .k{grid-area:k}
  .stat .s{grid-area:s}
  .stat .v{grid-area:v; font-size:30px; align-self:center; justify-self:end}
}

/* ---------- two column ---------- */
.cols{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:12px; align-items:start}
@media (max-width:980px){ .cols{grid-template-columns:minmax(0,1fr)} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.panel-head h2{font-size:14.5px; font-weight:700}
.panel-head .count{font-size:12px; color:var(--fg-3); font-variant-numeric:tabular-nums}
.panel-body{padding:14px 16px}
.sticky-col{position:sticky; top:74px}
@media (max-width:980px){ .sticky-col{position:static} }

/* ---------- clip list ---------- */
.clip{border-bottom:1px solid var(--line)}
.clip:last-child{border-bottom:0}
.clip-row{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:13px; align-items:center; padding:12px 16px}
@media (max-width:620px){ .clip-row{grid-template-columns:62px minmax(0,1fr); row-gap:10px} .clip-acts{grid-column:1/-1} }
.slate{
  aspect-ratio:16/9; border-radius:7px; position:relative; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--fg-3);
}
.slate .idx{font-family:var(--font-mono); font-size:11px; letter-spacing:.02em}
.slate.watchable{background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, var(--surface-3)), var(--surface-3)); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); color:var(--accent-ink); cursor:pointer}
.slate.watchable .play{width:22px; height:22px}
.clip-main{min-width:0}
.clip-title{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.clip-meta{font-size:12.5px; color:var(--fg-3); display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:3px}
.clip-note{font-size:12.5px; color:var(--fg-2); margin-top:5px}
.clip-acts{display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:20px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.chip i{width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.filmed{background:var(--filmed-soft); color:var(--filmed)}
.chip.editing{background:var(--editing-soft); color:var(--editing)}
.chip.completed{background:var(--done-soft); color:var(--done)}
.chip.rev{background:var(--danger-soft); color:var(--danger)}
.chip.ok{background:var(--done-soft); color:var(--done)}

.player{padding:0 16px 14px}
.player video{width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; border:1px solid var(--line)}
.player .hint{font-size:12px; color:var(--fg-3); margin-top:7px}
.fb{padding:0 16px 14px}
.fb-box{background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:13px}
.fb-choice{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.pick{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); font-size:13px; font-weight:600;
}
.pick.on[data-pick="approve"]{background:var(--done-soft); border-color:var(--done); color:var(--done)}
.pick.on[data-pick="revise"]{background:var(--danger-soft); border-color:var(--danger); color:var(--danger)}
.fb-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center}
.fb-saved{font-size:12.5px; color:var(--done); font-weight:600}
.fb-prev{font-size:12.5px; color:var(--fg-2); margin-bottom:10px; padding:9px 11px; background:var(--surface-3); border-radius:8px}
.fb-prev b{color:var(--fg)}

/* ---------- contract ---------- */
.retainer{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.retainer .amt{font-family:var(--font-display); font-weight:800; font-size:33px; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.retainer .per{font-size:13px; color:var(--fg-2)}
.spec{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.spec:last-of-type{border-bottom:0}
.spec dt{color:var(--fg-3)}
.spec dd{margin:0; text-align:right; font-weight:500; min-width:0}
.bill{
  margin-top:13px; padding:13px; border-radius:9px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.bill .k{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink)}
.bill .d{font-family:var(--font-display); font-weight:700; font-size:19px; margin-top:3px}
.bill .c{font-size:12.5px; color:var(--fg-2); margin-top:2px}
.note{font-size:12.5px; color:var(--fg-2); margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}

/* ---------- admin ---------- */
.admin-cols{display:grid; grid-template-columns:238px minmax(0,1fr); gap:12px; align-items:start}
@media (max-width:860px){ .admin-cols{grid-template-columns:minmax(0,1fr)} }
.clientlist{display:flex; flex-direction:column}
.clientlist button{
  text-align:left; padding:10px 14px; background:transparent; border:0; border-bottom:1px solid var(--line);
  cursor:pointer; display:flex; flex-direction:column; gap:2px;
}
.clientlist button:last-child{border-bottom:0}
.clientlist button:hover{background:var(--surface-2)}
.clientlist button.on{background:var(--accent-soft)}
.clientlist .cn{font-weight:600; font-size:13.5px}
.clientlist .cm{font-size:11.5px; color:var(--fg-3)}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px}
@media (max-width:620px){ .grid2{grid-template-columns:minmax(0,1fr)} }
.adm-video{display:grid; grid-template-columns:minmax(0,1fr); gap:9px; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); margin-bottom:9px}
.adm-video .vr{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:9px}
@media (max-width:760px){ .adm-video .vr{grid-template-columns:repeat(2, minmax(0,1fr))} }
.adm-foot{display:flex; gap:8px; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:13px 16px; border-top:1px solid var(--line); background:var(--surface-2)}
.hint{font-size:12.5px; color:var(--fg-3)}
.empty{padding:26px 16px; text-align:center; color:var(--fg-3); font-size:13.5px}
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(120%);
  background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:9px; font-size:13.5px; font-weight:600;
  z-index:80; box-shadow:var(--shadow); margin-bottom:env(safe-area-inset-bottom,0px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .22s, visibility 0s linear .28s;
}
.toast.on{transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; transition-delay:0s}
.warn{
  display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--fg-2);
  background:var(--editing-soft); border:1px solid color-mix(in srgb, var(--editing) 30%, transparent);
  border-radius:9px; padding:11px 13px; margin-bottom:12px;
}
.warn b{color:var(--fg)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- vault additions ---------- */
.mark svg{width:19px; height:19px}
.login-mark svg{width:24px; height:24px}
.savechip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--fg-3); white-space:nowrap;
}
.savechip i{width:7px; height:7px; border-radius:50%; background:var(--line-strong)}
.savechip.saving i{background:var(--editing)}
.savechip.saved i{background:var(--done)}
.savechip.failed{color:var(--danger)} .savechip.failed i{background:var(--danger)}
.pwset{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
.pwset .field{flex:1 1 220px; margin:0}
.pwout{
  margin-top:10px; padding:11px 13px; border-radius:9px; background:var(--done-soft);
  border:1px solid color-mix(in srgb, var(--done) 30%, transparent);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px;
}
.pwout .val{font-family:var(--font-mono); font-size:14px; font-weight:500; word-break:break-all}
.codearea{font-family:var(--font-mono); font-size:12px; min-height:120px; white-space:pre}
.adm-sub{font-size:12.5px; color:var(--fg-3); margin:-4px 0 12px}
.lockline{
  display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--fg-2);
  background:var(--surface-3); border-radius:8px; padding:10px 12px; margin-top:10px;
}
.lockline svg{width:15px; height:15px; flex:0 0 auto; margin-top:1px; color:var(--done)}
.spin{
  width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2s} }
.boot{display:grid; place-items:center; min-height:70svh; color:var(--fg-3); gap:12px}

/* ---------- shoot days ---------- */
.shootnext{padding:13px; border-radius:9px; background:var(--surface-3); border:1px solid var(--line-strong)}
.shootnext .k{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-3)}
.shootnext .d{font-family:var(--font-display); font-weight:700; font-size:18px; margin-top:3px; line-height:1.25}
.shootnext .c{font-size:12.5px; color:var(--fg-2); margin-top:2px}
.shootnext .n{font-size:12.5px; color:var(--fg-2); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line-strong)}
.shootrow{display:grid; grid-template-columns:66px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px dashed var(--line)}
.shootrow:last-child{border-bottom:0}
.shootrow .sd{font-family:var(--font-mono); font-size:11.5px; color:var(--fg-3); padding-top:2px}
.shootrow b{display:block; font-size:13px; font-weight:600}
.shootrow span{display:block; color:var(--fg-2); font-size:12.5px}
.adm-shoot{display:grid; gap:9px; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); margin-bottom:9px}
.adm-shoot .sr3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:9px}
@media (max-width:760px){ .adm-shoot .sr3{grid-template-columns:minmax(0,1fr)} }

/* ---------- phone: keep the top bar on one line ---------- */
.badge{white-space:nowrap}
@media (max-width:620px){
  .topbar-in .who{display:none}      /* the page heading already names the client */
  .topbar-in{gap:10px}
  #cswitch{max-width:44vw}
}

/* Last word on the phone login: the password field comes first, not the pitch.
   (Kept at the end of the file so it outranks the .login-aside rule above.) */
@media (max-width:840px){
  .login-shell{grid-template-columns:minmax(0,1fr); max-width:420px}
  .login-aside{display:none}
  .login-body{padding-block:24px 48px}
}

/* Phone top bar: the wordmark never collides with the save indicator. */
.brand-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:620px){
  .savechip span{display:none}   /* the dot still carries saving / saved / failed */
  .savechip{gap:0}
}

/* Installed on a phone there is no browser bar, so the top bar itself has to
   clear the status bar and the notch. Zero everywhere else. */
.topbar{padding-top:env(safe-area-inset-top, 0px)}
body{padding-bottom:env(safe-area-inset-bottom, 0px)}