/* Shoots in the redesign (Hallmark, Rami 2 November 2026: the approved mockup, review/hallmark/shoots-rethink.html; built
   3 November 2026). public/work.js drawShoots and feedView. The top, the toolbar, the list's rows and the folds take Production's
   (hl-production.css: pr-head, pr-bar, pr-list, pr-r, pr-fold); this file adds only what is the Shoots page's own, scoped to sl-*.
   Cadence tokens only, so light and dark follow by themselves; a phone of 400px with no sideways scroll; Arabic mirrors (logical
   properties). */

/* ---------- the toolbar: Upcoming ▾ (or a month, with × back to Upcoming) ---------- */
html body #wkPage .sl-per>summary:not(#_):not(#_):not(#_){height:40px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px}
html body #wkPage .sl-per.on>summary:not(#_):not(#_):not(#_){background:var(--c-ink);color:var(--surface);border-color:var(--c-ink)}
html body #wkPage .sl-perx:not(#_):not(#_){height:40px;min-height:40px;width:34px;padding:0;margin-inline-start:-6px}

/* ---------- From your calendar: a pale blue box that folds; a client's move or cancel in yellow ---------- */
html body #wkPage .sh-cal.sl-fc:not(#_):not(#_){display:block;padding:0;margin:0 0 18px;border-radius:var(--radius-lg,14px);background:var(--accent-sky-soft);overflow:hidden}
html body #wkPage .sl-fcd>summary:not(#_){display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;font-size:14px;color:var(--c-ink)}
html body #wkPage .sl-fcd>summary::-webkit-details-marker{display:none}
html body #wkPage .sl-fcd>summary .ni:not(#_){width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
html body #wkPage .sl-fcd>summary b:not(#_){font-weight:600;flex:none}
html body #wkPage .sl-fcn:not(#_){display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:color-mix(in srgb,var(--accent-sky) 22%,var(--surface));color:var(--accent-sky);font:600 12px/1 var(--font-sans);font-style:normal;flex:none}
html body #wkPage .sl-fcd>summary .sh-cal-sub:not(#_){font-size:13px;color:var(--ink-muted);min-width:0;flex:1 1 auto}
html body #wkPage .sl-fcc:not(#_){width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--dur-fast,.12s)}
html body #wkPage .sl-fcd:not([open]) .sl-fcc:not(#_){transform:rotate(180deg)}
html body #wkPage .sl-fc .sh-cal-it:not(#_):not(#_){padding:12px 16px;border-top:1px solid color-mix(in srgb,var(--accent-sky) 18%,transparent);gap:8px 16px}
html body #wkPage .sl-fc .sh-cal-it.al:not(#_):not(#_){background:color-mix(in srgb,var(--st-warn,#f5c84c) 26%,var(--surface))}
html body #wkPage .sl-fc .sh-cal-t b:not(#_){font-size:14.5px;font-weight:600;color:var(--c-ink)}
html body #wkPage .sl-fc .sh-cal-t small:not(#_){font-size:13px}
html body #wkPage .sl-fc .sh-cal-do .btn-s:not(#_):not(#_){height:36px;min-height:36px;padding:0 14px;font-weight:600}

