:root{
  --bg:#faf9f7; --surface:#fff; --ink:#141312; --muted:#77716a; --line:#ebe7e1;
  --accent:#c8102e; --accent-ink:#fff; --ok:#1f8a4c;
  --measure:40rem; --r:14px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f0e0d; --surface:#1a1918; --ink:#f3f1ee; --muted:#9b958d; --line:#292725; --ok:#3fb56f; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
p{margin:0 0 1rem}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.ok{color:var(--ok)} .bad{color:var(--accent)}

/* chrome */
header.bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:1.5rem;
  padding:0 max(1rem, env(safe-area-inset-left)); height:56px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:750; font-size:1.2rem; letter-spacing:-.03em; text-decoration:none; color:var(--accent)}
header.bar nav.tabs{display:flex; gap:1.25rem; overflow-x:auto; scrollbar-width:none; margin:0}
header.bar nav.tabs::-webkit-scrollbar{display:none}
header.bar nav.tabs a{
  color:var(--muted); text-decoration:none; font-size:.94rem; white-space:nowrap;
  line-height:56px; border-bottom:2px solid transparent;
}
header.bar nav.tabs a.on{color:var(--ink); font-weight:600; border-bottom-color:var(--ink)}
main{max-width:var(--measure); margin:0 auto; padding:1.75rem 1rem 2rem}
main.wide{max-width:60rem}
footer.fine{
  max-width:var(--measure); margin:0 auto; padding:2rem 1rem 3rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.8rem; color:var(--muted);
}
footer.fine a{color:var(--muted); text-decoration:none}
footer.fine span{flex-basis:100%}

/* type */
h1{font-size:1.75rem; line-height:1.15; letter-spacing:-.025em; font-weight:700; margin:0 0 .75rem}
h2{font-size:1.05rem; letter-spacing:-.01em; font-weight:650; margin:2rem 0 .75rem}
h3{font-size:1rem; font-weight:600; margin:1.5rem 0 .4rem}
.lede{font-size:1.06rem; color:var(--muted); margin:0 0 1.5rem}
.fineprint{font-size:.82rem; color:var(--muted); margin:.9rem 0 0}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--ink); color:var(--bg); text-decoration:none;
  padding:.8rem 1.4rem; border-radius:999px; font:inherit; font-weight:600; border:0; cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn.small{padding:.45rem .95rem; font-size:.88rem}
.btn.subtle{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); font-weight:500}
button.link{background:none; border:0; padding:0; font:inherit; font-size:.85rem; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
button.link.bad{color:var(--accent)}

/* landing */
.hero{padding:3rem 0 2rem}
.hero h1{font-size:2.6rem; line-height:1.05; letter-spacing:-.04em; margin-bottom:1rem}
.points{list-style:none; padding:0; margin:1rem 0 2rem; border-top:1px solid var(--line)}
.points li{display:flex; flex-direction:column; gap:.15rem; padding:1rem 0; border-bottom:1px solid var(--line)}
.points strong{font-weight:600}
.points span{color:var(--muted); font-size:.95rem}

/* profile */
.profile{display:flex; align-items:center; gap:1rem; margin:0 0 .5rem}
.profile h1{font-size:1.3rem; margin:0}
.profile p{margin:.1rem 0 0; color:var(--muted); font-size:.9rem}
.avatar{
  width:64px; height:64px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  display:grid; place-items:center; background:var(--line); color:var(--muted); font-weight:600; font-size:1.5rem;
}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:.4rem; vertical-align:1px}
.dot.off{background:var(--accent)}

