@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .table-condensed {
        font-size: 10px;
    }
}


/* ── Service Tracker Route Planner status tokens (guide Aug 11, 2026 + FasCentral UI
   standard rule 1: hex lives ONLY here or in the theme object). The map stop
   bubbles, the Route Breakdown number badges, and the custom-stop magenta
   marker all read these vars, so the three views share ONE color source. */
:root {
    /* snowma 8/26 (R. Nugent): FasDialog / FasConfirm shell tokens (UI Standard 1.3
       companion block). Derived from the Mud palette where a slot exists; bespoke
       values live ONLY here per standing rule 1. */
    --fs-radius-md: 8px;
    --fs-radius-lg: 14px;
    --fs-gap-sm: 8px;
    --fs-gap-md: 12px;
    --fs-gap-lg: 20px;
    --fs-shadow-dialog: 0 20px 40px rgba(0, 0, 0, .20);
    --fs-scrim: rgba(17, 24, 39, .45);
    --fs-warn-bg: #FFF8E1;
    --fs-warn-border: #E6C200;
    --fs-warn-text: #7A5D00;
    --fs-danger-bg: #FDECEA;
    --fs-danger-border: #B91C1C;
    /* mudgrid 8/20: note-indicator + chip tokens so the Mud grid templates carry
       zero inline hex (the classic table's inline styles predate the standard). */
    --stm-note-vendor: #ea580c;
    --stm-note-client: #1d4ed8;
    --stm-note-muted: #d1d5db;
    --stm-chip-surface: #ffffff;
    /* mudgrid2: SURVEY filter pellet dots -- same palette as the survey chip borders */
    /* surveypastel 9/1 (R. Nugent): outline colors REVERT to the original production
       palette. The bolder traffic light set read too dark in PROD, and the rating LETTER
       (G/Y/R/N-A) now carries the accessibility ask on its own, so the border is back to
       being a soft secondary cue. Neutral is the hex the chip base rule used before these
       tokens existed. Chips and the SURVEY filter dots share these, so both revert together.
       The left rail concept is SHELVED pending director approval and was never coded. */
    --stm-svy-green: #34d399;
    --stm-svy-yellow: #fbbf24;
    --stm-svy-red: #f87171;
    --stm-svy-neutral: #d1d5db;
    --stm-status-completed: #2FA66D;
    --stm-status-pending: #F4B400;
    --stm-status-overdue: #E9782E;
    --stm-status-nocheckin: #D64545;
    --stm-status-nofreq: #9D174D;
    --stm-custom-stop: #a855f7;
    --stm-route-accent: #2563eb;
    --stm-rp-brand: #12372E;
    /* fbwave1: dropzone hover/dragover fills = --stm-rp-brand at low opacity */
    --stm-dropzone-hover-fill: rgba(18, 55, 46, 0.06);
    --stm-dropzone-active-fill: rgba(18, 55, 46, 0.14);
    --stm-note-badge-text: #ffffff;
    /* groupdelete item 2: per-photo share chip scrim + muted 'hidden' text over thumbnails */
    --stm-photo-vis-scrim: rgba(17, 24, 39, 0.62);
    --stm-photo-vis-offtext: #cbd5e1;
    /* pdfexport: fallbacks for the MudBlazor theme vars the Export-to-PDF dialog reads,
       in case a Mud upgrade renames one. These same three values are the PDF renderer's
       BodyText / MutedText / RuleLine constants (Services/ServiceTrackerPdfExport.cs),
       so the on-screen dialog and the generated file stay one palette. */
    --stm-dlg-text: #111827;
    --stm-dlg-muted: #4B5563;
    --stm-dlg-line: #D8DEDB;
    /* kpiharden: unknown-author note category in the Notes dialog (blank Username rows).
       The avatar keeps the amber the "?" avatar has always rendered with (it was riding
       the vendor color); the bar and UNKNOWN tag are neutral gray so an unclassified
       author no longer reads as vendor-orange. */
    --stm-note-unknown-av: #ea580c;
    --stm-note-unknown-bar: #9ca3af;
    --stm-note-unknown-tag-bg: #e5e7eb;
    --stm-note-unknown-tag-text: #4b5563;
}

/* fbwave1: Service Tracker grid Notes column - notepad icon + count badge
   (mirrors the vsp pill/badge pattern: 999px radius, 700 weight, token colors). */
