/* =====================================================================================================
   layout-v2.css — the "Instrument" shell for _Layout_V2 (#190). Design: docs/layout/2026-10-instrument.
   Loads after Bootstrap 5.3 and maps Bootstrap's CSS variables onto these tokens, so cards, tables,
   modals, forms and dropdowns follow both themes without per-page CSS. Dark mode is a token swap
   (html[data-theme="dark"], the same attribute and storage key the old layouts use).
   ===================================================================================================== */

/* ---------- tokens ---------- */
html.v2 {
  /* chrome (dark in both themes) */
  --c-0: #111316; --c-1: #16191d; --c-2: #1d2126; --c-3: #262b31; --c-4: #30363d;
  --c-line: #2b3137; --c-line-2: #3a4149;
  --c-text: #e8ebee; --c-text-2: #aab2bb; --c-text-3: #78818b;
  /* work surfaces */
  --p-0: #e4e8ec; --p-1: #eef1f4; --p-row: #ffffff; --p-hover: #f5f7fa;
  --p-line: #e2e6ea; --p-line-2: #cbd2d9;
  --ink: #1a1e23; --ink-2: #47505a; --ink-3: #717b86; --ink-4: #a0a8b1;
  /* one accent: azure */
  --accent: #1f7ae0; --accent-rgb: 31, 122, 224; --accent-ink: #1767c2; --accent-dk: #4597ef;
  --accent-wash: #e7f0fc;
  /* status, always shown with a glyph or label */
  --ok: #2e8a57; --warn: #bf7c0c; --neg: #c23b2c;
  /* geometry */
  --top: 44px; --rail: 48px; --aside: 380px;

  /* Bootstrap 5.3, mapped onto the tokens */
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-bg: var(--p-1);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-color: var(--ink-3);
  --bs-secondary-bg: var(--p-0);
  --bs-tertiary-bg: var(--p-hover);
  --bs-border-color: var(--p-line-2);
  --bs-border-color-translucent: rgba(16, 24, 32, .14);
  --bs-link-color: var(--accent-ink);
  --bs-link-color-rgb: 23, 103, 194;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 31, 122, 224;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 31, 122, 224;
  --bs-border-radius: 4px;
  --bs-focus-ring-color: rgba(31, 122, 224, .25);
}

html.v2[data-theme="dark"] {
  --c-0: #0b0c0e; --c-1: #0f1113; --c-2: #141619; --c-3: #1f2327; --c-4: #2a2f34;
  --c-line: #24282d; --c-line-2: #343a40;
  --p-0: #131416; --p-1: #18191b; --p-row: #1e2023; --p-hover: #25282c;
  --p-line: #292c30; --p-line-2: #363a3f;
  --ink: #e8eaed; --ink-2: #b5b9bf; --ink-3: #8b9198; --ink-4: #666c73;
  --accent: #3a8de8; --accent-rgb: 58, 141, 232; --accent-ink: #62a6f0; --accent-dk: #4c9cf0;
  --accent-wash: #1a2b40;
  --ok: #55c084; --warn: #e5a73e; --neg: #f07362;
  --bs-border-color-translucent: rgba(0, 0, 0, .45);
  --bs-link-color-rgb: 98, 166, 240;
  --bs-primary-rgb: 58, 141, 232;
}

