/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved. Not licensed for copying or reuse. */
/* The chrome every filming-day tool page shares (18 Sept 2026): the Edit and
   Sheet toggle, the card, the section bands, the boxed fields, the tables,
   the row buttons. Luke: "make all the edit page for all tools look
   consistent... use call sheet as the reference." The call sheet's styles
   moved here verbatim; the shot list loads the same file. A page keeps only
   what is its own. */

/* The call sheet tool. Two views over one production record.

   EDIT is a form and looks like one: every field carries a label and a visible
   box. It replaces "tap any field to edit", which asked people to guess where
   the editable parts were.

   SHEET is the finished document, paginated into real A4 landscape pages. What
   is on screen in Sheet view is exactly what comes out of the printer, because
   the printer gets the same page boxes at the same size - there is no second
   print stylesheet guessing at the layout.

   The geometry comes from the AprilMay reference, measured out of that PDF's own
   text positions and scaled 1024pt -> 297mm. See the analysis in Drive. */

.tool-head{ padding:34px 0 18px; }
.tool-head h1{ margin:8px 0 10px; }

/* ---------- the view bar ---------- */

/* Was a gradient fading to transparent, so form rows scrolling under it showed
   through and the bar read as part of the page rather than above it (Luke's
   iPad screenshot, 23 Sept 2026). Solid ground plus a shadow: a border says
   diagram, a shadow says object. The shadow is pulled to the sides so it does
   not draw a hard line across a page that has none elsewhere. */
.viewbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 0 14px; margin-bottom:6px;
  background:var(--page);
  box-shadow:0 1px 2px rgba(34,31,27,.05), 0 10px 24px -8px rgba(34,31,27,.13);
}
.seg{
  display:inline-flex; background:var(--sheet-2); border:1px solid var(--edge);
  border-radius:var(--r-s); padding:3px; gap:3px;
}
.seg button{
  font:inherit; font-size:var(--fs-small); padding:7px 18px; border:0; border-radius:var(--r-s);
  background:none; color:var(--ink-2); cursor:pointer;
}
.seg button[aria-selected="true"]{
  background:var(--ink); color:var(--btn-fg);
  box-shadow:0 1px 2px rgba(34,31,27,.18);
}
.viewbar-acts{ display:flex; gap:9px; flex-wrap:wrap; margin-left:auto; }
/* Tool buttons, not shop-window buttons: the site's .btn is 48px tall with 28px
   sides, which beside the Edit/Sheet switch read as huge (Luke, 21 Sept 2026). */
.viewbar-acts .btn{ cursor:pointer; min-height:0; padding:9px 16px; font-size:var(--fs-small); }

/* ---------- the card the form sits in ----------
   The card is near-white and the section bands are the warm grey. They used to
   be the same value, which is why the page read as a wash of nothing. */

.cs{
  background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  box-shadow:var(--lift); overflow:hidden; margin-bottom:22px;
}
.cs-label{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:11px 16px; background:var(--sheet-2); border-bottom:1px solid var(--edge);
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-ink-2);
}
.cs-label button{
  font-family:inherit; font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-ink-2); background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r-s); padding:5px 10px; cursor:pointer;
}
.cs-label button:hover{ border-color:var(--paper-faint); }
/* The example, two ways: load it into the form, or see the finished document
   first. The link is the quiet one; it owes an underline (a control owes 3:1). */
