/* The shoot bar (3 Oct 2026, Luke picked direction B on the storyboard
   canvas): inside a saved shoot, one bar replaces the site menu, the Free
   tools row, the Edit / Sheet switch and the save line. Design system v2. */
html.has-sbar .nav,html.has-sbar .tool-switch{display:none}
html.has-sbar .syncbar.sync-quiet{display:none}
/* Inside the shoot bar the save line says what is wrong and offers the fix, nothing more: the bar
   already carries the status dot, Shoot day, Share and the way back (gap review G28). */
html.has-sbar .syncbar .sync-dot,html.has-sbar .syncbar .sync-proj,html.has-sbar .syncbar [data-sync-day],html.has-sbar .syncbar [data-sync="phone"]{display:none}
html.has-sbar .viewbar{display:none}
html.has-sbar.sheet-open .viewbar{display:flex}
html.has-sbar #v-board{display:none}
.sbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;background:var(--white);border-bottom:1px solid var(--line);font-family:var(--sans,system-ui,sans-serif);color:var(--ink)}
.sbar-logo{display:flex;flex:none}
/* the way back to the library, in words: the Desk or the Library (4 Oct 2026) */
/* .sbar-home, the way back, is drawn by the one header (css/v2-controls.css) */
.sbar-shoot{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:none;padding:6px 10px;border-radius:var(--r);font:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0;max-width:280px}
.sbar-shoot:hover,.sbar-shoot[aria-expanded="true"]{background:var(--calm-2)}
.sbar-shoot span{font-size:var(--fs-micro);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sbar-shoot b{display:flex;align-items:center;gap:4px;font-size:var(--fs-ui);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* the name in its own span, so a long one ends in an ellipsis before the caret (a flex box cannot) */
.sbar-shoot b .sbar-nm{min-width:0;font-size:inherit;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar-shoot svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sbar-tabs{display:flex;gap:2px;min-width:0}
.sbar-tabs a{height:40px;padding:0 14px;border-radius:var(--pill,99px);display:flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;color:var(--ink);font-size:var(--fs-ui);font-weight:600}
.sbar-tabs a:hover{background:var(--calm-2)}
/* Colour 13 (1 Oct 2026): the tab you are on wears its tool's soft tone with an ink edge;
   citrus is left to Share alone. */
.sbar-tabs a[aria-current="page"]{background:var(--soft-lilac);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sbar-tabs a[aria-current="page"][data-sbtab="callsheet"]{background:var(--tool-callsheet)}
.sbar-tabs a[aria-current="page"][data-sbtab="shots"]{background:var(--tool-shotlist)}
.sbar-tabs a[aria-current="page"][data-sbtab="moodboard"]{background:var(--tool-moodboard)}
.sbar-tabs a[aria-current="page"][data-sbtab="day"]{background:var(--tool-day)}
/* the project's own colour on its name */
.sbar-shoot[data-proj="terracotta"]{background:var(--proj-terracotta)}
.sbar-shoot[data-proj="ochre"]{background:var(--proj-ochre)}
.sbar-shoot[data-proj="sage"]{background:var(--proj-sage)}
.sbar-shoot[data-proj="slate"]{background:var(--proj-slate)}
.sbar-shoot[data-proj="plum"]{background:var(--proj-plum)}
.sbar-shoot[data-proj="stone"]{background:var(--proj-stone)}
.sbar-shoot[data-proj]:hover,.sbar-shoot[data-proj][aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--ink-a08,rgba(42,23,51,.08))}
/* the band under the bar: the tool's name on its tone; the page below stays white */
.sbar-band{display:flex;align-items:baseline;gap:12px;padding:14px 24px;font-family:var(--sans,system-ui,sans-serif);color:var(--ink);background:var(--soft-lilac)}
.sbar-band b{font-size:var(--fs-lead);font-weight:500;letter-spacing:-.01em}
.sbar-band[data-tool="callsheet"]{background:var(--tool-callsheet)}
.sbar-band[data-tool="shots"]{background:var(--tool-shotlist)}
/* Shots (3 Oct 2026): the List / Storyboard switch, beside the tool's name */
.sbar-band{align-items:center;flex-wrap:wrap}
.sbar-views{display:inline-flex;gap:2px;padding:4px;border-radius:var(--pill,99px);background:var(--white)}
.sbar-views button{height:36px;padding:0 16px;border:0;border-radius:var(--pill,99px);background:none;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.sbar-views button:hover{color:var(--ink);background:var(--calm-2)}
.sbar-views button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.sbar-views button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sbar-band-views{position:sticky;top:var(--sbar-h,68px);z-index:49;padding-top:10px;padding-bottom:10px}
@media (max-width:900px){.sbar-band-views{padding-top:8px;padding-bottom:8px}.sbar-band-views b{display:none}.sbar-views{flex:1}.sbar-views button{flex:1}}
@media print{.sbar-band-views{display:none}}
/* the switch takes over from the page's own Edit / Storyboard / Sheet row inside a shoot */
html.has-sbar .viewbar .seg{display:none}
.sbar-band[data-tool="moodboard"]{background:var(--tool-moodboard)}
.sbar-band[data-tool="day"]{background:var(--tool-day)}
@media print{.sbar-band{display:none}}
@media (max-width:900px){.sbar-band{padding:10px 14px}.sbar-band b{font-size:var(--fs-body)}}
.sbar-tabs svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sbar-status{margin-left:auto;font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:7px}
.sbar-status::before{content:"";width:8px;height:8px;border-radius:var(--pill);background:var(--ink)}
.sbar-status[data-s="dirty"]::before,.sbar-status[data-s="saving"]::before{background:var(--ink-3)}
.sbar-status[data-s="offline"]::before,.sbar-status[data-s="error"]::before,.sbar-status[data-s="conflict"]::before{background:var(--danger)}
/* .sbar-btn, .sbar-primary and .sbar-share-copy are drawn by the one button family (css/v2-controls.css) */
.sbar-btn{gap:6px}
.sbar-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sbar-me{position:relative;overflow:hidden;width:36px;height:36px;flex:none;border-radius:var(--pill);background:var(--calm-1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-small);color:var(--ink);text-decoration:none}
.sbar-me img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sbar a:focus-visible,.sbar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sbar-menu{position:absolute;z-index:1000;min-width:260px;max-width:340px;max-height:60vh;overflow:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--float,0 8px 48px rgba(0,0,0,.15));padding:6px;display:flex;flex-direction:column;font-family:var(--sans,system-ui,sans-serif)}
.sbar-menu a{display:flex;flex-direction:column;padding:9px 12px;border-radius:var(--r-s,10px);text-decoration:none;color:var(--ink)}
.sbar-menu a:hover{background:var(--calm-2)}
.sbar-menu a[aria-current="true"]{background:var(--calm-1)}
.sbar-menu a b{font-size:var(--fs-small);font-weight:600}
.sbar-menu a span{font-size:var(--fs-label);color:var(--ink-2)}
.sbar-menu .sbar-all{border-top:1px solid var(--line);border-radius:0;margin-top:4px;font-size:var(--fs-small)}
.sbar-menu p{margin:10px 12px;font-size:var(--fs-small);color:var(--ink-2)}
/* a phone: the name and Share on top, the tabs scroll underneath */
@media (max-width:900px){
  .sbar{flex-wrap:wrap;gap:8px}
  .sbar-shoot{flex:1;max-width:none}
  .sbar-tabs{order:9;flex-basis:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .sbar-tabs::-webkit-scrollbar{display:none}
  .sbar-status{display:none}
}
@media print{.sbar{display:none}}
html.has-sbar #view-edit,html.has-sbar #view-board,html.has-sbar #view-sheet{margin-top:24px}
html.has-sbar.sheet-open #view-sheet{margin-top:0}
/* Colour 13: under the shoot bar the band names the tool, so the storyboard does not say it twice */
html.has-sbar .sb-head h2{display:none}
/* Share (CMO board 23, 2 Oct 2026): Send for approval leads, then the day's links */
.sbar-share{position:absolute;z-index:1000;width:400px;max-width:calc(100vw - 16px);box-sizing:border-box;background:var(--white);border-radius:var(--r);box-shadow:var(--float);padding:18px;display:flex;flex-direction:column;gap:10px;font-family:var(--sans);color:var(--ink)}
.sbar-share *{box-sizing:border-box}
.sbar-share-go{display:flex;gap:14px;align-items:flex-start;width:100%;padding:14px;border:0;border-radius:var(--r-s);background:var(--ink);color:var(--on-ink);font:inherit;text-align:left;cursor:pointer}
.sbar-share-go i{width:40px;height:40px;flex:none;border-radius:var(--pill);background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center}
.sbar-share-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbar-share-go span{display:flex;flex-direction:column;gap:3px}
.sbar-share-go b{font-size:var(--fs-ui);font-weight:700}
.sbar-share-go small{font-size:var(--fs-label);line-height:1.45;color:var(--calm-1)}
.sbar-share-h{margin:6px 0 0;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sbar-share-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sbar-share-row span{display:flex;flex-direction:column;flex:1;min-width:0}
.sbar-share-row b{font-size:var(--fs-small);font-weight:700}
.sbar-share-row small{font-size:var(--fs-label);color:var(--ink-2)}
.sbar-share-copy{font-size:var(--fs-label)}
.sbar-share-more{border:0;border-top:1px solid var(--line);background:none;padding:12px 0 0;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sbar-share button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the client's answers (board 25): a change asked wears peach, all approved wears the success tone */
.sbar-answers{height:36px;padding:0 6px 0 12px;border-radius:var(--pill);display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;background:var(--soft-peach)}
.sbar-answers[hidden]{display:none}
.sbar-answers[data-s="approved"]{background:var(--success-soft);color:var(--success);padding-right:12px}
.sbar-answers span{height:26px;padding:0 8px;border-radius:var(--pill);background:var(--white);font-size:var(--fs-label);display:flex;align-items:center;color:var(--success)}
@media (max-width:900px){.sbar-answers{display:none}}
/* Client feedback on the board it is about (2 Oct 2026, js/approval-feed.js):
   a card in the corner, closed to one line; new feedback opens it. */
.afeed{position:fixed;left:16px;bottom:16px;z-index:60;width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);display:flex;flex-direction:column;box-sizing:border-box;background:var(--white);border-radius:var(--r,16px);box-shadow:var(--float,0 8px 48px rgba(0,0,0,.15));font-family:var(--sans,system-ui,sans-serif);color:var(--ink);overflow:hidden}
.afeed[hidden]{display:none}
.afeed-room{height:80px}   /* room under the page for the closed card: 16px + 47px + 16px */
.afeed-room[hidden]{display:none}
.afeed-none{margin:12px 16px;font-size:var(--fs-small);color:var(--ink-2)}
.afeed.is-new{box-shadow:var(--float,0 8px 48px rgba(0,0,0,.15)),0 0 0 2px var(--ink)}
.afeed-h{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:12px 16px;font:inherit;color:inherit;cursor:pointer;text-align:left;flex:none}
.afeed-h b{flex:1;font-size:var(--fs-small);font-weight:700}
.afeed-h:focus-visible,.afeed-send:focus-visible,.afeed textarea:focus{outline:2px solid var(--ink);outline-offset:2px}
.afeed-n{font-size:var(--fs-label);color:var(--ink-2)}
.afeed-pill{flex:none;font-size:var(--fs-micro);font-weight:700;border-radius:var(--pill,99px);padding:2px 9px;background:var(--calm-1)}
.afeed-pill.approved{background:var(--ink);color:var(--accent)}
.afeed-pill.changes{background:var(--danger-soft);color:var(--danger)}
.afeed-b{overflow:auto;padding:0 16px 14px;border-top:1px solid var(--line)}
.afeed-item{padding:12px 0;border-bottom:1px solid var(--line)}
.afeed-item:last-child{border-bottom:0;padding-bottom:0}
.afeed-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.afeed-kind{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--calm-2);border-radius:var(--r-s);padding:2px 7px}
.afeed-name{flex:1;min-width:0;font-size:var(--fs-small);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afeed-said{margin:6px 0 0;font-size:var(--fs-label);color:var(--ink-2)}
.afeed-warn{margin:6px 0 0;font-size:var(--fs-label);font-weight:600;color:var(--danger)}
.afeed-thread{display:flex;flex-direction:column;gap:6px;margin:8px 0 0}
.afeed-c{background:var(--tint);border-radius:var(--r-s,10px);padding:7px 10px;font-size:var(--fs-small);white-space:pre-wrap;overflow-wrap:anywhere}
.afeed-c.mine{background:var(--calm-1)}
.afeed-c.is-sending{opacity:.7}
.afeed-c.is-failed small{color:var(--danger)}
.afeed-c small{display:block;font-size:var(--fs-micro);color:var(--ink-2);white-space:normal}
.afeed-reply{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.afeed-reply textarea{flex:1;min-width:0;font:inherit;font-size:var(--fs-small);padding:8px 10px;border:1px solid var(--field-edge);border-radius:var(--r-s,10px);resize:vertical;color:var(--ink);background:var(--white)}
.afeed-send{flex:none;height:36px;padding:0 14px;border:0;border-radius:var(--r-s,10px);background:var(--ink);color:var(--accent);font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer}
@media print{.afeed{display:none}}
/* feedback card: close, and one block per client link (2 Oct 2026) */
.afeed-hw{display:flex;align-items:center}
.afeed-hw .afeed-h{flex:1;min-width:0}
.afeed-x{flex:none;width:36px;height:36px;margin-right:6px;border:0;border-radius:var(--pill);background:transparent;color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer}
.afeed-x:hover{background:var(--calm-2);color:var(--ink)}
.afeed-link{display:flex;align-items:center;gap:8px;padding:10px 0 4px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.afeed-link > span{flex:1}
.afeed-mini{height:30px;padding:0 12px;border:0;border-radius:var(--pill);background:var(--calm-2);color:var(--ink);font:inherit;font-size:var(--fs-label);font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}
/* A client's comment on one shot (2 Oct 2026): "Shot 03:" in the feed, a count on the storyboard card */
.afeed-tag{font-weight:700}
.afeed-badge{margin-left:auto;flex:none;min-width:24px;height:24px;padding:0 7px;border:0;border-radius:var(--pill,99px);background:var(--ink);color:var(--on-ink);font:700 var(--fs-micro)/24px var(--sans,system-ui,sans-serif);cursor:pointer;text-align:center}
.afeed-badge:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The project's colour in the moodboard's project menu: the library menu's swatches (6 Oct 2026). */
.sbar-menu .sbar-colour{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.sbar-menu .swatch-lab{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px 2px}
.sbar-menu .menu-swatches{display:flex;gap:8px;padding:6px 12px 10px}
.sbar-menu .sw{width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c)}
.sbar-menu .sw.paper{background:var(--calm-2);box-shadow:inset 0 0 0 1px var(--line)}
.sbar-menu .sw.on{outline:2px solid var(--ink);outline-offset:2px}
/* A phone (11 Oct 2026 design review): at 390 the bar wrapped Share and the avatar onto a second
   row and squeezed the shoot to 49px. Under 600px the way back, Print, Share and the assistant
   become 44px icon buttons (their words stay for screen readers), the shoot takes the room, and
   the tabs fade at the edge so a cut-off tab reads as "scroll". */
.sbar-ph{display:none}
.sbar-lab{display:contents}
@media (max-width:600px){
  .sbar{gap:8px}
  .sbar-tabs a{height:44px}
  .sbar-logo{position:relative}
  .sbar-logo::after{content:"";position:absolute;inset:-6px}
  .sbar-me{width:44px;height:44px;border-radius:var(--pill)}
  .sbar-ico .sbar-lab{display:block;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sbar-ico{width:44px;height:44px;padding:0;justify-content:center;flex:none}
  .sbar-ico .sbar-ph{display:block;width:18px;height:18px}
  .sbar-shoot{flex:1 1 0;min-width:0;padding:4px 10px}
  .sbar-tabs{flex-basis:calc(100% + 24px);margin:0 -12px;padding:0 24px 4px 12px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  /* Share opens as a sheet from the bottom, not anchored to a button it no longer fits beside. */
  .sbar-share{position:fixed;top:auto !important;right:0 !important;left:0;bottom:0;width:auto;max-width:none;max-height:85vh;overflow:auto;
    border-radius:var(--r) var(--r) 0 0;padding-bottom:max(18px,env(safe-area-inset-bottom));box-shadow:var(--float),0 0 0 100vmax var(--ink-a35)}
  .sbar-share-copy{height:44px}
}