/* Floor > Schedule (10/20, owner: "completely re design the schedule tab with
   our new design style ... remove all of the ai slop text over explaining").
   The base for every Schedule view: floor/labor/builder.tsx (the week),
   builder-grid.tsx (the grid, the counters, the shift picker), the Calendar
   and Posted views and Team and rules. Their own parts: schedule-actions.css
   (More, Schedule it, review, send), schedule-calendar.css (Calendar,
   Posted), schedule-rules.css (Team and rules, time off).

   What this file adds:
     .yw-schedule          the view root: cards in one column, 16px apart
     .yw-sch-head          the head card: the views as its title, the week
                           and More on the right, one line under
     .yw-sch-tabs          Schedule / Calendar / Posted / Team and rules
     .yw-sch-seg           This week / Next week / Week after
     .yw-sch-btn           the quiet button (data-primary: the one violet)
     .yw-sch-counters      front desk hours, GM hours, labor share
     .yw-sch-grid          people down the side, days across, shift blocks
     .yw-sch-toast         the saved / undo pill
     .yw-dialog            the shared popup (ui/dialog.tsx), translucent */

.yw-schedule { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
/* 10/20: the views card sits above every Schedule view; the same 16px
   as between the cards (owner: "the spacing is wrong ... its crooked"). */
.yw-schedule { margin-top: 16px; }

/* ---------------------------------------------------------------- head -- */
.yw-sch-head { display: flex; flex-direction: column; gap: 12px; }
.yw-sch-week-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.yw-sch-week-sub > [data-tone="ok"] { color: #279876; }
.yw-sch-head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
/* The views and the week picker: one control size, the Dashboard header's
   (13px, 34px). Titles stay 19px on the cards only. */
.yw-sch-tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.yw-sch-tabs > a { position: relative; padding-bottom: 6px; color: #8a8491; font-size: 19px; font-weight: 500; letter-spacing: -.35px; text-decoration: none; white-space: nowrap; transition: color .16s; }
.yw-sch-tabs > a:hover { color: #59535f; }
.yw-sch-tabs > a[aria-current] { color: #202024; }
.yw-sch-tabs > a[aria-current]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: #202024; content: ""; }
.yw-sch-tabs > a:focus-visible { border-radius: 4px; outline: 2px solid #b993ff; outline-offset: 3px; }
.yw-sch-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-sch-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; color: #77717d; font-size: 13px; }
.yw-sch-sub > [data-tone="ok"] { color: #279876; }
.yw-sch-sub > [data-tone="warn"] { color: #b7791f; }

/* The week picker: the Dashboard's quiet segmented control, at the size of
   the buttons beside it. */
.yw-sch-seg { display: inline-flex; max-width: 100%; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: #eeeded; }
.yw-sch-seg > a { display: inline-flex; min-height: 32px; align-items: center; padding: 0 14px; border-radius: 9px; color: #6f6975; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .16s, color .16s; }
.yw-sch-seg > a:hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-sch-seg > a[aria-current] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-sch-seg > a:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-sch-past { color: #929097; font-size: 12px; }

/* ------------------------------------------------------------- buttons -- */
/* One quiet button for every Schedule action; data-primary is the one violet
   action of a card (Schedule it, Save). Danger is a rose text action. */
.yw-sch-btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; padding: 0 15px; border: 1px solid #e2e1e4; border-radius: 12px; background: #fff; color: #202024; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.yw-sch-btn:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-sch-btn:disabled, .yw-sch-btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.yw-sch-btn:is([data-primary], .yw-sch-primary) { border-color: transparent; background: #7c3aed; color: #fff; }
.yw-sch-btn:is([data-primary], .yw-sch-primary):hover { background: #6d28d9; }
.yw-sch-btn[data-size="big"] { min-height: 48px; padding: 0 26px; border-radius: 14px; font-size: 15px; }
.yw-sch-btn[data-size="small"] { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.yw-sch-btn:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-sch-danger { padding: 0; border: 0; background: none; color: #c85f84; font: inherit; font-size: 13px; cursor: pointer; }
.yw-sch-danger:hover { text-decoration: underline; }
.yw-sch-link { padding: 0; border: 0; background: none; color: #8553c2; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.yw-sch-link:hover { text-decoration: underline; }

/* A form field: label over the control. */
.yw-sch-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #77717d; font-size: 12px; }
.yw-sch-input { width: 100%; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid #e2e1e4; border-radius: 11px; background: #fff; color: #202024; font: inherit; font-size: 13.5px; }
select.yw-sch-input { padding-right: 32px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8595' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 13px; cursor: pointer; }
.yw-sch-input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }

/* A label over a control, a table head, a status word (labor/ui.tsx). */
.yw-sch-label { display: block; color: #77717d; font-size: 12px; }
.yw-sch-th { padding-bottom: 8px; padding-right: 8px; color: #929097; font-size: 12px; font-weight: 400; text-align: left; }
.yw-sch-word { color: #929097; font-size: 12px; }
.yw-sch-word[data-tone="ok"] { color: #279876; }
.yw-sch-word[data-tone="warn"], .yw-sch-word[data-tone="bad"] { color: #c85f84; }
[data-theme-root].dark :is(.yw-sch-label, .yw-sch-th, .yw-sch-word) { color: #a297ab; }
[data-theme-root].dark .yw-sch-word[data-tone="ok"] { color: #3fbf93; }
[data-theme-root].dark .yw-sch-word:is([data-tone="warn"], [data-tone="bad"]) { color: #e58aab; }

/* One line the last action left (posted, copied, time off saved). */
.yw-sch-note { margin: 0; color: #59535f; font-size: 13px; }
.yw-sch-note[data-tone="ok"] { color: #279876; }
.yw-sch-note[data-tone="warn"] { color: #c85f84; }

/* ------------------------------------------------------------ the week -- */
.yw-sch-week { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.yw-sch-week-head { flex-wrap: wrap; gap: 10px 16px; }
.yw-sch-week-head .yw-card-title { margin: 0; }
/* The news under the Schedule card's head (10/20): full width. */
.yw-sch-week-head > :is(.yw-sch-owner, .yw-sch-notices) { flex-basis: 100%; }
.yw-sch-week-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* The counters: the Dashboard's stat columns. Values in ink; only the word
   under them carries colour (green when covered). Sticky while the grid
   scrolls under it. */
/* Coverage (10/20): three Floor Overview cards in its three-column grid. */
.yw-sch-cover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.yw-sch-hero-of { margin-left: 4px; color: #929097; font-size: 15px; font-weight: 400; letter-spacing: -.2px; }
/* The Coverage cards (10/20, owner: "some elements are overlapping eachoter"):
   floor.css pulls .yw-floor-hero-label 12px into the value and sets the pill
   on the track. Here: the label, 6px, the value; the pill; 14px; the track;
   14px; the rows. As the Tasks and Inbox heroes space theirs. */
.yw-sch-cover-grid .yw-floor-hero-label { margin: 18px 0 0; }
.yw-sch-cover-grid .yw-floor-hero .yw-hero-value { margin: 4px 0 10px; line-height: 1.05; }
.yw-sch-cover-grid .yw-hero-status { margin: 0; }
.yw-sch-cover-grid .yw-track { margin-top: 14px; }
.yw-sch-cover-grid .yw-floor-hero .yw-row-stats { margin-top: 14px; }
/* The GM at the desk card wears the Wizard identity (10/20): the desert
   (public/dashboard-landscapes/desert-day.webp, the night twin in dark)
   on the card's right, faded in from the left and out toward the rows, so
   the value, the pill and the track read on a clean ground. */
.yw-sch-desk { position: relative; overflow: hidden; isolation: isolate; }
.yw-sch-desk-art { position: absolute; inset: 0 0 32% 30%; z-index: -1; background: url("/dashboard-landscapes/desert-day.webp") 70% 78% / cover no-repeat; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; pointer-events: none; }
[data-theme-root].dark .yw-sch-desk-art { background-image: url("/dashboard-landscapes/desert-night.webp"); opacity: .75; }
@media (prefers-reduced-transparency: reduce) { .yw-sch-desk-art { opacity: .5; } }
[data-theme-root].dark .yw-sch-hero-of { color: #a297ab; }
.yw-sch-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.yw-sch-counter { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 0 20px; border-left: 1px solid #eae8ec; }
.yw-sch-counter:first-child { padding-left: 0; border-left: 0; }
.yw-sch-counter-label { overflow: hidden; color: #77717d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.yw-sch-counter-value { color: #202024; font-size: 27px; font-weight: 500; letter-spacing: -.6px; line-height: 1.15; }
.yw-sch-counter-value > small { margin-left: 4px; color: #929097; font-size: 14px; font-weight: 400; letter-spacing: -.2px; }
.yw-sch-counter-word { color: #929097; font-size: 12.5px; }
.yw-sch-counter-word[data-tone="good"] { color: #279876; }
.yw-sch-counter-word[data-tone="warn"] { color: #b7791f; }
.yw-sch-track { position: relative; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 6px; background: #efedf1; }
.yw-sch-track > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #9b51f4, #7c38de); transition: width .3s cubic-bezier(.16, 1, .3, 1); }
.yw-sch-track[data-over] > i { background: #d39b32; }
@media (max-width: 760px) { .yw-sch-counter { padding: 6px 0; border-left: 0; } }

/* The held shift: what a tap picked up, and what can be done with it. */
.yw-sch-held { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid #dccbf6; border-radius: 16px; background: rgba(246, 242, 252, .94); color: #202024; font-size: 13.5px; box-shadow: 0 10px 30px rgba(48, 32, 64, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.yw-sch-held > strong { font-weight: 500; }
.yw-sch-held > span { color: #77717d; }
.yw-sch-held > .yw-sch-held-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }

/* The grid: no box around it; the card is the frame. */
.yw-sch-scroll { margin: 0 -23px; padding: 0 23px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
/* Fixed layout: the person column, seven equal days, Week and Pay always
   fit the card; under 52rem the card scrolls sideways instead of cropping. */
.yw-sch-grid { width: 100%; min-width: 52rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.yw-sch-grid thead th.yw-sch-person { width: 190px; }
.yw-sch-grid thead th.yw-sch-total:nth-last-child(2) { width: 64px; }
.yw-sch-grid thead th.yw-sch-total:last-child { width: 68px; }
.yw-sch-grid :is(th, td) { padding: 4px; border-bottom: 1px solid #f0eef2; vertical-align: middle; }
.yw-sch-grid thead th { padding: 10px 4px 8px; border-bottom: 0; color: #929097; font-size: 13px; font-weight: 400; vertical-align: bottom; }
/* What each day needs: one tinted band under the dates, its name on the
   left, the rows' names in the first column, the numbers in ink, green once
   the grid covers them. The people start under it. */
.yw-sch-grid tr.yw-sch-band > th { position: sticky; left: 0; z-index: 2; padding: 10px 10px 4px; border-bottom: 0; border-radius: 12px 0 0 0; background: #f4f3f6; color: #59535f; font-size: 13px; font-weight: 500; text-align: left; }
.yw-sch-grid tr.yw-sch-need > th { padding: 3px 10px; border-bottom: 0; background: #f4f3f6; color: #77717d; font-size: 13px; font-weight: 400; }
.yw-sch-grid tr.yw-sch-need > td { padding: 3px 4px; border-bottom: 0; background: #f4f3f6; color: #202024; font-size: 13px; text-align: center; white-space: nowrap; }
.yw-sch-grid tr.yw-sch-need:last-of-type > :is(th, td) { padding-bottom: 10px; }
.yw-sch-grid tr.yw-sch-need:last-of-type > th { border-radius: 0 0 0 12px; }
.yw-sch-grid tr.yw-sch-need:last-of-type > td:last-child { border-radius: 0 0 12px 0; }
.yw-sch-grid thead tr:last-child > :is(th, td) { border-bottom: 0; }
.yw-sch-grid thead tr.yw-sch-band ~ tr > th.yw-sch-person { background: #f4f3f6; }
.yw-sch-grid tr.yw-sch-need > td [data-met] { color: #279876; }
.yw-sch-grid tr.yw-sch-need > td [data-tone="bad"] { color: #c85f84; }
.yw-sch-grid tr.yw-sch-need > td [data-tone="warn"] { color: #b7791f; }
.yw-sch-grid thead th:first-child { text-align: left; }
.yw-sch-grid th.yw-sch-person { position: sticky; left: 0; z-index: 2; padding-left: 0; background: #fbfbfb; text-align: left; }
.yw-sch-day { text-align: center; }
.yw-sch-day-dow { display: block; color: #929097; font-size: 12.5px; }
.yw-sch-day-date { display: block; margin-top: 1px; color: #202024; font-size: 14px; font-weight: 500; }
.yw-sch-day[data-today] .yw-sch-day-date { color: #7c3aed; }
.yw-sch-grid thead th.yw-sch-total { text-align: right; }
/* A department: sentence case, quiet, no band of colour. */
.yw-sch-grid tr.yw-sch-group > th { position: sticky; left: 0; padding: 18px 0 6px; border-bottom: 0; color: #59535f; font-size: 13px; font-weight: 500; text-align: left; }
.yw-sch-grid tr.yw-sch-group > th > span { margin-left: 8px; color: #a7a2ad; font-weight: 400; }
.yw-sch-grid tbody tr:first-child.yw-sch-group > th { padding-top: 8px; }
.yw-sch-name { display: block; overflow: hidden; color: #202024; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-sch-name-sub { display: block; color: #929097; font-size: 12px; font-weight: 400; }
tr[data-overtime] .yw-sch-name { color: #c85f84; }
/* Staff Academy (10/20): not cleared to work. A warning, never a block. */
.yw-sch-notcleared { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: #fdf1e3; color: #a2581a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.yw-sch-clear-warn { margin: 8px 0 0; color: #a2581a; font-size: 13px; }
[data-theme-root].dark .yw-sch-notcleared { background: #3a2715; color: #f2b77c; }
[data-theme-root].dark .yw-sch-clear-warn { color: #f2b77c; }
.yw-sch-total { width: 64px; text-align: right; white-space: nowrap; }
.yw-sch-total > b { color: #202024; font-weight: 500; }
.yw-sch-total > span { display: block; color: #929097; font-size: 12px; }
.yw-sch-total > span[data-tone="bad"] { color: #c85f84; }
.yw-sch-total > span[data-tone="accent"] { color: #8553c2; }

/* A cell: the + to add, the shift block, or the day off. */
.yw-sch-cell { min-width: 0; }
.yw-sch-cell[data-over] { background: #f6f2fc; }
.yw-sch-add { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 4px; border: 1px dashed transparent; border-radius: 11px; background: transparent; color: #cfcbd4; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.yw-sch-add:hover, .yw-sch-add:focus-visible { border-color: #d5c4e6; background: #faf7fd; color: #7c3aed; outline: none; }
.yw-sch-add[data-target] { border-color: #b993ff; color: #7c3aed; }
.yw-sch-add > small { color: #8553c2; font-size: 11px; }
.yw-sch-off { display: flex; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; border-radius: 11px; background: repeating-linear-gradient(125deg, #f4f3f6 0 2px, transparent 2px 7px); color: #a7a2ad; font-size: 12px; text-align: center; cursor: not-allowed; }
.yw-sch-ro { display: flex; min-height: 44px; align-items: center; justify-content: center; color: #a7a2ad; font-size: 12px; }
.yw-sch-block-wrap { position: relative; display: block; }
.yw-sch-block { display: flex; width: 100%; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px; border: 1px solid #e5d9f8; border-radius: 11px; background: #f3edfd; color: #3b2a5c; font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; cursor: grab; user-select: none; transition: background .14s, border-color .14s, box-shadow .14s; }
.yw-sch-block:hover { border-color: #c8b0ef; }
.yw-sch-block:active { cursor: grabbing; }
.yw-sch-block:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-sch-block[aria-pressed="true"] { border-color: #7c3aed; background: #7c3aed; color: #fff; box-shadow: 0 6px 16px rgba(124, 58, 237, .25); }
.yw-sch-block[data-draft] { border-style: dashed; background: #faf7fe; }
.yw-sch-block[data-readonly] { cursor: default; }
.yw-sch-block > small { font-size: 10.5px; font-weight: 400; opacity: .75; }
.yw-sch-handle { position: absolute; top: 4px; bottom: 4px; width: 7px; border-radius: 6px; background: transparent; cursor: ew-resize; touch-action: none; transition: background .14s; }
.yw-sch-handle[data-edge="start"] { left: 1px; }
.yw-sch-handle[data-edge="end"] { right: 1px; }
.yw-sch-block-wrap:hover > .yw-sch-handle, .yw-sch-handle:focus-visible { background: rgba(124, 58, 237, .28); outline: none; }

.yw-sch-empty { margin: 0; color: #929097; font-size: 13px; }

/* The saved / undo pill: bottom centre, over everything, never in the flow. */
.yw-sch-toast { position: fixed; bottom: 24px; left: 50%; z-index: 80; display: flex; max-width: min(640px, calc(100vw - 32px)); align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 16px; background: rgba(32, 32, 36, .92); color: #fff; font-size: 13.5px; box-shadow: 0 16px 40px rgba(20, 16, 28, .28); transform: translateX(-50%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: yw-sch-toast-in .22s cubic-bezier(.16, 1, .3, 1) both; }
.yw-sch-toast[data-tone="warn"] { background: rgba(92, 34, 58, .94); }
.yw-sch-toast > button { padding: 6px 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.yw-sch-toast > button:hover { background: rgba(255, 255, 255, .24); }
.yw-sch-toast > button[data-close] { background: none; color: rgba(255, 255, 255, .7); font-size: 18px; line-height: 1; }
@keyframes yw-sch-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .yw-sch-toast { animation: none; } }
.yw-sch-saving { position: fixed; bottom: 24px; right: 24px; z-index: 79; padding: 6px 12px; border-radius: 999px; background: rgba(251, 251, 251, .9); color: #77717d; font-size: 12px; box-shadow: 0 6px 18px rgba(20, 16, 28, .1); }

/* The shift picker (inside .yw-dialog). */
.yw-sch-picker { display: flex; flex-direction: column; gap: 18px; }
.yw-sch-picker-h { margin: 0 0 8px; color: #202024; font-size: 14px; font-weight: 500; }
.yw-sch-usual { display: flex; flex-wrap: wrap; gap: 8px; }
.yw-sch-times { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.yw-sch-times > .yw-sch-field { flex: 1 1 140px; }

/* ------------------------------------------------- the shared popup ----- */
/* ui/dialog.tsx on a desktop: the Dashboard's card, translucent (owner 10/19:
   "all of these modals need to be translucent"). The phone sheet keeps its
   own shape; the glass applies there too. */
dialog.yw-dialog { border-color: rgba(255, 255, 255, .7); background: rgba(250, 249, 252, .62); color: #202024; font-size: 14px; letter-spacing: -.25px; -webkit-backdrop-filter: saturate(160%) blur(28px); backdrop-filter: saturate(160%) blur(28px); }
dialog.yw-dialog::backdrop { background: rgba(24, 20, 32, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (min-width: 640px) { dialog.yw-dialog { border-radius: 24px; box-shadow: 0 30px 80px rgba(20, 16, 28, .22), 0 2px 8px rgba(20, 16, 28, .06); } }
dialog.yw-dialog .yw-dialog-head { border-bottom-color: #eae8ec; padding: 18px 18px 14px 22px; }
dialog.yw-dialog .yw-dialog-title { color: #202024; font-size: 19px; font-weight: 500; letter-spacing: -.35px; }
dialog.yw-dialog .yw-dialog-close { border-radius: 50%; color: #929097; }
dialog.yw-dialog .yw-dialog-close:hover { background: #f1f0f3; color: #202024; }
dialog.yw-dialog .yw-dialog-body { padding: 18px 22px 22px; }
dialog.yw-dialog .yw-dialog-foot { border-top-color: #eae8ec; padding: 14px 22px; }

/* -------------------------------------------------------------- footer -- */
.yw-sch-post { display: flex; flex-direction: column; gap: 14px; }
.yw-sch-post-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.yw-sch-post-line { color: #77717d; font-size: 13px; }
.yw-sch-post-share { padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-sch-owner { display: flex; flex-direction: column; gap: 4px; }
.yw-sch-owner-cap { margin: 4px 0 0; color: #929097; font-size: 12px; }
.yw-sch-owner-list { margin: 0; padding-left: 18px; color: #59535f; font-size: 13px; }
.yw-sch-rules { display: flex; flex-direction: column; gap: 16px; }
.yw-sch-rules-more { margin: 0; padding-top: 14px; border-top: 1px solid #eae8ec; }
[data-theme-root].dark :is(.yw-sch-post-line, .yw-sch-owner-cap) { color: #a297ab; }
[data-theme-root].dark .yw-sch-owner-list { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-sch-post-share, .yw-sch-rules-more) { border-color: #1c2843; }

/* ------------------------------------------ the need on its department -- */
/* The day head: the weekday (Today on today), the date, how full the hotel
   is. A department that fills a need shows it per day as a soft pill on its
   own row: "2 of 7", green once covered. */
.yw-sch-day-occ { display: block; margin-top: 3px; color: #77717d; font-size: 12.5px; font-weight: 400; }
.yw-sch-day[data-today] .yw-sch-day-dow { color: #7c3aed; font-weight: 500; }
.yw-sch-grid tr.yw-sch-group[data-need] > th { padding-right: 8px; }
.yw-sch-grid tr.yw-sch-group[data-need] > th > .yw-sch-group-need { display: block; margin: 3px 0 0; color: #929097; font-size: 12px; font-weight: 400; }
.yw-sch-grid tr.yw-sch-group[data-need] > td { padding: 18px 4px 6px; border-bottom: 0; text-align: center; vertical-align: bottom; }
.yw-sch-need-pill { display: inline-flex; min-width: 64px; min-height: 26px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; background: #f1eff3; color: #202024; font-size: 13px; font-weight: 500; white-space: nowrap; }
.yw-sch-need-pill[data-met] { background: #e6f5ee; color: #1f7a5a; }
[data-theme-root].dark .yw-sch-day-occ { color: #a297ab; }
[data-theme-root].dark .yw-sch-day[data-today] .yw-sch-day-dow { color: #c9b1ff; }
[data-theme-root].dark .yw-sch-need-pill { background: #16213a; color: #f3eef8; }
[data-theme-root].dark .yw-sch-need-pill[data-met] { background: #0f3a2c; color: #7fe0b8; }

/* ---------------------------------------------------------------- dark -- */
[data-theme-root].dark .yw-sch-tabs > a { color: #6f6a7c; }
[data-theme-root].dark .yw-sch-tabs > a:hover { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-tabs > a[aria-current] { color: #f3eef8; }
[data-theme-root].dark .yw-sch-tabs > a[aria-current]::after { background: #f3eef8; }
[data-theme-root].dark .yw-sch-week-sub > [data-tone="ok"] { color: #3fbf93; }
[data-theme-root].dark :is(.yw-sch-sub, .yw-sch-past, .yw-sch-counter-label, .yw-sch-counter-word, .yw-sch-counter-value > small, .yw-sch-day-dow, .yw-sch-name-sub, .yw-sch-total > span, .yw-sch-empty, .yw-sch-grid tr.yw-sch-need > th) { color: #a297ab; }
[data-theme-root].dark .yw-sch-grid tr.yw-sch-need > td { color: #f3eef8; }
[data-theme-root].dark .yw-sch-grid tr.yw-sch-need > td [data-met] { color: #3fbf93; }
[data-theme-root].dark .yw-sch-grid :is(tr.yw-sch-band, tr.yw-sch-need) > :is(th, td) { background: #111a30; }
[data-theme-root].dark .yw-sch-grid tr.yw-sch-band > th { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-seg { background: #142036; }
[data-theme-root].dark .yw-sch-seg > a { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-seg > a:hover { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-sch-seg > a[aria-current] { background: #243352; color: #f3eef8; box-shadow: none; }
[data-theme-root].dark .yw-sch-btn { border-color: #2a3a5c; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-sch-btn:hover { border-color: #3a4c74; background: #16223a; }
[data-theme-root].dark .yw-sch-btn:is([data-primary], .yw-sch-primary) { border-color: transparent; background: #7c3aed; color: #fff; }
[data-theme-root].dark .yw-sch-btn:is([data-primary], .yw-sch-primary):hover { background: #8b4ff0; }
[data-theme-root].dark .yw-sch-link { color: #c9b1ff; }
[data-theme-root].dark .yw-sch-danger, [data-theme-root].dark .yw-sch-note[data-tone="warn"], [data-theme-root].dark tr[data-overtime] .yw-sch-name, [data-theme-root].dark .yw-sch-total > span[data-tone="bad"] { color: #e58aab; }
[data-theme-root].dark :is(.yw-sch-field) { color: #a297ab; }
[data-theme-root].dark .yw-sch-input { border-color: #1c2843; background-color: #0b1122; color: #f3eef8; }
[data-theme-root].dark :is(.yw-sch-note, .yw-sch-grid tr.yw-sch-group > th) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-sch-counter-value, .yw-sch-day-date, .yw-sch-name, .yw-sch-total > b, .yw-sch-picker-h, .yw-sch-held) { color: #f3eef8; }
[data-theme-root].dark .yw-sch-day[data-today] .yw-sch-day-date { color: #c9b1ff; }
[data-theme-root].dark :is(.yw-sch-counter-word[data-tone="good"], .yw-sch-note[data-tone="ok"]) { color: #3fbf93; }
[data-theme-root].dark .yw-sch-counters { border-color: #1c2843; }
[data-theme-root].dark .yw-sch-counter { border-color: #1c2843; }
[data-theme-root].dark .yw-sch-track { background: #1c2843; }
[data-theme-root].dark .yw-sch-held { border-color: #3f2d5c; background: rgba(28, 23, 48, .94); }
[data-theme-root].dark .yw-sch-held > span { color: #a297ab; }
[data-theme-root].dark .yw-sch-grid :is(th, td) { border-color: #16213a; }
[data-theme-root].dark .yw-sch-grid thead th { border-color: #1c2843; }
[data-theme-root].dark .yw-sch-grid th.yw-sch-person { background: #0d1527; }
[data-theme-root].dark .yw-sch-cell[data-over] { background: #1c1730; }
[data-theme-root].dark .yw-sch-add { color: #3a4560; }
[data-theme-root].dark .yw-sch-add:hover, [data-theme-root].dark .yw-sch-add:focus-visible { border-color: #3f2d5c; background: #1c1730; color: #c9b1ff; }
[data-theme-root].dark .yw-sch-off { background: repeating-linear-gradient(125deg, #142036 0 2px, transparent 2px 7px); color: #6f6a7c; }
[data-theme-root].dark .yw-sch-block { border-color: #3f2d5c; background: #241a3d; color: #e6dcfa; }
[data-theme-root].dark .yw-sch-block[data-draft] { background: #1a1530; }
[data-theme-root].dark .yw-sch-block[aria-pressed="true"] { border-color: #8b4ff0; background: #7c3aed; color: #fff; }
[data-theme-root].dark .yw-sch-saving { background: rgba(13, 21, 39, .9); color: #a297ab; }
[data-theme-root].dark dialog.yw-dialog { border-color: rgba(44, 59, 94, .7); background: rgba(13, 21, 39, .78); color: #f3eef8; }
[data-theme-root].dark dialog.yw-dialog::backdrop { background: rgba(2, 6, 16, .45); }
[data-theme-root].dark dialog.yw-dialog :is(.yw-dialog-head, .yw-dialog-foot) { border-color: #1c2843; }
[data-theme-root].dark dialog.yw-dialog .yw-dialog-title { color: #f3eef8; }
[data-theme-root].dark dialog.yw-dialog .yw-dialog-close:hover { background: #1c2843; color: #f3eef8; }

/* 10/22, the work-sample layout: the week's facts above the grid, and Week,
   OT, Max and Cost on every row. Amber, never red, for a warning. */
.yw-sch-facts { margin-bottom: 16px; }
.yw-sch-facts-grid { min-width: 52rem; }
.yw-sch-facts-grid td { text-align: center; white-space: nowrap; }
.yw-sch-facts-grid tr.yw-sch-facts-strong > :is(th, td) { color: #202024; font-weight: 500; }
.yw-sch-facts-grid tr > th.yw-sch-person { color: #59535f; font-size: 13px; font-weight: 400; }
.yw-sch-grid thead th.yw-sch-total { width: 58px; }
.yw-sch-grid thead th.yw-sch-total:last-child { width: 74px; }
.yw-sch-dim { color: #a7a2ad; font-weight: 400; }
.yw-sch-total > span[data-tone="warn"], .yw-sch-total [data-tone="warn"], .yw-sch-facts-grid [data-tone="warn"] { color: #b7791f; }
.yw-sch-max { width: 52px; padding: 2px 4px; text-align: right; font-size: 13px; }
.yw-sch-grid tr.yw-sch-foot > :is(th, td) { padding-top: 4px; padding-bottom: 4px; border-bottom: 0; color: #59535f; font-size: 13px; }
.yw-sch-grid tfoot tr.yw-sch-group > :is(th, td) { padding-top: 8px; }
[data-theme-root].dark .yw-sch-facts-grid tr.yw-sch-facts-strong > :is(th, td) { color: #f1eff4; }
[data-theme-root].dark :is(.yw-sch-total, .yw-sch-facts-grid) [data-tone="warn"] { color: #f2b77c; }
@media (max-width: 760px) {
  .yw-sch-facts .yw-sch-scroll { scroll-snap-type: x proximity; }
  .yw-sch-facts-grid td { scroll-snap-align: start; }
}
.yw-sch-week .yw-sch-grid { min-width: 60rem; }

/* Floor > Schedule, schedule-actions (10/20). See skin/schedule.css for the base.

   The actions of floor/labor/plan-actions.tsx and the review card of
   floor/labor/builder-review.tsx, on the Dashboard look:
     .yw-sch-acts      the row of action buttons (Schedule it, More)
     .yw-sch-more      More: a quiet 40px button and its frosted menu
     .yw-sch-menu      one action per row, a hairline between the groups
     .yw-sch-switch    the Wizard On/Off switch (role="switch")
     .yw-sch-notices   the note, the Send to staff preview, the sent list
     .yw-sch-send      the Send to staff preview: rows on hairlines, no box
     .yw-sch-sent      who was sent the week, one row each
     .yw-sch-review    Review and submit: figures, the day table, trims */

.yw-sch-acts { display: inline-flex; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-sch-acts > form { margin: 0; }

/* ---------------------------------------------------------------- More -- */
.yw-sch-more { position: relative; }
.yw-sch-more > summary { list-style: none; user-select: none; }
.yw-sch-more > summary::-webkit-details-marker { display: none; }
.yw-sch-more > summary > svg { color: #929097; transition: transform .16s; }
.yw-sch-more[open] > summary { border-color: #d5c4e6; background: #f8f5fb; }
.yw-sch-more[open] > summary > svg { transform: rotate(180deg); }

.yw-sch-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 300px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid rgba(229, 221, 234, .85); border-radius: 16px; background: rgba(253, 252, 254, .86); color: #202024; font-size: 13.5px; letter-spacing: -.25px; text-align: left; box-shadow: 0 15px 45px #3a214421; -webkit-backdrop-filter: saturate(140%) blur(18px); backdrop-filter: saturate(140%) blur(18px); animation: yw-sch-menu-in .16s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes yw-sch-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .yw-sch-menu { animation: none; } }
/* A phone: the menu is a sheet along the bottom, never off the screen edge. */
@media (max-width: 560px) {
  .yw-sch-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; max-height: 75vh; overflow-y: auto; }
}

.yw-sch-menu-group { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 4px 0; }
.yw-sch-menu-group + .yw-sch-menu-group { border-top: 1px solid #eae8ec; }
.yw-sch-menu-group > form { margin: 0; }

/* One row, one action: a link, a submit button or a disabled line. */
.yw-sch-menu-item { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #202024; font: inherit; font-size: 13.5px; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; transition: background .14s, color .14s; }
.yw-sch-menu-item:hover { background: rgba(124, 58, 237, .07); color: #202024; }
.yw-sch-menu-item:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }
.yw-sch-menu-item[data-tone="danger"] { color: #c85f84; }
.yw-sch-menu-item[aria-disabled="true"] { color: #a7a2ad; cursor: default; }
.yw-sch-menu-item[aria-disabled="true"]:hover { background: transparent; }
.yw-sch-menu-item > small { color: #929097; font-size: 12px; white-space: nowrap; }

/* Email the week as PDF: the label, then the teammate and Send on one line. */
.yw-sch-menu-email { gap: 6px; padding: 8px 10px 10px; }
.yw-sch-menu-label { color: #202024; font-size: 13.5px; }
.yw-sch-menu-inline { display: flex; min-width: 0; align-items: center; gap: 6px; }
.yw-sch-menu-inline > .yw-sch-input { flex: 1 1 auto; min-height: 32px; border-radius: 10px; font-size: 12.5px; }
.yw-sch-menu-inline > .yw-sch-btn { flex: 0 0 auto; }
.yw-sch-menu-note { padding: 8px 10px; color: #929097; font-size: 12.5px; }
.yw-sch-menu-note .yw-sch-link { font-size: 12.5px; }

/* The staff link: the Copy button (builder-grid ShareLinkCopy, a
   .yw-sch-btn) worn as a menu row, and its InfoDot. These outrank the
   button's own classes, including the colour of its Copied state. */
.yw-sch-menu-copy { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.yw-sch-menu-copy > button { display: flex; flex: 1 1 auto; min-height: 36px; align-items: center; justify-content: flex-start; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #202024; font: inherit; font-size: 13.5px; font-weight: 400; text-align: left; cursor: pointer; transition: background .14s; }
.yw-sch-menu-copy > button:hover { background: rgba(124, 58, 237, .07); }
.yw-sch-menu-copy > button:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }

/* The Wizard switch: the label (its InfoDot) on the left, On/Off right. */
.yw-sch-menu-switch { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 10px; }
.yw-sch-menu-switch .hw-info-label { color: #202024; font-size: 13.5px; text-align: left; }
.yw-sch-switch { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; color: #929097; font: inherit; font-size: 12px; cursor: pointer; }
.yw-sch-switch-track { position: relative; display: inline-block; width: 34px; height: 20px; border-radius: 999px; background: #dcd9e0; transition: background .16s; }
.yw-sch-switch-track > i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 16, 28, .2); transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
.yw-sch-switch[aria-checked="true"] { color: #202024; }
.yw-sch-switch[aria-checked="true"] .yw-sch-switch-track { background: #7c3aed; }
.yw-sch-switch[aria-checked="true"] .yw-sch-switch-track > i { transform: translateX(14px); }
.yw-sch-switch:focus-visible { border-radius: 8px; outline: 2px solid #b993ff; outline-offset: 2px; }

/* ------------------------------------------------- notices, send, sent -- */
.yw-sch-notices { display: flex; min-width: 0; flex-direction: column; gap: 12px; }

/* Send to staff: under a hairline, the one sentence, who gets what, then
   one violet Send and two quiet links. */
.yw-sch-send { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-sch-send-lead { margin: 0; color: #202024; font-size: 14px; font-weight: 500; line-height: 1.45; }
.yw-sch-send-rows { margin: 0; padding: 0; border-top: 1px solid #eae8ec; list-style: none; }
/* Who can't be reached follows straight on: one run of hairlines. */
.yw-sch-send-rows + .yw-sch-send-rows { margin-top: -10px; border-top: 0; }
.yw-sch-send-rows > li { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid #eae8ec; font-size: 13.5px; }
.yw-sch-send-name { overflow: hidden; color: #202024; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-sch-send-to { color: #929097; font-size: 12.5px; }
.yw-sch-send-shifts { color: #202024; }
.yw-sch-send-fix, .yw-sch-send-skip { margin: 0; color: #929097; font-size: 12.5px; }
.yw-sch-send-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 4px; }
.yw-sch-send-acts > form { margin: 0; }
.yw-sch-link[data-quiet] { color: #929097; }
@media (max-width: 640px) { .yw-sch-send-rows > li { grid-template-columns: minmax(0, 1fr); } }

/* Who was sent the week: the name, the state as a word, when and why. */
.yw-sch-sent { margin: 0; padding: 0; border-top: 1px solid #eae8ec; list-style: none; }
.yw-sch-sent > li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: baseline; gap: 2px 16px; padding: 8px 0; border-bottom: 1px solid #eae8ec; font-size: 13.5px; }
.yw-sch-sent-name { overflow: hidden; color: #202024; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-sch-sent-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yw-sch-sent-state > .yw-sch-word { font-size: 12.5px; }
.yw-sch-sent-when { color: #929097; font-size: 12px; }
.yw-sch-sent-why { grid-column: 2; color: #929097; font-size: 12px; }
@media (max-width: 640px) { .yw-sch-sent > li { grid-template-columns: minmax(0, 1fr); } .yw-sch-sent-why { grid-column: 1; } }

/* ------------------------------------------------------------- review -- */
/* Review and submit: one column, 14px apart; the parts from review-table.tsx
   (the day table, the diff) lose their own top margins to that rhythm. */
.yw-sch-review { display: flex; flex-direction: column; gap: 14px; color: #59535f; }
.yw-sch-review > * { margin-top: 0; margin-bottom: 0; }
.yw-sch-review > .yw-card-head .yw-sch-link { padding-top: 4px; white-space: nowrap; }

/* The four figures: the Dashboard's stat columns, values in ink, the state
   as a coloured word under them. */
.yw-sch-review-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 0; border-top: 1px solid #eae8ec; border-bottom: 1px solid #eae8ec; }
.yw-sch-review-fig { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 0 20px; border-left: 1px solid #eae8ec; }
.yw-sch-review-fig:first-child { padding-left: 0; border-left: 0; }
.yw-sch-review-fig-label { overflow: hidden; color: #929097; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-sch-review-fig-value { color: #202024; font-size: 27px; font-weight: 500; letter-spacing: -.6px; line-height: 1.15; }
.yw-sch-review-fig-sub { color: #929097; font-size: 12px; }
.yw-sch-review-word { color: #929097; }
.yw-sch-review-word[data-tone="ok"] { color: #279876; }
.yw-sch-review-word[data-tone="warn"] { color: #b7791f; }
.yw-sch-review-word[data-tone="bad"] { color: #c85f84; }
@media (max-width: 760px) {
  .yw-sch-review-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .yw-sch-review-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
}

.yw-sch-review-line { color: #59535f; font-size: 13.5px; line-height: 1.5; }
.yw-sch-review > .yw-sch-review-h { margin-top: 10px; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
.yw-sch-review-h .hw-info-label { color: inherit; font-weight: inherit; }

/* The day table (review-table.tsx ReviewTable, shared with the approve
   page): quiet heads, hairlines, weight 500. Its how-it-is-measured
   paragraph is the By day InfoDot here, so it is not printed twice. */
.yw-sch-review [data-surface="floor.labor.review.days"] { color: #202024; font-size: 13.5px; }
.yw-sch-review [data-surface="floor.labor.review.days"] > p:last-child { display: none; }
.yw-sch-review [data-surface="floor.labor.review.days"] table { font-size: 13.5px; }
.yw-sch-review [data-surface="floor.labor.review.days"] thead th { padding-top: 0; color: #929097; font-size: 12px; font-weight: 400; }
.yw-sch-review [data-surface="floor.labor.review.days"] :is(thead tr, tbody, tbody > tr, ul, ul > li) { border-color: #eae8ec; }
.yw-sch-review [data-surface="floor.labor.review.days"] thead tr { border-bottom: 1px solid #eae8ec; }
.yw-sch-review [data-surface="floor.labor.review.days"] .font-semibold { font-weight: 500; }
.yw-sch-review [data-surface="floor.labor.review.diff"] { color: #59535f; font-size: 13.5px; }

/* The shifts to trim: rows on hairlines, a rose Remove on the right. */
.yw-sch-review-trims { margin: 0; padding: 0; border-top: 1px solid #eae8ec; list-style: none; }
.yw-sch-review-trims > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid #eae8ec; color: #202024; font-size: 13.5px; }
.yw-sch-review-trims > li > form { margin: 0; }
.yw-sch-review-trims .yw-sch-danger { min-height: 32px; }

.yw-sch-review > .yw-sch-review-foot { margin-top: 6px; padding-top: 18px; border-top: 1px solid #eae8ec; }
.yw-sch-review-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.yw-sch-review-after { color: #77717d; font-size: 13px; }
.yw-sch-review-after .hw-info-label { color: inherit; }
/* An InfoDot label keeps the house hover violet inside these rows. */
:is(.yw-sch-menu-switch, .yw-sch-review-h, .yw-sch-review-after) .hw-info-label:is(:hover, [aria-expanded="true"]) { color: #8546d7; }

/* ---------------------------------------------------------------- dark -- */
[data-theme-root].dark .yw-sch-more > summary > svg { color: #a297ab; }
[data-theme-root].dark .yw-sch-more[open] > summary { border-color: #3a4c74; background: #16223a; }
[data-theme-root].dark .yw-sch-menu { border-color: #1c2843; background: rgba(13, 21, 39, .9); color: #f3eef8; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
[data-theme-root].dark .yw-sch-menu-group + .yw-sch-menu-group { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-sch-menu-item, .yw-sch-menu-copy > button, .yw-sch-menu-label, .yw-sch-menu-switch .hw-info-label) { color: #f3eef8; }
[data-theme-root].dark .yw-sch-menu-copy > button { border: 0; background: transparent; }
[data-theme-root].dark :is(.yw-sch-menu-item, .yw-sch-menu-copy > button):hover { background: rgba(201, 177, 255, .1); color: #f3eef8; }
[data-theme-root].dark .yw-sch-menu-item[data-tone="danger"] { color: #e58aab; }
[data-theme-root].dark .yw-sch-menu-item[aria-disabled="true"] { color: #6f6a7c; }
[data-theme-root].dark .yw-sch-menu-item[aria-disabled="true"]:hover { background: transparent; }
[data-theme-root].dark :is(.yw-sch-menu-item > small, .yw-sch-menu-note, .yw-sch-switch) { color: #a297ab; }
[data-theme-root].dark .yw-sch-switch-track { background: #2a3a5c; }
[data-theme-root].dark .yw-sch-switch[aria-checked="true"] { color: #f3eef8; }
[data-theme-root].dark .yw-sch-switch[aria-checked="true"] .yw-sch-switch-track { background: #7c3aed; }

[data-theme-root].dark :is(.yw-sch-send, .yw-sch-send-rows, .yw-sch-send-rows > li, .yw-sch-sent, .yw-sch-sent > li) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-sch-send-lead, .yw-sch-send-name, .yw-sch-send-shifts, .yw-sch-sent-name) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-sch-send-to, .yw-sch-send-fix, .yw-sch-send-skip, .yw-sch-sent-when, .yw-sch-sent-why, .yw-sch-link[data-quiet]) { color: #a297ab; }

[data-theme-root].dark .yw-sch-review { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-sch-review-figs, .yw-sch-review-fig, .yw-sch-review-trims, .yw-sch-review-trims > li, .yw-sch-review > .yw-sch-review-foot) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-sch-review-fig-label, .yw-sch-review-fig-sub, .yw-sch-review-word, .yw-sch-review-after) { color: #a297ab; }
[data-theme-root].dark .yw-sch-review-word[data-tone="ok"] { color: #3fbf93; }
[data-theme-root].dark .yw-sch-review-word[data-tone="warn"] { color: #e0a84a; }
[data-theme-root].dark .yw-sch-review-word[data-tone="bad"] { color: #e58aab; }
[data-theme-root].dark :is(.yw-sch-review-fig-value, .yw-sch-review > .yw-sch-review-h, .yw-sch-review-trims > li) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-sch-review-line, .yw-sch-review [data-surface="floor.labor.review.diff"]) { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-review [data-surface="floor.labor.review.days"] thead th { color: #a297ab; }
[data-theme-root].dark .yw-sch-review [data-surface="floor.labor.review.days"] :is(thead tr, tbody, tbody > tr, ul, ul > li) { border-color: #1c2843; }
[data-theme-root].dark .yw-sch-review [data-surface="floor.labor.review.days"] { color: #f3eef8; }
[data-theme-root].dark :is(.yw-sch-menu-switch, .yw-sch-review-h, .yw-sch-review-after) .hw-info-label:is(:hover, [aria-expanded="true"]) { color: #b99ae9; }

/* Floor > Schedule, schedule-calendar (10/20). See skin/schedule.css for the base.
   The Calendar view (floor/labor/staff-calendar-card.tsx, labor-page.tsx
   calendarView) and the Posted view (floor/labor/posted-view.tsx).

     .yw-sch-cal-pager     the head card's two round arrows (four weeks a
                           step) and Today
     .yw-sch-cal           the staffing card
     .yw-sch-cal-grid      the house heat grid (heat-grid.tsx) re-dressed
                           here only: no caps, quiet day heads, row names
                           held at the left, rounder cells. Every other heat
                           map keeps its look.
     .yw-sch-posted-*      one posted week as a clean read-only table, and
                           every posted week as quiet rows */

/* ------------------------------------------------------------ calendar -- */
.yw-sch-cal-pager { display: inline-flex; align-items: center; gap: 8px; }
.yw-sch-cal-step { display: inline-grid; width: 40px; height: 40px; flex-shrink: 0; place-items: center; border: 1px solid #e2e1e4; border-radius: 50%; background: #fff; color: #202024; text-decoration: none; transition: background .16s, border-color .16s; }
.yw-sch-cal-step:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-sch-cal-step:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-sch-cal-step > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.yw-sch-cal { display: flex; flex-direction: column; gap: 14px; }
/* 10/20, later (owner: "this table should use the design of the heat maps
   in pricing"): each cell is a Pricing night tile, the ramp of
   skin/pricing-ops.css .yw-night[data-heat] in a table (as the Ads heat
   table does): near-white to the deep 125 degree hatched violet, a hairline
   edge, the grey hatch of no reading, today ringed in ink. */
.yw-sch-cal-scroll { min-width: 0; overflow-x: auto; padding: 3px 3px 6px; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-sch-cal-table { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13.5px; letter-spacing: -.2px; }
.yw-sch-cal-table :is(th, td) { padding: 0; border: 0; font-weight: 400; text-align: center; white-space: nowrap; }
.yw-sch-cal-table thead th { padding-bottom: 6px; vertical-align: bottom; }
.yw-sch-cal-table :is(th, td)[data-monday]:not(:nth-child(2)) { padding-left: 8px; }
.yw-sch-cal-table .yw-sch-cal-label { position: sticky; left: 0; z-index: 2; min-width: 150px; padding-right: 12px; background: #fbfbfb; color: #343039; font-size: 13.5px; text-align: left; }
.yw-sch-cal-day { display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: 8px; text-decoration: none; }
.yw-sch-cal-day:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-sch-cal-dow { color: #87818c; font-size: 12px; }
.yw-sch-cal-date { color: #202024; font-size: 14px; font-weight: 500; transition: color .16s; }
.yw-sch-cal-day:hover .yw-sch-cal-date { color: #8553c2; }
th[data-today] .yw-sch-cal-dow { color: #7c3aed; font-weight: 500; }
.yw-sch-heat { display: flex; min-width: 46px; height: 38px; align-items: center; justify-content: center; border: 1px solid #eae8ec; border-radius: 10px; background: #fbfbfb; color: #202024; font-size: 13.5px; font-weight: 500; letter-spacing: -.3px; transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s cubic-bezier(.2, .8, .2, 1); }
.yw-sch-heat:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(48, 32, 64, .08); }
.yw-sch-heat[data-heat="0"] { color: #87818c; }
.yw-sch-heat[data-heat="1"] { border-color: #ece4fb; background: #f6f2fd; }
.yw-sch-heat[data-heat="2"] { border-color: #dfd0f9; background: #ebe1fc; }
.yw-sch-heat[data-heat="3"] { border-color: #cfb8f6; background: repeating-linear-gradient(125deg, #d3bdf8 0 2px, #e3d5fb 2px 5px); }
.yw-sch-heat[data-heat="4"] { border-color: #a27aec; background: repeating-linear-gradient(125deg, #a978f2 0 2px, #bc98f5 2px 5px); color: #241047; }
.yw-sch-heat[data-heat="5"] { border-color: #6f2fdc; background: repeating-linear-gradient(125deg, #7c3aed 0 2px, #9153f1 2px 5px); color: #fff; }
.yw-sch-heat[data-none] { border-color: #e2e1e4; background: repeating-linear-gradient(125deg, #e8e6eb 0 2px, #f5f4f7 2px 6px); }
.yw-sch-heat[data-today] { box-shadow: 0 0 0 1.5px #202024; }
.yw-sch-heat[data-today]:hover { box-shadow: 0 0 0 1.5px #202024, 0 6px 14px rgba(48, 32, 64, .08); }
@media (prefers-reduced-motion: reduce) { .yw-sch-heat { transition: none; } .yw-sch-heat:hover { transform: none; } }
.yw-sch-cal-grid { min-width: 0; }
.yw-sch-cal-grid > div { padding-bottom: 4px; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-sch-cal-grid table { border-spacing: 3px; }
/* The day heads: sentence case, caption grey; today in ink. */
.yw-sch-cal-grid thead th { padding: 0 0 6px; color: #929097; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.yw-sch-cal-grid thead th[class~="text-zinc-700"] { color: #202024; font-weight: 500; }
/* The row names: body grey, left aligned, held at the left while the four
   weeks scroll under them. */
.yw-sch-cal-grid :is(thead th, tbody td):first-child { position: sticky; left: 0; z-index: 1; width: auto; background: #fbfbfb; box-shadow: 3px 0 0 #fbfbfb; }
.yw-sch-cal-grid tbody td:first-child { padding: 0 14px 0 0; color: #59535f; font-size: 12.5px; text-align: left; }
/* A cell: its number on the house ramp, rounder and lighter. */
.yw-sch-cal-grid tbody td:not(:first-child) div { height: 34px; border-radius: 9px; font-size: 12.5px; font-weight: 500; letter-spacing: -.2px; transition: filter .14s; }
.yw-sch-cal-grid tbody td:not(:first-child) a { border-radius: 9px; }
.yw-sch-cal-grid tbody td:not(:first-child) a:hover > div { filter: brightness(.95); }
.yw-sch-cal-grid tbody td:not(:first-child) a:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
/* Today: a thin ink ring, not the shared grid's heavy one. */
.yw-sch-cal-grid tbody div[class~="ring-2"] { box-shadow: 0 0 0 1.5px #202024; }
/* The key: one caption line. */
.yw-sch-cal-grid > div > div:last-child { margin-top: 14px; gap: 6px; color: #929097; font-size: 12px; }
.yw-sch-cal-grid > div > div:last-child span[class~="rounded"] { width: 18px; height: 11px; border-radius: 4px; }

/* -------------------------------------------------------------- posted -- */
.yw-sch-posted-acts { gap: 8px; }
/* The shared CopyButton (violet, green once copied) as the quiet button. */
.yw-sch-btn.yw-sch-posted-copy[class~="bg-emerald-600"] { border-color: #bfe3d3; background: #f1faf6; color: #279876; }
.yw-sch-btn.yw-sch-posted-small { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }

/* One posted week: no box around the table; the card is the frame. */
.yw-sch-posted-grid { width: 100%; min-width: 52rem; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.yw-sch-posted-grid :is(th, td) { padding: 6px 4px; border-bottom: 1px solid #f0eef2; font-weight: 400; vertical-align: middle; }
.yw-sch-posted-grid thead th { padding: 0 4px 12px; border-bottom-color: #e6e4e8; color: #929097; font-size: 12px; vertical-align: bottom; }
.yw-sch-posted-grid tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.yw-sch-posted-grid .yw-sch-posted-person { position: sticky; left: 0; z-index: 1; width: 190px; min-width: 150px; padding-left: 0; background: #fbfbfb; text-align: left; white-space: nowrap; }
.yw-sch-posted-grid .yw-sch-posted-day { text-align: center; }
.yw-sch-posted-dow { display: block; color: #929097; font-size: 12px; }
.yw-sch-posted-date { display: block; margin-top: 1px; color: #202024; font-size: 14px; font-weight: 500; }
/* The GM's day off: a small amber word in the day head, nothing painted. */
.yw-sch-posted-gmoff { display: block; margin-top: 4px; color: #b7791f; font-size: 11.5px; }
.yw-sch-posted-grid .yw-sch-posted-total { width: 64px; padding-right: 0; text-align: right; white-space: nowrap; }
.yw-sch-posted-grid tbody .yw-sch-posted-total { color: #202024; font-weight: 500; }
/* A department: sentence case, quiet, no band of colour. */
.yw-sch-posted-grid tr.yw-sch-posted-dept > th { padding: 18px 0 6px; border-bottom: 0; color: #59535f; font-size: 13px; font-weight: 500; text-align: left; }
.yw-sch-posted-grid tbody tr.yw-sch-posted-dept:first-child > th { padding-top: 10px; }
.yw-sch-posted-name { color: #202024; font-weight: 500; }
.yw-sch-posted-role { margin-left: 8px; color: #929097; font-size: 12px; }
.yw-sch-posted-grid .yw-sch-posted-cell { min-width: 6.5rem; text-align: center; }
.yw-sch-posted-shift { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 10px; background: #f3edfd; color: #3b2a5c; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.yw-sch-posted-off { color: #929097; font-size: 12px; }
.yw-sch-posted-foot { margin: 0; color: #929097; font-size: 12px; }

/* Every posted week: quiet rows, hairlines between. */
.yw-sch-posted-list { margin: 8px 0 0; padding: 0; list-style: none; }
.yw-sch-posted-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0; border-top: 1px solid #eae8ec; }
.yw-sch-posted-row:first-child { border-top: 0; }
.yw-sch-posted-pick { display: flex; min-width: 0; min-height: 44px; flex-direction: column; justify-content: center; gap: 2px; text-decoration: none; }
.yw-sch-posted-pick:focus-visible { border-radius: 6px; outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-sch-posted-span { color: #59535f; font-size: 14px; transition: color .16s; }
.yw-sch-posted-pick:hover .yw-sch-posted-span { color: #8553c2; }
.yw-sch-posted-pick[aria-current] .yw-sch-posted-span { color: #202024; font-weight: 500; }
.yw-sch-posted-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: #929097; font-size: 12px; }

/* ---------------------------------------------------------------- dark -- */
[data-theme-root].dark .yw-sch-cal-step { border-color: #2a3a5c; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-sch-cal-step:hover { border-color: #3a4c74; background: #16223a; }
[data-theme-root].dark .yw-sch-cal-grid > div { scrollbar-color: #2a3a5c transparent; }
[data-theme-root].dark .yw-sch-cal-scroll { scrollbar-color: #2a3a5c transparent; }
[data-theme-root].dark .yw-sch-cal-date { color: #f3eef8; }
[data-theme-root].dark .yw-sch-cal-table .yw-sch-cal-label { background: #0d1527; color: #c3b9cc; }
[data-theme-root].dark .yw-sch-cal-dow { color: #a297ab; }
[data-theme-root].dark th[data-today] .yw-sch-cal-dow { color: #c9b1ff; }
[data-theme-root].dark .yw-sch-cal-day:hover .yw-sch-cal-date { color: #c9b1ff; }
[data-theme-root].dark .yw-sch-heat { border-color: #1c2843; background: #111b30; color: #f3eef8; }
[data-theme-root].dark .yw-sch-heat[data-heat="0"] { color: #a297ab; }
[data-theme-root].dark .yw-sch-heat[data-heat="1"] { border-color: #3d3350; background: #33293f; }
[data-theme-root].dark .yw-sch-heat[data-heat="2"] { border-color: #4a3a63; background: #3d3052; }
[data-theme-root].dark .yw-sch-heat[data-heat="3"] { border-color: #5c4a78; background: repeating-linear-gradient(125deg, #5a4580 0 2px, #4a3a68 2px 5px); }
[data-theme-root].dark .yw-sch-heat[data-heat="4"] { border-color: #7d5bc4; background: repeating-linear-gradient(125deg, #7a55c0 0 2px, #6646a6 2px 5px); color: #fff; }
[data-theme-root].dark .yw-sch-heat[data-heat="5"] { border-color: #a883ee; background: repeating-linear-gradient(125deg, #9c6cf0 0 2px, #8452e6 2px 5px); color: #fff; }
[data-theme-root].dark .yw-sch-heat[data-none] { border-color: #1c2843; background: repeating-linear-gradient(125deg, #1a2540 0 2px, #111b30 2px 6px); }
[data-theme-root].dark .yw-sch-heat[data-today] { box-shadow: 0 0 0 1.5px #f3eef8; }
[data-theme-root].dark .yw-sch-cal-grid thead th { color: #a297ab; }
[data-theme-root].dark .yw-sch-cal-grid thead th[class~="text-zinc-700"] { color: #f3eef8; }
[data-theme-root].dark .yw-sch-cal-grid :is(thead th, tbody td):first-child { background: #0d1527; box-shadow: 3px 0 0 #0d1527; }
[data-theme-root].dark .yw-sch-cal-grid tbody td:first-child { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-cal-grid tbody div[class~="ring-2"] { box-shadow: 0 0 0 1.5px #f3eef8; }
[data-theme-root].dark .yw-sch-cal-grid > div > div:last-child { color: #a297ab; }

[data-theme-root].dark .yw-sch-btn.yw-sch-posted-copy[class~="bg-emerald-600"] { border-color: #1f4a3c; background: #10241f; color: #3fbf93; }
[data-theme-root].dark .yw-sch-posted-grid :is(th, td) { border-color: #16213a; }
[data-theme-root].dark .yw-sch-posted-grid thead th { border-color: #1c2843; color: #a297ab; }
[data-theme-root].dark .yw-sch-posted-grid .yw-sch-posted-person { background: #0d1527; }
[data-theme-root].dark :is(.yw-sch-posted-dow, .yw-sch-posted-role, .yw-sch-posted-off, .yw-sch-posted-foot, .yw-sch-posted-meta) { color: #a297ab; }
[data-theme-root].dark :is(.yw-sch-posted-date, .yw-sch-posted-name) { color: #f3eef8; }
[data-theme-root].dark .yw-sch-posted-grid tbody .yw-sch-posted-total { color: #f3eef8; }
[data-theme-root].dark .yw-sch-posted-grid tr.yw-sch-posted-dept > th { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-posted-gmoff { color: #e6bd7f; }
[data-theme-root].dark .yw-sch-posted-shift { background: #241a3d; color: #e6dcfa; }
[data-theme-root].dark .yw-sch-posted-row { border-color: #1c2843; }
[data-theme-root].dark .yw-sch-posted-span { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-posted-pick:hover .yw-sch-posted-span { color: #c9b1ff; }
[data-theme-root].dark .yw-sch-posted-pick[aria-current] .yw-sch-posted-span { color: #f3eef8; }

/* Floor > Schedule, schedule-rules (10/20). See skin/schedule.css for the base.
   Team and rules (builder.tsx's rules card holding schedule-parts.tsx's
   editors), the staff link under a posted week (ShareCard), the Time off
   drawer (builder-changes.tsx) and the roster drawer (roster-drawer.tsx).
   No box inside a card: hairlines split the sections and the rows, the
   values are ink, and the only colour is a status word.

   What this file adds:
     .yw-sch-rules-sec     one editor of Team and rules: a hairline above,
                           a 14px title (its explanation on the hover), rows
     .yw-sch-rules-row     a compact row of fields ending in its button
     .yw-sch-rules-bar     a line of text with its button at the right
     .yw-sch-rules-areas   the common areas: three columns under one header
     .yw-sch-rules-list    people split by hairlines (what the Wizard knows)
     .yw-sch-rules-more    the link to what the Wizard knows (builder.tsx)
     .yw-sch-share         the staff link: QR, title and Copy, one line, URL
     .yw-sch-timeoff           the Time off drawer: the list, then the add row
     .yw-sch-roster        the roster drawer: summary, table, person form */

/* ------------------------------------------------------ Team and rules -- */
.yw-sch-rules-sec { display: flex; min-width: 0; flex-direction: column; gap: 12px; margin: 0; padding: 18px 0; border-top: 1px solid #eae8ec; }
.yw-sch-rules-sec:last-child { padding-bottom: 2px; }
.yw-card-head + .yw-sch-rules-sec { margin-top: 14px; }
.yw-sch-rules-h { margin: 0; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; line-height: 1.35; }
.yw-sch-rules-h .hw-info-label { color: inherit; font: inherit; letter-spacing: inherit; }
.yw-sch-rules-line { margin: 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-sch-rules-cap { color: #929097; font-size: 12px; line-height: 1.45; }
.yw-sch-rules-strong { color: #202024; font-size: 13.5px; font-weight: 500; }
.yw-sch-rules-name { min-width: 0; overflow: hidden; color: #202024; font-weight: 500; text-overflow: ellipsis; }
.yw-sch-rules-what { min-width: 0; color: #59535f; }

/* A form of the section; rows inside it stack 12px apart. */
.yw-sch-rules-form { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
.yw-sch-rules-switch { min-height: 32px; }
.yw-sch-rules-form > :is(.yw-sch-rules-row, .yw-sch-rules-areas) { align-self: stretch; }

/* A row of fields: captions over 40px controls, the button on the line. */
.yw-sch-rules-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; }
.yw-sch-rules-row > .yw-sch-field { flex: 0 1 136px; }
.yw-sch-rules-row > .yw-sch-field[data-w="date"] { flex-basis: 156px; }
.yw-sch-rules-row > .yw-sch-field[data-w="wide"] { flex-basis: 210px; }
.yw-sch-rules-row > .yw-sch-field[data-w="grow"] { flex: 1 1 180px; }
.yw-sch-rules-row > :is(button, a) { flex-shrink: 0; }

/* A line with its action on the right (Undo, Archive). */
.yw-sch-rules-bar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0; }
.yw-sch-rules-text { display: flex; min-width: 0; flex: 1 1 260px; flex-direction: column; gap: 2px; }
.yw-sch-rules-sec > form + form { padding-top: 12px; border-top: 1px solid #f0eef2; }

/* Common areas: one header, then a row per area. */
.yw-sch-rules-areas { display: grid; width: 100%; max-width: 580px; grid-template-columns: minmax(0, 1fr) 120px 140px; align-items: center; gap: 8px 12px; }
.yw-sch-rules-area { display: contents; }
.yw-sch-rules-col { color: #929097; font-size: 12px; line-height: 1.35; }
.yw-sch-rules-tick { display: flex; min-height: 40px; align-items: center; }

/* What the Wizard knows: name, what is known, Teach. */
.yw-sch-rules-list { margin: 0; padding: 0; list-style: none; }
.yw-sch-rules-list > li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 10px 0; border-top: 1px solid #f0eef2; font-size: 13.5px; }
.yw-sch-rules-list > li:first-child { padding-top: 2px; border-top: 0; }

/* builder.tsx's door to what the Wizard knows, between two sections. */
.yw-sch-rules-more { margin: 0; padding: 16px 0; border-top: 1px solid #eae8ec; font-size: 13px; }

@media (max-width: 640px) {
  .yw-sch-rules-row > .yw-sch-field, .yw-sch-rules-row > .yw-sch-field[data-w] { flex: 1 1 calc(50% - 6px); }
  .yw-sch-rules-row > .yw-sch-field[data-w="wide"], .yw-sch-rules-row > .yw-sch-field[data-w="grow"] { flex-basis: 100%; }
  .yw-sch-rules-areas { grid-template-columns: minmax(0, 1fr) 84px 72px; }
  .yw-sch-rules-list > li { grid-template-columns: minmax(0, 1fr) auto; }
  .yw-sch-rules-list > li > .yw-sch-rules-what { grid-column: 1 / -1; grid-row: 2; }
}

/* -------------------------------------------------------- staff link -- */
/* A calm row, no box: the QR keeps its white square so it scans in dark. */
.yw-sch-share { display: flex; min-width: 0; align-items: center; gap: 18px; }
.yw-sch-share-qr { width: 88px; height: 88px; flex-shrink: 0; padding: 4px; border: 1px solid #eae8ec; border-radius: 12px; background: #fff; }
.yw-sch-share-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; }
.yw-sch-share-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.yw-sch-share-title { margin: 0; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
.yw-sch-share-title .hw-info-label { color: inherit; font: inherit; }
.yw-sch-share-cap { margin: 0; color: #59535f; font-size: 13px; line-height: 1.45; }
.yw-sch-share-url { margin: 2px 0 0; color: #929097; font-size: 12px; overflow-wrap: anywhere; }
/* Copy is the quiet small button whatever kit drew it. */
.yw-sch-share-act > button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-sch-share-act > button:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-sch-share-act > button:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
@media (max-width: 480px) { .yw-sch-share { align-items: flex-start; gap: 14px; } .yw-sch-share-qr { width: 72px; height: 72px; } }

/* ----------------------------------------------------------- time off -- */
.yw-sch-timeoff { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.yw-sch-timeoff-list { margin: 0; padding: 0; list-style: none; }
.yw-sch-timeoff-item { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid #eae8ec; font-size: 13.5px; }
.yw-sch-timeoff-item:first-child { padding-top: 2px; }
.yw-sch-timeoff-item form { margin: 0; }
.yw-sch-timeoff-when { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: #59535f; }
@media (max-width: 560px) {
  .yw-sch-timeoff-item { grid-template-columns: minmax(0, 1fr) auto; }
  .yw-sch-timeoff-when { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------ roster drawer -- */
.yw-sch-roster { display: flex; min-width: 0; flex-direction: column; gap: 22px; font-size: 14px; }
.yw-sch-roster-h { margin: 0; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.25px; }
.yw-sch-roster-add { display: flex; flex-direction: column; gap: 14px; }
.yw-sch-roster-team { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid #eae8ec; }
.yw-sch-roster-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.yw-sch-roster-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; color: #77717d; font-size: 13px; }
.yw-sch-roster-summary .hw-info-label { color: #8553c2; font-size: 13px; }
.yw-sch-roster-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: #202024; }
.yw-sch-roster-table th .hw-info-label { color: inherit; font: inherit; }
.yw-sch-roster > .yw-tasks-scroll { margin-top: 0; }
.yw-sch-roster-table tr[data-inactive] td { opacity: .55; }
.yw-sch-roster-person { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-sch-roster-name { color: #202024; font-weight: 500; }
.yw-sch-roster-sub { color: #929097; font-size: 12.5px; white-space: nowrap; }
.yw-sch-roster-rate { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yw-sch-roster-decide { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; }
.yw-sch-roster-decide form { margin: 0; }
.yw-sch-roster-decide .hw-info-label { color: #8553c2; font-size: 12px; }
.yw-sch-roster-stars { color: #202024; letter-spacing: 1px; }
.yw-sch-roster-stars > [data-off] { color: #dcd7e0; }
.yw-sch-roster-acts { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.yw-sch-roster-acts form { margin: 0; }
.yw-sch-roster-quiet { padding: 0; border: 0; background: none; color: #929097; font: inherit; font-size: 13px; cursor: pointer; }
.yw-sch-roster-quiet:hover { color: #59535f; text-decoration: underline; }

/* The person form: groups split by hairlines, fields three across. */
.yw-sch-roster-form { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.yw-sch-roster-group { margin: 22px 0 0; padding: 16px 0 12px; border-top: 1px solid #eae8ec; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
.yw-sch-roster-group:first-of-type { margin-top: 0; padding-top: 6px; border-top: 0; }
.yw-sch-roster-group .hw-info-label { color: inherit; font: inherit; letter-spacing: inherit; }
.yw-sch-roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.yw-sch-roster-grid > [data-span="2"] { grid-column: span 2; }
.yw-sch-roster-grid > [data-span="3"] { grid-column: 1 / -1; }
.yw-sch-roster-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.yw-sch-roster .yw-sch-field .hw-info-label { color: inherit; font-size: inherit; }
.yw-sch-roster-hint { color: #a7a2ad; font-size: 11.5px; }
.yw-sch-roster textarea.yw-sch-input { min-height: 72px; padding: 9px 12px; line-height: 1.45; resize: vertical; }
/* The design's dropdown, at the field's size and width. */
.yw-sch-roster .yw-sch-field > .relative.inline-block { display: block; }
.yw-sch-roster .yw-select.yw-sch-roster-select { width: 100%; min-height: 40px; padding: 0 12px; border-color: #e2e1e4; border-radius: 11px; box-shadow: none; font-size: 13.5px; }
.yw-sch-roster .yw-select.yw-sch-roster-select[data-open] { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-sch-roster-ticks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.yw-sch-roster-tick { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; color: #202024; font-size: 13px; cursor: pointer; }
.yw-sch-roster-ratelink { display: inline-flex; min-height: 40px; align-items: center; }
.yw-sch-roster-limits { color: #202024; font-size: 13px; }
.yw-sch-roster-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #eae8ec; }
@media (max-width: 640px) {
  .yw-sch-roster-grid { grid-template-columns: minmax(0, 1fr); }
  .yw-sch-roster-grid > [data-span="2"] { grid-column: 1 / -1; }
  .yw-sch-roster-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yw-sch-roster-foot > * { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- dark -- */
[data-theme-root].dark :is(.yw-sch-rules-sec, .yw-sch-rules-more, .yw-sch-timeoff-item, .yw-sch-roster-group, .yw-sch-roster-foot, .yw-sch-roster-team) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-sch-rules-sec > form + form, .yw-sch-rules-list > li) { border-color: #16223a; }
[data-theme-root].dark :is(.yw-sch-rules-h, .yw-sch-rules-strong, .yw-sch-rules-name, .yw-sch-share-title, .yw-sch-roster-name, .yw-sch-roster-h, .yw-sch-roster-pay, .yw-sch-roster-stars, .yw-sch-roster-group, .yw-sch-roster-tick, .yw-sch-roster-limits) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-sch-rules-line, .yw-sch-rules-what, .yw-sch-share-cap, .yw-sch-timeoff-when, .yw-sch-roster-summary) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-sch-rules-cap, .yw-sch-rules-col, .yw-sch-share-url, .yw-sch-roster-sub, .yw-sch-roster-hint, .yw-sch-roster-quiet) { color: #a297ab; }
[data-theme-root].dark .yw-sch-roster-quiet:hover { color: #c3b9cc; }
[data-theme-root].dark .yw-sch-roster-stars > [data-off] { color: #2a3654; }
[data-theme-root].dark .yw-sch-roster-decide .hw-info-label { color: #c9b1ff; }
[data-theme-root].dark .yw-sch-share-qr { border-color: #1c2843; }
[data-theme-root].dark .yw-sch-share-act > button { border-color: #2a3a5c; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-sch-share-act > button:hover { border-color: #3a4c74; background: #16223a; }
[data-theme-root].dark .yw-sch-roster .yw-select.yw-sch-roster-select { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-sch-roster .yw-select.yw-sch-roster-select:hover { background: #142036; }
[data-theme-root].dark .yw-sch-roster .yw-select.yw-sch-roster-select[data-empty] { color: #a297ab; }
[data-theme-root].dark .yw-sch-roster .yw-select.yw-sch-roster-select[data-open] { border-color: #6d4fb0; }

/* Settings on the Dashboard's design (10/15, owner: "re design the settings
   tab with the new design style ... the header with the tab selector, and
   fonts and font sizes, buttons, containers ... no ai slop explainative
   text").

   The page root is .yw-settings-page (settings/page.tsx). This file holds the
   shared base every section wears; each section's own look lives beside it
   (settings-general.css, settings-targets.css, settings-connections.css,
   settings-people.css).

   The vocabulary, the same one the Floor's settings use:
     .yw-card + CardHead (kit)        one card per subject, title 19px/500
     .yw-set-rows / .yw-set-row       label left, value or control right,
                                      hairlines between (the Dashboard's rows)
     .yw-field / .yw-field-label      a labelled input (floor-settings.css)
     .yw-set-btn                      the one primary action of a card
     .yw-set-btn[data-variant=quiet]  an outlined secondary action
     .yw-set-link                     a text action ("Edit", "Invite")
     .yw-set-danger                   a destructive text action
     InfoDot                          any explanation, never a paragraph */

.yw-settings-page { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; color: #202024; font-family: var(--font-geist-sans), Geist, system-ui, sans-serif; font-size: 14px; letter-spacing: -.25px; }
.yw-settings-page :is(.font-bold, .font-extrabold, .font-black) { font-weight: 500; }
.yw-settings-page .font-semibold { font-weight: 500; }
.yw-settings-page .uppercase { color: #929097; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Rows: the Dashboard's label and value with a hairline between. */
.yw-set-rows { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.yw-set-row { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-set-row:first-child { border-top: 0; }
.yw-set-row-label { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: #59535f; font-size: 14px; }
.yw-set-row-sub { display: block; margin-top: 2px; color: #929097; font-size: 12px; }
.yw-set-row-value { min-width: 0; color: #202024; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.yw-set-row-value[data-quiet] { color: #929097; }
.yw-set-row-value[data-tone="ok"] { color: #279876; }
.yw-set-row-value[data-tone="warn"] { color: #b7791f; }
.yw-set-row-value[data-tone="bad"] { color: #c85f84; }

/* Actions. */
.yw-set-btn { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-set-btn:hover { background: #6d28d9; }
.yw-set-btn:disabled { opacity: .5; cursor: default; }
.yw-set-btn:is([data-variant="quiet"], .yw-set-btn-quiet) { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
.yw-set-btn:is([data-variant="quiet"], .yw-set-btn-quiet):hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-set-btn:focus-visible, .yw-set-link:focus-visible, .yw-set-danger:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-set-link { padding: 0; border: 0; background: none; color: #8553c2; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.yw-set-link:hover { text-decoration: underline; }
.yw-set-danger { padding: 0; border: 0; background: none; color: #c85f84; font: inherit; font-size: 13px; cursor: pointer; }
.yw-set-danger:hover { text-decoration: underline; }
.yw-set-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Cards in two columns on a wide screen, one on a narrow one. Each column
   is a stack (10/15, owner: "check every container is organized and in
   correct layout without those empty spaces"): a short card sits right under
   the one above it instead of waiting for the tall card beside it to end, so
   no row leaves a hole. A card never splits across the columns; [data-wide]
   spans both. */
.yw-set-grid { columns: 2; column-gap: 16px; }
.yw-set-grid > * { break-inside: avoid; }
.yw-set-grid > * + * { margin-top: 16px; }
.yw-set-grid > [data-wide] { column-span: all; margin-bottom: 16px; }
.yw-set-grid > [data-wide] + * { margin-top: 0; }
.yw-set-grid > [data-wide]:last-child, .yw-set-grid:has(> [data-fill]) > [data-wide] { margin-bottom: 0; }
@media (max-width: 900px) { .yw-set-grid { columns: 1; } }

/* A long list beside a shorter card ([data-fill]: Targets beside Expense
   flags, Channels beside Identity): the two end on one line and the list
   scrolls inside the height its neighbour sets (never shorter than a few
   rows), so neither card leaves a gap under it. */
.yw-set-grid:has(> [data-fill]) { display: grid; gap: 16px; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.yw-set-grid:has(> [data-fill]) > * + * { margin-top: 0; }
.yw-set-grid:has(> [data-fill]) > [data-wide] { grid-column: 1 / -1; }
.yw-set-grid > [data-fill] { display: flex; flex-direction: column; }
.yw-settings-page .yw-set-grid > [data-fill] > :is(.yw-set-groups, .yw-tasks-scroll) { flex: 1 1 0; min-height: 300px; max-height: none; }
@media (max-width: 900px) {
  .yw-set-grid:has(> [data-fill]) { grid-template-columns: minmax(0, 1fr); }
  .yw-settings-page .yw-set-grid > [data-fill] > :is(.yw-set-groups, .yw-tasks-scroll) { flex: none; max-height: min(62vh, 560px); }
}

/* A card that is only a question and its answers (the plan basis): the
   answers sit on the title line, not alone on a row of their own. */
.yw-settings-page .yw-card:has(> .yw-card-head + .yw-set-actions:last-child) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.yw-settings-page .yw-card:has(> .yw-card-head + .yw-set-actions:last-child) > .yw-set-actions { margin-top: 0; }

/* Dark theme. */
[data-theme-root].dark .yw-settings-page { color: #f3eef8; }
[data-theme-root].dark .yw-set-row { border-color: #34303c; }
[data-theme-root].dark .yw-set-row-label { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-set-row-value, .yw-set-btn[data-variant="quiet"]) { color: #f3eef8; }
[data-theme-root].dark .yw-set-btn:is([data-variant="quiet"], .yw-set-btn-quiet) { border-color: #3c3746; background: #26232c; color: #f3eef8; }
[data-theme-root].dark .yw-set-link { color: #c9b1ff; }

/* Long lists scroll inside their card (10/15, owner: "you are forgetting the
   integrated scroller on containers that get too long"): the Targets groups,
   the expense flags, booking and revenue sources, any list of rows. A short
   list never reaches the cap, so it looks the same. */
.yw-settings-page :is(.yw-set-groups, .yw-set-vars, .yw-card > .yw-set-rows, .yw-card > form > .yw-set-rows) { max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #dcd7e0 transparent; }
[data-theme-root].dark .yw-settings-page :is(.yw-set-groups, .yw-set-vars, .yw-card > .yw-set-rows, .yw-card > form > .yw-set-rows) { scrollbar-color: #4d4855 transparent; }

/* Settings, general and property (10/15): this section's own look on the
   shared base (settings.css). General is the account-panel.tsx cards; Property
   is PropertyControls.tsx, the cards settings/page.tsx renders under
   tab === "properties", sellable-rooms-card.tsx and rooms-card.tsx.

   What this file adds to the base:
     .yw-set-cols / .yw-set-col     two stacked columns of cards (General)
     .yw-set-fields                 the labelled inputs of a form (Field)
     .yw-set-input / .yw-set-select one box for a typed value or a pick
     .yw-set-inline                 a short form on one line inside a row
     .yw-set-line                   a card's one form line: the pick, then Save
     .yw-set-note                   one line after a save, or what is missing
     .yw-set-seg                    the light/dark switch
     .yw-set-scope                  the property switcher above the cards
     .yw-set-reveal                 a row that opens a short form under it
     .yw-set-disconnect             the quiet Disconnect at the foot of Property */

/* Two columns, each a stack of cards, so a tall card never leaves a hole. */
.yw-set-cols { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.yw-set-col { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .yw-set-cols { grid-template-columns: minmax(0, 1fr); } }

/* A form's labelled inputs. Field (ui-client) prints a label, a span and an
   input; these rules give them the Floor's field look. */
.yw-set-fields { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.yw-set-fields[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .yw-set-fields { grid-template-columns: minmax(0, 1fr); } }
.yw-set-fields label > span:first-child { display: block; color: #87818c; font-size: 12px; font-weight: 400; }
.yw-set-fields label input:not([type="hidden"]) { width: 100%; min-height: 34px; margin-top: 5px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; }
.yw-set-fields label input:not([type="hidden"]):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-set-form > [role="alert"], .yw-set-form > [role="status"] { margin-top: 10px; font-size: 13px; font-weight: 400; }
.yw-set-form + .yw-set-rows { margin-top: 10px; }
.yw-set-rows[data-foot] { margin-top: 14px; border-top: 1px solid #eae8ec; }

/* One box for a typed value or a pick. */
.yw-set-input { min-height: 34px; min-width: 0; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.yw-set-input[data-size="s"] { width: 84px; }
.yw-set-input[data-size="m"] { width: 150px; }
.yw-set-input[data-size="l"] { width: 100%; }
/* A quiet button for a component that takes only a className
   (DirtyPendingButton): the same look as .yw-set-btn[data-variant=quiet]. */
.yw-set-btn.yw-set-btn-quiet { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
.yw-set-btn.yw-set-btn-quiet:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-set-btn.yw-set-btn-quiet > span { border-color: #d5c4e6; border-top-color: #7c3aed; }
.yw-set-select { min-height: 34px; max-width: 100%; padding: 0 30px 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8595' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; color: #202024; font: inherit; font-size: 13px; appearance: none; cursor: pointer; }
:is(.yw-set-input, .yw-set-select):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-set-unit { position: relative; display: inline-flex; align-items: center; }
.yw-set-unit > .yw-set-input { padding-right: 24px; }
.yw-set-unit > span { position: absolute; right: 10px; color: #929097; font-size: 13px; pointer-events: none; }

/* A short form on one line inside a row (the box, then its Save). */
.yw-set-inline { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.yw-set-row-acts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.yw-set-row-acts > form { margin: 0; }
.yw-set-row[data-wrap] { flex-wrap: wrap; }
.yw-set-row-main { display: flex; min-width: 0; flex-direction: column; }

/* A card's one form line: the pick fills the width, Save sits after it. */
.yw-set-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.yw-set-line > .yw-set-select, .yw-set-line > .yw-set-input { flex: 1 1 220px; }

/* One line after a save, or a missing answer. Ink by default; the tone is the
   status it reports. */
.yw-set-note { margin: 10px 0 0; color: #59535f; font-size: 13px; line-height: 1.45; }
.yw-set-note[data-tone="ok"] { color: #279876; }
.yw-set-note[data-tone="warn"] { color: #b7791f; }
.yw-set-note[data-tone="bad"] { color: #c85f84; }

/* Light or dark. The pressed side is ink on a soft grey, never violet. */
.yw-set-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; }
.yw-set-seg > button { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: #87818c; font: inherit; font-size: 13px; cursor: pointer; transition: background .16s, color .16s; }
.yw-set-seg > button:hover { color: #202024; }
.yw-set-seg > button[aria-pressed="true"] { background: #f1eff3; color: #202024; }
.yw-set-seg > button:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-set-seg svg { width: 14px; height: 14px; }

/* The property switcher: the property's name (or a pick of them) and Add. */
.yw-set-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.yw-set-scope-name { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: #202024; font-size: 14px; font-weight: 500; }
.yw-set-scope-wait { color: #929097; font-size: 12px; font-weight: 400; }

/* A row that opens a short form under it (Replace key). */
.yw-set-reveal { border-top: 1px solid #eae8ec; }
.yw-set-reveal > summary { list-style: none; cursor: pointer; border-top: 0; }
.yw-set-reveal > summary::-webkit-details-marker { display: none; }
.yw-set-reveal[open] > summary .yw-set-btn { border-color: #d5c4e6; background: #f8f5fb; }
.yw-set-reveal-body { padding: 4px 0 14px; }

/* Your rooms: the roster scrolls inside its card. */
.yw-set-rooms-list { max-height: 420px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.yw-set-room { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-set-room:first-child { border-top: 0; }
.yw-set-room-no { min-width: 3.5rem; color: #202024; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.yw-set-room-type { min-width: 8rem; flex: 1 1 8rem; overflow: hidden; color: #59535f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.yw-set-room-fact { min-width: 6.5rem; color: #929097; font-size: 12px; font-variant-numeric: tabular-nums; }
.yw-set-room-why { min-width: 6rem; flex: 1 1 7rem; overflow: hidden; color: #929097; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-set-room-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.yw-set-tag { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #59535f; font: inherit; font-size: 12px; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-set-tag:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-set-tag[aria-pressed="true"] { border-color: #cfc9d6; background: #f1eff3; color: #202024; }

/* Rooms over time: a step per line. */
.yw-set-steps { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.yw-set-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #929097; font-size: 12px; }

/* Management fees: one line per managed property. */
.yw-set-fee { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; padding: 12px 0; border-top: 1px solid #eae8ec; }
.yw-set-fee:first-child { border-top: 0; }
.yw-set-fee-name { display: flex; min-width: 10rem; flex: 1 1 10rem; flex-direction: column; align-self: center; }
.yw-set-fee-title { color: #202024; font-size: 14px; font-weight: 500; }
.yw-set-input[data-upper] { text-transform: uppercase; }
.yw-set-fee .yw-field > input { width: 104px; }

/* Disconnect: quiet red words at the foot; it opens into a card. */
.yw-set-disconnect { align-self: flex-start; }
.yw-set-disconnect > summary { list-style: none; }
.yw-set-disconnect > summary::-webkit-details-marker { display: none; }
.yw-set-disconnect[open] { align-self: stretch; padding: 23px; border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; }
.yw-set-disconnect-body { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.yw-set-disconnect-body label { display: flex; align-items: flex-start; gap: 8px; color: #59535f; font-size: 13px; }
.yw-set-disconnect-body input[type="checkbox"] { margin-top: 3px; accent-color: #c85f84; }
.yw-set-disconnect-go { border: 1px solid #ecc6d5; background: #fff; color: #c85f84; }
.yw-set-disconnect-go:hover { border-color: #c85f84; background: #fdf3f7; }

/* Dark theme. */
[data-theme-root].dark .yw-set-fields label > span:first-child { color: #a297ab; }
[data-theme-root].dark :is(.yw-set-fields label input:not([type="hidden"]), .yw-set-input, .yw-set-select, .yw-set-seg, .yw-set-tag) { border-color: #1c2843; background-color: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-set-seg > button { color: #a297ab; }
[data-theme-root].dark .yw-set-seg > button[aria-pressed="true"], [data-theme-root].dark .yw-set-tag[aria-pressed="true"] { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-note, .yw-set-room-type, .yw-set-disconnect-body label) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-set-room-no, .yw-set-scope-name, .yw-set-fee-title) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-reveal, .yw-set-room, .yw-set-fee, .yw-set-rows[data-foot]) { border-color: #1c2843; }
[data-theme-root].dark .yw-set-disconnect[open] { border-color: #1c2843; background: #0d1527; }
[data-theme-root].dark .yw-set-disconnect-go { border-color: #4a3040; background: #0b1122; }
[data-theme-root].dark .yw-set-btn.yw-set-btn-quiet { border-color: #3c3746; background: #26232c; color: #f3eef8; }