/* Floor > the settings screens (10/14): People and task types, Labor setup,
   Inventory and Floor setup, from the Floor title menu's Settings.
   Owner: "after youa re finished with the previous task continue with
   these, remmeber no ai slop and new design style".

   They are built from the Tasks views' parts (floor.css: .yw-tasks-row,
   .yw-tasks-scroll, .yw-tasks-table, the tags and the text buttons) on the
   Dashboard's cards; this file is what a settings screen adds to them: the
   drawer shell, the quiet pill, a select and a money field in a table, the
   inline forms, and each screen's own layout. Values stay ink; the one violet
   is the action. Light rules first, the dark twins at the foot. */

/* ------------------------------------------------------- shared pieces -- */
/* The quiet pill: a secondary action on a card (Add person, Mark departed). */
.yw-crew-pill { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; min-height: 30px; margin: 0; padding: 0 12px; border: 1px solid #e3d9ee; border-radius: 9px; background: #fff; color: #7445a7; font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-crew-pill:hover { border-color: #d5c4e6; background: #f5f0fa; }
.yw-crew-pill:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
/* A plain sentence on a card: an empty state or a held-back reading. */
.yw-crew-note { margin: 12px 0 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-crew-empty { margin: 14px 0 4px; color: #87818c; font-size: 13px; }
/* A select inside a table row or a form line. */
.yw-crew-select { min-height: 30px; max-width: 100%; padding: 0 28px 0 10px; border: 1px solid #e2e1e4; border-radius: 9px; 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 9px center / 11px; color: #202024; font: inherit; font-size: 12.5px; appearance: none; cursor: pointer; }
.yw-crew-select:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
/* A button that cannot act yet says so. */
:is(.yw-tasks-btn, .yw-crew-pill):disabled { opacity: .45; cursor: not-allowed; }
/* A short form on one line: a label, a field, a quiet Save. */
.yw-crew-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: #59535f; font-size: 12px; }
.yw-crew-inline > label { display: inline-flex; align-items: center; gap: 8px; }
.yw-crew-inline input[type="number"] { width: 64px; min-height: 30px; padding: 0 8px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #202024; font: inherit; font-size: 12.5px; text-align: right; }
.yw-crew-inline input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
/* A dollar field: the sign inside the box. */
.yw-crew-money { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #87818c; font-size: 12.5px; }
.yw-crew-money input { width: 64px; padding: 0; border: 0; background: transparent; color: #202024; font: inherit; font-size: 13px; outline: none; }
.yw-crew-money:focus-within { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
/* A link inside a value ("Edit"). */
.yw-crew-edit { margin-left: 8px; color: #8553c2; font-size: 12px; font-weight: 500; text-decoration: none; }
.yw-crew-edit:hover { text-decoration: underline; }

/* The drawer (labor/setup-drawer.tsx Drawer): the roster, the time clock and
   the rest open as a card above the page, a round close at its corner. */
.yw-floor-drawer { position: relative; margin-top: 16px; border-color: #e3d6f6; box-shadow: 0 12px 34px rgba(58, 33, 68, .07); }
.yw-floor-drawer-close { display: inline-grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; border: 1px solid #e4e2e6; border-radius: 50%; color: #59535f; font-size: 19px; line-height: 1; text-decoration: none; transition: background .16s; }
.yw-floor-drawer-close:hover { background: #eeeeee; color: #202024; }
.yw-floor-drawer-body { margin-top: 12px; }

/* The black hover for a word that carries more (the evidence, the open work). */
.yw-crew-view .yw-crew-day[data-tip] { position: relative; }
.yw-crew-view .yw-crew-why .hw-info-label { color: inherit; font-size: inherit; }
.yw-crew-view .yw-crew-day[data-tip]::after { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; width: max-content; max-width: 300px; padding: 7px 10px; border: 1px solid var(--yw-tip-line, transparent); border-radius: 8px; background: var(--yw-tip-bg, #18181b); box-shadow: var(--yw-tip-shadow, none); color: var(--yw-tip-text, #e4e4e7); content: attr(data-tip); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .16s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.yw-crew-view .yw-crew-day[data-tip]::after { left: 50%; transform: translate(-50%, 4px); }
.yw-crew-view .yw-crew-day[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .1s; }

/* ---------------------------------------- People and task types (crew) -- */
/* The Team card and the task types down the page, Still on your list beside
   them in the Board's side column (sticky under the header), its people
   scrolling inside the card. */
.yw-crew-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
.yw-crew-layout > .yw-tasks-main > *, .yw-crew-layout > .yw-tasks-side > * { margin: 0; }
@media (max-width: 1100px) { .yw-crew-layout { grid-template-columns: minmax(0, 1fr); } }

.yw-crew-team { display: flex; flex-direction: column; }
.yw-crew-team-form { display: flex; flex: 1 1 auto; flex-direction: column; }
.yw-crew-table td { vertical-align: middle; }
.yw-crew-team-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-crew-team-foot .yw-crew-inline { color: #59535f; font-size: 13px; }

.yw-crew-gone { display: flex; flex-direction: column; }
.yw-crew-gone > .yw-tasks-scroll { max-height: calc(100vh - 330px); overflow-x: hidden; }
.yw-crew-band + .yw-crew-band { margin-top: 4px; }
.yw-crew-band-label { position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px 0 6px; background: #fbfbfb; color: #87818c; font-size: 11px; }
.yw-crew-people { margin: 0; padding: 0; list-style: none; }
.yw-crew-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #f0eef2; }
.yw-crew-person-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.yw-crew-name { color: #202024; font-size: 13.5px; font-weight: 500; }
.yw-crew-why { display: flex; flex-wrap: wrap; gap: 3px 10px; color: #87818c; font-size: 12px; }
.yw-crew-held { color: #202024; font-weight: 500; text-decoration: none; }
.yw-crew-held:hover { color: #7433d4; }
.yw-crew-person-acts { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.yw-crew-person-acts form { margin: 0; }
/* In the side column a person stacks: the name, the fact, then the answers. */
.yw-tasks-side .yw-crew-person { flex-direction: column; align-items: flex-start; gap: 9px; }
.yw-crew-gone-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eae8ec; color: #87818c; font-size: 12px; }
.yw-crew-departed { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; color: #87818c; font-size: 12px; }
.yw-crew-departed form { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; }

.yw-crew-search { width: min(260px, 100%); }

/* One person: the closes as the hero figure, the days as striped bars. */
.yw-crew-who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; margin-top: 4px; }
.yw-crew-who-figures { display: flex; min-width: 0; flex-direction: column; }
.yw-crew-who .yw-hero-value { margin: 16px 0 6px; font-size: clamp(36px, 3.2vw, 46px); }
.yw-crew-who .yw-row-stats { margin-top: 14px; }
.yw-crew-who .yw-row-stat { padding: 8px 0; font-size: 13px; }
.yw-crew-who .yw-row-stat dd { font-size: 14px; text-align: right; }
.yw-crew-who-days { display: flex; min-width: 0; flex-direction: column; }
.yw-crew-days { display: flex; align-items: flex-end; gap: 3px; height: 128px; margin-top: 26px; }
.yw-crew-day { display: flex; height: 100%; min-width: 0; flex: 1 1 0; align-items: flex-end; }
.yw-crew-day > span { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: repeating-linear-gradient(125deg, #ae89e9 0 1.8px, #ece4fc 1.8px 4px); transform-origin: bottom; animation: yw-bar-in 1s both; animation-delay: calc(var(--yw-bar-i, 0) * 12ms); transition: filter .16s; }
.yw-crew-day[data-off] > span { height: 2px; background: #e8e5ec; animation: none; }
.yw-crew-day:hover > span { filter: saturate(1.5); }
.yw-crew-days-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: #a6a0ab; font-size: 10px; }
.yw-crew-who-days > .yw-row-stats { margin-top: 18px; }
.yw-crew-who-open { margin-top: 20px; padding-top: 4px; border-top: 1px solid #eae8ec; }
@media (max-width: 900px) { .yw-crew-who-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------ Labor setup (setup-view.tsx) -- */
/* Two columns: what is waiting down the main one, the settings down the side
   (SETUP_CARDS is that reading order). */
.yw-lsetup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); gap: 16px; align-items: start; margin-top: 16px; }
.yw-lsetup-main, .yw-lsetup-side { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-lsetup :is(.yw-lsetup-main, .yw-lsetup-side) > section { margin: 0; }
@media (max-width: 1100px) { .yw-lsetup { grid-template-columns: minmax(0, 1fr); } }

/* Setup health: the Dashboard's Needs you rows. The mark's colour is the
   state: pink waiting on you, amber on its way, green set. */
.yw-lsetup-needs { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-lsetup-need { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #eae8ec; }
.yw-lsetup-need:first-child { border-top: 0; }
.yw-lsetup-mark { display: inline-grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fbe4ee; color: #c85f84; }
.yw-lsetup-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yw-lsetup-mark[data-pace="watch"] { background: #fbf0de; color: #9a805f; }
.yw-lsetup-mark[data-pace="clear"] { background: #e2f1eb; color: #2f8a6d; }
.yw-lsetup-need-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; }
.yw-lsetup-need-title { color: #202024; font-size: 14px; font-weight: 500; line-height: 1.35; }
.yw-lsetup-need-label { margin-right: 8px; color: #87818c; font-weight: 400; }
.yw-lsetup-need-detail { color: #87818c; font-size: 12px; line-height: 1.45; }
.yw-lsetup-need[data-tone="ok"] .yw-lsetup-need-title { font-weight: 400; }

/* Work types: the words scroll inside the card, two across; Save under them. */
.yw-wt-form { display: flex; flex-direction: column; }
.yw-wt-scope + .yw-wt-scope { margin-top: 4px; }
.yw-wt-rows { margin: 0; padding: 0; list-style: none; }
.yw-wt-rows[data-cols="2"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.yw-wt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0eef2; }
.yw-wt-word { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-wt-name { overflow: hidden; color: #202024; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-wt-word .yw-tasks-tag { margin-left: 0; white-space: normal; }
.yw-wt-auto { color: #7433d4; }
.yw-wt-pick { flex-shrink: 0; }
.yw-wt-pick .yw-crew-select { width: 168px; }
.yw-wt-foot { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #eae8ec; }
@media (max-width: 760px) { .yw-wt-rows[data-cols="2"] { grid-template-columns: minmax(0, 1fr); } }

/* People and tools: one row a door, the mark, the name, a chevron. */
.yw-lsetup-doors { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-lsetup-doors > li + li { border-top: 1px solid #eae8ec; }
.yw-lsetup-door { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 10px 8px; border-radius: 12px; color: #202024; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .16s; }
.yw-lsetup-door:hover { background: #f6f2fd; }
.yw-lsetup-door[aria-current] { background: #f1ecfb; color: #7433d4; }
.yw-lsetup-door .yw-lsetup-mark { width: 32px; height: 32px; background: #f1ecfb; color: #7c3aed; }
.yw-lsetup-door-name { min-width: 0; flex: 1 1 auto; }
.yw-lsetup-door-count { color: #87818c; font-size: 13px; font-weight: 400; }
.yw-lsetup-chevron { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: #b0aab5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yw-lsetup-door[data-tip]::after { position: absolute; top: calc(100% - 4px); left: 52px; z-index: 30; width: max-content; max-width: 260px; padding: 7px 10px; border: 1px solid var(--yw-tip-line, transparent); border-radius: 8px; background: var(--yw-tip-bg, #18181b); box-shadow: var(--yw-tip-shadow, none); color: var(--yw-tip-text, #e4e4e7); content: attr(data-tip); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .16s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.yw-lsetup-door[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: .35s; }
.yw-lsetup-board { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #eae8ec; color: #202024; font-size: 14px; font-weight: 500; }

/* Plan settings: one field a row, the label left, the box right. */
.yw-lsetup-form { display: flex; flex-direction: column; margin-top: 6px; }
.yw-lsetup-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #eae8ec; color: #59535f; font-size: 13px; }
.yw-lsetup-form > .yw-lsetup-field:first-of-type, .yw-lsetup-group + .yw-lsetup-field { border-top: 0; }
.yw-lsetup-field > input:not([type="hidden"]) { width: 84px; min-height: 32px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #202024; font: inherit; font-size: 13px; text-align: right; }
.yw-lsetup-field > input[data-wide] { width: min(190px, 56%); text-align: left; }
.yw-lsetup-field > input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-lsetup-group { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #eae8ec; color: #202024; font-size: 13px; font-weight: 500; }
.yw-lsetup-confirm { margin-top: 12px; }
.yw-lsetup-form-foot { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eae8ec; }

/* Recent uploads and Labor routines: hairline rows. */
.yw-lsetup-uploads, .yw-lsetup-routines { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-lsetup-uploads > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #eae8ec; font-size: 12.5px; line-height: 1.45; }
.yw-lsetup-uploads > li:first-child, .yw-lsetup-routines > li:first-child { border-top: 0; }
.yw-lsetup-upload-day { color: #202024; font-weight: 500; }
.yw-lsetup-upload-line { min-width: 0; color: #59535f; overflow-wrap: anywhere; }
.yw-lsetup-upload-line .yw-tasks-tag { margin-left: 6px; }
.yw-lsetup-routines > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #eae8ec; }
.yw-lsetup-routine { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-lsetup-routine-name { color: #202024; font-size: 13.5px; font-weight: 500; }
.yw-lsetup-routine-does { color: #87818c; font-size: 12px; line-height: 1.4; }

/* The upload button: the one violet action, a file box under it. */
.yw-lsetup-upload { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; }
.yw-lsetup-upload[data-drag] { background: #6d28d9; box-shadow: 0 0 0 3px rgba(124, 58, 237, .22); }

/* Labor setup's sections (10/14): one section on screen, a main column and a
   side column each; a section with one card takes the width. */
.yw-lsetup[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }

/* Work types: the filter is the quiet segmented control in the head. */
.yw-tasks-seg > a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 9px; color: #6f6975; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .16s, color .16s; }
.yw-tasks-seg > a:hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-tasks-seg > a[aria-current] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-tasks-seg > a .num { color: #8f8996; font-weight: 400; }
.yw-wt-pick .yw-select { width: 182px; }
.yw-crew-table .yw-select { width: 210px; }

/* By kind: the share of task rows sorted as the hero figure and track, then a
   bar a kind, the undecided ones last and pink. */
.yw-wt-kinds { display: flex; flex-direction: column; }
.yw-wt-kinds .yw-hero-value.yw-wt-kinds-value { margin: 16px 0 10px; font-size: clamp(34px, 3vw, 44px); }
.yw-wt-kinds .yw-track-labels { margin-bottom: 8px; }
.yw-wt-kind-rows { margin: 4px 0 0; padding: 0; list-style: none; }
.yw-wt-kind-rows > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 1.1fr) 34px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #eae8ec; font-size: 13px; cursor: default; }
.yw-wt-kind-name { min-width: 0; overflow: hidden; color: #202024; text-overflow: ellipsis; white-space: nowrap; }
.yw-wt-kind-bar { display: block; height: 9px; overflow: hidden; border-radius: 5px; background: #f0edf2; }
.yw-wt-kind-bar > i { display: block; height: 100%; border-radius: 5px; background: repeating-linear-gradient(125deg, #9161df 0 2px, #dcccfa 2px 4px); transform-origin: left; animation: yw-scale-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.yw-wt-kind-rows > li[data-undecided] .yw-wt-kind-bar > i { background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f9dce9 2px 4px); }
.yw-wt-kind-count { color: #202024; font-weight: 500; text-align: right; }
.yw-wt-kind-rows > li[data-tip]::after { position: absolute; bottom: calc(100% - 2px); left: 0; z-index: 30; width: max-content; max-width: 260px; padding: 7px 10px; border: 1px solid var(--yw-tip-line, transparent); border-radius: 8px; background: var(--yw-tip-bg, #18181b); box-shadow: var(--yw-tip-shadow, none); color: var(--yw-tip-text, #e4e4e7); content: attr(data-tip); font-size: 12px; line-height: 1.4; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .16s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.yw-wt-kind-rows > li[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: .2s; }

/* Hours source: the answer as the lead line, the upload beside it. */
.yw-lsetup-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; }
.yw-lsetup-now-line { min-width: 0; flex: 1 1 260px; margin: 0; color: #59535f; font-size: 14px; line-height: 1.5; }
.yw-lsetup-strong { color: #202024; font-weight: 500; }
.yw-lsetup-late { display: block; margin-top: 4px; color: #a96883; font-size: 13px; }
.yw-lsetup-ask { margin-top: 12px; }
.yw-lsetup-ask > .yw-lsetup-now-line { margin-bottom: 6px; }
.yw-lsetup-open { margin-top: 18px; padding-top: 6px; border-top: 1px solid #eae8ec; }
.yw-lsetup-howto { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eae8ec; font-size: 13px; }
/* Each way hours arrive: a switch row. */
.yw-lsetup-hours-form { display: flex; flex-direction: column; }
.yw-lsetup-sources { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-lsetup-sources > li + li { border-top: 1px solid #eae8ec; }
.yw-lsetup-source { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; cursor: pointer; }
.yw-lsetup-source > .yw-switch { margin-top: 2px; }
.yw-lsetup-source-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.yw-lsetup-source-name { color: #202024; font-size: 14px; font-weight: 500; }
.yw-lsetup-source-blurb { color: #87818c; font-size: 12px; line-height: 1.45; }
.yw-lsetup-picks { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 10px; padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-lsetup-pick { display: flex; flex-direction: column; gap: 6px; color: #87818c; font-size: 12px; }
.yw-lsetup-pick .yw-select { min-width: 200px; }
.yw-lsetup-foot-note { margin-right: auto; color: #87818c; font-size: 12px; }
.yw-lsetup-form-foot:has(.yw-lsetup-foot-note) { align-items: center; justify-content: space-between; gap: 12px; }

/* Names and checks: one row a name, its facts under it, the pick and the
   answer on the right; the checks card leads with the dollars not cleared. */
.yw-lsetup-match-group { margin-top: 4px; }
.yw-lsetup-matches { margin: 0; padding: 0; list-style: none; }
.yw-lsetup-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-top: 1px solid #eae8ec; }
.yw-lsetup-match-group > .yw-lsetup-matches > :first-child, .yw-card > .yw-lsetup-matches > :first-child { border-top: 0; }
.yw-lsetup-match-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.yw-lsetup-match-name { margin: 0; color: #202024; font-size: 14px; font-weight: 500; }
.yw-lsetup-match-facts { margin: 0; color: #87818c; font-size: 12px; }
.yw-lsetup-match-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.yw-lsetup-match-acts form, .yw-lsetup-match-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.yw-lsetup-match-acts .yw-select { min-width: 190px; }
.yw-lsetup-checks .yw-hero-value.yw-lsetup-figure { margin: 16px 0 8px; font-size: clamp(32px, 2.8vw, 42px); }
.yw-lsetup-checks .yw-lsetup-match-group { margin-top: 14px; }
.yw-lsetup-check { padding: 12px 0; border-top: 1px solid #eae8ec; }
.yw-lsetup-check-rows { margin: 8px 0 0; padding: 0; list-style: none; }
.yw-lsetup-check-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; color: #59535f; font-size: 12.5px; }

/* A finger needs 44 px: on a phone the settings controls grow to it. */
@media (max-width: 640px) {
  :is(.yw-crew-pill, .yw-tasks-text-btn, .yw-select, .yw-tasks-btn) { min-height: 44px; }
}

/* ----------------------------------------- Inventory (inventory-tab.tsx) -- */
/* Short opens on three cards, the Dashboard Overview's columns: the short
   count as the hero, the departments as bars, the orders; the list under
   them. */
.yw-inv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 16px; align-items: stretch; }
.yw-inv-top > section, .yw-inv-stack > section { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.yw-inv-stack > .yw-inv-orders:last-child { flex: 1 1 auto; }
@media (max-width: 900px) { .yw-inv-top { grid-template-columns: minmax(0, 1fr); } }
.yw-inv-hero .yw-track { margin-top: 16px; }
.yw-inv-hero .yw-row-stats { display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 12px; }
.yw-inv-hero .yw-row-stats > .yw-row-stat { flex: 1 1 auto; align-items: center; }

/* By department: one bar a department, the short part pink over it. */
.yw-inv-dept-rows { display: flex; flex: 1 1 auto; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; }
.yw-inv-dept-rows > li { border-top: 1px solid #eae8ec; }
.yw-inv-dept-rows > li:first-child { border-top: 0; }
.yw-inv-dept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) 30px 76px; align-items: center; gap: 10px; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; color: inherit; font-size: 13px; text-decoration: none; transition: background .16s; }
.yw-inv-dept:hover { background: #f6f2fd; }
.yw-inv-dept[aria-current] { background: #f1ecfb; }
.yw-inv-dept-name { overflow: hidden; color: #202024; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-inv-dept-bar { position: relative; display: block; height: 9px; overflow: hidden; border-radius: 5px; background: #f0edf2; }
.yw-inv-dept-bar > i, .yw-inv-dept-bar > b { position: absolute; inset: 0 auto 0 0; border-radius: 5px; transform-origin: left; animation: yw-scale-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.yw-inv-dept-bar > i { background: repeating-linear-gradient(125deg, #9161df 0 2px, #dcccfa 2px 4px); }
.yw-inv-dept-bar > b { background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f9dce9 2px 4px); }
.yw-inv-dept-count { color: #202024; font-weight: 500; text-align: right; }
.yw-inv-dept-short { color: #87818c; font-size: 12px; text-align: right; white-space: nowrap; }

/* Orders: one row an order, its status as a word, its next step. */
.yw-inv-order-rows { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-inv-order-rows > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 11px 0; border-top: 1px solid #eae8ec; }
.yw-inv-order-rows > li:first-child { border-top: 0; }
.yw-inv-order-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-inv-order-title { color: #202024; font-size: 13.5px; font-weight: 500; }
.yw-inv-order-status { margin-left: 8px; color: #87818c; font-size: 11px; font-weight: 400; }
.yw-inv-order-status[data-status="approved"] { color: #7433d4; }
.yw-inv-order-status[data-status="received"] { color: #2f8a6d; }
.yw-inv-order-lines { color: #87818c; font-size: 12px; }
.yw-inv-order-acts { display: flex; align-items: center; gap: 8px; }
.yw-inv-order-acts form { margin: 0; }

/* The short list: the gap as a short pink bar beside its words. */
.yw-inv-gap { display: inline-flex; align-items: center; gap: 10px; }
.yw-inv-gap-bar { display: inline-block; width: 64px; height: 7px; overflow: hidden; border-radius: 4px; background: #f0edf2; }
.yw-inv-gap-bar > i { display: block; height: 100%; border-radius: 4px; background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f9dce9 2px 4px); }

/* All items and Count: a folder a group, an item a row. */
.yw-inv-list > .yw-inv-folder { margin-top: 6px; }
.yw-inv-folder[data-depth] { margin-left: 18px; padding-left: 14px; border-left: 1px solid #eae8ec; }
.yw-inv-folder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yw-inv-items { margin: 0; padding: 0; list-style: none; }
.yw-inv-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 0; border-top: 1px solid #f0eef2; font-size: 13px; }
.yw-inv-item:first-child { border-top: 0; }
.yw-inv-item-name { min-width: 0; flex: 1 1 200px; color: #202024; font-weight: 500; }
.yw-inv-item-figures { display: inline-flex; align-items: baseline; gap: 14px; color: #202024; }
.yw-inv-item-par { min-width: 46px; color: #a59fab; font-size: 12px; }
.yw-inv-item-state { min-width: 78px; color: #87818c; font-size: 12px; text-align: right; }
.yw-inv-item-state[data-tone="short"] { color: #202024; font-weight: 500; }
.yw-inv-item-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
.yw-inv-move { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.yw-inv-input { width: 76px; min-height: 30px; padding: 0 9px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #202024; font: inherit; font-size: 12.5px; }
.yw-inv-input[data-wide] { width: 180px; }
.yw-inv-input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-inv-edit, .yw-inv-add { font-size: 12px; }
.yw-inv-edit > summary, .yw-inv-add > summary { color: #8553c2; font-weight: 500; list-style: none; cursor: pointer; }
.yw-inv-edit > summary::-webkit-details-marker, .yw-inv-add > summary::-webkit-details-marker { display: none; }
.yw-inv-edit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.yw-inv-add { margin: 8px 0 4px; padding-top: 10px; border-top: 1px dashed #e6e3ea; }

/* ------------------------- Inventory > Catalog and To order (10/14) -- */
/* A photo card per product: the photo is the way a housekeeper finds it;
   name, supplier and price under it; one Running low button. */
.yw-cat-search { display: flex; gap: 8px; margin: 12px 0 10px; }
.yw-cat-search-input { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 14px; border: 1px solid #e2e1e4; border-radius: 11px; background: #fff; color: #202024; font: inherit; font-size: 14px; }
.yw-cat-search-input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.yw-cat-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid #ebe8ef; border-radius: 999px; background: #fff; color: #5d5763; font-size: 12px; text-decoration: none; white-space: nowrap; }
.yw-cat-chip[data-kind="supplier"] { color: #6d4aa0; }
.yw-cat-chip[aria-current="true"] { border-color: #b993ff; background: #f3ecff; color: #4d2a85; font-weight: 500; }
.yw-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.yw-cat-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #eeebf1; border-radius: 14px; background: #fff; }
.yw-cat-card[data-short] { border-color: #f1c9dd; }
.yw-cat-photo { display: flex; aspect-ratio: 4 / 3; align-items: center; justify-content: center; overflow: hidden; background: #f6f4f8; }
.yw-cat-photo img { width: 100%; height: 100%; object-fit: contain; }
.yw-cat-photo-empty { color: #c7bfd0; font-size: 34px; font-weight: 600; }
.yw-cat-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 10px 12px 4px; }
.yw-cat-name { overflow: hidden; color: #202024; font-size: 13.5px; font-weight: 500; line-height: 1.3; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.yw-cat-meta, .yw-cat-areas { overflow: hidden; color: #87818c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-cat-stock { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #202024; font-size: 12.5px; }
.yw-cat-stock[data-tone="short"] { color: #b2336f; font-weight: 500; }
.yw-cat-stock[data-tone="muted"] { color: #87818c; }
.yw-cat-bar { display: inline-block; width: 54px; height: 6px; overflow: hidden; border-radius: 4px; background: #f0edf2; }
.yw-cat-bar > i { display: block; height: 100%; border-radius: 4px; background: #ae89e9; }
.yw-cat-card[data-short] .yw-cat-bar > i { background: #d65e9e; }
.yw-cat-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 12px; }
.yw-cat-acts form { margin: 0; }
.yw-cat-acts .yw-crew-pill[data-on] { border-color: #b993ff; background: #f3ecff; color: #4d2a85; }
.yw-cat-flash { margin: 0 0 12px; padding: 10px 14px; border-radius: 11px; background: #f3ecff; color: #4d2a85; }
.yw-cat-detail-grid { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 18px; margin-top: 10px; }
.yw-cat-detail-photo { display: flex; aspect-ratio: 1; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: #f6f4f8; }
.yw-cat-detail-photo img { width: 100%; height: 100%; object-fit: contain; }
.yw-cat-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; }
.yw-cat-form > label { display: flex; flex-direction: column; gap: 4px; color: #87818c; font-size: 11.5px; }
.yw-cat-form > label.yw-switch-row { flex-direction: row; align-items: center; }
.yw-cat-queue-group { margin-top: 14px; }
.yw-cat-queue-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.yw-cat-queue-head form { margin: 0 0 0 auto; }
.yw-cat-queue-cost { color: #202024; font-size: 13px; font-weight: 500; }
.yw-cat-import { margin-top: 16px; }
.yw-cat-detail, .yw-dir-detail { margin-bottom: 16px; }

/* ------------------------------- Floor > Vendors and Contacts (10/14) -- */
.yw-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.yw-dir-card { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid #eeebf1; border-radius: 14px; background: #fff; }
.yw-dir-name { color: #202024; font-size: 14px; font-weight: 500; text-decoration: none; }
a.yw-dir-name:hover { color: #7445a7; }
.yw-dir-meta { color: #87818c; font-size: 12px; }
.yw-dir-acct { color: #202024; font-size: 12.5px; }
.yw-dir-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font-size: 12.5px; }
.yw-dir-call { color: #7445a7; font-weight: 500; text-decoration: none; }
.yw-dir-person { color: #3b3640; }
.yw-dir-rows { margin: 4px 0 12px; padding: 0; list-style: none; }
.yw-dir-rows > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 8px 0; border-top: 1px solid #f0eef2; font-size: 13px; }
.yw-dir-rows > li:first-child { border-top: 0; }
.yw-dir-edit { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eeebf1; }
@media (max-width: 640px) {
  .yw-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .yw-cat-detail-grid { grid-template-columns: 1fr; }
  .yw-cat-acts { flex-direction: column; align-items: stretch; }
  .yw-cat-acts .yw-crew-pill { width: 100%; }
  .yw-dir-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------- Floor setup (setup.tsx) -- */
/* The standing setup in sections (lib/floor/setup-sections.ts): each step a
   card whose head says set or not yet, its form under it on the Money root
   so the older markup reads in the new type. */
.yw-fsetup-body { margin-top: 14px; }
.yw-fsetup-body > :first-child { margin-top: 0; }
/* The step forms were written for the old centred column: in a card they
   start at its edge and take its width. */
.yw-fsetup-body > .mx-auto { max-width: none; margin-right: 0; margin-left: 0; }
.yw-fsetup-state { color: #a96883; }
.yw-fsetup-state[data-done] { color: #2f8a6d; }
.yw-fsetup-sub { margin-top: 20px; padding-top: 6px; border-top: 1px solid #eae8ec; }
/* A dropdown sits under its label the way a box does (the setup forms'
   labelled fields), and takes the field's width. */
.yw-fsetup label > .relative.inline-block:has(> .yw-select) { display: block; margin-top: 4px; }
.yw-fsetup label > .relative.inline-block > .yw-select { width: 100%; }
.yw-fsetup .yw-card + .yw-card { margin-top: 0; }

/* Task lanes: the settings as rows, the two lanes as figures on quiet tinted
   panels, the day-by-day table scrolling in the card. */
.yw-lanes { display: flex; flex-direction: column; gap: 10px; }
.yw-lanes > .yw-stat-cols { margin-top: 4px; }
.yw-lanes .yw-lsetup-form-foot > .yw-lsetup-foot-note { margin-right: auto; }
.yw-lanes .yw-lsetup-form-foot > form { margin: 0; }
.yw-lanes-verdict { margin: 0; color: #59535f; font-size: 13px; }
.yw-lanes-verdict[data-ok] { color: #202024; font-weight: 500; }

/* ----------------------------------------- Roster (roster-drawer.tsx) -- */
/* The roster table (the Tasks views' table, states as quiet words), the
   availability grid with a tick box a day, and the Add or Edit form in four
   groups. Opened from People and task types and Labor setup. */
.yw-roster { display: flex; flex-direction: column; gap: 12px; }
.yw-roster-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; color: #59535f; font-size: 13px; }
.yw-roster-word { color: #87818c; font-size: 12px; }
.yw-roster-word[data-tone="ask"] { color: #a96883; }
.yw-roster-person { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-roster-sub { color: #87818c; font-size: 12px; white-space: nowrap; }
.yw-roster-table tr[data-inactive] td { opacity: .55; }
.yw-roster-rate { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yw-roster-decide { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12px; }
.yw-roster-decide form { margin: 0; }
.yw-roster-decide .hw-info-label { color: #8553c2; font-size: 12px; }
.yw-crew-pill.yw-roster-pill { min-height: 26px; padding: 0 10px; font-size: 11.5px; }
.yw-roster-stars { color: #202024; letter-spacing: 1px; }
.yw-roster-stars > [data-off] { color: #dcd7e0; }
.yw-roster-acts { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.yw-roster-acts form { margin: 0; }
.yw-tasks-text-btn[data-quiet] { color: #87818c; }
.yw-tasks-text-btn[data-quiet]:hover { color: #59535f; }
.yw-roster-add, .yw-roster-avail { margin-top: 4px; padding-top: 16px; border-top: 1px solid #eae8ec; }
.yw-roster-add-title { margin: 0 0 6px; color: #202024; font-size: 16px; font-weight: 500; letter-spacing: -.3px; }
.yw-roster-add-title .hw-info-label { color: inherit; font-size: inherit; }
.yw-roster-form { display: flex; flex-direction: column; }
.yw-roster-form > .yw-crew-band-label { position: static; margin-top: 18px; padding: 4px 0 8px; background: none; color: #202024; font-size: 13px; font-weight: 500; }
.yw-roster-form > .yw-crew-band-label:first-of-type { margin-top: 4px; }
.yw-roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.yw-roster-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.yw-roster-limits { color: #202024; font-size: 13px; }
.yw-lsetup-form-foot > .yw-roster-cancel { margin-right: auto; text-decoration: none; }
/* A labelled field: the label over the control, the control at its width. */
.yw-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #87818c; font-size: 12px; }
.yw-field[data-span="2"] { grid-column: span 2; }
.yw-field[data-span="3"] { grid-column: 1 / -1; }
.yw-field-label .hw-info-label { color: inherit; font-size: inherit; }
.yw-field > :is(input:not([type="checkbox"]):not([type="hidden"]), textarea) { width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; }
.yw-field > textarea { min-height: 64px; padding: 8px 10px; resize: vertical; }
.yw-field > :is(input, textarea):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-field > .relative.inline-block { display: block; }
.yw-field > .relative.inline-block > .yw-select { width: 100%; }
.yw-field-hint { color: #a59fab; font-size: 11px; }
/* Days and roles as chips: tick one and it fills. */
.yw-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.yw-chip-check { position: relative; display: inline-flex; cursor: pointer; }
.yw-chip-check > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.yw-chip-check > span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #59535f; font-size: 12px; transition: background .16s, border-color .16s, color .16s; }
.yw-chip-check:hover > span { border-color: #d5c4e6; }
.yw-chip-check > input:checked + span { border-color: #cdb4f6; background: #f1ecfb; color: #7433d4; font-weight: 500; }
.yw-chip-check > input:focus-visible + span { outline: 2px solid #b993ff; outline-offset: 2px; }
/* The availability grid: a tick box a day, the weekend days shaded. */
.yw-avail-table :is(th, td)[data-day] { width: 40px; text-align: center; }
.yw-avail-table td[data-weekend] { background: #f8f6fa; }
.yw-tick { width: 22px; height: 22px; margin: 0; border: 1px solid #d9d5de; border-radius: 7px; background: #fff; appearance: none; vertical-align: middle; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-tick:hover { border-color: #cdb4f6; }
.yw-tick:checked { border-color: #7c3aed; background: #7c3aed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 13px; }
.yw-tick:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
@media (max-width: 760px) {
  .yw-roster-grid { grid-template-columns: minmax(0, 1fr); }
  .yw-roster-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------- Time clock (clock-drawer.tsx) -- */
/* The stat columns and the punch table on the left; the staff link and the
   hours export on the right behind a hairline. One column on a phone. */
.yw-clock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 22px; align-items: start; }
.yw-clock-main { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.yw-clock-side { display: flex; min-width: 0; flex-direction: column; gap: 20px; padding-left: 22px; border-left: 1px solid #eae8ec; }
.yw-clock-block { margin: 0; }
.yw-clock-block > .yw-row-stats { margin-top: 2px; }
.yw-clock-link { color: #8553c2; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.yw-clock-link:hover { color: #6d3fb0; text-decoration: underline; }
.yw-clock-at { color: #59535f; white-space: nowrap; }
.yw-clock-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.yw-clock-dates .yw-field > input { padding: 0 8px; }
.yw-clock-lead { margin: 2px 0 0; color: #202024; font-size: 19px; font-weight: 500; letter-spacing: -.4px; }
.yw-clock-steps { display: flex; flex-direction: column; margin: 12px 0 0; padding: 0; list-style: none; }
.yw-clock-steps > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eae8ec; color: #59535f; font-size: 13px; }
.yw-clock-steps > li > .num { display: inline-grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f1ecfb; color: #7433d4; font-size: 12px; font-weight: 500; }
.yw-clock-steps a { color: #8553c2; text-decoration: none; }
.yw-clock-steps a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .yw-clock { grid-template-columns: minmax(0, 1fr); }
  .yw-clock-side { padding-top: 16px; padding-left: 0; border-top: 1px solid #eae8ec; border-left: 0; }
}
/* ------------------------------- Floor setup steps (floor/setup/*-step.tsx) -- */
/* The five step forms on Labor setup's form rows: groups with a quiet
   heading, label left and control right, whose number it is as a word
   beside it, two columns where the card is wide, one Save at the foot. */
.yw-sstep { display: flex; min-width: 0; flex-direction: column; }
.yw-sstep > form { margin: 0; }
.yw-sstep-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
.yw-sstep-cols > .yw-lsetup-form { margin-top: 0; }
.yw-lsetup-group[data-first] { margin-top: 0; padding-top: 0; border-top: 0; }
.yw-lsetup-group .hw-info-label { color: inherit; font-size: inherit; font-weight: inherit; }
.yw-sstep-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; }
.yw-sstep-tag { color: #87818c; font-size: 12px; font-weight: 400; white-space: nowrap; }
.yw-sstep-tag[data-tone="ask"] { color: #a96883; }
.yw-sstep-tag[data-tone="good"] { color: #2f8a6d; }
.yw-sstep-label { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yw-sstep-label .hw-info-label { color: inherit; font-size: inherit; }
.yw-sstep-value { color: #202024; font-size: 13px; text-align: right; }
.yw-sstep-value[data-quiet] { color: #87818c; }
.yw-sstep-value .hw-info-label { color: inherit; font-size: inherit; }
.yw-sstep-ctl { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; }
.yw-sstep-ctl > .yw-sstep-tag { min-width: 58px; }
.yw-sstep-ctl > input:not([type="hidden"]) { width: 84px; min-height: 32px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #202024; font: inherit; font-size: 13px; text-align: right; }
.yw-sstep-ctl > input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
:is(.yw-lsetup-field, .yw-sstep-ctl) > input:is([type="time"], [type="date"]) { width: 128px; text-align: left; }
.yw-sstep-ctl > input[data-wide] { width: min(220px, 52vw); text-align: left; }
.yw-fsetup .yw-lsetup-field > .relative.inline-block:has(> .yw-select) { display: inline-block; margin-top: 0; }
.yw-fsetup .yw-lsetup-field > .relative.inline-block > .yw-select { width: auto; }
.yw-sstep-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; padding: 0; list-style: none; }
.yw-sstep-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid #e2e1e4; border-radius: 9px; background: #fff; color: #59535f; font-size: 12px; }
.yw-sstep-chip[data-own] { border-color: #cdb4f6; background: #f1ecfb; color: #7433d4; font-weight: 500; }
.yw-radio { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid #d9d5de; border-radius: 50%; background: #fff; appearance: none; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.yw-radio:hover { border-color: #cdb4f6; }
.yw-radio:checked { border-color: #7c3aed; box-shadow: inset 0 0 0 4px #fff; background: #7c3aed; }
.yw-radio:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-sstep-app { display: flex; flex-direction: column; gap: 12px; }
.yw-sstep-mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid #eae8ec; color: #202024; font-size: 13px; font-weight: 500; }
.yw-sstep-mail .hw-info-label { color: inherit; font-size: inherit; }
@media (max-width: 900px) {
  .yw-sstep-cols { grid-template-columns: minmax(0, 1fr); }
  .yw-sstep-cols > .yw-lsetup-form + .yw-lsetup-form { margin-top: 16px; }
}
/* The step forms' shared lines: the lead figure, a done line, a row of
   actions, a full-width box, the foot with a quiet skip on the left. */
.yw-sstep-lead { margin: 0 0 12px; color: #59535f; font-size: 14px; }
.yw-sstep-lead > .num { color: #202024; font-size: 19px; font-weight: 500; letter-spacing: -.3px; }
.yw-sstep-line { margin: 6px 0 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-sstep-done { margin: 8px 0 0; color: #7433d4; font-size: 13px; font-weight: 500; }
.yw-sstep-done[data-tone="miss"] { color: #a96883; font-weight: 400; }
.yw-sstep-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.yw-sstep-actions > form { margin: 0; }
.yw-sstep-input, .yw-sstep-textarea { width: 100%; min-height: 34px; margin-top: 8px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; }
.yw-sstep-textarea { min-height: 92px; padding: 8px 10px; font-family: var(--font-geist-mono, ui-monospace, monospace); font-size: 12px; resize: vertical; }
:is(.yw-sstep-input, .yw-sstep-textarea):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-sstep .yw-lsetup-form-foot { flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.yw-sstep-foot > .yw-sstep-skip { order: -1; }
.yw-sstep-foot > .yw-lsetup-foot-note { order: -2; margin-right: auto; }
.yw-sstep-foot:not(:has(.yw-lsetup-foot-note)) > .yw-sstep-skip { margin-right: auto; }
.yw-sstep > .yw-tasks-notice { margin: 0 0 12px; }
.yw-roster-word[data-tone="good"] { color: #2f8a6d; }
.yw-roster-word[data-tone="accent"] { color: #7433d4; }
.yw-roster-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yw-inv-input[data-mid] { width: 140px; }
.yw-inv-input[data-fill] { width: auto; min-width: 0; flex: 1 1 auto; }

/* Team: the roster grid's table, the login word over its link. */
.yw-team-table td { vertical-align: middle; }
.yw-team-who { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.yw-team-login { display: flex; max-width: 220px; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 12px; white-space: normal; }
.yw-team-login > .yw-roster-word { font-size: 11.5px; }
.yw-team-table tr[data-inactive] :is(input:not([type="checkbox"]), .yw-select) { opacity: .6; }
.yw-team-send { color: #8553c2; font-size: 12px; text-decoration: none; white-space: nowrap; }
.yw-team-send:hover { text-decoration: underline; }
.yw-team-logins { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eae8ec; }
.yw-team-invites { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: #202024; font-size: 13px; }

/* Standards: the departments as a table under the two columns. */
.yw-sstep-dept { margin-top: 6px; }
.yw-sstep-dept > .yw-tasks-scroll { margin-top: 6px; }
.yw-dept-table .hw-info-label { color: inherit; font-size: inherit; font-weight: inherit; }
.yw-dept-table .yw-roster-word .hw-info-label { color: #87818c; }

/* The map picker (geofence-picker.tsx). */
.yw-geo { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.yw-geo-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.yw-geo-search > .yw-field { min-width: 180px; flex: 1 1 220px; }
.yw-geo-map { width: 100%; height: 260px; overflow: hidden; border: 1px solid #e2e1e4; border-radius: 16px; background: #f4f4f3; }
.yw-geo-attr { margin: -4px 0 0; color: #a59fab; font-size: 11px; }
.yw-geo-radius { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #59535f; font-size: 13px; }
.yw-geo-range { width: 160px; accent-color: #7c3aed; }
.yw-geo-value { color: #202024; font-weight: 500; }
.yw-geo-coords { color: #87818c; font-size: 12px; }
.yw-geo-note { margin: 0; color: #87818c; font-size: 12px; line-height: 1.5; }
.yw-geo-note[data-tone="miss"] { color: #a96883; }
.yw-geo-adv { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* Daily tasks: the switches in two columns, a button that looks like the
   switch (each one posts its own form). */
.yw-sstep-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 4px 0 0; padding: 0; list-style: none; }
.yw-sstep-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #eae8ec; }
.yw-sstep-switch:nth-child(-n + 2) { border-top: 0; }
.yw-sstep-switch > form { flex-shrink: 0; margin: 2px 0 0; }
.yw-sstep-switch .hw-info-label { color: inherit; font-size: inherit; font-weight: inherit; }
.yw-switch-btn { position: relative; display: block; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 20px; background: #d9d5de; cursor: pointer; transition: background .2s; }
.yw-switch-btn::before { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); content: ""; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.yw-switch-btn[aria-checked="true"] { background: #7c3aed; }
.yw-switch-btn[aria-checked="true"]::before { transform: translateX(14px); }
.yw-switch-btn:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* Recurring work (setup-templates.tsx). */
.yw-tmpl { display: flex; flex-direction: column; margin-top: 20px; padding-top: 16px; border-top: 1px solid #eae8ec; }
.yw-tmpl-block + .yw-tmpl-block, .yw-tmpl-add + .yw-tmpl-block, .yw-tmpl-block + .yw-tmpl-add { margin-top: 18px; }
.yw-tmpl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.yw-tmpl-bar > .yw-lsetup-group { margin: 0; padding: 0; }
.yw-tmpl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.yw-tmpl-acts > form { margin: 0; }
.yw-tmpl-acts .yw-tasks-text-btn { text-decoration: none; }
.yw-tmpl-block > .yw-tasks-scroll { margin-top: 8px; }
.yw-tmpl-rows { margin: 0; padding: 0; list-style: none; }
.yw-tmpl-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid #eae8ec; }
.yw-tmpl-row:first-child { border-top: 0; padding-top: 4px; }
.yw-tmpl-row > .yw-roster-sub { margin: 0; white-space: normal; }
.yw-tmpl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.yw-tmpl-why { margin: 4px 0 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-tmpl-steps-label { margin: 6px 0 0; color: #202024; font-size: 12px; font-weight: 500; }
.yw-tmpl-steps { margin: 2px 0 0; padding-left: 20px; color: #59535f; font-size: 12px; line-height: 1.6; }
.yw-tmpl-row > .yw-tmpl-acts { margin-top: 6px; }
.yw-tmpl-rebuild { margin: 8px 0 0; }
.yw-tmpl-add { padding-top: 16px; border-top: 1px solid #eae8ec; }
.yw-tmpl-add .yw-chipset { margin-top: 8px; }
.yw-tmpl-table td[data-text] { white-space: normal; }
.yw-tmpl-form { margin-top: 18px; }
.yw-tmpl-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.yw-tmpl-lines-label { color: #87818c; font-size: 12px; }
.yw-tmpl-lines-label .hw-info-label { color: inherit; font-size: inherit; }
.yw-tmpl-line { display: flex; align-items: center; gap: 8px; }
.yw-tmpl-n { width: 18px; flex-shrink: 0; color: #a59fab; font-size: 12px; text-align: right; }
@media (max-width: 900px) {
  .yw-sstep-switches { grid-template-columns: minmax(0, 1fr); }
  .yw-sstep-switch:nth-child(2) { border-top: 1px solid #eae8ec; }
  .yw-roster-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The housekeeping app connection (setup-breezeway-api.tsx) and the report
   inbox (setup-mint.tsx), in Task lanes: form rows, one table, pills. */
.yw-bwapi { display: flex; flex-direction: column; }
.yw-bwapi > .yw-lsetup-field:first-of-type { border-top: 0; }
.yw-bwapi > form.yw-lsetup-field { margin: 0; }
.yw-bwapi-replace { padding: 8px 0 4px; }
.yw-bwapi-replace > summary { display: inline-flex; list-style: none; cursor: pointer; }
.yw-bwapi-replace > summary::-webkit-details-marker { display: none; }
.yw-bwapi-replace[open] > summary { margin-bottom: 8px; }
.yw-bwapi-form { margin: 6px 0 4px; }
.yw-bwapi-compare { margin: 0; }
.yw-bwapi-compare > .yw-sstep-actions { margin: 0 0 10px; }
.yw-bwapi-ready { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid #eae8ec; }
.yw-bwapi-ready-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: #59535f; font-size: 13px; }
.yw-bwapi-ready-title > .yw-roster-word { font-size: 14px; font-weight: 500; }
.yw-bwapi .yw-sstep-ctl > .yw-crew-pill { flex-shrink: 0; }
.yw-sstep-link { margin-top: 4px; }
.yw-mint { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; gap: 8px; }
.yw-mint-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.yw-mint-hint { color: #87818c; font-size: 12px; font-weight: 400; }
.yw-mint-hint > .num { color: #59535f; }
.yw-mint-new { display: flex; max-width: 420px; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 1px solid #e3d6f6; border-radius: 12px; background: #f8f4fe; }
.yw-mint-warn { margin: 0; color: #202024; font-size: 12px; font-weight: 500; }
.yw-mint-address { margin: 0; color: #202024; font-size: 12px; overflow-wrap: anywhere; }
.yw-fsetup-sub.yw-sstep-mail { margin-top: 14px; }
/* Buildings and common spaces (setup-buildings.tsx): two columns of
   buildings, the spaces one a row, the rooms with their building. */
.yw-bldg-seed { justify-content: flex-start; margin: 0 0 12px; }
.yw-bldg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.yw-bldg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
:is(.yw-bldg-grid, .yw-bldg-list) > .yw-sstep-input { margin-top: 0; }
.yw-bldg-rooms { max-height: 288px; margin: 2px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.yw-bldg-rooms > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #eae8ec; }
.yw-bldg-rooms > li:first-child { border-top: 0; }
.yw-bldg-room { min-width: 0; overflow: hidden; color: #202024; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* The export's unused columns (setup-vocab.tsx FeedColumnsReadout): a
   table in a scroller, then the three questions as rows. */
.yw-feedcols { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.yw-feedcols-key { color: #202024; font-size: 12px; }
.yw-feedcols-eg { display: block; max-width: 460px; overflow: hidden; color: #87818c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-feedcols-table td[data-text]:last-child { width: 100%; max-width: 0; }
.yw-feedcols-table .yw-feedcols-eg { max-width: none; }
.yw-feedcols-asks { margin: 0; padding: 0; list-style: none; }
.yw-feedcols-asks > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-feedcols-asks > li > .yw-tasks-job { min-width: 170px; }
/* The housekeeping app import (setup-import.tsx): a summary card on the stat
   columns, the connection and the report mail side by side, the unused
   columns under them; every list scrolls inside its card. */
.yw-import-summary > .yw-stat-cols { margin-top: 14px; }
.yw-import-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.yw-import-pair > .yw-card, .yw-import-stack > .yw-card { margin: 0; }
.yw-import-stack { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-roster-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yw-import-pair .yw-card-head + .yw-bwapi { margin-top: 10px; }
.yw-import-pair .yw-card-head + .yw-crew-empty { margin-top: 12px; }
.yw-import-pair .yw-card-head form { margin: 0; }
.yw-import-pair .yw-sstep-mail { margin-top: 12px; }
.yw-import-mail td[data-text]:last-child { max-width: 0; width: 60%; }
.yw-import-mail .yw-feedcols-eg { max-width: none; }
#columns .yw-feedcols { margin-top: 2px; }
@media (max-width: 1100px) { .yw-import-pair { grid-template-columns: minmax(0, 1fr); } }
/* ------------------------------------------------------------------ dark -- */
[data-theme-root].dark .yw-crew-pill { border-color: #3d3150; background: #0b1122; color: #c9b1ff; }
[data-theme-root].dark .yw-crew-pill:hover { border-color: #4a3c60; background: #1b1d3a; }
[data-theme-root].dark :is(.yw-crew-select, .yw-crew-inline input[type="number"], .yw-crew-money) { border-color: #1c2843; background-color: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-crew-money input { color: #f3eef8; }
[data-theme-root].dark :is(.yw-crew-note, .yw-crew-inline, .yw-crew-team-foot .yw-crew-inline) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-crew-empty, .yw-crew-why, .yw-crew-gone-foot, .yw-crew-departed, .yw-crew-band-label, .yw-crew-days-axis) { color: #a297ab; }
[data-theme-root].dark :is(.yw-crew-name, .yw-crew-held) { color: #f3eef8; }
[data-theme-root].dark .yw-crew-band-label { background: #0f1729; }
[data-theme-root].dark :is(.yw-crew-person, .yw-crew-team-foot, .yw-crew-gone-foot, .yw-crew-who-open) { border-color: #1c2843; }
[data-theme-root].dark .yw-crew-edit { color: #c9b1ff; }
[data-theme-root].dark .yw-crew-day > span { background: repeating-linear-gradient(125deg, #a883ee 0 1.8px, #3f3352 1.8px 4px); }
[data-theme-root].dark .yw-crew-day[data-off] > span { background: #2a3654; }
[data-theme-root].dark .yw-floor-drawer { border-color: #3d3150; }
[data-theme-root].dark .yw-floor-drawer-close { border-color: #2a3654; color: #c3b9cc; }
[data-theme-root].dark .yw-floor-drawer-close:hover { background: #142036; color: #f3eef8; }
[data-theme-root].dark :is(.yw-lsetup-need, .yw-wt-row, .yw-wt-foot, .yw-lsetup-doors > li + li, .yw-lsetup-board, .yw-lsetup-field, .yw-lsetup-group, .yw-lsetup-form-foot, .yw-lsetup-uploads > li, .yw-lsetup-routines > li) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-lsetup-need-title, .yw-wt-name, .yw-lsetup-door, .yw-lsetup-board, .yw-lsetup-group, .yw-lsetup-upload-day, .yw-lsetup-routine-name) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-lsetup-need-label, .yw-lsetup-need-detail, .yw-lsetup-door-count, .yw-lsetup-routine-does) { color: #a297ab; }
[data-theme-root].dark :is(.yw-lsetup-field, .yw-lsetup-upload-line) { color: #c3b9cc; }
[data-theme-root].dark .yw-lsetup-field > input:not([type="hidden"]) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-lsetup-mark { background: #3a2638; color: #f0a6c8; }
[data-theme-root].dark .yw-lsetup-mark[data-pace="watch"] { background: #3a3020; color: #e6bd7f; }
[data-theme-root].dark .yw-lsetup-mark[data-pace="clear"] { background: #1d3a31; color: #7fd1b0; }
[data-theme-root].dark .yw-lsetup-door .yw-lsetup-mark { background: #1b1d3a; color: #c9b1ff; }
[data-theme-root].dark .yw-lsetup-door:hover { background: #142036; }
[data-theme-root].dark .yw-wt-auto { color: #c9b1ff; }
[data-theme-root].dark .yw-tasks-seg > a { color: #c3b9cc; }
[data-theme-root].dark .yw-tasks-seg > a[aria-current] { background: #1b2742; color: #f3eef8; box-shadow: none; }
[data-theme-root].dark :is(.yw-wt-kind-rows > li, .yw-lsetup-open, .yw-lsetup-howto, .yw-lsetup-sources > li + li, .yw-lsetup-picks) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-wt-kind-name, .yw-wt-kind-count, .yw-lsetup-strong, .yw-lsetup-source-name) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-lsetup-now-line) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-lsetup-source-blurb, .yw-lsetup-pick, .yw-lsetup-foot-note) { color: #a297ab; }
[data-theme-root].dark .yw-wt-kind-bar { background: #16223a; }
[data-theme-root].dark .yw-lsetup-late { color: #e7a3c2; }
[data-theme-root].dark :is(.yw-lsetup-match, .yw-lsetup-check) { border-color: #1c2843; }
[data-theme-root].dark .yw-lsetup-match-name { color: #f3eef8; }
[data-theme-root].dark .yw-lsetup-match-facts { color: #a297ab; }
[data-theme-root].dark .yw-lsetup-check-rows > li { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-inv-dept-rows > li, .yw-inv-order-rows > li, .yw-inv-item, .yw-inv-folder[data-depth], .yw-inv-add) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-inv-dept-name, .yw-inv-dept-count, .yw-inv-order-title, .yw-inv-item-name, .yw-inv-item-figures, .yw-inv-item-state[data-tone="short"]) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-inv-dept-short, .yw-inv-order-status, .yw-inv-order-lines, .yw-inv-item-par, .yw-inv-item-state) { color: #a297ab; }
[data-theme-root].dark :is(.yw-inv-dept-bar, .yw-inv-gap-bar) { background: #16223a; }
[data-theme-root].dark .yw-inv-dept:hover { background: #142036; }
[data-theme-root].dark .yw-inv-dept[aria-current] { background: #1b2742; }
[data-theme-root].dark .yw-inv-input { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-fsetup-state { color: #e7a3c2; }
[data-theme-root].dark .yw-fsetup-state[data-done] { color: #7fd1b0; }
[data-theme-root].dark .yw-fsetup-sub { border-color: #1c2843; }
[data-theme-root].dark .yw-lanes-verdict[data-ok] { color: #f3eef8; }
[data-theme-root].dark .yw-lanes-verdict { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-roster-summary, .yw-roster-limits) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-roster-word, .yw-roster-sub, .yw-field, .yw-field-hint) { color: #a297ab; }
[data-theme-root].dark .yw-roster-word[data-tone="ask"] { color: #e7a3c2; }
[data-theme-root].dark :is(.yw-roster-stars, .yw-roster-add-title, .yw-roster-form > .yw-crew-band-label) { color: #f3eef8; }
[data-theme-root].dark .yw-roster-stars > [data-off] { color: #2a3654; }
[data-theme-root].dark :is(.yw-roster-add, .yw-roster-avail) { border-color: #1c2843; }
[data-theme-root].dark .yw-field > :is(input:not([type="checkbox"]):not([type="hidden"]), textarea) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-chip-check > span { border-color: #1c2843; background: #0b1122; color: #c3b9cc; }
[data-theme-root].dark .yw-chip-check > input:checked + span { border-color: #4a3c60; background: #1b1d3a; color: #c9b1ff; }
[data-theme-root].dark .yw-avail-table td[data-weekend] { background: #0f1729; }
[data-theme-root].dark .yw-tick { border-color: #2a3654; background-color: #0b1122; }
[data-theme-root].dark :is(.yw-clock-side, .yw-clock-steps > li) { border-color: #1c2843; }
[data-theme-root].dark .yw-clock-lead { color: #f3eef8; }
[data-theme-root].dark :is(.yw-clock-at, .yw-clock-steps > li) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-clock-link, .yw-clock-steps a) { color: #c9b1ff; }
[data-theme-root].dark .yw-clock-steps > li > .num { background: #1b1d3a; color: #c9b1ff; }
[data-theme-root].dark .yw-sstep-tag { color: #a297ab; }
[data-theme-root].dark .yw-sstep-tag[data-tone="ask"] { color: #e7a3c2; }
[data-theme-root].dark .yw-sstep-tag[data-tone="good"] { color: #7fd1b0; }
[data-theme-root].dark .yw-sstep-value { color: #f3eef8; }
[data-theme-root].dark .yw-sstep-value[data-quiet] { color: #a297ab; }
[data-theme-root].dark .yw-sstep-ctl > input:not([type="hidden"]) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-sstep-chip { border-color: #1c2843; background: #0b1122; color: #c3b9cc; }
[data-theme-root].dark .yw-sstep-chip[data-own] { border-color: #4a3c60; background: #1b1d3a; color: #c9b1ff; }
[data-theme-root].dark .yw-radio { border-color: #2a3654; background: #0b1122; }
[data-theme-root].dark .yw-radio:checked { border-color: #a78bfa; box-shadow: inset 0 0 0 4px #0b1122; background: #a78bfa; }
[data-theme-root].dark .yw-sstep-mail { border-color: #1c2843; color: #f3eef8; }
[data-theme-root].dark :is(.yw-sstep-lead, .yw-sstep-line, .yw-geo-radius, .yw-tmpl-why, .yw-tmpl-steps) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-sstep-lead > .num, .yw-geo-value, .yw-team-invites, .yw-tmpl-steps-label) { color: #f3eef8; }
[data-theme-root].dark .yw-sstep-done { color: #c9b1ff; }
[data-theme-root].dark .yw-sstep-done[data-tone="miss"], [data-theme-root].dark .yw-geo-note[data-tone="miss"] { color: #e7a3c2; }
[data-theme-root].dark :is(.yw-sstep-input, .yw-sstep-textarea) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-roster-word[data-tone="good"] { color: #7fd1b0; }
[data-theme-root].dark .yw-roster-word[data-tone="accent"] { color: #c9b1ff; }
[data-theme-root].dark .yw-team-send { color: #c9b1ff; }
[data-theme-root].dark :is(.yw-team-logins, .yw-sstep-switch, .yw-tmpl, .yw-tmpl-row, .yw-tmpl-add) { border-color: #1c2843; }
[data-theme-root].dark .yw-geo-map { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark :is(.yw-geo-attr, .yw-geo-coords, .yw-geo-note, .yw-tmpl-lines-label, .yw-tmpl-n) { color: #a297ab; }
[data-theme-root].dark .yw-switch-btn { background: #2a3654; }
[data-theme-root].dark .yw-switch-btn[aria-checked="true"] { background: #7c3aed; }
[data-theme-root].dark .yw-bwapi-ready { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-bwapi-ready-title, .yw-mint-hint > .num) { color: #c3b9cc; }
[data-theme-root].dark .yw-mint-hint { color: #a297ab; }
[data-theme-root].dark .yw-mint-new { border-color: #3d3150; background: #1b1d3a; }
[data-theme-root].dark :is(.yw-mint-warn, .yw-mint-address) { color: #f3eef8; }
[data-theme-root].dark .yw-bldg-rooms > li { border-color: #1c2843; }
[data-theme-root].dark .yw-bldg-room { color: #f3eef8; }
[data-theme-root].dark .yw-feedcols-key { color: #f3eef8; }
[data-theme-root].dark .yw-feedcols-eg { color: #a297ab; }
[data-theme-root].dark .yw-feedcols-asks > li { border-color: #1c2843; }

[data-theme-root].dark :is(.yw-cat-card, .yw-dir-card, .yw-cat-chip, .yw-cat-search-input) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark :is(.yw-cat-photo, .yw-cat-detail-photo) { background: #111a30; }
[data-theme-root].dark :is(.yw-cat-name, .yw-dir-name, .yw-cat-stock, .yw-dir-acct, .yw-cat-queue-cost, .yw-dir-person) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-cat-meta, .yw-cat-areas, .yw-dir-meta, .yw-cat-form > label, .yw-cat-stock[data-tone="muted"]) { color: #a297ab; }
[data-theme-root].dark :is(.yw-cat-chip[aria-current="true"], .yw-cat-flash, .yw-cat-acts .yw-crew-pill[data-on]) { border-color: #4a3c60; background: #1b1d3a; color: #d9c6ff; }
[data-theme-root].dark .yw-cat-card[data-short] { border-color: #5a2a45; }
[data-theme-root].dark .yw-cat-stock[data-tone="short"] { color: #f08cbd; }
[data-theme-root].dark :is(.yw-cat-bar) { background: #1c2843; }
[data-theme-root].dark :is(.yw-dir-rows > li, .yw-dir-edit) { border-color: #1c2843; }
[data-theme-root].dark .yw-dir-call { color: #c9b1ff; }

/* Inventory v2 (10/19): the catalog's sections, dropdown filters, live search,
   category pictures, the bar list, and the product sheet pop-up. The pop-up
   wears .yw-comp-modal (skin/pricing-compset.css) for the frosted surface and
   motion; what is below is only what a product needs on top of it. */

/* Sections: Restock / FF&E / Bar and Retail / Everything, the segmented pill row. */
.yw-cat-sections { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 12px; padding: 4px; border-radius: 14px; background: #f3f1f5; }
.yw-cat-sections > a { display: inline-flex; flex: 1 1 0; min-width: max-content; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 10px; color: #5d5763; font-size: 13.5px; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.yw-cat-sections > a .num { color: #a19aa8; font-size: 12px; }
.yw-cat-sections > a:hover { color: #202024; }
.yw-cat-sections > a[aria-current="page"] { background: #fff; color: #202024; font-weight: 500; box-shadow: 0 1px 3px rgba(48, 24, 72, .1); }
.yw-cat-sections > a[aria-current="page"] .num { color: #7a52c7; }

/* Search + dropdowns on one row; the dropdowns wrap under on a narrow screen. */
.yw-cat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.yw-cat-tools .yw-cat-search { flex: 1 1 320px; min-width: 0; margin: 0; }
.yw-cat-search-box { position: relative; display: flex; min-width: 0; flex: 1 1 auto; align-items: center; }
.yw-cat-search-box .yw-cat-search-input { width: 100%; }
.yw-cat-search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: #a19aa8; pointer-events: none; }
.yw-cat-search-box .yw-cat-search-input { padding-left: 36px; padding-right: 34px; }
.yw-cat-search-input::-webkit-search-cancel-button { display: none; }
.yw-cat-search-clear { position: absolute; right: 8px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #f0edf2; color: #6d6672; cursor: pointer; }
.yw-cat-search-clear > svg { width: 13px; height: 13px; }
.yw-cat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-cat-count { margin: 10px 0 12px; color: #87818c; font-size: 12.5px; }
.yw-cat-count .num { color: #202024; font-weight: 500; }
.yw-cat-grid > [hidden], .yw-cat-retail tr[hidden] { display: none; }
.yw-cat-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yw-cat-undo form { margin: 0; }
.yw-crew-pill[data-tone="primary"] { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.yw-crew-pill[data-tone="primary"]:hover { background: #6d28d9; }

/* A product with no photo: its category's picture on a soft tint, never a letter. */
.yw-cat-photo-pic { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(160deg, #f7f4fb, #efeaf6); color: #a993cc; }
.yw-cat-photo-pic > svg { width: 38%; max-width: 64px; height: auto; }
.yw-cat-photo-pic[data-size="lg"] > svg { max-width: 96px; }
.yw-cat-photo-pic:is([data-pic="bedding"], [data-pic="towel"], [data-pic="bath"]) { background: linear-gradient(160deg, #f2f6fb, #e7eef7); color: #8aa3c4; }
.yw-cat-photo-pic:is([data-pic="bar"], [data-pic="coffee"], [data-pic="kitchen"]) { background: linear-gradient(160deg, #fbf5f1, #f4ebe4); color: #c09a80; }
.yw-cat-photo-pic:is([data-pic="plant"], [data-pic="pool"]) { background: linear-gradient(160deg, #f1f8f4, #e5f1ea); color: #7fb096; }
.yw-cat-card[data-kind="ffe"] .yw-cat-acts { justify-content: flex-start; }

/* Bar and Retail: the price list. */
.yw-cat-retail-name { display: inline-flex; align-items: center; gap: 10px; color: #202024; font-weight: 500; text-decoration: none; }
.yw-cat-retail-thumb { display: inline-flex; width: 34px; height: 34px; flex: none; overflow: hidden; border-radius: 8px; background: #f6f4f8; }
.yw-cat-retail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yw-cat-retail-thumb .yw-cat-photo-pic > svg { width: 18px; }
.yw-cat-needs { color: #b2336f; font-size: 12px; }
.yw-cat-retail td[data-tone="short"] { color: #b2336f; font-weight: 500; }

/* The product sheet pop-up. */
/* Centered: Floor's ".yw-tasks-view > *" card spacing must not push the
   dialog down (it is a direct child of the view). */
dialog.yw-comp-modal.yw-prod-sheet { max-width: 640px; margin: auto; background: rgba(253, 252, 254, .98); }
[data-theme-root].dark dialog.yw-comp-modal.yw-prod-sheet { background: rgba(13, 21, 39, .98); }
/* A product sheet is read by housekeeping on a busy grid: near solid, so the
   cards behind never show through the frost. */
.yw-prod-sheet-scroll { max-height: calc(100dvh - 32px); overflow-y: auto; }
.yw-prod-head { position: relative; }
.yw-prod-photo { display: flex; height: 240px; align-items: center; justify-content: center; overflow: hidden; background: #f6f4f8; }
.yw-prod-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.yw-prod-head-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 12, 30, .72), rgba(20, 12, 30, .12) 55%, rgba(20, 12, 30, .05)); pointer-events: none; }
.yw-prod-head-acts { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.yw-prod-head-acts form { margin: 0; }
.yw-prod-head-acts .yw-comp-modal-glass > svg { width: 16px; height: 16px; }
.yw-prod-restore { padding: 0 10px; font-size: 12px; }
.yw-prod-head-acts .yw-comp-modal-glass:has(.yw-prod-restore) { width: auto; border-radius: 999px; }
.yw-prod-head-text { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; color: #fff; }
.yw-prod-kind { align-self: flex-start; padding: 2px 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 11.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.yw-prod-name { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.3px; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
.yw-prod-sub { color: rgba(255, 255, 255, .86); font-size: 13px; }
.yw-prod-tabs { display: flex; gap: 4px; margin: 14px 20px 0; padding: 4px; border-radius: 12px; background: rgba(240, 236, 244, .8); }
.yw-prod-tabs > a { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 32px; border-radius: 9px; color: #5d5763; font-size: 13px; text-decoration: none; }
.yw-prod-tabs > a > svg { width: 13px; height: 13px; }
.yw-prod-tabs > a[aria-current="page"] { background: #fff; color: #202024; font-weight: 500; box-shadow: 0 1px 3px rgba(48, 24, 72, .1); }
.yw-prod-note { margin: 12px 20px 0; padding: 9px 12px; border-radius: 10px; background: #f3ecff; color: #4d2a85; font-size: 13px; }
.yw-prod-body { padding: 16px 20px 22px; }
.yw-prod-copy p { margin: 0 0 8px; color: #3d3842; font-size: 14px; line-height: 1.5; }
.yw-prod-quality b { margin-right: 6px; color: #7a52c7; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.yw-prod-muted { margin: 0 0 10px; color: #87818c; font-size: 13px; }
.yw-prod-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 12px 0 0; }
.yw-prod-fact { min-width: 0; }
.yw-prod-fact dt { color: #87818c; font-size: 11.5px; }
.yw-prod-fact dd { margin: 2px 0 0; overflow-wrap: anywhere; color: #202024; font-size: 13.5px; }
.yw-prod-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; border: 1px solid #e2d6f7; border-radius: 11px; background: #faf7ff; color: #5b34a8; font-size: 13px; font-weight: 500; text-decoration: none; }
.yw-prod-link > svg { width: 15px; height: 15px; }
.yw-prod-stock { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yw-prod-stock > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid #eeebf1; border-radius: 13px; background: #fff; color: #87818c; font-size: 12px; }
.yw-prod-big { color: #202024; font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.yw-prod-big[data-tone="short"] { color: #b2336f; }
.yw-prod-big[data-muted] { color: #8f8896; }
.yw-prod-adjust { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.yw-prod-qty { display: flex; align-items: center; gap: 10px; color: #5d5763; font-size: 13px; }
.yw-prod-qty .yw-inv-input { width: 80px; }
.yw-prod-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.yw-prod-reasons .yw-crew-pill[data-tone="bad"]:hover { border-color: #f1c9dd; background: #fdf1f6; color: #9b2c60; }
.yw-prod-reasons .yw-crew-pill[data-tone="good"]:hover { border-color: #c9e8d6; background: #f1faf4; color: #2d7a4f; }
.yw-prod-section { margin: 18px 0 6px; color: #87818c; font-size: 11.5px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; }
.yw-prod-moves { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.yw-prod-moves > li { display: grid; grid-template-columns: 110px 60px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid #f1eef3; font-size: 13px; }
.yw-prod-moves [data-tone="bad"] { color: #b2336f; }
.yw-prod-moves [data-tone="good"] { color: #2d7a4f; }
.yw-prod-move-who { overflow: hidden; color: #87818c; text-overflow: ellipsis; white-space: nowrap; }
.yw-prod-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.yw-prod-form > label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #6d6672; font-size: 12px; }
.yw-prod-form > label > small { color: #a19aa8; font-size: 11px; }
.yw-prod-form [data-span="2"] { grid-column: 1 / -1; }
.yw-prod-form .yw-inv-input { width: 100%; }
.yw-prod-form textarea.yw-inv-input { min-height: 58px; padding: 8px 10px; resize: vertical; }
.yw-prod-form-acts { display: flex; align-items: center; gap: 14px; margin-top: 4px; }

@media (max-width: 640px) {
  .yw-cat-sections > a { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .yw-cat-tools .yw-cat-search { flex-basis: 100%; }
  .yw-cat-filters { width: 100%; }
  .yw-prod-photo { height: 200px; }
  .yw-prod-facts, .yw-prod-form { grid-template-columns: 1fr; }
  .yw-prod-moves > li { grid-template-columns: 90px 50px 1fr; }
}

/* Dark. */
[data-theme-root].dark .yw-cat-sections { background: #111a30; }
[data-theme-root].dark .yw-cat-sections > a { color: #a297ab; }
[data-theme-root].dark .yw-cat-sections > a[aria-current="page"], [data-theme-root].dark .yw-prod-tabs > a[aria-current="page"] { background: #1b2540; color: #f3eef8; }
[data-theme-root].dark .yw-cat-photo-pic { background: linear-gradient(160deg, #141d35, #111a30); color: #7d6aa6; }
[data-theme-root].dark :is(.yw-cat-count .num, .yw-prod-fact dd, .yw-prod-big, .yw-prod-copy p, .yw-cat-retail-name) { color: #f3eef8; }
[data-theme-root].dark .yw-prod-tabs { background: rgba(17, 26, 48, .8); }
[data-theme-root].dark :is(.yw-prod-stock > div) { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark .yw-prod-photo { background: #111a30; }
[data-theme-root].dark .yw-prod-moves > li { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-prod-note) { background: #1b1d3a; color: #d9c6ff; }
[data-theme-root].dark .yw-prod-link { border-color: #4a3c60; background: #1b1d3a; color: #d9c6ff; }
@media (prefers-reduced-motion: reduce) {
  .yw-cat-sections > a { transition: none; }
}
/* The CSV picker never widens a phone screen (10/19). */
.yw-cat-import input[type="file"] { min-width: 0; max-width: 100%; }
.yw-cat, .yw-cat-import { min-width: 0; }

/* Add with Wizard (10/19): one line, paste a link or say it. */
.yw-cat-wizard { position: relative; display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 6px 6px 38px; border: 1px solid #e2d6f7; border-radius: 13px; background: linear-gradient(180deg, #fbf8ff, #f6f1ff); }
.yw-cat-wizard-icon { position: absolute; left: 13px; width: 16px; height: 16px; color: #7c3aed; }
.yw-cat-wizard-input { min-width: 0; flex: 1 1 auto; min-height: 34px; border: 0; background: transparent; color: #202024; font: inherit; font-size: 14px; outline: none; }
.yw-cat-wizard-input::placeholder { color: #8c7fa6; }
.yw-cat-wizard:focus-within { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-prod-form input:disabled { background: #f5f3f7; color: #8f8896; cursor: not-allowed; }
[data-theme-root].dark .yw-cat-wizard { border-color: #4a3c60; background: #1b1d3a; }
[data-theme-root].dark .yw-cat-wizard-input { color: #f3eef8; }

/* Search across every section (10/28): hits grouped under a section line. */
.yw-cat-grid[hidden] { display: none; }
.yw-cat-group { display: flex; grid-column: 1 / -1; align-items: baseline; gap: 8px; margin: 6px 0 -2px; color: #202024; font-size: 13.5px; font-weight: 500; }
.yw-cat-group .num { color: #a19aa8; font-size: 12px; font-weight: 400; }
[data-theme-root].dark .yw-cat-group { color: #f3eef8; }
/* Goes with (10/28): the stringer and its bulbs, on both sheets. */
.yw-prod-goes-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.yw-prod-goes-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid #eeebf1; border-radius: 12px; background: #fff; }
.yw-prod-goes-photo { display: grid; width: 56px; height: 56px; overflow: hidden; place-items: center; border-radius: 10px; background: #f6f4f8; }
.yw-prod-goes-photo img { width: 100%; height: 100%; object-fit: cover; }
.yw-prod-goes-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-prod-goes-name { color: #202024; font-size: 14px; font-weight: 500; text-decoration: none; }
.yw-prod-goes-math { color: #5b34a8; font-size: 12.5px; }
.yw-prod-goes-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.yw-prod-goes-acts svg { width: 12px; height: 12px; }
.yw-prod-goes-order { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.yw-prod-goes-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; }
.yw-prod-goes-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }
.yw-prod-goes-add label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
@media (max-width: 560px) {
  .yw-prod-goes-row { grid-template-columns: 48px minmax(0, 1fr); }
  .yw-prod-goes-acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}
[data-theme-root].dark .yw-prod-goes-row { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark .yw-prod-goes-name { color: #f3eef8; }
[data-theme-root].dark .yw-prod-goes-math { color: #d9c6ff; }

/* Photo buttons on the product sheet's Edit tab (10/28). */
.yw-prod-photo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.yw-prod-photo-pick .yw-crew-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.yw-prod-photo-pick .yw-crew-pill svg { width: 14px; height: 14px; }
.yw-prod-photo-pick small { flex-basis: 100%; color: #87818c; font-size: 12px; }
.yw-prod-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yw-cat-nophoto { margin: 4px 0 0; font-size: 13px; }