/* ---------- the list's cells ---------- */
html body #wkPage .sl-list .wk-r1.sl-r:not(.head):not(.bk-add):not(#_):not(#_):not(#_){min-height:68px;cursor:pointer}
html body #wkPage .sl-list .wk-r1.sl-r.off:not(#_):not(#_):not(#_){opacity:.6}
/* Shoot: its name, then its kind and tags */
html body #wkPage .sl-shoot:not(#_):not(#_):not(#_){flex-direction:column;align-items:flex-start!important;justify-content:center;gap:4px!important}
html body #wkPage .sl-sn:not(#_){display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}
html body #wkPage .sl-sn>a:not(#_){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ink);text-decoration:none}
html body #wkPage .sl-sn b:not(#_){font-weight:600;font-size:14.5px}
html body #wkPage .sl-tags:not(#_){display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%}
html body #wkPage .sl-tags .wk-tag:not(#_):not(#_){height:20px;padding:0 7px;font-size:11.5px}
html body #wkPage .sl-kind:not(#_){display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font:600 11.5px/1 var(--font-sans);font-style:normal;white-space:nowrap;background:var(--accent-green-soft);color:var(--accent-green)}
html body #wkPage .sl-kind.k-video:not(#_){background:var(--accent-rose-soft);color:var(--accent-rose)}
html body #wkPage .sl-kind.k-both:not(#_){background:var(--accent-violet-soft);color:var(--accent-violet)}
/* Client: its initials, then the client (a borderless picker) */
html body #wkPage .sl-cav:not(#_){flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-sunken);color:var(--ink-muted);font:700 9.5px/1 var(--font-sans);font-style:normal}
html body #wkPage .sl-list .sl-cl select:not(#_):not(#_):not(#_):not(#_){font-weight:600;font-size:14px;color:var(--c-ink)!important;min-width:0;flex:1 1 auto;width:100%!important;max-width:none!important;height:30px!important;padding:0 4px!important;border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;cursor:pointer}
html body #wkPage .sl-list .sl-cl select:hover:not(:disabled):not(#_):not(#_):not(#_):not(#_){text-decoration:underline}
html body #wkPage .sl-list .sl-cl select.empty:not(#_):not(#_):not(#_):not(#_){color:var(--ink-muted)!important;font-weight:500}
/* Date: the day, its start time under it */
html body #wkPage .sl-date:not(#_):not(#_):not(#_){flex-direction:column;align-items:flex-start!important;justify-content:center;gap:2px!important}
html body #wkPage .sl-dp:not(#_):not(#_){height:auto;padding:0;background:transparent;font-size:13.5px}
html body #wkPage .sl-dp b:not(#_){font-weight:500;color:var(--c-ink)}
html body #wkPage .sl-dp.empty b:not(#_){color:var(--ink-muted)}
html body #wkPage .sl-dp:hover b:not(#_){text-decoration:underline}
/* the day's picker covers the day only (frame.css spreads a date box over its whole cell), so the start time under it can be pressed */
html body #wkPage .wk-r1 > span.sl-date > .dpick.sl-dp:not(#_):not(#_):not(#_){position:relative}
html body #wkPage .wk-r1 > span.sl-date:not(#_):not(#_){cursor:default}
/* the start time: its words (09:00, No start time in red, Add a time); the time box shows over them while it has the focus */
html body #wkPage .sl-tp:not(#_){position:relative;display:inline-flex;align-items:center;height:20px;cursor:pointer}
html body #wkPage .sl-tp small:not(#_){font-size:12.5px;color:var(--ink-subtle);white-space:nowrap}
html body #wkPage .sl-tp.sl-tp0 small:not(#_){color:var(--ink-muted)}
html body #wkPage .sl-tp.need small:not(#_){color:var(--status-stuck-fg);font-weight:600}
html body #wkPage .sl-tp:hover small:not(#_){text-decoration:underline}
html body #wkPage .sl-list .sl-tp input.sl-time:not(#_):not(#_):not(#_):not(#_){position:absolute;inset-block-start:-4px;inset-inline-start:-4px;height:28px!important;min-height:28px;width:110px!important;padding:0 4px!important;opacity:0;z-index:2;font-size:12.5px;background:var(--surface)!important}
html body #wkPage .sl-list .sl-tp:focus-within input.sl-time:not(#_):not(#_):not(#_):not(#_){opacity:1}
html body #wkPage .sl-dp b:not(#_):not(#_){border:0;padding:0;background:transparent}
/* Status: the filled block with ▾ */
html body #wkPage .sl-list .sl-stc select.sl-stsel:not(#_):not(#_):not(#_){width:100%!important;max-width:100%;height:38px!important;border-radius:var(--radius-md)!important;font-weight:600}
/* Next: the pale block with →, and who and when under it */
html body #wkPage .sl-next:not(#_):not(#_):not(#_){flex-direction:column;align-items:flex-start!important;justify-content:center;gap:4px!important}
html body #wkPage .sl-go:not(#_):not(#_):not(#_){height:30px;padding:0 12px;border-radius:var(--radius-md);border:1px solid currentColor;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html body #wkPage .sl-nw:not(#_){font-size:12.5px;color:var(--ink-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html body #wkPage .sl-nw.late:not(#_){color:var(--status-stuck-fg);font-weight:600}
html body #wkPage .sl-none:not(#_){font-size:12.5px;color:var(--ink-subtle)}
/* Checklist: a round tick per line, its short name under it */
html body #wkPage .sl-ck:not(#_):not(#_):not(#_){gap:10px!important}
html body #wkPage .sl-tk:not(#_){position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
html body #wkPage .sl-tk input:not(#_):not(#_):not(#_){position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
html body #wkPage .sl-tk i:not(#_){display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--border-strong);color:transparent;font:700 11px/1 var(--font-sans);font-style:normal}
html body #wkPage .sl-tk.on i:not(#_){background:var(--accent-green);border-color:var(--accent-green);color:var(--surface)}
html body #wkPage .sl-tk small:not(#_){font-size:11px;color:var(--ink-subtle);line-height:1}
html body #wkPage .sl-tk:has(input:focus-visible) i{outline:2px solid var(--focus);outline-offset:2px}
html body #wkPage .sl-tk:has(input:disabled):not(#_){opacity:.5;cursor:default}