/* Inside your account the page is a tool, not a shop window. */
html.in-account .nav-links, html.in-account .nav .btn-light, html.in-account .tool-head{ display:none; }
html.in-account .nav .wrap{ justify-content:space-between; }
/* The site header (css/site-header.css) inside your account: the logo, the plan tag and Library, on a phone too. */
html.in-account header.nav .nav-links, html.in-account header.nav .nav-r .b-ink{ display:none; }
html.in-account header.nav .nav-r{ margin-left:auto; }
html.in-account header.nav .nav-r .b-out{ display:inline-flex; }
html.in-shoot .cs-priv, html.in-shoot .tpl-pro, html.in-shoot .tpl-printed, html.in-shoot .faq-free{ display:none !important; }
/* On a phone the intro is one sentence: the paragraph took most of the screen. */
@media (max-width:700px){ .tool-head .lede-more{ display:none; } .tool-head{ padding-bottom:0; } }
/* Car parks: ready-made rows under a location. */
.parks-ed{ margin-top:14px; padding:14px 16px 10px; border:1px solid var(--edge); border-radius:var(--r-s); }
.parks-h{ display:block; font-weight:600; font-size:var(--fs-ui); margin-bottom:8px; }
.parks-ed > .k{ display:block; margin-bottom:6px; }
.park-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:6px 8px; align-items:center; margin-bottom:12px; }
.park-row > .v:nth-child(3){ grid-column:1; }
.park-go{ grid-column:2; }
.park-row .v{ display:block; font-size:var(--fs-small); line-height:1.4; min-width:0; }
.park-go{ font-size:var(--fs-small); white-space:nowrap; }
.parks-ed .addrow{ margin-top:2px; }
@media (max-width:640px){ .park-row{ grid-template-columns:1fr; gap:5px; padding-bottom:8px; border-bottom:1px solid var(--edge); } .park-row > .v:nth-child(3), .park-go{ grid-column:auto; text-align:left; } }
/* The plan tag beside the logo, as in the app (css/app.css .plan-tag). */
:is(.nav-brand,.nav .brand) .plan-tag{ font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; border-radius:4px; padding:2px 6px; margin-left:-2px; line-height:1.5; white-space:nowrap; }
:is(.nav-brand,.nav .brand) .plan-tag.lite{ color:var(--paper-ink-2); box-shadow:inset 0 0 0 1px var(--edge); }
:is(.nav-brand,.nav .brand) .plan-tag.pro{ background:var(--ink); color:var(--btn-fg); }
:is(.nav-brand,.nav .brand) .plan-tag.studio{ background:var(--ink); color:var(--btn-fg); box-shadow:3px 3px 0 0 var(--page), 3px 3px 0 1px var(--ink); margin-right:4px; }
/* The account bar's buttons carry a small line icon. */
.sync-proj{ color:inherit; text-decoration:underline; text-underline-offset:3px; margin-left:6px; white-space:nowrap; }
.syncbtn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; margin-right:7px; }
/* One button that holds a few more: Print, and the account bar's More. */
.morebox{ position:relative; display:inline-block; }
.morebox > summary{ list-style:none; cursor:pointer; user-select:none; }
.morebox > summary::-webkit-details-marker{ display:none; }
.morebox > summary::after{ content:""; display:inline-block; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-3px); margin-left:9px; }
.morebox-menu{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:220px; background:#fdfbf7; border-radius:var(--r-s); box-shadow:0 1px 2px rgba(34,31,27,.06),0 14px 36px rgba(34,31,27,.18); padding:6px; display:grid; gap:2px; }
.morebox-menu > *{ width:100%; text-align:left; justify-content:flex-start; box-shadow:none !important; background:transparent !important; color:inherit !important; }
.morebox-menu > *:hover{ background:#f4f0e6 !important; }
.viewbar-acts .morebox-menu{ left:auto; right:0; }
.cs-eg{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.cs-eg a{ font-family:var(--sans, system-ui, sans-serif); font-size:var(--fs-label); letter-spacing:0; text-transform:none; color:var(--paper-ink-2); text-underline-offset:3px; }
.cs-body{ padding:4px 16px 20px; }

/* ⛔ THE BIG EMPTY BANDS BETWEEN SECTIONS WERE THIS. miracue.css sets
   `section{padding:96px 0}` for the marketing pages, and this tool uses a
   <section> per block, so every heading sat in 192px of dead air. A form is not
   a landing page; it sets its own rhythm from the band margins. */
#view-edit section{ padding:0; }

.band{
  background:var(--sheet-2); border:1px solid var(--edge); border-radius:var(--r-s);
  padding:7px 12px; margin:20px 0 11px;
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:10px;
  border-left:3px solid var(--sheet-accent,#221f1b);
}
.band .hint{
  margin-left:auto; letter-spacing:0; text-transform:none;
  font-size:var(--fs-micro); color:var(--paper-faint);
}

/* ---------- fields: a box at rest, not a hint on hover ---------- */

[contenteditable]{ outline:none; }
[contenteditable]:empty::before{
  content:attr(data-ph); color:var(--faint); pointer-events:none;
}
#view-edit [contenteditable]{
  display:block; border:1px solid var(--paper-edge); border-radius:var(--r-s);
  background:var(--card); padding:7px 9px; min-height:1.45em;
  /* A postal address is three lines, and textContent only round-trips them if
     the breaks render as breaks. */
  white-space:pre-wrap;
}
#view-edit [contenteditable]:focus{
  border-color:var(--ink); background:var(--white);
  box-shadow:0 0 0 2px rgba(34,31,27,.13);
}
#view-edit td [contenteditable]{ padding:5px 7px; }

/* Grids align to the top, so a long cell never leaves a tall empty band beside
   a short one. That was the "big gaps" fault. */
.cs-facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  align-items:start; gap:13px 16px; padding:4px 0 2px;
}
.fact .k, .cell .k{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-faint); margin-bottom:4px;
}
.fact .v{ display:block; font-size:var(--fs-ui); line-height:1.3; }
.fact .use-time{ margin-top:4px; padding:0; border:0; background:none; font:inherit; font-size:var(--fs-label); color:var(--ink-2, inherit); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Shoot days: one chip per date, the chip this sheet is for filled in. Tap a
   chip to make the sheet that day's; the native date input is the calendar,
   which every phone and browser already draws well. */
.fact-days{ grid-column:span 2; }
.fact-days .k em{ font-style:normal; letter-spacing:0; text-transform:none; color:var(--paper-faint); margin-left:6px; }
.days{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:34px; }
.day{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--paper-edge);
  border-radius:var(--pill); padding:6px 6px 6px 12px; background:var(--card); font-size:var(--fs-small);
  cursor:pointer; user-select:none; font-variant-numeric:tabular-nums;
}
.day[aria-pressed="true"]{ background:var(--ink); color:var(--btn-fg); border-color:var(--ink); }
.day b{ font-weight:500; }
.day .x{ font-size:var(--fs-small); line-height:1; padding:2px 5px; border-radius:var(--pill); opacity:.6; }
.day .x:hover{ opacity:1; background:rgba(255,255,255,.18); }
.day[aria-pressed="false"] .x:hover{ background:var(--sheet-2); }
.day-add{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-small); color:var(--ink-2); cursor:pointer; }
.day-add input{ font:inherit; font-size:var(--fs-small); padding:6px 8px; border:1px solid var(--paper-edge); border-radius:var(--r-s); background:var(--card); color:var(--ink); }
.days:empty::before{ content:"Pick every date of the shoot. Each becomes a tab, and everything below the tabs belongs to the day you are on."; color:var(--faint); font-size:var(--fs-label); align-self:center; }
.day-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.day-row .addrow{ margin-top:0; }
table.cs-tab td.in{ width:26px; padding-top:9px; }
table.cs-tab td.in input{ width:16px; height:16px; margin:0; accent-color:var(--ink); }
table.cs-tab tr.out td{ opacity:.45; }
table.cs-tab tr.out td.in{ opacity:1; }
.fact.big .v{ font-size:var(--fs-lead); font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

.cs-two{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  align-items:start; gap:13px 20px;
}
.cell .v{ display:block; font-size:var(--fs-small); line-height:1.4; }
.cell a{ color:var(--paper-ink); }

/* ---------- tables in the form ---------- */

.cs-scroll{ overflow-x:auto; }
table.cs-tab{ width:100%; border-collapse:separate; border-spacing:0 5px; font-size:var(--fs-small); }
table.cs-tab th{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-faint); font-weight:400;
  padding:0 8px 4px 0; white-space:nowrap;
}
table.cs-tab td{ padding:0 8px 0 0; vertical-align:top; }
table.cs-tab td.n{
  font-family:var(--mono); font-size:var(--fs-micro); color:var(--paper-faint);
  width:24px; padding-top:9px;
}
table.cs-tab td.t{ width:88px; }
table.cs-tab td.act{ width:78px; text-align:right; white-space:nowrap; padding-right:0; padding-top:4px; }
.rowbtn{
  background:var(--sheet-2); border:1px solid var(--edge); cursor:pointer;
  color:var(--paper-ink-2); font-size:var(--fs-label); line-height:1;
  padding:5px 6px; border-radius:var(--r-s); margin-left:3px;
}
.rowbtn:hover{ background:var(--ink); color:var(--btn-fg); border-color:var(--ink); }
.addrow{
  margin-top:10px; font-family:inherit; font-size:var(--fs-small); color:var(--ink);
  background:var(--sheet-2); border:1px solid var(--edge); border-radius:var(--r-s);
  padding:9px 15px; cursor:pointer;
}
.addrow:hover{ border-color:var(--paper-faint); }

