/* ═══════════════════════════════════════════════════════════════════════
   brand.css — YoAccountant design system for Oganoflow (Phase 0, D parts 1-2)

   Every rule here is scoped under html.theme-yoa, so nothing changes until
   the class is on <html>. The class is set by the server flag YOA_THEME=on
   (/api/health → yoaTheme), cached in localStorage tunado_pref_theme so the
   next load paints themed with no flash (index.html head script, js/core.js
   applyYoaTheme). Load after style.css.

   Source of truth (read-only): YoAccountant docs/ux/ (01 design language,
   03 pattern library, 05 redesign type scale, 06 accessibility) and the
   tokens in theme/templates/base.html :root and
   theme/static/theme/css/app-theme/light.css + bridge.css.

   Rules that carry through:
   - Green only means good. Neutral counts and money are blue/ink, overdue
     and rejected are red, watch items are amber.
   - Roboto, 15px root; type scale 24 / 17 / 14 / 13 / 12 / 11 / 10.
   - Cards rounded-2xl (16px) with a light shadow; inputs rounded-xl (12px)
     with a soft primary focus ring; tables with an 11px uppercase header and
     right-aligned money in tabular numbers; rounded uppercase status pills.
   - Every pairing of text on a fill here is at least 4.5:1.
   Part 2 adds YoA's shell (fixed 56px top bar, 88px / 180px icon rail,
   slide-out sub-menu, phone drawer); see "YoA shell" below and js/nav.js.
   Part 3 matches the Oganoflow Prototype artifact (page sheet, breadcrumb,
   Create button, docked sub-menu, KPI tiles on Home).
   Part 4 adds the prototype's neutral filter chips, the main action beside
   a list page's title, and the bell in the top bar.
   Not yet: Material Symbols (YoA loads them from a CDN, so the rail keeps
   Bootstrap Icons), dark mode.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Roboto, self-hosted ─────────────────────────────────────────────────
   Variable font (all weights 100..900 in one file per subset), the same
   files YoAccountant serves (theme/static/theme/fonts). SIL Open Font
   License 1.1. The unicode-range split means a page that never uses
   extended latin only downloads the small file. Declaring @font-face costs
   nothing until an element asks for Roboto, so theme-off pages never fetch
   these files. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */
html.theme-yoa {
  /* YoA (base.html :root, light.css) */
  --yoa-primary:        #1C6D00;   /* white text 6.5:1 */
  --yoa-primary-hover:  #165800;
  --yoa-primary-deep:   #114100;   /* page titles (primary 60% toward black) */
  --yoa-primary-dark:   #154F00;   /* section labels (primary 78% toward black) */
  --yoa-primary-tint:   #E8F0E6;   /* primary 10% over white */
  --yoa-accent:         #40D107;   /* decoration only, never text on white */
  --yoa-ring:           rgba(28, 109, 0, 0.14);
  --yoa-success:        #16a34a;   /* fills and dots; text uses --yoa-success-text */
  --yoa-success-text:   #15803D;
  --yoa-success-tint:   #DCFCE7;
  --yoa-warn:           #d97706;
  --yoa-warn-text:      #B45309;
  --yoa-warn-tint:      #FEF3C7;
  --yoa-danger:         #DC2626;   /* white text 4.8:1 */
  --yoa-danger-text:    #B91C1C;
  --yoa-danger-tint:    #FEE2E2;
  --yoa-info:           #2563eb;   /* white text 5.2:1 */
  --yoa-info-text:      #1D4ED8;
  --yoa-info-tint:      #DBEAFE;
  --yoa-text:           #16181D;
  --yoa-text-secondary: #43484F;   /* table cells, button labels, panel links */
  --yoa-text-muted:     #5B6169;   /* 6.1:1 on white */
  --yoa-text-subtle:    #767C85;   /* placeholders / decoration only */
  --yoa-border:         #E7E9EC;
  --yoa-border-strong:  #D8DCE1;   /* inputs, secondary buttons */
  --yoa-surface:        #FFFFFF;
  --yoa-surface-muted:  #F5F6F8;
  --yoa-shadow-card:    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --yoa-shadow-hover:   0 4px 12px rgba(16, 24, 40, 0.08);
  --yoa-font: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* Type scale */
  --fs-title:   24px;
  --fs-section: 17px;
  --fs-heading: 14px;
  --fs-body:    13px;
  --fs-help:    12px;
  --fs-label:   11px;
  --fs-badge:   10px;

  /* Oganoflow's own tokens (style.css :root) → YoA */
  --primary:       var(--yoa-primary);
  --primary-hover: var(--yoa-primary-hover);
  --primary-dark:  var(--yoa-primary-deep);
  --primary-light: var(--yoa-primary-tint);
  --action:        var(--yoa-primary);
  --action-hover:  var(--yoa-primary-hover);
  --ink:           var(--yoa-text);
  --ink-2:         var(--yoa-text-secondary);
  --muted:         var(--yoa-text-muted);
  --muted-2:       var(--yoa-text-subtle);
  --line:          var(--yoa-border);
  --page:          var(--yoa-surface-muted);
  --panel-active:  #ECEEF1;
  --si-surface:    var(--yoa-primary-tint);
  --si-border:     #C9DCC2;
  --topbar-h:      56px;
  --danger:        var(--yoa-danger-text);
  --success:       var(--yoa-success);
  --warning:       var(--yoa-warn);
  --radius:        16px;
  --shadow-sm:     var(--yoa-shadow-card);
  --shadow-md:     var(--yoa-shadow-hover);

  /* Workflow status pills (YoA 01-design-language status palette) */
  --status-pending-bg:           var(--yoa-warn-tint);    --status-pending-fg:           var(--yoa-warn-text);
  --status-approved-bg:          var(--yoa-success-tint); --status-approved-fg:          var(--yoa-success-text);
  --status-rejected-bg:          var(--yoa-danger-tint);  --status-rejected-fg:          var(--yoa-danger-text);
  --status-draft-bg:             #F3F4F6;                 --status-draft-fg:             #4B5563;
  --status-info-requested-bg:    var(--yoa-warn-tint);    --status-info-requested-fg:    var(--yoa-warn-text);
  --status-awaiting-decision-bg: var(--yoa-info-tint);    --status-awaiting-decision-fg: var(--yoa-info-text);
  --status-paid-bg:              #F0FDF4;                 --status-paid-fg:              var(--yoa-success-text);
  --status-processing-bg:        var(--yoa-info-tint);    --status-processing-fg:        var(--yoa-info-text);

  /* Bootstrap 5.3 globals (beat :root by specificity) */
  --bs-primary: var(--yoa-primary);           --bs-primary-rgb: 28, 109, 0;
  --bs-success: var(--yoa-success);           --bs-success-rgb: 22, 163, 74;
  --bs-warning: var(--yoa-warn);              --bs-warning-rgb: 217, 119, 6;
  --bs-danger:  var(--yoa-danger);            --bs-danger-rgb: 220, 38, 38;
  --bs-info:    var(--yoa-info);              --bs-info-rgb: 37, 99, 235;
  --bs-secondary: var(--yoa-text-muted);      --bs-secondary-rgb: 91, 97, 105;
  --bs-primary-text-emphasis: var(--yoa-primary-deep);
  --bs-primary-bg-subtle: var(--yoa-primary-tint);
  --bs-success-text-emphasis: var(--yoa-success-text);
  --bs-success-bg-subtle: var(--yoa-success-tint);
  --bs-warning-text-emphasis: var(--yoa-warn-text);
  --bs-warning-bg-subtle: var(--yoa-warn-tint);
  --bs-danger-text-emphasis: var(--yoa-danger-text);
  --bs-danger-bg-subtle: var(--yoa-danger-tint);
  --bs-info-text-emphasis: var(--yoa-info-text);
  --bs-info-bg-subtle: var(--yoa-info-tint);
  --bs-body-font-family: var(--yoa-font);
  --bs-body-font-size: var(--fs-body);
  --bs-body-color: var(--yoa-text);           --bs-body-color-rgb: 22, 24, 29;
  --bs-body-bg: var(--yoa-surface);
  --bs-emphasis-color: var(--yoa-text);
  --bs-secondary-color: var(--yoa-text-muted);
  --bs-tertiary-color: var(--yoa-text-subtle);
  --bs-secondary-bg: #ECEEF1;
  --bs-tertiary-bg: var(--yoa-surface-muted);
  --bs-light-rgb: 245, 246, 248;
  --bs-border-color: var(--yoa-border);
  --bs-border-color-translucent: rgba(22, 24, 29, 0.1);
  --bs-link-color: var(--yoa-primary);        --bs-link-color-rgb: 28, 109, 0;
  --bs-link-hover-color: var(--yoa-primary-hover); --bs-link-hover-color-rgb: 22, 88, 0;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 16px;
  --bs-border-radius-pill: 999px;
  --bs-focus-ring-color: var(--yoa-ring);

  font-size: 15px;          /* YoA root: 1rem = 15px */
  color-scheme: light;
}