/* posts */
.head{display:flex; align-items:center; justify-content:space-between; margin:2rem 0 .9rem}
.head h2{margin:0}
.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.1rem .75rem}
@media (min-width:640px){ .grid{grid-template-columns:repeat(3, 1fr)} }
.tile{margin:0; min-width:0}
.frame{position:relative; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; background:var(--line)}
.frame img,.frame video{width:100%; height:100%; object-fit:cover; display:block}
.pill{
  position:absolute; left:.5rem; top:.5rem; max-width:calc(100% - 1rem);
  padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pill.wait{background:#fff; color:#141312}
.pill.bad{background:var(--accent)}
.tile figcaption{font-size:.85rem; margin:.5rem 0 .2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .why{font-size:.78rem; color:var(--accent); margin:0 0 .2rem}
.tile form{margin:0}
.empty{border:1px dashed var(--line); border-radius:var(--r); padding:2.5rem 1rem; text-align:center; color:var(--muted)}

/* account */
.settings{margin-top:3rem; padding-top:.25rem; border-top:1px solid var(--line)}
.settings p{font-size:.9rem}
.settings > a,.settings form{display:block; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.95rem; text-decoration:none}
.settings form button.link{font-size:.95rem; text-decoration:none}

/* banners */
.banner{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; margin:0 0 1.25rem; font-size:.92rem}
.banner strong{display:block; margin-bottom:.15rem}
.banner.warn strong{color:var(--accent)}
.banner.good{border-color:color-mix(in srgb, var(--ok) 40%, var(--line))}
.banner.good strong{color:var(--ok); margin:0}
.banner .btn{margin-top:.6rem}

/* the other dashboard pages */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; margin:1rem 0}
.card.empty{text-align:center; padding:2.25rem 1.5rem}
.card.empty h3{margin-top:0}
.card.rule .rule-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.card.rule h3{margin:0}
.card.rule p{margin:.5rem 0 0}
.card.rule .row{margin:1rem 0 0}
.card.rule .row form{margin:0}
.row{display:flex; gap:.75rem; align-items:center; margin:1.5rem 0 .5rem}
main nav.tabs{display:flex; flex-wrap:wrap; gap:1rem; margin:0 0 1rem; font-size:.9rem}
main nav.tabs a{color:var(--muted); text-decoration:none}
main nav.tabs a.on{color:var(--ink); font-weight:600}
code{background:var(--surface); border:1px solid var(--line); padding:.1rem .35rem; border-radius:.3rem; font-size:.87em}
table{border-collapse:collapse; width:100%; margin:1rem 0; font-size:.92rem}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:600}
td form{margin:0}
.thumb{width:56px; height:56px; object-fit:cover; border-radius:.5rem; float:left; margin:0 .75rem .25rem 0; background:var(--line)}
.thread{display:flex; flex-direction:column; gap:.6rem; margin:1.5rem 0}
.msg{white-space:pre-wrap; max-width:30rem; padding:.65rem .9rem; border-radius:1.1rem; background:var(--surface); border:1px solid var(--line)}
.msg.out{align-self:flex-end; background:var(--ink); color:var(--bg); border-color:transparent}
.msg.out .muted{color:inherit; opacity:.7}
main > a:not(.btn){color:var(--accent)}
.card a,.banner a,.lede a,li a,td a,p a{color:var(--accent)}
.settings > a{color:var(--ink)}
footer.fine a{color:var(--muted)}

/* forms */
form.stack{display:flex; flex-direction:column; gap:1.25rem; margin:1.5rem 0}
form.stack label{display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.92rem}
form.stack label.check{flex-direction:row; align-items:center; gap:.6rem; font-weight:500}
form.stack .row{margin:0}
input[type=text],input[type=number],input[type=datetime-local],select,textarea{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:.7rem; padding:.65rem .8rem; width:100%;
}
input[type=file]{font:inherit; font-size:.9rem}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink); outline-offset:1px}
.hint{font-weight:400; font-size:.82rem; color:var(--muted); line-height:1.45}