/* The schedule's shots: a chip per linked shot, a picker for the rest, and a
   second time under the first. A move or break row dims its text field. */
table.cs-tab td.t .until{ margin-top:4px; font-size:var(--fs-label); color:var(--paper-ink-2); }
.pick{
  font:inherit; font-size:var(--fs-label); color:var(--paper-ink); background:var(--card);
  border:1px solid var(--paper-edge); border-radius:var(--r-s); padding:6px 6px; max-width:100%;
}
.shotlinks{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding-top:1px; }
.shotchip{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--paper-edge);
  border-radius:var(--pill); padding:3px 4px 3px 9px; background:var(--card); font-size:var(--fs-label); white-space:nowrap;
}
.shotchip b{ font-family:var(--mono); font-weight:500; font-size:var(--fs-micro); }
.shotchip button{
  background:none; border:0; cursor:pointer; font-size:var(--fs-small); line-height:1;
  padding:1px 5px; border-radius:var(--pill); opacity:.6; color:inherit;
}
.shotchip button:hover{ opacity:1; background:var(--sheet-2); }
.shotpick{ max-width:132px; }
.shotnone{ font-size:var(--fs-label); color:var(--paper-faint); }
table.cs-tab tr.banner td [contenteditable]{ background:var(--sheet-2); }