/* ── Base type ───────────────────────────────────────────────────────── */
html.theme-yoa body {
  font-family: var(--yoa-font);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--yoa-text);
  background: var(--yoa-surface-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.theme-yoa :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--yoa-text); line-height: 1.25; }
html.theme-yoa :is(h1, .h1) { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; color: var(--yoa-text); }
html.theme-yoa :is(h2, .h2) { font-size: var(--fs-section); font-weight: 800; letter-spacing: -0.02em; }
html.theme-yoa :is(h3, .h3, h4, .h4) { font-size: var(--fs-section); font-weight: 800; }
html.theme-yoa :is(h5, .h5) { font-size: var(--fs-heading); font-weight: 700; }
html.theme-yoa :is(h6, .h6) { font-size: var(--fs-body); font-weight: 700; }
html.theme-yoa .small, html.theme-yoa small { font-size: var(--fs-help); }
html.theme-yoa .text-muted { color: var(--yoa-text-muted) !important; }
html.theme-yoa .text-primary { color: var(--yoa-primary) !important; }
html.theme-yoa .text-success { color: var(--yoa-success-text) !important; }
html.theme-yoa .text-danger  { color: var(--yoa-danger-text) !important; }
html.theme-yoa .text-warning { color: var(--yoa-warn-text) !important; }
html.theme-yoa .text-info    { color: var(--yoa-info-text) !important; }
html.theme-yoa a { color: var(--yoa-primary); }
html.theme-yoa a:hover { color: var(--yoa-primary-hover); }

/* Money and figures line up wherever they are right-aligned (YoA base.html) */
html.theme-yoa :is(.tabular-nums, .money, td.text-end, th.text-end, input.text-end,
  .stat-number, .hero-fig-val, .big-fig, .two-up-val, .queue-amt, .legend-val, .line-val, .chart-bar-val) {
  font-variant-numeric: tabular-nums;
}

/* ── Shell: top bar (56px) and the existing rail + panel ─────────────── */
html.theme-yoa #topbar {
  height: var(--topbar-h);
  background: var(--yoa-surface);
  border-bottom: 1px solid var(--yoa-border);
}
html.theme-yoa #pageTitle { font-size: var(--fs-section); font-weight: 800; color: var(--yoa-primary-deep); letter-spacing: -0.02em; }
html.theme-yoa #mainContent { background: var(--yoa-surface-muted); }
html.theme-yoa #sidebar,
html.theme-yoa .nav-rail,
html.theme-yoa .nav-panel { background: var(--yoa-surface); }
html.theme-yoa .nav-rail,
html.theme-yoa .nav-panel { border-right-color: var(--yoa-border); }
html.theme-yoa .rail-brand-mark { background: var(--yoa-primary); border-radius: 12px; }
html.theme-yoa .rail-item { color: var(--yoa-text-muted); }
html.theme-yoa .rail-item:hover { color: var(--yoa-text); background: var(--yoa-surface-muted); }
html.theme-yoa .rail-item.active { color: var(--yoa-primary-deep); border-left-color: var(--yoa-primary); background: var(--yoa-primary-tint); }
html.theme-yoa .rail-item.active i { color: var(--yoa-primary); }
html.theme-yoa .rail-badge { color: var(--yoa-danger-text); border-color: var(--yoa-danger); }
html.theme-yoa .panel-title { font-size: var(--fs-section); color: var(--yoa-primary-deep); }
html.theme-yoa .panel-heading { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; color: var(--yoa-text-muted); }
html.theme-yoa .panel-item { font-size: 12.5px; font-weight: 600; color: var(--yoa-text-secondary); border-radius: 10px; }
html.theme-yoa .panel-item i { color: var(--yoa-text-muted); }
html.theme-yoa .panel-item:hover { background: var(--yoa-surface-muted); color: var(--yoa-text); }
html.theme-yoa .panel-item.active { background: var(--yoa-primary-tint); color: var(--yoa-primary-deep); font-weight: 700; }
html.theme-yoa .panel-item.active i,
html.theme-yoa .panel-item.action,
html.theme-yoa .panel-item.action i { color: var(--yoa-primary); }
html.theme-yoa .panel-count.danger { background: var(--yoa-danger-tint); color: var(--yoa-danger-text); }
html.theme-yoa :is(.panel-search, .topbar-search) {
  background: var(--yoa-surface-muted); border-color: transparent; border-radius: 12px; color: var(--yoa-text-muted);
}
html.theme-yoa :is(.panel-search, .topbar-search):hover { border-color: var(--yoa-border-strong); color: var(--yoa-text-secondary); }
html.theme-yoa :is(.panel-search, .topbar-search):focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; }
html.theme-yoa .avatar-sm,
html.theme-yoa .hero-avatar { background: var(--yoa-primary); }
html.theme-yoa .topbar-m365 { background: var(--yoa-primary-tint); color: var(--yoa-primary-deep); border-color: #C9DCC2; }

/* ── YoA shell (part 2): fixed top bar, icon rail, slide-out sub-menu ──
   Same geometry as YoA (sowaf/templates/includes/_sidebar_styles.html,
   theme/templates/base.html): a 56px top bar across the window with the
   product mark at its left; under it an 88px rail of 56x32 icon pills with
   12px labels, which the menu button widens to 180px (icons and labels in a
   row). A section with several pages opens a 180px sub-menu beside the rail
   (hover, click, or Enter / Space; Escape closes); it floats over the page.
   From 1200px a click docks it; hovering another section then shows that
   section in the docked sub-menu until the pointer leaves.
   At 1200px and up an expanded rail pushes the page; from 992px to 1199px it
   floats over it. Below 992px the rail is a drawer behind the top bar's menu
   button, always in its wide form, and the sub-menu opens beside it.
   State lives in classes js/nav.js keeps on #sidebar (is-wide, nav-sub-open,
   sidebar-mobile-open), which a navigation does not rebuild.
   Markup that only this shell uses carries .yoa-only and stays hidden
   without the theme. */
html:not(.theme-yoa) .yoa-only { display: none !important; }
html.theme-yoa {
  --yoa-rail-w:      88px;
  --yoa-rail-w-wide: 180px;
  --yoa-sub-w:       180px;
  --yoa-hover:       rgba(28, 109, 0, 0.08);   /* primary 8%, YoA rail hover */
}

/* Top bar across the whole window */
html.theme-yoa #topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  padding: 0 24px 0 16px; gap: 12px;
}
html.theme-yoa #mainContent { padding-top: var(--topbar-h); }
html.theme-yoa .topbar-brand {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 160px; min-height: 40px;
  padding: 4px 8px 4px 4px; border-radius: 10px; text-decoration: none;
}
html.theme-yoa .topbar-brand:hover { background: var(--yoa-hover); }
html.theme-yoa .topbar-brand:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; }
html.theme-yoa .topbar-brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--yoa-primary); color: #fff; font-size: 16px;
}
html.theme-yoa .topbar-wordmark { height: 24px; width: auto; display: block; }
html.theme-yoa .topbar-brand-name { font-size: var(--fs-section); font-weight: 800; letter-spacing: -0.2px; color: var(--yoa-text); white-space: nowrap; }
html.theme-yoa .topbar-hamburger {
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 10px;
  align-items: center; justify-content: center; color: var(--yoa-text);
}
html.theme-yoa .topbar-hamburger:hover { background: var(--yoa-surface-muted); }
html.theme-yoa .topbar-hamburger:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; box-shadow: none; }

/* Rail: under the top bar, 88px */
html.theme-yoa #sidebar {
  top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  width: var(--yoa-rail-w); background: var(--yoa-surface); z-index: 1020;
  transition: width .18s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
