/*
 * SphereHub interface: the look of the Le Petit Poucet design (DM Sans and Outfit, soft cards, a calm blue ink),
 * with the colours taken from each nursery's own branding (--primary-* and --secondary-*).
 * Used by the nursery console and the Super Admin console. Mobile first where it matters: every rule below
 * 1024px keeps content inside the screen, and nothing here fixes a width that a phone cannot hold.
 */
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('/fonts/DMSans-400.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url('/fonts/DMSans-500.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url('/fonts/DMSans-600.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('/fonts/DMSans-700.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('/fonts/Outfit-400.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url('/fonts/Outfit-500.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('/fonts/Outfit-600.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url('/fonts/Outfit-700.ttf') format('truetype'); }

:root {
    /* Every colour below comes from the nursery's own branding: its primary colour (--primary-*) and secondary colour (--secondary-*).
       A nursery that sets only a primary colour gets a deeper shade of it as its second colour. Nothing here is a fixed brand colour. */
    --ui-brand: var(--primary-500);
    --ui-accent: var(--secondary-600, var(--primary-700));
    --ui-ink: color-mix(in oklab, var(--secondary-800, var(--primary-900)) 62%, #0a1622);
    --ui-muted: color-mix(in oklab, var(--ui-ink) 62%, white);
    --ui-section: color-mix(in oklab, var(--primary-700) 80%, #3a1c00);
    --ui-bg: color-mix(in oklab, var(--ui-accent) 4%, #f8fafc);
    --ui-surface: #fff;
    --ui-sidebar: color-mix(in oklab, var(--ui-accent) 2%, #fff);
    --ui-line: color-mix(in oklab, var(--ui-ink) 10%, white);
    --ui-brand-soft: color-mix(in oklab, var(--ui-brand) 14%, white);
    --ui-brand-hero: color-mix(in oklab, var(--ui-brand) 20%, white);
    --ui-accent-soft: color-mix(in oklab, var(--ui-accent) 9%, white);
    --ui-radius: 13px; --ui-shadow: 0 3px 12px color-mix(in oklab, var(--ui-ink) 5%, transparent);
    --ui-ease: cubic-bezier(.23, 1, .32, 1);
    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}
.dark {
    --ui-bg: color-mix(in oklab, var(--ui-accent) 8%, #0a121b); --ui-surface: color-mix(in oklab, var(--ui-accent) 8%, #101a25); --ui-sidebar: color-mix(in oklab, var(--ui-accent) 7%, #0d1620);
    --ui-ink: color-mix(in oklab, var(--secondary-100, var(--primary-100)) 80%, white); --ui-muted: color-mix(in oklab, var(--ui-ink) 62%, #0a1622); --ui-line: color-mix(in oklab, var(--ui-ink) 14%, #0a1622);
    --ui-brand-soft: color-mix(in oklab, var(--ui-brand) 18%, var(--ui-surface)); --ui-brand-hero: color-mix(in oklab, var(--ui-brand) 22%, var(--ui-surface));
    --ui-accent-soft: color-mix(in oklab, var(--ui-accent) 16%, var(--ui-surface)); --ui-section: color-mix(in oklab, var(--primary-300) 80%, white); --ui-shadow: none;
}

html, body, .fi-body, .fi-simple-layout, button, input, select, textarea { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; }
.fi-body { background: var(--ui-bg); color: var(--ui-ink); -webkit-font-smoothing: antialiased; }
.fi-header-heading, .fi-simple-header-heading, .fi-section-header-heading, .fi-wi-stats-overview-stat-value, h1, h2 { font-family: 'Outfit', 'DM Sans', sans-serif; }
.fi-header-heading { font-weight: 500; letter-spacing: -.02em; color: var(--ui-ink); }

/* ---- menu ---- */
.fi-sidebar { background: var(--ui-sidebar); border-inline-end: 1px solid var(--ui-line); }
.fi-sidebar-header-ctn, .fi-sidebar-header { background: var(--ui-sidebar); box-shadow: none; border-bottom: 0; }
.fi-sidebar-nav { padding-inline: 1rem; scrollbar-width: thin; scrollbar-color: var(--ui-line) transparent; }
.fi-sidebar-group-label { color: var(--ui-section); font-size: 12px; font-weight: 500; letter-spacing: .45px; text-transform: uppercase; opacity: 1; padding-inline: .875rem; }
.fi-sidebar-item-btn { border-radius: 8px; min-height: 36px; padding: 7px 12px; transition: background .16s ease, color .16s ease, transform .16s var(--ui-ease); }
.fi-sidebar-item-label { font-size: 14px; font-weight: 400; color: var(--ui-ink); white-space: normal; line-height: 1.4; }
.fi-sidebar-item-icon { color: var(--ui-ink); opacity: .85; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--ui-brand-soft); position: relative; font-weight: 500; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--ui-accent); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--ui-ink); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover { background: var(--ui-accent-soft); transform: translateX(2px); } }

/* ---- layout: the menu runs the full height with the logo on top, the top bar sits beside it (as in the design) ---- */
:root { --ui-sidebar-w: 15rem; --ui-topbar-h: 78px; }
.fi-topbar-ctn { background: var(--ui-surface); }
.fi-topbar { min-height: var(--ui-topbar-h); background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); box-shadow: none; --tw-ring-shadow: 0 0 #0000; gap: .75rem; padding-inline: 1.5rem; }
.fi-topbar-end { gap: .75rem; min-width: 0; }
.sh-brand { display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 4px 16px; flex-shrink: 0; }
.sh-brand img { display: block; max-width: 136px; max-height: 95px; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.sh-brand span { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; text-align: center; line-height: 1.2; }
.sh-brand { display: none; }
@media (min-width: 1024px) {
    .fi-topbar-ctn { position: sticky; top: 0; z-index: 30; }
    .fi-layout { margin-top: calc(var(--ui-topbar-h) * -1); }
    .fi-sidebar { top: 0 !important; height: 100vh !important; }
    .fi-main-ctn { padding-top: var(--ui-topbar-h); }
    body:has(.fi-main-ctn-sidebar-open) .fi-topbar-ctn { margin-inline-start: var(--ui-sidebar-w); }
    body:has(.fi-main-ctn-sidebar-open) .fi-topbar-start > a { display: none; }
    .sh-brand { display: flex; }
}
.fi-global-search-field .fi-input-wrp { border-radius: 10px; background: color-mix(in oklab, var(--ui-accent) 3%, white); --tw-ring-color: var(--ui-line); min-width: 0; }
.dark .fi-global-search-field .fi-input-wrp { background: var(--ui-bg); }
.fi-user-menu-trigger .fi-avatar, .fi-avatar { box-shadow: 0 0 0 2px var(--ui-surface); }
.sh-clock { display: none; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 9px; background: var(--ui-accent-soft); border: 1px solid color-mix(in oklab, var(--ui-accent) 22%, var(--ui-surface)); color: var(--ui-accent); white-space: nowrap; }
.sh-clock svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.sh-clock small { display: block; font-size: 12px; line-height: 1.3; letter-spacing: .2px; }
.sh-clock span { font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sh-clock strong { font-size: 14px; font-weight: 500; margin-left: .35rem; }
@media (min-width: 1100px) { .sh-clock { display: inline-flex; } }

/* ---- page ---- */
.fi-main { padding-block: 1.1rem; }
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-chart, .fi-fo-wizard, .fi-in-repeatable-item, .sh-notice { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); --tw-ring-shadow: 0 0 #0000; }
.fi-section-header-heading { font-weight: 500; letter-spacing: -.01em; color: var(--ui-ink); }
.fi-wi-stats-overview-stat-value { font-size: 1.6rem; font-weight: 400; letter-spacing: -.03em; color: var(--ui-ink); }
.fi-wi-stats-overview-stat-label, .fi-wi-stats-overview-stat-description { color: var(--ui-muted); }
.fi-ta-header-cell { color: var(--ui-muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: .04em; }
.fi-ta-row:hover { background: var(--ui-accent-soft); }
.fi-input-wrp, .fi-btn, .fi-badge, .fi-dropdown-panel { border-radius: 10px; }
.fi-input-wrp { background: var(--ui-surface); }
.fi-btn.fi-color-primary:not(.fi-outlined) { background: var(--ui-brand); color: var(--sh-btn-text, lch(from var(--ui-brand) calc((55 - l) * infinity) 0 0)); border: 1px solid color-mix(in oklab, var(--ui-brand) 85%, black); box-shadow: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .fi-btn.fi-color-primary:not(.fi-outlined):hover { background: color-mix(in oklab, var(--ui-brand) 88%, white); box-shadow: 0 5px 15px color-mix(in oklab, var(--ui-brand) 25%, transparent); } }
.fi-tabs { border-radius: var(--ui-radius); }

/* tables and wide forms scroll inside their card rather than pushing the page sideways */
.fi-ta-content, .fi-ta-content-ctn { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fi-main-ctn, .fi-main, .fi-page { min-width: 0; }
img, svg, video { max-width: 100%; }

/* ---- welcome banner ---- */
.sh-welcome { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 9.4rem; padding: 1.45rem 1.9rem; color: var(--ui-ink);
    background: linear-gradient(110deg, var(--ui-brand-hero), var(--ui-brand-soft) 72%, color-mix(in oklab, var(--ui-brand) 8%, var(--ui-surface))); border: 1px solid color-mix(in oklab, var(--ui-brand) 25%, var(--ui-surface)); border-radius: var(--ui-radius); box-shadow: none; }
.dark .sh-welcome { border-color: var(--ui-line); }
.sh-welcome-copy { position: relative; z-index: 2; min-width: 0; max-width: 44rem; }
.sh-welcome-date { font-size: 0.875rem; color: var(--ui-muted); opacity: 1; }
.sh-welcome-title { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.65rem); letter-spacing: -.03em; line-height: 1.2; margin: .15rem 0 .35rem; }
.sh-welcome-sub { color: var(--ui-muted); font-size: 0.875rem; line-height: 1.7; margin: 0 0 .9rem; opacity: 1; }
.sh-welcome-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sh-chip { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.4rem; padding: 0 1.05rem; border-radius: 8px; font-weight: 500; font-size: 0.875rem; color: lch(from var(--ui-brand) calc((55 - l) * infinity) 0 0); background: var(--ui-brand);
    border: 1px solid color-mix(in oklab, var(--ui-brand) 85%, black); backdrop-filter: none; transition: background .16s ease, box-shadow .16s ease, transform .16s var(--ui-ease); }
.sh-chip:hover { background: color-mix(in oklab, var(--ui-brand) 88%, white); transform: none; box-shadow: 0 5px 15px color-mix(in oklab, var(--ui-brand) 25%, transparent); }
.sh-chip.is-quiet { background: color-mix(in oklab, var(--ui-surface) 72%, transparent); color: var(--ui-ink); border-color: var(--ui-line); }
.sh-chip svg { width: 1rem; height: 1rem; }
.sh-motif { position: relative; flex-shrink: 0; width: 20rem; height: 6.6rem; margin-right: .4rem; pointer-events: none; }
.sh-motif path { fill: none; stroke: color-mix(in oklab, var(--ui-accent) 55%, white); stroke-width: 1; }
.sh-motif i { position: absolute; display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 1rem; background: color-mix(in oklab, var(--ui-surface) 94%, transparent); color: var(--ui-accent); box-shadow: 0 5px 14px color-mix(in oklab, var(--ui-brand) 14%, transparent); }
.sh-motif i svg { width: 1.8rem; height: 1.8rem; }
.sh-motif i:nth-of-type(1) { left: .4rem; top: .75rem; transform: rotate(-9deg); }
.sh-motif i:nth-of-type(2) { left: 7.8rem; top: 2.7rem; transform: rotate(3deg); }
.sh-motif i:nth-of-type(3) { right: 0; top: 1.4rem; transform: rotate(9deg); }
@media (max-width: 900px) { .sh-motif { display: none; } .sh-welcome { padding: 1.2rem 1.25rem; min-height: 0; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- figures ---- */
.fi-wi-stats-overview-stat-label-ctn > .fi-icon { box-sizing: content-box; width: 1.15rem; height: 1.15rem; padding: .45rem; border-radius: .6rem; background: var(--ui-accent-soft); color: var(--ui-accent); }
.fi-wi-stats-overview-stat { padding: 1.1rem 1.2rem; }
.fi-wi-stats-overview-stat-label { font-size: 0.875rem; }
.fi-wi-chart .fi-section-header-heading, .fi-wi-chart-heading { font-weight: 500; }

/* ---- small screens ---- */
@media (max-width: 1023px) {
    .fi-topbar { padding-inline: .75rem; min-height: 3.75rem; }
    .fi-main { padding-inline: .875rem; }
    .fi-header { flex-wrap: wrap; gap: .75rem; }
    .fi-header-actions-ctn { flex-wrap: wrap; }
    .fi-sidebar { box-shadow: 0 0 40px color-mix(in oklab, var(--ui-ink) 25%, transparent); }
}
@media (max-width: 640px) {
    .fi-global-search-field { min-width: 0; }
    .fi-header-heading { font-size: 1.4rem; }
    .fi-ta-header-toolbar, .fi-ta-header { flex-wrap: wrap; gap: .5rem; }
    .sh-welcome-actions .sh-chip { flex: 1 1 auto; justify-content: center; }
    .fi-modal-window { max-width: calc(100vw - 1.5rem); }
}

/* the dashboard opens with the welcome banner, so its own heading is dropped */
.fi-page:has(.sh-welcome) .fi-header { display: none; }
/* figures sit two to a row on phones instead of one tall card each */
@media (max-width: 1023px) { .fi-section-content.fi-grid:has(.fi-wi-stats-overview-stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem; } }
@media (max-width: 480px) {
    .fi-wi-stats-overview-stat { padding: .85rem .9rem; }
    .fi-wi-stats-overview-stat-value { font-size: 1.3rem; }
    .fi-wi-stats-overview-stat-label-ctn > .fi-icon { padding: .35rem; width: 1rem; height: 1rem; }
}

[x-cloak] { display: none !important; }

/* language switch */
.sh-lang { display: inline-flex; align-items: center; gap: .3rem; color: var(--ui-ink); }
.sh-lang svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.sh-lang select { appearance: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: 0.8125rem; font-weight: 500; min-height: 2.25rem; padding: 0 .9rem 0 .1rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.sh-lang select:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* page footer under the content */
.sh-pagefoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 2rem; padding-top: 1rem; font-size: 0.8125rem; color: var(--ui-muted); }
.sh-pagefoot svg { display: inline-block; width: .65rem; height: .65rem; fill: none; stroke: var(--ui-accent); stroke-width: 1.6; vertical-align: -.05rem; }
.sh-pagefoot nav { display: flex; gap: 1rem; }
.sh-pagefoot a:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 4px; }

/* sign-ups by year, with the growth ring */
.sh-growth { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 1.1rem; }
.sh-growth h3 { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 1rem .4rem; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--ui-ink); }
.sh-growth h3 svg { width: 1.3rem; height: 1.3rem; color: var(--ui-accent); }
.sh-bars { display: flex; align-items: stretch; gap: 1rem; height: 13rem; padding: 0 .5rem; border-bottom: 1px solid var(--ui-line); }
.sh-bar { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; min-width: 0; }
.sh-bar .v { font-size: 0.8125rem; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.sh-bar .b { align-self: end; width: min(2.1rem, 60%); background: linear-gradient(180deg, color-mix(in oklab, var(--ui-brand) 85%, white), var(--ui-brand)); border-radius: .35rem .35rem 0 0; min-height: 2px; transition: height .4s var(--ui-ease); }
.sh-bar .y { font-size: 0.8125rem; color: var(--ui-muted); padding-top: .4rem; margin-bottom: -1.5rem; }
.sh-growth-chart { padding-bottom: 1.6rem; }
.sh-growth-side { display: grid; align-content: center; justify-items: center; gap: 1rem; padding: 1rem; border-radius: var(--ui-radius); background: linear-gradient(180deg, var(--ui-brand-soft), color-mix(in oklab, var(--ui-brand) 8%, var(--ui-surface))); }
.sh-ring { width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ui-brand) calc(var(--p) * 1%), color-mix(in oklab, var(--ui-brand) 18%, var(--ui-surface)) 0); }
.sh-ring > div { width: 7.2rem; height: 7.2rem; border-radius: 50%; background: var(--ui-surface); display: grid; place-content: center; text-align: center; }
.sh-ring strong { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 400; line-height: 1; color: var(--ui-ink); } .sh-ring small { font-size: 0.875rem; color: var(--ui-muted); }
.sh-years { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.sh-years > div { display: grid; text-align: center; gap: .15rem; padding: .6rem; border-radius: .7rem; background: var(--ui-surface); border: 1px solid var(--ui-line); }
.sh-years > div.on { background: var(--ui-brand-soft); border-color: color-mix(in oklab, var(--ui-brand) 40%, var(--ui-surface)); }
.sh-years small { font-size: 0.8125rem; color: var(--ui-muted); } .sh-years strong { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 400; color: var(--ui-ink); }
@media (max-width: 900px) { .sh-growth { grid-template-columns: 1fr; } .sh-bars { gap: .5rem; height: 11rem; } }

/* ---- dashboard: six figures, cards, grouped bars, lines ---- */
.sh-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.sh-metric { position: relative; display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.1rem; min-width: 0; color: inherit; }
.sh-metric:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--ui-line); }
a.sh-metric:hover .sh-mtext small { color: var(--ui-accent); }
.sh-mtile { width: 2.9rem; height: 3.1rem; border-radius: .65rem; display: grid; place-items: center; flex-shrink: 0; }
.sh-mtile svg { width: 1.5rem; height: 1.5rem; }
.sh-mtile--brand { background: var(--ui-brand-soft); color: color-mix(in oklab, var(--ui-brand) 55%, #3a2a00); }
.sh-mtile--accent { background: var(--ui-accent-soft); color: var(--ui-accent); }
.sh-mtext { display: grid; gap: .25rem; min-width: 0; }
.sh-mtext small { font-size: 0.8125rem; line-height: 1.35; color: var(--ui-muted); }
.sh-mtext strong { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.03em; color: var(--ui-ink); }
@media (max-width: 1280px) { .sh-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sh-metric:nth-child(3n)::after { display: none; } .sh-metric:nth-child(n+4) { border-top: 1px solid var(--ui-line); } }
@media (max-width: 560px) { .sh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-metric:nth-child(3n)::after { display: block; } .sh-metric:nth-child(2n)::after { display: none; } .sh-metric:nth-child(n+3) { border-top: 1px solid var(--ui-line); } .sh-metric { padding: .85rem .8rem; gap: .6rem; } .sh-mtile { width: 2.3rem; height: 2.5rem; } .sh-mtext strong { font-size: 1.25rem; } }
.sh-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 1.1rem 1.2rem; height: 100%; min-width: 0; }
.sh-card h3 { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .8rem; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--ui-ink); }
.sh-card h3 svg { width: 1.3rem; height: 1.3rem; color: var(--ui-accent); }
.sh-sub { margin: 0 0 .6rem; font-size: 0.875rem; color: var(--ui-muted); }
.sh-sub strong { color: var(--ui-ink); font-weight: 600; }
.sh-line { width: 100%; height: 9rem; overflow: visible; border-bottom: 1px solid var(--ui-line); }
.sh-line polyline { fill: none; stroke: var(--ui-accent); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-width: 2px; }
.sh-line circle { fill: var(--ui-surface); stroke: var(--ui-accent); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.sh-line-labels { display: flex; justify-content: space-between; gap: .25rem; padding-top: .4rem; font-size: 0.75rem; color: var(--ui-muted); }
.sh-pstat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1rem; }
.sh-big { display: block; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: -.04em; color: var(--ui-ink); line-height: 1.1; }
.sh-pstat small { font-size: 0.875rem; color: var(--ui-muted); }
.sh-ring--small { width: 6.2rem; height: 6.2rem; flex-shrink: 0; } .sh-ring--small > div { width: 4.9rem; height: 4.9rem; } .sh-ring--small strong { font-size: 1.15rem; }
.sh-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ui-line); padding-top: 1rem; gap: 1rem; }
.sh-methods > div { display: flex; align-items: center; gap: .7rem; min-width: 0; } .sh-methods strong { font-size: 1rem; font-family: 'Outfit', sans-serif; font-weight: 400; color: var(--ui-ink); }
@media (max-width: 640px) { .sh-methods { grid-template-columns: 1fr; } }
.sh-payrow { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--ui-line); font-size: 0.875rem; }
.sh-payrow:last-child { border-bottom: 0; } .sh-payrow strong { display: block; font-weight: 500; } .sh-payrow small { color: var(--ui-muted); font-size: 0.8125rem; } .sh-payrow > span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-emptybox { display: grid; place-items: center; gap: .4rem; padding: 2rem 0; color: var(--ui-muted); font-size: 0.875rem; } .sh-emptybox svg { width: 2.6rem; height: 2.6rem; color: color-mix(in oklab, var(--ui-accent) 45%, var(--ui-surface)); } .sh-emptybox p { margin: 0; }
.sh-legend { display: flex; gap: 1.2rem; margin: -.4rem 0 .8rem .4rem; font-size: 0.8125rem; color: var(--ui-muted); } .sh-legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; }
.sh-legend .a, .sh-bar .b.a { background: var(--ui-accent); } .sh-legend .b, .sh-bar .b.b2 { background: var(--ui-brand); }
.sh-bars--pair .pair { display: flex; align-items: stretch; justify-content: center; gap: .35rem; height: 100%; min-height: 0; }
.sh-bars--pair .pair > div { display: grid; grid-template-rows: auto 1fr; justify-items: center; width: min(1.9rem, 42%); }
.sh-bars--pair .sh-bar { grid-template-rows: 1fr auto; } .sh-bars--pair .b { width: 100%; border-radius: .3rem .3rem 0 0; background-image: none; }
.sh-empty { margin: auto; color: var(--ui-muted); font-size: 0.875rem; }

/* ---- list pages (enrolments and the rest): a soft band on top, one card for the table ---- */
.fi-resource-list-records-page .fi-header { position: relative; overflow: hidden; align-items: center; gap: 1rem 1.5rem; padding: 1.3rem 1.6rem; min-height: 6.2rem; margin-bottom: 1rem;
    background: linear-gradient(110deg, var(--ui-brand-hero), var(--ui-brand-soft) 75%, color-mix(in oklab, var(--ui-brand) 6%, var(--ui-surface))); border: 1px solid color-mix(in oklab, var(--ui-brand) 22%, var(--ui-surface)); border-radius: var(--ui-radius); }
.fi-resource-list-records-page .fi-header-heading { display: flex; align-items: center; gap: 1.05rem; font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -.03em; margin: 0; color: var(--ui-ink); }
.fi-resource-list-records-page .fi-header-subheading { margin: .35rem 0 0 4.2rem; font-size: 0.875rem; color: var(--ui-muted); }
.sh-intro-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: .9rem; background: color-mix(in oklab, var(--ui-surface) 88%, transparent); color: color-mix(in oklab, var(--ui-brand) 50%, #3a2a00); box-shadow: 0 3px 11px color-mix(in oklab, var(--ui-brand) 12%, transparent); }
.sh-intro-icon svg { width: 1.8rem; height: 1.8rem; stroke-width: 1.25; }
.sh-count, .sh-count:hover { pointer-events: none; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: .7rem; font-size: 0.8125rem; font-weight: 400; background: color-mix(in oklab, var(--ui-surface) 72%, transparent); border: 1px solid color-mix(in oklab, var(--ui-brand) 25%, var(--ui-surface)); color: var(--ui-muted); box-shadow: none; }
.sh-count svg { width: 1.15rem; height: 1.15rem; color: color-mix(in oklab, var(--ui-brand) 60%, #5a3c00); }
.fi-resource-list-records-page .fi-header .fi-ac { align-items: center; gap: .6rem; }
.sh-export, .sh-export .fi-btn { font-weight: 400; }
@media (max-width: 700px) { .fi-resource-list-records-page .fi-header { padding: 1rem 1.1rem; } .fi-resource-list-records-page .fi-header-heading { font-size: 1.35rem; gap: .75rem; } .sh-intro-icon { width: 2.6rem; height: 2.6rem; } .fi-resource-list-records-page .fi-header-subheading { margin-left: 3.35rem; } }

/* the table card */
.fi-ta-ctn { overflow: hidden; }
.fi-ta-header-toolbar { padding: .9rem 1.2rem; border-bottom: 1px solid var(--ui-line); gap: .75rem; flex-wrap: wrap; }
.fi-ta-search-field .fi-input-wrp { min-height: 2.6rem; border-radius: .6rem; background: var(--ui-surface); box-shadow: none; border: 1px solid var(--ui-line); --tw-ring-shadow: 0 0 #0000; }
.fi-ta-search-field .fi-input-wrp:focus-within { border-color: color-mix(in oklab, var(--ui-accent) 60%, white); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-accent) 10%, transparent); }
.fi-ta-header-cell { background: color-mix(in oklab, var(--ui-accent) 4%, var(--ui-surface)); border-bottom: 1px solid var(--ui-line); padding-block: .95rem; color: var(--ui-muted); font-weight: 400; font-size: 0.75rem; text-transform: none; letter-spacing: 0; }
.fi-ta-header-cell:first-child, .fi-ta-cell:first-child { padding-inline-start: 1.4rem; }
.fi-ta-cell { padding-block: .85rem; border-bottom: 1px solid color-mix(in oklab, var(--ui-line) 70%, transparent); font-size: 0.8125rem; color: color-mix(in oklab, var(--ui-ink) 78%, var(--ui-surface)); }
.fi-ta-cell .fi-ta-text-item-description, .fi-ta-text-item-description { font-size: 0.75rem; color: color-mix(in oklab, var(--ui-muted) 85%, var(--ui-surface)); margin-top: .25rem; }
.fi-ta-row:hover { background: color-mix(in oklab, var(--ui-accent) 4%, var(--ui-surface)); }
.fi-ta-row > .fi-ta-cell:last-child { padding-inline: .3rem .6rem; }
.sh-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2.2rem; border-radius: .65rem; font-size: 0.75rem; letter-spacing: .3px; flex-shrink: 0; margin-inline-end: .65rem; background: var(--ui-accent-soft); color: color-mix(in oklab, var(--ui-accent) 75%, white); }
.sh-avatar.tone-1 { background: var(--ui-brand-soft); color: color-mix(in oklab, var(--ui-brand) 55%, #3a2a00); } .sh-avatar.tone-2 { background: color-mix(in oklab, var(--ui-ink) 6%, var(--ui-surface)); color: var(--ui-muted); }
.fi-ta-text:has(.sh-avatar) .fi-ta-text-item, .fi-ta-text-item:has(.sh-avatar) { display: flex; align-items: center; }
.sh-avatar-name { font-weight: 500; color: var(--ui-ink); font-size: 0.8125rem; }
.fi-ta-cell .fi-badge { border-radius: .4rem; font-size: 0.75rem; padding: .2rem .5rem; font-weight: 400; }
.fi-ta-actions .fi-icon-btn { color: color-mix(in oklab, var(--ui-accent) 55%, white); }
.fi-ta-actions .fi-icon-btn:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }
.fi-ta-footer, .fi-pagination { padding: .9rem 1.2rem; border-top: 1px solid var(--ui-line); }
.fi-resource-list-records-page .fi-header .fi-breadcrumbs { display: none; }
.fi-ta-text-item, .fi-ta-text-item-label, .fi-ta-text { font-size: 0.8125rem; line-height: 1.55; }
.fi-ta-text-item-description { font-size: 0.75rem !important; }
.fi-ta-cell > .fi-ta-col, .fi-ta-cell .fi-ta-col { padding-block: 0; }
.fi-ta-cell { padding-block: .65rem; }
.fi-ta-header-cell-label { font-size: 0.75rem; font-weight: 400; }
.fi-ta-header-cell-sort-icon { opacity: .6; }
.fi-ta-text-description { font-size: 0.75rem !important; line-height: 1.5; color: color-mix(in oklab, var(--ui-muted) 85%, var(--ui-surface)); margin-top: .2rem; }
.fi-ta-text-item.fi-size-sm, .fi-ta-text-item.fi-size-md { font-size: 0.8125rem; }

/* ===== shell metrics from the design (sidebar 240, top bar 78, content padding 24, 13px base) ===== */
.fi-sidebar-nav { padding: 2px 16px 24px; }
.fi-sidebar-nav-groups { gap: 0; }
.fi-sidebar-group { margin: 0; }
.fi-sidebar-group-label { margin: 24px 0 8px; padding-inline: 14px; line-height: 1.65; }
.fi-sidebar-group-btn { padding: 0; }
.fi-sidebar-item-btn { min-height: 36px; padding: 7px 12px; gap: 12px; margin-bottom: 2px; line-height: 1.5; }
.fi-sidebar-item-btn .fi-icon, .fi-sidebar-item-icon { width: 19px; height: 19px; }
.fi-sidebar-item-label { font-size: 14px; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--ui-brand-soft); }
.fi-sidebar-nav-groups > li:first-child .fi-sidebar-item-btn { margin-top: 2px; }
/* top bar: search on the left, the tools on the right */
.fi-topbar { gap: 20px; padding-inline: 24px; }
.fi-topbar-end { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.fi-global-search-ctn { order: -1; margin-inline-end: auto; }
.fi-global-search-field .fi-input-wrp { height: 42px; width: clamp(190px, 27vw, 420px); border-radius: 10px; }
.fi-global-search-field .fi-input { font-size: 14px; }
.sh-clock { height: 43px; padding: 5px 10px; border-radius: 9px; gap: 8px; }
.sh-clock svg { width: 19px; height: 19px; }
.sh-chip-year { display: none; align-items: center; gap: .5rem; height: 43px; padding: 0 .85rem; border: 1px solid var(--ui-line); border-radius: 8px; font-size: 14px; background: var(--ui-surface); color: var(--ui-ink); white-space: nowrap; }
.sh-chip-year svg { width: 1rem; height: 1rem; color: var(--ui-accent); }
@media (min-width: 1100px) { .sh-chip-year { display: inline-flex; } }
.sh-tool { position: relative; display: none; place-items: center; width: 32px; height: 36px; border-radius: 9px; color: var(--ui-ink); background: transparent; border: 0; cursor: pointer; transition: background .16s ease, color .16s ease; }
.sh-tool svg { width: 20px; height: 20px; }
.sh-tool:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
@media (min-width: 640px) { .sh-tool { display: grid; } }
.sh-sun { display: none; } .dark .sh-moon { display: none; } .dark .sh-sun { display: block; }
.sh-dot { position: absolute; top: 2px; right: 0; min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: 999px; background: var(--ui-accent); color: #fff; font-size: 0.75rem; line-height: 1rem; text-align: center; }
.sh-lang select { font-size: 12px; }
/* content: full width, 24px sides, 18px on top */
.fi-main.fi-width-7xl, .fi-main { max-width: none; }
.fi-main { padding: 18px 24px 0; }
.fi-page-header-main-ctn { gap: 15px; padding-block: 0; }
.fi-page:has(.sh-welcome) .fi-sc.fi-sc-has-gap, .fi-page .fi-wi-widget { --gap: 15px; }
.fi-page:has(.sh-welcome) .fi-grid.fi-sc.fi-sc-has-gap { gap: 15px; }
.sh-welcome { min-height: 151px; padding: 23px 30px; border-radius: 13px; }
.sh-welcome-title { font-size: 25px; letter-spacing: -.55px; margin: 0 0 8px; font-weight: 400; }
.sh-welcome-sub { font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.sh-chip { min-height: 38px; padding: 0 18px; font-size: 14px; gap: 12px; border-radius: 8px; }
.sh-motif { width: 320px; height: 105px; margin-right: 6px; }
.sh-motif i { width: 61px; height: 61px; border-radius: 16px; }
.sh-motif i svg { width: 29px; height: 29px; }
.sh-metrics { min-height: 108px; }
.sh-metric { padding: 17px 18px; gap: 13px; }
.sh-mtile { width: 46px; height: 50px; border-radius: 10px; }
.sh-mtile svg { width: 24px; height: 24px; }
.sh-mtext small { font-size: 13px; line-height: 1.45; margin-bottom: 6px; max-width: 110px; }
.sh-mtext strong { font-size: 24px; letter-spacing: -.6px; }
.sh-card, .sh-growth { border-radius: 13px; }
.sh-card h3, .sh-growth h3 { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.45px; gap: 13px; }
.fi-topbar-ctn { z-index: 30; }
@media (min-width: 1024px) { .fi-topbar-collapse-sidebar-btn-ctn { display: none; } .fi-topbar-start { display: none; } }

/* ===== readable sizes: 14px for working text, 12px at the very smallest, 16px for form fields on phones ===== */
:root { --ui-sidebar-w: 16.5rem; }
.fi-body { font-size: .9375rem; line-height: 1.55; }
.fi-sidebar-item-label { font-size: .9375rem; }
.fi-sidebar-group-label { font-size: .75rem; letter-spacing: .5px; }
.fi-sidebar-item-btn { min-height: 40px; }
.fi-sidebar-item-btn .fi-icon, .fi-sidebar-item-icon { width: 20px; height: 20px; }
.fi-ta-cell, .fi-ta-text-item, .fi-ta-text-item-label, .fi-ta-text-item.fi-size-sm, .fi-ta-text-item.fi-size-md, .sh-avatar-name { font-size: .875rem !important; }
.fi-ta-text-description { font-size: .75rem !important; }
.fi-ta-header-cell, .fi-ta-header-cell-label { font-size: .8125rem; }
.fi-ta-cell .fi-badge, .fi-badge { font-size: .75rem; }
.sh-avatar { font-size: .75rem; width: 2.2rem; height: 2.4rem; }
.fi-global-search-field .fi-input, .fi-global-search-field input { font-size: .9375rem; }
.sh-clock small { font-size: .6875rem; } .sh-clock span { font-size: .8125rem; } .sh-clock strong { font-size: .875rem; }
.sh-lang select, .sh-chip-year { font-size: .8125rem; }
.sh-welcome-title { font-size: 1.75rem; } .sh-welcome-sub { font-size: .9375rem; } .sh-chip { font-size: .875rem; }
.sh-mtext small { font-size: .8125rem; max-width: 9rem; } .sh-mtext strong { font-size: 1.65rem; }
.sh-card h3, .sh-growth h3 { font-size: 1.125rem; }
.sh-sub, .sh-legend, .sh-line-labels, .sh-bar .v, .sh-bar .y, .sh-years small, .sh-payrow small, .sh-pstat small, .sh-ring small { font-size: .8125rem; }
.sh-payrow { font-size: .9375rem; } .sh-methods strong { font-size: 1.05rem; }
.sh-pagefoot { font-size: .8125rem; }
.fi-resource-list-records-page .fi-header-subheading { font-size: .875rem; }
.sh-count { font-size: .8125rem; } .fi-resource-list-records-page .fi-header-heading { font-size: 1.85rem; }
@media (max-width: 1023px) { :root { --ui-sidebar-w: 16.5rem; } }

/* ===== phones: list rows become cards (no sideways scrolling) ===== */
@media (max-width: 767px) {
  .fi-resource-list-records-page .fi-ta-table, .fi-resource-list-records-page .fi-ta-table tbody { display: block; width: 100%; }
  .fi-resource-list-records-page .fi-ta-table thead { display: none; }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; align-items: start;
    padding: .9rem 1rem; margin: 0 .75rem .75rem; border: 1px solid var(--ui-line, rgba(127,127,127,.25)); border-radius: 14px;
  }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row > td:first-child { grid-column: 1 / -1; }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row > td:empty { display: none; }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row > td:last-child { justify-self: end; align-self: center; }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row .fi-ta-text { padding: 0 !important; }
  .fi-resource-list-records-page .fi-ta-table tr.fi-ta-row .fi-ta-text-item { overflow-wrap: anywhere; -webkit-line-clamp: unset; }
  .fi-resource-list-records-page .fi-ta-content { overflow: visible; }
}

/* Logos are usually transparent with a dark wordmark: on dark backgrounds they sit in a white box with rounded corners */
.dark .fi-panel-console .sh-brand img, .dark .fi-panel-console .fi-logo { background: #fff; padding: 6px 12px; border-radius: 12px; box-sizing: content-box; }

/* the top bar clock keeps one size whatever the digits are, so the tools beside it do not shift every second */
.sh-clock { width: 14.5rem; flex: none; }
.sh-clock > div { min-width: 0; flex: 1; }
.sh-clock small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* smaller logo at the top of the menu */
.sh-brand { min-height: 80px; padding: 4px 16px; }
.sh-brand img { max-width: 72px; max-height: 56px; }
.dark .fi-panel-console .sh-brand img, .dark .fi-panel-console .fi-logo { padding: 4px 8px; border-radius: 10px; }

/* ---- release version at the bottom of the menu ---- */
.sh-version { padding: .75rem 1.25rem 1rem; font-size: 12px; line-height: 1.4; color: var(--ui-muted); border-top: 1px solid var(--ui-line); margin-top: auto; }
.sh-version a { color: inherit; display: inline-block; }
.sh-version a span { opacity: .8; }
@media (hover: hover) { .sh-version a:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; } }

/* ---- documents inside the console: terms, privacy, release notes ---- */
.sh-docbox { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 1.75rem clamp(1.1rem, 3vw, 2.25rem); max-width: 60rem; }
.sh-doc-meta { margin: 0 0 1.25rem; font-size: .8125rem; color: var(--ui-muted); }
.sh-doc { font-size: .9375rem; line-height: 1.75; color: var(--ui-ink); overflow-wrap: anywhere; }
.sh-doc h1 { display: none; }
.sh-doc h2 { font-family: 'Outfit', 'DM Sans', sans-serif; font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; margin: 2.25rem 0 .6rem; padding-top: 1.25rem; border-top: 1px solid var(--ui-line); }
.sh-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sh-doc h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); margin: 1.25rem 0 .4rem; }
.sh-doc p { margin: 0 0 .85rem; }
.sh-doc ul, .sh-doc ol { margin: 0 0 1rem; padding-left: 1.3rem; } .sh-doc ul { list-style: disc; } .sh-doc ol { list-style: decimal; }
.sh-doc li { margin: .3rem 0; }
.sh-doc a { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.sh-doc code { font-size: .85em; padding: .1em .35em; border-radius: 5px; background: var(--ui-accent-soft); }
.sh-doc table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; display: block; overflow-x: auto; }
.sh-doc th, .sh-doc td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--ui-line); font-size: .875rem; vertical-align: top; }

/* ---- dashboard: key figures ---- */
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }
.sh-kpi { --kpi: var(--ui-brand); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 1.15rem 1.25rem 1rem; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.sh-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kpi); }
.sh-kpi--sky { --kpi: var(--ui-accent); } .sh-kpi--warn { --kpi: #e0a21b; }
.sh-kpi header { display: flex; align-items: center; gap: .65rem; }
.sh-kpi h3 { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .03em; color: var(--ui-muted); text-transform: uppercase; line-height: 1.3; }
.sh-kpi-icon { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in oklab, var(--kpi) 16%, var(--ui-surface)); color: color-mix(in oklab, var(--kpi) 70%, var(--ui-ink)); }
.sh-kpi-icon svg { width: 1.2rem; height: 1.2rem; }
.sh-kpi-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .7rem; min-height: 2.6rem; }
.sh-kpi-figure strong { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 2.35rem; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--ui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sh-kpi-figure strong.is-small { font-size: 1.45rem; }
.sh-kpi-trend { font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.sh-kpi-trend--up { background: color-mix(in oklab, #2f9e6e 16%, var(--ui-surface)); color: color-mix(in oklab, #2f9e6e 80%, var(--ui-ink)); }
.sh-kpi-trend--warn { background: color-mix(in oklab, #e0a21b 20%, var(--ui-surface)); color: color-mix(in oklab, #b07a00 75%, var(--ui-ink)); }
.sh-kpi-facts { margin: auto 0 0; padding-top: .75rem; border-top: 1px solid var(--ui-line); display: grid; gap: .3rem; }
.sh-kpi-facts div { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; }
.sh-kpi-facts dt { color: var(--ui-muted); } .sh-kpi-facts dd { margin: 0; font-weight: 600; color: var(--ui-ink); text-align: right; font-variant-numeric: tabular-nums; }

/* a field shows focus on its own border; the browser's extra outline on the input drew a second box over it */
.fi-input-wrp .fi-input:focus, .fi-input-wrp .fi-input:focus-visible { outline: 0 !important; box-shadow: none !important; }