/* ---------- the account bar: where this shoot is kept ---------- */

.syncbar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:var(--fs-small); color:var(--paper-ink-2); padding:2px 2px 14px;
}
/* display:flex would otherwise beat the hidden attribute (it did on the phone page). */
.syncbar[hidden]{ display:none; }
.sync-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--faint); }
.sync-dot[data-s="saved"]{ background:var(--ink); }
.sync-dot[data-s="dirty"], .sync-dot[data-s="saving"], .sync-dot[data-s="unsaved"]{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-2); }
.sync-dot[data-s="conflict"], .sync-dot[data-s="error"], .sync-dot[data-s="capped"]{ background:#a8402c; }
.sync-acts{ display:inline-flex; gap:7px; flex-wrap:wrap; margin-left:auto; }
.syncbtn{
  font:inherit; font-size:var(--fs-label); color:var(--ink); text-decoration:none; cursor:pointer;
  background:var(--sheet-2); border:1px solid var(--edge); border-radius:var(--r-s); padding:7px 12px;
}
.syncbtn:hover{ border-color:var(--paper-faint); }
.syncbtn.primary{ background:var(--ink); color:var(--btn-fg); border-color:var(--ink); }
/* margin:auto is what centres a <dialog>; the site's reset takes it away. */
.sync-dialog{
  margin:auto; border:1px solid var(--edge); border-radius:var(--r); padding:0; width:min(520px, calc(100vw - 32px));
  background:var(--sheet); color:var(--ink); box-shadow:var(--lift);
}
.sync-dialog::backdrop{ background:rgba(34,31,27,.38); }
.sd-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--edge); font-size:var(--fs-ui); }
.sd-body{ padding:14px 18px 18px; }
.sd-list{ list-style:none; margin:0 0 12px; padding:0; }
.sd-list li{ display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--edge); }
.sd-list li > div{ flex:1; min-width:0; }
.sd-list b{ display:block; font-weight:500; font-size:var(--fs-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-list span{ display:block; font-size:var(--fs-label); color:var(--paper-faint); margin-top:2px; }
.sd-list li.cur b::after{ content:""; }
/* Open on a phone: the pairing code and the three links. */
.sync-phone{ width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); }
.sync-phone .sd-body{ overflow-y:auto; max-height:calc(100vh - 130px); }
.sd-sec{ padding:4px 0 16px; margin-bottom:14px; border-bottom:1px solid var(--edge); }
.sd-sec > b{ display:block; font-weight:500; font-size:var(--fs-small); margin-bottom:3px; }
.sd-sec .said{ margin:0 0 10px; }
.sd-link{ display:flex; gap:7px; }
.sd-link input{ flex:1; min-width:0; font-family:var(--mono); font-size:var(--fs-micro); color:var(--paper-ink-2); background:var(--card); border:1px solid var(--paper-edge); border-radius:var(--r-s); padding:8px 10px; }
.sd-linkacts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.sd-text{ background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:var(--fs-label); color:var(--paper-faint); text-decoration:underline; text-underline-offset:3px; }
.sd-text:hover{ color:var(--ink); }
.sd-qr{ display:block; width:190px; height:190px; margin:10px 0 2px; border-radius:var(--r-s); image-rendering:pixelated; }
@media (max-width:640px){ .sync-acts{ margin-left:0; width:100%; } }

/* The must star on a shot, and the fixed tick on a schedule row. */
table.cs-tab td.star{ width:44px; text-align:center; padding-top:3px; }
.starbtn{
  background:none; border:1px solid transparent; border-radius:var(--r-s); cursor:pointer; padding:5px; line-height:0; color:var(--faint);
}
.starbtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.starbtn:hover{ color:var(--ink); border-color:var(--edge); }
.starbtn[aria-pressed="true"]{ color:var(--ink); }
.starbtn[aria-pressed="true"] svg{ fill:currentColor; }
.fixchk{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:var(--fs-micro); color:var(--paper-faint); cursor:pointer; user-select:none; }
.fixchk input{ width:13px; height:13px; margin:0; accent-color:var(--ink); }

/* ---------- organisations ---------- */

.orgs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:16px; align-items:start; }
.org{ border:1px solid var(--edge); border-radius:var(--r-s); padding:13px; background:var(--card); }
.org-top{
  display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-faint);
}
.org-top .rowbtn{ margin-left:auto; }
.org .cell{ margin-bottom:9px; }

