/* YieldWizard dashboard redesign (9/29): the shared surfaces.
   The approved demo (design/dashboard-integration/approved-demo.html) is the
   visual reference; the numbers, actions and permissions stay in the code that
   owns them today. One file per area: rail.css, header.css, overview.css,
   performance.css. Existing data and actions stay in their owners.

   The rail and the page share ONE background, as in the demo: there is no
   visible edge between the left column and the content, only the cards.

   Dark uses the shared Pencil lead canvas token so the rail, mobile shell and
   content pane stay on the same neutral background. */
[data-theme-root] { background: #f4f4f3; }
/* The demo's type is Geist at 14px with -.25px tracking (its embedded face decodes
   to Geist Regular, the app's own face); the tracking is what made the rail and
   the cards read heavier here than in the demo. */
[data-theme-root] { letter-spacing: -.25px; }
:is(.yw-dashboard-overview, .yw-dashboard-performance) {
  font-family: var(--font-geist-sans), Geist, system-ui, sans-serif;
  font-size: 14px;
}
:is(.yw-dashboard-overview, .yw-dashboard-performance) :is(button, input, select, textarea, table) {
  font-family: inherit;
}
:is(.yw-dashboard-overview, .yw-dashboard-performance) :is(.num, .tabular-nums) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
[data-theme-root] main { background: #f4f4f3; }

[data-theme-root].dark { background: var(--hw-bg); }
[data-theme-root].dark main { background: var(--hw-bg); }

/* The frame (Tobias 9/29: "the design should have those rounded borders that
   look kind of like relief on the whole tab"). As in the demo's `.app`: the
   rail and the page sit together in one lighter, rounded panel on a darker
   canvas. Desktop only; a phone has no room for a gutter. The rail keeps
   sticking while the page scrolls, now inside the panel: it starts at the
   panel's top edge and ends at its bottom edge, so it never pokes out of
   the rounded corners. Print drops the frame. */
@media (min-width: 1024px) {
  [data-theme-root] { background: #dadada; padding: 14px 14px 16px; }
  [data-theme-root] > .hw-app-frame { width: 100%; max-width: none; margin: 0 auto; border-radius: 26px; background: #f4f4f3; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); overflow: clip; }
  [data-theme-root] #app-rail { top: 14px; height: calc(100vh - 30px); }
  [data-theme-root] #app-rail .hw-rail-aside { height: 100%; }
  [data-theme-root].dark { background: #0a0f1e; }
  [data-theme-root].dark > .hw-app-frame { background: var(--hw-bg); }
}
@media print { [data-theme-root] { background: #fff; padding: 0; } [data-theme-root] > .hw-app-frame { border-radius: 0; max-width: none; } }

/* ----------------------------------------------------- the info dot --
   The "i" beside a figure and the explanation it opens (InfoDot in
   src/app/ui-client.tsx, the app's one explanation primitive: the
   dashboard's "Next 14 nights", "Tonight" and every tool page's figures go
   through it). Jacobo 9/29: "all of these icons and information modals need
   to be reworked with the new design." The look is the demo's small-dialog
   family (.dialog-head, .dialog-body, .close, .text-link, the
   .dashboard-menu surface and its open motion), sized down to an aside that
   hangs off an 18px dot. The positioning (fixed, anchored to the dot, a
   bottom sheet on a phone), Escape, the outside click and the focus return
   stay in the component; only colours, sizes and the open motion live here.
   The Overview hero's dot is re-dressed as the card's "···" by
   overview.css (.yw-more), which out-specifies these rules on purpose. */
.hw-info-trigger { width: 18px; height: 18px; padding: 0; border: 1px solid #e4e2e6; border-radius: 50%; background: transparent; color: #9d8ba9; font-size: 10px; font-weight: 600; font-style: normal; line-height: 1; transition: background .16s, color .16s; }
.hw-info-trigger:hover, .hw-info-trigger[aria-expanded="true"] { background: #eee7fa; color: #7c3aed; }
.hw-info-trigger:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

.hw-info-panel { padding: 16px 18px; border: 1px solid #e5ddea; border-radius: 17px; background: #fdfcfe; color: #5f5568; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; transform-origin: top left; animation: hw-info-in .23s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hw-info-in { from { opacity: 0; transform: translateY(7px) scale(.965); } to { opacity: 1; transform: none; } }

.hw-info-head { margin-bottom: 8px; }
.hw-info-title { color: #202024; font-size: 13px; font-weight: 500; line-height: 1.35; }
.hw-info-close { width: 26px; height: 26px; padding: 0; border: 1px solid #e4e2e6; border-radius: 50%; background: transparent; color: #202024; font-size: 17px; line-height: 1; transition: background .16s; }
.hw-info-close:hover { background: #eeeeee; }
.hw-info-close:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

.hw-info-body { color: #5f5568; font-size: 12px; line-height: 1.55; }
.hw-info-body > * + * { margin-top: 10px; }
.hw-info-body b, .hw-info-body strong { color: #202024; font-weight: 500; }
.hw-info-body a { color: #7c3aed; }

.hw-info-source { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee7f2; }
.hw-info-source a { display: inline-flex; align-items: center; gap: 4px; color: #8553c2; font-size: 11px; font-weight: 500; white-space: nowrap; }
.hw-info-source a:hover, .hw-info-source a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.hw-info-chevron { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .hw-info-panel { animation: none; }
  .hw-info-trigger, .hw-info-close { transition: none; }
}

[data-theme-root].dark .hw-info-trigger { border-color: #52525c; color: #a696b3; }
[data-theme-root].dark .hw-info-trigger:hover, [data-theme-root].dark .hw-info-trigger[aria-expanded="true"] { background: #1c1430; color: #b187ff; }
[data-theme-root].dark .hw-info-panel { border-color: #1c2843; background: #0d1527; color: #c8c6d0; box-shadow: 0 15px 45px #00000066, 0 3px 9px #00000033; }
[data-theme-root].dark .hw-info-title, [data-theme-root].dark .hw-info-body b, [data-theme-root].dark .hw-info-body strong { color: #f4f1f7; }
[data-theme-root].dark .hw-info-close { border-color: #52525c; color: #f2eef6; }
[data-theme-root].dark .hw-info-close:hover { background: #1c2843; }
[data-theme-root].dark .hw-info-body { color: #c8c6d0; }
[data-theme-root].dark .hw-info-body a, [data-theme-root].dark .hw-info-source a { color: #b187ff; }
[data-theme-root].dark .hw-info-source { border-top-color: #1c2843; }

/* An explanation belongs to its visible label; no separate icon or chip. */
.hw-info-label { display: inline; padding: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: help; transition: color .16s ease; }
.hw-info-label:hover, .hw-info-label[aria-expanded="true"] { color: #8546d7; }
.hw-info-label:focus-visible { outline: 2px solid #b993ff; outline-offset: 4px; }
[data-theme-root].dark .hw-info-label:hover, [data-theme-root].dark .hw-info-label[aria-expanded="true"] { color: #b99ae9; }

/* The shared left rail (every authenticated tool), restyled after the approved
   demo's sidebar (9/29): brand row, search, nav, then the pinned
   Notifications / Settings / Help rows and the person card at the very
   bottom. Skin only: the rows, their hrefs, counts and names come from
   shell.tsx, nav-groups.tsx, assigned-inbox-menu.tsx and account-menu.tsx.

   Sizes are the demo's (design/dashboard-integration): brand row 36px with a
   31px mark, search 38px, nav rows 41px with a 19px icon and radius 12, the
   count pill 10px on #e9e2f2, the avatar 35px. The rail and the page share
   one background (skin/base.css), so the aside draws no right edge; the only
   hairline is the one above the person card.

   #app-rail is the desktop rail; #mobile-nav-drawer is the phone drawer that
   renders the same sidebar body (mobile-sidebar.tsx). Both get the rows.

   Collapsed (globals.css, "Pinned collapse") wins where the two meet: the
   rules under `#app-rail.hw-rail-collapsed` below restate the narrow shape
   for everything this file sizes, because these selectors are more specific
   than the ones in globals.css. Every colour has a .dark variant at the end. */

/* ---- the column ---- */
[data-theme-root] #app-rail .hw-rail-aside { background: #f4f4f3; border-right: 0; }
[data-theme-root] #app-rail .hw-rail-footer { background: #f4f4f3; padding-bottom: 14px; }

/* ---- brand row ---- */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-logo { height: 36px; margin: 24px 12px 20px 18px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-wordmark > span { gap: 8px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-wordmark svg { width: 31px; height: 31px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-wordmark > span > span { font-weight: 650; letter-spacing: -.8px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-toggle { width: 26px; height: 26px; border: 1px solid #dedde1; border-radius: 50%; color: #777; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-toggle:hover { background: #eae7ee; color: #202024; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-toggle svg { width: 14px; height: 14px; }

/* ---- search ---- */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-sidebar-search { padding-bottom: 19px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button { height: 38px; min-height: 38px; gap: 7px; padding: 8px 10px; border: 1px solid #e5e4e7; border-radius: 11px; background: #fff; color: #8d8a92; font-size: 12px; transition: border-color 160ms, color 160ms; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button:hover, [data-theme-root] :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button:focus-visible { border-color: #c4b1e4; color: #202024; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button > svg { width: 17px; height: 17px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button kbd { padding: 2px 4px; border-radius: 4px; background: #f4f4f5; color: #8d8a92; font-family: inherit; font-size: 11px; }

/* ---- nav rows (SidebarNav, the pinned rows, the Notifications row) ---- */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-nav { margin-top: 0; gap: 5px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-bottom-nav { gap: 5px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link { gap: 12px; min-height: 41px; padding: 10px 12px; border-radius: 12px; color: #202024; font-size: 14px; font-weight: 400; letter-spacing: -.25px; transition: background-color 180ms ease, color 180ms ease; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link:hover { background: #eae7ee; color: #202024; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link > .hw-nav-icon { width: 19px; height: 19px; color: #76727b; }
/* The solid violet row is for the LEAF that is current. A group header
   (nav-groups.tsx SidebarGroup) also sets data-active, meaning "expanded",
   and it is the only .hw-nav-link with aria-controls; it gets the quiet
   expanded look below, so an open group and its current child are never two
   violet rows stacked. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) { background: #7c3aed; color: #fff; box-shadow: none; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]):hover { background: #7130df; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) svg { color: #fff; }
/* The "Setup" badge (a tool that still needs a connection) is violet outline
   text: on the solid violet current row it vanished, so it turns white there. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) .hw-nav-right > span[title] { border-color: rgba(255, 255, 255, .55); color: #fff; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active][aria-controls] { color: #202024; font-weight: 600; }
/* Group children (Acquisitions: Deals, Setup) sit under their icon column. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-child { padding-left: 43px; border-radius: 10px; font-size: 13px; }
/* The count pill: 10px on #e9e2f2, radius 6. Kept light on the violet active
   row too, which is how the demo draws it. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-chip.num { padding: 0 5px; border-radius: 6px; background: #e9e2f2; color: #784eb0; font-size: 10px; font-weight: 600; line-height: 16px; letter-spacing: 0; text-transform: none; }

/* ---- footer: person card ---- */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile-wrap { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e5e4e7; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile { gap: 10px; padding: 4px 8px 4px 4px; border-radius: 12px; transition: background-color 180ms ease; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile:hover { background: #eae7ee; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-avatar { width: 35px; height: 35px; border: 3px solid #fff; outline: 1px solid #dfd6e6; background: linear-gradient(135deg, #dccbed, #d5c7e0); color: #674383; font-size: 11px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile-name { color: #202024; font-size: 14px; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile-more { color: #888; font-size: 15px; letter-spacing: 1px; line-height: 1; }

/* ---- the Dashboard sub-tab menu (nav-groups.tsx DashboardNavMenu) ----
   Opens to the RIGHT of the Dashboard row, portaled to the theme root so it
   escapes the aside's overflow:hidden and still sees .dark. Same anatomy as
   the demo's .dashboard-menu: 255px, radius 17, a "Dashboard" label, two
   rows with an icon, the check on the current one. */
.hw-rail-dashboard-menu { position: fixed; z-index: 80; width: 255px; padding: 9px; border: 1px solid #e5ddea; border-radius: 17px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; transform-origin: top left; animation: hw-rail-menu-in 220ms cubic-bezier(.16, 1, .3, 1) both; }
.hw-rail-dashboard-menu > p { margin: 0; padding: 7px 10px 10px; color: #95899e; font-size: 11px; }
.hw-rail-dashboard-menu a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border-radius: 10px; color: #202024; font-size: 13px; transition: background-color 160ms, transform 200ms; }
.hw-rail-dashboard-menu a + a { margin-top: 3px; }
.hw-rail-dashboard-menu a:hover, .hw-rail-dashboard-menu a:focus-visible { background: #f0e9fb; outline: none; transform: translateX(2px); }
.hw-rail-dashboard-menu a[aria-current="page"] { background: #eee5fd; color: #7433d4; }
.hw-rail-dashboard-menu a svg { width: 17px; height: 17px; flex-shrink: 0; }
.hw-rail-dashboard-menu .hw-rail-menu-check { margin-left: auto; opacity: 0; }
.hw-rail-dashboard-menu a[aria-current="page"] .hw-rail-menu-check { opacity: 1; }
@keyframes hw-rail-menu-in { from { opacity: 0; transform: translateY(7px) scale(.965); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hw-rail-dashboard-menu { animation: none; }
  .hw-rail-dashboard-menu a:hover, .hw-rail-dashboard-menu a:focus-visible { transform: none; }
}

/* ---- collapsed: restate the narrow shape (globals.css "Pinned collapse"
   explains each; these only exist because the selectors above are more
   specific than the ones there). Words go, doors stay. ---- */
@media (min-width: 1024px) {
  [data-theme-root] #app-rail.hw-rail-collapsed .hw-rail-logo { height: auto; flex-direction: column; gap: 8px; margin: 20px 8px 14px; }
  [data-theme-root] #app-rail.hw-rail-collapsed .yw-sidebar-search-button { width: 40px; margin: 0 auto; padding: 0; justify-content: center; }
  [data-theme-root] #app-rail.hw-rail-collapsed .yw-sidebar-search-button span, [data-theme-root] #app-rail.hw-rail-collapsed .yw-sidebar-search-button kbd { display: none; }
  [data-theme-root] #app-rail.hw-rail-collapsed .hw-nav-link { justify-content: center; gap: 0; padding-left: 0.5rem; padding-right: 0.5rem; }
  [data-theme-root] #app-rail.hw-rail-collapsed .hw-nav-chip.num { width: 0.5rem; height: 0.5rem; min-width: 0; padding: 0; border-radius: 9999px; background: #7c3aed; font-size: 0; line-height: 0; }
  [data-theme-root] #app-rail.hw-rail-collapsed .hw-rail-profile { justify-content: center; gap: 0; padding: 4px 0; }
  [data-theme-root] #app-rail.hw-rail-collapsed .hw-rail-profile-wrap { margin-left: 0.5rem; margin-right: 0.5rem; }
}

/* ---- dark ---- */
[data-theme-root].dark #app-rail .hw-rail-aside, [data-theme-root].dark #app-rail .hw-rail-footer { background: var(--hw-bg); }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-toggle { border-color: #232e47; color: #a49db0; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-toggle:hover { background: #1b2436; color: #f7f4fa; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button { border-color: #232e47; background: #0c1322; color: #b8b0c2; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button:hover, [data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button:focus-visible { border-color: #6d55a0; color: #f7f4fa; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .yw-sidebar-search-button kbd { background: #232e47; color: #b8b0c2; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link { color: #e8e2ef; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link:hover { background: #1b2436; color: #f7f4fa; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link > .hw-nav-icon { color: #a49db0; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) { background: #7c3aed; color: #fff; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active][aria-controls] { color: #f7f4fa; font-weight: 600; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-chip.num { background: #3f3159; color: #c5a8ff; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile-wrap { border-top-color: #232e47; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile:hover { background: #1b2436; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-avatar { border-color: var(--hw-bg); outline-color: #33405e; background: linear-gradient(135deg, #5e4a7c, #4c3d63); color: #e6d8f8; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile-name { color: #f7f4fa; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile-more { color: #a49db0; }
[data-theme-root].dark .hw-rail-dashboard-menu { border-color: #232e47; background: #0f172a; box-shadow: 0 15px 45px #00000066; }
[data-theme-root].dark .hw-rail-dashboard-menu > p { color: #a99bb5; }
[data-theme-root].dark .hw-rail-dashboard-menu a { color: #f7f4fa; }
[data-theme-root].dark .hw-rail-dashboard-menu a:hover, [data-theme-root].dark .hw-rail-dashboard-menu a:focus-visible { background: #253150; }
[data-theme-root].dark .hw-rail-dashboard-menu a[aria-current="page"] { background: #49355f; color: #c5a8ff; }

/* ---- Halftone pill on hover (10/12) -------------------------------------
   rail-dots.tsx draws the hover on a canvas laid under the label (10/14, the
   Wizard's wake: a tint spreading from the pointer, a small halftone wave and
   a star in the pill's free space, nothing behind the words); this file
   places that canvas and owns its colour (--yw-nav-ink). The canvas is out of
   flow, so the pill never changes size. A page you are not on has no CSS
   hover fill: the canvas draws the tint. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link { position: relative; isolation: isolate; --yw-nav-ink: rgba(124, 58, 237, .36); }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link > canvas.hw-nav-dots { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
/* No flat hover fill on a page you are not on, ever (owner: "just the dots
   appear"); the current page keeps its violet pill. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link:hover,
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link:hover { background: transparent; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) { --yw-nav-ink: rgba(255, 255, 255, .34); }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link { --yw-nav-ink: rgba(168, 131, 238, .46); }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) { --yw-nav-ink: rgba(255, 255, 255, .34); }

/* The account row at the rail's foot takes the same halftone hover. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile { position: relative; isolation: isolate; --yw-nav-ink: rgba(124, 58, 237, .36); }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile > canvas.hw-nav-dots { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile:hover,
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile:hover { background: transparent; }
[data-theme-root].dark :is(#app-rail, #mobile-nav-drawer) .hw-rail-profile { --yw-nav-ink: rgba(168, 131, 238, .46); }

/* ---- The alert star (nav-star.tsx, 10/14) --------------------------------
   Owner: "lets change those numbers just for a litle star, that changes
   colos with priority and flows with the animation". The counts and the
   alert dots on the rail are the brand's four-point star: rose when
   something went wrong or needs a yes, amber when it waits on the owner,
   violet for good news. An urgent star breathes. While the hover carries the
   star onto its wave (rail-dots.tsx sets data-star-flow), this one steps
   aside, at once, so the two never show together. */
[data-theme-root] .hw-nav-star { display: inline-grid; flex-shrink: 0; place-items: center; width: 12px; height: 12px; color: #7c3aed; }
[data-theme-root] .hw-nav-star > svg { width: 12px; height: 12px; overflow: visible; fill: currentColor; }
[data-theme-root] .hw-nav-star[data-tone="urgent"] { color: #e0457b; }
[data-theme-root] .hw-nav-star[data-tone="watch"] { color: #df8a1d; }
[data-theme-root] .hw-nav-star[data-tone="urgent"] > svg { animation: hw-star-breathe 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hw-star-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(224, 69, 123, 0)); } 50% { transform: scale(1.25); filter: drop-shadow(0 0 3px rgba(224, 69, 123, .55)); } }
[data-theme-root] [data-star-flow] .hw-nav-star { opacity: 0; }
/* On the violet current-page pill a violet star would vanish: it goes white. */
[data-theme-root] :is(#app-rail, #mobile-nav-drawer) .hw-nav-link[data-active]:not([aria-controls]) .hw-nav-star[data-tone="info"] { color: #fff; }
/* The narrow rail keeps the star's shape in the row's corner. */
[data-theme-root] #app-rail.hw-rail-collapsed .hw-nav-chip.hw-nav-star { width: 10px; height: 10px; min-width: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; background: none; font-size: 0; line-height: 0; }
[data-theme-root] #app-rail.hw-rail-collapsed .hw-nav-chip.hw-nav-star > svg { width: 10px; height: 10px; }
[data-theme-root].dark .hw-nav-star { color: #b794f6; }
[data-theme-root].dark .hw-nav-star[data-tone="urgent"] { color: #f27ba6; }
[data-theme-root].dark .hw-nav-star[data-tone="watch"] { color: #f2b45e; }
@media (prefers-reduced-motion: reduce) { [data-theme-root] .hw-nav-star > svg { animation: none; } }

/* The Dashboard page header (Row 1) after the approved demo's topbar, and the
   property control that every tool page shares (page-header.tsx reads it from
   HeaderPropertyProvider; the dashboard places it in its own Row-1 order).

   Anatomy, in demo pixels:
     title        39px, weight 400, letter-spacing -1.7px; the chevron beside it
                  is invisible until hover, focus or open; the sub-tab menu
                  opens directly under the title (255px, radius 17)
     controls     one look for period / property / sync / Export: 39px tall,
                  radius 10, 12px text, gap 7, 15px icons. The period control is
                  the white variant; the other three are the quiet grey one.
   Selectors stay scoped: header[data-page="dashboard"] for the Row-1 controls,
   .yw-header-property-* for the shared property control, .yw-property-menu for
   its portal (mounted inside [data-theme-root], so the dark variants reach it).
   Every colour has a [data-theme-root].dark twin at the bottom. */

/* ---------------------------------------------------------------- Row 1 -- */
header[data-page="dashboard"] { position: sticky; top: 0; z-index: 65; min-height: 45px; padding: 7px 0 8px; border-bottom: 0; background: rgba(244, 244, 243, .25); -webkit-backdrop-filter: saturate(125%) blur(8px); backdrop-filter: saturate(125%) blur(8px); }
@media (max-width: 1023px) { header[data-page="dashboard"] { top: 49px; } }
/* Sticky like the Dashboard on the Get Found pages too (10/02, owner on Get
   Found: "these need to be just like the dashboard ones so when customers
   scroll down they are always visible"). The Get Found header is the one
   whose title is the Get Found section menu; :where() keeps the weight of
   the Dashboard rule above (one element, one attribute). */
header[data-title-menu]:where(:has(.yw-get-found-section-menu)) { position: sticky; top: 0; z-index: 65; min-height: 45px; padding: 7px 0 8px; border-bottom: 0; background: rgba(244, 244, 243, .25); -webkit-backdrop-filter: saturate(125%) blur(8px); backdrop-filter: saturate(125%) blur(8px); }
@media (max-width: 1023px) { header[data-title-menu]:where(:has(.yw-get-found-section-menu)) { top: 49px; } }
/* Pricing too (10/10, owner: "the top heder is broken is not staying in its
   place so when a customer scrolls down he looses the ability to change tab
   or filter"): the header whose title is the Pricing section menu, with its
   filter, stays at the top while the page scrolls. Same rule as Get Found. */
header[data-title-menu]:where(:has(.yw-pricing-section-menu)) { position: sticky; top: 0; z-index: 65; min-height: 45px; padding: 7px 0 8px; border-bottom: 0; background: rgba(244, 244, 243, .25); -webkit-backdrop-filter: saturate(125%) blur(8px); backdrop-filter: saturate(125%) blur(8px); }
@media (max-width: 1023px) { header[data-title-menu]:where(:has(.yw-pricing-section-menu)) { top: 49px; } }
/* Guests too (10/12): its header, whose title is the Guests section menu,
   stays at the top while the page scrolls, with its time and sites filter. */
header[data-title-menu]:where(:has(.yw-guests-section-menu)) { position: sticky; top: 0; z-index: 65; min-height: 45px; padding: 7px 0 8px; border-bottom: 0; background: rgba(244, 244, 243, .25); -webkit-backdrop-filter: saturate(125%) blur(8px); backdrop-filter: saturate(125%) blur(8px); }
@media (max-width: 1023px) { header[data-title-menu]:where(:has(.yw-guests-section-menu)) { top: 49px; } }
/* Floor too (10/13, owner: "this header is not following the rules of the
   other new tabs headers, take a look for example at the dashboard that
   header is always visible when scrolling down. lets use exactly the same
   config on here"): the header whose title is the Floor section menu, with
   its day, books status, property and Export, stays at the top. */
header[data-title-menu]:where(:has(.yw-floor-section-menu)) { position: sticky; top: 0; z-index: 65; min-height: 45px; padding: 7px 0 8px; border-bottom: 0; background: rgba(244, 244, 243, .25); -webkit-backdrop-filter: saturate(125%) blur(8px); backdrop-filter: saturate(125%) blur(8px); }
@media (max-width: 1023px) { header[data-title-menu]:where(:has(.yw-floor-section-menu)) { top: 49px; } }
/* Settings (10/15, owner: "the fixed header that is always visible like the one in the dashboard"). */
header[data-title-menu]:where(:has(.yw-settings-section-menu)) { position: sticky; top: 0; z-index: 65; min-height: 45px; padding: 7px 0 8px; border-bottom: 0; background: rgba(244, 244, 243, .25); -webkit-backdrop-filter: saturate(125%) blur(8px); backdrop-filter: saturate(125%) blur(8px); }
@media (max-width: 1023px) { header[data-title-menu]:where(:has(.yw-settings-section-menu)) { top: 49px; } }
/* The Wizard (10/14): the same title row, over its one screen. */
header[data-title-menu]:where(:has(.yw-wizard-title)) { min-height: 45px; padding: 7px 0 8px; border-bottom: 0; }

/* The sync status (10/13, header-status.tsx): the app's dot loader in
   small (three dots rising in turn), a few grey words in the header's type,
   the whole sentence in the black hover. Beside the period control on the
   Dashboard and the day on Floor; only when something is wrong. */
/* 10/13 (owner: "this shouldnt be that big"): a quiet note, 11px in the
   light grey, the dots small. */
.yw-header-status { display: inline-flex; align-items: center; gap: 5px; min-height: 39px; padding: 0 2px; color: #8f8996; font-size: 11px; font-weight: 400; letter-spacing: -.2px; white-space: nowrap; }
.yw-header-status .hw-info-label { color: inherit; font-size: 11px; font-weight: 400; letter-spacing: -.2px; }
.yw-header-status-dots { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.yw-header-status-dots > i { display: block; width: 2.5px; height: 2.5px; border-radius: 50%; background: #a883ee; animation: yw-header-status-dot 1.2s ease-in-out infinite; }
.yw-header-status-dots > i:nth-child(2) { animation-delay: .15s; }
.yw-header-status-dots > i:nth-child(3) { animation-delay: .3s; }
@keyframes yw-header-status-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .yw-header-status-dots > i { animation: none; opacity: .8; } }
[data-theme-root].dark .yw-header-status { color: #a297ab; }
[data-theme-root].dark .yw-header-status-dots > i { background: #c9b1ff; }

/* The shell's notices in the new design (10/10, owner: "there is this old
   design alert"): a quiet rounded line in the watch tone with a dot, the
   house 13px, not an amber band in tracked caps. */
.yw-shell-notice { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 12px; padding: 9px 16px; border: 1px solid #ecdcc0; border-radius: 12px; background: #fbf5ea; color: #7d5d33; font-size: 13px; font-weight: 500; letter-spacing: -.1px; text-align: center; }
.yw-shell-notice::before { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #c99a52; content: ""; }
[data-theme-root].dark .yw-shell-notice { border-color: #4a3b22; background: #2a2318; color: #e0bf8c; }
[data-theme-root].dark .yw-shell-notice::before { background: #d9a85a; }
header[data-page="dashboard"] > div:first-child { gap: 10px 18px; }
header[data-page="dashboard"] > div:first-child > span:last-child { gap: 8px; }

/* Money title selector: the section name carries its own menu, matching the
   dashboard title treatment while keeping all ten routes keyboard reachable. */
.yw-page-title-group { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.yw-money-section-menu { position: relative; display: inline-flex; align-items: center; }
.yw-money-section-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 0; border: 0; border-radius: 8px; background: transparent; color: #202024; font-size: clamp(27px, 2.25vw, 32px); font-weight: 400; letter-spacing: -1.1px; line-height: 1.15; }
.yw-money-section-trigger:focus-visible { outline: 3px solid #b993ff; outline-offset: 4px; }
.yw-money-section-chevron { width: 15px; height: 15px; opacity: .42; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s, transform .18s; }
.yw-money-section-trigger:hover .yw-money-section-chevron, .yw-money-section-trigger:focus-visible .yw-money-section-chevron, .yw-money-section-trigger[aria-expanded="true"] .yw-money-section-chevron { opacity: .85; transform: translateY(2px); }
.yw-money-section-options { position: absolute; top: calc(100% + 10px); left: 0; z-index: 80; width: 270px; max-height: min(560px, calc(100dvh - 32px)); overflow-y: auto; padding: 9px; border: 1px solid #e5ddea; border-radius: 17px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(7px) scale(.965); transform-origin: top left; transition: opacity .18s, transform .23s cubic-bezier(.16,1,.3,1), visibility 0s linear .23s; }
.yw-money-section-options[data-placement="end"] { left: auto; right: 0; transform-origin: top right; }
.yw-money-section-options[data-open] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .18s, transform .23s cubic-bezier(.16,1,.3,1), visibility 0s; }
.yw-money-section-options::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.yw-money-section-options > p { margin: 0; padding: 7px 10px 10px; color: #95899e; font-size: 11px; }
.yw-money-section-options a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 10px; color: #202024; font-size: 13px; text-decoration: none; transition: background .16s, transform .2s; }
.yw-money-section-options a + a { margin-top: 3px; }
.yw-money-section-options a:hover, .yw-money-section-options a:focus-visible { background: #f0e9fb; outline: none; transform: translateX(2px); }
.yw-money-section-options a[aria-current="page"] { background: #eee5fd; color: #7433d4; }
.yw-money-section-options a svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.yw-money-section-check { margin-left: auto; opacity: 0; font-size: 16px; }
.yw-money-section-options a[aria-current="page"] .yw-money-section-check { opacity: 1; }
@media (max-width: 639px) { .yw-money-section-options { width: min(270px, calc(100vw - 28px)); } }

/* ---------------------------------------------------------------- title -- */
/* 10/08 (owner: "this lettering should be dynamic when scrolling over a
   darker part of the screen the font truning white so its visible"): the
   sticky title reads on what passes under it. header-ink.tsx sets data-ink
   from the lightness under the title: light ink is white with a soft shadow,
   dark ink is the house ink (also over a light photo in dark mode). */
[data-theme-root] header[data-ink] :is(.yw-dashboard-title, .yw-dashboard-title-trigger, .yw-money-section-trigger, .yw-title-section, .yw-dashboard-title-chevron) { transition: color .25s ease, text-shadow .25s ease; }
[data-theme-root] header[data-ink="light"] :is(.yw-dashboard-title, .yw-dashboard-title-trigger, .yw-money-section-trigger) { color: #fff; text-shadow: 0 1px 14px rgba(12, 8, 24, .5); }
[data-theme-root] header[data-ink="light"] .yw-title-section { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(12, 8, 24, .55); }
[data-theme-root] header[data-ink="light"] .yw-dashboard-title-chevron { color: rgba(255, 255, 255, .85); }
[data-theme-root].dark header[data-ink="dark"] :is(.yw-dashboard-title, .yw-dashboard-title-trigger, .yw-money-section-trigger) { color: #202024; text-shadow: 0 1px 12px rgba(255, 255, 255, .45); }
[data-theme-root].dark header[data-ink="dark"] .yw-title-section { color: #59535f; }
.yw-dashboard-title { margin: 0; font-size: clamp(30px, 3vw, 39px); line-height: 1.15; font-weight: 400; letter-spacing: -1.7px; color: #202024; }
.yw-dashboard-title-trigger { display: inline-flex; align-items: center; gap: 11px; padding: 0 4px 0 0; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.yw-dashboard-title-trigger:focus-visible { outline: 3px solid #b993ff; outline-offset: 4px; }
.yw-dashboard-title-chevron { display: inline-flex; align-items: center; color: #9d8ba9; opacity: .58; transform: translateY(-1px); transition: opacity .2s, transform .2s; }
.yw-dashboard-title-chevron svg { width: 16px; height: 16px; }
.yw-dashboard-title-trigger:hover .yw-dashboard-title-chevron,
.yw-dashboard-title-trigger:focus-visible .yw-dashboard-title-chevron,
.yw-dashboard-title-trigger[aria-expanded="true"] .yw-dashboard-title-chevron { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------ sub-tab menu ----- */
/* The wrappers carry NO z-index: the closed title and period control would
   otherwise paint over the phone chrome (the sticky mobile header and the
   drawer stack sit at z-40 in the same root context). The popovers, which
   only matter when open, take the level instead. */
.yw-dashboard-tab-menu { position: relative; display: inline-flex; align-items: center; }
/* visibility flips at once on open (so a row can take focus the same tick)
   and only after the fade on close. */
.yw-dashboard-tab-options { position: absolute; top: calc(100% + 10px); left: 0; width: 255px; z-index: 80; padding: 9px; border: 1px solid #e5ddea; border-radius: 17px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(7px) scale(.965); transform-origin: top left; transition: opacity .18s, transform .23s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .23s; }
.yw-dashboard-tab-options[data-open] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .18s, transform .23s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
/* The hover bridge: the 10px gap between title and menu must not count as leaving. */
.yw-dashboard-tab-options::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.yw-dashboard-tab-label { padding: 7px 10px 10px; color: #95899e; font-size: 11px; }
.yw-dashboard-tab-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border-radius: 10px; color: #202024; font-size: 13px; text-align: left; transition: background .16s, transform .2s; }
.yw-dashboard-tab-option + .yw-dashboard-tab-option { margin-top: 3px; }
.yw-dashboard-tab-option:hover, .yw-dashboard-tab-option:focus-visible { background: #f0e9fb; transform: translateX(2px); outline: none; }
.yw-dashboard-tab-option[aria-current="page"] { background: #eee5fd; color: #7433d4; }
.yw-dashboard-tab-option svg { width: 17px; height: 17px; flex-shrink: 0; }
.yw-menu-check { display: inline-flex; margin-left: auto; opacity: 0; }
.yw-menu-check svg { width: 17px; height: 17px; }
[aria-current="page"] > .yw-menu-check { opacity: 1; }

/* Frosted menus share their surface across both appearance modes. Keep the
   fallback opaque when backdrop filtering is unavailable. */

/* ------------------------------------------------------- the controls ---- */
/* .yw-header-property-button on its own is the plain label layout.tsx renders
   for a single-property account; it gets the grey look without the switcher. */
.yw-header-control,
.yw-header-property-button,
header[data-page="dashboard"] .yw-scope-trigger-compact {
  display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 10px; background: #eeeded; box-shadow: none;
  color: #202024; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: -.25px;
  white-space: nowrap; cursor: pointer; transition: background .2s, box-shadow .2s;
}
.yw-header-control svg,
.yw-header-property-button svg,
header[data-page="dashboard"] .yw-scope-trigger-compact svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.yw-header-control:hover,
header[data-page="dashboard"] .yw-scope-trigger-compact:hover { background: #e8e4ed; }
.yw-header-control:focus-visible,
header[data-page="dashboard"] .yw-scope-trigger-compact:focus-visible { outline: 3px solid #b993ff; outline-offset: 3px; }
.yw-header-property-button { background: rgba(226, 222, 231, .88); border-color: rgba(92, 65, 121, .12); box-shadow: 0 1px 3px rgba(39, 29, 48, .07); }
.yw-header-property-button:hover,
.yw-header-property-button[aria-expanded="true"] { background: rgba(218, 211, 227, .95); border-color: rgba(124, 58, 237, .22); }
.yw-header-control--white,
header[data-page="dashboard"] .yw-scope-trigger-compact { background: #fff; border-color: #e8e6e9; box-shadow: 0 2px 6px #00000009; }
.yw-header-control--white:hover,
header[data-page="dashboard"] .yw-scope-trigger-compact:hover { background: #faf8fc; }
.yw-header-control-chevron { display: inline-flex; color: #8d8595; transition: transform .2s; }
.yw-header-control-chevron svg { width: 12px; height: 12px; }
.yw-header-control[aria-expanded="true"] .yw-header-control-chevron { transform: rotate(180deg); }
.yw-header-control-muted { color: #9880ac; font-size: 10px; }
/* Static label (single-property accounts) shares the look, not the cursor. */
span.yw-header-property-button { cursor: default; }
span.yw-header-property-button:hover { background: #eeeded; }
.yw-header-property-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ScopeSelect's compact trigger (Performance): the same white period control
   as the month menu. The icons ship in the markup on every compact surface and
   only show here, so the other pages keep their chrome. */
.yw-scope-calendar, .yw-scope-chevron { display: none; }
header[data-page="dashboard"] .yw-scope-trigger-compact .yw-scope-calendar,
header[data-page="dashboard"] .yw-scope-trigger-compact .yw-scope-chevron { display: inline-flex; }
header[data-page="dashboard"] .yw-scope-trigger-compact .yw-scope-chevron { color: #8d8595; }
header[data-page="dashboard"] .yw-scope-trigger-compact .yw-scope-chevron svg { width: 12px; height: 12px; }
header[data-page="dashboard"] .yw-scope-trigger-compact .yw-scope-caret { display: none; }
header[data-page="dashboard"] .yw-scope-trigger-compact.opacity-50 { opacity: .5; }

/* The sync chip (real state, real refresh) reads as the quiet grey control. */
header[data-page="dashboard"] .yw-sync-chip { min-height: 39px; border-radius: 10px; border-color: transparent; background: #eeeded; }
header[data-page="dashboard"] .yw-sync-side { padding: 0 11px; font-size: 12px; font-weight: 400; letter-spacing: -.25px; color: #202024; }
header[data-page="dashboard"] .yw-sync-side:hover { background: #e8e4ed; color: #202024; }
header[data-page="dashboard"] .yw-sync-divider { border-color: #dcd8df; }

/* Export: the existing PageExportMenu, header look. */
header[data-page="dashboard"] .yw-header-export-menu { margin-top: 10px; border-color: #e5ddea; border-radius: 17px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; }

/* ------------------------------------------------- the property menu ----- */
/* Portaled into [data-theme-root], positioned by the switcher (fixed). */
.yw-property-menu { display: flex; flex-direction: column; width: 310px; max-height: min(470px, calc(100dvh - 32px)); padding: 9px; border: 1px solid #e5ddea; border-radius: 17px; background: #fdfcfe; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; color: #202024; font-size: 13px; letter-spacing: -.25px; animation: yw-menu-enter 180ms cubic-bezier(.16, 1, .3, 1) both; }
.yw-property-menu-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 12px; font-size: 11px; color: #95899e; }
.yw-property-menu-count { font-size: 10px; color: #b2a6bd; }
.yw-property-search { display: flex; align-items: center; gap: 8px; margin: 0 3px 7px; padding: 0 10px; border: 1px solid #e8e0ee; border-radius: 9px; color: #a795b4; }
.yw-property-search:focus-within { border-color: #b993ff; }
.yw-property-search svg { width: 15px; height: 15px; }
.yw-property-search input { width: 100%; min-width: 0; height: 35px; border: 0; background: transparent; outline: none; font-size: 12px; color: #5b466b; }
.yw-property-list { min-height: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px 3px; scrollbar-width: thin; scrollbar-color: #cebddf #f5f0fa; scrollbar-gutter: stable; }
.yw-property-list::-webkit-scrollbar { width: 5px; }
.yw-property-list::-webkit-scrollbar-thumb { background: #cebddf; border-radius: 8px; }
.yw-property-group { padding: 8px 10px 4px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a99bb4; }
li + .yw-property-group { margin-top: 4px; border-top: 1px solid #eee7f2; padding-top: 10px; }
.yw-property-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 11px 10px; border-radius: 10px; color: #202024; font-size: 13px; text-align: left; transition: background .16s; }
.yw-property-option:hover, .yw-property-option:focus-visible { background: #f0e9fb; outline: none; }
.yw-property-option[aria-current="page"] { background: #eee5fd; color: #7433d4; }
.yw-property-option:disabled { opacity: .6; cursor: default; }
.yw-property-icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: #f2edf7; color: #9880ac; }
.yw-property-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.yw-property-option[aria-current="page"] .yw-property-icon { background: #e7d8ff; color: #7c3aed; }
.yw-property-name { flex: 1; min-width: 0; text-align: left; }
.yw-property-name strong { display: block; overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-property-name small { display: block; margin-top: 2px; font-size: 10px; color: #a99bb4; }
.yw-property-option .yw-menu-check { margin-left: 0; color: #8b42ed; }
.yw-property-option .yw-menu-check svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.yw-property-empty { padding: 23px 10px; text-align: center; color: #a291b0; font-size: 12px; }

/* --------------------------------------------------- the period menu ----- */
/* ScopeSelect's popover (period-controls.tsx; AnchoredPanel renders it inline
   under the trigger, so it sits inside [data-theme-root] and the dark twins
   reach it). After the approved demo's date menu: 300px wide, radius 17, a
   "Reporting period" head with the year at the right, the whole-period rows
   (selected: soft violet tint plus a check, never a solid block), the years
   as small pills, the months as a three-column grid, then the Last / Next
   columns and the custom pair. Every page that mounts ScopeSelect shares the
   look; the behaviour is untouched. The rules carry [data-theme-root] so
   they outrank the panel's own Tailwind utilities. */
[data-theme-root] .yw-period-menu { padding: 13px; border: 1px solid #e5ddea; border-radius: 17px; background: #fff; box-shadow: 0 15px 45px #3a214421, 0 3px 9px #3a214409; color: #202024; font-size: 12px; letter-spacing: -.25px; animation: yw-menu-enter 180ms cubic-bezier(.16, 1, .3, 1) both; }
/* The period menu scrolls once Custom range opens under the month grid, so it
   shows a thin thumb (10/13): a hidden scrollbar left the dates and Apply
   under the fold with no sign there was more. */
[data-theme-root] .yw-period-menu { scrollbar-width: thin; scrollbar-color: #d9cfe3 transparent; }
.yw-period-menu-body { display: flex; flex-direction: column; gap: 10px; }
.yw-period-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 5px 0; font-size: 12px; }
.yw-period-head strong { font-weight: 500; color: #71607f; }
.yw-period-head span { color: #a494b1; }
/* The year stepper in the head's right slot (9/29): arrows step the browsed
   year, the year itself carries the dot when it owns the live selection. */
.yw-period-stepper { display: inline-flex; align-items: center; gap: 1px; }
.yw-period-stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; color: #8a7a96; transition: background .16s; }
.yw-period-stepper-btn svg { width: 12px; height: 12px; }
.yw-period-stepper-btn:hover, .yw-period-stepper-btn:focus-visible { background: #f6f1fb; outline: none; }
.yw-period-stepper-btn:focus-visible { box-shadow: 0 0 0 2px #b993ff inset; }
.yw-period-stepper-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.yw-period-stepper-year { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 38px; color: #a494b1; font-size: 12px; }
.yw-period-stepper-year[data-current] { color: #6f5a80; }
.yw-period-rows { display: flex; flex-direction: column; gap: 3px; }
.yw-period-rows--after { padding-top: 10px; border-top: 1px solid #eee7f2; }
.yw-period-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 9px; background: #f6f1fb; color: #202024; font-size: 12px; font-weight: 400; line-height: 1.3; text-align: left; transition: background .16s; }
.yw-period-row:hover, .yw-period-row:focus-visible { background: #f0e9fb; outline: none; }
.yw-period-row:focus-visible { box-shadow: 0 0 0 2px #b993ff inset; }
.yw-period-row[aria-pressed="true"] { background: #eee3fc; color: #7c3aed; }
.yw-period-row[aria-pressed="true"] .yw-menu-check { opacity: 1; }
.yw-period-row .yw-menu-check { color: #7c3aed; }
.yw-period-row .yw-menu-check svg { width: 15px; height: 15px; }
.yw-period-row-text { display: flex; min-width: 0; flex-direction: column; }
.yw-period-row-label { display: block; }
.yw-period-row-hint { display: block; margin-top: 1px; font-size: 10px; line-height: 1.35; color: #a494b1; }
.yw-period-row[aria-pressed="true"] .yw-period-row-hint { color: #9a6fd8; }
/* The Last / Next columns: the same row, quiet until hovered. */
.yw-period-row--preset { justify-content: center; padding: 9px 6px; font-size: 11px; white-space: nowrap; }
.yw-period-row--preset .yw-menu-check { display: none; }
/* The years, as pills. The browsed year is tinted; the running year carries
   a stronger border; the dot marks the year that owns the live selection. */
.yw-period-year-dot { width: 5px; height: 5px; border-radius: 50%; background: #7c3aed; }
/* The months: three columns of 12px cells (month-span-grid.tsx keeps the
   click / drag span behaviour; data-role tints a dragged span's middle). */
.yw-period-menu .yw-month-grid { grid-template-columns: repeat(3, 1fr); column-gap: 5px; row-gap: 5px; }
.yw-period-menu [data-month] { padding: 12px 3px; border-radius: 9px; background: transparent; color: #202024; font-size: 12px; font-weight: 400; letter-spacing: -.25px; text-align: center; transition: background .16s; }
.yw-period-menu [data-month]:hover, .yw-period-menu [data-month]:focus-visible { background: #f0e9fb; outline: none; }
.yw-period-menu [data-month]:focus-visible { box-shadow: 0 0 0 2px #b993ff inset; }
.yw-period-menu [data-month][aria-pressed="true"] { background: #eee3fc; color: #7c3aed; }
.yw-period-menu [data-month][data-role="middle"] { background: #f5eefe; }
.yw-period-menu [data-month]:disabled { opacity: .3; cursor: default; background: transparent; }
/* One day (period-controls.tsx ScopeDaySelect, 10/13): the month's days
   in the month grid's own cells (the [data-month] rules above), seven
   across, the weekday letters in the head's grey. */
.yw-period-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 3px; row-gap: 3px; }
.yw-period-dow { padding: 0 0 2px; color: #a494b1; font-size: 10px; text-align: center; }
.yw-period-menu [data-day] { padding: 9px 0; border-radius: 9px; background: transparent; color: #202024; font-size: 12px; font-weight: 400; letter-spacing: -.25px; text-align: center; transition: background .16s; }
.yw-period-menu [data-day]:hover, .yw-period-menu [data-day]:focus-visible { background: #f0e9fb; outline: none; }
.yw-period-menu [data-day]:focus-visible { box-shadow: 0 0 0 2px #b993ff inset; }
.yw-period-menu [data-day][aria-pressed="true"] { background: #eee3fc; color: #7c3aed; }
/* One row of Last 7 / 30 / 90 under a hairline; a Next row only where the
   page answers ahead (9/29). */
.yw-period-presets { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid #eee7f2; }
.yw-period-presets-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.yw-period-note { padding: 2px 4px 0; font-size: 10px; line-height: 1.45; color: #a494b1; }
/* The custom pair and Apply, folded behind one quiet row. */
.yw-period-custom { padding-top: 6px; border-top: 1px solid #eee7f2; }
.yw-period-custom-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border-radius: 9px; color: #71607f; font-size: 12px; text-align: left; transition: background .16s; }
.yw-period-custom-toggle:hover, .yw-period-custom-toggle:focus-visible { background: #f6f1fb; outline: none; }
.yw-period-custom-toggle:focus-visible { box-shadow: 0 0 0 2px #b993ff inset; }
.yw-period-custom-chevron { display: inline-block; color: #a494b1; transition: transform .16s; }
.yw-period-custom-chevron[data-open] { transform: rotate(90deg); }
.yw-period-custom-body { padding: 6px 2px 0; }
.yw-period-custom-pair { display: flex; align-items: center; gap: 6px; }
.yw-period-input { width: 100%; min-width: 0; height: 35px; padding: 0 8px; border: 1px solid #e8e4ee; border-radius: 8px; background: #fff; color: #5b466b; font-size: 12px; outline: none; }
.yw-period-input:focus { border-color: #b993ff; }
.yw-period-custom-to { flex-shrink: 0; font-size: 10px; color: #a494b1; }
.yw-period-apply { display: block; width: 100%; height: 35px; margin-top: 7px; border-radius: 9px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 500; transition: background .16s; }
.yw-period-apply:hover { background: #7130df; }
.yw-period-apply:focus-visible { outline: 3px solid #b993ff; outline-offset: 2px; }
.yw-period-apply:disabled { opacity: .4; cursor: default; background: #7c3aed; }

@keyframes yw-menu-enter { from { opacity: 0; transform: translateY(7px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Narrower: the name stays (it is the only place the chrome names the active
   hotel since the rail's property card left) and shrinks under the ellipsis;
   the room count is what goes. */
@media (max-width: 1200px) {
  .yw-header-property-name { max-width: 120px; }
  .yw-header-property-button .yw-header-control-muted { display: none; }
}
@media (max-width: 650px) {
  .yw-header-property-name { max-width: 40vw; }
  .yw-dashboard-title { font-size: 32px; }
  .yw-dashboard-title-chevron { opacity: 1; transform: none; }
  .yw-dashboard-tab-options { width: 240px; }
  .yw-header-control, header[data-page="dashboard"] .yw-scope-trigger-compact { min-height: 35px; padding: 0 8px; font-size: 11px; }
  .yw-property-menu { width: min(310px, calc(100vw - 24px)); }
  .yw-property-list { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .yw-dashboard-tab-options, .yw-property-menu, .yw-dashboard-title-chevron, .yw-header-control-chevron, .yw-dashboard-tab-option, .yw-property-option,
  [data-theme-root] .yw-period-menu, .yw-period-row, .yw-period-stepper-btn, .yw-period-custom-toggle, .yw-period-custom-chevron, .yw-period-menu [data-month], .yw-period-apply { animation: none; transition: none; }
}

/* ------------------------------------------------------------- dark ------ */
[data-theme-root].dark .yw-dashboard-title { color: #f4f1f7; }
[data-theme-root].dark header[data-page="dashboard"] { background: rgba(11, 16, 33, .25); }
[data-theme-root].dark header[data-title-menu]:where(:has(.yw-get-found-section-menu)) { background: rgba(11, 16, 33, .25); }
[data-theme-root].dark header[data-title-menu]:where(:has(.yw-guests-section-menu)) { background: rgba(11, 16, 33, .25); }
[data-theme-root].dark header[data-title-menu]:where(:has(.yw-settings-section-menu)) { background: rgba(11, 16, 33, .25); }
[data-theme-root].dark .yw-dashboard-title-chevron { color: #a696b3; }
[data-theme-root].dark .yw-dashboard-tab-options,
[data-theme-root].dark .yw-property-menu,
[data-theme-root].dark header[data-page="dashboard"] .yw-header-export-menu { background: #0d1527; border-color: #1c2843; box-shadow: 0 15px 45px #00000066, 0 3px 9px #00000033; color: #f2eef6; }
[data-theme-root].dark .yw-dashboard-tab-label,
[data-theme-root].dark .yw-property-menu-label { color: #a696b3; }
[data-theme-root].dark .yw-dashboard-tab-option,
[data-theme-root].dark .yw-property-option { color: #f2eef6; }
[data-theme-root].dark .yw-dashboard-tab-option:hover, [data-theme-root].dark .yw-dashboard-tab-option:focus-visible,
[data-theme-root].dark .yw-property-option:hover, [data-theme-root].dark .yw-property-option:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-dashboard-tab-option[aria-current="page"],
[data-theme-root].dark .yw-property-option[aria-current="page"] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-header-control,
[data-theme-root].dark .yw-header-property-button,
[data-theme-root].dark header[data-page="dashboard"] .yw-sync-chip,
[data-theme-root].dark span.yw-header-property-button:hover { background: #142036; border-color: transparent; color: #f2eef6; }
[data-theme-root].dark .yw-header-property-button { background: rgba(28, 40, 67, .84); border-color: rgba(185, 154, 233, .22); }
[data-theme-root].dark .yw-header-property-button:hover,
[data-theme-root].dark .yw-header-property-button[aria-expanded="true"] { background: rgba(55, 45, 75, .94); border-color: rgba(185, 154, 233, .42); }
[data-theme-root].dark .yw-header-control:hover,
[data-theme-root].dark header[data-page="dashboard"] .yw-sync-side:hover { background: #1c2843; }
[data-theme-root].dark header[data-page="dashboard"] .yw-sync-side { color: #f2eef6; }
[data-theme-root].dark header[data-page="dashboard"] .yw-sync-divider { border-color: #1c2843; }
[data-theme-root].dark .yw-header-control--white,
[data-theme-root].dark header[data-page="dashboard"] .yw-scope-trigger-compact { background: #0b1122; border-color: #1c2843; box-shadow: none; color: #f2eef6; }
[data-theme-root].dark .yw-header-control--white:hover,
[data-theme-root].dark header[data-page="dashboard"] .yw-scope-trigger-compact:hover { background: #0d1527; }
[data-theme-root].dark .yw-header-control-chevron,
[data-theme-root].dark header[data-page="dashboard"] .yw-scope-trigger-compact .yw-scope-chevron { color: #a696b3; }
[data-theme-root].dark .yw-header-control-muted, [data-theme-root].dark .yw-property-name small, [data-theme-root].dark .yw-property-group, [data-theme-root].dark .yw-property-menu-count { color: #a696b3; }
[data-theme-root].dark .yw-property-search { border-color: #1c2843; color: #a696b3; }
[data-theme-root].dark .yw-property-search input { color: #f2eef6; }
[data-theme-root].dark .yw-property-list { scrollbar-color: #5a4a6d #0d1527; }
[data-theme-root].dark .yw-property-list::-webkit-scrollbar-thumb { background: #5a4a6d; }
[data-theme-root].dark li + .yw-property-group { border-color: #1c2843; }
[data-theme-root].dark .yw-property-icon { background: #16223a; color: #b7a5cb; }
[data-theme-root].dark .yw-property-option[aria-current="page"] .yw-property-icon { background: #4a3670; color: #c9b1ff; }
[data-theme-root].dark .yw-property-option .yw-menu-check { color: #c9b1ff; }
[data-theme-root].dark .yw-property-empty { color: #a696b3; }
/* the period menu */
[data-theme-root].dark .yw-period-menu { background: #0d1527; border-color: #1c2843; box-shadow: 0 15px 45px #00000066, 0 3px 9px #00000033; color: #f2eef6; }
[data-theme-root].dark .yw-period-head strong { color: #cfc3da; }
[data-theme-root].dark .yw-period-head span, [data-theme-root].dark .yw-period-row-hint, [data-theme-root].dark .yw-period-note, [data-theme-root].dark .yw-period-custom-to { color: #a696b3; }
[data-theme-root].dark .yw-period-rows--after, [data-theme-root].dark .yw-period-presets, [data-theme-root].dark .yw-period-custom { border-color: #1c2843; }
[data-theme-root].dark .yw-period-row { background: #111b30; color: #f2eef6; }
[data-theme-root].dark .yw-period-row:hover, [data-theme-root].dark .yw-period-row:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-period-row[aria-pressed="true"] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-period-row .yw-menu-check { color: #c9b1ff; }
[data-theme-root].dark .yw-period-row[aria-pressed="true"] .yw-period-row-hint { color: #b7a0e6; }
[data-theme-root].dark .yw-period-stepper-btn { color: #a696b3; }
[data-theme-root].dark .yw-period-stepper-btn:hover, [data-theme-root].dark .yw-period-stepper-btn:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-period-stepper-btn:disabled { background: transparent; }
[data-theme-root].dark .yw-period-stepper-year { color: #a696b3; }
[data-theme-root].dark .yw-period-stepper-year[data-current] { color: #cfc3da; }
[data-theme-root].dark .yw-period-year-dot { background: #c9b1ff; }
[data-theme-root].dark .yw-period-custom-toggle { color: #cfc3da; }
[data-theme-root].dark .yw-period-custom-toggle:hover, [data-theme-root].dark .yw-period-custom-toggle:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-period-custom-chevron { color: #a696b3; }
[data-theme-root].dark .yw-period-menu [data-month] { color: #f2eef6; }
[data-theme-root].dark .yw-period-menu [data-day] { color: #f2eef6; }
[data-theme-root].dark .yw-period-menu [data-day]:hover, [data-theme-root].dark .yw-period-menu [data-day]:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-period-menu [data-day][aria-pressed="true"] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-period-dow { color: #a696b3; }
[data-theme-root].dark .yw-period-menu [data-month]:hover, [data-theme-root].dark .yw-period-menu [data-month]:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-period-menu [data-month][aria-pressed="true"] { background: #3f2d5c; color: #c9b1ff; }
[data-theme-root].dark .yw-period-menu [data-month][data-role="middle"] { background: #2c2344; }
[data-theme-root].dark .yw-period-menu [data-month]:disabled { background: transparent; }
[data-theme-root].dark .yw-period-input { background: #0b1122; border-color: #1c2843; color: #f2eef6; }
[data-theme-root].dark .yw-period-input:focus { border-color: #8b6ad6; }
[data-theme-root].dark .yw-period-apply, [data-theme-root].dark .yw-period-apply:disabled { background: #7c3aed; color: #fff; }
[data-theme-root].dark .yw-period-apply:hover { background: #8b4dfb; }
[data-theme-root].dark .yw-money-section-trigger { color: #f1edf5; }
[data-theme-root].dark .yw-money-section-options { border-color: #1c2843; background: #0d1527; color: #f1edf5; box-shadow: 0 15px 45px #00000066, 0 3px 9px #00000033; }
[data-theme-root].dark .yw-money-section-options > p { color: #bdbbc7; }
[data-theme-root].dark .yw-money-section-options a { color: #f1edf5; }
[data-theme-root].dark .yw-money-section-options a:hover, [data-theme-root].dark .yw-money-section-options a:focus-visible { background: #16223a; }
[data-theme-root].dark .yw-money-section-options a[aria-current="page"] { background: #49355f; color: #c5a8ff; }

/* Shared Money route surface: the title menu is the stable hook across all
   ten sections, so their existing data components can keep their behavior
   while receiving the same type scale, borders, and quiet dividers. Keep the
   dashboard's Geist face here instead of the legacy app default. */
main:has(.yw-money-section-menu) {
  --money-border: #e2e1e4;
  --money-surface: #fbfbfb;
  font-family: var(--font-geist-sans), Geist, system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: -.25px;
}
main:has(.yw-money-section-menu) :is(button, input, select, textarea, table) { font-family: inherit; }
main:has(.yw-money-section-menu) :is(.num, .tabular-nums) { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
main:has(.yw-money-section-menu) .halo,
main:has(.yw-money-section-menu) [class*="rounded-2xl"][class*="bg-white"] { border-color: var(--money-border); border-radius: 24px; background: var(--money-surface); box-shadow: 0 2px 3px rgba(0,0,0,.008); }
main:has(.yw-money-section-menu) [class*="rounded-2xl"][class*="p-4"] { padding: 23px; }
main:has(.yw-money-section-menu) .font-bold { font-weight: 500; }
main:has(.yw-money-section-menu) .text-2xl, main:has(.yw-money-section-menu) .text-3xl, main:has(.yw-money-section-menu) .text-4xl { font-weight: 500; letter-spacing: -.04em; }
main:has(.yw-money-section-menu) table thead { color: #929097; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
main:has(.yw-money-section-menu) table tbody tr { border-color: #eae8ec; }
main:has(.yw-money-section-menu) [class*="border-dashed"] { background: #fbf9fd; border-color: #d8c5f1; }
[data-theme-root].dark main:has(.yw-money-section-menu) { --money-border: #1c2843; --money-surface: #0d1527; }
[data-theme-root].dark main:has(.yw-money-section-menu) [class*="border-dashed"] { background: #111b30; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme-root] .yw-dashboard-tab-options,
  [data-theme-root] .yw-property-menu,
  [data-theme-root] .yw-period-menu,
  [data-theme-root] .yw-money-section-options {
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    backdrop-filter: blur(16px) saturate(115%);
    background: rgba(253, 252, 254, .88);
  }
  [data-theme-root].dark .yw-dashboard-tab-options,
  [data-theme-root].dark .yw-property-menu,
  [data-theme-root].dark .yw-period-menu,
  [data-theme-root].dark .yw-money-section-options {
    background: rgba(13, 21, 39, .90);
  }
}

/* A title menu inside a pinned header (10/13, owner on Floor's: "this
   selector modal doesent correct sizing ... make it correctly like the
   others"): the header's own blur makes it the panel's backdrop root, so the
   panel's frost blurred only the header and the cards below read straight
   through it. A solid panel, the colour the frost was over, on every tab's
   title menu alike. The period and property menus are portaled out of the
   header, so they keep the frost. */
[data-theme-root] header .yw-dashboard-tab-options { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fdfcfe; }
[data-theme-root].dark header .yw-dashboard-tab-options { background: #0d1527; }

/* The section on screen, in small type under a title menu (Dashboard views,
   Get Found sections; Money's title is its section already). It sits under
   the title flush right, ending under the last letter of the title, not the
   chevron (owner, 10/02: "a bit more to the left"); 31px is the chevron and
   its gap. */
.yw-title-section { align-self: flex-end; margin: 2px 31px 0 0; text-align: right; color: #8f8996; font-size: 13px; font-weight: 400; letter-spacing: -.2px; line-height: 1.25; }
[data-theme-root].dark .yw-title-section { color: #a297ab; }
/* With the section line, the title menu stacks: title, then the line under it. */
.yw-dashboard-tab-menu:has(> .yw-title-section) { flex-direction: column; align-items: flex-start; }


/* THE PAGE'S OWN VIEWS AS A CARD (10/06, owner: "integrate this slider
   selector better into the containers using our new design style", then
   "integrate into the cards ... new design style animations"). On a
   title-menu page the views (a TabBar) sit in a slim card the width of the
   cards under it, as the Dashboard's segmented control: the grey track, equal
   segments, and one white pill (the glider, ui-client.tsx TabBar) that slides
   to the tab on the frame it is clicked. The card holds its place on every
   view, so the switch never moves. Elsewhere the glider is not drawn. */
[data-tab-glider] { display: none; }
.yw-views-card.yw-views-card {
  margin-top: 18px; padding: 6px; border: 1px solid #e2e1e4; border-radius: 22px; background: #fbfbfb;
  animation: yw-motion-enter .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
.yw-views-card.yw-views-card [data-ui="tab-bar"] {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 2px;
  width: 100%; max-width: none; padding: 4px; overflow-x: auto; border: 0; border-radius: 16px; background: #eeeded; box-shadow: none;
}
.yw-views-card.yw-views-card [data-ui="tab-bar"] > a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px;
  border-radius: 12px; background: transparent; box-shadow: none; color: #6f6975;
  font-size: 13px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap;
  transition: color .25s cubic-bezier(.2, .8, .2, 1), background-color .2s;
}
.yw-views-card.yw-views-card [data-ui="tab-bar"] > a:hover { background: rgba(255, 255, 255, .55); color: #202024; }
/* The current view: ink on the white pill. Until the glider is measured the
   tab wears the pill itself, so the control is never blank. */
.yw-views-card.yw-views-card [data-ui="tab-bar"] > a[class~="bg-violet-600"] { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-views-card.yw-views-card [data-ui="tab-bar"][data-glide] > a[class~="bg-violet-600"] { background: transparent; box-shadow: none; }
.yw-views-card.yw-views-card [data-ui="tab-bar"] > a[class~="bg-violet-600"] span[aria-label] { background-color: #7c3aed; }
.yw-views-card.yw-views-card [data-tab-glider] {
  position: absolute; top: 0; left: 0; z-index: 0; display: block; border-radius: 12px;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 0 0 1px rgba(32, 32, 36, .03);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), width .42s cubic-bezier(.2, .8, .2, 1), height .42s cubic-bezier(.2, .8, .2, 1);
}
[data-theme-root].dark .yw-views-card.yw-views-card { border-color: #17243d; background: #0d1527; }
[data-theme-root].dark .yw-views-card.yw-views-card [data-ui="tab-bar"] { background: #142036; }
[data-theme-root].dark .yw-views-card.yw-views-card [data-ui="tab-bar"] > a { color: #c3b9cc; }
[data-theme-root].dark .yw-views-card.yw-views-card [data-ui="tab-bar"] > a:hover { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-views-card.yw-views-card [data-ui="tab-bar"] > a[class~="bg-violet-600"] { background: #243352; color: #f3eef8; box-shadow: none; }
[data-theme-root].dark .yw-views-card.yw-views-card [data-ui="tab-bar"][data-glide] > a[class~="bg-violet-600"] { background: transparent; }
[data-theme-root].dark .yw-views-card.yw-views-card [data-tab-glider] { background: #243352; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
@media (prefers-reduced-motion: reduce) {
  .yw-views-card.yw-views-card { animation: none; }
  .yw-views-card.yw-views-card [data-tab-glider] { transition: none; }
}

/* More choices in the date menu (period-controls.tsx ScopeSelect `groups`,
   10/06): a quiet label over one row of the preset buttons, under the window. */
.yw-period-group { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee7f2; }
.yw-period-group-label { color: #87818c; font-size: 11.5px; font-weight: 500; letter-spacing: -.1px; }
.yw-period-group-row .yw-period-row--preset { font-size: 12px; }
[data-theme-root].dark .yw-period-group { border-color: #1c2843; }
[data-theme-root].dark .yw-period-group-label { color: #a297ab; }
/* A menu carrying those rows is taller; it may use the window (still inside
   it) rather than hide the last row behind its own scroll. */
.yw-period-menu:has(.yw-period-group) { max-height: min(640px, calc(100vh - 120px)) !important; }
/* A groups-only menu (ScopeSelect presetsOnly, 10/07): its first group opens
   the menu, so it carries no rule above it. */
.yw-period-menu-body > .yw-period-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* The period part (ScopeSelect, 10/12) is one wrapper that lays out as if it
   were not there, unless the groups sit beside it (groupsBeside, Guests:
   "should let you filter thru time and paltforms"): then the period is the
   left column and the groups the right, both in view at once. */
.yw-period-menu-body:not([data-beside]) > .yw-period-main { display: contents; }
.yw-period-menu-body[data-beside] { display: grid; grid-template-columns: minmax(0, 1fr) 238px; align-items: start; gap: 0; }
.yw-period-menu-body[data-beside] > .yw-period-main { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding-right: 14px; }
.yw-period-menu-body[data-beside] > .yw-period-side { display: flex; min-width: 0; flex-direction: column; gap: 14px; align-self: stretch; padding: 2px 0 0 14px; border-left: 1px solid #eee7f2; }
.yw-period-side > .yw-period-group { margin-top: 0; padding-top: 0; border-top: 0; }
.yw-period-side .yw-period-group-label { padding: 0 5px; }
/* A long list of choices beside the period (Floor Tasks: every person on the
   crew, 10/13) scrolls in its own box so the groups under it stay in view. */
.yw-period-side .yw-period-group-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-period-side .yw-period-group-row:has(> :nth-child(13)) { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #dcd7e0 transparent; }
[data-theme-root].dark .yw-period-menu-body[data-beside] > .yw-period-side { border-color: #1c2843; }

/* ---- Halftone hover on every menu and selector row (10/12) ---------------
   Owner: "also need the animation on the sub tab selector modals but a bit
   toned down", then "a bit more intense" and "the same here and in every
   modal or selector that applies". rail-dots.tsx draws the dots (its
   MENU_ROWS lists the same rows as this rule): the title and section menus,
   the sidebar's Dashboard flyout, the property picker, the period menu's rows,
   months, quick ranges and Custom range, and every menu built on the standard
   menuitem and option roles. The dots are a little smaller than the
   sidebar's. 10/14, the Wizard's wake: the canvas paints a crisp tint under
   the row and a small halftone wave with a star in the row's free space,
   never behind the icon or the words. A row that is not the chosen one has
   no CSS hover fill (the canvas draws it); the chosen row keeps its tint.
   The canvas is out of flow, so no row changes size. */
:is(.yw-dashboard-tab-option, .yw-money-section-options a, .hw-rail-dashboard-menu a, .yw-property-option, .yw-period-row, .yw-period-menu [data-month], .yw-period-custom-toggle, [role="menu"] :is([role="menuitem"], [role="menuitemradio"]), [role="listbox"] [role="option"]) { position: relative; isolation: isolate; --yw-nav-ink: rgba(124, 58, 237, .34); --yw-dots-scale: .9; }
:is(.yw-dashboard-tab-option, .yw-money-section-options a, .hw-rail-dashboard-menu a, .yw-property-option, .yw-period-row, .yw-period-menu [data-month], .yw-period-custom-toggle, [role="menu"] :is([role="menuitem"], [role="menuitemradio"]), [role="listbox"] [role="option"]) > canvas.hw-nav-dots { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
:is(.yw-dashboard-tab-option, .yw-money-section-options a, .hw-rail-dashboard-menu a, .yw-property-option, .yw-period-row, .yw-period-menu [data-month], .yw-period-custom-toggle, [role="menu"] :is([role="menuitem"], [role="menuitemradio"]), [role="listbox"] [role="option"]):not([aria-current="page"]):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):not([data-role]):not(:disabled):hover { background: transparent; }
[data-theme-root].dark :is(.yw-dashboard-tab-option, .yw-money-section-options a, .hw-rail-dashboard-menu a, .yw-property-option, .yw-period-row, .yw-period-menu [data-month], .yw-period-custom-toggle, [role="menu"] :is([role="menuitem"], [role="menuitemradio"]), [role="listbox"] [role="option"]) { --yw-nav-ink: rgba(168, 131, 238, .42); }

/* ---- The current choice's star (nav-star.tsx MenuStar, 10/14) ------------
   Owner: "the check mark should be the star". Every menu and selector marks
   the chosen row with the brand's four-point star where the check sat; each
   menu's own rule still decides when it shows (aria-current, aria-pressed),
   and the dropdowns render it on the chosen option only (data-on). It pops
   in as it appears. While the hover carries it onto the wave (rail-dots.tsx,
   data-star-flow) the resting one steps aside. */
[data-theme-root] .yw-menu-check.yw-menu-star { align-items: center; justify-content: center; flex-shrink: 0; width: 17px; height: 17px; color: #7c3aed; }
[data-theme-root] .yw-menu-check.yw-menu-star > svg { width: 13px; height: 13px; fill: currentColor; stroke: none; transform: scale(.4) rotate(-45deg); transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
[data-theme-root] :is([aria-current="page"], [aria-pressed="true"], [aria-selected="true"]) > .yw-menu-check.yw-menu-star > svg,
[data-theme-root] .yw-period-row[aria-pressed="true"] .yw-menu-check.yw-menu-star > svg,
[data-theme-root] .yw-menu-check.yw-menu-star[data-on] > svg { transform: none; }
[data-theme-root] .yw-menu-check.yw-menu-star[data-on] { opacity: 1; }
[data-theme-root] .yw-period-row .yw-menu-check.yw-menu-star > svg { width: 12px; height: 12px; }
[data-theme-root] .yw-select-option > .yw-menu-check.yw-menu-star { margin-left: auto; }
[data-theme-root] .yw-property-option .yw-menu-check.yw-menu-star { color: #8b42ed; }
[data-theme-root] [data-star-flow] .yw-menu-check.yw-menu-star { opacity: 0; }
[data-theme-root].dark .yw-menu-check.yw-menu-star { color: #c9b1ff; }
@media (prefers-reduced-motion: reduce) { [data-theme-root] .yw-menu-check.yw-menu-star > svg { transition: none; } }