/* ---- flow pages: a client's film and its schedule ---- */
body.flow{
  --f-bg:#ffffff; --f-surface:#f2f3f5; --f-ink:#17181a; --f-muted:#6c6f75; --f-line:#e2e4e8; --f-bad:#c8102e;
  background:var(--f-bg); color:var(--f-ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  body.flow{ --f-bg:#000000; --f-surface:#16171a; --f-ink:#f2f3f5; --f-muted:#9a9da3; --f-line:#2a2c30; --f-bad:#ff5a6e; }
}
main.flow{max-width:none; padding:0}
.flow-back{display:block; padding:1rem max(1.25rem, env(safe-area-inset-left)) 0; color:var(--f-muted); text-decoration:none; font-size:.95rem}
.flow-back::before{content:"‹ "}

.film{display:flex; flex-direction:column; align-items:center; padding:1rem 1.25rem 0}
.film-video{
  height:min(40svh, 640px); width:auto; max-width:100%; aspect-ratio:9/16; object-fit:cover;
  border-radius:22px; background:#000; display:block;
}
.film-body{width:100%; max-width:26rem; padding:1.4rem 0 0}
.film-body h1{font-size:1.85rem; line-height:1.08; letter-spacing:-.035em; font-weight:600; margin:0 0 .5rem}
.film-sub{color:var(--f-muted); font-size:1.02rem; margin:0 0 1.25rem}
@media (min-width:860px){
  .film{flex-direction:row; justify-content:center; align-items:center; gap:4rem; min-height:calc(100svh - 7rem)}
  .film-video{height:min(82svh, 860px)}
  .film-body{padding:0}
  .film-body h1{font-size:2.5rem}
}

/* the two choices */
.choice-main,.choice-self summary{
  display:flex; flex-direction:column; gap:.2rem; text-decoration:none;
  padding:1.05rem 1.2rem; border-radius:18px; cursor:pointer;
}
.choice-main{background:var(--f-ink); color:var(--f-bg); margin:0 0 .75rem}
.choice-main strong,.choice-self summary strong{font-size:1.12rem; font-weight:600}
.choice-main span{opacity:.72; font-size:.92rem}
.choice-main:active,.choice-self summary:active{transform:scale(.985)}
button.choice-main.as-button{width:100%; border:0; font:inherit; align-items:center; margin-top:1.25rem}
.choice-self{border-radius:18px; box-shadow:inset 0 0 0 1.5px var(--f-line)}
.choice-self summary{list-style:none}
.choice-self summary::-webkit-details-marker{display:none}
.choice-self summary span{color:var(--f-muted); font-size:.92rem}
.choice-self[open] summary span{display:none}

.steps{margin:0; padding:.25rem 1.2rem 1.2rem 2.6rem; display:grid; gap:1rem}
.steps li{padding-left:.2rem}
.steps li::marker{color:var(--f-muted); font-weight:600}
.steps li > p:first-child{margin:0 0 .5rem; font-weight:500}
.step-btn{
  display:inline-flex; align-items:center; padding:.6rem 1.05rem; border-radius:999px; border:0; cursor:pointer;
  background:var(--f-surface); color:var(--f-ink); font:inherit; font-weight:600; font-size:.95rem; text-decoration:none;
}
.step-note{display:block; color:var(--f-muted); font-size:.88rem; line-height:1.45}
.caption-text{white-space:pre-wrap; color:var(--f-muted); font-size:.88rem; line-height:1.5; margin:.75rem 0 0;
  max-height:7.5em; overflow:auto; padding:.75rem .9rem; border-radius:12px; background:var(--f-surface)}

/* picking a time */
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{
  display:inline-block; padding:.65rem 1rem; border-radius:999px; cursor:pointer; font-weight:500;
  box-shadow:inset 0 0 0 1.5px var(--f-line);
}
.chip input:checked + span{background:var(--f-ink); color:var(--f-bg); box-shadow:none}
.chip input:focus-visible + span{outline:2px solid var(--f-ink); outline-offset:2px}
.other-time{display:grid; gap:.35rem; margin-top:1rem; color:var(--f-muted); font-size:.9rem}
.other-time[hidden]{display:none}
.other-time input{font:inherit; color:var(--f-ink); background:var(--f-surface); border:0; border-radius:12px; padding:.75rem .9rem}

.inline-actions{display:flex; gap:1.5rem}
.inline-actions form{margin:0}
body.flow button.link{font-size:.98rem; color:var(--f-ink); text-decoration:none; font-weight:600}
.note{font-size:.92rem; color:var(--f-muted); margin:0 0 .75rem}
.note.bad{color:var(--f-bad)}

/* the optional extras under a post */
.extra,.caption-peek{margin-top:2rem; border-top:1px solid var(--f-line); padding-top:1rem}
.extra-head{display:flex; justify-content:space-between; align-items:baseline; margin:0; list-style:none; cursor:pointer}
.extra-head::-webkit-details-marker,.caption-peek summary::-webkit-details-marker{display:none}
.extra-head span{color:var(--f-muted); font-size:.9rem}
.extra.on .extra-head span{color:var(--f-ink)}
.extra p{margin:.6rem 0}
.extra blockquote{margin:.25rem 0 .75rem; padding:.75rem .9rem; border-radius:14px; background:var(--f-surface); white-space:pre-wrap; font-size:.93rem}
.extra form.stack{margin:1rem 0 0}
.extra form.stack label{font-weight:500}
.extra input[type=text],.extra textarea{background:var(--f-surface); border:0; color:var(--f-ink); border-radius:12px}
.caption-peek summary{list-style:none; cursor:pointer; font-weight:600}
.caption-peek .caption-text{max-height:none}

.flow-fine{display:flex; justify-content:center; gap:1.25rem; padding:2.5rem 1rem 2rem; font-size:.8rem}
.flow-fine a{color:var(--f-muted); text-decoration:none}

/* the draft: caption, auto-DM and time on one page */
.plan section{margin:0 0 1.75rem}
.plan h2{font-size:1.15rem; font-weight:600; letter-spacing:-.015em; margin:0 0 .6rem}
.plan .film-sub{margin:-.3rem 0 .8rem}
.caption-edit,.dm-fields input[type=text],.dm-fields textarea{
  width:100%; font:inherit; font-size:.95rem; line-height:1.5; color:var(--f-ink);
  background:var(--f-surface); border:0; border-radius:14px; padding:.8rem .9rem; resize:none; overflow:hidden;
}
.caption-edit:focus,.dm-fields input:focus,.dm-fields textarea:focus{outline:2px solid var(--f-ink); outline-offset:1px}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer}
.switch-row h2{margin:0}
input[role=switch]{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:51px; height:31px; border-radius:999px; margin:0;
  background:var(--f-line); position:relative; cursor:pointer; transition:background .2s;
}
input[role=switch]::after{
  content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:transform .2s;
}
input[role=switch]:checked{background:#34c759}
input[role=switch]:checked::after{transform:translateX(20px)}
input[role=switch]:focus-visible{outline:2px solid var(--f-ink); outline-offset:2px}
.dm-fields{display:grid; gap:.9rem; margin-top:.9rem}
.dm-fields label{display:grid; gap:.35rem; font-size:.9rem; color:var(--f-muted)}
.dm-fields .fineprint{margin:0}
.dm:has(input[role=switch]:not(:checked)) .dm-fields{display:none}
.readback{margin-top:2rem}
.readback h2{font-size:1.05rem; font-weight:600; margin:1.5rem 0 .5rem}
.readback .caption-text{max-height:none}
.readback blockquote{margin:.4rem 0; padding:.75rem .9rem; border-radius:14px; background:var(--f-surface); white-space:pre-wrap; font-size:.93rem}
@media (prefers-reduced-motion: reduce){ input[role=switch],input[role=switch]::after{transition:none} }
.steps.solo{padding:.25rem 0 0 1.4rem}