html.theme-yoa #sidebar .nav-rail {
  width: 100%; flex: 1 1 auto; border-right: 0;
  align-items: center; padding: 8px 4px 0;
}
html.theme-yoa .drawer-user { display: none !important; }
html.theme-yoa .rail-expand {
  flex: 0 0 auto; width: 40px; height: 40px; margin: 4px 0 16px;
  display: grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: var(--yoa-text-muted); font-size: 22px; cursor: pointer;
}
html.theme-yoa .rail-expand:hover { background: var(--yoa-surface-muted); color: var(--yoa-text); }
html.theme-yoa .rail-expand:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; }
html.theme-yoa .rail-items,
html.theme-yoa .rail-bottom { width: 100%; align-items: center; gap: 4px; padding: 0; }
html.theme-yoa .rail-bottom { border-top: 0; padding: 12px 0 4px; }
/* The organisation's logo sits at the foot of the rail, as YoA's workspace pill does. */
html.theme-yoa .rail-brand { height: auto; padding: 8px 0 16px; border-bottom: 0; }
html.theme-yoa .rail-brand img { max-width: 40px; max-height: 40px; }
html.theme-yoa .rail-brand:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; border-radius: 10px; }

html.theme-yoa .rail-item {
  width: 80px; min-height: 64px; height: 64px; padding: 0; gap: 4px; flex-shrink: 0;
  border: 0; border-radius: 10px; background: none;
  color: var(--yoa-text-muted); font-size: var(--fs-help); font-weight: 500; letter-spacing: .2px; line-height: 16px;
}
html.theme-yoa .rail-item i {
  width: 56px; height: 32px; display: grid; place-items: center; border-radius: 16px;
  font-size: 22px; color: inherit; transition: background .12s, color .12s;   /* YoA rail icon 22px */
}
html.theme-yoa .rail-item:hover { color: var(--yoa-text); background: none; }
html.theme-yoa .rail-item:hover i { background: var(--yoa-hover); }
html.theme-yoa .rail-item:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; }
html.theme-yoa .rail-item.active { color: var(--yoa-primary-deep); background: none; font-weight: 600; }
html.theme-yoa .rail-item.active i { background: var(--yoa-primary-tint); color: var(--yoa-primary); }
/* Sub-menu open for a section you are not in: neutral grey, so it never reads as the current section */
html.theme-yoa .rail-item[aria-expanded="true"]:not(.active) { color: var(--yoa-text); }
html.theme-yoa .rail-item[aria-expanded="true"]:not(.active) i { background: #ECEEF1; }
html.theme-yoa .rail-label { max-width: 80px; }
html.theme-yoa .rail-badge {
  top: 4px; right: auto; left: calc(50% + 6px);
  min-width: 16px; height: 16px; padding: 0 4px; border: 0; border-radius: 999px;
  background: var(--yoa-danger-tint); color: var(--yoa-danger-text);
  font-size: var(--fs-label); font-weight: 600; line-height: 16px;
}
html.theme-yoa .rail-signout:hover { color: var(--yoa-danger-text); }

/* Expanded rail (and the phone drawer): 180px, icon and label in a row */
html.theme-yoa #sidebar.is-wide { width: var(--yoa-rail-w-wide); }
html.theme-yoa #sidebar.is-wide .nav-rail { align-items: stretch; padding: 8px 8px 0; }
html.theme-yoa #sidebar.is-wide .rail-expand { margin-left: 8px; }
html.theme-yoa #sidebar.is-wide :is(.rail-items, .rail-bottom) { align-items: stretch; }
html.theme-yoa #sidebar.is-wide .rail-item {
  width: 100%; height: 48px; min-height: 48px; flex-direction: row; justify-content: flex-start;
  gap: 12px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-body);
}
html.theme-yoa #sidebar.is-wide .rail-item i { width: 24px; height: 24px; background: none; }
html.theme-yoa #sidebar.is-wide .rail-item:hover { background: var(--yoa-hover); }
html.theme-yoa #sidebar.is-wide .rail-item.active { background: var(--yoa-primary-tint); }
html.theme-yoa #sidebar.is-wide .rail-item[aria-expanded="true"]:not(.active) { background: #ECEEF1; }
html.theme-yoa #sidebar.is-wide .rail-label { flex: 1; max-width: none; text-align: left; }
html.theme-yoa #sidebar.is-wide .rail-badge { position: static; margin-left: auto; }
html.theme-yoa #sidebar.is-wide .rail-brand { justify-content: flex-start; padding-left: 14px; }

/* Sub-menu: slides out beside the rail and floats over the page */
html.theme-yoa #sidebar .nav-panel {
  position: absolute; top: 0; left: 100%; height: 100%;
  width: var(--yoa-sub-w); flex: none;
  background: var(--yoa-surface); border-right: 1px solid var(--yoa-border);
  box-shadow: 8px 0 24px rgba(16, 24, 40, 0.08);
  visibility: hidden; opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
html.theme-yoa #sidebar.nav-sub-open .nav-panel {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
html.theme-yoa .panel-head { padding: 14px 14px 10px; }
html.theme-yoa .panel-title {
  margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--yoa-text-muted);
}
html.theme-yoa .nav-panel .panel-search { display: none; }   /* search is in the top bar */
html.theme-yoa .panel-body { padding: 6px 0; }
html.theme-yoa .panel-group { margin-bottom: 4px; }
html.theme-yoa .panel-group + .panel-group { border-top: 1px solid var(--yoa-border); padding-top: 2px; }
html.theme-yoa .panel-heading { padding: 9px 14px 5px; font-size: var(--fs-badge); letter-spacing: .06em; }
html.theme-yoa .panel-item {
  min-height: 40px; padding: 8px 14px; margin: 0; border-radius: 0; gap: 8px;
  font-size: var(--fs-body); font-weight: 500; line-height: 1.3; color: var(--yoa-text);
}
html.theme-yoa .panel-item i { display: none; }   /* YoA's sub-menu is text only */
html.theme-yoa .panel-item span:nth-child(2) { white-space: normal; }
html.theme-yoa .panel-item:hover { background: var(--yoa-surface-muted); color: var(--yoa-primary); }
html.theme-yoa .panel-item:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; }
html.theme-yoa .panel-item.active { background: var(--yoa-primary-tint); color: var(--yoa-primary-deep); font-weight: 600; }
html.theme-yoa .panel-item.action { color: var(--yoa-primary); }
html.theme-yoa .panel-item.soon { color: var(--yoa-text-muted); }
html.theme-yoa .panel-count { margin-left: auto; height: 16px; min-width: 16px; padding: 0 4px; line-height: 16px; font-size: var(--fs-label); font-weight: 600; }
html.theme-yoa .panel-foot { padding: 8px 10px; }

