/* BOS UI kit — one house style for the BISC portal, the Parts Oracle and BOS IQ.
   Source of truth: the new BOS website (Productie New Bos Website/src/css/site.css).
   THIS FOLDER IS THE ONLY PLACE TO CHANGE THE STYLE. Change it here, then run sync.py:
   it copies the kit into every app (portal static/bos/, Oracle static/bos/, BOS IQ app/bos-tokens.css).
   Order: fonts, tokens, base, buttons, topbar, tiles, tabs, panels, forms, tables, modal/toast,
   chips, dark bands, glass, KPI, footer, gauge, motion. Every class starts with "bos-" except
   .btn/.eyebrow/.lead (same names as on the website) so it never collides with app CSS. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext-wght-normal.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 (exactly as the website) */
:root {
  --ink: #1d1d1f; --text: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --hair: rgba(0, 0, 0, .1);
  --bg: #fff; --soft: #f5f5f7; --soft-2: #e8e8ed;
  --brand: #b6be1a; --brand-hi: #d3dc2e; --brand-text: #6f7600; --brand-ink: #141600; --brand-tint: #f4f6d4;
  --black: #000; --dark: #0a0a0b; --dark-2: #161617; --on-dark: #f5f5f7; --on-dark-muted: #a1a1a6; --line-dark: rgba(255, 255, 255, .16);
  --r: 12px; --r-lg: 28px; --pill: 980px;
  --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 24px 60px -24px rgba(0, 0, 0, .28);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* functional status colours (only for status, never decoration) */
  --danger: #b4453a; --danger-tint: #f6e1dd; --danger-ink: #6e1f17;
  --warn: #e8a13a; --warn-tint: #fbf0dc; --warn-ink: #6b4300;
  --ok: var(--brand); --ok-tint: var(--brand-tint); --ok-ink: var(--brand-ink);
  /* mono: only article and serial numbers */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --glow: 0 10px 30px -10px rgba(182, 190, 26, .7);
  --header: 60px;
}