/* ---------- weather, branding, toggles ---------- */

.wx{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:4px 0 2px; }
.wx-ic{ width:40px; height:40px; color:var(--ink); flex:none; }
.wx-hours i{ display:block; height:20px; margin:3px 0 1px; color:var(--ink-2); }
.wx-hi{ width:18px; height:18px; }
.wx-t{ font-size:var(--fs-lead); font-weight:400; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wx-t span{ color:var(--faint); }
.wx-d{ font-size:var(--fs-small); color:var(--paper-ink-2); }
.wx-sun{ margin-left:auto; text-align:right; font-family:var(--mono); font-size:var(--fs-micro); color:var(--paper-faint); line-height:1.7; }
.wx-hours{ display:flex; gap:2px; overflow-x:auto; padding:10px 0 2px; }
.wx-hours > div{ flex:1 0 46px; text-align:center; }
.wx-hours em{ font-style:normal; font-family:var(--mono); font-size:10px; color:var(--paper-faint); display:block; }
.wx-hours b{ display:block; font-weight:400; font-size:var(--fs-small); font-variant-numeric:tabular-nums; margin-top:2px; }
.wx-hours u{ display:block; text-decoration:none; font-size:var(--fs-micro); color:#2b5f8a; font-variant-numeric:tabular-nums; }
.wx-note{ font-size:var(--fs-label); color:var(--paper-faint); margin:8px 0 0; }

.toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.toggles label{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--edge); border-radius:var(--pill); padding:7px 13px;
  font-size:var(--fs-small); background:var(--sheet-2); user-select:none;
}
.toggles input{ width:15px; height:15px; margin:0; accent-color:var(--ink); }
.toggles label:has(input:checked){ border-color:var(--ink); background:var(--card); }
.off{ display:none !important; }

.brand-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px 22px; align-items:start; }
.drop{
  display:block; border:1px dashed var(--paper-edge); border-radius:var(--r); padding:15px;
  text-align:center; font-size:var(--fs-label); color:var(--paper-faint); cursor:pointer;
  background:var(--card);
}
.drop:hover{ border-color:var(--paper-faint); }
.drop img{ max-height:44px; max-width:100%; display:block; margin:0 auto; }
.drop.bad{ border-color:#a8402c; color:#a8402c; }
.drop.over{ border-style:solid; border-color:var(--ink); background:var(--sheet-2); color:var(--ink); }
.swatches{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:9px; }
.swatch{ width:26px; height:26px; border-radius:var(--r-s); border:1px solid var(--paper-edge); cursor:pointer; padding:0; }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--ink); }
.hex{ font-family:var(--mono); font-size:var(--fs-label); width:88px; padding:6px 8px; border:1px solid var(--paper-edge); border-radius:var(--r-s); background:var(--card); }
.radio-row{ display:flex; gap:12px; }
.radio-row label{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-small); cursor:pointer; }

.said{ font-size:var(--fs-label); color:var(--paper-faint); margin:7px 0 0; }
.said b{ color:var(--paper-ink-2); font-weight:500; }
.cs-priv{ font-size:var(--fs-label); color:var(--paper-faint); margin:14px 0 0; }
.cs-priv button{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:inherit; text-decoration:underline;
}

@media (max-width:640px){
  .cs-body{ padding:4px 13px 18px; }
  /* Several buttons take their own row; one button stays beside the switch. */
  .viewbar-acts:has(> :nth-child(2)){ margin-left:0; width:100%; }
  /* On a phone the bar scrolls away with the page, and its buttons sit in one
     sideways row instead of stacking into a wall over the list (Luke's Oppo,
     27 Sept 2026). */
  .viewbar{ position:static; box-shadow:none; }
  /* Only a row of several loose buttons scrolls. A scrolling box clips what
     hangs out of it, and the Print menu hangs out of its button: with the
     scroll on every row it could not be opened on a phone (4 Oct 2026). */
  .viewbar-acts{ flex-wrap:nowrap; padding-bottom:2px; }
  .viewbar-acts:has(> :nth-child(2)):not(:has(.morebox)){ overflow-x:auto; scrollbar-width:none; }
  .viewbar-acts::-webkit-scrollbar{ display:none; }
  .viewbar-acts .btn{ white-space:nowrap; flex:none; }
}

/* ---------- the shot list editor (27 Sept 2026) ----------
   One line per shot, phone first: tick, size, what it is, star, dots, with
   location and notes quieter underneath. Replaces the eight-column table,
   which could not be used on a phone. */