/* ---------- base ---------- */
html.v2, .v2-body { min-height: 100%; }
.v2-body { margin: 0; background: var(--p-1); color: var(--ink); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.v2-body ::selection { background: rgba(var(--accent-rgb), .22); }
.v2-i { display: block; flex: none; }
.v2-grow { flex: 1 1 auto; }
.v2-skip { position: absolute; left: -9999px; top: 4px; z-index: 2000; background: var(--accent); color: #fff; padding: 6px 10px; border-radius: 4px; }
.v2-skip:focus { left: 8px; }
.v2 *::-webkit-scrollbar { width: 10px; height: 10px; }
.v2 *::-webkit-scrollbar-thumb { background: #c3cad1; border: 3px solid transparent; background-clip: padding-box; border-radius: 6px; }
.v2 *::-webkit-scrollbar-track { background: transparent; }
html.v2[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #3a3f45; }

/* ---------- shell grid ---------- */
.v2-app { display: grid; min-height: 100vh; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr); }
.v2-app.has-aside { grid-template-columns: var(--rail) minmax(0, 1fr) var(--aside); }
.v2-main { grid-column: 2; grid-row: 2; min-width: 0; padding: 16px 20px 40px; }
.v2-aside { grid-column: 3; grid-row: 2; position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow: auto; background: var(--p-1); border-left: 1px solid var(--p-line-2); }
/* a page can hide its aside (ViewBag.AsideCollapsed, rsV2.setAside) — e.g. a list that opens a detail panel */
.v2-app.has-aside.aside-collapsed { grid-template-columns: var(--rail) minmax(0, 1fr); }
.v2-app.aside-collapsed .v2-aside { display: none; }
/* ViewBag.AsideWide: room for a form beside a map */
.v2-app.aside-wide { --aside: 440px; }
/* ViewBag.MainFlush: a full-bleed map fills <main> exactly (the page gives its map height: 100%) */
.v2-main.v2-main-flush { padding: 0; position: relative; height: calc(100vh - var(--top)); overflow: hidden; }
/* signed out: no rail, so the grid drops that column */
.v2-app.no-rail { grid-template-columns: minmax(0, 1fr); }
.v2-app.no-rail.has-aside { grid-template-columns: minmax(0, 1fr) var(--aside); }
.v2-app.no-rail.has-aside.aside-collapsed { grid-template-columns: minmax(0, 1fr); }
.v2-app.no-rail .v2-main { grid-column: 1; }
.v2-app.no-rail .v2-aside { grid-column: 2; }
.v2-h1 { font-size: 18px; font-weight: 600; margin: 0; }

/* ---------- top bar ---------- */
.v2-top { grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; height: var(--top); padding-right: 8px; background: var(--c-1); border-bottom: 1px solid #0b0d0f; color: var(--c-text); min-width: 0; }
.v2-brand { display: flex; align-items: center; height: 100%; color: var(--c-text); text-decoration: none; flex: none; }
.v2-brand svg { width: var(--rail); display: block; }
.v2-brand:hover { color: #fff; }
.v2-wordmark { font-weight: 600; font-size: 14.5px; margin: 0 14px 0 0; white-space: nowrap; }
.v2-vsep { width: 1px; height: 22px; background: var(--c-line-2); margin: 0 10px; flex: none; }
.v2-scope { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 9px; margin: 0; border: 1px solid var(--c-line-2); border-radius: 4px; background: #1b1f23; color: var(--c-text-2); cursor: pointer; flex: 0 1 auto; min-width: 0; position: relative; }
.v2-scope > .v2-i { pointer-events: none; } /* clicks on the chevron reach the select underneath */
.v2-scope:hover, .v2-scope:focus-within { border-color: #56606b; }
/* blue only for keyboard focus (a mouse click left a blue box around the picker); the ring is the label's, not the select's */
.v2-scope:has(.v2-scope-select:focus-visible) { border-color: var(--accent-dk); box-shadow: 0 0 0 1px var(--accent-dk); }
.v2-scope .v2-scope-select:focus-visible { outline: 0; }
.v2-scope .lbl { color: var(--c-text-3); font-size: 12px; }
.v2-scope-select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; color: var(--c-text); font: inherit; font-weight: 600; font-size: 13px; padding: 0 18px 0 0; margin-right: -16px; min-width: 0; max-width: 260px; cursor: pointer; color-scheme: dark; }
/* The open list. Where the browser can style it (Chromium 135+: Brave, Chrome, Edge) it is a flat dark list like the
   top-bar menus: square rows, a grey hover, a tick on the current group, no focus ring per row. Elsewhere the browser
   draws its own list; color-scheme: dark plus one row colour keeps that list one even surface. */
.v2-scope-select option { color: var(--c-text); background-color: #262b31; font-weight: 400; }
@supports (appearance: base-select) {
  .v2-scope-select, .v2-scope-select::picker(select) { appearance: base-select; }
  .v2-scope-select { display: block; min-height: 0; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v2-scope-select::picker-icon { display: none; } /* the label's own chevron is the icon */
  .v2-scope-select::picker(select) {
    margin-top: 8px; padding: 4px 0; min-width: 220px; max-height: min(70vh, 520px);
    background: #262b31; color: var(--c-text); border: 1px solid #3a4149; border-radius: 5px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42); font-family: var(--bs-body-font-family);
  }
  .v2-scope-select option {
    display: flex; align-items: center; gap: 8px; min-height: 0; padding: 5px 16px 5px 10px; border: 0; border-radius: 0;
    background: transparent; color: var(--c-text); font-size: 13px; font-weight: 400; white-space: nowrap; cursor: pointer;
  }
  .v2-scope-select option::checkmark { content: "\2713"; width: 12px; color: var(--accent-dk); font-weight: 600; }
  .v2-scope-select option:not(:checked)::checkmark { visibility: hidden; } /* keeps every name on one left edge */
  .v2-scope-select option:hover, .v2-scope-select option:focus { background: #323941; color: #fff; outline: 0; }
  .v2-scope-select option:checked { font-weight: 600; }
}
.v2-crumbs { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.v2-crumbs .k { color: var(--c-text-3); font-size: 12px; }
.v2-crumbs .k::after { content: "/"; margin-left: 8px; color: var(--c-line-2); }
.v2-crumbs .v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.v2-tb-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 4px; background: none; color: var(--c-text-2); }
.v2-tb-icon:hover, .v2-tb-icon[aria-expanded="true"] { background: var(--c-3); color: var(--c-text); }
.v2-user { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 4px; border: 0; border-radius: 4px; background: none; color: var(--c-text); }
.v2-user:hover, .v2-user[aria-expanded="true"] { background: var(--c-3); }
.v2-user .meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.v2-user .n { font-size: 13px; font-weight: 600; }
.v2-user .r { font-size: 11.5px; color: var(--c-text-3); }
.v2-user > .v2-i { color: var(--c-text-3); }
.v2-av { width: 26px; height: 26px; border-radius: 50%; background: #33507a; color: #e9f1fb; display: grid; place-items: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; flex: none; }
.v2 :focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 1px; }

/* top-bar menus: dark, like the chrome they hang from */
.v2-menu {
  --bs-dropdown-bg: #262b31; --bs-dropdown-border-color: #3a4149; --bs-dropdown-color: var(--c-text);
  --bs-dropdown-link-color: var(--c-text); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: #323941;
  --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-header-color: var(--c-text-3); --bs-dropdown-divider-bg: #3a4149;
  --bs-dropdown-font-size: .8125rem; --bs-dropdown-item-padding-y: .32rem; --bs-dropdown-box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
  min-width: 210px; box-shadow: var(--bs-dropdown-box-shadow);
}
.v2-menu .dropdown-item { display: flex; align-items: center; gap: 9px; }
.v2-menu .dropdown-item .v2-i, .v2-menu .dropdown-item .fa { color: var(--c-text-2); width: 15px; text-align: center; }
.v2-menu-foot { padding: 6px 16px 2px; border-top: 1px solid #3a4149; margin-top: 4px; font-size: 11.5px; color: var(--c-text-3); }

/* ---------- icon rail ---------- */
.v2-rail { grid-column: 1; grid-row: 2; position: sticky; top: var(--top); height: calc(100vh - var(--top)); z-index: 1020; display: flex; flex-direction: column; padding-top: 6px; background: var(--c-2); border-right: 1px solid #0e1012; }
.v2-rail-item { position: relative; }
.v2-rail-btn { position: relative; height: 42px; display: grid; place-items: center; color: #959ea8; text-decoration: none; }
.v2-rail-btn:hover, .v2-rail-item:has(:focus-visible) .v2-rail-btn, .v2-rail-item.open .v2-rail-btn { color: var(--c-text); background: var(--c-3); }
.v2-rail-btn.active { color: #fff; }
.v2-rail-btn.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--accent-dk); border-radius: 0 2px 2px 0; }
.v2-rail-item.has-sub .v2-rail-btn::after { content: ""; position: absolute; right: 9px; bottom: 10px; border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55; }
.v2-rail-sep { height: 1px; background: var(--c-line); margin: 6px 11px; }
.v2-rail-foot { margin-top: auto; padding: 8px 0 10px; border-top: 1px solid var(--c-line); text-align: center; }
.v2-rail-foot .ver { font-size: 10.5px; color: var(--c-text-3); white-space: nowrap; }
/* flyout: shows on hover, for keyboard focus (:focus-visible, so a mouse click doesn't leave it stuck open) and on
   touch screens after a first tap (layout-v2.js adds .open). The ::before bridges the gap so it doesn't close mid-move. */
.v2-fly { display: none; position: absolute; left: 100%; top: -4px; margin-left: 6px; z-index: 1040; min-width: 180px; padding: 4px 0; background: #262b31; border: 1px solid #3a4149; border-radius: 5px; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); color: var(--c-text); }
.v2-fly::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; }
.v2-rail-item:hover .v2-fly, .v2-rail-item:has(:focus-visible) .v2-fly, .v2-rail-item.open .v2-fly { display: block; }
.v2-fly .ft { padding: 6px 12px; font-weight: 600; white-space: nowrap; }
.v2-fly .fi { display: block; padding: 5px 12px 5px 22px; color: var(--c-text-2); text-decoration: none; white-space: nowrap; }
.v2-fly .fi:hover, .v2-fly .fi:focus { background: #30363e; color: var(--c-text); }
.v2-fly .fi.active { color: #fff; box-shadow: inset 3px 0 0 var(--accent-dk); }

/* ---------- aside (right-hand panel) ---------- */
.v2-aside-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px 6px 14px; background: var(--p-1); border-bottom: 1px solid var(--p-line-2); }
.v2-aside-h h2 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
.v2-aside-body { padding: 12px 14px 20px; }

/* ---------- Bootstrap 5 components in the Instrument style ---------- */
.v2 .btn { --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-border-radius: 4px; --bs-btn-font-weight: 500; }
.v2 .btn-sm { --bs-btn-font-size: .78rem; --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .5rem; }
.v2 .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-ink); --bs-btn-hover-border-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-ink); --bs-btn-active-border-color: var(--accent-ink); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-focus-shadow-rgb: var(--accent-rgb); }
/* the everyday secondary button, on the tokens so it keeps its contrast in dark mode (Bootstrap's is a fixed #6c757d) */
.v2 .btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--p-line-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--p-hover); --bs-btn-hover-border-color: var(--ink-4); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--p-0); --bs-btn-active-border-color: var(--ink-4); --bs-btn-disabled-color: var(--ink-4); --bs-btn-disabled-border-color: var(--p-line-2); --bs-btn-focus-shadow-rgb: var(--accent-rgb); }
.v2 .btn-outline-primary { --bs-btn-color: var(--accent-ink); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); --bs-btn-focus-shadow-rgb: var(--accent-rgb); }
.v2 .card { --bs-card-bg: var(--p-row); --bs-card-border-color: var(--p-line-2); --bs-card-cap-bg: var(--p-1); --bs-card-border-radius: 6px; --bs-card-inner-border-radius: 5px; --bs-card-cap-padding-y: .55rem; --bs-card-cap-padding-x: 1rem; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(16, 24, 32, .04); }
.v2 .card-header h4, .v2 .card-header h5 { font-size: 15px; font-weight: 600; margin: 0; }
.v2 .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--p-line); --bs-table-striped-bg: rgba(16, 24, 32, .025); --bs-table-hover-bg: var(--accent-wash); --bs-table-hover-color: var(--ink); --bs-table-striped-color: var(--ink); margin-bottom: 0; }
html.v2[data-theme="dark"] .v2 .table, html.v2[data-theme="dark"] .table { --bs-table-striped-bg: rgba(255, 255, 255, .025); }
.v2 .table > thead th { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--p-1); border-bottom-color: var(--p-line-2); white-space: nowrap; }
.v2 .table > :not(caption) > * > * { padding: .45rem .6rem; }
.v2 .table-sm > :not(caption) > * > * { padding: .3rem .5rem; }
.v2 .modal { --bs-modal-bg: var(--p-row); --bs-modal-border-color: var(--p-line-2); --bs-modal-header-border-color: var(--p-line-2); --bs-modal-footer-border-color: var(--p-line-2); --bs-modal-border-radius: 6px; --bs-modal-header-padding: .7rem 1rem; }
.v2 .modal-title { font-size: 15px; font-weight: 600; }
.v2 .form-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.v2 .form-control, .v2 .form-select { font-size: .8125rem; border-radius: 4px; background-color: var(--p-row); border-color: var(--p-line-2); color: var(--ink); }
.v2 .form-control:focus, .v2 .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .2); }
.v2 .form-control[readonly] { background-color: var(--p-1); }
.v2 .badge { font-weight: 600; letter-spacing: .01em; }
.v2 .alert { --bs-alert-padding-y: .6rem; --bs-alert-padding-x: .85rem; font-size: .8125rem; }
.v2 .tooltip { --bs-tooltip-font-size: .75rem; }
/* MVC 5 unobtrusive validation classes (the old layouts got these from Site.css, which V2 doesn't load) */
.v2 .validation-summary-valid { display: none; }
.v2 .validation-summary-errors { color: var(--neg); font-size: .8125rem; }
.v2 .validation-summary-errors ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.v2 .field-validation-error { display: block; color: var(--neg); font-size: .78rem; margin-top: .2rem; }
.v2 .input-validation-error { border-color: var(--neg) !important; }
.v2 .input-validation-error:focus { box-shadow: 0 0 0 .2rem rgba(194, 59, 44, .2) !important; }
/* Bootstrap drops modal-lg/-xl to 500px between 576 and 991px; let them use the width they have */
@media (min-width: 576px) and (max-width: 991.98px) {
  .v2 .modal-lg, .v2 .modal-xl { --bs-modal-width: calc(100vw - 3.5rem); }
}