/* ------------------------------------------------------------------ base */
.bos-base, body.bos { margin: 0; font: 400 1rem/1.55 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.bos :is(h1, h2, h3, h4), .bos-h { color: var(--ink); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.bos :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.eyebrow { font: 600 .95rem/1.2 var(--font); letter-spacing: -.005em; color: var(--brand-text); margin: 0 0 .9rem; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; letter-spacing: -.012em; color: var(--muted); }
.bos-muted { color: var(--muted); }
.bos-num, .num { font-variant-numeric: tabular-nums; }
.bos-mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.bos-icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ buttons (pill, chevron that moves on hover) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1.4rem; min-height: 44px; border-radius: var(--pill); background: var(--brand); color: var(--brand-ink); font: 600 .97rem/1.15 var(--font); letter-spacing: -.01em; text-decoration: none; border: 1.5px solid var(--brand); cursor: pointer; white-space: nowrap; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .25s var(--ease); flex: none; }
.btn:hover { background: var(--brand-hi); border-color: var(--brand-hi); transform: translateY(-1px); box-shadow: var(--glow); }
.btn:hover::after { transform: translateX(3px) rotate(45deg); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.no-chev::after, .btn-plain::after { display: none; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; border-color: #000; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
.btn-ghost { background: transparent; border-color: rgba(0, 0, 0, .25); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #9c3a30; border-color: #9c3a30; box-shadow: 0 10px 30px -12px rgba(180, 69, 58, .6); }
.btn-sm { padding: .5rem 1rem; min-height: 36px; font-size: .86rem; }
.bos-dark .btn-ghost, .bos-glass .btn-ghost { border-color: rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); }
.bos-dark .btn-ghost:hover, .bos-glass .btn-ghost:hover { background: #fff; border-color: #fff; color: #000; }
.bos-dark .btn-dark { background: #fff; border-color: #fff; color: #000; }
.bos-link { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.bos-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ------------------------------------------------------------------ topbar (sticky glass, hairline only after scrolling) */
.bos-topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.bos-topbar.is-scrolled, .bos-scrolled .bos-topbar { border-bottom-color: var(--hair); background: rgba(255, 255, 255, .92); }
.bos-iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--pill); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; transition: background .2s var(--ease), transform .2s var(--ease); }
.bos-iconbtn:hover { background: rgba(0, 0, 0, .06); }
.bos-iconbtn:active { transform: scale(.94); }
.bos-iconbtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bos-userpill { display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem 0 .4rem; border-radius: var(--pill); background: transparent; border: 0; color: var(--ink); font: 500 .9rem/1 var(--font); cursor: pointer; transition: background .2s var(--ease); }
.bos-userpill:hover { background: rgba(0, 0, 0, .06); }
.bos-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink); color: #fff; font: 600 .78rem/1 var(--font); letter-spacing: 0; }
.bos-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--danger); color: #fff; font: 700 .68rem/18px var(--font); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff; }
.bos-badge.inline { position: static; box-shadow: none; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------------ tiles (website [data-block=cards] + [data-variant=links|services]) */
.bos-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(.9rem, 1.5vw, 1.25rem); align-items: stretch; }
.bos-tiles[data-cols="2"] { --cols: 2; } .bos-tiles[data-cols="4"] { --cols: 4; }
@media (max-width: 1100px) { .bos-tiles[data-cols="4"] { --cols: 3; } }
@media (max-width: 860px) { .bos-tiles, .bos-tiles[data-cols="4"] { --cols: 2; } }
@media (max-width: 560px) { .bos-tiles, .bos-tiles[data-cols="4"] { --cols: 1; } }
.bos-tile { position: relative; display: flex; flex-direction: column; isolation: isolate; border-radius: var(--r-lg); background: var(--soft); color: var(--ink); padding: clamp(1.5rem, 2.4vw, 2.25rem); overflow: hidden; text-decoration: none; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s; }
.bos-soft .bos-tile, .bos-tile.on-soft { background: #fff; }
.bos-tile::before { content: ""; position: absolute; z-index: -1; right: -40%; top: -70%; width: 110%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(182, 190, 26, .5), rgba(182, 190, 26, 0)); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.bos-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.bos-tile:hover::before { opacity: 1; }
.bos-tile:active { transform: translateY(-3px) scale(.99); }
.bos-tile-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); margin-bottom: 1.4rem; flex: none; }
.bos-tile-icon svg, .bos-tile-icon img { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bos-tile h3, .bos-tile-title { margin: 0 0 .45rem; font: 650 clamp(1.25rem, 1.7vw, 1.5rem)/1.15 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.bos-tile p, .bos-tile-text { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.5; }
.bos-tile-link { margin-top: auto; padding-top: 1.1rem; font-weight: 600; color: var(--brand-text); display: inline-flex; align-items: center; gap: .4rem; letter-spacing: -.01em; }
.bos-tile-link::after { content: ""; width: .42em; height: .42em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .3s var(--ease-out); }
.bos-tile:hover .bos-tile-link::after { transform: translateX(5px) rotate(45deg); }
.bos-tile > .bos-badge, .bos-tile-badge { position: absolute; top: 1.25rem; right: 1.25rem; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--pill); background: var(--danger); color: #fff; font: 700 .78rem/24px var(--font); text-align: center; box-shadow: none; }

/* ------------------------------------------------------------------ tabs (website .showcase-tabs) */
.bos-tabs { display: inline-flex; max-width: 100%; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .3rem; background: rgba(0, 0, 0, .06); border-radius: var(--pill); }
.bos-tabs::-webkit-scrollbar { display: none; }
.bos-tabs > :is(button, a) { flex: 0 0 auto; border: 0; background: none; padding: .62rem 1.05rem; border-radius: var(--pill); font: 600 .92rem/1 var(--font); letter-spacing: -.01em; color: var(--muted); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease); display: inline-flex; align-items: center; gap: .45rem; }
.bos-tabs > :is(button, a):hover { color: var(--ink); }
.bos-tabs > :is(button, a):is(.is-active, .active, [aria-selected=true], [aria-current=page]) { background: var(--ink); color: #fff; }   /* also on hover: the active tab stays readable */
.bos-tabs .bos-badge { position: static; box-shadow: none; }
.bos-dark .bos-tabs { background: rgba(255, 255, 255, .1); }
.bos-dark .bos-tabs > :is(button, a) { color: var(--on-dark-muted); }
.bos-dark .bos-tabs > :is(button, a):is(.is-active, .active, [aria-selected=true]) { background: #fff; color: #000; }

/* ------------------------------------------------------------------ panels */
.bos-panel { background: #fff; border-radius: var(--r-lg); padding: clamp(1.25rem, 2.6vw, 2.25rem); border: 1px solid var(--hair); }
.bos-panel.raised { border-color: transparent; box-shadow: var(--shadow); }
.bos-panel.soft { background: var(--soft); border-color: transparent; }
.bos-panel > :first-child { margin-top: 0; } .bos-panel > :last-child { margin-bottom: 0; }
.bos-panel-title { margin: 0 0 1rem; font: 650 1.25rem/1.2 var(--font); letter-spacing: -.025em; color: var(--ink); }

/* ------------------------------------------------------------------ forms */
.bos-label, .bos-form label { display: block; font: 600 .9rem/1.3 var(--font); color: var(--ink); margin: 0 0 .4rem; letter-spacing: -.005em; }
.bos-input, .bos-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea) { width: 100%; min-height: 48px; padding: .7rem .95rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font: 400 1rem/1.35 var(--font); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); box-sizing: border-box; }
.bos-form textarea, textarea.bos-input { min-height: 96px; resize: vertical; }
.bos-input:hover, .bos-form :is(input, select, textarea):hover { border-color: #a1a1a6; }
.bos-input:focus, .bos-form :is(input, select, textarea):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(182, 190, 26, .35); }
.bos-input::placeholder, .bos-form ::placeholder { color: #a1a1a6; }
.bos-form :is(input[type=checkbox], input[type=radio]) { accent-color: var(--ink); width: 18px; height: 18px; }
.bos-search { min-height: 56px; border-radius: var(--pill); padding: 0 1.4rem; font-size: 1.05rem; }

/* ------------------------------------------------------------------ tables (website .table-wrap) */
.bos-table-wrap { overflow-x: auto; border-radius: 20px; background: var(--soft); }
.bos-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.bos-table :is(th, td) { text-align: left; padding: .9rem 1.25rem; border-bottom: 1px solid var(--soft-2); vertical-align: top; }
.bos-table th { font-weight: 650; color: var(--ink); white-space: nowrap; }
.bos-table tr:last-child td { border-bottom: 0; }
.bos-table tbody tr { transition: background .2s; }
.bos-table tbody tr:hover { background: rgba(0, 0, 0, .025); }
.bos-table .r { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ modal + toast */
.bos-modal-bg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: bos-fadein .25s var(--ease) both; }
.bos-modal-bg[hidden] { display: none !important; }
.bos-modal { width: min(640px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; background: #fff; border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.25rem); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .5); animation: bos-pop .35s var(--ease-out) both; }
.bos-toast { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 300; translate: -50% 0; max-width: calc(100vw - 2rem); padding: .8rem 1.3rem; border-radius: var(--pill); background: var(--ink); color: #fff; font: 500 .94rem/1.3 var(--font); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); animation: bos-rise-sm .4s var(--ease-out) both; }
.bos-toast.is-ok { background: var(--brand); color: var(--brand-ink); }
.bos-toast.is-danger { background: var(--danger); }

/* ------------------------------------------------------------------ chips / status pills */
.bos-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--pill); background: var(--soft); color: var(--ink); font: 600 .82rem/1.2 var(--font); letter-spacing: -.005em; border: 0; white-space: nowrap; }
button.bos-chip { cursor: pointer; transition: background .2s, color .2s; }
button.bos-chip:hover { background: var(--soft-2); }
.bos-chip.is-active { background: var(--ink); color: #fff; }
.bos-chip.is-ok { background: var(--brand-tint); color: var(--brand-ink); }
.bos-chip.is-warn { background: var(--warn-tint); color: var(--warn-ink); }
.bos-chip.is-danger { background: var(--danger-tint); color: var(--danger-ink); }
.bos-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #a1a1a6; flex: none; }
.bos-dot.is-ok { background: var(--brand); } .bos-dot.is-warn { background: var(--warn); } .bos-dot.is-danger { background: var(--danger); }

/* ------------------------------------------------------------------ dark bands (home intro, film, login, empty states) */
.bos-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--on-dark); }
.bos-dark::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -35%; width: min(1100px, 130vw); aspect-ratio: 1; translate: -50% 0; background: radial-gradient(closest-side, rgba(182, 190, 26, .34), rgba(182, 190, 26, 0) 70%); animation: bos-glow 8s ease-in-out infinite alternate; pointer-events: none; }
.bos-dark.glow-bottom::before { top: auto; bottom: -75%; background: radial-gradient(closest-side, rgba(182, 190, 26, .5), rgba(182, 190, 26, 0) 70%); }
.bos-dark :is(h1, h2, h3, h4) { color: #fff; }
.bos-dark .eyebrow, .bos-dark p.eyebrow { color: var(--brand-hi); }   /* p.eyebrow: beats the paragraph colour below */
.bos-dark :is(p, .lead) { color: rgba(255, 255, 255, .78); }
.bos-dark .bos-muted { color: var(--on-dark-muted); }
.bos-display { font: 700 clamp(2.4rem, 6vw, 5rem)/1.02 var(--font); letter-spacing: -.045em; text-wrap: balance; margin: 0 0 .35em; }
.bos-h2 { font: 700 clamp(1.9rem, 3.6vw, 3rem)/1.06 var(--font); letter-spacing: -.04em; text-wrap: balance; margin: 0 0 .4em; }
.bos-empty { border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.bos-empty :is(h2, h3) { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.035em; margin: 0 0 .5rem; }
.bos-empty p { margin: 0 auto; max-width: 34rem; }

/* ------------------------------------------------------------------ glass card (login on black) */
.bos-glass { position: relative; border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.4rem); background: rgba(255, 255, 255, .06); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 120px -40px rgba(0, 0, 0, .8); color: var(--on-dark); }
.bos-glass .bos-label, .bos-glass label { color: #fff; }
.bos-glass .bos-input, .bos-glass :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { background: rgba(255, 255, 255, .92); border-color: transparent; }

/* ------------------------------------------------------------------ KPI / stats */
.bos-kpi { border-radius: var(--r-lg); background: var(--soft); padding: clamp(1.25rem, 2vw, 1.75rem); }
.bos-kpi-label { font: 500 .92rem/1.3 var(--font); color: var(--muted); margin: 0 0 .5rem; }
.bos-kpi-value { font: 700 clamp(1.9rem, 3.4vw, 2.75rem)/1.02 var(--font); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bos-stat { font: 700 clamp(2.6rem, 6vw, 5rem)/1 var(--font); letter-spacing: -.055em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #c9d132 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------------ footer */
.bos-footer { background: var(--soft); color: var(--muted); padding: 2rem clamp(1.25rem, 4vw, 2.75rem) 1.75rem; font-size: .84rem; line-height: 1.55; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.bos-footer a { color: #424245; text-decoration: none; } .bos-footer a:hover { color: var(--ink); text-decoration: underline; }
.bos-footer b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ gauge (speedometer: actual vs budget, GAP) */
.bos-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; min-width: 0; }
.bos-gauge-read { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%; min-width: 0; }
.bos-gauge-dial { position: relative; width: 100%; max-width: var(--gauge-size, 320px); }
.bos-gauge-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.bos-gauge .g-track { fill: none; stroke: var(--soft-2); stroke-linecap: round; }
.bos-gauge .g-value { fill: none; stroke-linecap: round; }
.bos-gauge .g-tick { stroke: #a1a1a6; stroke-width: 1.3; }
.bos-gauge .g-tick.major { stroke: var(--muted); stroke-width: 1.8; }
.bos-gauge .g-label { fill: var(--muted); font: 500 10.5px/1 var(--font); font-variant-numeric: tabular-nums; }
.bos-gauge .g-plan { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.bos-gauge .g-needle { fill: var(--ink); }
.bos-gauge .g-hub { fill: var(--ink); }
.bos-gauge .g-hub-in { fill: #fff; }
.bos-gauge-center { position: absolute; left: 0; right: 0; top: 66%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.bos-gauge-value { font: 700 clamp(1.7rem, 3.2vw, 2.6rem)/1 var(--font); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bos-gauge.small .bos-gauge-value { font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
/* small gauges render at ~160–240 px: larger scale labels (SVG units), a tighter sub-line */
.bos-gauge.small .g-label { font-size: 13.5px; }
.bos-gauge.small .bos-gauge-of { font-size: .74rem; margin-top: .2rem; }
.bos-gauge.small .bos-gauge-center { top: 68%; }
.bos-gauge-of { margin-top: .3rem; font: 500 .82rem/1.2 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.bos-gauge-title { font: 650 1.02rem/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.bos-gauge-chip { display: inline-flex; justify-content: center; text-align: center; max-width: 100%; align-items: center; gap: .35rem; padding: .38rem .85rem; border-radius: var(--pill); font: 600 .86rem/1.2 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.bos-gauge-chip.is-ok { background: var(--brand-tint); color: var(--brand-ink); }
.bos-gauge-chip.is-warn { background: var(--warn-tint); color: var(--warn-ink); }
.bos-gauge-chip.is-danger { background: var(--danger-tint); color: var(--danger-ink); }
.bos-gauge-chip.is-none { background: var(--soft); color: var(--muted); }
.bos-gauge-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bos-gauge-lines b { color: var(--ink); font-weight: 600; }
.bos-gauge.is-none .g-value, .bos-gauge.is-none .g-plan { display: none; }
.bos-gauge.is-none .g-needle, .bos-gauge.is-none .g-hub { fill: #a1a1a6; }
.bos-dark .bos-gauge .g-track { stroke: rgba(255, 255, 255, .12); }
.bos-dark .bos-gauge :is(.bos-gauge-value, .bos-gauge-title) { color: #fff; }
.bos-dark .bos-gauge .g-needle, .bos-dark .bos-gauge .g-hub, .bos-dark .bos-gauge .g-plan { fill: #fff; stroke: #fff; }
.bos-dark .bos-gauge .g-hub-in { fill: #000; }
.bos-dark .bos-gauge :is(.bos-gauge-of, .bos-gauge-lines) { color: var(--on-dark-muted); }
.bos-dark .bos-gauge .bos-gauge-lines b { color: #fff; }
.bos-dark .bos-gauge .g-label { fill: var(--on-dark-muted); }
.bos-dark .bos-gauge .g-tick.major { stroke: var(--on-dark-muted); }
.bos-dark .bos-gauge-chip.is-none { background: rgba(255, 255, 255, .1); color: var(--on-dark-muted); }

/* ------------------------------------------------------------------ motion */
@keyframes bos-glow { from { opacity: .65; scale: .92; } to { opacity: 1; scale: 1.08; } }
@keyframes bos-fadein { from { opacity: 0; } }
@keyframes bos-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes bos-rise { from { opacity: 0; transform: translateY(32px); filter: blur(6px); } }
@keyframes bos-rise-sm { from { opacity: 0; transform: translateY(16px); } }
@keyframes bos-view-in { from { opacity: 0; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  /* The rise uses `translate` (not `transform`), so a revealed tile still lifts with its own :hover transform. */
  .bos-js .rv { opacity: 0; translate: 0 32px; filter: blur(6px); transition: opacity .9s var(--ease-out), translate 1.1s var(--ease-out), filter .9s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }
  .bos-js .rv.in { opacity: 1; translate: none; filter: none; }
  .bos-view-in { animation: bos-view-in .2s var(--ease) both; }
}
/* Reduced motion (Windows: "animation effects" off): no movement, blur or zoom; direct changes only. */
@media (prefers-reduced-motion: reduce) {
  .bos-js .rv { opacity: 1 !important; translate: none !important; filter: none !important; }
  .bos-dark::before { animation: none; }
  .btn:hover, .btn:active, .bos-tile:hover, .bos-tile:active, .bos-iconbtn:active { transform: none; }
  .bos-modal, .bos-modal-bg, .bos-toast { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .bos-calm-all *, .bos-calm-all *::before, .bos-calm-all *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}