.sl-list{ margin:4px 0 0; }
.sl-empty{ color:var(--faint); padding:18px 4px; margin:0; }
.sl-row{ display:flex; align-items:flex-start; gap:10px; padding:12px 2px; border-bottom:1px solid var(--paper-edge); }
.sl-row:last-child{ border-bottom:0; }
.sl-tick{ flex:none; position:relative; width:44px; height:44px; margin:-6px -6px -6px -8px; display:grid; place-items:center; cursor:pointer; }
.sl-tick input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.sl-tick span{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--ink-2); display:grid; place-items:center; transition:background .15s, border-color .15s; }
.sl-tick svg{ width:14px; height:14px; stroke:var(--white); fill:none; stroke-width:2.6; opacity:0; }
.sl-tick input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:3px; }
.is-done .sl-tick span{ background:var(--ink); border-color:var(--ink); }
.is-done .sl-tick svg{ opacity:1; }
.sl-main{ flex:1; min-width:0; }
.sl-line{ display:flex; align-items:flex-start; gap:8px; }
.sl-size{ flex:none; font:inherit; font-size:var(--fs-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  background:var(--sheet-2); border:0; border-radius:var(--r-s); padding:6px 8px; margin-top:3px; cursor:pointer; min-height:28px; }
.sl-size.is-empty{ color:var(--faint); background:transparent; box-shadow:inset 0 0 0 1px var(--paper-edge); }
#view-edit .sl-row [contenteditable]{ border:0; background:transparent; padding:3px 4px; border-radius:var(--r-s); min-height:1.4em; }
#view-edit .sl-row [contenteditable]:focus{ background:var(--card); box-shadow:inset 0 0 0 1px var(--paper-edge); }
.sl-what{ flex:1; min-width:0; font-size:var(--fs-ui); line-height:1.45; color:var(--ink); }
.is-done .sl-what{ color:var(--faint); text-decoration:line-through; text-decoration-color:rgba(34,31,27,.25); }
.sl-meta{ display:flex; flex-wrap:wrap; gap:0 6px; margin-top:2px; font-size:var(--fs-small); color:var(--ink-2); }
.sl-meta [contenteditable]{ min-width:5em; }
.sl-meta [contenteditable] + [contenteditable]::after{ content:none; }
.sl-row .starbtn{ flex:none; margin-top:-4px; }
.sl-dots{ flex:none; width:40px; height:40px; margin:-6px -4px 0 -6px; border:0; background:none; border-radius:var(--r-s); cursor:pointer; color:var(--faint); display:grid; place-items:center; }
.sl-dots svg{ width:20px; height:20px; fill:currentColor; }
.sl-dots:hover,.is-open .sl-dots{ color:var(--ink); background:var(--sheet-2); }
.sl-panel{ padding:4px 0 14px 46px; border-bottom:1px solid var(--paper-edge); }
.sl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }
.sl-chip{ font:inherit; font-size:var(--fs-small); border:1px solid var(--paper-edge); background:var(--card); border-radius:var(--pill); padding:0 13px; min-height:36px; cursor:pointer; color:var(--ink); }
.sl-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.sl-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.sl-acts button{ font:inherit; font-size:var(--fs-small); border:1px solid var(--paper-edge); background:var(--card); border-radius:var(--r-s); padding:0 12px; min-height:40px; cursor:pointer; color:var(--ink); }
.sl-add{ display:flex; gap:8px; margin:14px 0 0; }
.sl-add input{ flex:1; min-width:0; font:inherit; font-size:var(--fs-ui); border:1px solid var(--paper-edge); border-radius:var(--r-s); padding:0 14px; min-height:46px; background:var(--card); color:var(--ink); }
.sl-add input:focus{ outline:2px solid var(--ink); outline-offset:2px; }
.sl-add .btn{ min-height:46px; padding:0 20px; }
.sl-tip{ font-size:var(--fs-label); color:var(--faint); margin:8px 2px 0; }
.sl-order{ margin:0 0 14px; }
.sl-sort{ margin:0 0 14px 8px; vertical-align:top; }
@media (max-width:560px){
  .sl-panel{ padding-left:4px; }
  .sl-meta{ font-size:var(--fs-label); }
  /* The size sits above the words, so a long one never squeezes them. */
  .sl-line{ flex-direction:column; gap:2px; }
  .sl-size{ margin-top:0; }
  .sl-meta [contenteditable]{ min-width:0; }
}
/* drag to reorder, and location chips (27 Sept 2026) */
.sl-grip{ flex:none; width:22px; height:44px; margin:-6px -6px -6px -6px; padding:0; border:0; background:none; font:inherit; border-radius:var(--r-s); display:grid; place-items:center; color:var(--faint); cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.sl-grip:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; color:var(--ink); }
.sl-grip svg{ width:16px; height:16px; fill:currentColor; }
.sl-grip:hover{ color:var(--ink); }
.sl-row.is-dragging{ position:relative; z-index:6; background:var(--card); border-radius:var(--r-s); box-shadow:0 2px 6px rgba(34,31,27,.12),0 18px 40px rgba(34,31,27,.18); cursor:grabbing; }
.sl-row.is-dragging .sl-grip{ cursor:grabbing; color:var(--ink); }
.sl-row.is-shifting{ transition:transform .16s ease; }
.sl-locpick{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.sl-add-loc{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 0; }
.sl-loc-lab{ font-size:var(--fs-micro); font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-right:2px; }
.sl-chip-new{ border-style:dashed; color:var(--ink-2); }
.sl-newplace{ font:inherit; font-size:var(--fs-small); border:1px solid var(--ink); border-radius:var(--pill); padding:0 13px; min-height:36px; width:12em; max-width:100%; background:var(--card); color:var(--ink); }
.sl-newplace:focus{ outline:2px solid var(--ink); outline-offset:2px; }
select.sl-size{ -webkit-appearance:none; appearance:none; font:inherit; font-size:var(--fs-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); background:var(--sheet-2); border:0; border-radius:var(--r-s); padding:6px 22px 6px 8px; margin-top:3px; min-height:30px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 7px) 55%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
select.sl-size.is-empty{ color:var(--faint); background-color:transparent; box-shadow:inset 0 0 0 1px var(--paper-edge); }
select.sl-size:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.sl-add select.sl-size{ margin:0; min-height:46px; font-size:var(--fs-micro); }
.sl-line select.sl-size{ align-self:flex-start; }

/* ---------- the shot list on a phone (28 Sept 2026) ----------
   Luke: "not useable. the size selection is massive, the field to input notes is
   near to non." The size is a compact chip, location and notes are real boxes
   you can hit with a thumb, and the add row gives the words the full width. */
.syncbar .sync-line{flex:1 1 0;min-width:0}
@media (max-width:560px){
  /* Controls on the first line, the words full width underneath: the row used to
     give the shot 134px of a 360px phone. */
  .sl-row{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;column-gap:4px;row-gap:6px;padding:10px 0}
  .sl-main,.sl-line{display:contents}
  .sl-grip{grid-area:1/1;margin:0}
  .sl-tick{grid-area:1/2;margin:0}
  .sl-row select.sl-size{grid-area:1/3;justify-self:start;width:auto;max-width:132px;min-height:32px;margin:0;padding-top:4px;padding-bottom:4px}
  .sl-row .starbtn{grid-area:1/4;margin:0}
  .sl-dots{grid-area:1/5;margin:0}
  .sl-what{grid-column:1/-1;grid-row:2;font-size:var(--fs-ui);padding:0 4px}
  .sl-meta{grid-column:1/-1;grid-row:3;flex-direction:column;gap:6px;margin:0}
  .sl-locpick{grid-column:1/-1}
  #view-edit .sl-row .sl-meta [contenteditable]{display:block;width:100%;min-width:0;min-height:42px;padding:10px 12px;
    background:var(--sheet-2);border-radius:var(--r-s);font-size:var(--fs-ui)}
  .sl-add{flex-wrap:wrap}
  .sl-add input{order:-1;flex:1 1 100%}
  .sl-add select.sl-size{flex:1 1 auto;max-width:none;min-height:46px}
  .sl-tip{display:none}
  .seg button{padding-left:14px;padding-right:14px}
  /* The switch and the menu share a row while they fit; when they do not (the
     shot list's three tabs and "Print or export" at 390px), the menu takes the
     next row on the right instead of being squeezed into a row that clips it. */
  .viewbar{gap:8px;flex-wrap:wrap}
  .viewbar-acts{flex:0 0 auto;margin-left:auto}
  .viewbar-acts .morebox > summary.btn{padding-left:14px;padding-right:12px;white-space:nowrap}
  .syncbar{align-items:flex-start}
  .sync-dot{margin-top:7px}
}

