/* 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; }

/* 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[data-variant="quiet"] { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
.yw-set-btn[data-variant="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[data-variant="quiet"] { border-color: #3c3746; background: #26232c; }
[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; }

/* Settings, targets (10/15): this section's own look on the shared base (settings.css).

   Covers the Targets tab (targets-panel.tsx, targets-readonly.tsx,
   revenue-sources-card.tsx, booking-sources-card.tsx, the plan grid's
   chrome in plan-grid.tsx), the Finish setup tab (setup-leftover.tsx) and
   the Finish next bar every Settings tab wears (setup-bar.tsx).

     .yw-set-groups / .yw-set-group   the Targets card's groups, each a grey
                                      name (a link to its part of the editor)
                                      over label / value rows
     .yw-set-vars / .yw-set-var       a setting: label left, control right,
                                      hairline above; caption lines under it
     .yw-set-num                      a number field with its unit
     .yw-set-tag                      the quiet "Yours"
     .yw-set-saved / .yw-set-note     the one-line flash and a plain sentence
   Light rules first, the dark twins at the foot. */

/* ---------------------------------------------------- Finish next bar -- */
/* Sits above the section body (outside .yw-settings-page), so it sets its
   own type. */
.yw-set-setupbar { position: sticky; top: 64px; z-index: 20; margin-top: 18px; padding: 9px 14px; border: 1px solid #e2e1e4; border-radius: 14px; background: #fff; color: #202024; font-family: var(--font-geist-sans), Geist, system-ui, sans-serif; font-size: 13px; letter-spacing: -.25px; }
@media (min-width: 1024px) { .yw-set-setupbar { top: 0; } }
.yw-set-setupbar-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-set-setupbar-count { color: #929097; font-size: 12px; }
.yw-set-setupbar-next { color: #59535f; }
.yw-set-setupbar .yw-set-link { font-size: 13px; }
.yw-set-setupbar-arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid #e4e2e6; border-radius: 50%; color: #59535f; font-size: 14px; line-height: 1; text-decoration: none; transition: background .16s; }
.yw-set-setupbar-arrow:hover { background: #f4f2f6; color: #202024; }
.yw-set-setupbar-arrow:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-set-setupbar-missing { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.yw-set-setupbar-missing .yw-set-link { font-size: 12px; }

/* ----------------------------------------------------- Targets card -- */
.yw-set-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.yw-set-group-head { display: inline-block; margin-bottom: 2px; color: #929097; font-size: 12px; text-decoration: none; }
.yw-set-group-head:hover { color: #8553c2; }
.yw-set-group-head:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-set-group .yw-set-rows { margin: 0; }
.yw-set-group .yw-set-row { min-height: 40px; padding: 7px 0; }
.yw-set-group .yw-set-row:first-child { border-top: 1px solid #eae8ec; }

/* --------------------------------------------- settings rows (forms) -- */
.yw-settings-page .yw-card-title .hw-info-label { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.yw-set-row-label .hw-info-label { color: inherit; font-size: inherit; }
.yw-set-vars { display: flex; flex-direction: column; margin-top: 8px; }
.yw-set-var { margin: 0; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-set-vars > .yw-set-var:first-child, .yw-set-vars > .yw-set-subhead:first-child + .yw-set-var { border-top: 0; }
.yw-set-var-main { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 12px; }
.yw-set-var-ctl { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.yw-set-var-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: #929097; font-size: 12px; }
.yw-set-subhead { margin: 0; padding: 14px 0 4px; border-top: 1px solid #eae8ec; color: #929097; font-size: 12px; }
.yw-set-vars > .yw-set-subhead:first-child { padding-top: 4px; border-top: 0; }
.yw-set-subhead + .yw-set-var { border-top: 0; }
.yw-set-tag { color: #929097; font-size: 12px; }
.yw-set-row-sub[data-tone="bad"] { color: #c85f84; }
.yw-set-followup { margin: 0; padding-top: 12px; margin-top: 14px; border-top: 1px solid #eae8ec; }
.yw-set-followup .yw-set-actions { margin-top: 0; }

/* A number with its unit. Default lives in the placeholder (grey); the
   owner's own value reads in ink (data-mine). */
.yw-set-num { display: inline-flex; align-items: center; gap: 6px; color: #929097; font-size: 12px; }
.yw-set-num input { width: 96px; min-height: 32px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #87818c; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.yw-set-num input[data-mine] { color: #202024; }
.yw-set-num input::placeholder { color: #b5b0ba; }
:is(.yw-set-num input, .yw-set-mini):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }

/* A small field inside a caption line (a date, a month, a percent). */
.yw-set-mini { min-height: 28px; padding: 0 8px; border: 1px solid #e2e1e4; border-radius: 8px; background: #fff; color: #202024; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.yw-set-mini[data-size="pct"] { width: 56px; text-align: right; }
.yw-set-mini[data-size="month"] { width: 150px; }

/* A checkbox or radio and its words on one line. */
.yw-set-check { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: #7c3aed; cursor: pointer; }
.yw-set-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #59535f; font-size: 12px; cursor: pointer; }
.yw-set-inline[data-size="row"] { color: inherit; font-size: 14px; }
.yw-set-inline input[type="radio"] { margin: 0; accent-color: #7c3aed; }

/* The submit wrapper (SubmitButton draws its own button). */
.yw-set-submit { display: inline-flex; }
.yw-set-submit[data-variant="quiet"] .yw-set-btn { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
.yw-set-submit[data-variant="quiet"] .yw-set-btn:hover { border-color: #d5c4e6; background: #f8f5fb; }

.yw-set-saved { margin: 8px 0 0; color: #279876; font-size: 12px; }
.yw-set-note { margin: 12px 0 0; color: #59535f; font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------ investor plan -- */
.yw-set-ip-name { max-width: 360px; }
.yw-set-ip-months { display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .yw-set-ip-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yw-set-ip-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ the plan grid chrome -- */
.yw-set-plan form { margin-top: 14px; }
.yw-set-years { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yw-set-years-seg { display: inline-flex; padding: 3px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; }
.yw-set-years-seg > button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #87818c; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.yw-set-years-seg > button:hover { color: #202024; }
.yw-set-years-seg > button[data-active] { background: #f1ecf7; color: #202024; font-weight: 500; }
.yw-set-years-seg > button:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-set-years-total { color: #202024; font-size: 13px; }
.yw-set-fold { margin-top: 12px; border-top: 1px solid #eae8ec; }
.yw-set-fold + .yw-set-fold, .yw-set-fold:last-child { border-bottom: 1px solid #eae8ec; }
.yw-set-fold-head { display: flex; min-height: 42px; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.yw-set-fold-head .yw-set-row-sub { margin-top: 0; }
.yw-set-fold-head [aria-hidden] { margin-left: auto; color: #929097; transition: transform .16s; }
.yw-set-fold[open] .yw-set-fold-head [aria-hidden] { transform: rotate(180deg); }
.yw-set-choices { display: flex; flex-direction: column; margin-top: 12px; }
.yw-set-choices > .yw-set-row-sub { margin: 0 0 4px; }
.yw-set-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; border: 0; border-top: 1px solid #eae8ec; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.yw-set-choice:hover .yw-set-row-label { color: #8553c2; }
.yw-set-choice:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* ----------------------------------------------------------- dark twins -- */
[data-theme-root].dark .yw-set-setupbar { border-color: #3c3746; background: #1f1c24; color: #f3eef8; }
[data-theme-root].dark .yw-set-setupbar-next { color: #c3b9cc; }
[data-theme-root].dark .yw-set-setupbar-arrow { border-color: #3c3746; color: #c3b9cc; }
[data-theme-root].dark .yw-set-setupbar-arrow:hover { background: #2a2631; color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-var, .yw-set-subhead, .yw-set-followup, .yw-set-fold, .yw-set-choice, .yw-set-group .yw-set-row:first-child) { border-color: #34303c; }
[data-theme-root].dark .yw-set-fold:last-child { border-bottom-color: #34303c; }
[data-theme-root].dark :is(.yw-set-num input, .yw-set-mini, .yw-set-years-seg) { border-color: #3c3746; background: #26232c; color: #c3b9cc; }
[data-theme-root].dark .yw-set-num input[data-mine], [data-theme-root].dark .yw-set-mini { color: #f3eef8; }
[data-theme-root].dark .yw-set-years-seg > button[data-active] { background: #3a2f4d; color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-years-total) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-inline, .yw-set-note) { color: #c3b9cc; }
[data-theme-root].dark .yw-set-submit[data-variant="quiet"] .yw-set-btn { border-color: #3c3746; background: #26232c; color: #f3eef8; }
[data-theme-root].dark .yw-set-group-head:hover, [data-theme-root].dark .yw-set-choice:hover .yw-set-row-label { color: #c9b1ff; }