/* Floor Overview (10/6): the GM briefing on the Dashboard Overview's skin.
   Owner, 10/6: the Dashboard Overview is the visual standard for every page.
   Skin and layout only: every figure, link, permission and producer is the
   component's own (floor/tonight.tsx, floor/briefing/*).

   The cards wear the shared .yw-card / .yw-card-head / .yw-card-title /
   .yw-card-sub / .yw-text-link from overview.css (radius 24, padding 23,
   #fbfbfb, border #e2e1e4). The briefing sits on a pinned grid modelled on
   .yw-dashboard-overview: three columns, explicit slots, align-items:
   stretch, so every card fills its cell and no column runs on alone (the
   dead space Jacobo flagged: "way too many open spaces, tons of scrolling").

   10/7 KPI reorganization (Jacobo: today's numbers, what needs me, and one
   KPI block each for Reviews, the Desk and Labor). The page wears the kit
   (`yw-kit` on .yw-floor-overview) and lays out in two grids, then two wide
   blocks. Desktop:
     top       today | needs you | reviews
     briefing  guests | call desk, then the week ahead | calendar
     wide      labor (last full week, last 8 weeks), payroll planning
   Every colour added here has a [data-theme-root].dark twin at the bottom;
   the calendar's colours are palette utilities in the markup, which the
   app's dark palette remaps. */

.yw-floor-overview .yw-card-head { margin-bottom: 14px; }
.yw-floor-overview .yw-card-title { font-size: 19px; }
.yw-floor-overview .yw-card-sub { margin-top: 2px; }

/* ---------------------------------------------- the scorecard line -- */
/* 10/7: one quiet line above the cards ("9 of 12 targets hit"), the misses
   as small amber chips that wrap under it on a phone. No card, no banner:
   the text and chip colours are palette utilities in the markup
   (briefing/scorecard-line.tsx), which the app's dark palette remaps. */
.yw-floor-scorecard { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 0 4px; font-size: 13px; line-height: 1.35; }
.yw-floor-scorecard-line { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; white-space: nowrap; }
.yw-floor-scorecard-mark { font-size: 12px; line-height: 1; }
.yw-floor-scorecard-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.yw-floor-score-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-width: 1px; border-style: solid; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background-color .15s; }
.yw-floor-score-chip:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* -------------------------------------------- the top, the Dashboard's -- */
/* 10/7: the Dashboard Overview's three columns, one row:
     today (KPI rows and cells) | needs you | reviews
   align-items: stretch, so no card ends on an empty block. */
.yw-floor-dash { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 1.04fr); gap: 14px; align-items: stretch; margin-top: 12px; }
.yw-floor-dash > [data-slot] { display: flex; flex-direction: column; min-width: 0; }
.yw-floor-dash > [data-slot] > section, .yw-floor-dash [data-slot="needs"] > .yw-needs { flex: 1 1 auto; }
.yw-floor-dash > [data-slot="kpis"] { grid-column: 1; }
.yw-floor-dash > [data-slot="needs"] { grid-column: 2; }
.yw-floor-dash > [data-slot="reviews"] { grid-column: 3; }
.yw-floor-dash [data-slot="needs"] .yw-needs-list > .yw-needs-row { flex: 1 1 auto; }
/* Needs you rows a little tighter than the Dashboard's 74px: the Floor's
   rows are one-line sentences. */
.yw-floor-dash .yw-needs-row { min-height: 56px; }
.yw-floor-dash .yw-needs-row-link { padding: 8px 3px; }
.yw-floor-dash .yw-needs-card-head { margin-bottom: 6px; }

/* The KPI cards (Reviews, Call desk): four small tiles, two by two, that
   share the card's height. Each tile is the shared StatTile. */