/* ---------- page primitives: use these rather than a per-page copy ---------- */
/* header: <div class="v2-page-head"><h1 class="v2-h1">Title</h1><span class="v2-hint">purpose</span><div class="v2-actions">buttons</div></div> */
.v2-page-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 2px 0 14px; min-height: 32px; }
.v2-page-head .v2-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-hint { color: var(--ink-3); font-size: 12.5px; }
/* empty state: <div class="v2-empty"><i class="fa fa-..."></i><h3>Nothing here yet</h3><p>what to do</p></div> */
.v2-empty { text-align: center; padding: 64px 20px; color: var(--ink-3); }
.v2-empty > .fa, .v2-empty > .v2-i { font-size: 52px; color: var(--ink-4); margin: 0 auto 14px; }
.v2-empty h3, .v2-empty h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.v2-empty p { margin: 0 auto; max-width: 460px; }
/* KPI tiles: <div class="v2-kpis"><div class="v2-kpi"><div class="k">Label</div><div class="v">123</div></div></div> */
.v2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.v2-kpi { padding: 10px 14px 11px; background: var(--p-row); border: 1px solid var(--p-line-2); border-radius: 6px; min-width: 0; }
.v2-kpi .k { font-size: 12px; color: var(--ink-3); }
.v2-kpi .v { font-size: 24px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.v2-kpi .s { font-size: 12px; color: var(--ink-2); }
/* toolbar row (filters, search, bulk actions), usually in a .card-body or above a table card */
.v2-toolbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.v2-toolbar .form-control, .v2-toolbar .form-select { width: auto; }
.v2-mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
/* a full-bleed map inside a MainFlush page */
.v2-map { position: absolute; inset: 0; }
/* Google Maps draws its InfoWindow and controls with light-dark(); under data-bs-theme="dark" the close X turns white
   on a white window. The map UI stays light in both themes. */
.v2 .gm-style { color-scheme: light; color: #1a1e23; }

/* ---------- shared bits the pipeline pages use (system messages, notifications, auto-refresh) ---------- */
.v2 .system-message { position: relative; overflow: hidden; padding: 10px 12px; margin-bottom: 10px; border-left: 3px solid var(--p-line-2); background: var(--p-row); border-radius: 0 4px 4px 0; box-shadow: 0 1px 2px rgba(16, 24, 32, .05); }
.v2 .system-message:hover { border-left-color: var(--accent); }
.v2 .system-message .timestamp { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.v2 .system-message .task { font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.v2 .system-message .message-content { white-space: pre-line; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.v2 .fade-in { animation: v2FadeIn .4s; }
@keyframes v2FadeIn { from { opacity: 0; } to { opacity: 1; } }
.v2 #notification-container { position: fixed; top: calc(var(--top) + 12px); right: 16px; z-index: 1090; width: 340px; max-width: calc(100vw - 32px); }
.v2 .notification { margin-bottom: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.v2 .auto-refresh-indicator { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; animation: v2Pulse 2s infinite; }
@keyframes v2Pulse { 0% { opacity: .45; } 50% { opacity: 1; } 100% { opacity: .45; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1199.98px) {
  html.v2 { --aside: 320px; }
  .v2-app.aside-wide { --aside: 360px; }
}
@media (max-width: 991.98px) {
  .v2-app.has-aside { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: var(--top) auto auto; }
  /* stacked under the content; capped so a long message list doesn't push everything else away */
  .v2-aside { grid-column: 2; grid-row: 3; position: static; height: auto; max-height: 60vh; border-left: 0; border-top: 1px solid var(--p-line-2); }
  .v2-rail { height: auto; min-height: calc(100vh - var(--top)); grid-row: 2 / 4; }
  .v2-wordmark, .v2-user .meta, .v2-crumbs .k { display: none; }
  /* a flush map keeps most of the screen; the stacked Aside scrolls below it (no Aside: the whole screen) */
  .v2-main.v2-main-flush { height: 70vh; min-height: 360px; }
  .v2-app:not(.has-aside) .v2-main.v2-main-flush, .v2-app.aside-collapsed .v2-main.v2-main-flush { height: calc(100vh - var(--top)); }
  .v2-app.no-rail.has-aside { grid-template-columns: minmax(0, 1fr); }
  .v2-app.no-rail .v2-aside { grid-column: 1; }
}
@media (max-width: 575.98px) {
  .v2-scope .lbl, .v2-crumbs { display: none; }
}
/* short windows (or zoomed-in laptops): keep every rail button reachable without scrolling the rail,
   which would clip the flyouts */
@media (max-height: 520px) {
  .v2-rail { padding-top: 2px; }
  .v2-rail-btn { height: 32px; }
  .v2-rail-sep { margin: 3px 11px; }
  .v2-rail-foot { display: none; }
}