/* Desktop: the page starts after the rail; an expanded rail pushes it from 1200px, floats over it below */
@media (min-width: 992px) {
  html.theme-yoa #mainContent { margin-left: var(--yoa-rail-w); }
  html.theme-yoa .topbar-hamburger { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  html.theme-yoa #sidebar.is-wide { box-shadow: 0 10px 40px rgba(16, 24, 40, 0.18); }
}
@media (min-width: 1200px) {
  html.theme-yoa #sidebar.is-wide ~ #mainContent { margin-left: var(--yoa-rail-w-wide); }
  html.theme-yoa #mainContent { transition: margin-left .18s ease; }
}

/* Phones and small tablets: the menu button opens the rail as a drawer under the top bar */
@media (max-width: 991.98px) {
  html.theme-yoa #topbar { padding: 0 12px 0 8px; gap: 8px; }
  html.theme-yoa .topbar-brand { display: none; }
  html.theme-yoa #sidebar { width: var(--yoa-rail-w-wide); max-width: none; }
  html.theme-yoa #sidebar.sidebar-mobile-open { box-shadow: 6px 0 30px rgba(0, 0, 0, 0.18); }
  html.theme-yoa #sidebar .nav-panel { width: min(var(--yoa-sub-w), calc(100vw - var(--yoa-rail-w-wide))); }
  html.theme-yoa .rail-expand { display: none; }
  html.theme-yoa .sidebar-backdrop { z-index: 1019; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-yoa :is(#sidebar, #sidebar .nav-panel, #mainContent, .rail-item i) { transition: none !important; }
}
@media print {
  html.theme-yoa #mainContent { padding-top: 0; margin-left: 0 !important; }
}

/* ── Cards (rounded-2xl, light shadow) ───────────────────────────────── */
html.theme-yoa :is(.card, .home-card, .detail-section, .form-section, .req-card, .hero, .chart-card) {
  background: var(--yoa-surface);
  border: 1px solid var(--yoa-border);
  border-radius: 16px;
  box-shadow: var(--yoa-shadow-card);
}
html.theme-yoa .home-card.danger { border-color: #FCA5A5; }
html.theme-yoa .card-header {
  background: var(--yoa-surface); border-bottom-color: var(--yoa-border);
  font-size: var(--fs-heading); font-weight: 700; color: var(--yoa-text);
  border-radius: 16px 16px 0 0 !important;
}
html.theme-yoa .card-footer { background: var(--yoa-surface); border-top-color: var(--yoa-border); border-radius: 0 0 16px 16px; }
html.theme-yoa .req-card:hover { box-shadow: var(--yoa-shadow-hover); border-color: var(--yoa-border-strong); }
html.theme-yoa :is(.home-card-title, .req-card-title) { font-size: var(--fs-heading); font-weight: 700; color: var(--yoa-text); }
html.theme-yoa :is(.req-card-meta, .hero-sub, .queue-sub, .rc-sub) { color: var(--yoa-text-muted); }
html.theme-yoa .hero-greet { font-size: var(--fs-title); font-weight: 700; color: var(--yoa-text); letter-spacing: -0.01em; }
html.theme-yoa .hero-eyebrow { color: var(--yoa-primary-dark); }
/* Section label: 11px / 700 / uppercase / 0.06em / primary-dark */
html.theme-yoa .form-section h6 {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--yoa-primary-dark); border-bottom: 1px solid var(--yoa-border);
}
html.theme-yoa :is(.detail-label, .two-up-lbl) {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--yoa-text-muted);
}
html.theme-yoa .detail-value { font-size: 14px; color: var(--yoa-text); }
html.theme-yoa .two-up-cell { border-radius: 12px; }
html.theme-yoa .chip { border-color: var(--yoa-border-strong); color: var(--yoa-text-secondary); font-size: var(--fs-body); font-weight: 600; }
html.theme-yoa .chip i { color: var(--yoa-primary); }
html.theme-yoa .chip:hover { border-color: var(--yoa-primary); color: var(--yoa-primary-deep); background: var(--yoa-primary-tint); }
html.theme-yoa .empty-state { color: var(--yoa-text-subtle); }
html.theme-yoa .empty-state h6 { color: var(--yoa-text); font-size: var(--fs-heading); }
html.theme-yoa .empty-state p { color: var(--yoa-text-muted); font-size: var(--fs-body); }
html.theme-yoa .modal-content { border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(16, 24, 40, 0.16); }
html.theme-yoa .modal-header { border-bottom-color: var(--yoa-border); }
html.theme-yoa .modal-footer { border-top-color: var(--yoa-border); }
html.theme-yoa .modal-title { font-size: var(--fs-section); font-weight: 800; }
html.theme-yoa .dropdown-menu { border-color: var(--yoa-border); border-radius: 12px; box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12); }
html.theme-yoa .alert { border-radius: 12px; }

/* ── KPI cards (YoA headline gradient tiles, white text, 135deg) ─────
   Blue = a neutral count, green = good, amber = watch, red = critical.
   The prototype's hues, with the light end of each gradient darkened so
   white text keeps 4.5:1 or better across the whole tile. */
html.theme-yoa {
  --yoa-kpi-green: linear-gradient(135deg, #1C6D00, #2E7D0A);   /* 6.5 / 5.2 */
  --yoa-kpi-blue:  linear-gradient(135deg, #1D4FD7, #2563EB);   /* 6.7 / 5.2 */
  --yoa-kpi-amber: linear-gradient(135deg, #B45309, #B85A0A);   /* 5.0 / 4.7 */
  --yoa-kpi-red:   linear-gradient(135deg, #B91C1C, #DC2626);   /* 6.5 / 4.8 */
  --yoa-kpi-slate: linear-gradient(135deg, #334155, #64748B);   /* 10.4 / 4.8 */
}
html.theme-yoa .stat-card {
  border: 0; border-radius: 16px; color: #fff;
  background: var(--yoa-kpi-blue);
  box-shadow: var(--yoa-shadow-card);
}
html.theme-yoa .stat-card.success { background: var(--yoa-kpi-green); }
html.theme-yoa .stat-card.warning { background: var(--yoa-kpi-amber); }
html.theme-yoa .stat-card.danger  { background: var(--yoa-kpi-red); }
html.theme-yoa .stat-card .stat-icon { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; border-radius: 12px; }
html.theme-yoa .stat-card .stat-number { color: #fff; font-size: var(--fs-title); font-weight: 900; letter-spacing: -0.01em; }
html.theme-yoa .stat-card .stat-label {
  color: rgba(255, 255, 255, 0.9); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
html.theme-yoa :is(.hero-fig-val, .big-fig, .two-up-val) { font-weight: 800; color: var(--yoa-text); }
html.theme-yoa .big-fig.red { color: var(--yoa-danger-text); }
html.theme-yoa .hero-fig-lbl { color: var(--yoa-text-muted); }

/* ── Forms (rounded-xl, soft primary focus ring, real labels) ────────── */
html.theme-yoa :is(.form-control, .form-select) {
  border: 1px solid var(--yoa-border-strong); border-radius: 12px;
  font-size: var(--fs-body); color: var(--yoa-text); background-color: var(--yoa-surface);
  padding: 9px 11px;
}
html.theme-yoa .form-select { padding-right: 2.25rem; }
html.theme-yoa :is(.form-control-sm, .form-select-sm) { border-radius: 10px; padding-top: 5px; padding-bottom: 5px; font-size: var(--fs-help); }
html.theme-yoa .form-select-sm { padding-right: 2rem; }
html.theme-yoa :is(.form-control, .form-select):focus {
  border-color: var(--yoa-primary); box-shadow: 0 0 0 3px var(--yoa-ring); outline: 0;
}
html.theme-yoa .form-control::placeholder { color: var(--yoa-text-subtle); }
html.theme-yoa :is(.form-control, .form-select):disabled,
html.theme-yoa .form-control[readonly] { background-color: var(--yoa-surface-muted); }
html.theme-yoa .input-group > :is(.form-control, .form-select, .input-group-text, .btn) { border-radius: 12px; }
html.theme-yoa .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.theme-yoa .input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html.theme-yoa .input-group-text { background: var(--yoa-surface-muted); border-color: var(--yoa-border-strong); color: var(--yoa-text-muted); font-size: var(--fs-body); }
/* Field label: 11px / 700 / uppercase / 0.04em / muted */
html.theme-yoa .form-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--yoa-text-muted); margin-bottom: 5px;
}
/* A note inside a label ("(auto-filled ...)") stays in sentence case */
html.theme-yoa .form-label :is(.text-muted, .fw-normal, small, .small) { text-transform: none; letter-spacing: 0; font-weight: 400; }
html.theme-yoa .form-text { font-size: var(--fs-help); color: var(--yoa-text-muted); }
/* The search fields' inline icon needs its left inset back after the padding above */
html.theme-yoa .search-wrap input { padding-left: 2.6rem; }
html.theme-yoa .form-check-input:checked { background-color: var(--yoa-primary); border-color: var(--yoa-primary); }
html.theme-yoa .form-check-input:focus { border-color: var(--yoa-primary); box-shadow: 0 0 0 3px var(--yoa-ring); }
html.theme-yoa .form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231C6D00'/%3e%3c/svg%3e");
}
html.theme-yoa .form-check-label { font-size: var(--fs-body); }

/* ── Buttons: one solid primary; the rest outline / ghost ───────────── */
html.theme-yoa .btn {
  --bs-btn-font-family: var(--yoa-font);
  --bs-btn-font-size: 13.125px;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 12px;
  --bs-btn-focus-box-shadow: 0 0 0 3px var(--yoa-ring);
  border-radius: 12px;
}
html.theme-yoa .btn-sm { --bs-btn-font-size: var(--fs-help); --bs-btn-border-radius: 8px; border-radius: 8px; }
html.theme-yoa .btn-lg { --bs-btn-border-radius: 12px; }
html.theme-yoa .btn:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; }
html.theme-yoa .btn-primary,
html.theme-yoa .btn-primary-sm {
  --bs-btn-color: #fff; --bs-btn-bg: var(--yoa-primary); --bs-btn-border-color: var(--yoa-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--yoa-primary-hover); --bs-btn-hover-border-color: var(--yoa-primary-hover);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--yoa-primary-hover); --bs-btn-active-border-color: var(--yoa-primary-hover);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--yoa-primary); --bs-btn-disabled-border-color: var(--yoa-primary);
  background: var(--yoa-primary); border-color: var(--yoa-primary); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
html.theme-yoa .btn-primary:hover,
html.theme-yoa .btn-primary:focus,
html.theme-yoa .btn-primary-sm:hover { background: var(--yoa-primary-hover); border-color: var(--yoa-primary-hover); color: #fff; }
html.theme-yoa .btn-primary-sm { border-radius: 8px; }
html.theme-yoa .btn-outline-primary {
  --bs-btn-color: var(--yoa-primary); --bs-btn-border-color: var(--yoa-primary);
  --bs-btn-hover-color: var(--yoa-primary-deep); --bs-btn-hover-bg: var(--yoa-primary-tint); --bs-btn-hover-border-color: var(--yoa-primary);
  --bs-btn-active-color: var(--yoa-primary-deep); --bs-btn-active-bg: var(--yoa-primary-tint); --bs-btn-active-border-color: var(--yoa-primary);
  color: var(--yoa-primary); border-color: var(--yoa-primary); background: var(--yoa-surface); font-weight: 600;
}
html.theme-yoa .btn-outline-primary:hover { background: var(--yoa-primary-tint); border-color: var(--yoa-primary); color: var(--yoa-primary-deep); }
/* Secondary actions: neutral outline */
html.theme-yoa :is(.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-ghost) {
  --bs-btn-color: var(--yoa-text-secondary); --bs-btn-bg: var(--yoa-surface); --bs-btn-border-color: var(--yoa-border-strong);
  --bs-btn-hover-color: var(--yoa-text); --bs-btn-hover-bg: var(--yoa-surface-muted); --bs-btn-hover-border-color: var(--yoa-border-strong);
  --bs-btn-active-color: var(--yoa-text); --bs-btn-active-bg: #ECEEF1; --bs-btn-active-border-color: var(--yoa-border-strong);
  --bs-btn-disabled-color: var(--yoa-text-subtle); --bs-btn-disabled-bg: var(--yoa-surface); --bs-btn-disabled-border-color: var(--yoa-border);
}
html.theme-yoa .btn-ghost { background: var(--yoa-surface); color: var(--yoa-text-secondary); border-color: var(--yoa-border-strong); border-radius: 8px; }
html.theme-yoa .btn-ghost:hover { background: var(--yoa-surface-muted); color: var(--yoa-text); }
html.theme-yoa .btn-link { --bs-btn-color: var(--yoa-primary); --bs-btn-hover-color: var(--yoa-primary-hover); }
/* Good outcomes (approve, mark paid): a green that keeps white text at AA */
html.theme-yoa .btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--yoa-success-text); --bs-btn-border-color: var(--yoa-success-text);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #166534; --bs-btn-active-border-color: #166534;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--yoa-success-text); --bs-btn-disabled-border-color: var(--yoa-success-text);
}
html.theme-yoa .btn-outline-success {
  --bs-btn-color: var(--yoa-success-text); --bs-btn-border-color: var(--yoa-success-text);
  --bs-btn-hover-color: var(--yoa-success-text); --bs-btn-hover-bg: var(--yoa-success-tint); --bs-btn-hover-border-color: var(--yoa-success-text);
  --bs-btn-active-color: var(--yoa-success-text); --bs-btn-active-bg: var(--yoa-success-tint); --bs-btn-active-border-color: var(--yoa-success-text);
}
html.theme-yoa .btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--yoa-danger); --bs-btn-border-color: var(--yoa-danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--yoa-danger-text); --bs-btn-hover-border-color: var(--yoa-danger-text);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--yoa-danger-text); --bs-btn-active-border-color: var(--yoa-danger-text);
}
html.theme-yoa .btn-outline-danger {
  --bs-btn-color: var(--yoa-danger-text); --bs-btn-border-color: #FCA5A5;
  --bs-btn-hover-color: var(--yoa-danger-text); --bs-btn-hover-bg: var(--yoa-danger-tint); --bs-btn-hover-border-color: var(--yoa-danger);
  --bs-btn-active-color: var(--yoa-danger-text); --bs-btn-active-bg: var(--yoa-danger-tint); --bs-btn-active-border-color: var(--yoa-danger);
}
html.theme-yoa .btn-warning {
  --bs-btn-color: #fff; --bs-btn-bg: var(--yoa-warn-text); --bs-btn-border-color: var(--yoa-warn-text);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #92400E; --bs-btn-hover-border-color: #92400E;
}
html.theme-yoa .btn-outline-warning {
  --bs-btn-color: var(--yoa-warn-text); --bs-btn-border-color: #FCD34D;
  --bs-btn-hover-color: var(--yoa-warn-text); --bs-btn-hover-bg: var(--yoa-warn-tint); --bs-btn-hover-border-color: var(--yoa-warn);
}
html.theme-yoa .btn-info,
html.theme-yoa .btn-outline-info {
  --bs-btn-color: var(--yoa-info-text); --bs-btn-bg: var(--yoa-surface); --bs-btn-border-color: #93C5FD;
  --bs-btn-hover-color: var(--yoa-info-text); --bs-btn-hover-bg: var(--yoa-info-tint); --bs-btn-hover-border-color: var(--yoa-info);
}
html.theme-yoa .btn-group > .btn { border-radius: 0; }
html.theme-yoa .btn-group > .btn:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
html.theme-yoa .btn-group > .btn:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
html.theme-yoa .btn-group-sm > .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
html.theme-yoa .btn-group-sm > .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* ── Tables: 11px uppercase header, 13px body, right-aligned money ───── */
html.theme-yoa .table {
  --bs-table-color: var(--yoa-text-secondary);
  --bs-table-border-color: var(--yoa-border);
  --bs-table-hover-bg: rgba(28, 109, 0, 0.04);
  --bs-table-hover-color: var(--yoa-text);
  --bs-table-striped-bg: rgba(16, 24, 40, 0.02);
  font-size: var(--fs-body);
}
/* Headers are never a solid colour (no green, no black): YoA 05 "Tables" */
html.theme-yoa .table > thead > tr > th,
html.theme-yoa .table-clean thead th {
  --bs-table-bg: var(--yoa-surface-muted);
  --bs-table-color: var(--yoa-text-muted);
  --bs-table-bg-state: var(--yoa-surface-muted);
  --bs-table-color-state: var(--yoa-text-muted);
  background: var(--yoa-surface-muted);
  color: var(--yoa-text-muted);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--yoa-border);
  padding-top: 9px; padding-bottom: 9px;
  white-space: nowrap;
}
html.theme-yoa .table > tbody > tr > td { padding-top: 9px; padding-bottom: 9px; }
html.theme-yoa .table-sm > tbody > tr > td { padding-top: 6px; padding-bottom: 6px; }
html.theme-yoa .table > tfoot > tr > :is(td, th) { font-weight: 700; color: var(--yoa-text); background: var(--yoa-surface-muted); }
html.theme-yoa .table-clean tbody tr:hover { background: rgba(28, 109, 0, 0.04); }
html.theme-yoa :is(td, th).text-end { white-space: nowrap; }
/* Bootstrap's .table-dark (9 forms) keeps its own #4d5154 border colour under the muted header */
html.theme-yoa .table > thead.table-dark { --bs-table-border-color: var(--yoa-border); }