.yw-floor-overview .yw-floor-kpi-card { display: flex; flex-direction: column; }
.yw-floor-kpi-tiles { display: grid; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.yw-floor-split { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 2px 0 0; padding: 0; list-style: none; }

/* Labor: the last full week's four tiles across, then Last 8 weeks. */
.yw-floor-labor { display: flex; flex-direction: column; gap: 14px; }
.yw-floor-labor-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* The insight's single fact as a line in Needs you, phone only (below). */
.yw-floor-overview .yw-needs-card > a.yw-floor-needs-fact { display: none; align-self: stretch; min-height: 0; border: 0; align-items: baseline; gap: 6px; margin: 0 0 4px; padding: 8px 12px; border-radius: 12px; background: #f3edfc; color: #503268; font-size: 12px; }
.yw-floor-needs-fact .num { font-size: 16px; }
.yw-floor-needs-fact-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #85669f; text-overflow: ellipsis; white-space: nowrap; }

/* Dismiss: the word on a desktop; on a phone the same button as an "×"
   (its aria-label still says Dismiss and names the row), so a row's title
   keeps the width and reads on one line. */
.yw-floor-dismiss-x { display: none; }

/* Today: the targeted row (occupancy) as the kit's full KPI row, the rest as
   the kit's compact two-column cells (.yw-kpi-grid). */
.yw-floor-overview .yw-floor-kpis { display: flex; flex-direction: column; }
.yw-floor-overview .yw-floor-kpis > .yw-kpi-list { margin-top: 0; }
.yw-floor-overview .yw-floor-kpis > .yw-kpi-list > * { height: auto; padding: 10px 0 14px; }
.yw-floor-overview .yw-floor-kpis > .yw-kpi-list > .group > .yw-kpi-progress { margin: 10px 0 2px; }
.yw-floor-overview .yw-floor-kpis > .yw-kpi-grid { flex: 1 1 auto; align-content: space-between; }

/* The hero: the kit's value, pill, summary, track and rows (kit.css). The
   door to the board is a chip at the foot of the card. */
.yw-floor-overview .yw-floor-hero { display: flex; flex-direction: column; }
.yw-floor-overview .yw-floor-hero .yw-hero-value { margin: 6px 0 6px; font-size: clamp(36px, 3.2vw, 46px); }
.yw-floor-overview .yw-floor-hero .yw-hero-summary { margin: 10px 0 12px; color: #55505a; }
.yw-floor-overview .yw-floor-hero .yw-track-labels { margin-bottom: 8px; }
.yw-floor-overview .yw-floor-hero .yw-row-stat { padding: 8px 0; }
.yw-floor-hero-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 34px; margin-top: auto; padding: 0 12px; border: 1px solid #f1c9d6; border-radius: 10px; background: #fdf1f5; color: #b0436d; font-size: 12px; font-weight: 500; transition: background .16s, border-color .16s; }
.yw-floor-hero .yw-row-stats + .yw-floor-hero-chip { margin-top: 10px; }
.yw-floor-hero-chip:hover, .yw-floor-hero-chip:focus-visible { border-color: #e7a9be; background: #fbe4ec; }
.yw-floor-hero-chip:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* ----------------------------------------------------------- the grid -- */
/* The briefing under the top (10/7). Columns, not rows, so no card is
   paired with a taller stranger:
     col 1   guests (both rows)
     col 2   call desk, then the week ahead
     col 3   calendar (both rows)
   Row 2 is the flexible track, so when the guest list or the calendar runs
   longer, the extra lands in the week ahead, whose night bars grow.
   Source order: guests, desk, week, calendar; on a phone the desk moves up
   (below). */
.yw-floor-briefing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto 1fr; gap: 14px; align-items: stretch; margin-top: 14px; }
.yw-floor-briefing > [data-slot] { display: flex; flex-direction: column; min-width: 0; }
.yw-floor-briefing > [data-slot] > section { flex: 1 1 auto; }
.yw-floor-briefing > [data-slot="guests"] { grid-column: 1; grid-row: 1 / span 2; }
.yw-floor-briefing > [data-slot="desk"] { grid-column: 2; grid-row: 1; }
.yw-floor-briefing > [data-slot="week"] { grid-column: 2; grid-row: 2; }
.yw-floor-briefing > [data-slot="calendar"] { grid-column: 3; grid-row: 1 / span 2; }
.yw-floor-card-foot { margin-top: auto; padding-top: 12px; }

/* The week ahead's night bars: the kit hides the weekday letter over each
   day number (the Dashboard's 14 nights carry it in the caption); a week
   reads by its weekdays, so Floor keeps them. */
.yw-floor-overview .yw-floor-week .yw-night-day-top { display: block; }
.yw-floor-overview .yw-floor-week { display: flex; flex-direction: column; }
.yw-floor-overview .yw-floor-week .yw-night-rail { display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 6px; }
/* The plot is capped near 120px (the kit draws 149px on the Dashboard) so
   the card matches Security beside it; it grows only to fill that row. */
.yw-floor-overview .yw-floor-week .yw-night-chart { flex: 1 0 auto; height: 112px; max-height: 170px; }

/* The month calendar's event mark and its key swatch: a violet dot
   (colour off data-event, below). The tiles are "The month (10/13)". */
.yw-floor-cal-event { display: block; width: 6px; height: 6px; border-radius: 50%; }
.yw-floor-cal-swatch { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }

/* Labor and payroll planning: full width. The
   payroll table's own scroll box (month-band-ui ScrollBox) keeps its
   sideways scroll on a phone but drops its border inside the card. */
.yw-floor-overview .yw-floor-wide { margin-top: 14px; }
.yw-floor-overview [data-surface="floor.payroll.weekly"].yw-card > .overflow-x-auto { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

@media (max-width: 1100px) {
  .yw-floor-briefing { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px; }
  .yw-floor-briefing > [data-slot="guests"] { grid-column: 1; grid-row: 1; }
  .yw-floor-briefing > [data-slot="calendar"] { grid-column: 2; grid-row: 1; }
  .yw-floor-briefing > [data-slot="desk"] { grid-column: 1; grid-row: 2; }
  .yw-floor-briefing > [data-slot="week"] { grid-column: 2; grid-row: 2; }
  .yw-floor-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .yw-floor-dash > [data-slot="kpis"] { grid-column: 1; grid-row: 1; }
  .yw-floor-dash > [data-slot="needs"] { grid-column: 2; grid-row: 1; }
  .yw-floor-dash > [data-slot="reviews"] { grid-column: 1 / span 2; grid-row: 2; }
  .yw-floor-dash > [data-slot="reviews"] .yw-floor-kpi-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yw-floor-labor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: one column. Order (owner, 10/7): Today, Needs you, Reviews, Call
   desk, Arrivals and departures, the week ahead, the calendar, then Labor
   and payroll planning. */
@media (max-width: 800px) {
  /* The count on its own line, the chips wrapping under it. */
  .yw-floor-scorecard { gap: 6px; padding: 0 2px; }
  .yw-floor-scorecard-line { flex: 1 0 100%; }
  .yw-floor-score-chip { min-height: 28px; }
  .yw-floor-briefing, .yw-floor-dash { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
  .yw-floor-dash > [data-slot="kpis"] { order: 1; }
  .yw-floor-dash > [data-slot="needs"] { order: 2; }
  .yw-floor-dash > [data-slot="reviews"] { order: 3; }
  .yw-floor-dash > [data-slot="reviews"] .yw-floor-kpi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-floor-briefing > [data-slot="desk"] { order: 1; }
  .yw-floor-briefing > [data-slot="guests"] { order: 2; }
  .yw-floor-briefing > [data-slot="week"] { order: 3; }
  .yw-floor-briefing > [data-slot="calendar"] { order: 4; }
  .yw-floor-overview .yw-floor-wide { margin-top: 12px; }
  .yw-floor-overview .yw-floor-week .yw-night-chart { height: 96px; }
}
@media (max-width: 520px) {
  /* The kit's phone padding (kit.css: 18px on a phone). */
  .yw-floor-overview .yw-card { padding: 18px; }
  .yw-floor-overview .yw-card-head { margin-bottom: 10px; }
  .yw-floor-overview .yw-floor-hero .yw-hero-value { margin: 2px 0 4px; font-size: 36px; }
  .yw-floor-overview .yw-floor-hero .yw-hero-summary { margin: 8px 0 10px; font-size: 12px; }
  .yw-floor-overview .yw-floor-hero .yw-row-stat { padding: 6px 0; }
  /* Today on a phone: three compact cells to a row. */
  .yw-floor-overview .yw-floor-kpis > .yw-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .yw-floor-overview .yw-floor-kpis > .yw-kpi-grid > .group { grid-template-columns: minmax(0, 1fr); padding: 9px 0; }
  .yw-floor-overview .yw-floor-kpis > .yw-kpi-grid > .group > p { grid-column: 1; }
  /* Four cells (not-ready said in Needs you) read as two by two. */
  .yw-floor-overview .yw-floor-kpis > .yw-kpi-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-floor-overview .yw-floor-kpis > .yw-kpi-grid > .group > [data-slot="stat-tile-row"] [class*="text-2xl"] { font-size: 22px; }
  .yw-floor-overview .yw-floor-week .yw-night-chart { height: 80px; }
  .yw-floor-dash .yw-needs-row { min-height: 50px; }
  .yw-floor-dash .yw-needs-row-actions { margin: 0 0 0 4px; }
  .yw-floor-dash .yw-needs-row-link { gap: 10px; }
  .yw-floor-dismiss-word { display: none; }
  .yw-floor-dismiss-x { display: inline; font-size: 15px; line-height: 1; }
}

/* ------------------------------------------------------ the date pill -- */
/* The header's day picker (Wave 2 step 6) inside a .yw-header-control
   pill (header.css): a borderless date input and a small Show button. */

/* --------------------------------------------------------------- dark -- */
[data-theme-root].dark :is(.yw-floor-overview, .yw-labor-page) .yw-card { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-floor-overview .yw-floor-hero .yw-hero-summary { color: #c3b9cc; }
[data-theme-root].dark .yw-floor-overview .yw-needs-card > a.yw-floor-needs-fact { background: #2f2540; color: #efe6fb; }
[data-theme-root].dark .yw-floor-needs-fact-title { color: #b9a9cf; }
[data-theme-root].dark .yw-floor-hero-chip { border-color: #6b3a4f; background: #3d2632; color: #f0a9c6; }
[data-theme-root].dark .yw-floor-hero-chip:hover, [data-theme-root].dark .yw-floor-hero-chip:focus-visible { border-color: #8a4a65; background: #4a2d3b; }

/* ---- The Overview's redesign (10/12) ---------------------------------------
   Owner: "we still need a complete re design ... actually use the new design
   style and be more easy to use ... remove that ai slop text that over
   explains things, it should be on the hover modals, also the colored fonts
   aren from the new desgin neither those generic ai slop charts". The page is
   built from the Dashboard's own parts: the hero (kit Track, HeroPill,
   RowStats), the Last full week rows (StatTile in .yw-kpi-list), Needs you,
   the night bars and the Dashboard's chart. Colour is the hatched bars and
   the pill's arrow only; every word is ink or grey. */

/* One grid, the Dashboard Overview's columns: Today over Arrivals and
   departures, Guest contact down the middle (as Last full week runs), Needs
   you over Reviews, then the week ahead beside the month. */
.yw-floor-overview .yw-floor-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.06fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 16px; }
.yw-floor-overview .yw-floor-grid > :is(.yw-floor-dash, .yw-floor-briefing) { display: contents; }
.yw-floor-overview .yw-floor-grid [data-slot] { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.yw-floor-overview .yw-floor-grid [data-slot] > :is(section, .yw-needs) { flex: 1 1 auto; margin: 0; }
.yw-floor-overview .yw-floor-grid [data-slot="kpis"] { grid-column: 1; grid-row: 1; }
.yw-floor-overview .yw-floor-grid [data-slot="guests"] { grid-column: 1; grid-row: 2; }
.yw-floor-overview .yw-floor-grid [data-slot="desk"] { grid-column: 2; grid-row: 1 / span 2; }
.yw-floor-overview .yw-floor-grid [data-slot="needs"] { grid-column: 3; grid-row: 1; }
.yw-floor-overview .yw-floor-grid [data-slot="reviews"] { grid-column: 3; grid-row: 2; }
.yw-floor-overview .yw-floor-grid [data-slot="week"] { grid-column: 1; grid-row: 3; }
.yw-floor-overview .yw-floor-grid [data-slot="calendar"] { grid-column: 2 / span 2; grid-row: 3; }
@media (max-width: 1100px) {
  .yw-floor-overview .yw-floor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-floor-overview .yw-floor-grid [data-slot="kpis"] { grid-column: 1; grid-row: 1; }
  .yw-floor-overview .yw-floor-grid [data-slot="needs"] { grid-column: 2; grid-row: 1; }
  .yw-floor-overview .yw-floor-grid [data-slot="desk"] { grid-column: 1; grid-row: 2; }
  .yw-floor-overview .yw-floor-grid [data-slot="reviews"] { grid-column: 2; grid-row: 2; }
  .yw-floor-overview .yw-floor-grid [data-slot="guests"] { grid-column: 1; grid-row: 3; }
  .yw-floor-overview .yw-floor-grid [data-slot="week"] { grid-column: 2; grid-row: 3; }
  .yw-floor-overview .yw-floor-grid [data-slot="calendar"] { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 800px) {
  .yw-floor-overview .yw-floor-grid { grid-template-columns: minmax(0, 1fr); }
  .yw-floor-overview .yw-floor-grid [data-slot] { grid-column: 1 !important; grid-row: auto !important; }
  .yw-floor-overview .yw-floor-grid [data-slot="kpis"] { order: 1; }
  .yw-floor-overview .yw-floor-grid [data-slot="needs"] { order: 2; }
  .yw-floor-overview .yw-floor-grid [data-slot="desk"] { order: 3; }
  .yw-floor-overview .yw-floor-grid [data-slot="guests"] { order: 4; }
  .yw-floor-overview .yw-floor-grid [data-slot="reviews"] { order: 5; }
  .yw-floor-overview .yw-floor-grid [data-slot="week"] { order: 6; }
  .yw-floor-overview .yw-floor-grid [data-slot="calendar"] { order: 7; }
}

/* Today, the Dashboard hero: the lead figure's label over the big number,
   the round "···" beside the head link. */
.yw-floor-hero-actions { display: inline-flex; align-items: center; gap: 12px; }
.yw-floor-hero-label { margin: 16px 0 -12px; color: #59535f; font-size: 14px; }
.yw-floor-stamp { color: #87818c; }
.yw-floor-row-link { color: inherit; text-decoration: none; }
.yw-floor-row-link:hover { color: #7433d4; }
.yw-floor-hero .yw-row-stats { margin-top: 6px; }
.yw-floor-overview .yw-floor-hero .yw-row-stat { font-size: 13px; }
.yw-floor-overview .yw-floor-hero .yw-row-stat dd { font-size: 16px; }

/* Needs you: rows at their own height, the Dashboard's size; Dismiss the
   quiet round "x" (Get Found's) or plain grey text, never a box. */
.yw-floor-overview .yw-needs-row-link { padding: 13px 3px; }
.yw-floor-overview .yw-needs-row-title { font-size: 14px; line-height: 1.35; }
.yw-floor-overview .yw-needs-row-detail { font-size: 12px; line-height: 1.4; }
.yw-floor-overview .yw-needs-row-dismiss { flex-shrink: 0; }
.yw-floor-overview .yw-needs-row-dismiss button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #a09aa4; font-size: 17px; line-height: 1; cursor: pointer; }
.yw-floor-overview .yw-needs-row-dismiss button:hover { background: #eeeeee; color: #202024; }
/* 10/13 (owner: "without ai slop"): the Dashboard's rows, which share the
   card's height (overview.css, up to 140px each) instead of bunching at the
   top; each reason one line, the whole sentence the row's black hover
   (needs-attention.tsx NEEDS_DETAIL_FITS); Dismiss the quiet round x. */
.yw-floor-overview .yw-floor-grid [data-slot="needs"] .yw-needs-list > .yw-needs-row { flex: 1 1 auto; min-height: 76px; max-height: 132px; }
.yw-floor-overview .yw-needs-row-detail { white-space: nowrap; }
.yw-floor-overview .yw-needs-row-link[data-tip] { position: relative; }
.yw-floor-overview .yw-needs-row-link[data-tip]::after { position: absolute; top: calc(100% - 10px); left: 47px; z-index: 20; width: max-content; max-width: min(300px, calc(100% - 47px)); 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-floor-overview .yw-needs-row-link[data-tip]:hover::after { opacity: 1; transform: translateY(0); transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .yw-floor-overview .yw-needs-row-link[data-tip]::after { transition: none; } }
.yw-floor-overview .yw-needs-row-actions { margin: 0 0 0 4px; }
.yw-floor-overview .yw-needs-row-actions .yw-floor-dismiss { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #a09aa4; cursor: pointer; transition: background .16s, color .16s; }
.yw-floor-overview .yw-needs-row-actions .yw-floor-dismiss:hover { background: #eeeeee; color: #202024; }
.yw-floor-overview .yw-needs-row-actions .yw-floor-dismiss:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-floor-overview .yw-floor-dismiss .yw-floor-dismiss-word { display: none; }
.yw-floor-overview .yw-floor-dismiss .yw-floor-dismiss-x { display: inline; font-size: 17px; line-height: 1; }

/* The targets count: an ink value in the hero's rows, its misses the hover. */
.yw-floor-targets .hw-info-label { color: inherit; }
.yw-floor-targets-missed { margin: 6px 0 0; padding-left: 16px; list-style: disc; }
.yw-floor-targets-missed li + li { margin-top: 3px; }
.yw-floor-targets-missed a { color: var(--yw-tip-accent, #8553c2); }

/* Reviews and Guest contact: the Last full week rows fill their card; the
   platforms and the missed calls are the hero's label and value rows. */
.yw-floor-overview .yw-floor-kpi-card { display: flex; flex-direction: column; }
.yw-floor-overview :is(.yw-floor-platforms, [data-surface="floor.briefing.desk.tiles"]) .yw-row-stats { margin-top: 4px; }
.yw-floor-overview :is(.yw-floor-platforms, [data-surface="floor.briefing.desk.tiles"]) .yw-row-stat { font-size: 13px; }
.yw-floor-overview :is(.yw-floor-platforms, [data-surface="floor.briefing.desk.tiles"]) .yw-row-stat dd { font-size: 16px; }

/* Arrivals and departures: the quiet segmented control, the room as grey
   text, money owed as a grey figure; the Dashboard's row type. */
.yw-floor-overview .yw-floor-guest-tabs { gap: 2px; padding: 3px; border: 0; border-radius: 12px; background: #eeeded; }
.yw-floor-overview .yw-floor-guest-tabs > button { padding: 7px 10px; border-radius: 9px; background: transparent; color: #6f6975; font-size: 12px; font-weight: 500; box-shadow: none; }
.yw-floor-overview .yw-floor-guest-tabs > button:hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-floor-overview .yw-floor-guest-tabs > button[aria-selected="true"] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-floor-guest-room { color: #87818c; font-size: 12px; font-weight: 400; }
.yw-floor-guest-due { color: #59535f; font-size: 12px; font-weight: 500; }

/* Calendar: the Dashboard's type; an event is a thin violet mark. */
.yw-floor-cal-event[data-event], .yw-floor-cal-swatch[data-event] { background: #a883ee; }

/* Labor, last full week: the Last full week rows, four across. */
.yw-floor-overview .yw-floor-labor-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 1100px) { .yw-floor-overview .yw-floor-labor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yw-floor-overview .yw-floor-labor-tiles { grid-template-columns: minmax(0, 1fr); } }

/* Last 8 weeks: the Dashboard's striped bars, three across; turns and cost
   per room are label and value rows under them. */
.yw-floor-trends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.yw-floor-trend { min-width: 0; margin: 0; }
.yw-floor-trend-title { color: #59535f; font-size: 13px; }
.yw-floor-trend-box { position: relative; height: 180px; margin-top: 8px; }
.yw-floor-labor-counts { margin-top: 18px; }
@media (max-width: 1100px) { .yw-floor-trends { grid-template-columns: minmax(0, 1fr); } }

/* Payroll planning: sentence-case headers, "this week" a violet word. */
.yw-floor-overview [data-surface="floor.briefing.payroll"] :is(th, thead, thead tr) { color: #87818c; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.yw-floor-overview [data-surface="floor.briefing.payroll"] .uppercase { color: #59535f; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.yw-floor-overview [data-surface="floor.briefing.payroll"] span.uppercase { color: #7433d4; font-size: 12px; font-weight: 500; }

[data-theme-root].dark .yw-floor-hero-label, [data-theme-root].dark .yw-floor-trend-title { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-floor-stamp, .yw-floor-guest-room) { color: #a297ab; }
[data-theme-root].dark .yw-floor-guest-due { color: #c3b9cc; }
[data-theme-root].dark .yw-floor-overview .yw-needs-row-dismiss button:hover { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-floor-overview .yw-needs-row-actions .yw-floor-dismiss { color: #a297ab; }
[data-theme-root].dark .yw-floor-overview .yw-needs-row-actions .yw-floor-dismiss:hover { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-floor-overview .yw-floor-guest-tabs { border-color: #1c2843; background: #0f1a2e; }
[data-theme-root].dark .yw-floor-overview .yw-floor-guest-tabs > button { color: #a297ab; }
[data-theme-root].dark .yw-floor-overview .yw-floor-guest-tabs > button[aria-selected="true"] { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-floor-overview [data-surface="floor.briefing.payroll"] span.uppercase { color: #c9b1ff; }
/* Guest contact runs down the middle column (as Last full week does on the
   Dashboard): its rows share the card's height instead of bunching at the
   top. */
/* Balanced columns (10/12, after the first look): Guest contact stops
   spanning; it sits over the week ahead, the calendar takes its own full row
   under all three (as the Dashboard's Next 14 nights does), and the guest
   list scrolls inside its card past about eight guests, so no column runs on
   past its neighbours. */
.yw-floor-overview .yw-floor-grid [data-slot="desk"] { grid-column: 2; grid-row: 1; }
.yw-floor-overview .yw-floor-grid [data-slot="week"] { grid-column: 2; grid-row: 2; }
.yw-floor-overview .yw-floor-grid [data-slot="calendar"] { grid-column: 1 / -1; grid-row: 3; }
.yw-floor-overview [data-slot="week"] section { display: flex; flex-direction: column; }
@media (max-width: 1100px) {
  .yw-floor-overview .yw-floor-grid [data-slot="desk"] { grid-column: 1; grid-row: 2; }
  .yw-floor-overview .yw-floor-grid [data-slot="week"] { grid-column: 2; grid-row: 3; }
  .yw-floor-overview .yw-floor-grid [data-slot="calendar"] { grid-column: 1 / -1; grid-row: 4; }
}
.yw-floor-hero-note { margin: 10px 0 4px; color: #87818c; font-size: 12px; }
.yw-floor-hero-note a { color: inherit; text-decoration: underline; text-decoration-color: #d6d1db; text-underline-offset: 2px; }
.yw-floor-hero-note a:hover { color: #7433d4; }
[data-theme-root].dark .yw-floor-hero-note { color: #a297ab; }

/* ---- Guests, the week, reviews (10/13) ----------------------------------
   Owner: "we need to redesign these 3 containers with the new design style
   and fix those blank spaces". The Reviews hero sets the row's height; the
   guest list fills its card and scrolls inside it (it never sets the row's
   height), and the week's bars grow with their card over its three totals. */
.yw-floor-overview [data-slot="guests"] > section { display: flex; flex-direction: column; }
.yw-floor-overview [data-surface="floor.briefing.guests"] { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.yw-floor-overview .yw-floor-guest-list { flex: 1 1 0; min-height: 260px; margin: 8px -8px 0 0; padding: 0 8px 18px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.yw-floor-guest { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid #eae8ec; }
.yw-floor-guest:first-child { border-top: 0; }
.yw-floor-guest-room { flex-shrink: 0; min-width: 52px; max-width: 144px; overflow: hidden; padding-top: 2px; text-overflow: ellipsis; white-space: nowrap; }
.yw-floor-guest-main { min-width: 0; flex: 1 1 auto; }
.yw-floor-guest-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: #202024; font-size: 14px; line-height: 1.35; }
.yw-floor-guest-name > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-floor-guest-phone { color: #8553c2; font-size: 12px; text-decoration: none; }
.yw-floor-guest-phone:hover { text-decoration: underline; }
.yw-floor-guest-facts { margin-top: 2px; color: #87818c; font-size: 12px; }
.yw-floor-guest-name > .yw-floor-guest-type { color: #6f6975; font-size: 13px; }
.yw-floor-guest-due { flex-shrink: 0; padding-top: 2px; }
.yw-floor-guest-empty { margin: 14px 0 0; padding: 22px 0; color: #87818c; font-size: 13px; text-align: center; }
.yw-floor-guest-note .hw-info-label { color: inherit; }

.yw-floor-overview [data-slot="week"] .yw-night-chart { flex: 1 1 auto; min-height: 140px; height: auto; max-height: none; }
.yw-floor-overview [data-slot="week"] .yw-row-stats { margin-top: 12px; }
.yw-floor-overview :is([data-slot="week"], .yw-floor-reviews) .yw-row-stat { padding: 8px 0; font-size: 13px; }
.yw-floor-overview :is([data-slot="week"], .yw-floor-reviews) .yw-row-stat dd { font-size: 16px; }

/* Guest contact (10/13): two sections, Phone and Email. Each names its
   channel, leads with its graded figure (a larger number over the target
   bar, bar-row.tsx data-lead) and lists its counts as label and value rows. */
.yw-floor-overview .yw-floor-desk { display: flex; flex-direction: column; }
.yw-floor-channel { margin-top: 14px; }
.yw-floor-channel + .yw-floor-channel { margin-top: 20px; }
.yw-floor-channel-name { margin: 0; color: #202024; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -.2px; }
.yw-floor-bar-row[data-lead] { margin-top: 6px; padding-top: 0; border-top: 0; }
.yw-floor-bar-row[data-lead] .yw-floor-bar-row-head { align-items: flex-end; }
.yw-floor-bar-row[data-lead] .yw-floor-bar-row-value { color: #202024; font-size: 30px; line-height: 1.1; letter-spacing: -.04em; }
.yw-floor-channel > .yw-row-stats { margin-top: 8px; }
.yw-floor-overview .yw-floor-desk .yw-row-stat { padding: 8px 0; font-size: 13px; }
.yw-floor-overview .yw-floor-desk .yw-row-stat dd { font-size: 16px; }
[data-theme-root].dark .yw-floor-channel-name, [data-theme-root].dark .yw-floor-bar-row[data-lead] .yw-floor-bar-row-value { color: #f3eef8; }
.yw-floor-row-of { color: #87818c; font-size: 12px; font-weight: 400; letter-spacing: 0; }

.yw-floor-reviews .yw-floor-hero-of { color: #a59fab; font-size: .5em; letter-spacing: -.02em; }
/* One graded figure under a hero (bar-row.tsx): Reviews per stay, Guest
   contact's email first reply. */
.yw-floor-bar-row { margin-top: 16px; padding-top: 11px; border-top: 1px solid #eae8ec; }
.yw-floor-bar-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #87818c; font-size: 13px; }
.yw-floor-bar-row-value { color: #343039; font-size: 16px; font-weight: 500; }
.yw-floor-bar-row .yw-kpi-progress { height: 14px; margin-top: 10px; }
.yw-floor-bar-row-caption { margin: 7px 0 0; color: #87818c; font-size: 12px; }
.yw-floor-reviews > .yw-row-stats { margin-top: 12px; }
.yw-floor-split-label { margin: 14px 0 2px; color: #87818c; font-size: 12px; }
.yw-floor-reviews .yw-floor-platforms .yw-row-stat:first-child { border-top: 0; }

[data-theme-root].dark .yw-floor-guest { border-top-color: #1c2843; }
[data-theme-root].dark .yw-floor-guest-name { color: #f3eef8; }
[data-theme-root].dark .yw-floor-guest-name > .yw-floor-guest-type { color: #b9afc2; }
[data-theme-root].dark :is(.yw-floor-guest-facts, .yw-floor-guest-empty, .yw-floor-row-of, .yw-floor-bar-row-caption, .yw-floor-split-label, .yw-floor-bar-row-head) { color: #a297ab; }
[data-theme-root].dark .yw-floor-guest-phone { color: #c9b1ff; }
[data-theme-root].dark .yw-floor-overview .yw-floor-guest-list { scrollbar-color: #2a3654 transparent; }
[data-theme-root].dark .yw-floor-bar-row { border-top-color: #1c2843; }
[data-theme-root].dark .yw-floor-bar-row-value { color: #f3eef8; }
[data-theme-root].dark .yw-floor-reviews .yw-floor-hero-of { color: #8f8799; }

/* ---- The month (10/13) -----------------------------------------------------
   Owner: "this container needs to de re designed using the new design
   style". The Pricing calendar's tile anatomy (pricing-rates.css): soft
   tiles, the date small in the corner, today a violet dot, the busy ramp as
   the ground, the strong steps hatched; the arrows the round buttons. */
.yw-floor-month-nav { display: inline-flex; gap: 6px; }
.yw-floor-month-arrow { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #e2e1e4; border-radius: 50%; background: #fbfbfb; color: #59535f; font-size: 16px; line-height: 1; text-decoration: none; transition: border-color .2s, color .2s; }
.yw-floor-month-arrow:hover { border-color: #cfc6da; color: #202024; }
.yw-floor-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.yw-floor-month-dow { padding: 0 0 2px 9px; color: #a59fab; font-size: 10.5px; line-height: 1.5; }
.yw-floor-month-dow[data-weekend] { color: #8553c2; }
.yw-floor-month-tile { display: flex; min-width: 0; min-height: 74px; flex-direction: column; justify-content: space-between; padding: 8px 9px; border: 1px solid #ecebee; border-radius: 12px; background: #fbfbfb; color: #202024; text-decoration: none; transition: border-color .2s ease, filter .2s ease; }
.yw-floor-month-tile:hover { border-color: #b993ff; filter: saturate(1.15); }
.yw-floor-month-tile:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }
.yw-floor-month-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 13px; }
.yw-floor-month-date { color: #87818c; font-size: 11px; line-height: 1; white-space: nowrap; }
.yw-floor-month-tile[data-today] .yw-floor-month-date { display: inline-flex; align-items: center; gap: 4px; color: #7c3aed; font-weight: 600; }
.yw-floor-month-tile[data-today] .yw-floor-month-date::before { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); content: ""; }
.yw-floor-month-tile[data-day="selected"] { border-color: #7c3aed; box-shadow: inset 0 0 0 1px #7c3aed; }
.yw-floor-month-tile[data-day="past"] { opacity: .55; }
.yw-floor-month-moves { display: flex; flex-wrap: wrap; gap: 0 10px; color: #87818c; font-size: 11px; line-height: 1.25; white-space: nowrap; }
.yw-floor-month-moves b { margin-right: 2px; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
.yw-floor-month-pad { min-height: 74px; }
/* The busy ramp: arrivals plus departures against the month's busiest day
   (cards.tsx movementHeat), the Pricing calendar's five steps. */
:is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="1"] { border-color: #ebe2fb; background: #f6f2fd; }
:is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="2"] { border-color: #ddcdf9; background: #ece3fc; }
:is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="3"] { border-color: #cdb4f6; background: repeating-linear-gradient(125deg, #d6c1f9 0 2px, #e4d6fb 2px 4px); }
:is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="4"] { border-color: #a57af0; background: repeating-linear-gradient(125deg, #a678f0 0 2px, #b995f4 2px 4px); }
:is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="5"] { border-color: #7c3aed; background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #9a5ef2 2px 4px); }
.yw-floor-month-tile:is([data-heat="4"], [data-heat="5"]) :is(.yw-floor-month-date, .yw-floor-month-moves, .yw-floor-month-moves b) { color: #fff; }
.yw-floor-month-tile:is([data-heat="4"], [data-heat="5"]) .yw-floor-cal-event[data-event] { background: #fff; }
.yw-floor-month-tile:is([data-heat="4"], [data-heat="5"])[data-today] .yw-floor-month-date::before { background: #fff; box-shadow: none; }
/* One grey key line under the grid. */
.yw-floor-month-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 12px 0 0; color: #87818c; font-size: 11px; }
.yw-floor-month-key-item { display: inline-flex; align-items: center; gap: 6px; }
.yw-floor-month-key-ramp { display: inline-flex; gap: 2px; }
.yw-floor-month-key-ramp > i { display: block; width: 12px; height: 12px; border: 1px solid transparent; border-radius: 4px; }
@media (max-width: 800px) {
  .yw-floor-month-grid { gap: 4px; }
  .yw-floor-month-tile, .yw-floor-month-pad { min-height: 58px; padding: 6px; }
  .yw-floor-month-moves b { font-size: 13px; }
}
[data-theme-root].dark .yw-floor-month-arrow { border-color: #1c2843; background: #0d1527; color: #c3b9cc; }
[data-theme-root].dark .yw-floor-month-tile { border-color: #1c2843; background: #101a2f; color: #f3eef8; }
[data-theme-root].dark :is(.yw-floor-month-date, .yw-floor-month-moves, .yw-floor-month-key) { color: #a297ab; }
[data-theme-root].dark .yw-floor-month-moves b { color: #f3eef8; }
/* Dark: the Pricing calendar's dark ramp (pricing-rates.css), every step
   (the plain dark tile above would otherwise outrank the ramp). */
[data-theme-root].dark :is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="1"] { border-color: #3d3550; background: #322d3e; }
[data-theme-root].dark :is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="2"] { border-color: #4a3a63; background: #3a3050; }
[data-theme-root].dark :is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="3"] { border-color: #5c4a78; background: repeating-linear-gradient(125deg, #4c3b6c 0 2px, #413459 2px 4px); }
[data-theme-root].dark :is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="4"] { border-color: #7a5bb0; background: repeating-linear-gradient(125deg, #6c4ca6 0 2px, #5d4290 2px 4px); }
[data-theme-root].dark :is(.yw-floor-month-tile, .yw-floor-month-key-ramp > i)[data-heat="5"] { border-color: #9a6cf0; background: repeating-linear-gradient(125deg, #8a55e8 0 2px, #7646d2 2px 4px); }
[data-theme-root].dark .yw-floor-month-tile[data-today] .yw-floor-month-date { color: #c5a8ff; }
[data-theme-root].dark .yw-floor-month-tile[data-today] .yw-floor-month-date::before { background: #c5a8ff; box-shadow: none; }
[data-theme-root].dark .yw-floor-month-tile[data-day="selected"] { border-color: #c5a8ff; box-shadow: inset 0 0 0 1px #c5a8ff; }
[data-theme-root].dark .yw-floor-month-dow { color: #8f8799; }
[data-theme-root].dark .yw-floor-month-dow[data-weekend] { color: #c5a8ff; }


/* ---- Floor > Labor (10/13) -------------------------------------------------
   Owner: "lets do a complete re design on the labor tab and use the complete
   new design style, remmber everything we talked about". The Floor
   Overview's grid and parts (labor-dashboard.tsx): the hero and Next week
   beside the Key figures card, which runs down the middle through two rows
   the way the Dashboard's Last full week does; where the hours went and
   Needs you under them; the 8 weeks and the team table full width. Every
   card fills its cell. */
.yw-labor-page .yw-labor-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.06fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 16px; }
.yw-labor-grid > [data-slot] { display: flex; min-width: 0; flex-direction: column; }
.yw-labor-grid > [data-slot]:empty { display: none; }
.yw-labor-grid > [data-slot] > :is(section, .yw-needs) { flex: 1 1 auto; margin: 0; }
.yw-labor-grid > [data-slot="left"] { grid-column: 1; grid-row: 1; }
.yw-labor-grid > [data-slot="tiles"] { grid-column: 2; grid-row: 1; }
.yw-labor-grid > [data-slot="right"] { grid-column: 3; grid-row: 1; }
.yw-labor-grid > [data-slot="trend"] { grid-column: 1 / -1; grid-row: 2; }
.yw-labor-grid > [data-slot="team"] { grid-column: 1 / -1; grid-row: 3; }
/* The side columns are stacks (10/13): the first card its own height, the
   second grows to the column's foot with its rows spread. */
.yw-labor-grid > :is([data-slot="left"], [data-slot="right"]) { gap: 16px; }
.yw-labor-grid [data-part] { display: flex; min-width: 0; flex-direction: column; }
.yw-labor-grid [data-part]:empty { display: none; }
.yw-labor-grid [data-part] > :is(section, .yw-needs) { flex: 1 1 auto; margin: 0; }
.yw-labor-grid :is([data-part="hero"], [data-part="needs"]) { flex: 0 0 auto; }
.yw-labor-grid :is([data-part="hours"], [data-part="next"]) { flex: 1 1 auto; }
.yw-labor-page [data-part="hours"] > section { display: flex; flex-direction: column; }
.yw-labor-page [data-part="hours"] .yw-labor-hours { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-around; }
.yw-labor-page [data-part="next"] > section { display: flex; flex-direction: column; }
.yw-labor-page [data-part="next"] .yw-row-stats { display: flex; flex: 1 1 auto; flex-direction: column; margin: 6px 0 16px; }
.yw-labor-page [data-part="next"] .yw-row-stat { flex: 1 1 auto; align-items: center; }
@media (max-width: 1100px) {
  .yw-labor-page .yw-labor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-labor-grid > [data-slot="left"] { grid-column: 1; grid-row: 1; }
  .yw-labor-grid > [data-slot="right"] { grid-column: 2; grid-row: 1; }
  .yw-labor-grid > [data-slot="tiles"] { grid-column: 1 / -1; grid-row: 2; }
  .yw-labor-grid > [data-slot="trend"] { grid-column: 1 / -1; grid-row: 3; }
  .yw-labor-grid > [data-slot="team"] { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 760px) {
  .yw-labor-page .yw-labor-grid { grid-template-columns: minmax(0, 1fr); }
  .yw-labor-grid > [data-slot] { grid-column: 1 !important; grid-row: auto !important; }
}

/* The hero: the Floor Overview's hero type; its rows the hero's rows; the
   payroll note at the foot. */
.yw-labor-page .yw-floor-hero { display: flex; flex-direction: column; }
.yw-labor-page .yw-floor-hero .yw-hero-value { margin: 6px 0 6px; font-size: clamp(36px, 3.2vw, 46px); }
.yw-labor-page .yw-floor-hero .yw-row-stats { margin-top: 14px; }
.yw-labor-page .yw-row-stat { padding: 8px 0; font-size: 13px; }
.yw-labor-page .yw-row-stat dd { font-size: 16px; }
.yw-labor-hero-foot { margin: auto 0 0; padding-top: 12px; }
.yw-labor-hero-bar { margin-top: 14px; }
.yw-labor-hero-bar .yw-kpi-progress { height: 16px; }

/* Key figures: the five blocks share the card's height, the Dashboard's
   larger small type. */
.yw-labor-page .yw-floor-kpi-card { display: flex; flex-direction: column; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list { flex: 1 1 auto; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list > .group { flex: 1 1 auto; align-content: center; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list > .group > div:first-child .uppercase { font-size: 14px; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list > .group > div:not(:first-child):not(:last-child):not([data-slot]):not(.yw-kpi-progress) { font-size: 12px; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list > .group > p { font-size: 12px; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list > .group > [data-slot="stat-tile-row"]::before { font-size: 11px; }
.yw-labor-page [data-slot="tiles"] .yw-kpi-list > .group > div:last-child { font-size: 12px; }

/* Next week: its rows, then the one action as the kit's quiet violet
   button at the foot. */
.yw-labor-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 36px; margin-top: auto; padding: 0 14px; border: 1px solid #e3d9ee; border-radius: 10px; color: #7445a7; font-size: 12px; font-weight: 500; text-decoration: none; transition: background .16s, border-color .16s; }
.yw-labor-cta:hover { border-color: #d5c4e6; background: #f5f0fa; }
.yw-labor-cta:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* Where the hours went: one bar row a department, the first with no rule. */
.yw-labor-hours > :first-child .yw-floor-bar-row { margin-top: 10px; padding-top: 0; border-top: 0; }

/* Needs you: the Floor Overview's rows (the reason in the hover). */
.yw-labor-page [data-part="needs"] .yw-needs-row { min-height: 72px; }
.yw-labor-page .yw-needs-row-link { padding: 13px 3px; }
.yw-labor-page .yw-needs-row-title { font-size: 14px; line-height: 1.35; }
.yw-labor-page .yw-needs-row-link[data-tip] { position: relative; }
.yw-labor-page .yw-needs-row-link[data-tip]::after { position: absolute; top: calc(100% - 10px); left: 47px; z-index: 20; width: max-content; max-width: min(300px, calc(100% - 47px)); 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-labor-page .yw-needs-row-link[data-tip]:hover::after { opacity: 1; transform: translateY(0); transition-delay: .25s; }

/* Housekeeping team: the Dashboard's table type, figures right, grey words
   for the tags and the target, never a coloured chip. */
.yw-labor-team { margin: 10px -4px 0; overflow-x: auto; }
.yw-labor-team-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 13px; }
.yw-labor-team-table th { padding: 6px 8px 9px; border-bottom: 1px solid #eae8ec; color: #87818c; font-size: 12px; font-weight: 400; text-align: right; white-space: nowrap; }
.yw-labor-team-table td { padding: 11px 8px; border-bottom: 1px solid #f0eef2; color: #202024; text-align: right; white-space: nowrap; }
.yw-labor-team-table :is(th, td):first-child { text-align: left; }
.yw-labor-team-table td[data-muted] { color: #a59fab; }
.yw-labor-team-name { color: #202024; font-weight: 500; text-decoration: none; }
a.yw-labor-team-name:hover { color: #7433d4; }
.yw-labor-tag { margin-left: 8px; color: #87818c; font-size: 11px; }
.yw-labor-team-note { color: #a59fab; font-size: 11px; }
.yw-labor-team-target { color: #87818c; }
.yw-labor-team-target[data-on="no"] { color: #202024; }
.yw-labor-team-table tr[data-row="unmatched"] td { color: #87818c; font-size: 12px; text-align: left; }
.yw-labor-team-table tr[data-row="totals"] td { border-top: 1px solid #dcd8e0; border-bottom: 0; font-weight: 500; }

/* The plan and setup screens' one quiet way back. */
.yw-labor-back { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 0; font-size: 12px; }
.yw-labor-back a { color: #8553c2; text-decoration: none; }
.yw-labor-back a:hover { text-decoration: underline; }

[data-theme-root].dark .yw-labor-cta { border-color: #3d3150; color: #c9b1ff; }
[data-theme-root].dark .yw-labor-cta:hover { border-color: #4a3c60; background: #1b1d3a; }
[data-theme-root].dark .yw-labor-team-table th { border-bottom-color: #1c2843; color: #a297ab; }
[data-theme-root].dark .yw-labor-team-table td { border-bottom-color: #16223a; color: #f3eef8; }
[data-theme-root].dark .yw-labor-team-table td[data-muted], [data-theme-root].dark :is(.yw-labor-tag, .yw-labor-team-note, .yw-labor-team-target) { color: #a297ab; }
[data-theme-root].dark .yw-labor-team-name, [data-theme-root].dark .yw-labor-team-target[data-on="no"] { color: #f3eef8; }
[data-theme-root].dark .yw-labor-team-table tr[data-row="totals"] td { border-top-color: #2a3654; }
[data-theme-root].dark .yw-labor-back a { color: #c9b1ff; }

/* ---- Floor > Tasks (10/13) -------------------------------------------------
   Owner: "lets re design this tab also, get creative with the layout ... with
   the new design style". The four task views are the views card under the
   header (PageHeader viewsCard, as on Ads and Expenses; owner 10/13: "it
   should not be that small it should be like in the other tabs"), and the
   Board is a dispatch board
   (board-tab.tsx): the rooms by building on the left, the day, the team and
   a new task in a column beside them that stays in view while the rooms
   scroll. */

.yw-tasks-page .yw-tasks-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; margin-top: 16px; }
.yw-tasks-main { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
/* Under the pinned header, which carries the views row here (127px). */
.yw-tasks-side { position: sticky; top: 96px; display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-tasks-notice { margin: 14px 0 0; color: #59535f; font-size: 13px; }
.yw-tasks-notice[data-tone="miss"] { color: #202024; font-weight: 500; }
@media (max-width: 1100px) {
  .yw-tasks-page .yw-tasks-layout { grid-template-columns: minmax(0, 1fr); }
  .yw-tasks-side { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* The day: the Floor hero's type; its departments and the team as rows. */
.yw-tasks-page .yw-floor-hero .yw-hero-value { margin: 6px 0 6px; font-size: clamp(36px, 3.2vw, 46px); }
.yw-tasks-page .yw-floor-hero .yw-track { margin-top: 12px; }
.yw-tasks-page .yw-row-stats { margin-top: 10px; }
.yw-tasks-page .yw-row-stat { padding: 8px 0; font-size: 13px; }
.yw-tasks-page .yw-row-stat dd { font-size: 16px; }
.yw-tasks-dept, .yw-tasks-person { color: inherit; text-decoration: none; }
.yw-tasks-dept:hover, .yw-tasks-person:hover { color: #7433d4; }
.yw-tasks-dept-done, .yw-tasks-onsite { color: #87818c; font-size: 12px; font-weight: 400; }

/* The rooms: one row a room, the parts in columns. */
/* Each building's rooms scroll inside their card (owner 10/13: "where are the
   integrated scrollers?"), the Overview guest list's scroller: thin bar, the
   last row fading out so a cut row reads as more below. */
.yw-tasks-rooms { max-height: min(62vh, 560px); margin: 6px -8px 0 0; padding: 0 8px 14px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.yw-task-room { display: grid; grid-template-columns: minmax(150px, 1.5fr) 76px minmax(110px, .8fr) minmax(170px, 1.2fr) minmax(190px, 1.1fr); align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid #eae8ec; }
.yw-task-room:first-child { border-top: 0; }
.yw-task-room[data-open] { border-radius: 12px; background: #f6f2fd; }
.yw-task-room-name { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-task-room-code { color: #202024; font-size: 14px; font-weight: 500; }
.yw-task-room-where { overflow: hidden; color: #87818c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-task-room-stay { color: #59535f; font-size: 12px; }
.yw-task-room-steps { display: flex; align-items: center; gap: 8px; }
.yw-task-steps { display: inline-flex; gap: 3px; }
.yw-task-steps > i { display: block; width: 16px; height: 6px; border-radius: 3px; background: #ebe9ee; }
.yw-task-steps > i[data-on] { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #a578f2 2px 4px); }
.yw-task-room-status { color: #87818c; font-size: 12px; }
.yw-task-room[data-state="ready"] .yw-task-room-status { color: #202024; }
.yw-task-room-work { display: flex; min-width: 0; flex-direction: column; gap: 2px; color: #202024; font-size: 13px; }
.yw-task-room-work > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-task-room-muted { color: #87818c; font-size: 12px; }
.yw-task-room-who { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; gap: 4px; }
.yw-task-room-holder { color: #202024; font-size: 13px; font-weight: 500; }
.yw-task-assign { display: flex; align-items: center; gap: 6px; }
.yw-task-assign select { max-width: 150px; min-height: 32px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 9px; background-color: #fff; color: #202024; font-size: 12px; }
.yw-task-assign button { min-height: 32px; padding: 0 12px; border: 1px solid #e3d9ee; border-radius: 9px; background: #fff; color: #7445a7; font-size: 12px; font-weight: 500; transition: background .16s, border-color .16s; }
.yw-task-assign button:hover { border-color: #d5c4e6; background: #f5f0fa; }
.yw-task-assign :is(select, button):focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
@media (max-width: 900px) {
  .yw-task-room { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .yw-task-room-who { grid-column: 1 / -1; align-items: flex-start; }
}

/* A new task: a field, a quiet photo button, the one violet action. */
.yw-task-composer-row { display: flex; align-items: center; gap: 10px; }
.yw-tasks-new .yw-task-composer-row { flex-direction: column; align-items: stretch; margin-top: 10px; }
.yw-task-composer-input { min-width: 0; flex: 1 1 auto; min-height: 40px; padding: 0 12px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font-size: 13px; }
.yw-task-composer-input::placeholder { color: #a59fab; }
.yw-task-composer-input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-task-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yw-task-composer-photo { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px; background: #eeeded; color: #59535f; font-size: 12px; cursor: pointer; transition: background .16s; }
.yw-task-composer-photo:hover { background: #e8e4ed; }
.yw-task-composer-photo[data-on] { background: #f1ecfb; color: #7445a7; }
.yw-task-composer-photo svg { width: 15px; height: 15px; }
.yw-task-composer-draft { min-height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .16s; }
.yw-task-composer-draft:hover:not(:disabled) { background: #6d28d9; }
.yw-task-composer-draft:disabled { opacity: .45; cursor: default; }
.yw-task-composer-error { margin: 8px 0 0; color: #202024; font-size: 12px; font-weight: 500; }

/* Assign many: the assign board's own boxes on the card's ground. */
.yw-tasks-assign [class*="rounded-2xl"][class*="border"] { border-color: #eae8ec; border-radius: 16px; background: #fff; }
.yw-tasks-assign h3 { color: #202024; font-size: 14px; font-weight: 500; }
.yw-tasks-assign form ul { max-height: 300px; margin-right: -6px; padding: 0 6px 10px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.yw-tasks-assign a[class*="rounded-lg"] { border: 0; border-radius: 9px; background: #eeeded; color: #6f6975; font-weight: 500; }
.yw-tasks-assign a[class*="bg-violet-600"] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }

[data-theme-root].dark .yw-tasks-page .yw-card { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-task-room { border-top-color: #1c2843; }
[data-theme-root].dark :is(.yw-tasks-rooms, .yw-tasks-assign form ul) { scrollbar-color: #2a3654 transparent; }
[data-theme-root].dark .yw-task-room[data-open] { background: #1b1d3a; }
[data-theme-root].dark :is(.yw-task-room-code, .yw-task-room-work, .yw-task-room-holder, .yw-tasks-notice[data-tone="miss"]) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-task-room-where, .yw-task-room-stay, .yw-task-room-status, .yw-task-room-muted, .yw-tasks-dept-done, .yw-tasks-onsite, .yw-tasks-notice) { color: #a297ab; }
[data-theme-root].dark .yw-task-steps > i { background: #1c2843; }
[data-theme-root].dark :is(.yw-task-assign select, .yw-task-composer-input) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-task-assign button { border-color: #3d3150; background: #0b1122; color: #c9b1ff; }
[data-theme-root].dark .yw-task-composer-photo { background: #142036; color: #c3b9cc; }
[data-theme-root].dark .yw-tasks-assign [class*="rounded-2xl"][class*="border"] { border-color: #1c2843; background: #0b1122; }

/* ---- Floor > Tasks: Turns, Maintenance, Log (10/13) ------------------------
   Owner: "lets continue with the re design of these other sub tabs
   completely ... get creative and more intuitive. remember no ai slop".
   The Dashboard's cards on rows of equal height (.yw-tasks-row); every list
   and table scrolls inside its card with its head pinned (.yw-tasks-scroll);
   values in ink, moves and tags in grey, the slow and the missed in ink
   rather than red; the one violet is the action. turns-tab.tsx,
   maintenance-tab.tsx, log-tab.tsx. */
.yw-tasks-view > * { margin-top: 16px; }
.yw-tasks-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.yw-tasks-row[data-split="2-1"] { grid-auto-flow: row; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.yw-tasks-row[data-split="1-2"] { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* Pace by week is the wider table; alone (no Manage) it takes the row. */
.yw-tasks-row[data-split="team"]:has(> :nth-child(2)) { grid-auto-flow: row; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.yw-tasks-row > :is(section, .yw-tasks-stack) { margin: 0; }
.yw-tasks-stack { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-tasks-stack > section { margin: 0; }
.yw-tasks-stack > .yw-tasks-fill { flex: 1 1 auto; }
.yw-tasks-fill { display: flex; flex-direction: column; }
/* A short card in a tall row spreads its rows, so no card carries an empty band. */
.yw-tasks-fill > .yw-row-stats { display: flex; flex: 1 1 auto; flex-direction: column; }
.yw-tasks-fill > .yw-row-stats > .yw-row-stat { flex: 1 1 auto; align-items: center; }
@media (max-width: 1100px) {
  .yw-tasks-row, .yw-tasks-row[data-split] { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}

/* The hero and the second figure. */
.yw-tasks-view .yw-floor-hero { display: flex; flex-direction: column; }
.yw-tasks-view .yw-floor-hero .yw-hero-value { margin: 6px 0 6px; font-size: clamp(36px, 3.2vw, 46px); }
.yw-tasks-view .yw-floor-hero .yw-row-stats { margin-top: 14px; }
.yw-tasks-view .yw-row-stat { padding: 8px 0; font-size: 13px; }
.yw-tasks-view .yw-row-stat dd { font-size: 16px; }
.yw-tasks-view .yw-hero-pill .hw-info-label { color: inherit; font-size: inherit; }
.yw-tasks-big { margin: 14px 0 2px; color: #202024; font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.yw-tasks-quiet { color: #a59fab; font-size: 15px; font-weight: 400; letter-spacing: -.2px; }

/* The chart: the Dashboard's striped bars, a quiet switch in the head. */
.yw-tasks-seg { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 12px; background: #eeeded; }
.yw-tasks-seg > button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #6f6975; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .16s, color .16s; }
.yw-tasks-seg > button:hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-tasks-seg > button[aria-pressed="true"] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-tasks-seg > button:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-tasks-chart { position: relative; height: 240px; margin-top: 12px; }
.yw-tasks-chart[data-size="card"] { height: 220px; }
.yw-tasks-fill > .yw-tasks-chart { flex: 1 1 0; height: auto; min-height: 220px; }

/* The integrated scroller: the list scrolls inside its card, its head pinned,
   a thin bar, the last row fading so a cut row reads as more below. */
.yw-tasks-scroll { margin: 10px -8px 0; padding: 0 8px 12px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-tasks-scroll[data-size="team"] { max-height: 440px; }
.yw-tasks-scroll[data-size="list"] { max-height: min(62vh, 560px); }
.yw-tasks-scroll[data-size="card"] { max-height: 300px; }
.yw-tasks-fill > .yw-tasks-scroll[data-size="fill"] { flex: 1 1 0; min-height: 360px; }
[data-surface="floor.maintenance.log"] > .yw-tasks-scroll[data-size="fill"] { min-height: 380px; }

/* Tables: the Labor team table's look, the head pinned inside the scroller. */
.yw-tasks-table { width: 100%; min-width: 28rem; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.yw-tasks-table th { position: sticky; top: 0; z-index: 2; padding: 6px 8px 9px; border-bottom: 1px solid #eae8ec; background: #fbfbfb; color: #87818c; font-size: 12px; font-weight: 400; text-align: right; white-space: nowrap; }
.yw-tasks-table td { padding: 10px 8px; border-bottom: 1px solid #f0eef2; color: #202024; text-align: right; white-space: nowrap; vertical-align: middle; }
.yw-tasks-table :is(th, td):first-child { text-align: left; white-space: normal; }
.yw-tasks-table :is(th, td)[data-text] { text-align: left; }
.yw-tasks-table tbody tr:last-child td { border-bottom: 0; }
.yw-tasks-table td[data-muted] { color: #a59fab; }
.yw-tasks-table tr[data-row="group"] td { padding: 14px 8px 6px; border-bottom: 0; color: #87818c; font-size: 11px; }
.yw-tasks-table tr[data-open] td { background: #f6f2fd; }
.yw-tasks-cap::first-letter { text-transform: uppercase; }
.yw-tasks-person { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yw-tasks-person > :is(a, button):first-child { color: #202024; font-weight: 500; text-decoration: none; }
.yw-tasks-person > :is(a, button):first-child:hover { color: #7433d4; text-decoration: none; }
.yw-tasks-person .yw-tasks-tag { margin-left: 0; }
.yw-tasks-job { color: #202024; font-weight: 500; }
.yw-tasks-tag { margin-left: 8px; color: #87818c; font-size: 11px; font-weight: 400; white-space: nowrap; }
.yw-tasks-muted { color: #a59fab; }
.yw-tasks-heat { display: inline-flex; min-width: 2.4rem; justify-content: center; padding: 4px 6px; border-radius: 8px; background: #f4f3f6; color: #202024; font-size: 12px; font-weight: 500; }
.yw-tasks-heat[data-heat="0"] { background: #f3effb; }
.yw-tasks-heat[data-heat="1"] { background: #e7ddf9; }
.yw-tasks-heat[data-heat="2"] { background: #d6c4f5; }
.yw-tasks-heat[data-heat="3"] { background: #bea0f0; }
.yw-tasks-heat[data-heat="4"] { background: #9568e3; color: #fff; }
.yw-tasks-move { color: #87818c; font-size: 12px; }
.yw-tasks-move[data-tone="bad"] { color: #202024; font-weight: 500; }

/* Small things: a quiet line, a text button, the violet action, a link. */
.yw-tasks-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; color: #87818c; font-size: 12px; }
.yw-tasks-inline-form { display: inline; }
.yw-tasks-text-btn { padding: 0; border: 0; background: none; color: #8553c2; font-size: 12px; cursor: pointer; }
.yw-tasks-text-btn:hover { text-decoration: underline; }
.yw-tasks-link { color: #8553c2; font-size: 12px; font-weight: 500; text-decoration: none; }
.yw-tasks-link:hover { text-decoration: underline; }
.yw-tasks-link-quiet { text-decoration: none; }
.yw-tasks-link-quiet:hover { color: #7433d4; }
.yw-tasks-btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .16s; }
.yw-tasks-btn:hover { background: #6d28d9; }
.yw-tasks-btn:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* The room said short, the full name in the black hover; same for a holder's
   maintenance share. */
.yw-tasks-view :is(.yw-tasks-room, .yw-tasks-holder)[data-tip] { position: relative; }
.yw-tasks-view .yw-tasks-room[data-tip] { cursor: default; text-decoration: underline dotted #cfc9d6; text-underline-offset: 3px; }
.yw-tasks-view :is(.yw-tasks-room, .yw-tasks-holder)[data-tip]::after { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; width: max-content; max-width: 280px; 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; 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-tasks-view :is(.yw-tasks-room, .yw-tasks-holder)[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: .25s; }

/* Openable rows (work orders, closed work): one grid for the head and rows. */
.yw-tasks-drill-head, .yw-tasks-drill-row { display: grid; align-items: center; gap: 12px; padding: 0 8px; }
:is(.yw-tasks-drill-head, .yw-tasks-drill-row)[data-cols="work"] { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.1fr) 64px 70px; }
:is(.yw-tasks-drill-head, .yw-tasks-drill-row)[data-cols="log"] { grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1.5fr) 104px minmax(0, .8fr); }
:is(.yw-tasks-drill-head, .yw-tasks-drill-row) > :nth-child(n+4) { text-align: right; }
.yw-tasks-drill-head { position: sticky; top: 0; z-index: 2; padding-top: 6px; padding-bottom: 9px; border-bottom: 1px solid #eae8ec; background: #fbfbfb; color: #87818c; font-size: 12px; }
.yw-tasks-drill { border-bottom: 1px solid #f0eef2; }
.yw-tasks-drill:last-child { border-bottom: 0; }
.yw-tasks-drill-row { min-height: 44px; padding-top: 10px; padding-bottom: 10px; border-radius: 10px; color: #202024; font-size: 13px; list-style: none; cursor: pointer; transition: background .16s; }
.yw-tasks-drill-row::-webkit-details-marker { display: none; }
.yw-tasks-drill-row:hover { background: #f4f2f6; }
.yw-tasks-drill[open] > .yw-tasks-drill-row { background: #f6f2fd; }
.yw-tasks-drill-row > :not(.yw-tasks-room) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-tasks-drill-row:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }
.yw-tasks-drill-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 10px 8px 16px; }
.yw-tasks-drill-body dt { color: #87818c; font-size: 11px; }
.yw-tasks-drill-body dd { margin: 2px 0 0; color: #202024; font-size: 13px; overflow-wrap: anywhere; }
.yw-tasks-drill-links { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) {
  :is(.yw-tasks-drill-head, .yw-tasks-drill-row)[data-cols] { grid-template-columns: minmax(0, 1fr) auto; }
  :is(.yw-tasks-drill-head, .yw-tasks-drill-row)[data-cols] > :nth-child(2), :is(.yw-tasks-drill-head, .yw-tasks-drill-row)[data-cols] > :nth-child(3), :is(.yw-tasks-drill-head, .yw-tasks-drill-row)[data-cols] > :nth-child(5) { display: none; }
  .yw-tasks-drill-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Open for: each age band a filter, the bar its share of the longest band. */
.yw-tasks-bands { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-around; margin-top: 2px; }
.yw-tasks-band { display: block; margin: 0 -10px; padding: 0 10px 10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .16s; }
.yw-tasks-band:hover { background: #f4f2f6; }
.yw-tasks-band[data-active] { background: #f1ecfb; }
.yw-tasks-band .yw-floor-bar-row { margin-top: 0; padding-top: 10px; }
.yw-tasks-band:first-child .yw-floor-bar-row { border-top: 0; }
.yw-tasks-band .yw-track { margin-top: 10px; }
.yw-tasks-band:focus-visible { outline: 2px solid #b993ff; outline-offset: 0; }

/* Who holds it / Who closed it: a name, its tags, its count; each a filter. */
.yw-tasks-holders { margin: 8px -8px 0; padding: 0 8px 10px; list-style: none; }
.yw-tasks-holder { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-radius: 10px; color: #202024; font-size: 13px; text-decoration: none; transition: background .16s; }
.yw-tasks-holders > li + li > .yw-tasks-holder { box-shadow: inset 0 1px 0 #f0eef2; }
.yw-tasks-holder:hover { background: #f4f2f6; box-shadow: none; }
.yw-tasks-holder[data-active] { background: #f1ecfb; }
.yw-tasks-holder[data-hot] .yw-tasks-holder-name { font-weight: 500; }
.yw-tasks-holder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-tasks-holder .num { flex-shrink: 0; font-size: 15px; font-weight: 500; }
.yw-tasks-holder:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }

/* One job's costs: totals, labor and its lines, the two forms side by side. */
.yw-tasks-costs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr); gap: 28px; margin-top: 8px; }
.yw-tasks-label { margin: 6px 0 8px; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.yw-tasks-line { margin: 0; color: #59535f; font-size: 13px; line-height: 1.45; }
.yw-tasks-figure { margin: 8px 0 12px; color: #202024; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.yw-tasks-cost-lines { margin: 14px 0 0; padding: 0; list-style: none; }
.yw-tasks-cost-lines > li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0eef2; color: #202024; font-size: 13px; }
.yw-tasks-cost-lines .yw-tasks-tag { margin-left: 0; }
.yw-tasks-cost-what { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-tasks-cost-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.yw-tasks-form { display: flex; flex-direction: column; gap: 10px; }
.yw-tasks-form .yw-tasks-label { margin-bottom: 2px; }
.yw-tasks-form label { display: flex; flex-direction: column; gap: 5px; color: #87818c; font-size: 12px; }
.yw-tasks-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yw-tasks-form .yw-tasks-btn { align-self: flex-start; }
:is(.yw-tasks-form, .yw-tasks-logform) :is(input, select) { min-height: 36px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font-size: 13px; }
:is(.yw-tasks-form, .yw-tasks-logform) :is(input, select):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
@media (max-width: 1100px) {
  .yw-tasks-costs-body { grid-template-columns: minmax(0, 1fr); }
}

/* Log work by hand: the one work-order form, on the card's ground. */
.yw-tasks-logform form { margin-top: 12px; }
.yw-tasks-logform form > div { gap: 12px; }
.yw-tasks-logform label { color: #87818c; font-size: 12px; }
.yw-tasks-logform :is(input, select) { margin-top: 5px; }
.yw-tasks-logform button[type="submit"] { min-height: 34px; padding: 0 16px; border-radius: 10px; background: #7c3aed; font-size: 12px; font-weight: 500; }
.yw-tasks-logform button[type="submit"]:hover { background: #6d28d9; }

[data-theme-root].dark .yw-tasks-view .yw-card { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark :is(.yw-tasks-big, .yw-tasks-job, .yw-tasks-label, .yw-tasks-figure) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-tasks-quiet, .yw-tasks-muted, .yw-tasks-tag, .yw-tasks-move, .yw-tasks-foot, .yw-tasks-line) { color: #a297ab; }
[data-theme-root].dark .yw-tasks-move[data-tone="bad"] { color: #f3eef8; }
[data-theme-root].dark .yw-tasks-seg { background: #142036; }
[data-theme-root].dark .yw-tasks-seg > button { color: #c3b9cc; }
[data-theme-root].dark .yw-tasks-seg > button:hover { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-tasks-seg > button[aria-pressed="true"] { background: #243352; color: #f3eef8; box-shadow: none; }
[data-theme-root].dark .yw-tasks-scroll { scrollbar-color: #2a3654 transparent; }
[data-theme-root].dark :is(.yw-tasks-table th, .yw-tasks-drill-head) { border-bottom-color: #1c2843; background: #0d1527; color: #a297ab; }
[data-theme-root].dark .yw-tasks-table td { border-bottom-color: #16223a; color: #f3eef8; }
[data-theme-root].dark .yw-tasks-table td[data-muted] { color: #a297ab; }
[data-theme-root].dark .yw-tasks-table tr[data-open] td, [data-theme-root].dark .yw-tasks-drill[open] > .yw-tasks-drill-row { background: #1b1d3a; }
[data-theme-root].dark .yw-tasks-person > :is(a, button):first-child, [data-theme-root].dark :is(.yw-tasks-drill-row, .yw-tasks-holder, .yw-tasks-drill-body dd, .yw-tasks-cost-lines > li) { color: #f3eef8; }
[data-theme-root].dark .yw-tasks-drill { border-bottom-color: #16223a; }
[data-theme-root].dark :is(.yw-tasks-drill-row, .yw-tasks-band, .yw-tasks-holder):hover { background: #142036; }
[data-theme-root].dark :is(.yw-tasks-band, .yw-tasks-holder)[data-active] { background: #1b1d3a; }
[data-theme-root].dark .yw-tasks-holders > li + li > .yw-tasks-holder { box-shadow: inset 0 1px 0 #16223a; }
[data-theme-root].dark .yw-tasks-cost-lines > li { border-top-color: #16223a; }
[data-theme-root].dark .yw-tasks-heat { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-tasks-heat[data-heat="0"] { background: #1a1f3d; }
[data-theme-root].dark .yw-tasks-heat[data-heat="1"] { background: #262650; }
[data-theme-root].dark .yw-tasks-heat[data-heat="2"] { background: #37306a; }
[data-theme-root].dark .yw-tasks-heat[data-heat="3"] { background: #4d3d8c; }
[data-theme-root].dark .yw-tasks-heat[data-heat="4"] { background: #6d4fc0; color: #fff; }
[data-theme-root].dark .yw-tasks-room[data-tip] { text-decoration-color: #3a4560; }
[data-theme-root].dark :is(.yw-tasks-form, .yw-tasks-logform) :is(input, select) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark :is(.yw-tasks-link, .yw-tasks-text-btn) { color: #c9b1ff; }

/* ---- Floor > Desk (10/13) ---------------------------------------------------
   Owner: "lets start the re design on this tab remember no ai slop ... with
   the new design style". Phone and Email side by side, the miss map under
   them, Needs you down the right the full height of both rows with its list
   scrolling inside the card (calls-tab.tsx). The root also wears
   .yw-tasks-view, so the hero, rows, tags and hovers read as the Tasks
   views do. */
.yw-desk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "phone email needs" "map map needs"; gap: 16px; align-items: stretch; }
.yw-desk-grid > [data-slot] { min-width: 0; margin: 0; }
.yw-desk-grid > [data-slot="phone"] { grid-area: phone; }
.yw-desk-grid > [data-slot="email"] { grid-area: email; }
.yw-desk-grid > [data-slot="map"] { grid-area: map; }
/* Needs you takes the height the other cards set and scrolls inside it, so a
   long list never stretches the page. */
.yw-desk-grid > [data-slot="needs"] { position: relative; grid-area: needs; min-height: 420px; }
.yw-desk-grid > [data-slot="needs"] > .yw-needs-card { position: absolute; inset: 0; }
.yw-desk-view [data-slot="needs"] .yw-needs-list { flex: 1 1 0; min-height: 0; margin-right: -8px; padding-right: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.yw-desk-view [data-slot="phone"] .yw-floor-bar-row { margin-top: 18px; }
.yw-desk-view [data-slot="email"] .yw-row-stats { margin-top: 14px; }
@media (max-width: 1100px) {
  .yw-desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "phone email" "map map" "needs needs"; }
  .yw-desk-grid > [data-slot="needs"] { min-height: 0; }
  .yw-desk-grid > [data-slot="needs"] > .yw-needs-card { position: static; }
}
@media (max-width: 760px) {
  .yw-desk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "phone" "email" "map" "needs"; }
}

/* When we miss the phone (10/13; owner: "make it more intuitive and
   creative"). The map and its key on the left; what it found and why the
   calls were missed on the right. Each square says only what was missed:
   grey when every call was answered, pink with the number missed, the
   Dashboard's pink stripe under the answer threshold. Bars over the hours
   are the volume in grey with the missed share on top in pink; each day
   ends in its missed total. calls-patterns.tsx DeskMissMap. */
.yw-desk-map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 28px; align-items: start; margin-top: 12px; }
.yw-desk-map-main { min-width: 0; }
.yw-desk-map-side { display: flex; min-width: 0; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .yw-desk-map-wrap { grid-template-columns: minmax(0, 1fr); } }

.yw-desk-map { display: grid; gap: 4px; align-items: center; }
.yw-desk-map-col { overflow: visible; color: #87818c; font-size: 11px; white-space: nowrap; }
.yw-desk-map-col:is([data-after], [data-total]) { text-align: center; }
.yw-desk-map-day { color: #59535f; font-size: 12px; }

.yw-desk-map-bar { position: relative; display: flex; height: 46px; align-items: flex-end; justify-content: center; cursor: default; }
.yw-desk-map-bar-fill { display: flex; width: 72%; max-width: 22px; flex-direction: column; overflow: hidden; border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(125deg, #bdb7c4 0 2px, #e4e1e8 2px 4px); transform-origin: bottom; animation: yw-bar-in .9s cubic-bezier(.2, .8, .2, 1) both; }
.yw-desk-map-bar-fill > i { display: block; flex-shrink: 0; width: 100%; background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f4c4db 2px 4px); }

.yw-desk-map-cell { position: relative; display: flex; height: 30px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 7px; background: #f6f5f8; color: #202024; font-size: 12px; font-weight: 500; cursor: default; transition: box-shadow .16s; }
.yw-desk-map-cell[data-state="ok"] { background: #e6e3ea; }
.yw-desk-map-cell[data-state="missed"] { border-color: #f2c3d8; background: #fbe4ee; }
.yw-desk-map-cell[data-state="missed"][data-level="2"] { border-color: #ea9fc2; background: #f6c8dd; }
.yw-desk-map-cell[data-state="missed"][data-level="3"] { border-color: #d65e9e; background: #e895bc; color: #fff; }
.yw-desk-map-cell[data-flag] { border-color: #d65e9e; background: repeating-linear-gradient(125deg, #e98bb8 0 2px, #f9dce9 2px 4px); color: #202024; }
.yw-desk-map-cell[data-flag][data-level="3"] { background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #eb9ec3 2px 4px); color: #fff; }
.yw-desk-map-cell[data-after][data-state="ok"] { background: #ecebef; }
.yw-desk-map-cell:not([data-state="none"]):hover { box-shadow: 0 0 0 2px rgba(124, 58, 237, .22); }

.yw-desk-map-total { position: relative; display: flex; align-items: center; gap: 6px; padding-left: 8px; cursor: default; }
.yw-desk-map-total b { min-width: 16px; color: #202024; font-size: 13px; font-weight: 500; text-align: right; }
.yw-desk-map-total i { display: block; height: 8px; border-radius: 4px; background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f4c4db 2px 4px); transform-origin: left; animation: yw-scale-in 1s cubic-bezier(.2, .8, .2, 1) both; }

/* Every square, bar and total says itself in the black hover. */
:is(.yw-desk-map, .yw-desk-why-bar) [data-tip]::after { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 30; width: max-content; max-width: 240px; 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: translate(-50%, 4px); transition: opacity .16s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
:is(.yw-desk-map, .yw-desk-why-bar) [data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .2s; }

.yw-desk-map-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0 38px; color: #87818c; font-size: 11px; }
.yw-desk-map-key > span { display: inline-flex; align-items: center; gap: 6px; }
.yw-desk-map-key i { display: block; width: 14px; height: 10px; border: 1px solid transparent; border-radius: 3px; }
.yw-desk-map-key i[data-state="ok"] { background: #e6e3ea; }
.yw-desk-map-key i[data-state="missed"] { border-color: #ea9fc2; background: #f6c8dd; }
.yw-desk-map-key i[data-flag] { border-color: #d65e9e; background: repeating-linear-gradient(125deg, #e98bb8 0 2px, #f9dce9 2px 4px); }

/* What the map found: the weakest hour and day, the best hour. */
.yw-desk-facts { margin: 0; }
.yw-desk-view .yw-desk-facts .yw-row-stat { align-items: center; padding: 9px 0; }
.yw-desk-view .yw-desk-facts dd { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 15px; }
.yw-desk-facts .yw-tasks-tag { margin-left: 0; }

/* Why missed: one bar split by reason, then each reason with its share. */
.yw-desk-why-bar { display: flex; height: 12px; gap: 2px; margin: 10px 0 2px; }
.yw-desk-why-bar > i { position: relative; display: block; min-width: 6px; border-radius: 3px; transform-origin: left; animation: yw-scale-in 1s cubic-bezier(.2, .8, .2, 1) both; }
:is(.yw-desk-why-bar > i, .yw-desk-why-swatch)[data-i="0"] { background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f2bdd6 2px 4px); }
:is(.yw-desk-why-bar > i, .yw-desk-why-swatch)[data-i="1"] { background: repeating-linear-gradient(125deg, #e48ab5 0 2px, #f8d6e6 2px 4px); }
:is(.yw-desk-why-bar > i, .yw-desk-why-swatch)[data-i="2"] { background: #efb3cf; }
:is(.yw-desk-why-bar > i, .yw-desk-why-swatch)[data-i="3"] { background: #f5cfe0; }
:is(.yw-desk-why-bar > i, .yw-desk-why-swatch)[data-i="4"] { background: #fae3ee; }
.yw-desk-why-list { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-desk-why-list > li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 34px; align-items: baseline; gap: 8px; padding: 9px 0; border-top: 1px solid #eae8ec; color: #59535f; font-size: 13px; line-height: 1.35; }
.yw-desk-why-list > li:first-child { border-top: 0; }
.yw-desk-why-swatch { display: block; width: 10px; height: 10px; align-self: center; border-radius: 3px; }
.yw-desk-why-count { color: #202024; font-size: 16px; font-weight: 500; }
.yw-desk-why-share { color: #87818c; font-size: 12px; text-align: right; }

[data-theme-root].dark .yw-desk-map-col, [data-theme-root].dark :is(.yw-desk-map-key, .yw-desk-why-share) { color: #a297ab; }
[data-theme-root].dark :is(.yw-desk-map-day, .yw-desk-why-list > li) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-desk-map-total b, .yw-desk-why-count) { color: #f3eef8; }
[data-theme-root].dark .yw-desk-why-list > li { border-top-color: #1c2843; }
[data-theme-root].dark .yw-desk-map-bar-fill { background: repeating-linear-gradient(125deg, #5b6378 0 2px, #2a3349 2px 4px); }
[data-theme-root].dark .yw-desk-map-cell { background: #111a2e; color: #f3eef8; }
[data-theme-root].dark :is(.yw-desk-map-cell, .yw-desk-map-key i)[data-state="ok"] { background: #223049; }
[data-theme-root].dark .yw-desk-map-cell[data-after][data-state="ok"] { background: #1c2840; }
[data-theme-root].dark .yw-desk-map-cell[data-state="missed"] { border-color: #6b3f58; background: #3a2638; }
[data-theme-root].dark .yw-desk-map-cell[data-state="missed"][data-level="2"] { border-color: #8a4a6a; background: #5a3150; }
[data-theme-root].dark .yw-desk-map-cell[data-state="missed"][data-level="3"] { border-color: #b4598a; background: #8a3f6a; }
[data-theme-root].dark :is(.yw-desk-map-cell, .yw-desk-map-key i)[data-flag] { border-color: #b4598a; background: repeating-linear-gradient(125deg, #b4598a 0 2px, #4d3345 2px 4px); color: #fff; }
[data-theme-root].dark .yw-desk-view [data-slot="needs"] .yw-needs-list { scrollbar-color: #2a3654 transparent; }

/* ---- Inbox (10/13) -----------------------------------------------------------
   Owner: "lets start with the re design of the inbox tab. remember no ai slop",
   then "it needs to feel like an actual inbox so lets get creative". One mail
   window, three panes, the height of the screen (inbox/queue-view.tsx): the
   rail with the boxes as folders, the list under its day headings, and the
   message being read with the reply docked at its foot. Each pane scrolls on
   its own. The root also wears .yw-tasks-view for the rows and hovers the
   Floor views share. */
.yw-inbox-setup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 22px; }
.yw-inbox-setup-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: #59535f; font-size: 13px; }
.yw-inbox-setup-text .hw-info-label { color: #202024; font-weight: 500; }
.yw-inbox-quiet-btn { padding: 0; border: 0; background: none; color: #87818c; font-size: 12px; cursor: pointer; }
.yw-inbox-quiet-btn:hover { color: #202024; text-decoration: underline; }

/* Auto-replies, the full card on the Auto-replies tab. */
.yw-inbox-meter { margin-top: 14px; }
.yw-inbox-meter .yw-track-labels { margin-bottom: 4px; }
.yw-inbox-mode-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.yw-inbox-mode-actions .yw-labor-cta { margin-top: 0; }
.yw-inbox-consent { margin-top: 12px; color: #59535f; font-size: 12px; line-height: 1.5; }
.yw-inbox-consent > summary { width: max-content; color: #8553c2; font-size: 12px; font-weight: 500; list-style: none; cursor: pointer; }
.yw-inbox-consent > summary::-webkit-details-marker { display: none; }
.yw-inbox-consent > p { margin: 8px 0 10px; }

/* The window. */
.yw-inbox-shell { display: grid; grid-template-columns: 236px minmax(300px, 1fr) minmax(0, 1.55fr); height: calc(100vh - 240px); min-height: 560px; padding: 0; overflow: hidden; }
.yw-inbox-shell > * { min-width: 0; min-height: 0; }
@media (max-width: 1240px) { .yw-inbox-shell { grid-template-columns: 208px minmax(270px, 1fr) minmax(0, 1.3fr); } }
@media (max-width: 1000px) {
  .yw-inbox-shell { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .yw-inbox-rail, .yw-inbox-list { border-right: 0; border-bottom: 1px solid #eae8ec; }
  .yw-inbox-list { max-height: 70vh; }
}

/* Every hover in the window: the app's black hover, under its owner. */
.yw-inbox-shell :is(.yw-inbox-folder, .yw-inbox-tool, .yw-inbox-pager-btn, .yw-inbox-link)[data-tip] { position: relative; }
.yw-inbox-shell :is(.yw-inbox-folder, .yw-inbox-tool, .yw-inbox-pager-btn, .yw-inbox-link)[data-tip]::after { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max-content; max-width: 220px; 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; overflow-wrap: anywhere; 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-inbox-shell :is(.yw-inbox-folder, .yw-inbox-tool, .yw-inbox-pager-btn, .yw-inbox-link)[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: .35s; }
.yw-inbox-shell :is(.yw-inbox-tool, .yw-inbox-pager-btn)[data-tip]::after { right: 0; left: auto; }
.yw-inbox-shell .yw-inbox-link[data-tip]::after { max-width: 380px; }

/* The rail. */
.yw-inbox-rail { display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 18px; overflow-y: auto; border-right: 1px solid #eae8ec; background: #f5f4f7; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-inbox-folders { display: flex; flex-direction: column; gap: 2px; }
.yw-inbox-folder { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #59535f; font-size: 13px; text-decoration: none; transition: background .16s, color .16s, box-shadow .16s; }
.yw-inbox-folder svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #8f8996; }
.yw-inbox-folder-name { min-width: 0; flex: 1 1 auto; }
.yw-inbox-folder-count { color: #a59fab; font-size: 12px; }
.yw-inbox-folder:hover { background: rgba(255, 255, 255, .7); color: #202024; }
.yw-inbox-folder[aria-current] { background: #fff; color: #202024; font-weight: 500; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
.yw-inbox-folder[aria-current] svg { color: #7c3aed; }
.yw-inbox-folder[data-urgent] .yw-inbox-folder-count { min-width: 22px; padding: 1px 7px; border-radius: 10px; background: #fbe4ee; color: #202024; font-weight: 500; text-align: center; }
.yw-inbox-folder:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }
.yw-inbox-rail-btn { min-height: 30px; padding: 0 12px; border: 1px solid #e3d9ee; border-radius: 9px; background: #fff; color: #7445a7; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-inbox-rail-btn:hover { border-color: #d5c4e6; background: #f5f0fa; }

/* The list. */
.yw-inbox-list { display: flex; flex-direction: column; border-right: 1px solid #eae8ec; background: #fbfbfb; }
.yw-inbox-list-head { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px 12px; border-bottom: 1px solid #eae8ec; }
.yw-inbox-list-title { display: flex; align-items: baseline; gap: 8px; margin: 0; color: #202024; font-size: 19px; font-weight: 500; letter-spacing: -.5px; }
.yw-inbox-list-count { color: #a59fab; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.yw-inbox-search { position: relative; display: flex; align-items: center; }
.yw-inbox-search > svg { position: absolute; left: 10px; width: 15px; height: 15px; fill: none; stroke: #a59fab; stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.yw-inbox-search > input { width: 100%; min-height: 34px; padding: 0 30px 0 32px; border: 1px solid #e6e3ea; border-radius: 10px; background: #f4f3f6; color: #202024; font-size: 13px; }
.yw-inbox-search > input::placeholder { color: #a59fab; }
.yw-inbox-search > input:focus { border-color: #b993ff; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-inbox-search-clear { position: absolute; right: 10px; color: #87818c; font-size: 16px; line-height: 1; text-decoration: none; }
.yw-inbox-list-empty { margin: auto; padding: 24px; color: #87818c; font-size: 13px; text-align: center; }
.yw-inbox-rows { flex: 1 1 0; min-height: 0; margin: 0; padding: 0 8px 14px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-inbox-rows ul { margin: 0; padding: 0; list-style: none; }
.yw-inbox-day { position: sticky; top: 0; z-index: 2; margin: 0 -8px; padding: 12px 16px 6px; background: rgba(251, 251, 251, .94); color: #87818c; font-size: 11.5px; font-weight: 500; backdrop-filter: blur(6px); }
.yw-inbox-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 10px 8px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .16s; }
.yw-inbox-row:hover { background: #f2f0f5; }
.yw-inbox-row[aria-current] { background: #efe8fc; }
.yw-inbox-row:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }
.yw-inbox-row-main { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-inbox-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yw-inbox-row-from { overflow: hidden; color: #202024; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.yw-inbox-row:not([data-open]) .yw-inbox-row-from { color: #59535f; font-weight: 400; }
.yw-inbox-row-count { margin-left: 6px; color: #a59fab; font-size: 11.5px; font-weight: 400; }
.yw-inbox-row-time { flex-shrink: 0; color: #a59fab; font-size: 11px; }
.yw-inbox-row-subject { overflow: hidden; color: #202024; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.yw-inbox-row-snippet { display: -webkit-box; overflow: hidden; color: #87818c; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.yw-inbox-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.yw-inbox-row-tags > span { padding: 1px 7px; border-radius: 6px; background: #efedf2; color: #6f6975; font-size: 10.5px; }
.yw-inbox-row-tags > [data-tag="draft"] { background: #efe8fc; color: #5b2bb8; }

/* The sender's circle: initials on a steady tone, a pink dot when urgent. */
.yw-inbox-avatar { position: relative; display: inline-flex; width: 36px; height: 36px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.yw-inbox-avatar[data-size="lg"] { width: 42px; height: 42px; font-size: 14px; }
.yw-inbox-avatar[data-tone="0"] { background: #efe8fc; color: #6d35c9; }
.yw-inbox-avatar[data-tone="1"] { background: #fbe4ee; color: #a33a6b; }
.yw-inbox-avatar[data-tone="2"] { background: #fbf0de; color: #9a6a20; }
.yw-inbox-avatar[data-tone="3"] { background: #e2f1eb; color: #2a7a5f; }
.yw-inbox-avatar[data-tone="4"] { background: #e5ecf8; color: #3d5e95; }
.yw-inbox-avatar[data-tone="5"] { background: #efedf2; color: #59535f; }
.yw-inbox-avatar[data-urgent]::after { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border: 2px solid #fbfbfb; border-radius: 50%; background: #d65e9e; content: ""; }

/* The message being read. */
.yw-inbox-reader { display: flex; flex-direction: column; background: #fff; }
.yw-inbox-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 16px 10px 22px; border-bottom: 1px solid #eae8ec; }
.yw-inbox-reader-kind { padding: 3px 9px; border-radius: 8px; background: #f0eef3; color: #59535f; font-size: 12px; }
.yw-inbox-reader-kind[data-urgent] { background: #fbe4ee; color: #202024; }
.yw-inbox-reader-kind .hw-info-label { color: inherit; }
.yw-inbox-reader-tools { display: flex; align-items: center; gap: 4px; }
.yw-inbox-tool { display: inline-flex; }
.yw-inbox-tool-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #59535f; font-size: 12px; cursor: pointer; transition: background .16s, color .16s; }
.yw-inbox-tool-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yw-inbox-tool-btn:hover { background: #f2f0f5; color: #202024; }
.yw-inbox-pager { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding-left: 12px; border-left: 1px solid #eae8ec; color: #87818c; font-size: 12px; }
.yw-inbox-pager > .num { margin-right: 6px; }
.yw-inbox-pager-btn { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; color: #59535f; font-size: 18px; line-height: 1; text-decoration: none; transition: background .16s; }
.yw-inbox-pager-btn:hover { background: #f2f0f5; color: #202024; }
.yw-inbox-pager-btn[aria-disabled] { color: #d4d0d9; pointer-events: none; }
.yw-inbox-reader-scroll { flex: 1 1 0; min-height: 0; padding: 22px 28px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-inbox-reader-subject { margin: 0 0 18px; color: #202024; font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.yw-inbox-reader-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 20px; }
.yw-inbox-reader-from { display: flex; min-width: 0; flex-direction: column; }
.yw-inbox-reader-name { color: #202024; font-size: 14px; font-weight: 500; }
.yw-inbox-reader-email { overflow: hidden; color: #87818c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-inbox-reader-time { color: #87818c; font-size: 12px; white-space: nowrap; }
.yw-inbox-body { max-width: 74ch; color: #202024; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.yw-inbox-link { display: inline-flex; width: 20px; height: 18px; align-items: center; justify-content: center; margin: 0 2px; border-radius: 5px; background: #f0eef3; color: #8f8996; vertical-align: -3px; cursor: default; }
.yw-inbox-link > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yw-inbox-link:hover { background: #e7e3ec; color: #59535f; }
.yw-inbox-muted { color: #a59fab; }
.yw-inbox-sent { max-width: 74ch; margin-top: 24px; padding: 14px 16px; border-left: 3px solid #d9cdf7; border-radius: 0 12px 12px 0; background: #f7f5fb; }
.yw-inbox-sent-label { margin: 0 0 6px; color: #87818c; font-size: 11.5px; }
.yw-inbox-sent-text { margin: 0; color: #202024; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.yw-inbox-thread { max-width: 74ch; margin-top: 28px; padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-inbox-thread-title { margin: 0 0 6px; color: #87818c; font-size: 12px; }
.yw-inbox-thread ul { margin: 0; padding: 0; list-style: none; }
.yw-inbox-thread-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; padding: 8px 6px; border-radius: 8px; color: inherit; font-size: 12.5px; text-decoration: none; }
.yw-inbox-thread-row:hover { background: #f4f2f6; }
.yw-inbox-thread-time, .yw-inbox-thread-state { color: #87818c; }
.yw-inbox-thread-subject { overflow: hidden; color: #202024; text-overflow: ellipsis; white-space: nowrap; }

/* The reply, docked at the foot like a composer. */
.yw-inbox-composer { display: flex; flex-direction: column; gap: 8px; margin: 0 16px 16px; padding: 12px 14px; border: 1px solid #e2e1e4; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(32, 32, 36, .07); transition: border-color .16s, box-shadow .16s; }
.yw-inbox-composer:focus-within { border-color: #cdb4f6; box-shadow: 0 0 0 3px rgba(185, 147, 255, .18), 0 8px 24px rgba(32, 32, 36, .07); }
.yw-inbox-composer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.yw-inbox-composer-label { display: inline-flex; align-items: center; gap: 6px; color: #202024; font-size: 12.5px; font-weight: 500; }
.yw-inbox-composer-label svg { width: 15px; height: 15px; fill: none; stroke: #7c3aed; stroke-width: 1.6; stroke-linejoin: round; }
.yw-inbox-composer-to { margin-left: auto; overflow: hidden; color: #87818c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-inbox-flag { font-size: 12px; }
.yw-inbox-flag .hw-info-label { color: #202024; font-weight: 500; }
.yw-inbox-textarea { display: block; width: 100%; min-height: 96px; max-height: 30vh; padding: 4px 0; border: 0; background: transparent; color: #202024; font: inherit; font-size: 13.5px; line-height: 1.6; outline: none; resize: vertical; }
.yw-inbox-textarea::placeholder { color: #a59fab; }
.yw-inbox-composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.yw-inbox-composer-note { color: #a59fab; font-size: 11.5px; }

/* Inbox zero. */
.yw-inbox-zero { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; }
.yw-inbox-zero > svg { width: 46px; height: 46px; margin-bottom: 6px; fill: none; stroke: #b993ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.yw-inbox-zero-title { margin: 0; color: #202024; font-size: 16px; font-weight: 500; }
.yw-inbox-zero-sub { margin: 0; color: #87818c; font-size: 13px; }

[data-theme-root].dark .yw-inbox-page .yw-card { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-inbox-rail { border-color: #1c2843; background: #0a1120; }
[data-theme-root].dark :is(.yw-inbox-list, .yw-inbox-list-head, .yw-inbox-reader-bar, .yw-inbox-thread, .yw-inbox-pager) { border-color: #1c2843; }
[data-theme-root].dark .yw-inbox-list { background: #0d1527; }
[data-theme-root].dark .yw-inbox-reader { background: #0f182c; }
[data-theme-root].dark .yw-inbox-day { background: rgba(13, 21, 39, .94); }
[data-theme-root].dark :is(.yw-inbox-list-title, .yw-inbox-row-from, .yw-inbox-row-subject, .yw-inbox-reader-subject, .yw-inbox-reader-name, .yw-inbox-body, .yw-inbox-sent-text, .yw-inbox-thread-subject, .yw-inbox-composer-label, .yw-inbox-zero-title, .yw-inbox-setup-text .hw-info-label, .yw-inbox-flag .hw-info-label) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-inbox-list-count, .yw-inbox-row-time, .yw-inbox-row-snippet, .yw-inbox-row-count, .yw-inbox-reader-email, .yw-inbox-reader-time, .yw-inbox-sent-label, .yw-inbox-thread-title, .yw-inbox-thread-time, .yw-inbox-thread-state, .yw-inbox-composer-to, .yw-inbox-composer-note, .yw-inbox-zero-sub, .yw-inbox-folder-count, .yw-inbox-setup-text, .yw-inbox-quiet-btn) { color: #a297ab; }
[data-theme-root].dark .yw-inbox-row:not([data-open]) .yw-inbox-row-from, [data-theme-root].dark :is(.yw-inbox-folder, .yw-inbox-tool-btn, .yw-inbox-pager-btn) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-inbox-folder, .yw-inbox-row, .yw-inbox-tool-btn, .yw-inbox-pager-btn, .yw-inbox-thread-row):hover { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-inbox-folder[aria-current] { background: #1b2742; color: #f3eef8; box-shadow: none; }
[data-theme-root].dark .yw-inbox-folder[aria-current] svg { color: #c9b1ff; }
[data-theme-root].dark .yw-inbox-folder[data-urgent] .yw-inbox-folder-count { background: #3a2638; color: #f3eef8; }
[data-theme-root].dark .yw-inbox-row[aria-current] { background: #2b2350; }
[data-theme-root].dark .yw-inbox-row-tags > span { background: #142036; color: #c3b9cc; }
[data-theme-root].dark .yw-inbox-row-tags > [data-tag="draft"] { background: #2b2350; color: #d9c7ff; }
[data-theme-root].dark .yw-inbox-search > input { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark :is(.yw-inbox-reader-kind, .yw-inbox-link) { background: #142036; color: #c3b9cc; }
[data-theme-root].dark .yw-inbox-reader-kind[data-urgent] { background: #3a2638; color: #f3eef8; }
[data-theme-root].dark .yw-inbox-sent { border-left-color: #4a3a63; background: #142036; }
[data-theme-root].dark .yw-inbox-composer { border-color: #1c2843; background: #0b1122; box-shadow: none; }
[data-theme-root].dark .yw-inbox-textarea { color: #f3eef8; }
[data-theme-root].dark .yw-inbox-rail-btn { border-color: #3d3150; background: #0b1122; color: #c9b1ff; }
[data-theme-root].dark .yw-inbox-avatar[data-urgent]::after { border-color: #0d1527; }
[data-theme-root].dark .yw-inbox-avatar[data-tone="0"] { background: #2b2350; color: #d9c7ff; }
[data-theme-root].dark .yw-inbox-avatar[data-tone="1"] { background: #3a2638; color: #f2b8d3; }
[data-theme-root].dark .yw-inbox-avatar[data-tone="2"] { background: #3a3020; color: #ecc888; }
[data-theme-root].dark .yw-inbox-avatar[data-tone="3"] { background: #1d3a31; color: #9fd8c0; }
[data-theme-root].dark .yw-inbox-avatar[data-tone="4"] { background: #1d2a46; color: #a9c0ea; }
[data-theme-root].dark .yw-inbox-avatar[data-tone="5"] { background: #1b2742; color: #c3b9cc; }
[data-theme-root].dark :is(.yw-inbox-rail, .yw-inbox-rows, .yw-inbox-reader-scroll) { scrollbar-color: #2a3654 transparent; }

/* The Queue's top row (10/14; owner: "on the queue tab we need to have kpis,
   like open cases, average response time, not responded", then "this
   doesent have the new design style, you can take samples from the
   dashboards"). The Dashboard Overview's three columns and its parts: the
   hero (Total revenue this month), the bars and the three figures under
   them (Last 14 nights), the rows with the value on the right (Last full
   week). queue-view.tsx InboxTop. */
.yw-inbox-top { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.06fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.yw-inbox-top > section { display: flex; min-width: 0; flex-direction: column; margin: 0; }
@media (max-width: 1100px) {
  .yw-inbox-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-inbox-top > .yw-inbox-week { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .yw-inbox-top { grid-template-columns: minmax(0, 1fr); } }

/* The hero: the Dashboard's big number, its pill, its track and rows. */
.yw-inbox-page .yw-inbox-hero .yw-hero-value { margin: 8px 0 8px; font-size: clamp(40px, 3.6vw, 53px); }
.yw-inbox-hero .yw-hero-status { margin-top: 2px; }
.yw-inbox-hero .yw-track { margin-top: 18px; }
/* The rows share what height the card has left, so no band sits empty. */
.yw-inbox-hero .yw-row-stats { display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 14px; }
.yw-inbox-hero .yw-row-stats > .yw-row-stat { flex: 1 1 auto; align-items: center; }
.yw-inbox-pill-link { text-decoration: none; }
.yw-inbox-pill-link:hover .yw-hero-pill { box-shadow: 0 2px 10px rgba(214, 94, 158, .18); }
.yw-inbox-row-link { color: #8553c2; font-weight: 500; text-decoration: none; }
.yw-inbox-row-link:hover { color: #7c3aed; }

/* Waiting: the Last 14 nights bars, one an age band; the urgent part pink. */
.yw-inbox-bars { display: grid; flex: 1 1 auto; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-height: 180px; margin-top: 16px; }
.yw-inbox-bar { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 6px; border-radius: 10px; cursor: default; }
.yw-inbox-bar-value { color: #6f6876; font-size: 11px; font-weight: 500; line-height: 15px; }
.yw-inbox-bar-col { display: flex; width: 100%; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.yw-inbox-bar-fill { display: flex; width: min(68%, 42px); flex-direction: column-reverse; overflow: hidden; border-radius: 6px 6px 3px 3px; 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) * 45ms); transition: filter .16s, box-shadow .16s; }
.yw-inbox-bar-urgent { display: block; width: 100%; flex-shrink: 0; background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f9dce9 2px 4px); }
.yw-inbox-bar:hover .yw-inbox-bar-fill { filter: saturate(1.4); box-shadow: 0 0 0 3px rgba(138, 64, 233, .08); }
.yw-inbox-bar-day { color: #a6a0ab; font-size: 10px; white-space: nowrap; }
.yw-inbox-bar[data-tip]::after { position: absolute; bottom: calc(100% + 4px); left: 50%; z-index: 30; width: max-content; max-width: 200px; 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; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .16s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.yw-inbox-bar[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .15s; }
/* The three figures under the bars: the Dashboard's Tonight squares. */
.yw-inbox-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 9px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #e5e4e7; }
.yw-inbox-stat-label { margin: 0; color: #999; font-size: 9px; letter-spacing: .35px; text-transform: uppercase; }
.yw-inbox-stat-value { margin: 4px 0 0; color: #202024; font-size: 15px; font-weight: 500; }
.yw-inbox-stat-sub { margin: 2px 0 0; color: #929097; font-size: 10px; line-height: 1.4; }

/* Last 7 days: the Last full week rows, the value large on the right. */
.yw-inbox-week-rows { display: flex; flex: 1 1 auto; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; }
.yw-inbox-week-row { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 10px 0; border-top: 1px solid #eae8ec; }
.yw-inbox-week-row:first-child { border-top: 0; }
.yw-inbox-week-main { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.yw-inbox-week-label { color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.yw-inbox-week-line { color: #929097; font-size: 12px; }
.yw-inbox-week-value { flex-shrink: 0; color: #202024; font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; white-space: nowrap; }
.yw-inbox-week-value .yw-tasks-quiet { font-size: 14px; }

/* The queue's window (10/14): the boxes as the quiet segmented control and
   the search across the top, the list and the message under them. */
.yw-inbox-shell[data-panes="queue"] { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.75fr); grid-template-rows: auto minmax(0, 1fr); }
.yw-inbox-shell-head { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 18px; border-bottom: 1px solid #eae8ec; }
.yw-inbox-boxes { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: #eeeded; }
.yw-inbox-boxes .yw-inbox-folder { gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 9px; color: #6f6975; font-size: 12.5px; font-weight: 500; }
.yw-inbox-boxes .yw-inbox-folder svg { width: 15px; height: 15px; }
.yw-inbox-boxes .yw-inbox-folder:hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-inbox-boxes .yw-inbox-folder[aria-current] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-inbox-boxes .yw-inbox-folder-name { flex: 0 0 auto; }
.yw-inbox-shell-head .yw-inbox-search { width: min(320px, 100%); }
.yw-inbox-list-found { margin: 0; padding: 12px 16px 0; color: #87818c; font-size: 12px; }
[data-theme-root].dark .yw-inbox-shell-head { border-color: #1c2843; }
[data-theme-root].dark .yw-inbox-boxes { background: #111a2e; }
[data-theme-root].dark .yw-inbox-boxes .yw-inbox-folder[aria-current] { background: #1b2742; }

/* Under the cards the window takes a steady height, not the screen's. */
.yw-inbox-top + .yw-inbox-shell { height: min(80vh, 820px); }

[data-theme-root].dark :is(.yw-inbox-stats, .yw-inbox-week-row) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-inbox-stat-value, .yw-inbox-week-label, .yw-inbox-week-value) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-inbox-stat-label, .yw-inbox-stat-sub, .yw-inbox-week-line, .yw-inbox-bar-day, .yw-inbox-bar-value) { color: #a297ab; }
[data-theme-root].dark .yw-inbox-bar-fill { background: repeating-linear-gradient(125deg, #a883ee 0 1.8px, #3f3352 1.8px 4px); }
[data-theme-root].dark .yw-inbox-bar-urgent { background: repeating-linear-gradient(125deg, #e07ab5 0 2px, #4d3345 2px 4px); }
[data-theme-root].dark .yw-inbox-row-link { color: #c9b1ff; }

/* The editors (Knowledge base, Instant answers): the list and the page. */
.yw-inbox-shell[data-panes="2"] { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.75fr); }
.yw-inbox-shell[data-size="half"] { height: min(68vh, 660px); }
@media (max-width: 1000px) { .yw-inbox-shell[data-panes="2"] { grid-template-columns: minmax(0, 1fr); height: auto; } }
.yw-inbox-editor-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.yw-inbox-rail-btn { display: inline-flex; align-items: center; text-decoration: none; }
.yw-inbox-rail-btn[aria-current] { border-color: #cdb4f6; background: #f1ecfb; }
.yw-inbox-list-foot { margin: 0; padding: 10px 16px 14px; border-top: 1px solid #eae8ec; color: #87818c; font-size: 12px; }
.yw-doc-row { grid-template-columns: minmax(0, 1fr); }
.yw-doc-row .yw-inbox-row-from { font-weight: 500; }
.yw-doc-flag { flex-shrink: 0; padding: 1px 7px; border-radius: 6px; background: #fbf0de; color: #202024; font-size: 10.5px; }
.yw-doc-flag[data-tone="on"] { background: #efe8fc; }
.yw-inbox-reader-kind[data-state="fill"] { background: #fbf0de; color: #202024; }
.yw-inbox-reader-kind[data-state="read"] { background: #e2f1eb; color: #202024; }
.yw-doc { display: flex; min-height: 0; flex: 1 1 0; flex-direction: column; }
.yw-doc-page { display: flex; min-height: 0; flex: 1 1 0; flex-direction: column; gap: 14px; padding: 22px 28px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #dcd7e0 transparent; scrollbar-width: thin; }
.yw-doc-title { width: 100%; padding: 2px 0 6px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #202024; font-size: 22px; font-weight: 500; letter-spacing: -.5px; outline: none; transition: border-color .16s; }
.yw-doc-title:focus { border-bottom-color: #cdb4f6; }
.yw-doc-body { width: 100%; min-height: 220px; flex: 1 1 auto; padding: 0; border: 0; background: transparent; color: #202024; font: inherit; font-size: 14px; line-height: 1.65; outline: none; resize: none; }
:is(.yw-doc-title, .yw-doc-body, .yw-doc-field input)::placeholder { color: #bdb7c4; }
.yw-doc-field { display: flex; flex-direction: column; gap: 6px; color: #87818c; font-size: 12px; }
.yw-doc-field input { min-height: 36px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font-size: 13px; }
.yw-doc-field input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-doc-switches { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 4px; }
.yw-doc-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid #eae8ec; }

/* A switch: the app's checkbox for on and off. */
.yw-switch-row { display: inline-flex; align-items: center; gap: 10px; color: #202024; font-size: 13px; cursor: pointer; }
.yw-switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; margin: 0; border-radius: 20px; background: #d9d5de; appearance: none; cursor: pointer; transition: background .2s; }
.yw-switch::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:checked { background: #7c3aed; }
.yw-switch:checked::before { transform: translateX(14px); }
.yw-switch:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* Instant receipts: the two side by side, a hairline between them. */
.yw-inbox-receipts { display: flex; flex-direction: column; }
.yw-receipts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 auto; margin-top: 12px; }
.yw-receipt { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 4px 22px 0 0; }
.yw-receipt + .yw-receipt { padding: 4px 0 0 22px; border-left: 1px solid #eae8ec; }
.yw-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yw-receipt-name { color: #202024; font-size: 14px; font-weight: 500; }
.yw-receipt-when { margin: 0; color: #87818c; font-size: 12px; }
.yw-receipt-text { width: 100%; min-height: 104px; flex: 1 1 auto; padding: 10px 12px; border: 1px solid #e2e1e4; border-radius: 12px; background: #fff; color: #202024; font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
.yw-receipt-text:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-receipt-foot { display: flex; justify-content: flex-end; }
@media (max-width: 900px) {
  .yw-receipts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .yw-receipt, .yw-receipt + .yw-receipt { padding: 0; border-left: 0; }
}

[data-theme-root].dark :is(.yw-inbox-list-foot, .yw-doc-foot, .yw-receipt + .yw-receipt) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-doc-title, .yw-doc-body, .yw-receipt-name, .yw-switch-row) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-inbox-list-foot, .yw-receipt-when, .yw-doc-field) { color: #a297ab; }
[data-theme-root].dark :is(.yw-doc-field input, .yw-receipt-text) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-doc-flag { background: #3a3020; color: #f3eef8; }
[data-theme-root].dark .yw-doc-flag[data-tone="on"] { background: #2b2350; }
[data-theme-root].dark .yw-inbox-reader-kind[data-state="fill"] { background: #3a3020; color: #f3eef8; }
[data-theme-root].dark .yw-inbox-reader-kind[data-state="read"] { background: #1d3a31; color: #f3eef8; }
[data-theme-root].dark .yw-inbox-rail-btn[aria-current] { border-color: #4a3c60; background: #1b1d3a; }
[data-theme-root].dark .yw-switch { background: #2a3654; }
[data-theme-root].dark .yw-switch:checked { background: #7c3aed; }