/* ---------- the calendar's top: ‹ month ▾ › and the colours ---------- */
html body #wkPage .sl-calh:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 12px}
html body #wkPage .sl-key:not(#_){display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--c-ink)}
html body #wkPage .sl-key>span:not(#_){display:inline-flex;align-items:center;gap:6px}
html body #wkPage .sl-key i:not(#_){width:9px;height:9px;border-radius:50%;background:var(--ink-subtle)}
html body #wkPage .sl-key i.t-blue:not(#_){background:var(--s-blue)}html body #wkPage .sl-key i.t-orange:not(#_){background:var(--s-orange)}html body #wkPage .sl-key i.t-purple:not(#_){background:var(--s-purple)}html body #wkPage .sl-key i.t-red:not(#_){background:var(--s-red)}html body #wkPage .sl-key i.t-green:not(#_){background:var(--s-green)}

/* ---------- the Shoot feed ---------- */
html body #wkPage .sl-ff:not(#_):not(#_){margin:0 0 8px}
html body #wkPage .sf-e.sl-fe:not(#_):not(#_){display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;max-width:760px;padding:18px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none}
html body #wkPage .sl-fav:not(#_){display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-sky-soft);color:var(--accent-sky);font:700 12px/1 var(--font-sans);font-style:normal}
html body #wkPage .sl-fx:not(#_){display:flex;flex-direction:column;gap:8px;min-width:0}
html body #wkPage .sl-fw:not(#_){font-size:12.5px;color:var(--ink-subtle)}
html body #wkPage .sl-fw a:not(#_){color:inherit}
html body #wkPage .sl-fx>header:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
html body #wkPage .sl-fx>header b:not(#_){font-size:15px;font-weight:600;color:var(--c-ink)}
html body #wkPage .sl-fx .sf-t:not(#_){margin:0;font-size:14px;color:var(--c-ink)}
html body #wkPage .sl-fx .sf-links:not(#_){display:flex;gap:8px;flex-wrap:wrap}
html body #wkPage .sl-flk:not(#_):not(#_):not(#_){height:34px;padding:0 14px;border-radius:var(--radius-md);border:1px solid currentColor;font-weight:600}
html body #wkPage .sl-fx .sf-r:not(#_):not(#_){display:flex;gap:8px;margin:0}
html body #wkPage .sl-fx .sf-r input:not(#_):not(#_){flex:1 1 auto;min-width:0;height:36px}
html body #wkPage .sl-fx .sf-r .btn-s:not(#_):not(#_){height:36px;min-height:36px;font-weight:600}

