/* 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); }
/* The Wizard identity drawn behind a hero card (kit/identity-dots.tsx): under
   the content, above the card ground, clear of every word and number. */
:is(.yw-card, .yw-needs-card):has(> .yw-identity) { position: relative; isolation: isolate; }
.yw-identity { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.yw-identity > canvas { display: block; width: 100%; height: 100%; }
.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); }

/* A notice card (beta-end-modal.tsx, 10/20): glass, top right under the page
   header, never over the middle of the page. Not modal; the page stays usable. */
.yw-notice { position: fixed; top: 84px; right: 24px; z-index: 70; display: flex; width: min(380px, calc(100vw - 32px)); flex-direction: column; gap: 8px; padding: 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; background: rgba(250, 249, 252, .58); color: #202024; font-size: 14px; letter-spacing: -.25px; box-shadow: 0 20px 50px rgba(20, 16, 28, .16), 0 2px 8px rgba(20, 16, 28, .05); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); animation: yw-notice-in .28s cubic-bezier(.16, 1, .3, 1) both; }
.yw-notice-title { margin: 0; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
/* 10/20, later: the title and the ×, the price as the one number. */
.yw-notice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.yw-notice-close { display: inline-flex; width: 28px; height: 28px; flex: none; align-items: center; justify-content: center; margin: -4px -6px 0 0; border-radius: 999px; color: #929097; cursor: pointer; transition: background .16s, color .16s; }
.yw-notice-close > svg { width: 16px; height: 16px; }
.yw-notice-close:hover { background: rgba(32, 32, 36, .06); color: #202024; }
.yw-notice-close:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-notice-price { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.yw-notice-amount { color: #202024; font-size: 34px; font-weight: 500; letter-spacing: -1px; line-height: 1.1; }
.yw-notice-amount > small { margin-left: 2px; color: #929097; font-size: 14px; font-weight: 400; letter-spacing: -.25px; }
.yw-notice-price > .yw-notice-cap { margin: 0; }
.yw-notice-body { margin: 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-notice-strong { margin: 0; color: #202024; font-size: 13px; line-height: 1.5; }
.yw-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.yw-notice-actions > form { display: contents; }
.yw-notice-btn { display: inline-flex; min-height: 36px; flex: 1 1 auto; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid #e2e1e4; border-radius: 11px; background: rgba(255, 255, 255, .45); color: #202024; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-notice-btn:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-notice-btn[data-primary] { border-color: transparent; background: #7c3aed; color: #fff; }
.yw-notice-btn[data-primary]:hover { background: #6d28d9; }
.yw-notice-btn:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-notice-cap { margin: 2px 0 0; color: #929097; font-size: 12px; }
@keyframes yw-notice-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .yw-notice { animation: none; } }
@media (max-width: 1023px) { .yw-notice { top: auto; right: 16px; bottom: 16px; } }
[data-theme-root].dark .yw-notice { border-color: rgba(60, 76, 116, .6); background: rgba(13, 21, 39, .6); color: #f3eef8; }
[data-theme-root].dark :is(.yw-notice-title, .yw-notice-strong, .yw-notice-amount) { color: #f3eef8; }
[data-theme-root].dark .yw-notice-close { color: #a297ab; }
[data-theme-root].dark .yw-notice-close:hover { background: rgba(243, 238, 248, .08); color: #f3eef8; }
[data-theme-root].dark .yw-notice-body { color: #c3b9cc; }
[data-theme-root].dark .yw-notice-cap { color: #a297ab; }
[data-theme-root].dark .yw-notice-btn { border-color: #2a3a5c; background: rgba(11, 17, 34, .7); color: #f3eef8; }
[data-theme-root].dark .yw-notice-btn:hover { border-color: #3a4c74; background: #16223a; }
[data-theme-root].dark .yw-notice-btn[data-primary] { border-color: transparent; background: #7c3aed; color: #fff; }