/* Zinnia Crew — Z Green / Z Gray with gold reserved for "press record" and things that need attention.
   Layout: desktop = top tabs + weekly board; phone = app-style bottom tab bar + "next up" card. */
:root{
  --green:#375c4b; --green-2:#2b4a3c; --gray:#404041; --sage:#a1b1a9; --mist:#afb1b3; --mauve:#995b7f; --gold:#fbaf3f;
  --paper:#f3f2ed; --card:#ffffff; --ink:#404041; --muted:#626c65; --line:#cfd5cf; --tint:#e4ebe6; --draft-bg:#f8e8cf; --draft-ink:#6e4718;
  --display:"Arial Black","Helvetica Neue",Arial,sans-serif; --body:Arial,Helvetica,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --gutter-l:max(16px,env(safe-area-inset-left,0px)); --gutter-r:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root{
  --paper:#161b19; --card:#1f2623; --ink:#e6ebe8; --muted:#a2ada7; --line:#36413c; --tint:#26302c; --sage:#7f948a;
  --green:#5e8c76; --draft-bg:#3a2e1a; --draft-ink:#f3cf96; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 var(--body)}
body.booting main,body.booting .gate{visibility:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}

/* top bar */
.topbar{background:var(--green-2);color:#fff;padding:calc(10px + var(--safe-t)) var(--gutter-r) 10px var(--gutter-l);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:38px;height:38px;display:grid;place-items:center;background:var(--gold);color:#1e2622;font:900 28px/1 var(--display)}
.brand b{font-size:13px;letter-spacing:.16em;display:block}
.brand small{font-size:10px;font-weight:700;letter-spacing:.2em;opacity:.8}
.top-right{display:flex;align-items:center;gap:8px}
.preview-as{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:900;letter-spacing:.08em}
.preview-as select{background:transparent;border:1px solid #9fb6aa;color:#fff;padding:5px 6px;font-size:12px}
.preview-as option{color:#222}
.chip{display:inline-block;border:1px solid var(--line);padding:5px 8px;font-size:10px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.chip.warm{background:var(--gold);color:#232723;border-color:var(--gold)}
.chip.published{background:var(--tint);color:var(--green);border-color:var(--sage)}
.chip.draft{background:var(--draft-bg);color:var(--draft-ink);border-color:#e3bf85}
.chip.rate{background:transparent;color:var(--muted)}

/* buttons */
.solid,.outline,.danger{border:1px solid var(--green);padding:10px 14px;font-size:11px;letter-spacing:.05em;font-weight:900;border-radius:0;min-height:42px;background:transparent}
.solid{background:var(--green);color:#fff}
.outline{color:var(--green)}
.outline.icon{min-width:42px;padding:10px}
.danger{color:#b04040;border-color:#c79090}
.textlink{background:none;border:0;padding:6px 0;color:var(--green);font-weight:900;font-size:12px;letter-spacing:.03em}
@media (prefers-color-scheme:dark){.outline,.textlink{color:#9fd0b8}.outline{border-color:#5e8c76}}

/* gate */
.gate{min-height:calc(100dvh - 58px);background:var(--green);display:grid;place-items:center;padding:32px var(--gutter-r) calc(32px + var(--safe-b)) var(--gutter-l)}
.auth-panel{width:min(100%,460px);background:var(--paper);padding:28px}
.auth-panel h1{font:900 clamp(56px,16vw,84px)/.86 var(--display);letter-spacing:-.07em;margin:12px 0 20px;color:var(--green)}
.dot{color:var(--gold)}
.overline{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--green)}
@media (prefers-color-scheme:dark){.overline{color:#9fd0b8}.auth-panel h1{color:#9fd0b8}}
.auth-tabs{display:flex;gap:6px;margin:6px 0 14px}
.auth-tabs button{flex:1;padding:11px 6px;border:1px solid var(--green);background:transparent;font-size:11px;font-weight:900;letter-spacing:.04em}
.auth-tabs .selected{background:var(--green);color:#fff}
.auth-help{font-size:14px;line-height:1.5;margin:0 0 14px}
.auth-panel form{display:grid;gap:12px}
.auth-panel label,.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--green)}
@media (prefers-color-scheme:dark){.auth-panel label,.form-grid label{color:#9fd0b8}}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:0;background:var(--card);padding:11px 12px;font-size:16px;font-weight:400;letter-spacing:0;min-width:0;color:var(--ink)}
.field-error{color:#b04040;font-size:13px;font-weight:700;margin:0;min-height:0}
.field-error:empty{display:none}
.subtle{color:var(--muted);font-size:12px;margin:12px 0 0}
.subtle:empty{display:none}
.hint{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0}

/* main + tabs */
main{max-width:1180px;margin:0 auto;padding:0 var(--gutter-r) 40px var(--gutter-l)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-x:auto}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:14px 12px 11px;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}
.tabs button[aria-current="page"]{color:var(--green);border-bottom-color:var(--gold)}
@media (prefers-color-scheme:dark){.tabs button[aria-current="page"]{color:#9fd0b8}}
.ti{font-size:13px;line-height:1}
.ti.tk{font:900 9px/1 var(--display);border:1.5px dashed currentColor;padding:2px 3px;letter-spacing:.02em}
.preview-banner{margin:14px 0 0;padding:10px 14px;background:var(--draft-bg);color:var(--draft-ink);border-left:5px solid var(--gold);font-size:13px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.preview-banner .textlink{color:inherit;text-decoration:underline}
.view{padding:22px 0 30px}

/* week head */
.week-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:4px solid var(--green);padding-bottom:14px;margin-bottom:14px}
.week-head h2{font:900 clamp(26px,4.4vw,46px)/1 var(--display);letter-spacing:-.05em;margin:6px 0 4px;color:var(--green);text-wrap:balance}
@media (prefers-color-scheme:dark){.week-head h2{color:#cfe3d8}}
.sub{color:var(--muted);margin:0;font-size:13px}
.week-nav{display:flex;gap:6px;flex-wrap:wrap}
.filters{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:var(--muted)}
.inline-ctrl{display:flex;align-items:center;gap:6px}
.inline-ctrl input{width:auto}
.inline-ctrl select{width:auto;padding:6px 8px;font-size:13px}

/* board */
.board{border-top:1px solid var(--line)}
.day{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--line)}
.day-stamp{background:var(--tint);padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.day.today .day-stamp{box-shadow:inset 5px 0 0 var(--gold)}
.day-stamp .weekday{font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.day-stamp .num{font:900 54px/1 var(--display);color:var(--green);letter-spacing:-.07em}
@media (prefers-color-scheme:dark){.day-stamp .num{color:#9fd0b8}}
.day-stamp .month{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700}
.day-stamp .count{margin-top:auto;align-self:flex-start;font-size:10px;font-weight:900;background:var(--green);color:#fff;padding:5px 8px}
.day-content{padding:14px;min-width:0}
.shoots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.empty-day{color:var(--muted);font-size:13px;padding:6px 0}
.empty-state{padding:44px 0;text-align:left}
.empty-state h2{font:900 34px/1 var(--display);letter-spacing:-.05em;color:var(--sage);margin:0 0 8px}
.empty-state p{color:var(--muted);margin:0}

/* shoot card */
.shoot-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);padding:16px;min-width:0}
.card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.card-head>div:first-child{min-width:0}
.admin-tags{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.shoot-card .meta{font-size:10px;letter-spacing:.09em;font-weight:900;color:var(--green);text-transform:uppercase}
@media (prefers-color-scheme:dark){.shoot-card .meta{color:#9fd0b8}}
.shoot-card h3{margin:6px 0 3px;font-size:19px;line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
.client{color:var(--muted);font-size:13px}
.times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:14px 0 12px}
.timebox{border:1px solid var(--line);padding:8px;min-width:0}
.timebox b{display:block;font-size:10px;letter-spacing:.08em}
.timebox strong{font:900 clamp(17px,2.2vw,22px)/1.1 var(--display);letter-spacing:-.04em;display:block;margin-top:4px;white-space:nowrap}
.timebox strong small{font:700 10px var(--body);letter-spacing:.04em;margin-left:3px}
.timebox.record{background:var(--gold);border-color:var(--gold);color:#1f2420}
.map-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.map-actions a{font-size:11px;font-weight:900;text-decoration:none;background:var(--green);color:#fff;padding:12px 12px;letter-spacing:.04em}
.map-actions a.secondary{background:var(--tint);color:var(--green)}
@media (prefers-color-scheme:dark){.map-actions a.secondary{color:#9fd0b8}}
.detail{font-size:13px;border-top:1px solid var(--line);padding:8px 0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;line-height:1.4}
.detail b{color:var(--green);font-size:10px;letter-spacing:.07em;padding-top:2px}
@media (prefers-color-scheme:dark){.detail b{color:#9fd0b8}}
.detail .text{white-space:pre-line;overflow-wrap:anywhere}
.detail a{font-weight:700}
.tk-inline{font:900 10px/1 var(--display);border:1.5px dashed var(--mauve);color:var(--mauve);padding:3px 5px;letter-spacing:.04em}
.card-actions{border-top:1px solid var(--line);padding-top:4px;text-align:right}

/* crew: next up */
.next-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:6px 0 10px}
.next-date{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--muted)}
.next-date b{font:900 28px/1 var(--display);color:var(--ink);letter-spacing:-.05em;margin:0 2px}
.shoot-card.hero{border-left-width:0;border-top:6px solid var(--gold);padding:18px}
.shoot-card.hero h3{font:900 clamp(26px,7vw,36px)/1 var(--display);letter-spacing:-.05em}
.shoot-card.hero .timebox strong{font-size:clamp(22px,7vw,30px)}
.shoot-card.hero .map-actions a{flex:1;text-align:center;font-size:12px;padding:15px 10px}
.list-head{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--green);margin:26px 0 8px}
@media (prefers-color-scheme:dark){.list-head{color:#9fd0b8}}
.compact-list{display:grid;gap:6px}
.row{background:var(--card);border:1px solid var(--line)}
.row summary{list-style:none;display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;cursor:pointer}
.row summary::-webkit-details-marker{display:none}
.row-date{font-size:9px;font-weight:900;letter-spacing:.06em;color:var(--muted);line-height:1.1}
.row-date b{display:block;font:900 24px/1 var(--display);color:var(--green);letter-spacing:-.05em}
@media (prefers-color-scheme:dark){.row-date b{color:#9fd0b8}}
.row-title{font-weight:700;min-width:0;overflow-wrap:anywhere}
.row-title small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.row-time{font-weight:900;font-size:13px;white-space:nowrap}
.row[open] summary{border-bottom:1px solid var(--line)}
.row .shoot-card{border:0;border-left:5px solid var(--green)}
.past{margin-top:22px}
.past summary{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--muted);cursor:pointer;padding:8px 0}
.past .compact-list{opacity:.75}
.bottom-note{color:var(--muted);font-size:12px;margin-top:22px}

/* forms */
.panel{background:var(--card);border:1px solid var(--line);padding:20px;margin-bottom:14px}
.panel h3{font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--green);margin:0 0 12px}
@media (prefers-color-scheme:dark){.panel h3{color:#9fd0b8}}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
.form-grid label{grid-column:span 2}
.form-grid label:has(input[type=time]){grid-column:span 1}
.hours-readout{grid-column:span 1;align-self:end;font-size:13px;color:var(--muted);padding:12px 0}
.hours-readout b{font:900 18px var(--display);color:var(--ink);letter-spacing:-.03em}
.field-group{border:0;border-top:1px solid var(--line);margin:18px 0 0;padding:14px 0 0}
.field-group legend{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--green);padding:0 8px 0 0}
.choice-grid{display:flex;flex-wrap:wrap;gap:6px}
.choice-grid label{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:10px 12px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.choice-grid label:has(input:checked){background:var(--tint);border-color:var(--green);font-weight:700}
.choice-grid input{width:18px;height:18px;accent-color:var(--green);margin:0}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* crew list */
.crew-table{display:grid}
.crew-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.crew-row:first-child{border-top:0}
.crew-row.inactive{opacity:.5}
.initials{width:36px;height:36px;display:grid;place-items:center;background:var(--sage);color:#1c2520;font-weight:900;font-size:12px;border-radius:50%}
.crew-name{font-weight:700;min-width:0;overflow-wrap:anywhere}
.crew-name small{display:block;font-weight:400;color:var(--muted);font-size:12px}

/* TK */
.tk-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;padding:30px 0}
.tk-mark{font:900 64px/1 var(--display);letter-spacing:-.04em;color:var(--mauve);border:3px dashed var(--mauve);padding:14px 16px}
.tk-panel h2{font:900 clamp(30px,5vw,48px)/1 var(--display);letter-spacing:-.05em;margin:8px 0 10px}
.tk-panel p{max-width:56ch;line-height:1.55;margin:0}
body.is-admin .crew-text,body:not(.is-admin) .admin-text{display:none}

/* settings */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.settings-grid .panel{margin:0}
.toggle-line{display:flex;gap:12px;align-items:center;margin:14px 0;font-size:15px;cursor:pointer}
.toggle-line input{width:22px;height:22px;accent-color:var(--green);flex:0 0 auto;margin:0}
.steps{padding-left:18px;line-height:1.55;margin:0}
.steps li+li{margin-top:8px}

/* dialog + toast */
dialog{width:min(94vw,760px);max-height:86dvh;border:2px solid var(--green);padding:22px;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:#0a2219c0}
.dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dialog-head h2{font:900 30px/1 var(--display);letter-spacing:-.05em;margin:6px 0}
.import-list{margin:14px 0;display:grid}
.import-item{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13px;cursor:pointer}
.import-item input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.import-item small{display:block;color:var(--muted);margin-top:3px}
.toast{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-b));width:min(92vw,440px);background:#1b2922;color:#fff;padding:14px 18px;border-left:5px solid var(--gold);font-size:14px;box-shadow:0 8px 24px #0004}

/* phone: app-style bottom tabs */
@media (max-width:720px){
  .topbar{padding-block:calc(8px + var(--safe-t)) 8px}
  .preview-as span{display:none}
  main{padding-bottom:calc(90px + var(--safe-b))}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;background:var(--card);border-top:1px solid var(--line);border-bottom:0;
    padding:4px var(--gutter-r) calc(4px + var(--safe-b)) var(--gutter-l);justify-content:space-around;overflow:visible}
  .tabs button{flex:1;flex-direction:column;gap:4px;border-bottom:0;border-top:3px solid transparent;padding:9px 2px 7px;font-size:9px;letter-spacing:.06em}
  .tabs button[aria-current="page"]{border-top-color:var(--gold);border-bottom:0}
  .ti{font-size:17px}
  .toast{bottom:calc(84px + var(--safe-b))}
  .day{grid-template-columns:1fr}
  .day-stamp{flex-direction:row;align-items:center;gap:10px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .day-stamp .num{font-size:32px}.day-stamp .count{margin:0 0 0 auto;align-self:center}
  .day-content{padding:10px 0}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid label{grid-column:1/-1}
  .form-grid label:has(input[type=time]){grid-column:span 1}
  .hours-readout{grid-column:span 1}
  .week-nav{width:100%}.week-nav .solid{flex:1}
  .tk-panel{grid-template-columns:1fr}
  .tk-mark{justify-self:start;font-size:44px}
  .panel{padding:16px}
  .crew-row{grid-template-columns:36px minmax(0,1fr) auto}
  .crew-row .textlink,.crew-row .hint{grid-column:2/-1;justify-self:start;padding:0}
}
@media print{
  @page{size:landscape;margin:10mm}
  body{background:#fff;color:#222;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.tabs,.preview-banner,.week-nav,.filters,.map-actions,.card-actions,.toast,#dispatchView,#crewView,#gearView,#settingsView{display:none!important}
  main{max-width:none;padding:0}.day{break-inside:avoid;grid-template-columns:110px minmax(0,1fr)}
  .shoot-card{break-inside:avoid;padding:10px}.shoot-card h3{font-size:14px}.detail{font-size:10px;padding:4px 0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.row .shoot-card .card-head{display:none}.row .shoot-card .times{margin-top:0}