.stm-note-ind { position: relative; display: inline-block; color: var(--stm-rp-brand); font-size: 15px; line-height: 1; padding: 2px 8px 0 0; }
.stm-note-ind-count { position: absolute; top: -7px; right: -4px; background: var(--stm-status-pending); color: var(--stm-note-badge-text); border-radius: 999px; padding: 1px 5px; font-size: 10px; font-weight: 700; line-height: 1.2; min-width: 15px; text-align: center; }
/* mudgrid 8/20: tokenized versions of the classic table's inline note-icon styles + chip surface */
.stm-note-vendor { color: var(--stm-note-vendor); font-size: 15px; }
.stm-note-client { color: var(--stm-note-client); font-size: 15px; }
.stm-note-none { color: var(--stm-note-muted); font-size: 12px; }
.stm-chip-open { background: var(--stm-chip-surface); cursor: pointer; }
/* mudgrid4 PARITY (corrected diagnosis): the classic table fits all 22 columns because
   width:100% squeezes them to the viewport. The first Mud build overflowed (resize-mode
   column widths) and the columns past the screen edge were CLIPPED, not missing -- and
   the earlier width:max-content rule here locked that overflow in. Squeeze-to-fit like
   the classic table; the outer .vsp-table-scroll remains the scroll surface if anything
   ever does overflow. */
.vsp-table .mud-table-container { overflow: visible; }
.vsp-table table.mud-table-root { width: 100%; }
/* mudgrid5: one-screen fit parity with the classic table. Classic fits 22 columns via
   10px cell padding + wrapping text; Mud adds wider padding, per-header sort icons and
   (SortMode.Multiple) invisible sort-index spans that together force a horizontal
   scrollbar. Compress and wrap; sorting still works, the index numerals are cosmetic. */
/* mudgrid7: match the PROD classic grid exactly (source of truth per R. Nugent).
   Three-deep selectors so these BEAT MudBlazor's stylesheet on specificity, not load
   order (the mudgrid6 two-class rules tied with Mud's and lost -- gray non-bold text).
   Headers: uppercase bold black ~11px like prod, which wraps at two lines naturally.
   Sort icon buttons are hidden entirely -- per the 9.5.0 HeaderCell source the whole
   column label is the click-to-sort target, and reclaiming that reserved width per
   header is what keeps PDir on screen with the nav menu open, exactly like prod. */
.vsp-table .mud-table-root .mud-table-cell { padding: 6px 7px; white-space: normal; overflow-wrap: normal; line-height: 1.3; }  /* mudgrid14: 2px/side trim x22 cols keeps PDir on screen with the nav open */
/* mudgrid8: tbody td selector at (0,3,2) -- the previous (0,3,0) rule TIED with Mud's own
   cell rule and lost on load order, leaving body text gray/normal in most columns. */
.vsp-table .mud-table-root tbody td.mud-table-cell { font-weight: 600; color: var(--stm-dlg-text); font-size: 12.5px; }
.vsp-table .mud-table-root thead th.mud-table-cell { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--stm-dlg-text); }
/* mudgrid8: auto-layout starves columns whose data is short (Days Since = "2"), wrapping
   the header 4 lines; a floor forces the prod-style two-line break. */
/* mudgrid11: floors sized for the NARROWER container (side menu EXPANDED), so the
   date headers hold their 2-line break in both menu states. "LAST SERVICE" at 11.5px
   bold is ~82px + cell padding, so 104px guarantees the pair never splits to 3 lines. */
.vsp-table th.stm-h-dsls { min-width: 104px; }  /* DAYS SINCE / LAST SERVICE + LAST SERVICE / DATE */
.vsp-table th.stm-h-nesd { min-width: 120px; }  /* NEXT EXPECTED / SERVICE DATE */
/* mudgrid8: filter card labels + controls black and bold (per R. Nugent). The card's
   double class beats the page's inline style block, which loads after this sheet. */
.vsp-filter-card.vsp-filter-v2 label { color: var(--stm-dlg-text); font-weight: 700; }
.vsp-filter-card.vsp-filter-v2 .form-select,
.vsp-filter-card.vsp-filter-v2 .form-control,
.vsp-filter-card.vsp-filter-v2 .vsp-mlf-box,
.vsp-filter-card.vsp-filter-v2 .vsp-mlf-ph,
.vsp-filter-card.vsp-filter-v2 .vsp-mlf-opt { color: var(--stm-dlg-text); font-weight: 600; }
.vsp-table th .column-header { white-space: normal; }
.vsp-table .mud-sort-index { display: none; }
.vsp-table th .mud-icon-button { display: none; }
/* mudgrid9: the ACTIVELY sorted column shows its direction arrow (classes verified in the
   9.5.0 HeaderCell source: mud-direction-asc/desc are present only while sorted), so the
   reserved-width saving holds everywhere except the one header that earns an arrow. */