/* The edit view makes the list; shots are ticked on the shoot day and on paper (28 Sept 2026). */
#view-edit .sl-tick{display:none}

/* The notice bar: a failed save, or a removal with Undo (29 Sept 2026, js/tool-notice.js). */
.tool-notice{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;
  width:fit-content;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;border-radius:var(--r);
  background:var(--ink,#221f1b);color:var(--white);font-size:var(--fs-small);line-height:1.35;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.tool-notice[hidden]{display:none!important}
.tool-notice.is-error{background:#a52a1f}
.tool-notice button{flex:none;border:0;border-radius:var(--r-s);padding:8px 14px;background:var(--white);color:var(--ink,#221f1b);font:inherit;font-weight:600;cursor:pointer}
.tool-notice button[hidden]{display:none}
@media print{.tool-notice{display:none!important}}

/* A schedule row's reference photo (29 Sept 2026): "Add photo" until there is one,
   then a small picture that opens large. Never an empty box. */
.addphoto{display:inline-flex;align-items:center;margin-top:6px;font-size:var(--fs-label);font-weight:600;color:var(--ink);border:1px solid var(--paper-edge);border-radius:var(--r-s);padding:5px 10px;cursor:pointer;background:var(--card)}
.rowphoto{display:inline-flex;align-items:flex-start;gap:4px;margin-top:6px}
.rowphoto img{width:72px;height:40px;object-fit:cover;border-radius:var(--r-s);cursor:zoom-in;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.photo-view{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.photo-view img{max-width:100%;max-height:100%;border-radius:var(--r-s)}
.photo-view button{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:var(--white);font-size:24px;cursor:pointer}
@media print{.addphoto,.rowphoto,.photo-view{display:none!important}}

/* The brief (5 Oct 2026): plain text, the whole shoot's. */
.cs-brief{ display:block; width:100%; box-sizing:border-box; min-height:96px; resize:vertical; font:inherit; font-size:var(--fs-small); line-height:1.45;
  padding:10px 12px; border:1px solid var(--paper-edge); border-radius:var(--r-s); background:var(--card); color:var(--ink); }
.cs-brief:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* Interview questions (7 Oct 2026): a star, the question, who it is for. */
.q-list{ display:flex; flex-direction:column; gap:8px; }
.q-row{ display:flex; align-items:flex-start; gap:8px; background:var(--card); border:1px solid var(--paper-edge); border-radius:var(--r-s); padding:8px 10px; }
.q-row.is-key{ border-left:3px solid var(--sheet-accent,#221f1b); }
.q-row.is-dragging{ position:relative; z-index:6; box-shadow:0 2px 6px rgba(34,31,27,.12),0 18px 40px rgba(34,31,27,.18); cursor:grabbing; }
.q-grip{ flex:none; width:22px; height:36px; padding:0; border:0; background:none; border-radius:var(--r-s); display:grid; place-items:center; color:var(--faint); cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.q-grip svg{ width:16px; height:16px; fill:currentColor; }
.q-grip:hover, .q-grip:focus-visible{ color:var(--ink); }
.q-grip:focus-visible, .q-star:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.q-star{ flex:none; width:36px; height:36px; padding:0; border:1px solid var(--edge); background:var(--sheet-2); border-radius:var(--r-s); display:grid; place-items:center; cursor:pointer; color:var(--paper-faint); }
.q-star svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.q-star[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--btn-fg,#fff); }
.q-star[aria-pressed="true"] svg{ fill:currentColor; }
.q-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.q-for{ display:flex; align-items:center; gap:8px; }
.q-for .k{ flex:none; font-size:var(--fs-micro); color:var(--paper-faint); }
.q-for [contenteditable]{ flex:1; min-width:0; }
.q-row .rowbtn{ flex:none; margin-top:6px; }
.q-empty{ font-size:var(--fs-small); color:var(--paper-ink-2); margin:4px 0 0; }
.q-empty[hidden]{ display:none; }

/* ---------- the free tools' toolbar (design review, 12 Oct 2026) ----------
   One Print on all three tools: the quiet button with a printer and "Print", the word the shoot
   bar uses. On a phone the Edit / Sheet switch fills the row and Print is the printer alone at its
   end, instead of dropping to a row of its own; every control in these bars is at least 44px. */
html .viewbar .tool-print{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:700}
.tool-print-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .viewbar{flex-wrap:nowrap;gap:8px}
  .viewbar .seg{flex:1 1 auto;min-width:0}
  .viewbar .seg button{flex:1 1 auto;min-height:44px;padding-left:8px;padding-right:8px}
  :is(#view-edit,#view-sheet,#view-board) .seg button{min-height:44px}
  .viewbar .viewbar-acts{flex:none;margin-left:0;width:auto}
  html .viewbar .tool-print,html .viewbar .cs-back{min-width:44px;min-height:44px;padding:0 12px;justify-content:center}
  html .viewbar summary.tool-print{padding:0 10px}
  .viewbar .morebox > summary.tool-print::after{margin-left:6px}
  .viewbar .tool-print-lab,.viewbar .cs-back-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html .viewbar .morebox-menu > *{min-height:44px}
  .desk-steps button{min-height:44px}
}