/* ── Status badges: rounded, uppercase, always with a text label ────── */
html.theme-yoa :is(.badge-status, .pill) {
  border-radius: 999px; font-size: var(--fs-badge); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5;
  padding: 2px 8px;
}
html.theme-yoa .badge { border-radius: 999px; font-weight: 700; letter-spacing: 0.02em; }
html.theme-yoa .badge:is(.bg-success, .bg-warning, .bg-danger, .bg-secondary, .bg-primary, .bg-info) {
  font-size: var(--fs-badge); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Tinted pairs, not white on a mid fill (white on #16a34a is 3.3:1) */
html.theme-yoa .badge.bg-success   { background: var(--yoa-success-tint) !important; color: var(--yoa-success-text) !important; }
html.theme-yoa .badge.bg-warning   { background: var(--yoa-warn-tint) !important;    color: var(--yoa-warn-text) !important; }
html.theme-yoa .badge.bg-danger    { background: var(--yoa-danger-tint) !important;  color: var(--yoa-danger-text) !important; }
html.theme-yoa .badge.bg-info      { background: var(--yoa-info-tint) !important;    color: var(--yoa-info-text) !important; }
html.theme-yoa .badge.bg-secondary { background: #F3F4F6 !important;                 color: #4B5563 !important; }
html.theme-yoa .badge.bg-primary   { background: var(--yoa-primary-tint) !important; color: var(--yoa-primary-deep) !important; }
html.theme-yoa .pill-amber { background: var(--yoa-warn-tint);    color: var(--yoa-warn-text); }
html.theme-yoa .pill-blue  { background: var(--yoa-info-tint);    color: var(--yoa-info-text); }
html.theme-yoa .pill-green { background: var(--yoa-success-tint); color: var(--yoa-success-text); }
html.theme-yoa .pill-red   { background: var(--yoa-danger-tint);  color: var(--yoa-danger-text); }
html.theme-yoa .pill-gray  { background: #F3F4F6;                 color: #4B5563; }

/* ── Small pieces ────────────────────────────────────────────────────── */
html.theme-yoa .nav-tabs { --bs-nav-tabs-border-color: var(--yoa-border); }
html.theme-yoa .nav-tabs .nav-link { color: var(--yoa-text-muted); font-weight: 600; }
html.theme-yoa .nav-tabs .nav-link.active { color: var(--yoa-primary-deep); border-bottom-color: var(--yoa-surface); }
html.theme-yoa .nav-pills .nav-link.active { background: var(--yoa-primary); }
html.theme-yoa .progress { background: #ECEEF1; border-radius: 999px; }
html.theme-yoa .page-link { color: var(--yoa-primary); }
html.theme-yoa .active > .page-link, html.theme-yoa .page-link.active { background: var(--yoa-primary); border-color: var(--yoa-primary); color: #fff; }
html.theme-yoa .bar > span.green,
html.theme-yoa .mini-bar > span.green,
html.theme-yoa .seg.green,
html.theme-yoa .dot.green { background: var(--yoa-success); }
html.theme-yoa .bar > span.amber,
html.theme-yoa .mini-bar > span.amber,
html.theme-yoa .seg.amber,
html.theme-yoa .dot.amber { background: var(--yoa-warn); }
html.theme-yoa .mini-bar > span.red,
html.theme-yoa .seg.red,
html.theme-yoa .dot.red { background: var(--yoa-danger); }
html.theme-yoa .seg.blue,
html.theme-yoa .dot.blue { background: var(--yoa-info); }
html.theme-yoa .line.warn :is(.line-pct, .line-val) { color: var(--yoa-warn-text); }
html.theme-yoa .formkeep-banner { background: var(--yoa-warn-tint); border-color: #FDE68A; color: #78350F; border-radius: 12px; }
html.theme-yoa .formkeep-banner :is(i, a) { color: var(--yoa-warn-text); }
html.theme-yoa .cmdk-box { border-radius: 16px; }
html.theme-yoa .cmdk-ref { color: var(--yoa-primary-deep); }
html.theme-yoa .settings-banner { border-radius: 16px; }
html.theme-yoa .settings-banner-connected { background: linear-gradient(135deg, #15803d, #166534); }
html.theme-yoa .settings-banner-disconnected { background: linear-gradient(135deg, #475569, #334155); }
html.theme-yoa .profile-dropdown { border-radius: 16px; border-color: var(--yoa-border); }
html.theme-yoa .profile-dd-header { background: linear-gradient(135deg, var(--yoa-primary-deep), var(--yoa-primary)); }
html.theme-yoa .profile-dd-item:hover { background: var(--yoa-primary-tint); color: var(--yoa-primary-deep); }
html.theme-yoa .si-mark { background: var(--yoa-primary); }
html.theme-yoa #chatFloatBtn,
html.theme-yoa #chatSendBtn { background: var(--yoa-primary) !important; }
html.theme-yoa #chatPanel { border-radius: 16px !important; }
html.theme-yoa #chatPanel > div:first-child { background: linear-gradient(135deg, var(--yoa-primary-deep), var(--yoa-primary)) !important; }

/* ── Finance module accent (style.css .btn/.text/.bg-finance, navy #0d47a1) ──
   YoA has no per-module colours: Submit / Approve on finance screens is the one
   solid primary, section headings take the section-label colour, figures are
   ink (green only means good), and the funder / role badge is a neutral tint. */
html.theme-yoa .btn-finance {
  --bs-btn-color: #fff; --bs-btn-bg: var(--yoa-primary); --bs-btn-border-color: var(--yoa-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--yoa-primary-hover); --bs-btn-hover-border-color: var(--yoa-primary-hover);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--yoa-primary-hover); --bs-btn-active-border-color: var(--yoa-primary-hover);
  background: var(--yoa-primary); border-color: var(--yoa-primary); color: #fff; font-weight: 600;
}
html.theme-yoa .btn-finance:hover { background: var(--yoa-primary-hover); border-color: var(--yoa-primary-hover); color: #fff; }
html.theme-yoa .text-finance { color: var(--yoa-primary-dark) !important; }
html.theme-yoa :is(.fs-4, .fs-5, .fs-6, td).text-finance { color: var(--yoa-text) !important; font-variant-numeric: tabular-nums; }
html.theme-yoa .bg-finance { background: var(--yoa-info-tint) !important; color: var(--yoa-info-text) !important; }

/* Sign-in: style.css carries the YoA tokens for both themes; nothing to override here. */

/* ── YoA shell (part 3): the Oganoflow prototype ─────────────────────────
   Matches the Oganoflow Prototype artifact (the owner's reference for this
   look): no rule under the top bar; the organisation's logo and name beside
   the product mark; a wide search in the middle; an Online chip and an
   avatar-only profile button on the right; a Create button heading the rail;
   solid red rail counts; a sub-menu with icons that, from 1200px, docks
   beside the rail and pushes the page (js/nav.js _navDocked); and the page
   on a white sheet with rounded top corners, a breadcrumb and a 24px title
   (js/nav.js navPaintPageHead). Home keeps its greeting, and its headline
   figures become gradient KPI tiles. */

html.theme-yoa {
  --yoa-sub-w: 200px;
  --yoa-primary-tint-strong: #D3E8C9;   /* active rail pill, avatar; primary text on it 5.0:1 */
  --yoa-primary-tint-mid:    #E3EDDF;   /* active sub-menu row; primary text on it 5.6:1 */
}

/* Top bar */
html.theme-yoa #topbar { border-bottom: 0; }
html.theme-yoa .topbar-brand { min-width: 0; }
html.theme-yoa #pageTitle { display: none; }
html.theme-yoa .topbar-org {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 240px; flex: 0 1 auto;
  margin-left: 6px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--yoa-border-strong); border-radius: 12px; background: var(--yoa-surface);
}
html.theme-yoa .topbar-org:empty { display: none; }
html.theme-yoa .topbar-org-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; flex: none; }
html.theme-yoa .topbar-org-mark {
  width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--yoa-primary); color: #fff; font-size: var(--fs-badge); font-weight: 900;
}
html.theme-yoa .topbar-org-name { font-size: 12.5px; font-weight: 700; color: var(--yoa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.theme-yoa .topbar-right { flex: 1 1 auto; justify-content: flex-end; gap: 8px; }
html.theme-yoa .topbar-search {
  flex: 0 1 520px; width: auto; height: 40px; margin: 0 auto; padding: 0 14px;
  border-radius: 20px; font-size: var(--fs-body);
}
html.theme-yoa .topbar-date { display: none !important; }
html.theme-yoa .topbar-live {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--yoa-warn-tint); color: var(--yoa-warn-text);
}
html.theme-yoa .topbar-live:has(.live-text.is-live) { background: var(--yoa-success-tint); color: var(--yoa-success-text); }
html.theme-yoa .topbar-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yoa-warn-text); flex: none; }   /* 3:1 on the amber tint */
html.theme-yoa .topbar-live .live-dot.is-live { background: var(--yoa-success); }
/* The chip says it, so the profile button is the avatar alone */
html.theme-yoa :is(.user-chip-text, .user-chip-caret, .avatar-wrap .presence) { display: none !important; }
html.theme-yoa .user-chip { padding: 3px; }
html.theme-yoa .topbar-avatar-btn { width: 34px; height: 34px; background-color: var(--yoa-primary-tint-strong); color: var(--yoa-primary); font-weight: 700; }

/* Rail: Create button, active section, counts */
html.theme-yoa .rail-create {
  flex: 0 0 auto; width: 100%; margin: 6px 0 10px; padding: 6px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; color: var(--yoa-text); cursor: pointer;
  font-size: 12px; font-weight: 500; line-height: 1.2;
}
html.theme-yoa .rail-create i {
  width: 56px; height: 32px; display: grid; place-items: center; border-radius: 16px;
  font-size: 24px; transition: background .12s;
}
html.theme-yoa .rail-create:hover i,
html.theme-yoa .rail-create[aria-expanded="true"] i { background: var(--yoa-hover); }
html.theme-yoa .rail-create:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; border-radius: 12px; }
html.theme-yoa #sidebar.is-wide .rail-create {
  height: 48px; margin: 6px 0 10px; padding: 0 14px; flex-direction: row; gap: 12px;
  border-radius: 999px; font-size: var(--fs-body);
}
html.theme-yoa #sidebar.is-wide .rail-create i { width: 24px; height: 24px; background: none; }
html.theme-yoa #sidebar.is-wide .rail-create:hover { background: var(--yoa-hover); }
html.theme-yoa .rail-bottom .rail-expand { margin: 8px 0 4px; font-size: 18px; }
html.theme-yoa #sidebar.is-wide .rail-bottom .rail-expand { margin-left: 14px; }
html.theme-yoa .rail-item.active { color: var(--yoa-primary); font-weight: 700; }
html.theme-yoa .rail-item.active i { background: var(--yoa-primary-tint-strong); color: var(--yoa-primary); }
html.theme-yoa #sidebar.is-wide .rail-item.active { background: var(--yoa-primary-tint-strong); }
html.theme-yoa .rail-badge { background: var(--yoa-danger); color: #fff; font-size: var(--fs-badge); font-weight: 700; }

/* Create menu (opens beside the rail) */
html.theme-yoa .nav-create-menu {
  position: fixed; z-index: 1060; min-width: 240px; padding: 6px;
  background: var(--yoa-surface); border: 1px solid var(--yoa-border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
}
html.theme-yoa .nav-create-label {
  padding: 8px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--yoa-text-muted);
}
html.theme-yoa .nav-create-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 10px; background: none; text-align: left;
  font-size: var(--fs-body); color: var(--yoa-text); cursor: pointer;
}
html.theme-yoa .nav-create-item i { font-size: 17px; color: var(--yoa-text-muted); }
html.theme-yoa .nav-create-item:hover,
html.theme-yoa .nav-create-item:focus-visible { background: var(--yoa-surface-muted); outline: 0; }
html.theme-yoa .nav-create-item:focus-visible { box-shadow: inset 0 0 0 2px var(--yoa-primary); }

/* Sub-menu: icons, uppercase title and group labels */
html.theme-yoa .panel-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--yoa-border); margin-bottom: 6px; }
html.theme-yoa .panel-title { font-size: var(--fs-label); letter-spacing: .08em; color: var(--yoa-text-muted); }
html.theme-yoa .panel-group + .panel-group { margin-top: 4px; }
html.theme-yoa .panel-heading { padding: 10px 16px 6px; font-size: var(--fs-badge); color: var(--yoa-text-muted); }
html.theme-yoa .panel-item { min-height: 36px; padding: 7px 16px; gap: 10px; }
html.theme-yoa .panel-item i { display: inline-block; font-size: 16px; color: var(--yoa-text-subtle); flex: none; }
html.theme-yoa .panel-item:hover i { color: var(--yoa-primary); }
html.theme-yoa .panel-item.active { background: var(--yoa-primary-tint-mid); color: var(--yoa-primary); font-weight: 700; }
html.theme-yoa .panel-item.active i,
html.theme-yoa .panel-item.action i { color: var(--yoa-primary); }
html.theme-yoa .panel-item.soon i { color: var(--yoa-text-subtle); }
html.theme-yoa .panel-count { background: var(--yoa-danger-tint); color: var(--yoa-danger-text); }
html.theme-yoa .panel-count.muted { background: var(--yoa-surface-muted); color: var(--yoa-text-secondary); }

/* From 1200px a docked sub-menu sits beside the rail and pushes the page */
@media (min-width: 1200px) {
  html.theme-yoa #sidebar.nav-sub-docked .nav-panel {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    box-shadow: none; transition: none;
  }
  html.theme-yoa #sidebar.nav-sub-docked ~ #mainContent { margin-left: calc(var(--yoa-rail-w) + var(--yoa-sub-w)); }
  html.theme-yoa #sidebar.is-wide.nav-sub-docked ~ #mainContent { margin-left: calc(var(--yoa-rail-w-wide) + var(--yoa-sub-w)); }
  /* Hovering another rail section fades its links into the docked sub-menu */
  html.theme-yoa #sidebar.nav-sub-docked.nav-sub-open .nav-panel > * { animation: yoa-sub-swap .15s ease; }
}
@keyframes yoa-sub-swap { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.theme-yoa #sidebar .nav-panel > * { animation: none !important; }
}

/* The page sheet: white, rounded at the top, on the muted background */
html.theme-yoa #mainContent { padding-right: 24px; }
html.theme-yoa #pageHead {
  background: var(--yoa-surface); border-radius: 24px 24px 0 0; padding: 24px 28px 0;
}
html.theme-yoa :is(#pageHead.is-empty, #pageHead:has(.page-head-title:empty)) { display: none; }
html.theme-yoa .page-area { background: var(--yoa-surface); padding: 20px 28px 64px; }
html.theme-yoa :is(#pageHead.is-empty, #pageHead:has(.page-head-title:empty)) + .page-area { border-radius: 24px 24px 0 0; padding-top: 24px; }
html.theme-yoa .page-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 11.5px; color: var(--yoa-text-muted);
}
html.theme-yoa .page-crumbs button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 4px; }
html.theme-yoa .page-crumbs button:hover { color: var(--yoa-primary); }
html.theme-yoa .page-crumbs button:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; }
html.theme-yoa .page-crumbs i { font-size: 10px; }
html.theme-yoa .page-head-title { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--yoa-text); }