/* ---------- a phone: a card per shoot ---------- */
html body #wkPage .sl-plist:not(#_){display:flex;flex-direction:column}
html body #wkPage .sl-pc:not(#_){display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:1px solid var(--border);min-width:0}
html body #wkPage .sl-pc.off:not(#_){opacity:.6}
html body #wkPage .sl-pt:not(#_){font-size:15px;font-weight:600;color:var(--c-ink);text-decoration:none;overflow-wrap:anywhere}
html body #wkPage .sl-pm:not(#_){display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13px;color:var(--ink-muted)}
html body #wkPage .sl-pn:not(#_){font-size:13px;color:var(--ink-muted)}
html body #wkPage .sl-pn.late:not(#_){color:var(--status-stuck-fg);font-weight:600}
html body #wkPage .sl-pa:not(#_){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:4px}
html body #wkPage .sl-pa select.sl-stsel:not(#_):not(#_):not(#_){width:100%!important;max-width:100%;height:42px!important;border-radius:var(--radius-md)!important;font-weight:600}
html body #wkPage .sl-pa .bk-chip:not(#_):not(#_){height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}
html body #wkPage .sl-pgo:not(#_):not(#_):not(#_){display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 12px;border-radius:var(--radius-md);border:1.5px solid currentColor;font:600 13px/1.2 var(--font-sans);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:760px){
  html body #wkPage .sl-bar .pr-bl:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
  html body #wkPage .sl-bar .pr-bl>.bk-tabs:not(#_):not(#_){grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  html body #wkPage .sl-bar .pr-vsep:not(#_){display:none}
  html body #wkPage .sl-bar .pr-findw:not(#_){grid-column:1/-1}
  html body #wkPage .sl-bar .pr-find:not(#_):not(#_):not(#_){width:100%}
  html body #wkPage .sl-bar :is(.bk-pk,.sl-per):not(#_):not(#_){min-width:0;width:100%}
  /* the phone's own header says Shoots, and Quick find and + are its floating bar (app.js), as on Production: the page's ⋯ sits beside
     the List · Calendar · Shoot feed tabs */
  html body #wkPage .sl-head:not(#_):not(#_):not(#_){margin:0;min-height:0}
  html body #wkPage .sl-bar .pr-bl>.bk-tabs:not(#_):not(#_):not(#_){margin-inline-end:52px}
  html body.fl-on #wkPage .sl-bar .pr-findw:not(#_){display:none}
  html body #wkPage .sl-bar .bk-pkd:not(#_):not(#_){width:100%}
  html body #wkPage .sl-bar :is(.bk-pkb,.sl-per>summary):not(#_):not(#_):not(#_){width:100%;justify-content:space-between;overflow:hidden}
  html body #wkPage .sl-bar .pr-br:not(#_){display:none}
  html body #wkPage .sl-fcd>summary:not(#_){flex-wrap:wrap}
  html body #wkPage .sl-fc .sh-cal-do:not(#_){display:grid;grid-template-columns:1fr 1fr;width:100%}
  html body #wkPage .sf-e.sl-fe:not(#_):not(#_){grid-template-columns:30px minmax(0,1fr);gap:10px}
  html body #wkPage .sl-fav:not(#_){width:30px;height:30px;font-size:11px}
  html body #wkPage .sl-head .pr-new:not(#_):not(#_):not(#_){padding:0 14px}
}

/* ---------- Bookings a shoot may need (Rami, 3 November 2026; public/work.js bookCard, lib/shootbookings.js): Makeup & hair,
   Studio, Talent, Other. Each a quiet block edited in place; its status a pill (Needed red, Asked orange, Confirmed green,
   Cancelled grey); "Bookings 1 of 3 confirmed" beside the shoot's day and on the Shoots list. ---------- */
