/* The design kit (Wave 0 of the dashboard design rollout, 10/6,
   docs/2026-10-06-dashboard-skin-rollout-plan.md). The Dashboard Overview is
   the sample for every dashboard; these are its parts, lifted out of
   overview.css so any page can wear them. The Dashboard renders identically:
   every rule here is the Overview's own, moved, with the same specificity
   (tests/skin-kit-dashboard-render.test.tsx pins the markup; the computed
   styles were compared light, dark and at 390px when the rules moved).

   How a page wears the kit:
     1. Put `yw-kit` on the page's root element. Parts that were scoped to
        the Overview (.yw-more's round button, the hero value and status, the
        KPI rows, Needs you, the night bars) are scoped to
        :is(.yw-dashboard-overview, .yw-money-page, .yw-kit), so they reach
        the page and keep their exact weight on the Dashboard. A page that
        already wears the `yw-money-page` root (the Money re-skin of 10/01,
        AI Search 10/5) gets the whole kit too: that root is an alias, so no
        page has to change class to adopt a part, and money.css still comes
        later with its own overrides. New pages use `yw-kit`.
     2. Use the React parts in src/app/(app)/kit/ where the markup repeats
        (CardHead, TextLink, MoreLink, HeroPill, Track, RowStats, TargetBar,
        NeedsCard / NeedsRow / NeedsMark, Insight, NightBars, TitleMenu).
     3. Old card chrome (`rounded-2xl border border-zinc-200 bg-white p-4`
        and its cousins) goes; tests/skin-ratchet.test.ts counts it per page
        folder and the count may only go down.

   The parts, in order:
     card         .yw-card, .yw-card-head, .yw-card-title, .yw-card-sub,
                  .yw-text-link, .yw-more (the round "···")
     hero         .yw-hero-value, .yw-hero-status, .yw-hero-pill[data-pace],
                  .yw-hero-muted, .yw-hero-summary, .yw-hero-note
     track        .yw-track, .yw-track-fill, .yw-track-marker, .yw-track-labels
     row stats    .yw-row-stats > .yw-row-stat (dt / dd)
     night bars   .yw-night-rail, .yw-night-chart, .yw-night-bar(-fill),
                  .yw-night-days, .yw-night-caption (NightBars' markup),
                  .yw-night-values, .yw-night-note (its showValues option)
     KPI rows     .yw-kpi-list > StatTile, the "Last full week" anatomy;
                  .yw-kpi-grid > StatTile, the compact two-column cells
     target bar   .yw-kpi-progress, -fill[data-met], -target
     insight      .yw-insight and its carousel parts
     needs list   .yw-needs, .yw-needs-card(-head/-foot), .yw-needs-list,
                  .yw-needs-row(-link/-copy/-title/-detail/-chevron/-actions),
                  .yw-needs-mark(-money/-legal/-mine), .yw-needs-more,
                  .yw-needs-empty
     status dot   .yw-status-dot[data-pace]
   Page title and header controls are already page-agnostic and live in
   header.css: .yw-page-title-group, .yw-dashboard-title(-trigger/-chevron),
   .yw-dashboard-tab-menu / -options / -option, .yw-header-control
   (--white). TitleMenu (kit/) is the Dashboard's title menu with the title
   as a prop.

   Layout stays with the page: grid placement and the Overview's fixed card
   heights (431px hero, 412px nights and Needs you) are in overview.css.
   Every colour has a [data-theme-root].dark twin at the bottom. */

/* ------------------------------------------------------------- the card -- */
/* The shared card (lifted 10/01 for the Money re-skin, skin/money.css): the
   same chrome as the dashboard cards, as a class a surface can wear on its
   own. The dashboard's selectors keep their rule; this one is the alias. */