/* Home: the greeting is the page head; the headline figures are KPI tiles */
html.theme-yoa .hero {
  display: grid; gap: 20px; padding: 0; margin-bottom: 20px; justify-content: stretch; align-items: stretch;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
html.theme-yoa .hero-avatar { display: none; }
html.theme-yoa .hero-eyebrow { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--yoa-text-muted); }
html.theme-yoa .hero-figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
  border: 0; padding: 0; margin: 0;
}
html.theme-yoa .hero-fig {
  flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
  min-width: 0; min-height: 96px; padding: 16px 18px; border: 0; border-radius: 16px;
  color: #fff; background: var(--yoa-kpi-green); box-shadow: var(--yoa-shadow-card);
}
html.theme-yoa .hero-fig:nth-child(2) { background: var(--yoa-kpi-blue); }
html.theme-yoa .hero-fig:nth-child(3) { background: var(--yoa-kpi-amber); }
html.theme-yoa .hero-fig:nth-child(4) { background: var(--yoa-kpi-slate); }
html.theme-yoa .hero-fig:hover { color: #fff; filter: brightness(.94); }
html.theme-yoa .hero-fig:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; }
html.theme-yoa .hero-fig.static:hover { filter: none; }
html.theme-yoa .hero-fig-val { font-size: var(--fs-title); font-weight: 900; letter-spacing: -0.01em; color: #fff; }
html.theme-yoa .hero-fig-lbl { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; }

/* Filter and quick-action chips */
html.theme-yoa .chip { border-radius: 10px; }

/* ── Prototype match, part 4: filter chips, page action, bell ─────────────
   Status filters and segmented choices are the prototype's neutral chips: the
   chosen one (aria-pressed, or the active pill) is the primary tint with a
   primary border, and the count is the number alone in small muted text.
   Colour is kept for status badges; a filter never carries it.
   A list page's main action sits at the right of its title (js/nav.js
   NAV_HEAD_ACTIONS), and the page's own copy of that button (.yoa-head-dup)
   is hidden while the head shows it. The bell counts what waits for the
   user's decision. The Microsoft 365 chip at the foot of the sub-menu is not
   in the prototype and only ever reads "Connected", so it is left out; the
   connection's state stays in Settings › Microsoft 365. */
html.theme-yoa .yoa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.theme-yoa .yoa-chips > .btn,
html.theme-yoa .nav-pills .nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin: 0;
  border: 1px solid var(--yoa-border-strong); border-radius: 10px !important;   /* over .btn-group's joined corners */
  background: var(--yoa-surface); color: var(--yoa-text-secondary);
  font-size: 12.5px; font-weight: 500; line-height: 1; box-shadow: none;
}
html.theme-yoa .yoa-chips > .btn:hover,
html.theme-yoa .nav-pills .nav-link:hover { background: var(--yoa-surface-muted); border-color: var(--yoa-border-strong); color: var(--yoa-text); }
html.theme-yoa .yoa-chips > .btn[aria-pressed="true"],
html.theme-yoa .nav-pills .nav-link.active {
  background: var(--yoa-primary-tint); border-color: var(--yoa-primary); color: var(--yoa-primary); font-weight: 700;
}
html.theme-yoa .yoa-chips > .btn:focus-visible,
html.theme-yoa .nav-pills .nav-link:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; box-shadow: none; }
html.theme-yoa .chip-n { font-size: 11px; font-weight: 500; color: var(--yoa-text-muted); }
html.theme-yoa .chip-n::before,
html.theme-yoa .chip-n::after { content: none; }
html.theme-yoa .yoa-chips > .btn[aria-pressed="true"] .chip-n { color: var(--yoa-primary); }

