/* =====================================================================
Edgewood Technology — Brand Stylesheet (single source of truth)
Path when deployed: https://technology.edgewoodhs.org/branding/brand.css
---------------------------------------------------------------------
Drop this into any Edgewood app to inherit the shared brand:
...or copy the :root tokens into your Tailwind config.
Tokens reconcile every app on the server (landing, chromebook,
onboarding, purchaseorders, maintenance, scheduler, ...).
===================================================================== */
/* ---- Fonts -------------------------------------------------------- */
/* Apps should also add the Google Fonts in :
family=Source+Sans+3:wght@300;400;600;700;900
family=JetBrains+Mono:wght@500;700
(EB Garamond retired 2026-07 — Source Sans 3 now carries headings too.) */
:root {
/* =================================================================
OFFICIAL BRAND COLORS — exact spec values. Do not alter these.
================================================================= */
--ehs-maroon: #681a31; /* Edgewood Maroon · PMS 7421 C */
--ehs-gold: #d0b786; /* Edgewood Gold · PMS 7502 C */
--ehs-legacy-gold: #daa900; /* Legacy Gold · PMS 110 C */
--ehs-crusader-maroon: #550119; /* Crusader Maroon · PMS 504 C */
--ehs-crusader-gold: #ceb888; /* Crusader Gold · PMS 4515 C */
--ehs-grey: #ebebeb; /* Light Grey · PMS 663 */
--ehs-black: #231f20; /* Dominican Black · PMS Black */
/* =================================================================
DERIVED SHADES — tints/shades of the official colors only, for
hovers, borders, and pale fills. (Tints/shades of brand colors
are allowed; no new hues are introduced.)
================================================================= */
/* Maroon: Crusader Maroon doubles as the darker/pressed maroon. */
--ehs-maroon-deep: var(--ehs-crusader-maroon);
--ehs-maroon-light: #7d2740; /* +lightness of Edgewood Maroon */
/* Gold */
--ehs-gold-deep: #a8895a; /* shade of Edgewood Gold */
--ehs-gold-pale: #f3ead6; /* tint of Edgewood Gold */
--ehs-on-goldpale: var(--ehs-maroon-deep); /* readable text on gold-pale (dark-mode override below) */
--ehs-on-maroonpale: var(--ehs-maroon); /* readable text on a maroon-tinted fill (dark override below) */
/* The brand accent used as TEXT on the page ground. Maroon reads at ~2:1 on the dark
ground however far it is lightened while still being maroon (measured across the kit,
2026-07-30), so on dark the accent becomes GOLD — which is already what the appbar
service name, the sidebar's active link and the action toggle do. FILLS and BORDERS
keep using --ehs-maroon; this token is only for glyphs. */
--ehs-accent-text: var(--ehs-maroon);
/* Neutrals (greys built around official Light Grey + Dominican Black) */
--ehs-ink: var(--ehs-black);
--ehs-muted: #6b6257;
--ehs-paper: #ffffff;
--ehs-cream: #faf7f1; /* warm off-white ground */
--ehs-rule: var(--ehs-grey);
--ehs-rule-strong: #c8bfb5;
/* RGB triples (space-separated) so alpha compositing works on themed colors —
Tailwind opacity modifiers (bg-gold/20 -> rgb(var(--ehs-gold-rgb)/.2)) and color-mix. */
--ehs-maroon-rgb: 104 26 49; --ehs-maroon-deep-rgb: 85 1 25; --ehs-maroon-light-rgb: 125 39 64;
--ehs-gold-rgb: 208 183 134; --ehs-gold-deep-rgb: 168 137 90; --ehs-gold-pale-rgb: 243 234 214;
--ehs-ink-rgb: 35 31 32; --ehs-muted-rgb: 107 98 87;
--ehs-paper-rgb: 255 255 255; --ehs-cream-rgb: 250 247 241; --ehs-rule-rgb: 235 235 235;
/* =================================================================
SYSTEM STATUS — functional only, OUTSIDE the core brand palette.
Used strictly for state (success/caution/error/info). Warn + error
borrow the brand's gold/maroon families to stay in family.
================================================================= */
/* Each status has: solid (icon/accent), pale (fill), border, text-on-pale.
Tuned to sit beside BOTH the primary (Edgewood) and secondary (Crusader)
palettes — they only ever render on paper/cream, never on maroon. The
amber warn is deliberately more saturated than Edgewood Gold so "caution"
never reads as "brand gold". */
--ehs-ok: #2f7d4f; --ehs-ok-pale: #e6f1e9; --ehs-ok-border: #b7d6bf; --ehs-ok-text: #245c37;
--ehs-warn: #c0891e; --ehs-warn-pale: #f8efd3; --ehs-warn-border: #e6cf95; --ehs-warn-text: #7a591a;
--ehs-bad: #b23a2e; --ehs-bad-pale: #f7e4e1; --ehs-bad-border: #e2b3ab; --ehs-bad-text: #7d281d;
--ehs-info: #2f6f8f; --ehs-info-pale: #e2eef3; --ehs-info-border: #aecfdc; --ehs-info-text: #245266;
/* Focus ring (gold reads on both maroon fills and light grounds) */
--ehs-focus: var(--ehs-legacy-gold);
/* Code block surface (dark in both themes) + syntax colors */
--ehs-code-bg: #2b2224; --ehs-code-fg: #f2e6d8;
--ehs-code-tag: #d9b876; --ehs-code-attr:#c99aa6; --ehs-code-str: #cdb58a; --ehs-code-punct:#9d8e85; /* was #8f8078 = 4.07:1 on --ehs-code-bg; now 4.9 */
/* Type — Garamond retired; Source Sans 3 carries display + body, JetBrains Mono for code. */
--ehs-font-display: 'Source Sans 3', system-ui, 'Gill Sans', sans-serif;
--ehs-font-body: 'Source Sans 3', system-ui, 'Gill Sans', sans-serif;
--ehs-font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Radius */
--ehs-r-sm: 6px;
--ehs-r-md: 10px;
--ehs-r-lg: 14px;
--ehs-r-pill: 999px;
/* =================================================================
WIDTH CONTRACT (unified-shell Phase 0) — one gutter + one page cap
for the whole suite, so every app's left edge and content column
line up. Full desktop width is the DEFAULT; narrow is opt-in.
--ehs-gutter horizontal padding shared by appbar/footer/content
--ehs-page-max global content cap (decision 3: one value, 1440)
measures .ehs-content--reading | --wide | --full
================================================================= */
--ehs-gutter: clamp(16px, 4vw, 40px);
--ehs-page-max: 1440px;
--ehs-measure-reading: 720px; /* forms, prose, single-column reading */
--ehs-measure-wide: 1100px; /* dashboards, detail views */
/* --full = edge-to-edge within the gutter (no cap) */
/* Geometry (Phase 0b shell): appbar height is load-bearing — sticky offsets +
the mobile drawer top edge reference it. Deep/workspace apps use the sidebar. */
--ehs-appbar-h: 55px; /* padding 8+8 + wordmark 36 + 3px gold border */
--ehs-sidebar-w: 216px;
--ehs-subnav-h: 46px; /* Tier-2 within-section tab strip (sticky under appbar) */
--ehs-detail-w: 380px; /* master-detail drawer panel width */
/* Elevation */
--ehs-shadow-sm: 0 1px 2px rgba(35,31,32,.06);
--ehs-shadow-md: 0 4px 14px rgba(104,26,49,.08);
--ehs-shadow-lg: 0 12px 34px rgba(104,26,49,.12);
/* Sunken surface (segmented track, neutral chips, wells) */
--ehs-sunken: #efe9df;
/* Spacing scale (4px base) */
--ehs-s1: 4px; --ehs-s2: 8px; --ehs-s3: 12px; --ehs-s4: 16px;
--ehs-s5: 24px; --ehs-s6: 32px; --ehs-s7: 48px; --ehs-s8: 64px;
}
/* =====================================================================
DARK THEME
---------------------------------------------------------------------
Same brand, dark surfaces. Neutrals flip; maroon + gold are kept but
accents lean on the lighter tints so they read on a dark ground.
Dark is OPT-IN via the toggle (data-theme="dark"); the default is LIGHT
regardless of the OS setting. (Changed 2026-07-29 — families on dark-mode
devices were landing on a dark site by surprise, esp. in incognito.)
===================================================================== */
:root[data-theme="dark"],
:root[data-theme="dark"] * { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root[data-theme="dark"] {
--ehs-paper: #241c1e; /* card / surface (warm maroon-black) */
--ehs-cream: #16110f; /* page background */
--ehs-sunken: #0e0a0b; /* wells, segmented track */
--ehs-ink: #f4ede3; /* primary text (warm off-white) */
--ehs-muted: #b3a89c; /* secondary text */
--ehs-rule: #3a2e30; /* hairline borders */
--ehs-rule-strong: #57474d; /* stronger borders */
--ehs-maroon-rgb: 143 43 69; --ehs-maroon-light-rgb: 165 59 87;
--ehs-gold-rgb: 220 196 145; --ehs-gold-deep-rgb: 215 189 136; --ehs-gold-pale-rgb: 58 48 28;
--ehs-ink-rgb: 244 237 227; --ehs-muted-rgb: 179 168 156;
--ehs-paper-rgb: 36 28 30; --ehs-cream-rgb: 22 17 15; --ehs-rule-rgb: 58 46 48;
/* Brand accents lifted for contrast on dark */
--ehs-maroon: #8f2b45; /* Edgewood Maroon, lightened for dark fills */
--ehs-maroon-light: #a53b57;
--ehs-gold: #dcc491; /* gold, slightly brighter */
--ehs-gold-deep: #d7bd88;
--ehs-gold-pale: #3a301c;
--ehs-on-goldpale: #e6d2a0;
--ehs-on-maroonpale: #e2a9b8; /* maroon fills go near-black on dark; text must lift */
--ehs-accent-text: var(--ehs-gold);
/* Status — brighter solids, deep pales, mid borders, light text */
--ehs-ok: #63b079; --ehs-ok-pale: #16261a; --ehs-ok-border: #2f5038; --ehs-ok-text: #a6d6b2;
--ehs-warn: #d8a63a; --ehs-warn-pale: #2b2310; --ehs-warn-border: #574710; --ehs-warn-text: #e6c877;
--ehs-bad: #d76a5c; --ehs-bad-pale: #2e1714; --ehs-bad-border: #5a2b26; --ehs-bad-text: #e6a89f;
--ehs-info: #61a4c1; --ehs-info-pale: #12232b; --ehs-info-border: #2a4d5c; --ehs-info-text: #a9d0de;
--ehs-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
--ehs-shadow-md: 0 4px 14px rgba(0,0,0,.55);
--ehs-shadow-lg: 0 12px 34px rgba(0,0,0,.6);
}
}
:root[data-theme="dark"] {
--ehs-paper: #241c1e;
--ehs-cream: #16110f;
--ehs-sunken: #0e0a0b;
--ehs-ink: #f4ede3;
--ehs-muted: #b3a89c;
--ehs-rule: #3a2e30;
--ehs-rule-strong: #57474d;
--ehs-maroon-rgb: 143 43 69; --ehs-maroon-light-rgb: 165 59 87;
--ehs-gold-rgb: 220 196 145; --ehs-gold-deep-rgb: 215 189 136; --ehs-gold-pale-rgb: 58 48 28;
--ehs-ink-rgb: 244 237 227; --ehs-muted-rgb: 179 168 156;
--ehs-paper-rgb: 36 28 30; --ehs-cream-rgb: 22 17 15; --ehs-rule-rgb: 58 46 48;
--ehs-maroon: #8f2b45;
--ehs-maroon-light: #a53b57;
--ehs-gold: #dcc491;
--ehs-gold-deep: #d7bd88;
--ehs-gold-pale: #3a301c;
/* Must mirror the prefers-color-scheme block: --ehs-gold-pale flips dark here
but --ehs-on-goldpale was omitted, so it stayed var(--ehs-maroon-deep) and
every gold surface (badge--gold, chip, banner--gold, calendar__event) went
dark-maroon-on-dark-brown (~1.15:1) for anyone using the explicit theme
TOGGLE. OS-level dark was fine, which is why it hid for so long. */
--ehs-on-goldpale: #e6d2a0;
--ehs-on-maroonpale: #e2a9b8;
--ehs-accent-text: var(--ehs-gold);
--ehs-ok: #63b079; --ehs-ok-pale: #16261a; --ehs-ok-border: #2f5038; --ehs-ok-text: #a6d6b2;
--ehs-warn: #d8a63a; --ehs-warn-pale: #2b2310; --ehs-warn-border: #574710; --ehs-warn-text: #e6c877;
--ehs-bad: #d76a5c; --ehs-bad-pale: #2e1714; --ehs-bad-border: #5a2b26; --ehs-bad-text: #e6a89f;
--ehs-info: #61a4c1; --ehs-info-pale: #12232b; --ehs-info-border: #2a4d5c; --ehs-info-text: #a9d0de;
--ehs-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
--ehs-shadow-md: 0 4px 14px rgba(0,0,0,.55);
--ehs-shadow-lg: 0 12px 34px rgba(0,0,0,.6);
}
/* =====================================================================
Base document defaults (unified-shell) — any app that loads brand.css
gets a themed, flush-edge body WITHOUT restating it. The shared full-width
sticky .ehs-appbar assumes no UA body margin, and dark mode needs an
EXPLICIT body color/bg (relying on color-scheme alone left some apps
dark-on-dark). Single-element specificity, emitted before the component
classes, so ANY app's own `body { … }` rule overrides these.
===================================================================== */
body {
margin: 0;
background: var(--ehs-cream);
color: var(--ehs-ink);
font-family: var(--ehs-font-body);
-webkit-font-smoothing: antialiased;
/* SUITE RULE #1 — sticky footer: the body is a full-viewport flex column so the
shared footer sits at the bottom of the viewport OR just below the content
(whichever is lower). `margin-top:auto` on the footer absorbs any leftover
space when content is short; when content is tall the footer just flows after
it. Apps that set their own body `display` override this (their rule wins). */
min-height: 100dvh;
display: flex;
flex-direction: column;
}
/* Push the shared footer to the bottom of the body flex column (sticky-footer). */
#ehs-chrome-footer { margin-top: auto; }
/* The UA's [hidden] rule is display:none at the lowest possible weight, so ANY
component class that sets display (.ehs-field, .ehs-modal-backdrop, .ehs-row…)
silently defeats it — markup that toggles the `hidden` attribute then never
hides, which has bitten a modal-on-load and a form field here already.
!important is the conventional fix (normalize.css / HTML5 Boilerplate do the
same): an element carrying `hidden` is meant to be gone, full stop. */
[hidden] { display: none !important; }
/* Secondary text. `--ehs-muted` existed as a token from the start, and apps
(incl. the create-ehs-app scaffold) had been writing class="ehs-muted"
expecting the obvious companion class — which silently did nothing until it
was added here. Dark-flips with the token. */
.ehs-muted { color: var(--ehs-muted); }
/* =====================================================================
Base component classes — prefix .ehs- to avoid clashing with
app-local styles. Everything below is optional; use what you need.
===================================================================== */
/* ---- Buttons ------------------------------------------------------ */
.ehs-btn {
font-family: var(--ehs-font-body);
font-size: 14px;
font-weight: 600;
line-height: 1;
padding: 10px 18px;
border-radius: var(--ehs-r-sm);
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .15s ease, border-color .15s ease,
color .15s ease, box-shadow .15s ease, transform .05s ease;
text-decoration: none;
white-space: nowrap;
}
.ehs-btn:active { transform: translateY(1px); }
.ehs-btn:focus-visible {
outline: 2px solid var(--ehs-focus);
outline-offset: 2px;
}
.ehs-btn:disabled, .ehs-btn[aria-disabled='true'] {
opacity: .5; cursor: not-allowed; transform: none;
}
.ehs-btn--primary {
background: var(--ehs-maroon);
color: #fff;
}
.ehs-btn--primary:hover { background: var(--ehs-maroon-deep); }
.ehs-btn--secondary {
background: var(--ehs-paper);
color: var(--ehs-accent-text);
border-color: var(--ehs-rule-strong);
}
.ehs-btn--secondary:hover {
border-color: var(--ehs-maroon);
background: var(--ehs-cream);
}
.ehs-btn--gold {
background: var(--ehs-gold);
color: var(--ehs-maroon-deep);
}
.ehs-btn--gold:hover { background: var(--ehs-gold-deep); }
.ehs-btn--ghost {
background: transparent;
color: var(--ehs-ink);
}
.ehs-btn--ghost:hover { background: rgba(35,31,32,.06); }
.ehs-btn--danger {
background: var(--ehs-bad);
color: #fff;
}
.ehs-btn--danger:hover { filter: brightness(.92); }
.ehs-btn--sm { padding: 6px 12px; font-size: 12px; }
.ehs-btn--lg { padding: 13px 24px; font-size: 16px; }
/* ---- Badges / pills ---------------------------------------------- */
.ehs-badge {
font-family: var(--ehs-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--ehs-r-pill);
display: inline-flex;
align-items: center;
gap: 5px;
}
.ehs-badge--gold { color: var(--ehs-on-goldpale); background: var(--ehs-gold-pale); }
.ehs-badge--maroon { color: #fff; background: var(--ehs-maroon); }
.ehs-badge--ok { color: var(--ehs-ok-text); background: var(--ehs-ok-pale); }
.ehs-badge--warn { color: var(--ehs-warn-text); background: var(--ehs-warn-pale); }
.ehs-badge--bad { color: var(--ehs-bad-text); background: var(--ehs-bad-pale); }
.ehs-badge--info { color: var(--ehs-info-text); background: var(--ehs-info-pale); }
.ehs-badge--neutral { color: var(--ehs-muted); background: var(--ehs-sunken); }
/* ---- Form controls ----------------------------------------------- */
.ehs-field { display: flex; flex-direction: column; gap: 6px; }
.ehs-label {
font-family: var(--ehs-font-body);
font-size: 13px;
font-weight: 600;
color: var(--ehs-ink);
}
.ehs-hint { font-size: 12px; color: var(--ehs-muted); }
.ehs-input, .ehs-select, .ehs-textarea {
/* border-box: width:100% must mean "fill the container", borders + padding
included — under the content-box default these fields overflow any flex/
grid cell by their padding (worst with .ehs-search's 36px icon inset).
Found via kitchenmanager UI verify 2026-07-18. */
box-sizing: border-box;
font-family: var(--ehs-font-body);
font-size: 14px;
color: var(--ehs-ink);
background: var(--ehs-paper);
border: 1px solid var(--ehs-rule-strong);
border-radius: var(--ehs-r-sm);
padding: 9px 12px;
transition: border-color .15s ease, box-shadow .15s ease;
width: 100%;
}
.ehs-input:focus, .ehs-select:focus, .ehs-textarea:focus {
outline: none;
border-color: var(--ehs-maroon);
box-shadow: 0 0 0 3px rgba(104,26,49,.12);
}
.ehs-input::placeholder, .ehs-textarea::placeholder { color: #a89f92; }
.ehs-input--error { border-color: var(--ehs-bad); }
.ehs-input--error:focus { box-shadow: 0 0 0 3px rgba(163,60,46,.15); }
.ehs-textarea { resize: vertical; min-height: 84px; }
/* Checkbox / radio (accent) */
.ehs-check, .ehs-radio { accent-color: var(--ehs-maroon); width: 16px; height: 16px; }
/* Toggle */
.ehs-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.ehs-toggle input { opacity: 0; width: 0; height: 0; }
.ehs-toggle .ehs-track {
position: absolute; inset: 0; background: var(--ehs-rule-strong);
border-radius: var(--ehs-r-pill); transition: background .18s ease;
}
.ehs-toggle .ehs-track::before {
content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform .18s ease;
box-shadow: var(--ehs-shadow-sm);
}
.ehs-toggle input:checked + .ehs-track { background: var(--ehs-maroon); }
.ehs-toggle input:checked + .ehs-track::before { transform: translateX(18px); }
/* ---- Card --------------------------------------------------------- */
.ehs-card {
background: var(--ehs-paper);
border: 1px solid var(--ehs-rule);
border-radius: var(--ehs-r-md);
padding: 20px 22px;
box-shadow: var(--ehs-shadow-sm);
}
.ehs-card__title {
font-family: var(--ehs-font-display);
font-size: 20px; font-weight: 700; color: var(--ehs-ink);
margin-bottom: 6px;
}
.ehs-card__desc { font-size: 14px; color: var(--ehs-muted); line-height: 1.55; }
/* ---- Tile (service-hub style) ------------------------------------ */
.ehs-tile {
background: var(--ehs-paper);
border: 1px solid var(--ehs-rule);
border-radius: var(--ehs-r-lg);
padding: 22px 24px 18px;
display: flex; flex-direction: column; gap: 10px;
position: relative; overflow: hidden;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ehs-tile::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--ehs-maroon); transform: translateX(-4px);
transition: transform .18s ease;
}
.ehs-tile:hover {
border-color: var(--ehs-maroon); transform: translateY(-2px);
box-shadow: var(--ehs-shadow-md);
}
.ehs-tile:hover::before { transform: translateX(0); }
.ehs-tile__title {
font-family: var(--ehs-font-display);
font-size: 22px; font-weight: 700; color: var(--ehs-ink); line-height: 1.2;
}
.ehs-tile__desc { font-size: 14px; color: var(--ehs-muted); line-height: 1.55; flex: 1; }
/* ---- Alerts / callouts ------------------------------------------- */
.ehs-alert {
border-radius: var(--ehs-r-sm);
padding: 12px 14px;
font-size: 14px;
line-height: 1.5;
border: 1px solid;
display: flex; gap: 10px; align-items: flex-start;
}
.ehs-alert__icon { flex: none; font-weight: 700; }
.ehs-alert--ok { background: var(--ehs-ok-pale); border-color: var(--ehs-ok-border); color: var(--ehs-ok-text); }
.ehs-alert--warn { background: var(--ehs-warn-pale); border-color: var(--ehs-warn-border); color: var(--ehs-warn-text); }
.ehs-alert--bad { background: var(--ehs-bad-pale); border-color: var(--ehs-bad-border); color: var(--ehs-bad-text); }
.ehs-alert--info { background: var(--ehs-info-pale); border-color: var(--ehs-info-border); color: var(--ehs-info-text); }
.ehs-alert--ok .ehs-alert__icon { color: var(--ehs-ok); }
.ehs-alert--warn .ehs-alert__icon { color: var(--ehs-warn); }
.ehs-alert--bad .ehs-alert__icon { color: var(--ehs-bad); }
.ehs-alert--info .ehs-alert__icon { color: var(--ehs-info); }
/* ---- Table -------------------------------------------------------- */
.ehs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ehs-table th {
text-align: left;
font-family: var(--ehs-font-body);
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--ehs-muted);
padding: 10px 14px;
border-bottom: 2px solid var(--ehs-rule-strong);
background: var(--ehs-cream);
}
.ehs-table td { padding: 11px 14px; border-bottom: 1px solid var(--ehs-rule); color: var(--ehs-ink); }
.ehs-table tbody tr:hover { background: var(--ehs-cream); }
/* ---- Tabs --------------------------------------------------------- */
.ehs-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ehs-rule); }
.ehs-tab {
font-family: var(--ehs-font-body);
font-size: 14px; font-weight: 600; color: var(--ehs-muted);
padding: 10px 16px; cursor: pointer; background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -2px;
transition: color .15s ease, border-color .15s ease;
}
.ehs-tab:hover { color: var(--ehs-ink); }
.ehs-tab--active { color: var(--ehs-accent-text); border-bottom-color: var(--ehs-maroon); }
/* ---- Progress ----------------------------------------------------- */
.ehs-progress { height: 8px; background: var(--ehs-rule); border-radius: var(--ehs-r-pill); overflow: hidden; }
.ehs-progress__bar { height: 100%; background: var(--ehs-maroon); border-radius: inherit; }
/* ---- Avatar ------------------------------------------------------- */
.ehs-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--ehs-gold); color: var(--ehs-maroon-deep);
font-family: var(--ehs-font-display); font-weight: 700; font-size: 16px;
display: inline-flex; align-items: center; justify-content: center;
}
/* ---- Divider / gold rule ----------------------------------------- */
.ehs-gold-rule { width: 64px; height: 3px; background: var(--ehs-gold); border: 0; }
/* ---- Shield mark (CSS fallback if no PNG) ------------------------ */
.ehs-shield {
width: 38px; height: 38px; background: var(--ehs-gold);
border-radius: 50% 50% 40% 40%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--ehs-font-display); font-weight: 700; font-size: 18px;
color: var(--ehs-maroon);
}
/* =====================================================================
Extended component library — the full "visual dictionary" set.
===================================================================== */
/* ---- Avatar: photo-first --------------------------------------------
DEFAULT is the account profile picture. Put an ![]()
inside .ehs-avatar;
the initials text under it shows only if the image is missing/broken
(set onerror to hide the img). Presence dot via .ehs-avatar--dot. */
/* overflow stays VISIBLE so the presence dot isn't clipped by the circle mask;
the photo clips itself via border-radius: inherit instead. */
.ehs-avatar { position: relative; overflow: visible; }
/* Photo covers the whole avatar; the initials sit behind as fallback and
are only revealed if the ![]()
is hidden (set onerror="this.style.display='none'"). */
.ehs-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ehs-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
/* Photo avatar: the ![]()
itself carries .ehs-avatar (SSO/Google profile pic). */
.ehs-avatar--photo { object-fit: cover; background: none; }
.ehs-avatar--lg { width: 56px; height: 56px; font-size: 22px; }
.ehs-avatar--square { border-radius: var(--ehs-r-sm); }
.ehs-avatar--dot::after {
content: ''; position: absolute; right: -1px; bottom: -1px;
width: 11px; height: 11px; border-radius: 50%; background: var(--ehs-ok);
border: 2px solid var(--ehs-paper); overflow: visible;
}
.ehs-avatar--away::after { background: var(--ehs-warn); }
.ehs-avatar--busy::after { background: var(--ehs-bad); }
.ehs-avatar--off::after { background: var(--ehs-rule-strong); }
.ehs-avatar-group { display: inline-flex; }
.ehs-avatar-group .ehs-avatar { border: 2px solid var(--ehs-paper); margin-left: -10px; }
.ehs-avatar-group .ehs-avatar:first-child { margin-left: 0; }
/* ---- Icons (line set; use via