/* The call sheet as a desk (Luke chose mock B, 29 Sept 2026). STAGING ONLY, part
   of the v2 layer; live strips it. Laid out by js/v2-desk.js, which moves the
   existing sections into one panel per step. Colours come from v2-tokens.css. */

/* The desk is wider than the tool page's column: rail, the panel, the paper. */
.desk{display:grid;grid-template-columns:236px minmax(0,1fr) 400px;gap:24px;align-items:start;
  width:min(1360px,calc(100vw - 32px));margin-left:calc(50% - min(680px,50vw - 16px))}
body.has-desk #view-edit > .cs{display:none}

/* ---------- the rail ---------- */
.desk-rail{position:sticky;top:88px}
.desk-rail ol{list-style:none;margin:0;padding:0}
.desk-rail button{white-space:nowrap;display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;border-radius:var(--r-s);
  padding:9px 12px;text-align:left;cursor:pointer;font:inherit;font-weight:600;color:var(--ink)}
.desk-rail button:hover{background:var(--calm-2)}
.desk-rail button.on{background:var(--white);box-shadow:0 1px 0 var(--line)}
.desk-rail button.lower{font-weight:500;color:var(--ink-2)}
.desk-rail small{margin-left:auto;font-weight:500;font-size:var(--fs-label);color:var(--ink-3);white-space:nowrap}
.desk-rule{height:0;border-top:1px solid var(--line);margin:10px 12px;padding:0;background:none}
.desk-dot{flex:none;width:18px;height:18px;overflow:visible}
.desk-dot circle{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.desk-dot .h,.desk-dot .k{display:none}
.desk-dot.done circle{fill:var(--ink);stroke:var(--ink)}
.desk-dot.done .k{display:block;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.desk-dot.half .h{display:block;fill:var(--ink)}
.desk-dot.half circle{stroke:var(--ink)}

/* ---------- the panel ---------- */
.desk-main{min-width:0}
.desk-steps{display:none}
/* #view-edit raises these above the page's own section rules, which zeroed the
   padding and left every field flush with the card's edge (Luke, 29 Sept: "the
   edge of the forms is a bit tight"). 28px is the design system's panel padding. */
#view-edit .desk-panel{background:var(--white);border-radius:var(--r);padding:12px 28px 24px}
.desk-panel[hidden]{display:none}
.desk-h{font-size:var(--fs-lead);font-weight:700;letter-spacing:-.015em;margin:16px 0 4px}
#view-edit .desk-panel .cs-eg{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-start;margin:8px 0 14px;font-size:var(--fs-small)}
/* the times grid's 150px columns did not fit two across inside the padded card on a phone */
#view-edit .desk-panel .cs-facts{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}
#view-edit .desk-panel .cs-eg button{font:inherit;font-weight:600;font-size:var(--fs-small);color:var(--ink);background:var(--calm-2);border:0;border-radius:var(--r-s);padding:9px 14px;cursor:pointer}
#view-edit .desk-panel .cs-eg button:hover{background:color-mix(in srgb, var(--calm-2) 80%, var(--ink))}
#view-edit .desk-panel .cs-eg a{color:var(--ink-2);text-underline-offset:3px}
.desk-panel > section{margin:0}
/* the first band of an untitled panel is its heading; every other band is a subheading */
.desk-panel:not(.titled) > section:first-child > .band{font-size:var(--fs-lead);font-weight:700;letter-spacing:-.015em;border-top:0;margin-top:8px;padding-top:8px;color:var(--ink)}
.desk-panel .band{font-size:var(--fs-ui)}
.desk-panel.titled > section:first-of-type > .band,.desk-panel.titled > .cs:first-of-type .cs-label{border-top:0;margin-top:6px}
.desk-panel > .cs{background:none;box-shadow:none;border:0;padding:0;margin:0}
.desk-panel > .cs .cs-label{padding:18px 0 6px;border-top:1px solid var(--line);margin-top:18px;background:none}
.desk-panel > .cs .cs-body{padding:0}
.desk-panel .cs-scroll{overflow:visible}
.desk-next{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.desk-back,.desk-fwd{border:0;border-radius:var(--r);padding:11px 16px;font:inherit;font-weight:600;cursor:pointer}
.desk-back{background:var(--calm-2);color:var(--ink)}
.desk-fwd{background:var(--ink);color:var(--accent);font-weight:700}
.desk-foot .cs-priv{margin:12px 4px 0}

/* ---------- schedule rows: a card each, the words get the width ----------
   td order from call-sheet.js: n, time, kind, what, where, who, shots, needs, actions */
.desk #s-schedule thead{display:none}
.desk #s-schedule table,.desk #s-schedule tbody{display:block;width:100%}
.desk #s-schedule tr{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1fr) auto;
  grid-template-areas:"t what what act" "t where who act" "t kind shots shots" "t needs needs needs";
  gap:6px 8px;background:var(--tint);border-radius:var(--r);padding:10px;margin-bottom:8px}
.desk #s-schedule tr.banner{background:var(--calm-1);grid-template-areas:"t what what act" "t where who act" "t kind kind kind"}
.desk #s-schedule td{display:block;padding:0;width:auto}
.desk #s-schedule td.n{display:none}
.desk #s-schedule td.t{grid-area:t}
.desk #s-schedule td.kind{grid-area:kind}
.desk #s-schedule td:nth-child(4){grid-area:what}
.desk #s-schedule td:nth-child(4) [contenteditable]{font-weight:600}
.desk #s-schedule td:nth-child(5){grid-area:where}
.desk #s-schedule td:nth-child(6){grid-area:who}
.desk #s-schedule td.shots{grid-area:shots}
.desk #s-schedule td.needs{grid-area:needs}
.desk #s-schedule td.act{grid-area:act;display:flex;flex-direction:column;gap:4px}
.desk #s-schedule tr.banner td:nth-child(7),.desk #s-schedule tr.banner td:nth-child(8){display:none}
.desk #s-schedule td.t [contenteditable]{font-weight:700;font-variant-numeric:tabular-nums}
.desk #s-schedule td.kind .pick{width:auto;max-width:100%}

/* ---------- people rows: name and call first, the details under them ----------
   td order: in, role, name, mobile, email, call, at, pick up, actions (suppliers:
   company, brings, mobile, email, drop, collect, actions) */
.desk .desk-panel[data-step="people"] thead{display:none}
.desk .desk-panel[data-step="people"] table,.desk .desk-panel[data-step="people"] tbody{display:block;width:100%}
.desk .desk-panel[data-step="people"] tr{display:grid;gap:6px 8px;background:var(--tint);border-radius:var(--r);padding:10px;margin-bottom:8px;
  grid-template-columns:22px minmax(0,1.3fr) minmax(0,1fr) 92px auto;
  grid-template-areas:"in name name call act" "in role role at act" "in mobile email pickup act"}
.desk .desk-panel[data-step="people"] td{display:block;padding:0;width:auto}
.desk .desk-panel[data-step="people"] td.in{grid-area:in;padding-top:12px}
.desk .desk-panel[data-step="people"] td:nth-child(2){grid-area:role}
.desk .desk-panel[data-step="people"] td:nth-child(3){grid-area:name}
.desk .desk-panel[data-step="people"] td:nth-child(3) [contenteditable]{font-weight:600}
.desk .desk-panel[data-step="people"] td:nth-child(4){grid-area:mobile}
.desk .desk-panel[data-step="people"] td:nth-child(5){grid-area:email}
.desk .desk-panel[data-step="people"] td:nth-child(6){grid-area:call}
.desk .desk-panel[data-step="people"] td:nth-child(6) [contenteditable]{font-weight:700;font-variant-numeric:tabular-nums}
.desk .desk-panel[data-step="people"] td:nth-child(7){grid-area:at}
.desk .desk-panel[data-step="people"] td:nth-child(8){grid-area:pickup}
.desk .desk-panel[data-step="people"] td:nth-child(8) [contenteditable]:empty::before{content:"Pick up"}
.desk .desk-panel[data-step="people"] td.act{grid-area:act;display:flex;flex-direction:column;gap:4px}
.desk #s-suppliers tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px 84px auto;
  grid-template-areas:"name name drop collect act" "role role role role act" "mobile email email email act"}
.desk #s-suppliers td:nth-child(1){grid-area:name}
.desk #s-suppliers td:nth-child(1) [contenteditable]{font-weight:600}
.desk #s-suppliers td:nth-child(2){grid-area:role}
.desk #s-suppliers td:nth-child(3){grid-area:mobile}
.desk #s-suppliers td:nth-child(4){grid-area:email}
.desk #s-suppliers td:nth-child(5){grid-area:drop}
.desk #s-suppliers td:nth-child(6){grid-area:collect}
.desk #s-suppliers td:nth-child(3) [contenteditable],.desk #s-suppliers td:nth-child(2) [contenteditable]{font-weight:400}

/* ---------- the paper ---------- */
.desk-paper{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto;scrollbar-width:thin}
.desk-lab{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 8px}
.desk-zoom{margin:0}
.desk-sheet{transform-origin:top left;width:var(--pgw,297mm)}
.desk-sheet .page{margin-bottom:5mm}

/* no room for the paper: the panel takes it */
@media (max-width:1180px){.desk{grid-template-columns:200px minmax(0,1fr)}.desk-paper{display:none}}

/* a phone: steps, not a desk */
@media (max-width:760px){
  .desk{display:block;width:auto;margin-left:0}
  .desk-rail{display:none}
  .desk-steps{display:flex;gap:6px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;margin:0;scroll-padding:0 12px}
  .desk-steps.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .desk-steps.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
  .desk-steps.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
  .desk-steps::-webkit-scrollbar{display:none}
  .desk-steps button{flex:none;display:flex;gap:6px;align-items:center;border:0;border-radius:var(--pill);padding:7px 12px;
    background:var(--white);font:inherit;font-weight:600;font-size:var(--fs-label);color:var(--ink);cursor:pointer}
  .desk-steps button.on{background:var(--ink);color:var(--accent)}
  .desk-steps .desk-dot{width:14px;height:14px}
  .desk-steps .on .desk-dot.done circle{fill:var(--accent);stroke:var(--accent)}
  .desk-steps .on .desk-dot.done .k{stroke:var(--ink)}
  .desk-steps .on .desk-dot circle,.desk-steps .on .desk-dot.half .h{stroke:var(--accent)}
  .desk-steps .on .desk-dot.half .h{fill:var(--accent)}
  #view-edit .desk-panel{padding:8px 16px 18px}
  .desk #s-schedule tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t act" "what what" "where where" "who who" "kind kind" "shots shots" "needs needs"}
  .desk #s-schedule tr.banner{grid-template-areas:"t act" "what what" "where where" "who who" "kind kind"}
  .desk #s-schedule td.t{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .desk #s-schedule td.t [contenteditable]{width:84px}
  .desk #s-schedule td.act{flex-direction:row}
  .desk .desk-panel[data-step="people"] tr{grid-template-columns:22px minmax(0,1fr) 84px;
    grid-template-areas:"in name call" "in role role" "in at at" "in mobile mobile" "in email email" "in pickup act"}
  .desk .desk-panel[data-step="people"] td.act{flex-direction:row;justify-content:flex-end}
  .desk #s-suppliers tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"name name" "role role" "drop collect" "mobile mobile" "email email" "act act"}
  .desk #s-suppliers td.act{justify-content:flex-end}
  .desk-next{position:sticky;bottom:0;background:var(--white);margin:18px -16px -18px;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-radius:0 0 var(--r) var(--r)}
  .desk-next button{flex:1;font-size:var(--fs-small);padding:11px 10px}
}
@media print{.desk-rail,.desk-paper,.desk-steps,.desk-next{display:none!important}}
/* the row's photo control sits on the kind line */
.desk #s-schedule td.kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.desk #s-schedule td.kind .addphoto,.desk #s-schedule td.kind .rowphoto{margin-top:0}