.vsp-table th .mud-icon-button.mud-direction-asc,
.vsp-table th .mud-icon-button.mud-direction-desc { display: inline-flex; padding: 0; }
.vsp-table th .mud-icon-button.mud-direction-asc .mud-icon-root,
.vsp-table th .mud-icon-button.mud-direction-desc .mud-icon-root { font-size: 15px; }
.vsp-table .vsp-count-btn { font-size: 12px; padding: 3px 8px; white-space: nowrap; }
.vsp-table .vsp-pill { font-size: 11.5px; padding: 3px 8px; white-space: nowrap; }  /* status pellets (No Checkin etc.) never wrap */
.vsp-table .stm-nowrap { white-space: nowrap; }  /* single-line cells: Store # */
.vsp-table .vsp-survey-chip { font-size: 11.5px; padding: 3px 6px; line-height: 1.25; } /* surveycompact 8/31: PROD sizing restored, initial rating letters keep the box narrow */
/* mudgrid5: survey / service-issue chips keep the classic OUTLINE look. The vendor portal
   dialog's inline style block leaks filled chip styles globally (known scoping bug); this
   three-class selector outranks its two-class rules inside the grid. */
.vsp-table .vsp-survey-chip.stm-chip-open { background: var(--stm-chip-surface); color: var(--stm-dlg-text); cursor: pointer; }
/* mudgrid2: colored pellet dots in the SURVEY filter dropdown (per R. Nugent) */
.stm-svy-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.stm-svy-dot.green { background: var(--stm-svy-green); }
.stm-svy-dot.yellow { background: var(--stm-svy-yellow); }
.stm-svy-dot.red { background: var(--stm-svy-red); }
.stm-svy-dot.ivueit { background: var(--stm-rp-brand); }
.stm-svy-dot.none { background: var(--stm-note-muted); }

/* groupdelete item 2: per-photo Client/Vendor share chips on grouped note thumbnails.
   Hover (or keyboard-focus) the thumbnail to reveal; colored green when shared to that
   lane, muted crossed-eye on the dark scrim when hidden. Token colors only (rule 1). */
.stn-photo-wrap { position: relative; display: inline-block; }
.stn-photo-vis { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s ease-in-out; }
.stn-photo-wrap:hover .stn-photo-vis, .stn-photo-vis:focus-within { opacity: 1; }
.stn-photo-vis-btn { display: inline-flex; align-items: center; gap: 3px; border: 0; border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 700; line-height: 1.4; cursor: pointer; background: var(--stm-photo-vis-scrim); color: var(--stm-photo-vis-offtext); }
.stn-photo-vis-btn:hover { color: var(--stm-note-badge-text); }
.stn-photo-vis-on { background: var(--stm-status-completed); color: var(--stm-note-badge-text); }
/* mudeye 8/26 (R. Nugent): sizing for FasEye (MudIcon) inside the visibility chips.
   Two class selectors on purpose: site.css loads before MudBlazor.min.css in _Host,
   so a single class rule would lose the cascade to Mud's own size and margin defaults.
   Color needs no rule here: Mud fills the svg with currentColor and each chip sets color. */
.stn-vis .fas-eye, .stn-photo-vis-btn .fas-eye { font-size: 12px; width: 1em; height: 1em; margin: 0; margin-inline-end: 0; }
/* snowma 8/27 (R. Nugent): the Fas button family, promoted from FasConfirm's scoped css
   when the snow assign dialogs became its second and third consumers (rule of two).
   One source: FasConfirm, SnowMassAssignDialog and SnowModifyStatusDialog all read these. */