html.theme-yoa #pageHead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
html.theme-yoa :is(.page-crumbs, .page-head-title) { grid-column: 1; }
html.theme-yoa .page-head-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
html.theme-yoa .page-head-actions:empty { display: none; }
html.theme-yoa .page-head-action { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 12px; font-size: var(--fs-body); font-weight: 700; white-space: nowrap; }
html.theme-yoa #pageHead.has-action ~ #pageContent .yoa-head-dup { display: none !important; }

html.theme-yoa .topbar-bell {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 20px;
  background: none; color: var(--yoa-text-secondary); font-size: 19px; cursor: pointer;
}
html.theme-yoa .topbar-bell:hover { background: var(--yoa-surface-muted); color: var(--yoa-text); }
html.theme-yoa .topbar-bell:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: 2px; }
html.theme-yoa .topbar-bell-count {
  position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--yoa-danger); color: #fff;
  font-size: var(--fs-badge); font-weight: 700; line-height: 16px; text-align: center;
}

html.theme-yoa .panel-foot { display: none; }
/* Touch screens keep a 40px target; a mouse gets the prototype's sizes */
@media (pointer: coarse) {
  html.theme-yoa :is(.yoa-chips > .btn, .nav-pills .nav-link, .page-head-action, .topbar-bell) { min-height: 40px; }
}