html body #wkPage .sd-bk:not(#_):not(#_){display:grid;gap:12px;margin-top:16px}
html body #wkPage .sd-bk .sb-none:not(#_){margin:0}
html body #wkPage .sb-l:not(#_){list-style:none;margin:0;padding:0;display:grid;gap:10px}
html body #wkPage .sb-b:not(#_){padding:12px 14px;border-radius:var(--radius-lg,14px);background:var(--surface-sunken);display:grid;gap:10px;min-width:0}
html body #wkPage .sb-b.s-cancelled:not(#_){opacity:.62}
html body #wkPage .sb-bh:not(#_){display:flex;align-items:center;gap:8px;min-width:0}
html body #wkPage .sb-bh>b:not(#_){font-size:15px;font-weight:600;color:var(--c-ink);flex:1 1 auto;min-width:0}
html body #wkPage .sb-bh .sb-what:not(#_):not(#_){flex:1 1 auto;min-width:0;font-weight:600;font-size:15px;height:34px}
html body #wkPage select.sb-st:not(#_):not(#_):not(#_):not(#_){width:auto!important;max-width:160px!important;background-position:right 10px center!important;flex:none!important;height:30px!important;min-height:30px!important;padding:0 26px 0 12px!important;border-radius:999px!important;border:0!important;font:600 13px/1 var(--font-sans)!important;background-color:var(--accent-rose-soft)!important;color:var(--accent-rose)!important}
html body #wkPage select.sb-st.s-asked:not(#_):not(#_):not(#_):not(#_){background-color:var(--accent-orange-soft)!important;color:var(--accent-orange)!important}
html body #wkPage select.sb-st.s-confirmed:not(#_):not(#_):not(#_):not(#_){background-color:var(--accent-green-soft)!important;color:var(--accent-green)!important}
html body #wkPage select.sb-st.s-cancelled:not(#_):not(#_):not(#_):not(#_){background-color:var(--surface)!important;color:var(--ink-muted)!important}
html body #wkPage .sb-x:not(#_):not(#_){flex:none;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink-muted);font-size:18px;line-height:1;cursor:pointer}
html body #wkPage .sb-x:hover:not(#_):not(#_){background:var(--surface-hover);color:var(--c-ink)}
html body #wkPage .sb-g:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 12px;min-width:0}
html body #wkPage .sb-f:not(#_){display:grid;gap:4px;min-width:0;font-size:12px;color:var(--ink-muted)}
html body #wkPage .sb-f.wide:not(#_),html body #wkPage .sb-f.sb-phone:not(#_){grid-column:span 2}
html body #wkPage .sb-f .find:not(#_):not(#_){width:100%;min-width:0;box-sizing:border-box;height:36px;font-size:14px;background:var(--surface)}
html body #wkPage .sb-ph:not(#_){display:flex;gap:6px;min-width:0}
html body #wkPage .sb-ph .find:not(#_):not(#_){flex:1 1 auto}
html body #wkPage .sb-ph .btn-s:not(#_):not(#_){flex:none;height:36px;min-height:36px;display:inline-flex;align-items:center}
html body #wkPage .sb-held:not(#_){color:var(--ink-muted);font-size:12.5px}
html body #wkPage .sb-addm>summary:not(#_):not(#_){font-weight:600}
html body #wkPage .sb-cnt:not(#_){display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:var(--accent-orange-soft);color:var(--accent-orange);font:600 12px/1 var(--font-sans);white-space:nowrap}
html body #wkPage .sb-cnt.ok:not(#_){background:var(--accent-green-soft);color:var(--accent-green)}
html body #wkPage .sb-cnt>i:not(#_){width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
html body #wkPage .sb-warn:not(#_):not(#_){display:flex;flex-wrap:wrap;gap:4px 12px;background:var(--accent-orange-soft);color:var(--c-ink)}
html body #wkPage .sd-pst .sb-cnt:not(#_){margin-inline-start:auto}
html body #wkPage .os-bk:not(#_){display:grid;gap:6px}
html body #wkPage .os-bkh:not(#_){color:var(--ink-muted);font-weight:600}
@media (max-width:640px){
  html body #wkPage .sb-g:not(#_):not(#_){grid-template-columns:1fr 1fr}
  html body #wkPage .sb-f.wide:not(#_):not(#_),html body #wkPage .sb-f.sb-phone:not(#_):not(#_),html body #wkPage .sb-f.sb-who:not(#_):not(#_),html body #wkPage .sb-f.sb-handler:not(#_):not(#_){grid-column:1/-1}
}