.fas-btn { border: 1px solid var(--mud-palette-lines-default, #D1D5DB); background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #111827); border-radius: var(--fs-radius-md); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fas-btn:hover:not(:disabled) { border-color: var(--mud-palette-primary, #12372E); color: var(--mud-palette-primary, #12372E); }
.fas-btn:disabled { opacity: .5; cursor: default; }
.fas-btn-primary { background: var(--mud-palette-primary, #12372E); border-color: var(--mud-palette-primary, #12372E); color: var(--mud-palette-primary-text, #fff); }
.fas-btn-primary:hover:not(:disabled) { color: var(--mud-palette-primary-text, #fff); filter: brightness(1.12); }
.fas-btn-danger { background: var(--mud-palette-error, #B91C1C); border-color: var(--mud-palette-error, #B91C1C); }
/* uipolish audit: grouped-thumbnail pointer cursor moved out of an inline style attr. */
.stn-photo-click { cursor: pointer; }

/* visfix item 4: per-photo CLIENT share chip on the Check-Ins dialog thumbnail strip
   (Components/ServiceTrackerWeeklyCheckinsDialog.razor). REUSES the notes dialog's
   .stn-photo-vis / .stn-photo-vis-btn / .stn-photo-vis-on chip above so both photo strips
   speak one visual language -- only the POSITION changes, because the check-in frame
   already carries its phase badge at bottom-left, so the chip takes top-right. Hover or
   keyboard focus reveals it; a photo currently HIDDEN from the client keeps its chip on
   screen so the exception is visible without hunting. No hex (rule 1 -- the chip's colors
   come from the shared classes), and it lives here rather than in that dialog's inline
   <style> block because Blazor emits those globally (rule 2). */
.stm-ckin-vis { left: auto; right: 3px; bottom: auto; top: 3px; }
.vsp-checkins-photo-frame:hover .stm-ckin-vis, .stm-ckin-vis:focus-within { opacity: 1; }
.stm-ckin-vis.stm-ckin-vis-off { opacity: 1; }

/* pdfexport: "Export to PDF" dialog fact list (Pages/ServiceTracker.razor). Lives here
   rather than in an inline <style> block because Blazor emits those globally (rule 2),
   and reads MudBlazor theme variables so it tracks a rebrand (rule 1 -- no hex). */
.stm-pdfexp-facts { border: 1px solid var(--mud-palette-lines-default, var(--stm-dlg-line)); border-radius: var(--mud-default-borderradius, 4px); padding: 8px 12px; }
.stm-pdfexp-row { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; }
.stm-pdfexp-row + .stm-pdfexp-row { border-top: 1px solid var(--mud-palette-lines-default, var(--stm-dlg-line)); }
.stm-pdfexp-lbl { flex: 0 0 88px; font-size: 12px; font-weight: 700; color: var(--mud-palette-text-secondary, var(--stm-dlg-muted)); text-transform: uppercase; letter-spacing: .3px; }
.stm-pdfexp-val { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--mud-palette-text-primary, var(--stm-dlg-text)); }

/* ============================================================================
   sfmui: Service Frequency Manager page chrome (Pages/ServiceFrequencyManager.razor).
   Lives here rather than in an inline <style> block because Blazor emits those
   globally (standing rule 2), and reads MudBlazor theme variables so a rebrand
   carries through (standing rule 1 -- no hex outside the theme object / :root).
   ========================================================================== */
.sfm-appbar { display: flex; align-items: center; gap: 12px; background: var(--mud-palette-appbar-background, var(--mud-palette-primary)); color: var(--mud-palette-appbar-text, var(--mud-palette-primary-text)); padding: 0 18px; height: 56px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.sfm-appbar-logo { height: 34px; max-width: 150px; object-fit: contain; background: var(--mud-palette-surface); border-radius: 6px; padding: 3px 6px; flex: none; }
.sfm-appbar-title { font-size: 18px; font-weight: 600; letter-spacing: .5px; }
.sfm-appbar-spacer { flex: 1 1 auto; }
.sfm-appbar-chip { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }

/* Drill-path breadcrumb + the toolbar row that carries Go Back / Mass Assign. */
.sfm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.sfm-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sfm-spacer { flex: 1 1 auto; }

/* Mass-assign date fields: <InputDate> is kept as-is (it binds DateOnly, which
   MudDatePicker does not), so it only gets the surrounding Mud look. */
.sfm-field { display: flex; flex-direction: column; gap: 2px; }
.sfm-field-lbl { color: var(--mud-palette-text-secondary); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.sfm-date { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius, 4px); padding: 7px 8px; font-size: 14px; line-height: 1.2; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); }

.sfm-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; }

/* kpiharden: unknown-author category for the Service Tracker Notes dialog. The dialog
   renders stn-bar stn-cat-@(cat)-bar, stn-avatar stn-cat-@(cat)-av and the stn-pill
   stn-cat-@(cat) tag from AuthorCat(); "unknown" (blank Username) is new. Lives here,
   not in that dialog's inline <style> block (rule 2); token colors only (rule 1).
   Deliberately NO .stn-cat-unknown-dot: unknown has no filter chip -- it appears only
   under the All filter and is excluded from the Vendor/Client/User counts, matching
   the Vendor Activity KPI classifier which never counts blank authors as vendor. */
.stn-cat-unknown-bar { background: var(--stm-note-unknown-bar); }
.stn-cat-unknown-av { background: var(--stm-note-unknown-av); }
.stn-cat-unknown { background: var(--stm-note-unknown-tag-bg); color: var(--stm-note-unknown-tag-text); }