/* Phones and small tablets: the sheet runs edge to edge */
@media (max-width: 991.98px) {
  html.theme-yoa #mainContent { padding-right: 0; }
  html.theme-yoa #pageHead { border-radius: 0; padding: 18px 16px 0; }
  html.theme-yoa .page-area { padding: 16px 16px 80px; }
  html.theme-yoa :is(#pageHead.is-empty, #pageHead:has(.page-head-title:empty)) + .page-area { border-radius: 0; padding-top: 18px; }
  html.theme-yoa .topbar-org { max-width: 160px; margin-left: 0; }
  html.theme-yoa .topbar-search { flex: 0 1 40px; margin: 0; }
  html.theme-yoa .hero-figs { gap: 12px; }
  html.theme-yoa .hero-fig { min-height: 0; padding: 14px 16px; }
}
/* Narrow screens keep the status as the dot alone; the words stay for screen readers */
@media (max-width: 1099.98px) {
  html.theme-yoa .topbar-live { padding: 6px; }
  html.theme-yoa .topbar-live .live-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  html.theme-yoa .topbar-search kbd { display: none; }
}
@media (max-width: 575.98px) {
  html.theme-yoa .topbar-org-name { max-width: 96px; }
  html.theme-yoa #pageHead { grid-template-columns: minmax(0, 1fr); }
  html.theme-yoa .page-head-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 12px; }
}
@media print {
  html.theme-yoa #pageHead { display: none; }
  html.theme-yoa #mainContent { padding-right: 0; }
  html.theme-yoa .page-area { padding: 0; }
}

/* Collapsible sub-menu groups and their hover flyout (YoAccountant's sidebar).
   Only sections with several named groups use them; js/nav.js adds the classes. */
html.theme-yoa .panel-all {
  display: block; width: 100%; text-align: right; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-badge); font-weight: 600; color: var(--yoa-text-muted);
  padding: 2px 16px 6px;
}
html.theme-yoa .panel-all:hover { color: var(--yoa-primary); }
html.theme-yoa .panel-all:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; }
html.theme-yoa .panel-group.is-collapsible { margin: 0; padding: 0; }
html.theme-yoa .panel-group.is-collapsible + .panel-group { margin-top: 0; padding-top: 0; }
html.theme-yoa .panel-group-label {
  width: 100%; min-height: 36px; display: flex; align-items: center; gap: 6px;
  padding: 9px 10px 7px 16px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--fs-badge); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--yoa-text-muted);
}
html.theme-yoa .panel-group-label:hover,
html.theme-yoa .panel-group.is-peeking > .panel-group-label { background: var(--yoa-surface-muted); color: var(--yoa-text); }
html.theme-yoa .panel-group-label:focus-visible { outline: 2px solid var(--yoa-primary); outline-offset: -2px; }
html.theme-yoa .panel-group-label .pg-text { flex: 1; min-width: 0; line-height: 1.25; }
html.theme-yoa .panel-group-label .pg-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .01em; line-height: 1;
  background: var(--yoa-surface-muted); color: var(--yoa-text-muted);
}
html.theme-yoa .panel-group.is-open > .panel-group-label .pg-count { visibility: hidden; }
html.theme-yoa .panel-group-label .pg-chev { font-size: 12px; color: var(--yoa-text-subtle); transition: transform .18s ease; }
html.theme-yoa .panel-group.is-open > .panel-group-label .pg-chev { transform: rotate(90deg); }
html.theme-yoa .panel-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; }
html.theme-yoa .panel-group-body-inner { min-height: 0; overflow: hidden; }
html.theme-yoa .panel-group.is-open > .panel-group-body { grid-template-rows: 1fr; }
html.theme-yoa .panel-group:not(.is-open) > .panel-group-body .panel-item { visibility: hidden; }
html.theme-yoa .nav-flyout {
  position: fixed; z-index: 1060; width: 220px; max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--yoa-surface); border: 1px solid var(--yoa-border); border-radius: 10px; padding: 6px 0;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}
html.theme-yoa .nav-flyout[hidden] { display: none; }
html.theme-yoa .nav-flyout::before { content: ''; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }
html.theme-yoa .nav-flyout-title {
  font-size: var(--fs-badge); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yoa-text-muted); padding: 6px 14px; border-bottom: 1px solid var(--yoa-border); margin-bottom: 4px;
}
html.theme-yoa .nav-flyout .panel-item { display: flex; align-items: center; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  html.theme-yoa .panel-group-body, html.theme-yoa .panel-group-label .pg-chev { transition: none; }
}
/* Phone drawer and touch screens: group headings and Expand all are full-size tap targets. */
@media (max-width: 991.98px), (hover: none) {
  html.theme-yoa .panel-group-label { min-height: 44px; }
  html.theme-yoa .panel-all { min-height: 40px; }
}
/* Settings status pills in the YoA palette. */
html.theme-yoa .settings-status { background: var(--yoa-surface-muted); color: var(--yoa-text-secondary); }
html.theme-yoa .settings-status.is-ok { background: var(--yoa-success-tint); color: var(--yoa-success-text); }
html.theme-yoa .settings-status.is-warn { background: var(--yoa-warn-tint); color: var(--yoa-warn-text); }