.yw-card { position: relative; min-width: 0; border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; padding: 23px; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
.yw-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.yw-card-title { margin: 0; color: #202024; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.55px; }
.yw-card-title a { color: inherit; }
.yw-card-sub { margin: 3px 0 0; color: #929097; font-size: 12px; line-height: 1.5; }
.yw-text-link { display: inline-flex; align-items: center; gap: 4px; color: #8553c2; font-size: 11px; font-weight: 500; white-space: nowrap; }
.yw-text-link:hover, .yw-text-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
/* The round "···" button. The hero's is the InfoDot (its "i" becomes the
   dots; the explanation behind it is unchanged); Needs you's is a link.
   Shared with the Money root since 10/01 and the kit root since 10/6: same
   specificity, so the dashboard reads exactly as before. */
.yw-more { flex-shrink: 0; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) a.yw-more, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button { display: inline-grid; place-items: center; width: 35px; height: 35px; border: 1px solid #e4e2e6; border-radius: 50%; background: transparent; color: #202024; font-size: 17px; line-height: 1; letter-spacing: 0; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button { font-size: 0; color: transparent; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button::after { content: "\00b7\00b7\00b7"; color: #202024; font-size: 17px; letter-spacing: 1px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) a.yw-more:hover, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button:hover, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button[aria-expanded="true"] { background: #eeeeee; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* ------------------------------------------------------------- the hero -- */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-value { margin: 19px 0 8px; font-size: clamp(38px, 3.6vw, 53px); font-weight: 500; line-height: 1.17; letter-spacing: -.05em; color: #202024; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 11px; }
.yw-hero-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 20px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .024); color: #59535f; font-size: 11px; }
.yw-hero-pill[data-pace="behind"] { color: #b26241; }
.yw-hero-pill[data-pace="ahead"] { color: #2f8a6d; }
.yw-hero-muted { color: #929097; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-summary { margin: 16px 0 16px; color: #777; font-size: 13px; line-height: 1.5; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-note { margin: -8px 0 16px; color: #929097; font-size: 12px; }

/* ------------------------------------------------------------ the track -- */
.yw-track { position: relative; height: 11px; border-radius: 20px; background: #eeedf1; }
.yw-track-fill { position: absolute; inset: 0 auto 0 0; border-radius: 20px; background: repeating-linear-gradient(125deg, #9161df 0 2px, #dcccfa 2px 4px); transform-origin: left; animation: yw-scale-in 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.yw-track-marker { position: absolute; top: -4px; height: 19px; width: 1.5px; background: #555; }
.yw-track-labels { display: flex; justify-content: space-between; gap: 8px; margin: 7px 0 16px; color: #8f8996; font-size: 10px; }

/* ------------------------------------------------------------ row stats -- */
.yw-row-stats { margin: 0; }
.yw-row-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 11px 0; border-top: 1px solid #eae8ec; color: #87818c; font-size: 12px; }
.yw-row-stat dt { margin: 0; }
.yw-row-stat dd { margin: 0; color: #343039; font-size: 14px; font-weight: 500; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-status .yw-text-link { font-size: 12px; }

/* ----------------------------------------------------------- night bars -- */
.yw-nights .yw-night-rail { margin-top: 29px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-chart { height: 149px; gap: 5px; overflow: visible; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar-fill { border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(125deg, #ae89e9 0 1.8px, #ece4fc 1.8px 4px); box-shadow: none; transform-origin: bottom; animation: yw-bar-in 1s both; animation-delay: calc(var(--yw-bar-i, 0) * 35ms); }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar[data-weekend] .yw-night-bar-fill { background: linear-gradient(#9b51f4, #7c38de); box-shadow: 0 3px 7px rgba(134, 57, 213, .1); }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar[data-today] .yw-night-bar-fill { background: #d9c8f2; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar[data-selected] .yw-night-bar-fill { background: #7c3aed; box-shadow: 0 0 0 3px rgba(138, 64, 233, .18); }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar:hover .yw-night-bar-fill, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar:focus-visible .yw-night-bar-fill { filter: saturate(1.4); box-shadow: 0 0 0 3px rgba(138, 64, 233, .08); }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days { gap: 5px; margin-top: 6px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days > span { color: #aaa; font-size: 9px; font-weight: 400; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days > span[data-today], :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days > span.font-semibold { color: #7c3aed; font-weight: 500; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-day-top { display: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-caption { margin-top: 9px; color: #999; font-size: 10px; }
/* NightBars showValues (10/6, the Floor week ahead): each bar's figure under
   its day label, and a small mark on a night with a note (an event). */
.yw-night-values { margin-top: 4px; color: #6f6876; font-size: 10px; font-weight: 500; }
.yw-night-values > span[data-today] { color: #7c3aed; }
.yw-night-note { display: block; width: 5px; height: 5px; margin: 3px auto 0; border-radius: 50%; background: #d9963b; }

/* -------------------------------------------- KPI rows (Last full week) -- */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list { display: flex; flex-direction: column; gap: 0; margin-top: 11px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > * { min-width: 0; }
/* One StatTile per row, laid out on a grid through the tile's own hooks:
   the name and the movement on the left, "Actual" over the value on the
   right, the striped bar under both, the target line last. */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto; column-gap: 8px; min-height: 0; padding: 17px 0; border: 0; border-bottom: 1px solid #e9e7eb; border-radius: 0; background: transparent; box-shadow: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group:last-child { border-bottom: 0; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:first-child { grid-column: 1; grid-row: 1; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:first-child .uppercase { color: #554b60; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:not(:first-child):not(:last-child):not([data-slot]):not(.yw-kpi-progress) { grid-column: 1; grid-row: 2; margin-top: 2px; color: #9a969d; font-size: 10px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > p { grid-column: 1; grid-row: 3; margin-top: 5px; font-size: 10px; font-weight: 500; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > p > span { color: #9a969d; }
/* container-type: normal: StatTile makes this slot an inline-size container,
   which has no intrinsic width, so the auto column would collapse to 0 and the
   value would hang over the label column. The query off, the column is as
   wide as the printed value (same fix as the Financials card). */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"] { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; container-type: normal; gap: 3px; margin: 0; text-align: right; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"]::before { content: "Actual"; color: #9a969d; font-size: 10px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"]:has([data-slot="stat-tile-unmeasured"])::before { display: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"] > div { justify-content: flex-end; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"] [data-slot="stat-tile-spark"] { display: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"] [class*="text-2xl"] { font-size: 27px; font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > .yw-kpi-progress { grid-column: 1 / -1; grid-row: 4; margin: 16px 0 4px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:last-child { grid-column: 1 / -1; grid-row: 5; margin-top: 7px; color: #8f8499; font-size: 11px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:last-child span { color: #8f8499; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:last-child a { color: #8553c2; }

/* ------------------------------------------ KPI grid (compact cells) -- */
/* 10/6 (Floor Overview Wave 2): a KPI with no target bar does not need a
   full-width row. The same StatTile, two to a row: the name, then the big
   number with its move beside it, then one sub line, a hairline above. A page puts its targeted rows in
   .yw-kpi-list and the rest in .yw-kpi-grid. The Dashboard does not use it. */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group { height: auto; min-height: 0; padding: 12px 0 11px; border: 0; border-top: 1px solid #e9e7eb; border-radius: 0; background: transparent; box-shadow: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > div:first-child .uppercase { color: #554b60; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > div:first-child { grid-column: 1 / -1; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > div:last-child:not([data-slot]) { grid-column: 1 / -1; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > [data-slot="stat-tile-row"] { grid-column: 1; margin-top: 2px; container-type: normal; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > [data-slot="stat-tile-row"] [class*="text-2xl"] { font-size: 25px; font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > p { grid-column: 2; margin: 0; overflow: hidden; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > p > span { color: #9a969d; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > div:last-child:not([data-slot]) { margin-top: 2px; overflow: hidden; color: #8f8499; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------- target bar -- */
.yw-kpi-progress { position: relative; height: 18px; overflow: visible; border-radius: 4px; background: #f0edf2; }
.yw-kpi-progress-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: repeating-linear-gradient(125deg, #d65e9e 0 2px, #f9dce9 2px 4px); transform-origin: left; animation: yw-scale-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.yw-kpi-progress-fill[data-met] { background: repeating-linear-gradient(125deg, #a5a0ab 0 2px, #e5e2e9 2px 4px); }
.yw-kpi-progress-target { position: absolute; top: -4px; height: 26px; width: 1px; background: #7a647e; }
.yw-kpi-progress-fill[data-met] + .yw-kpi-progress-target { background: #aaa1b0; }
/* A cost bar, where less is better (TargetBar goodWhen="down": labor %,
   hours per checkout, paid hours, spend), on every tab (10/14, owner: "over
   target it should be in red and if its under it should be green", then
   "lets apply this for all of the tabs that apply with this rule"): red over
   its target, green at or under it. A figure building toward its goal keeps
   the pink above until met, then grey ("if the metric is on track and on the
   way it can be pink"). */
.yw-kpi-progress-fill[data-good-when="down"] { background: repeating-linear-gradient(125deg, #d2435f 0 2px, #f7d4db 2px 4px); }
.yw-kpi-progress-fill[data-good-when="down"] + .yw-kpi-progress-target { background: #b8324d; }
.yw-kpi-progress-fill[data-good-when="down"][data-met] { background: repeating-linear-gradient(125deg, #2f9e78 0 2px, #d3eee3 2px 4px); }
.yw-kpi-progress-fill[data-good-when="down"][data-met] + .yw-kpi-progress-target { background: #24785c; }

/* -------------------------------------------------------------- insight -- */
.yw-insight { position: relative; isolation: isolate; height: 431px; min-height: 431px; overflow: hidden; border-radius: 24px; background: #e9dff9; color: #37234f; }
.yw-insight-art { position: absolute; inset: 0; z-index: -3; background-color: #f2eafe; background-position: center bottom; background-size: auto 80%; background-repeat: no-repeat; transition: opacity 350ms ease; }
.yw-insight-art[data-art="coast"] { background-image: url("/dashboard-landscapes/coast-day.webp"); }
.yw-insight-art[data-art="alpine"] { background-image: url("/dashboard-landscapes/alpine-day.webp"); }
.yw-insight-art[data-art="desert"] { background-image: url("/dashboard-landscapes/desert-day.webp"); }
.yw-insight::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(247, 240, 255, .96) 0%, rgba(245, 235, 255, .94) 26%, rgba(242, 231, 255, .79) 46%, rgba(230, 212, 255, .06) 76%, rgba(86, 37, 146, .13) 100%); }
.yw-insight-content { display: flex; flex-direction: column; height: 100%; padding: 22px 23px; animation: yw-insight-enter 350ms both; }
.yw-insight-top, .yw-insight-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; }
.yw-insight-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .69); border-radius: 20px; background: rgba(255, 255, 255, .4); color: #715099; backdrop-filter: blur(12px); }
.yw-insight-spark { width: 13px; height: 13px; flex-shrink: 0; }
.yw-insight-count { color: #85669f; font-size: 10px; }
.yw-insight-main { margin-top: 0; }
.yw-insight-value { display: flex; align-items: baseline; gap: 8px; margin: 23px 0 0; font-size: clamp(40px, 3.6vw, 52px); font-weight: 400; line-height: 1.1; letter-spacing: -2.1px; white-space: nowrap; }
.yw-insight-value span { margin: 0; color: #8b70a8; font-size: 13px; letter-spacing: -.2px; white-space: normal; }
.yw-insight h3 { max-width: 280px; margin: 12px 0 0; font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -.8px; }
.yw-insight-detail { max-width: 280px; margin: 10px 0 0; color: #725289; font-size: 12px; line-height: 1.5; }
.yw-insight-bottom { margin-top: auto; }
.yw-insight-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 11px; background: rgba(255, 255, 255, .85); color: #503268; font-size: 11px; box-shadow: 0 4px 12px rgba(78, 32, 139, .07); backdrop-filter: blur(14px); transition: transform 160ms, background 160ms; }
.yw-insight-link:hover, .yw-insight-link:focus-visible { transform: translateY(-2px); background: white; outline: 2px solid #8e4af0; outline-offset: 2px; }
.yw-insight-controls { display: flex; align-items: center; gap: 0; padding: 4px; border: 1px solid rgba(255, 255, 255, .63); border-radius: 20px; background: rgba(255, 255, 255, .57); backdrop-filter: blur(10px); }
/* The dot paints 6px; its ::before is the hit area (10 x 21), so it can be
   clicked without aiming at a speck (10/10). */
.yw-insight-dot { position: relative; width: 6px; height: 6px; margin: 0 2px; padding: 0; border-radius: 20px; background: #a997c6; cursor: pointer; transition: width 250ms, background 250ms; }
.yw-insight-dot::before { content: ""; position: absolute; inset: -7.5px -2px; }
.yw-insight-dot[aria-current="true"] { width: 16px; background: #7950af; }
.yw-insight-dot:focus-visible, .yw-insight-pause:focus-visible { outline: 2px solid #8e4af0; outline-offset: 2px; }
.yw-insight-pause { cursor: pointer; display: grid; place-items: center; width: 21px; height: 21px; margin-left: 1px; padding: 0; color: #6e4c8d; font-size: 11px; }

/* ----------------------------------------------------------- needs list -- */
/* The triage buttons under a Needs you row: always on the face, quiet
   (content never folds; a hover-only reveal hides a real action from touch). */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-actions { margin: 6px 0 2px 43px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-actions > div { margin: 0; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-actions > div > div { flex-wrap: wrap; gap: 6px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs { position: relative; display: flex; flex-direction: column; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-more { position: absolute; top: 23px; right: 23px; z-index: 2; }
/* The card's height on the Overview grid (412px) is overview.css's. */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; padding: 23px; border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-right: 44px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-head h2 { margin: 0; color: #202024; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.55px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-head p { margin: 3px 0 0; color: #929097; font-size: 12px; line-height: 1.5; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-list { display: flex; flex: 1 1 auto; flex-direction: column; margin: 0; padding: 0; list-style: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row { position: relative; display: flex; align-items: center; min-height: 74px; border-bottom: 1px solid #eae8ec; transition: padding .2s ease, border-color .2s ease; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row:last-child { border-bottom: 0; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-link { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 13px; padding: 12px 3px; color: inherit; text-decoration: none; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: #f8e8ef; color: #bd6a91; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark svg { width: 17px; height: 17px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-legal { background: #fbf0dc; color: #b98234; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-mine { background: #eee7f8; color: #8a66bc; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-parity { background: #fbf0dc; color: #b98234; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-title { overflow: hidden; color: #202024; font-size: 12px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-detail { overflow: hidden; color: #a09aa4; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-chevron { width: 14px; height: 14px; flex: 0 0 14px; stroke: #aaa4ad; stroke-width: 1.4; transition: transform .2s ease, stroke .2s ease; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-link:hover .yw-needs-row-chevron, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-link:focus-visible .yw-needs-row-chevron { transform: translateX(3px); stroke: #8151b7; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-link:focus-visible { border-radius: 10px; outline: 2px solid #b993ff; outline-offset: -2px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-empty { margin: 14px 0; color: #77717c; font-size: 13px; line-height: 1.5; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-empty a, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-foot a { color: #8553c2; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-foot { display: flex; min-height: 22px; align-items: flex-end; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 10px; color: #a09aa4; font-size: 10px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-foot a { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs > .yw-needs-card { padding: 23px; transition: border-color .2s ease, box-shadow .2s ease; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card > a:not(.yw-more) { display: inline-flex; align-self: flex-start; align-items: center; min-height: 34px; margin-top: 4px; padding: 0 12px; border: 1px solid #e3d9ee; border-radius: 10px; color: #7445a7; font-size: 12px; text-decoration: none; transition: background .16s, border-color .16s; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card > a:not(.yw-more):hover { border-color: #d5c4e6; background: #f5f0fa; }
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs > .yw-needs-card:hover { border-color: #d9d2e0; box-shadow: 0 8px 22px rgba(48, 32, 64, .045); }

/* ----------------------------------------------------------- status dot -- */
.yw-status-dot { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #dc7396; box-shadow: 0 0 0 4px #faedf2; }
.yw-status-dot[data-pace="clear"] { background: #70b396; box-shadow: 0 0 0 4px #e8f5ef; }
.yw-status-dot[data-pace="watch"] { background: #d9a441; box-shadow: 0 0 0 4px #fbf3e2; }

/* --------------------------------------------------------------- motion -- */
@keyframes yw-scale-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes yw-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes yw-insight-enter { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .yw-kpi-progress-fill, .yw-track-fill, :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar-fill, .yw-insight-content, .yw-insight-art, .yw-insight-dot, .yw-insight-link { animation: none; transition: none; }
  .yw-insight-link:hover { transform: none; }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 520px) {
  :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs > .yw-needs-card { padding: 18px; }
  :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-more { top: 18px; right: 18px; }
  .yw-insight { height: auto; min-height: 400px; }
}

/* ----------------------------------------------------------------- dark -- */
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs > .yw-needs-card { border-color: #1c2843; background: #0d1527; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-head h2, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-title { color: #f3eef8; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-head p, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row-detail, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-card-foot, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-empty { color: #a297ab; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-row { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark { background: #4a3040; color: #e6a9c4; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-legal { background: #493c2c; color: #e6bd7f; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-mine { background: #3d3150; color: #c5a8ff; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-parity { background: #493c2c; color: #e6bd7f; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs > .yw-needs-card:hover { border-color: #3b3350; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
/* The card itself (10/15, owner: "dark mode isnt working correctly in the
   WHOLE APP"): every surface that wears .yw-card on its own (Settings, the
   Wizard panels) stayed #fbfbfb under pale dark-theme text. The navy card the
   dark pages already draw; a page rule that says otherwise still wins. */
[data-theme-root].dark .yw-card { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-card-title, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-value, [data-theme-root].dark .yw-row-stat dd { color: #f3eef8; }
[data-theme-root].dark .yw-card-sub, [data-theme-root].dark .yw-hero-muted, [data-theme-root].dark .yw-track-labels, [data-theme-root].dark .yw-row-stat, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-note,
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-caption, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days > span { color: #a297ab; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-hero-summary { color: #c3b9cc; }
[data-theme-root].dark .yw-text-link, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:last-child a { color: #c5a8ff; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) a.yw-more, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button { border-color: #1c2843; color: #f3eef8; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button::after { color: #f3eef8; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) a.yw-more:hover, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button:hover, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-more button[aria-expanded="true"] { background: #16223a; }
[data-theme-root].dark .yw-hero-pill { background: #142036; box-shadow: none; color: #d9cfe3; }
[data-theme-root].dark .yw-hero-pill[data-pace="behind"] { color: #e8a37f; }
[data-theme-root].dark .yw-hero-pill[data-pace="ahead"] { color: #7fd3b4; }
[data-theme-root].dark .yw-track { background: #1c2843; }
[data-theme-root].dark .yw-track-fill { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-track-marker { background: #e6dff0; }
[data-theme-root].dark .yw-row-stat { border-top-color: #1c2843; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar-fill { background: repeating-linear-gradient(125deg, #a883ee 0 1.8px, #3f3352 1.8px 4px); }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar[data-weekend] .yw-night-bar-fill { background: linear-gradient(#a56cff, #7c3aed); box-shadow: none; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar[data-today] .yw-night-bar-fill { background: #5c4a78; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-bar[data-selected] .yw-night-bar-fill { background: #b58cf0; box-shadow: 0 0 0 3px rgba(181, 140, 240, .25); }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days > span[data-today], [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-night-days > span.font-semibold { color: #c5a8ff; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group { border-bottom-color: #1c2843; background-color: transparent; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:first-child .uppercase { color: #d9cfe3; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"] [class*="text-2xl"] { color: #f3eef8; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > p > span, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > [data-slot="stat-tile-row"]::before, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:not(:first-child):not(:last-child):not([data-slot]):not(.yw-kpi-progress) { color: #a297ab; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:last-child, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-list > .group > div:last-child span { color: #a297ab; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group { border-top-color: #1c2843; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > div:first-child .uppercase { color: #d9cfe3; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > [data-slot="stat-tile-row"] [class*="text-2xl"] { color: #f3eef8; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > p > span, [data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-kpi-grid > .group > div:last-child:not([data-slot]) { color: #a297ab; }
[data-theme-root].dark .yw-kpi-progress { background: #1c2843; }
[data-theme-root].dark .yw-kpi-progress-fill { background: repeating-linear-gradient(125deg, #e07ab5 0 2px, #4d3345 2px 4px); }
[data-theme-root].dark .yw-kpi-progress-fill[data-met] { background: repeating-linear-gradient(125deg, #a8a1b0 0 2px, #202d4a 2px 4px); }
[data-theme-root].dark .yw-kpi-progress-target { background: #d9cfe3; }
[data-theme-root].dark .yw-kpi-progress-fill[data-met] + .yw-kpi-progress-target { background: #a8a1b0; }
[data-theme-root].dark .yw-insight { background: #2f2540; color: #efe6fb; }
[data-theme-root].dark .yw-insight-art { background-color: #2f2540; filter: none; }
[data-theme-root].dark .yw-insight-art[data-art="coast"] { background-image: url("/dashboard-landscapes/coast-night.webp"); }
[data-theme-root].dark .yw-insight-art[data-art="alpine"] { background-image: url("/dashboard-landscapes/alpine-night.webp"); }
[data-theme-root].dark .yw-insight-art[data-art="desert"] { background-image: url("/dashboard-landscapes/desert-night.webp"); }
[data-theme-root].dark .yw-insight::after { background: linear-gradient(180deg, rgba(47, 37, 64, .97) 0%, rgba(47, 37, 64, .94) 26%, rgba(47, 37, 64, .8) 46%, rgba(47, 37, 64, .1) 76%, rgba(20, 12, 30, .35) 100%); }
[data-theme-root].dark .yw-insight-tag { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #d2bff0; }
[data-theme-root].dark .yw-insight-count, [data-theme-root].dark .yw-insight-value span, [data-theme-root].dark .yw-insight-detail { color: #b9a9cf; }
[data-theme-root].dark .yw-insight-link { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .1); color: #efe6fb; box-shadow: none; }
[data-theme-root].dark .yw-insight-link:hover, [data-theme-root].dark .yw-insight-link:focus-visible { background: rgba(255, 255, 255, .18); }
[data-theme-root].dark .yw-insight-controls { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .1); }
[data-theme-root].dark .yw-insight-dot { background: #7c6a94; }
[data-theme-root].dark .yw-insight-dot[aria-current="true"] { background: #c5a8ff; }
[data-theme-root].dark .yw-insight-pause { color: #d2bff0; }
[data-theme-root].dark .yw-night-values { color: #b9aec4; }
[data-theme-root].dark .yw-night-values > span[data-today] { color: #c5a8ff; }
[data-theme-root].dark .yw-night-note { background: #e6bd7f; }
[data-theme-root].dark .yw-status-dot { box-shadow: 0 0 0 4px #4a3040; }
[data-theme-root].dark .yw-status-dot[data-pace="clear"] { box-shadow: 0 0 0 4px #2c4238; }
[data-theme-root].dark .yw-status-dot[data-pace="watch"] { box-shadow: 0 0 0 4px #463a22; }

/* Needs you quick-access fill (10/12): an open item that is not urgent gets a
   quiet grey mark, so the urgent rows above it still read first. */
:is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-open { background: #efeef1; color: #7d7884; }
[data-theme-root].dark :is(.yw-dashboard-overview, .yw-money-page, .yw-kit) .yw-needs-mark-open { background: #2c2a33; color: #a8a2b0; }

/* The track's hover (10/12, owner: "this hover modal is generic"): the app's
   black tip (skin/hover.css tokens) over the track, instead of the browser's
   title box on the 1.5px marker. A taller invisible band makes it easy to
   hover. */
.yw-track[data-tip]::before { position: absolute; inset: -9px 0; content: ""; }
.yw-track[data-tip]::after { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 20; width: max-content; max-width: 260px; padding: 6px 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-ink, #fff); content: attr(data-tip); font-size: 12px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .16s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.yw-track[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .yw-track[data-tip]::after { transition: none; } }

/* ---- Label-over-figure columns (kit/stat-cols.tsx, 10/12) -----------------
   The Dashboard's stat style for cards with several figures (Performance's
   Labor and Front desk, the Floor Overview's Reviews and Guest contact): a
   quiet label, the figure in ink at row size, one muted line. Hairlines
   between the columns and between rows, no box, no dot; the verdict word is
   the only colour. */
.yw-stat-cols { display: grid; grid-template-columns: repeat(var(--yw-stat-cols, 3), minmax(0, 1fr)); margin: 0; border-top: 1px solid #ebe7ed; }
.yw-stat-col { display: flex; min-width: 0; flex-direction: column; gap: 4px; margin: 0; padding: 14px 14px 10px; border-left: 1px solid #ebe7ed; }
.yw-stat-cols[data-cols="1"] > .yw-stat-col:nth-child(1n + 1) { padding-left: 0; border-left: 0; }
.yw-stat-cols[data-cols="1"] > .yw-stat-col:nth-child(n + 2) { border-top: 1px solid #ebe7ed; }
.yw-stat-cols[data-cols="2"] > .yw-stat-col:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
.yw-stat-cols[data-cols="2"] > .yw-stat-col:nth-child(n + 3) { border-top: 1px solid #ebe7ed; }
.yw-stat-cols[data-cols="3"] > .yw-stat-col:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.yw-stat-cols[data-cols="3"] > .yw-stat-col:nth-child(n + 4) { border-top: 1px solid #ebe7ed; }
.yw-stat-cols[data-cols="4"] > .yw-stat-col:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.yw-stat-cols[data-cols="4"] > .yw-stat-col:nth-child(n + 5) { border-top: 1px solid #ebe7ed; }
.yw-stat-cols[data-cols="5"] > .yw-stat-col:nth-child(5n + 1) { padding-left: 0; border-left: 0; }
.yw-stat-cols[data-cols="5"] > .yw-stat-col:nth-child(n + 6) { border-top: 1px solid #ebe7ed; }
.yw-stat-cols[data-cols="6"] > .yw-stat-col:nth-child(6n + 1) { padding-left: 0; border-left: 0; }
.yw-stat-cols[data-cols="6"] > .yw-stat-col:nth-child(n + 7) { border-top: 1px solid #ebe7ed; }
.yw-stat-col dt { margin: 0; color: #59535f; font-size: 13px; }
.yw-stat-col dd { margin: 0; }
.yw-stat-col-value { margin-top: 4px !important; color: #202024; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.yw-stat-col-value a { color: inherit; text-decoration: none; }
.yw-stat-col-value a:hover { color: #7433d4; }
.yw-stat-col-value[data-empty] { color: #87818c; font-size: 15px; font-weight: 400; letter-spacing: -.2px; }
.yw-stat-col-line { color: #87818c; font-size: 12px; line-height: 1.4; }
.yw-stat-col-verdict { font-size: 12px; font-weight: 500; }
.yw-stat-col-verdict[data-tone="good"] { color: #279876; }
.yw-stat-col-verdict[data-tone="warn"] { color: #b7791f; }
.yw-stat-col-verdict[data-tone="bad"] { color: #c85f84; }
[data-theme-root].dark :is(.yw-stat-cols, .yw-stat-col) { border-color: #1c2843; }
[data-theme-root].dark .yw-stat-col dt { color: #c3b9cc; }
[data-theme-root].dark .yw-stat-col-value { color: #f3eef8; }
[data-theme-root].dark :is(.yw-stat-col-value[data-empty], .yw-stat-col-line) { color: #a297ab; }
[data-theme-root].dark .yw-stat-col-verdict[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark .yw-stat-col-verdict[data-tone="warn"] { color: #e7c48f; }
[data-theme-root].dark .yw-stat-col-verdict[data-tone="bad"] { color: #f0b8d2; }
@media (max-width: 640px) {
  .yw-stat-cols { grid-template-columns: 1fr; }
  .yw-stat-cols > .yw-stat-col { padding-left: 0; border-left: 0; }
  .yw-stat-cols > .yw-stat-col + .yw-stat-col { border-top: 1px solid #ebe7ed; }
}

/* ------------------------------------------------------- the dropdown -- */
/* DesignSelect (src/app/(app)/design-select.tsx, 10/14): the button and the
   list a form field uses instead of the browser's own select. The button is
   the header controls' white field; the list is the period and title menus'
   surface, the picked option tinted with a check. */
.yw-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; max-width: 100%; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid #e8e6e9; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px #00000009; color: #202024; font: inherit; font-size: 13px; font-weight: 400; letter-spacing: -.2px; text-align: left; cursor: pointer; transition: background .16s, border-color .16s, box-shadow .16s; }
.yw-select:hover { background: #faf8fc; }
.yw-select:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-select[data-open] { border-color: #cdb4f6; box-shadow: 0 0 0 3px rgba(185, 147, 255, .2); }
.yw-select[data-empty] { color: #8f8996; }
.yw-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-select > svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: #8d8595; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.yw-select[data-open] > svg { transform: rotate(180deg); }
[data-theme-root] .yw-select-menu { padding: 7px; border: 1px solid #e5ddea; border-radius: 15px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; scrollbar-width: thin; scrollbar-color: #dcd7e0 transparent; }
.yw-select-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #202024; font: inherit; font-size: 13px; letter-spacing: -.2px; text-align: left; text-decoration: none; cursor: pointer; transition: background .14s; }
.yw-select-option + .yw-select-option { margin-top: 1px; }
.yw-select-option:hover, .yw-select-option:focus-visible { background: #f0e9fb; outline: none; }
.yw-select-option[aria-selected="true"] { background: #eee3fc; color: #7c3aed; font-weight: 500; }
.yw-select-option > svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-theme-root].dark .yw-select { border-color: #1c2843; background: #0b1122; box-shadow: none; color: #f3eef8; }
[data-theme-root].dark .yw-select:hover { background: #142036; }
[data-theme-root].dark .yw-select[data-empty] { color: #a297ab; }
[data-theme-root].dark .yw-select-menu { border-color: #2a3654; background: #0f1729; box-shadow: 0 15px 45px rgba(0, 0, 0, .45); }
[data-theme-root].dark .yw-select-option { color: #f3eef8; }
[data-theme-root].dark .yw-select-option:hover { background: #1b2742; }
[data-theme-root].dark .yw-select-option[aria-selected="true"] { background: #2b2350; color: #c9b1ff; }
[data-theme-root].dark .yw-kpi-progress-fill[data-good-when="down"] { background: repeating-linear-gradient(125deg, #e8687f 0 2px, #5a2a34 2px 4px); }
[data-theme-root].dark .yw-kpi-progress-fill[data-good-when="down"][data-met] { background: repeating-linear-gradient(125deg, #4cc39a 0 2px, #1f4a3c 2px 4px); }

/* Dashboard Overview (9/29, the approved demo): the three-column grid, the
   Room revenue booked this month hero, the Last 14 nights card, the Last full week rows,
   the insight carousel, Needs you and the full-width pace card, then the
   month list and the More boxes under them. Skin only: every figure, link
   and action is the component's own. Scoped under .yw-dashboard-overview or
   the Overview's own zone markers; every colour has a [data-theme-root].dark
   variant at the bottom of the file. Sizes are the demo's
   (demo-style-nofont.css): cards radius 24 / padding 23 / border #e2e1e4,
   h2 19px, sub 12px #929097, .more 35px round, text-link 11px #8553c2. */

/* ------------------------------------------------------------ the grid -- */
.yw-dashboard-overview { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1.06fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 18px; }
.yw-dashboard-period-note { margin-top: 10px; color: #887c90; font-size: 12px; }
.yw-dashboard-overview > [data-zone] { margin: 0; min-width: 0; }
.yw-dashboard-overview > [data-zone="verdict"] { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.yw-dashboard-overview > [data-zone="evidence-tiles"] { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.yw-dashboard-overview > .yw-insight { grid-column: 3; grid-row: 1; }
.yw-dashboard-overview > [data-zone="working-row"] { display: contents; }
.yw-dashboard-overview > [data-zone="working-row"] > [data-slot] { display: flex; flex-direction: column; min-width: 0; }
.yw-dashboard-overview > [data-zone="working-row"] > [data-slot]:empty { display: none; }
.yw-dashboard-overview > [data-zone="working-row"] > [data-slot="nights"] { grid-column: 1; grid-row: 2; }
.yw-dashboard-overview > [data-zone="working-row"] > [data-slot="needs"] { grid-column: 3; grid-row: 2; }
.yw-dashboard-overview > [data-zone="working-row"] > [data-slot="pace"] { grid-column: 1 / -1; grid-row: 3; }
/* The explicit placement above assumes every zone exists. The weekly card
   is only rendered when the tenant is past the connect / waiting / empty
   states (overview-tab.tsx showKpiStrip), the nights card only when the
   board is ready, and the insight only with slides. Without the weekly card
   the pinned cells would leave holes (hero top left, Needs you bottom
   right, nothing between), so the grid falls back to two auto-flowing
   columns with the pace card full width. */
.yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
.yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > [data-zone],
.yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > .yw-insight,
.yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > [data-zone="working-row"] > [data-slot] { grid-column: auto; grid-row: auto; }
.yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > [data-zone="working-row"] > [data-slot="pace"] { grid-column: 1 / -1; }
/* Each wrapper's one card fills its cell, so the weekly card runs the full
   height of rows one and two beside the hero and the nights. */
.yw-dashboard-overview > [data-zone] > section, .yw-dashboard-overview > [data-zone="working-row"] > [data-slot] > section, .yw-dashboard-overview .yw-needs { flex: 1 1 auto; }
/* Total revenue (10/10, owner: "ONE clean card that does not disturb the
   existing Dashboard UI at all"). 10/11: it went to the very top, joined to
   the hero as an L (#3774), and came back here the same day (owner: "it
   looks ulgy and confusing having them on top, that doesent follow our new
   design style"): the top block is the approved three columns again, and
   the card is its own row under it, the same chrome as the pace strip.
   The card stays inside the evidence-tiles zone in the markup (the face is still four zones). On the grid the zone
   hands its two cards to the grid itself, as since 10/7: the weekly card in
   its own cell beside the hero and the nights (rows one and two, sized
   exactly as without the card), and Total revenue as one full-width row
   directly under that block, above the pace strip. Every rule that moves
   the pace strip down a row is scoped to a face that has this card, so a
   face without it is untouched. The card lays out across, not down: the
   total on the left, the sources as a row of compact tiles on the right,
   so it stays short. */
.yw-dashboard-overview > [data-zone] > section[data-surface="dashboard.overview.revenue-sources"] { flex: 0 0 auto; }
@media (min-width: 801px) {
  .yw-dashboard-overview > [data-zone="evidence-tiles"]:has(> [data-surface="dashboard.overview.revenue-sources"]) { display: contents; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] > :not([data-surface="dashboard.overview.revenue-sources"]) { grid-column: 2; grid-row: 1 / span 2; min-width: 0; margin: 0; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] > section[data-surface="dashboard.overview.revenue-sources"] { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .yw-dashboard-overview:has(> [data-zone="evidence-tiles"] > [data-surface="dashboard.overview.revenue-sources"]) > [data-zone="working-row"] > [data-slot="pace"] { grid-row: 4; }
}
/* Two columns (801 to 1100px): the insight and Needs you are row three
   there, so the card is row four and the pace strip row five. */
@media (min-width: 801px) and (max-width: 1100px) {
  .yw-dashboard-overview > [data-zone="evidence-tiles"] > section[data-surface="dashboard.overview.revenue-sources"] { grid-row: 4; }
  .yw-dashboard-overview:has(> [data-zone="evidence-tiles"] > [data-surface="dashboard.overview.revenue-sources"]) > [data-zone="working-row"] > [data-slot="pace"] { grid-row: 5; }
}
/* Phone: the stacked page, the card just before the pace strip. */
@media (max-width: 800px) {
  .yw-dashboard-overview:has(> [data-zone="evidence-tiles"] > [data-surface="dashboard.overview.revenue-sources"]) > [data-zone="evidence-tiles"] { display: contents; }
  .yw-dashboard-overview:has(> [data-zone="evidence-tiles"] > [data-surface="dashboard.overview.revenue-sources"]) > [data-zone="evidence-tiles"] > :not([data-surface="dashboard.overview.revenue-sources"]) { order: 3; width: 100%; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] > section[data-surface="dashboard.overview.revenue-sources"] { order: 6; width: 100%; margin: 0; }
  .yw-dashboard-overview:has(> [data-zone="evidence-tiles"] > [data-surface="dashboard.overview.revenue-sources"]) > [data-zone="working-row"] > [data-slot="pace"] { order: 7; }
}
/* The card itself: the same chrome as the pace strip. */
.yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); align-items: stretch; column-gap: 32px; border-color: #e2e1e4; border-radius: 24px; background: #fbfbfb; padding: 23px; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
.yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-main { grid-column: 1; min-width: 0; }
.yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-tiles { grid-column: 2; }
.yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-foot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
/* 10/11 (owner: "what are these generic things at the top. they dont look
   anything like our design style"): the Dashboard's language. The total at
   the KPI size, Room revenue and Non-room sales as hairline rows, and the
   sources as columns beside it: no box, no background, a hairline between
   them; the label 13px, the dollars at the row value size, a hatched track
   of the source's share of the largest, where the money came from as one
   12px quiet line. The notes under the card are the 12.5px note. */
.yw-revsrc-total { margin-top: 12px; color: #202024; font-size: clamp(34px, 2.9vw, 42px); font-weight: 500; letter-spacing: -.05em; line-height: 1.12; }
.yw-revsrc-split { display: flex; flex-direction: column; margin: 14px 0 0; color: #59535f; font-size: 13px; }
.yw-revsrc-split > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-revsrc-split strong { color: #202024; font-size: 14px; font-weight: 500; }
.yw-revsrc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); align-content: center; row-gap: 18px; }
.yw-revsrc-tile { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 2px 18px; border-left: 1px solid #eae8ec; }
.yw-revsrc-tile-label { overflow: hidden; color: #59535f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.yw-revsrc-tile-amount { color: #202024; font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.7px; }
.yw-revsrc-track { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #eeedf1; }
.yw-revsrc-track > i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(125deg, #9161df 0 2px, #dcccfa 2px 4px); }
.yw-revsrc-tags { overflow: hidden; color: #929097; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-foot .yw-card-sub { color: #929097; font-size: 12.5px; line-height: 1.5; }
@media (max-width: 1100px) {
  .yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-tiles { grid-column: 1; }
  .yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-foot { margin-top: 0; }
}
@media (max-width: 520px) {
  .yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] { padding: 18px; }
  .yw-revsrc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-revsrc-tile { padding: 2px 12px; }
  .yw-revsrc-tile-amount { font-size: 18px; }
}
[data-theme-root].dark .yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-revsrc-total, [data-theme-root].dark .yw-revsrc-tile-amount, [data-theme-root].dark .yw-revsrc-split strong { color: #f4eff6; }
[data-theme-root].dark .yw-revsrc-tile, [data-theme-root].dark .yw-revsrc-split > span { border-color: #1c2843; }
[data-theme-root].dark .yw-revsrc-tile-label, [data-theme-root].dark .yw-revsrc-split { color: #c3b9cc; }
[data-theme-root].dark .yw-revsrc-tags, [data-theme-root].dark .yw-dashboard-overview section[data-surface="dashboard.overview.revenue-sources"] > .yw-revsrc-foot .yw-card-sub { color: #a297ab; }
[data-theme-root].dark .yw-revsrc-track { background: #142036; }
[data-theme-root].dark .yw-revsrc-track > i { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }

/* --------------------------------------------------------- card chrome -- */
.yw-dashboard-overview section[data-surface="dashboard.today.hero"],
.yw-dashboard-overview section[data-surface="dashboard.today.nights"],
.yw-dashboard-overview section[data-tour="dashboard.scoreboard"],
.yw-dashboard-overview section[data-surface="dashboard.today.next14"],
.yw-dashboard-overview .yw-needs > section,
.yw-dashboard-overview section.yw-needs,
.yw-dashboard-overview [data-slot="needs"] > section,
.yw-dashboard-overview [data-slot="pace"] > section { border-color: #e2e1e4; border-radius: 24px; background: #fbfbfb; padding: 23px; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] { min-height: 431px; display: flex; flex-direction: column; }
/* A connect prompt or a waiting state has no track, no plan rows and no
   collect chip: it is a short message, not a mostly empty 431px card. */
.yw-dashboard-overview section[data-surface="dashboard.today.hero"]:not(:has(.yw-track)) { min-height: 0; }
.yw-dashboard-overview section[data-surface="dashboard.today.nights"] { min-height: 412px; padding-top: 25px; }
.yw-dashboard-overview .yw-needs > section, .yw-dashboard-overview section.yw-needs, .yw-dashboard-overview [data-slot="needs"] > section { min-height: 412px; }
.yw-dashboard-overview section[data-tour="dashboard.scoreboard"] { display: flex; flex-direction: column; }


/* ---------------------------------------------------------- the hero -- */
.yw-dashboard-booked-value { display: block; white-space: nowrap; }
/* The collect row: full width, amber, the same door to /money. Beats the
   chip's own utility classes (it is shared markup, dressed here). */
.yw-dashboard-overview .yw-hero-collect { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding: 10px 12px; border: 0; border-radius: 11px; background: #fff8eb; color: #a06b24; font-size: 12px; font-weight: 400; }
.yw-dashboard-overview .yw-hero-collect strong { font-weight: 600; color: #a06b24; }
.yw-dashboard-overview .yw-hero-collect .yw-hero-collect-asof { color: #b18b56; font-size: 10px; }
.yw-hero-collect-chevron { color: #c9a56f; font-size: 15px; line-height: 1; }
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] > .yw-row-stats + .yw-hero-collect, .yw-dashboard-overview section[data-surface="dashboard.today.hero"] > .yw-track-labels + .yw-hero-collect { margin-top: 5px; }
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] > .yw-hero-collect { margin-top: auto; padding-top: 10px; }

/* --------------------------------------------------- the last 14 nights -- */
.yw-dashboard-overview .yw-floor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 9px; margin-top: 24px; padding-top: 19px; border-top: 1px solid #e5e4e7; }
.yw-dashboard-overview .yw-floor-stat { padding: 0; border: 0; border-radius: 0; background: transparent; }
.yw-dashboard-overview .yw-floor-stat-label { color: #999; font-size: 9px; font-weight: 400; letter-spacing: .35px; }
.yw-dashboard-overview .yw-floor-stat-help { position: relative; width: fit-content; max-width: 100%; }
.yw-dashboard-overview .yw-floor-stat-help::after { position: absolute; top: 100%; left: 0; width: 100%; height: 12px; content: ""; }
.yw-dashboard-overview .yw-floor-stat-help-trigger { display: block; padding: 0; border: 0; background: none; text-align: left; text-transform: uppercase; cursor: help; transition: color .18s ease; }
.yw-dashboard-overview .yw-floor-stat-help-trigger:hover, .yw-dashboard-overview .yw-floor-stat-help-trigger:focus-visible { color: #7c3aed; }
.yw-dashboard-overview .yw-floor-stat-help-trigger:focus-visible { outline: 2px solid #ad80ee; outline-offset: 3px; border-radius: 2px; }
.yw-dashboard-overview .yw-floor-stat-popover { position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; width: min(265px, 74vw); padding: 13px 15px; border: 1px solid #e5ddea; border-radius: 13px; background: #fdfcfe; box-shadow: 0 14px 35px #3a214425; color: #62576b; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.5; text-transform: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1), visibility .2s; }
.yw-dashboard-overview .yw-floor-stat-help:hover .yw-floor-stat-popover, .yw-dashboard-overview .yw-floor-stat-help:focus-within .yw-floor-stat-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.yw-dashboard-overview .yw-floor-stat-popover strong { display: block; margin-bottom: 5px; color: #29242e; font-size: 12px; font-weight: 500; }
.yw-dashboard-overview .yw-floor-stat-popover p + p { margin-top: 6px; }
.yw-dashboard-overview .yw-floor-stat-popover a { display: inline-block; margin-top: 9px; color: #7c3aed; text-decoration: none; }
.yw-dashboard-overview .yw-floor-stat-popover a:hover { text-decoration: underline; text-underline-offset: 2px; }
.yw-dashboard-overview .yw-floor-stat:nth-child(3n) .yw-floor-stat-popover { right: 0; left: auto; transform-origin: top right; }
@media (max-width: 639px) { .yw-dashboard-overview .yw-floor-stat:nth-child(3n) .yw-floor-stat-popover { right: auto; left: 0; } .yw-dashboard-overview .yw-floor-stat:nth-child(2n) .yw-floor-stat-popover { right: 0; left: auto; transform-origin: top right; } }
.yw-dashboard-overview .yw-floor-stat-value { margin: 5px 0 2px; color: #202024; font-size: 17px; font-weight: 500; letter-spacing: -.5px; }
.yw-dashboard-overview .yw-floor-stat a:hover .yw-floor-stat-value { color: #8228ef; }
.yw-dashboard-overview .yw-floor-stat-sub { color: #939096; font-size: 10px; line-height: 1.45; }


/* ---------------------------------------------------------- needs you -- */
/* The card itself is the kit's (skin/kit.css); here, its height on the grid
   and the older shared-card form (TriagedQueueSection) it can still hold. */
.yw-dashboard-overview .yw-needs-card { min-height: 412px; }
.yw-dashboard-overview .yw-needs > .yw-needs-card { min-height: 412px; }
.yw-dashboard-overview .yw-needs > section { display: flex; flex: 1 1 auto; flex-direction: column; padding-bottom: 15px; }
/* The shared card's header, read as the demo's card-head: the label is the
   title, the count line is the sub. Room on the right for the round link. */
.yw-dashboard-overview .yw-needs > section > header { margin: 0 0 14px; padding: 0 44px 0 0; border: 0; }
.yw-dashboard-overview .yw-needs > section > header .text-violet-600, .yw-dashboard-overview section.yw-needs > .text-violet-600, .yw-dashboard-overview .yw-needs > section > span > .text-violet-600 { color: #202024; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.55px; }
.yw-dashboard-overview .yw-needs > section > header > div > div:last-child { margin-top: 3px; color: #929097; font-size: 12px; font-weight: 400; line-height: 1.5; }
.yw-dashboard-overview .yw-needs > section > header > div > div:last-child .num { color: #929097; }
.yw-dashboard-overview .yw-needs > section > header > div > div:last-child .text-zinc-700 { color: #929097; font-size: 12px; font-weight: 400; }
.yw-dashboard-overview .yw-needs > section > ol { max-height: none; overflow: visible; }
.yw-dashboard-overview .yw-needs > section > ol > li { border-color: #eae8ec; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 13px 0 4px; background: transparent; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child > div:first-child { width: auto; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child > div:first-child .num { display: none; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child > div:first-child > span { display: inline-grid; place-items: center; min-width: 33px; height: 33px; padding: 0 7px; border-radius: 17px; background: #f7e8ee; color: #ad7692; font-size: 8px; letter-spacing: .3px; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child > div:first-child > span.text-zinc-500 { background: #ede7f7; color: #956dbd; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-xs.font-medium { font-size: 12px; line-height: 1.4; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-xs.font-medium a { color: #202024; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-zinc-500 { color: #a09aa4; font-size: 10px; line-height: 1.5; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-right .num { color: #59535f; font-size: 12px; }
.yw-dashboard-overview .yw-needs > section > ol > li:hover { background: transparent; }
/* Open, Assign and Dismiss stay real buttons, compact and always on the row
   (never hover-only). */
.yw-dashboard-overview .yw-needs > section > ol > li > div:nth-child(2) { margin-top: 0; padding: 0 0 12px; gap: 6px; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:nth-child(2) a, .yw-dashboard-overview .yw-needs > section > ol > li > div:nth-child(2) button { min-height: 30px; padding: 0 11px; border-radius: 9px; font-size: 11px; }
.yw-dashboard-overview .yw-needs > section > ol > li > div:nth-child(2) .text-zinc-400 { font-size: 10px; }
.yw-dashboard-overview .yw-needs > section > ol > li > a { min-height: 36px; padding: 8px 0 0; color: #8853be; font-size: 11px; }
.yw-dashboard-overview .yw-needs > section > ol > li > a:hover { background: transparent; text-decoration: underline; }
.yw-dashboard-overview .yw-needs > section > .text-sm, .yw-dashboard-overview section.yw-needs > .text-sm { margin-top: 14px; color: #59535f; font-size: 13px; }

/* ------------------------------------------------------- the pace card -- */
.yw-dashboard-overview .yw-pace .yw-card-head { margin-bottom: 22px; }
.yw-pace-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.yw-dashboard-overview .yw-pace .yw-card-title { font-size: 18px; }
.yw-dashboard-overview .yw-pace .yw-card-title > a > [aria-hidden] { display: none; }
.yw-dashboard-overview .yw-pace-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 7px; margin-top: 0; }
.yw-dashboard-overview .yw-pace-day { position: relative; padding: 10px 2px 9px; border: 1px solid #f0d2dd; border-radius: 11px; background: linear-gradient(#fff9fb, #faedf3); color: #b4547d; text-align: center; transition: transform 200ms, box-shadow 200ms; }
.yw-dashboard-overview .yw-pace-day:hover { transform: translateY(-4px); box-shadow: 0 5px 12px rgba(181, 104, 146, .13); }
.yw-dashboard-overview .yw-pace-day[data-pace="ahead"], .yw-dashboard-overview .yw-pace-day[data-pace="on"] { border-color: #d3e8df; background: linear-gradient(#f4fcf9, #e8f5ef); color: #508c76; }
.yw-dashboard-overview .yw-pace-day[data-pace="none"] { border-color: #e5e4e7; background: #fff; color: #6b6472; }
.yw-dashboard-overview .yw-pace-dow { color: #a27f92; font-size: 9px; font-weight: 400; letter-spacing: .2px; opacity: 1; }
.yw-dashboard-overview .yw-pace-day[data-pace="ahead"] .yw-pace-dow, .yw-dashboard-overview .yw-pace-day[data-pace="on"] .yw-pace-dow { color: #88a597; }
.yw-dashboard-overview .yw-pace-day[data-pace="none"] .yw-pace-dow { color: #9a949f; }
.yw-dashboard-overview .yw-pace-num { font-size: 11px; opacity: 1; }
.yw-dashboard-overview .yw-pace-occ { margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.6px; }
.yw-dashboard-overview .yw-pace-word { font-size: 9px; line-height: 1.5; opacity: 1; }
.yw-dashboard-overview .yw-pace-gap { margin-top: 4px; font-size: 8px; font-weight: 400; line-height: 1.4; white-space: nowrap; }
.yw-dashboard-overview .yw-pace-day[data-why] .yw-pace-gap { white-space: normal; }
.yw-dashboard-overview .yw-pace-why { margin-top: 2px; font-size: 8px; font-weight: 400; line-height: 1.3; white-space: normal; opacity: .8; }
.yw-pace-meter { height: 3px; margin: 10px 9px 0; border-radius: 10px; background: #edccda; }
.yw-pace-meter i { display: block; height: 100%; border-radius: 10px; background: #d982a5; }
.yw-pace-day[data-pace="ahead"] .yw-pace-meter, .yw-pace-day[data-pace="on"] .yw-pace-meter { background: #d9eae2; }
.yw-pace-day[data-pace="ahead"] .yw-pace-meter i, .yw-pace-day[data-pace="on"] .yw-pace-meter i { background: #70b396; }
.yw-pace-day[data-pace="none"] .yw-pace-meter { background: #e8e6ea; }
.yw-pace-day[data-pace="none"] .yw-pace-meter i { background: #a7a2ad; }
.yw-dashboard-overview .yw-forward-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 21px; padding-top: 19px; border-top: 1px solid #e5e4e7; }
.yw-forward-label { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: #73687e; font-size: 12px; }
.yw-dashboard-overview .yw-forward-label .font-semibold { color: #73687e; font-weight: 400; }
.yw-forward-stat span { display: block; color: #99909f; font-size: 10px; }
.yw-forward-stat strong { display: block; color: #202024; font-size: 17px; font-weight: 500; letter-spacing: -.5px; }

/* ------------------------------------------ below the grid: same chrome -- */
[data-theme-root] .yw-dashboard-overview ~ [data-zone="evidence-months"] { margin-top: 16px; padding: 23px; border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
[data-theme-root] .yw-dashboard-overview ~ [data-zone="evidence-months"] > div:first-child > .text-violet-600 { color: #202024; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.55px; }
.yw-month-compare { margin-top: 12px; }
.yw-month-compare-key { display: flex; justify-content: flex-end; gap: 18px; color: #8e8494; font-size: 10px; }
.yw-month-compare-key span { display: inline-flex; align-items: center; gap: 6px; }
.yw-month-compare-key i { display: inline-block; width: 13px; height: 8px; }
.yw-month-key-booked { background: repeating-linear-gradient(125deg, #a76ae8 0 2px, #dfcaf7 2px 4px); }
.yw-month-key-plan { height: 0 !important; border-top: 2px solid #a76c8a; }
.yw-month-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #d9cbe5 transparent; }
.yw-month-plot { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding-top: 10px; }
.yw-month-axis { display: flex; flex-direction: column; justify-content: space-between; height: 176px; padding: 23px 5px 0 0; color: #a9a0af; font-size: 10px; text-align: right; }
.yw-month-columns { display: grid; min-width: 0; }
.yw-month-column { display: flex; flex-direction: column; align-items: center; min-width: 0; height: 204px; padding: 0 5px; color: #202024; text-decoration: none; outline-offset: -2px; transition: background .2s ease; }
.yw-month-column:hover, .yw-month-column:focus-visible, .yw-month-column[data-active="true"] { background: #f4eefb; }
.yw-month-column:focus-visible { outline: 2px solid #7836e9; }
.yw-month-column-value { display: block; height: 23px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.yw-month-column-rail { position: relative; display: block; width: 100%; height: 153px; border-bottom: 1px solid #cfc8d5; background: linear-gradient(to bottom, #ece8f0 0 1px, transparent 1px calc(50% - .5px), #ece8f0 calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
[data-theme-root] .yw-month-bar-fill { position: absolute; bottom: 0; left: 50%; width: min(43%, 36px); min-height: 1px; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(125deg, #d85e9e 0 2px, #f8dae9 2px 4px); transform: translateX(-50%); transform-origin: bottom; animation: yw-month-grow .65s cubic-bezier(.2,.7,.2,1) both; }
[data-theme-root] .yw-month-column[data-plan-state="met"] .yw-month-bar-fill { background: repeating-linear-gradient(125deg, #a6a0ac 0 2px, #d8d3dc 2px 4px); }
[data-theme-root] .yw-month-column[data-plan-state="open"] .yw-month-bar-fill { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
[data-theme-root] .yw-month-column[data-plan-state="unset"] .yw-month-bar-fill { background: #c5c0cb; }
.yw-month-target-tick { position: absolute; left: 8%; width: 84%; height: 2px; background: #a76c8a; }
.yw-month-column-label { display: flex; align-items: baseline; gap: 3px; margin-top: 7px; color: #736b79; font-size: 11px; white-space: nowrap; }
.yw-month-column-label b, .yw-month-detail-period b { color: #7c3aed; font-size: 9px; font-weight: 500; }
.yw-month-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; min-height: 42px; padding: 13px 0 0; border-top: 1px solid #e9e5ec; color: #8b8290; font-size: 11px; }
.yw-month-detail-period { min-width: 45px; color: #28232e; font-size: 12px; font-weight: 500; }
.yw-month-detail strong { color: #28232e; font-size: 13px; font-weight: 500; }
.yw-month-detail > a { margin-left: auto; color: #7c3aed; font-weight: 500; text-decoration: none; }
.yw-month-detail > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.yw-month-empty { padding: 20px 0; color: #8b8290; font-size: 12px; }
[data-theme-root].dark .yw-month-column { color: #f4eff6; }
[data-theme-root].dark .yw-month-column:hover, [data-theme-root].dark .yw-month-column:focus-visible, [data-theme-root].dark .yw-month-column[data-active="true"] { background: #30263a; }
[data-theme-root].dark .yw-month-column-rail { border-bottom-color: #5b5063; background: linear-gradient(to bottom, #39323f 0 1px, transparent 1px calc(50% - .5px), #39323f calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
[data-theme-root].dark .yw-month-detail { border-top-color: #39323f; }
[data-theme-root].dark .yw-month-detail-period, [data-theme-root].dark .yw-month-detail strong { color: #f3eef8; }
[data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] { margin-top: 24px; }
[data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel], [data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[aria-busy] { margin-top: 12px; border-color: #e2e1e4; border-radius: 24px; background: #fbfbfb; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
[data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[aria-busy] { padding: 23px; }
[data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel] > div:first-child { padding: 19px 23px 10px; }
[data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel] > div:first-child > h2 { color: #202024; font-size: 19px; font-weight: 500; letter-spacing: -.55px; }
[data-theme-root] .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel] > div:last-child { padding: 14px 23px 23px; border-top-color: #eae8ec; }
[data-theme-root] .yw-my-boards-shell > section[data-panel] { overflow: visible; }
[data-theme-root] .yw-my-boards-shell > section[data-panel] > div:first-child { padding-bottom: 0; }
[data-theme-root] .yw-my-boards-shell > section[data-panel] > div:first-child > span.num { padding: 0; border-radius: 0; background: transparent; color: #99909e; font-size: 12px; font-weight: 400; }
[data-theme-root] .yw-my-boards-shell > section[data-panel] > div:last-child { padding-top: 11px; border-top: 0; }
.yw-my-boards-empty { margin: 0 0 19px; color: #8e8791; font-size: 12px; }
.yw-my-boards-list { margin-bottom: 18px; }
.yw-my-boards-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e9e6ec; }
.yw-my-boards-list li > a:first-child { display: flex; align-items: baseline; gap: 13px; min-width: 0; flex: 1; color: #28232d; text-decoration: none; }
.yw-my-boards-list li > a:first-child:hover strong { color: #7c3aed; }
.yw-my-boards-list strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-my-boards-list span { color: #99909e; font-size: 11px; }
.yw-my-boards-list li > a:last-child:not(:first-child) { color: #7c3aed; font-size: 11px; text-decoration: none; }
.yw-my-boards-create > p { margin-bottom: 8px; color: #99909e; font-size: 10px; }
.yw-my-boards-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #e9e6ec; border-bottom: 1px solid #e9e6ec; }
.yw-my-boards-starters :is(button, a) { display: flex; justify-content: space-between; align-items: center; min-width: 0; padding: 15px 18px 15px 0; border: 0; border-right: 1px solid #e9e6ec; background: transparent; color: #29242e; font-size: 13px; text-align: left; transition: color .18s ease, background .18s ease; }
.yw-my-boards-starters :is(button, a) + :is(button, a) { padding-left: 18px; }
.yw-my-boards-starters :is(button, a):last-child { border-right: 0; }
.yw-my-boards-starters :is(button, a):hover, .yw-my-boards-starters :is(button, a):focus-visible { color: #7c3aed; background: #f5f0fb; }
.yw-my-boards-starters :is(button, a):focus-visible, .yw-my-boards-custom:focus-visible { outline: 2px solid #7836e9; outline-offset: 2px; }
.yw-my-boards-starters :is(button, a) span:last-child { color: #b399cb; font-size: 15px; }
.yw-my-boards-starters a { text-decoration: none; }
.yw-my-boards-starter-error { margin: 8px 0 0; color: #be123c; font-size: 12px; }
.yw-my-boards-custom { display: block; margin: 14px 0 0 auto; padding: 0; border: 0; background: transparent; color: #7c3aed; font-size: 11px; font-weight: 500; transition: color .18s ease; }
.yw-my-boards-custom:hover { color: #5720bd; text-decoration: underline; text-underline-offset: 3px; }
.yw-my-boards-custom span { margin-left: 4px; }
@media (max-width: 650px) { .yw-my-boards-starters { grid-template-columns: 1fr; } .yw-my-boards-starters :is(button, a), .yw-my-boards-starters :is(button, a) + :is(button, a) { padding: 11px 0; border-right: 0; border-bottom: 1px solid #e9e6ec; } .yw-my-boards-starters :is(button, a):last-child { border-bottom: 0; } }
[data-theme-root].dark .yw-my-boards-list li, [data-theme-root].dark .yw-my-boards-starters, [data-theme-root].dark .yw-my-boards-starters :is(button, a) { border-color: #39323f; }
[data-theme-root].dark .yw-my-boards-list li > a:first-child, [data-theme-root].dark .yw-my-boards-starters :is(button, a) { color: #f3eef8; }
[data-theme-root].dark .yw-my-boards-starters :is(button, a):hover, [data-theme-root].dark .yw-my-boards-starters :is(button, a):focus-visible { background: #30263a; color: #c5a8ff; }

/* ------------------------------------------------------------ motion -- */
@keyframes yw-month-grow { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .yw-month-bar-fill, .yw-dashboard-overview .yw-pace-day, .yw-dashboard-overview .yw-floor-stat-popover, .yw-dashboard-overview .yw-floor-stat-help-trigger { animation: none; transition: none; }
  .yw-dashboard-overview .yw-pace-day:hover { transform: none; }
}

/* ---------------------------------------------------------- narrower -- */
@media (max-width: 1350px) {
  .yw-dashboard-overview { gap: 14px; }
  .yw-dashboard-overview section[data-surface="dashboard.today.hero"], .yw-dashboard-overview section[data-surface="dashboard.today.nights"], .yw-dashboard-overview section[data-tour="dashboard.scoreboard"], .yw-dashboard-overview section[data-surface="dashboard.today.next14"], .yw-dashboard-overview .yw-needs > section, .yw-dashboard-overview section.yw-needs, .yw-dashboard-overview [data-slot="needs"] > section, .yw-dashboard-overview [data-slot="pace"] > section { padding: 21px; }
}
@media (max-width: 1199px) {
  .yw-dashboard-overview .yw-pace-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .yw-dashboard-overview .yw-pace-day { padding: 8px 3px; }
  .yw-dashboard-overview .yw-pace-occ { margin-top: 4px; font-size: 20px; }
  .yw-pace-meter { margin-top: 7px; }
}
@media (max-width: 1100px) {
  /* Two columns: hero and nights on the left, the weekly card spanning the
     right; then the insight and Needs you side by side; the pace card last. */
  .yw-dashboard-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-dashboard-overview > [data-zone="verdict"] { grid-column: 1; grid-row: 1; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] { grid-column: 2; grid-row: 1 / span 2; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="nights"] { grid-column: 1; grid-row: 2; }
  .yw-dashboard-overview > .yw-insight { grid-column: 1; grid-row: 3; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="needs"] { grid-column: 2; grid-row: 3; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="pace"] { grid-column: 1 / -1; grid-row: 4; }
  /* Same fallback as above: no weekly card, no pinned cells. */
  .yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > [data-zone],
  .yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > .yw-insight,
  .yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > [data-zone="working-row"] > [data-slot] { grid-column: auto; grid-row: auto; }
  .yw-dashboard-overview:not(:has(> [data-zone="evidence-tiles"])) > [data-zone="working-row"] > [data-slot="pace"] { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .yw-dashboard-overview { display: flex; flex-direction: column; gap: 14px; }
  .yw-dashboard-overview > *, .yw-dashboard-overview > [data-zone="working-row"] > [data-slot] { width: 100%; }
  .yw-dashboard-overview > [data-zone="working-row"] { display: contents; }
  .yw-dashboard-overview > [data-zone="verdict"] { order: 1; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="nights"] { order: 2; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] { order: 3; }
  .yw-dashboard-overview > .yw-insight { order: 4; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="needs"] { order: 5; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="pace"] { order: 6; }
  .yw-dashboard-overview section[data-surface="dashboard.today.hero"], .yw-dashboard-overview section[data-surface="dashboard.today.nights"], .yw-dashboard-overview .yw-needs > section, .yw-dashboard-overview section.yw-needs, .yw-dashboard-overview [data-slot="needs"] > section { min-height: 0; }
  .yw-dashboard-overview .yw-needs > .yw-needs-card { min-height: 0; }
  .yw-dashboard-overview .yw-pace-gap { white-space: normal; }
}
@media (max-width: 520px) {
  .yw-dashboard-overview section[data-surface="dashboard.today.hero"], .yw-dashboard-overview section[data-surface="dashboard.today.nights"], .yw-dashboard-overview section[data-tour="dashboard.scoreboard"], .yw-dashboard-overview section[data-surface="dashboard.today.next14"], .yw-dashboard-overview .yw-needs > section, .yw-dashboard-overview section.yw-needs, .yw-dashboard-overview [data-slot="needs"] > section, .yw-dashboard-overview [data-slot="pace"] > section, [data-theme-root] .yw-dashboard-overview ~ [data-zone="evidence-months"] { padding: 18px; }
  .yw-dashboard-overview .yw-floor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yw-dashboard-overview .yw-pace-grid { gap: 4px; }
  .yw-dashboard-overview .yw-pace-day { padding: 7px 1px; border-radius: 8px; }
  .yw-dashboard-overview .yw-pace-occ { font-size: 14px; }
  .yw-pace-meter { margin: 6px 4px 0; }
  .yw-dashboard-overview .yw-forward-stats { gap: 12px 18px; }
}

/* --------------------------------------------------------------- dark -- */
[data-theme-root].dark .yw-dashboard-period-note { color: #a89db3; }
[data-theme-root].dark .yw-dashboard-overview section[data-surface="dashboard.today.hero"],
[data-theme-root].dark .yw-dashboard-overview section[data-surface="dashboard.today.nights"],
[data-theme-root].dark .yw-dashboard-overview section[data-tour="dashboard.scoreboard"],
[data-theme-root].dark .yw-dashboard-overview section[data-surface="dashboard.today.next14"],
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section,
[data-theme-root].dark .yw-dashboard-overview section.yw-needs,
[data-theme-root].dark .yw-dashboard-overview [data-slot="needs"] > section,
[data-theme-root].dark .yw-dashboard-overview [data-slot="pace"] > section,
[data-theme-root].dark .yw-dashboard-overview ~ [data-zone="evidence-months"],
[data-theme-root].dark .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel],
[data-theme-root].dark .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[aria-busy] { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stat-popover { border-color: #3d314e; background: #211b2b; color: #d1c5dc; box-shadow: 0 14px 35px #0005; }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stat-popover strong { color: #f3eef8; }
[data-theme-root].dark [data-skin-skeleton] { background-image: linear-gradient(100deg, #20243a 22%, #30324a 38%, #20243a 54%); }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stat-value, [data-theme-root].dark .yw-forward-stat strong,
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > header .text-violet-600, [data-theme-root].dark .yw-dashboard-overview section.yw-needs > .text-violet-600, [data-theme-root].dark .yw-dashboard-overview .yw-needs > section > span > .text-violet-600,
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-xs.font-medium a,
[data-theme-root].dark .yw-dashboard-overview ~ [data-zone="evidence-months"] > div:first-child > .text-violet-600,
[data-theme-root].dark .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel] > div:first-child > h2 { color: #f3eef8; }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stat-label, [data-theme-root].dark .yw-dashboard-overview .yw-floor-stat-sub,
[data-theme-root].dark .yw-forward-stat span, [data-theme-root].dark .yw-forward-label, [data-theme-root].dark .yw-dashboard-overview .yw-forward-label .font-semibold,
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > header > div > div:last-child, [data-theme-root].dark .yw-dashboard-overview .yw-needs > section > header > div > div:last-child .num, [data-theme-root].dark .yw-dashboard-overview .yw-needs > section > header > div > div:last-child .text-zinc-700,
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-zinc-500 { color: #a297ab; }
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > .text-sm, [data-theme-root].dark .yw-dashboard-overview section.yw-needs > .text-sm, [data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li > div:first-child .text-right .num { color: #c3b9cc; }
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li > a { color: #c5a8ff; }
[data-theme-root].dark .yw-dashboard-overview .yw-hero-collect { background: #3d3122; color: #f0c98a; }
[data-theme-root].dark .yw-dashboard-overview .yw-hero-collect strong { color: #f0c98a; }
[data-theme-root].dark .yw-dashboard-overview .yw-hero-collect .yw-hero-collect-asof { color: #c9a56f; }
[data-theme-root].dark .yw-hero-collect-chevron { color: #c9a56f; }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stats, [data-theme-root].dark .yw-dashboard-overview .yw-forward-stats { border-top-color: #1c2843; }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stat a:hover .yw-floor-stat-value { color: #c5a8ff; }
[data-theme-root].dark .yw-dashboard-overview .yw-floor-stat-value { color: #f3eef8; }
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li { border-color: #1c2843; }
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li > div:first-child > div:first-child > span { background: #4a3040; color: #e6a9c4; }
[data-theme-root].dark .yw-dashboard-overview .yw-needs > section > ol > li > div:first-child > div:first-child > span.text-zinc-500 { background: #3d3150; color: #c5a8ff; }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-day { border-color: #5a3a4b; background: linear-gradient(#3b2a35, #45303d); color: #f0a3c2; }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-day:hover { box-shadow: 0 5px 12px rgba(0, 0, 0, .3); }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-day[data-pace="ahead"], [data-theme-root].dark .yw-dashboard-overview .yw-pace-day[data-pace="on"] { border-color: #345a4c; background: linear-gradient(#26382f, #2c4238); color: #8fd6b8; }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-day[data-pace="none"] { border-color: #1c2843; background: #111b30; color: #c3b9cc; }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-dow { color: #c48aa2; }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-day[data-pace="ahead"] .yw-pace-dow, [data-theme-root].dark .yw-dashboard-overview .yw-pace-day[data-pace="on"] .yw-pace-dow { color: #86b39d; }
[data-theme-root].dark .yw-dashboard-overview .yw-pace-day[data-pace="none"] .yw-pace-dow { color: #a297ab; }
[data-theme-root].dark .yw-pace-meter { background: #5a3a4b; }
[data-theme-root].dark .yw-pace-meter i { background: #e98db4; }
[data-theme-root].dark .yw-pace-day[data-pace="ahead"] .yw-pace-meter, [data-theme-root].dark .yw-pace-day[data-pace="on"] .yw-pace-meter { background: #345a4c; }
[data-theme-root].dark .yw-pace-day[data-pace="ahead"] .yw-pace-meter i, [data-theme-root].dark .yw-pace-day[data-pace="on"] .yw-pace-meter i { background: #7fd3b4; }
[data-theme-root].dark .yw-pace-day[data-pace="none"] .yw-pace-meter { background: #1c2843; }
[data-theme-root].dark .yw-pace-day[data-pace="none"] .yw-pace-meter i { background: #8b8394; }
[data-theme-root].dark .yw-dashboard-overview ~ [data-surface="dashboard.overview.more"] section[data-panel] > div:last-child { border-top-color: #1c2843; }
[data-theme-root] .yw-more-tools-card { overflow: hidden; border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; box-shadow: 0 2px 3px rgba(0, 0, 0, .008); }
[data-theme-root] .yw-more-tools-header { display: flex; align-items: baseline; gap: 9px; padding: 20px 23px 15px; border-bottom: 1px solid #e9e7eb; }
[data-theme-root] .yw-more-tools-header h2 { margin: 0; color: #202024; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.55px; }
[data-theme-root] .yw-more-tools-header > span { color: #929097; font-size: 12px; font-variant-numeric: tabular-nums; }
[data-theme-root] .yw-more-tools-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px 5px; padding: 12px 17px 17px; }
[data-theme-root] .yw-more-tool { display: flex; min-width: 0; min-height: 64px; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 11px; border-radius: 11px; color: inherit; text-decoration: none; transition: background-color .16s ease, color .16s ease; }
[data-theme-root] .yw-more-tool:hover, [data-theme-root] .yw-more-tool:focus-visible { background: #f1ebf9; color: #6735a4; }
[data-theme-root] .yw-more-tool:focus-visible { outline: 2px solid #b993ff; outline-offset: -2px; }
[data-theme-root] .yw-more-tool-title { display: flex; min-width: 0; align-items: center; gap: 6px; color: #29242e; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: -.2px; }
[data-theme-root] .yw-more-tool-label { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
[data-theme-root] .yw-more-tool-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #9253e9; }
[data-theme-root] .yw-more-tool-arrow { margin-left: auto; color: #aaa4ad; font-size: 15px; line-height: 1; transition: color .16s ease, transform .16s ease; }
[data-theme-root] .yw-more-tool:hover .yw-more-tool-arrow, [data-theme-root] .yw-more-tool:focus-visible .yw-more-tool-arrow { color: #8151b7; transform: translateX(2px); }
[data-theme-root] .yw-more-tool-line { display: -webkit-box; overflow: hidden; color: #827b89; font-size: 12px; font-weight: 400; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 1199px) { [data-theme-root] .yw-more-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) { [data-theme-root] .yw-more-tools-card { border-radius: 20px; } [data-theme-root] .yw-more-tools-header { padding: 18px 19px 13px; } [data-theme-root] .yw-more-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px 12px 13px; gap: 2px; } [data-theme-root] .yw-more-tool { min-height: 61px; padding: 9px 8px; } [data-theme-root] .yw-more-tool-title { font-size: 13px; } [data-theme-root] .yw-more-tool-line { font-size: 11px; } }

/* Pencil lead surfaces for the redesigned More Tools card. */
[data-theme-root].dark .yw-more-tools-card { border-color: #1c2843; background: #0d1527; box-shadow: none; }
[data-theme-root].dark .yw-more-tools-header { border-bottom-color: #1c2843; }
[data-theme-root].dark .yw-more-tools-header h2, [data-theme-root].dark .yw-more-tool-title { color: #f3eef8; }
[data-theme-root].dark .yw-more-tools-header > span, [data-theme-root].dark .yw-more-tool-line { color: #a297ab; }
[data-theme-root].dark .yw-more-tool:hover, [data-theme-root].dark .yw-more-tool:focus-visible { background: #30263a; color: #d4baff; }
[data-theme-root].dark .yw-more-tool-arrow { color: #8f8499; }
[data-theme-root].dark .yw-more-tool:hover .yw-more-tool-arrow, [data-theme-root].dark .yw-more-tool:focus-visible .yw-more-tool-arrow { color: #d4baff; }

/* ---- Total revenue in the hero (10/12) ------------------------------------
   The Other departments hover lists each department: label left, dollars
   right, hairlines between, on the app's black hover. */
.hw-info-body .yw-hero-dept-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--yw-tip-rule, #eae8ec); }
.hw-info-body .yw-money-hover-meta + .yw-hero-dept-row { margin-top: 6px; }
.hw-info-body .yw-hero-dept-row + p { margin-top: 8px; }

/* ---- No blank space between or inside the top cards (10/12) --------------
   Owner: "fix the other cards gaps and blank spaces". Three columns used to
   share two rows, so the insight card sat in the hero's row with a hole under
   it, and the weekly card stretched over both rows with its six metrics
   bunched at the top. Now four rows: each column stacks its own cards with
   one gap. The insight keeps its own height and Needs you takes the rest of
   its column (owner: "just because there are 2 alerts at the moment doesent
   mean tomorrow arent gona be more"); the weekly card's metrics share its
   full height. Three columns only; two-column and phone are unchanged. */
@media (min-width: 1101px) {
  .yw-dashboard-overview > [data-zone="verdict"] { grid-row: 1 / span 2; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="nights"] { grid-row: 3 / span 2; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] { grid-row: 1 / span 4; }
  .yw-dashboard-overview > .yw-insight { grid-row: 1; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="needs"] { grid-row: 2 / span 3; }
  .yw-dashboard-overview > [data-zone="working-row"] > [data-slot="pace"] { grid-row: 5; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] > section.yw-weekly { display: flex; flex-direction: column; }
  .yw-dashboard-overview > [data-zone="evidence-tiles"] > section.yw-weekly > .yw-kpi-list { flex: 1 1 auto; grid-auto-rows: 1fr; }
}

/* ---- Needs you rows, larger (10/12) ---------------------------------------
   Owner: "we can do 5 but make each item a bit bigger right now the are too
   small". Dashboard only: the title at 14px, the detail at the app's 12px
   floor, a 38px mark, and the five rows share the card's height (each at
   most 140px, so a short list never balloons). */
.yw-dashboard-overview [data-slot="needs"] .yw-needs-row { flex: 1 1 auto; min-height: 84px; max-height: 140px; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-row-link { gap: 14px; padding: 15px 3px; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-mark { width: 38px; height: 38px; flex-basis: 38px; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-mark svg { width: 18px; height: 18px; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-row-copy { gap: 4px; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-row-title { font-size: 14px; line-height: 1.35; letter-spacing: -.2px; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-row-detail { font-size: 12px; line-height: 1.4; }
.yw-dashboard-overview [data-slot="needs"] .yw-needs-row-actions { margin-left: 52px; }

/* ---- Larger small type on the top cards (10/12) ---------------------------
   Owner, on the hero's rows: "lets make these a bit bigger"; on Last full
   week: "also these small fonts a bit bigger". Dashboard only: the hero's
   row labels 12 to 13px and figures 14 to 16px; the weekly card's metric
   names 13 to 14px, the vs-prior-week and target lines 10 and 11 to 12px (the
   app's floor), the "Actual" label 10 to 11px. */
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] .yw-row-stat { font-size: 13px; }
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] .yw-row-stat dd { font-size: 16px; }
.yw-dashboard-overview > [data-zone="evidence-tiles"] .yw-kpi-list > .group > div:first-child .uppercase { font-size: 14px; }
.yw-dashboard-overview > [data-zone="evidence-tiles"] .yw-kpi-list > .group > div:not(:first-child):not(:last-child):not([data-slot]):not(.yw-kpi-progress) { font-size: 12px; }
.yw-dashboard-overview > [data-zone="evidence-tiles"] .yw-kpi-list > .group > p { font-size: 12px; }
.yw-dashboard-overview > [data-zone="evidence-tiles"] .yw-kpi-list > .group > [data-slot="stat-tile-row"]::before { font-size: 11px; }
.yw-dashboard-overview > [data-zone="evidence-tiles"] .yw-kpi-list > .group > div:last-child { font-size: 12px; }

/* ---- The collect button's slot (10/12) ------------------------------------
   Owner: "dont forget to leave space in the container for this button when it
   appears". The button streams in after the card; its slot is drawn with the
   card at the button's height, pinned to the card's foot, so nothing moves
   when it lands. */
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] > .yw-hero-collect-slot { display: flex; flex-direction: column; justify-content: flex-end; min-height: 51px; margin-top: auto; padding-top: 10px; }
.yw-dashboard-overview section[data-surface="dashboard.today.hero"] > .yw-hero-collect-slot > .yw-hero-collect { margin-top: 0; }

/* The hover cue beside a label that opens a panel (10/12, hero's Other
   departments): a small chevron in the label's colour that nudges right on
   hover. */
.yw-hover-cue { display: inline-block; width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .2s ease, opacity .2s ease; }
.hw-info-label:hover .yw-hover-cue, .hw-info-label:focus-visible .yw-hover-cue, .hw-info-label[aria-expanded="true"] .yw-hover-cue { opacity: 1; transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .yw-hover-cue { transition: none; } }