/* Clairvynt Synapse — Layout (ported from the prototype v3): structural :root tokens,
   sidebar, topbar, breadcrumbs, main grid. The sidebar is static-expanded for v1
   (plan D10) — the prototype's collapse-button and collapse JS are intentionally omitted.
   MudBlazor supplies the global box-sizing:border-box reset these rules assume. */

/* Text and control roles are explicit because brand accents do not meet light-surface contrast. */
:root {
    --color-navy: var(--clv-color-deep-teal);
    --color-blue: var(--clv-color-slate-blue);
    --color-teal: var(--clv-color-muted-sage);
    --color-service-grey: var(--clv-color-text-link);
    --color-dark-bg: var(--clv-color-dark-navy);
    --color-white: var(--clv-color-white);
    --color-teal-text: var(--clv-color-text-link);
    --color-service-light: var(--clv-color-text-secondary);
    --color-success: var(--clv-color-success-light);
    --color-success-light: var(--clv-tint-success);
    --color-warning: var(--clv-color-warning-light);
    --color-warning-light: var(--clv-tint-warning);
    --color-error: var(--clv-color-error-light);
    --color-error-light: var(--clv-tint-error);
    --color-info: var(--clv-color-info-light);
    --color-info-light: var(--clv-tint-info);
    --color-success-tint: var(--clv-tint-success);
    --color-success-tint-border: var(--clv-tint-success-border);
    --color-warning-tint: var(--clv-tint-warning);
    --color-warning-tint-border: var(--clv-tint-warning-border);
    --color-error-tint: var(--clv-tint-error);
    --color-error-tint-border: var(--clv-tint-error-border);
    --color-info-tint: var(--clv-tint-info);
    --color-info-tint-border: var(--clv-tint-info-border);
    --color-draft-tint: var(--clv-tint-draft);
    --color-draft-tint-border: var(--clv-tint-draft-border);
    --color-sage-14: var(--clv-sage-14);
    --color-surface: var(--clv-color-surface);
    --color-border: var(--clv-color-border);
    --color-border-light: #E0EAEA;
    --color-control-border: var(--clv-color-control-border);
    --color-text-primary: var(--color-navy);
    --color-text-secondary: var(--color-service-grey);
    --color-text-link: var(--color-teal-text);
    --color-text-link-hover: var(--clv-color-text-link-hover);
    --color-text-inverse: var(--color-white);
    --font-primary: var(--clv-font-body);
    --font-heading: var(--clv-font-heading);
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --text-title1: 2.25rem;
    --text-title2: 1.875rem;
    --text-title3: 1.5rem;
    --text-body-lg: 1.25rem;
    --text-body: 1rem;
    --text-subhead: 0.875rem;
    --text-footnote: 0.8125rem;
    --text-caption1: 0.75rem;
    --text-caption2: 0.6875rem;
    --text-overline: 0.75rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,4,50,0.05);
    --shadow-md: 0 4px 16px rgba(0,4,50,0.08);
    --shadow-lg: 0 8px 32px rgba(0,4,50,0.12);
    --shadow-focus: 0 0 0 2px var(--clv-color-white), 0 0 0 4px var(--clv-color-text-link);
    --shadow-error-ring: 0 0 0 2px var(--clv-color-white), 0 0 0 4px var(--clv-color-error-light);
    --duration-fast: 100ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-default: cubic-bezier(0.25,0.1,0.25,1);
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --topbar-height: 64px;
    --color-ice-blue: var(--clv-color-ice-blue);
    --color-deep-navy: var(--clv-color-deep-navy);
    --font-mono: var(--clv-font-mono);
}

/* Base document typography. Compatibility aliases above map the existing Synapse roles to the
   vendored Clairvynt tokens loaded before this stylesheet. */
html, body {
    font-family: var(--font-primary);
    background-color: var(--color-surface);
    color: var(--color-navy);
    font-weight: var(--font-light);
}
h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2,
.mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--font-heading);
    color: var(--color-navy);
    font-weight: var(--font-medium);
}
code, pre, .clv-quote {
    font-family: var(--font-mono);
}
.clv-quote {
    display: block;
    background-color: var(--color-ice-blue);
    border-left: 3px solid var(--color-teal);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    color: var(--color-deep-navy);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================================
   v21 app shell (feature 029): topbar + sidebar reskin to the
   Synapse_Prototype-v21 design. Palette/typography tokens below
   retain the prototype roles with values that remain legible on light surfaces.
   The older :root tokens above remain for the page bodies (later 029 phases reskin those).
   ============================================================ */
:root{
  --v21-navy:var(--clv-color-deep-teal);--v21-blue:var(--clv-color-slate-blue);--v21-teal:#6E9B9B;--v21-ice:#E4EFEF;
  --v21-soft:#F4F8F8;--v21-surface:#F1F6F6;--v21-white:var(--clv-color-white);--v21-grey:var(--clv-color-text-link);
  --v21-border:#D4E0E0;--v21-border-light:#E7EFEF;--v21-success:var(--clv-color-success-light);
  --v21-warning:var(--clv-color-warning-light);--v21-error:var(--clv-color-error-light);--v21-accent:var(--clv-color-deep-teal);
  --v21-head:var(--clv-font-heading);
  --v21-topbar:60px;--v21-sidebar:252px;--v21-sidebar-collapsed:64px;
  --v21-data-content-max:2048px;
  --v21-r-sm:5px;--v21-r-md:8px;--v21-r-lg:12px;--v21-r-full:9999px;
}

.app-layout{display:flex;min-height:100vh}

/* ---- Topbar (v21) ---------------------------------------- */
.topbar{height:var(--v21-topbar);background:var(--v21-white);border-bottom:1px solid var(--v21-border);display:flex;align-items:center;padding:0 22px;gap:16px;position:fixed;top:0;left:0;right:0;z-index:150}
.topbar-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;color:inherit}
.topbar-brand-icon{height:28px;width:auto;flex-shrink:0;display:block}
.topbar-sep{width:1px;height:32px;background:var(--color-border-light);margin:0 16px;flex-shrink:0}
.topbar-product-name{font-family:var(--v21-head);font-size:18px;font-weight:500;color:var(--v21-navy);white-space:nowrap;letter-spacing:-0.01em}
.topbar-search{position:relative;width:420px;max-width:38vw;flex-shrink:1}
.topbar-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--v21-grey);pointer-events:none}
.topbar-search input{width:100%;height:38px;border:1px solid var(--color-control-border);border-radius:var(--v21-r-full);padding:0 14px 0 36px;font-size:13.5px;background:var(--v21-surface);color:var(--v21-navy)}
.topbar-search input::placeholder{color:var(--v21-grey)}
.topbar-search input:focus{outline:none;border-color:var(--v21-blue);background:var(--v21-white);box-shadow:var(--shadow-focus)}
.topbar-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.topbar-avatar{width:32px;height:32px;border-radius:var(--v21-r-full);background:var(--v21-ice);color:var(--v21-navy);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}

/* v55 user menu: the avatar is the single topbar control; identity, preview, Settings and sign-out
   live in its dropdown. */
.user-menu{position:relative}
.user-menu-trigger{display:flex;align-items:center;gap:9px;background:none;border:none;padding:4px 6px 4px 4px;border-radius:var(--v21-r-full);cursor:pointer}
.user-menu-trigger:hover .topbar-avatar{background:var(--v21-blue);color:var(--v21-white)}
.user-menu-trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* v55 follow-up: name + account type visible on the trigger itself, not only inside the menu. */
.user-menu-trigger-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.user-menu-trigger-name{font-size:12.5px;font-weight:600;color:var(--v21-navy);white-space:nowrap}
.user-menu-trigger-role{font-size:10.5px;color:var(--v21-grey);white-space:nowrap}
.user-menu-trigger-role.lens{color:var(--color-warning);font-weight:600}
@media(max-width:900px){.user-menu-trigger-text{display:none}}
.user-menu-caret{width:14px;height:14px;color:var(--v21-grey);flex-shrink:0}
.user-menu-backdrop{position:fixed;inset:0;z-index:190;background:transparent}
.user-menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:200;width:280px;background:var(--v21-white);border:1px solid var(--v21-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.user-menu-identity{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--v21-border-light)}
.user-menu-avatar-lg{width:40px;height:40px;font-size:14px}
.user-menu-identity-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.user-menu-name{font-size:13.5px;font-weight:600;color:var(--v21-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu-role{font-size:11.5px;color:var(--v21-grey)}
.user-menu-section{padding:10px 12px;border-bottom:1px solid var(--v21-border-light)}
.user-menu-section:last-child{border-bottom:none}
.user-menu-section-label{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--v21-grey);margin:0 4px 6px}
.user-menu-role-switch{width:100%;height:44px;border:1px solid var(--color-control-border);border-radius:var(--radius-md);background:var(--v21-white);color:var(--v21-navy);font-size:12.5px;font-weight:500;padding:0 30px 0 10px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23416581' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.user-menu-role-switch:focus{outline:none;border-color:var(--v21-blue);box-shadow:var(--shadow-focus)}
.user-menu-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:none;background:none;border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--v21-navy);text-decoration:none;cursor:pointer;text-align:left}
.user-menu-item:hover{background:var(--v21-soft)}
.user-menu-item-ico{width:16px;height:16px;color:var(--v21-grey);flex-shrink:0}
.user-menu-item-disabled{color:var(--v21-grey);cursor:default}
.user-menu-item-disabled:hover{background:none}
.user-menu-field-error{display:block;margin:var(--space-2) var(--space-1) 0;color:var(--color-error);font-size:var(--text-caption1);line-height:1.4}

.preview-banner{position:fixed;top:var(--v21-topbar);left:0;right:0;z-index:145;display:flex;min-height:60px;max-width:100vw;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-2) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-ice-blue);color:var(--color-navy);box-sizing:border-box}
.preview-banner span{min-width:0;line-height:1.35;overflow-wrap:anywhere}
.preview-exit{min-width:108px;min-height:44px;flex:0 0 auto}
.preview-exit:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.app-layout.preview-active .sidebar{top:calc(var(--v21-topbar) + 60px)}
.app-layout.preview-active .main-wrapper{margin-top:calc(var(--v21-topbar) + 60px);min-height:calc(100vh - var(--v21-topbar) - 60px)}

.role-admin-page .tabs{margin-bottom:var(--space-5)}
.role-admin-panel.is-hidden{display:none}

/* ---- Sidebar (v21) --------------------------------------- */
.sidebar{width:var(--v21-sidebar);background:var(--v21-white);border-right:1px solid var(--v21-border);display:flex;flex-direction:column;position:fixed;top:var(--v21-topbar);left:0;bottom:0;z-index:100;overflow:hidden;transition:width 150ms ease}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:0 6px 6px 0;color:var(--v21-grey);font-size:14px;font-weight:var(--font-regular);transition:background 150ms ease,border-color 150ms ease,color 150ms ease;cursor:pointer;width:100%;text-align:left;white-space:nowrap;border-left:3px solid transparent;text-decoration:none}
.nav-item:hover{background:var(--v21-soft);color:var(--v21-navy)}
.nav-item.active{background:var(--v21-ice);color:var(--v21-navy);font-weight:var(--font-medium);border-left-color:var(--v21-blue)}
.nav-item .nav-ico{width:18px;height:18px;flex-shrink:0}
.nav-item-child{font-size:13.5px;padding-left:18px}
.nav-label{font-family:var(--font-primary)}
.nav-badge{margin-left:auto;background:var(--v21-blue);color:#fff;font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--v21-r-full);min-width:20px;text-align:center}
/* Flat Library group (feature 037): items listed directly under Dashboard, no group header. */
.nav-flat{display:flex;flex-direction:column;margin-top:1px}
.nav-flat-body{display:flex;flex-direction:column;gap:2px}
/* v28 accordion nav groups (feature 037): icon + navy Archivo head, left-rail body,
   amber count badge. Captured verbatim from the Synapse_Prototype-v28 #review-sidebar-nav
   style block; hex mapped to the v21 token set where one exists. */
.nav-group{display:flex;flex-direction:column;margin-top:1px}
.nav-group-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 14px;margin-right:8px;border-radius:6px;color:var(--v21-navy);font-size:12.5px;font-weight:600;font-family:var(--v21-head);letter-spacing:.02em;background:none;border:none;cursor:pointer;transition:background .12s}
.nav-group-head:hover{background:rgba(216,234,233,.55)}
.nav-group-head .ngi{width:17px;height:17px;flex-shrink:0;color:var(--v21-blue)}
.nav-group-label{flex:1;min-width:0;line-height:1.2;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--v21-navy);text-transform:none;font-family:var(--v21-head)}
.nav-group-caret{width:12px;height:12px;color:var(--v21-grey);transition:transform .18s;flex-shrink:0}
.nav-group.open .nav-group-caret{transform:rotate(90deg)}
/* Group head active state: shown only while the child rows are hidden (group closed or rail
   collapsed) — when a child row is visible it already carries the location highlight. */
.nav-group:not(.open) .nav-group-head.active,
.sidebar.collapsed .nav-group-head.active{background:var(--color-ice-blue);box-shadow:inset 3px 0 0 var(--v21-blue)}
.nav-group-badge{background:var(--v21-warning);color:#fff;font-family:var(--v21-head);font-size:10px;font-weight:600;padding:1px 7px;min-width:20px;height:18px;line-height:16px;text-align:center;border-radius:var(--v21-r-full)}
.nav-group-badge.empty{background:transparent;color:var(--v21-grey);border:1px solid var(--v21-border-light)}
.nav-group-body{display:flex;flex-direction:column;gap:1px;margin:1px 8px 6px 14px;padding-left:7px;border-left:1px solid var(--v21-border-light)}
/* Child rows inside an accordion body are full nav items sitting in the left rail: square pill,
   no left border (the rail carries the line); active is the v28 ice-blue fill + inset state bar. */
.nav-group-body .nav-item{font-size:13px;padding:7px 13px;border-radius:6px;border-left:none}
.nav-group-body .nav-item:hover{background:rgba(216,234,233,.55);color:var(--v21-navy)}
.nav-group-body .nav-item.active{background:var(--color-ice-blue);color:var(--v21-navy);font-weight:var(--font-medium);box-shadow:inset 3px 0 0 var(--v21-blue);border-left:none}
/* v37: the collapse affordance is a bare chevron, no label. */
.sidebar-collapse{display:flex;align-items:center;gap:0;padding:11px 15px;margin:0;background:none;border:none;border-top:1px solid var(--v21-border-light);color:var(--v21-grey);font-size:13px;cursor:pointer;width:100%;text-align:left;white-space:nowrap}
.sidebar-collapse:hover{background:var(--v21-soft);color:var(--v21-navy)}
.nav-item:focus-visible,.nav-group-head:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.nav-group-body .nav-item.active:focus-visible{box-shadow:inset 3px 0 0 var(--v21-blue),var(--shadow-focus)}
.sidebar.collapsed .nav-group-head.active:focus-visible{box-shadow:inset 3px 0 0 var(--v21-blue),var(--shadow-focus)}
.sidebar-collapse:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-white),inset 0 0 0 4px var(--color-text-secondary)}
.sidebar-collapse .nav-ico{width:18px;height:18px;flex-shrink:0}

/* Collapsed sidebar: icons only, hide labels/groups/badges. */
.sidebar.collapsed{width:var(--v21-sidebar-collapsed)}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-group-label,.sidebar.collapsed .nav-group-caret,.sidebar.collapsed .nav-badge,.sidebar.collapsed .nav-group-badge{opacity:0;width:0;overflow:hidden;pointer-events:none}
.sidebar.collapsed .nav-group-body{display:none}
/* Collapsed alignment: .nav-item carries a 3px transparent left border (Slate Blue when active); mirror it
   with a 3px transparent right border so the centred icon sits on the true rail centre, not 1.5px
   right of it. .nav-group-head has no border but inherits margin-right:8px + gap:11px (icon↔hidden
   label/caret) — both must be zeroed or its icon drifts ~5px left of the plain items. */
.sidebar.collapsed .nav-item{justify-content:center;padding:9px 0;gap:0;border-right:3px solid transparent}
.sidebar.collapsed .nav-item-child{padding-left:0}
.sidebar.collapsed .nav-group-label{flex-grow:0}
.sidebar.collapsed .nav-group-head{justify-content:center;padding:6px 0;margin-right:0;gap:0}
.sidebar.collapsed .sidebar-collapse{justify-content:center;gap:0}
/* Collapsing must give the content column the reclaimed width — without this the manual toggle
   shrank the sidebar but .main-wrapper kept the 252px margin, wasting 188px (the 13"-laptop fix). */
.app-layout:has(.sidebar.collapsed) .main-wrapper{margin-left:var(--v21-sidebar-collapsed);width:calc(100% - var(--v21-sidebar-collapsed))}

/* Hover peek: a collapsed rail expands OVER the content while the pointer is on it, then hides
   again on leave. The rail is position:fixed and .main-wrapper keeps its 64px margin, so this is
   an overlay, not a reflow — the content never shifts. Hover-capable pointers only; the chevron
   toggle stays the way to pin it open. */
@media(min-width:501px) and (hover:hover){
  .sidebar.collapsed:hover{width:var(--v21-sidebar);box-shadow:var(--shadow-lg)}
  .sidebar.collapsed:hover .nav-label,.sidebar.collapsed:hover .nav-group-label,.sidebar.collapsed:hover .nav-group-caret,.sidebar.collapsed:hover .nav-badge,.sidebar.collapsed:hover .nav-group-badge{opacity:1;width:auto;overflow:visible;pointer-events:auto}
  .sidebar.collapsed:hover .nav-group-body{display:flex}
  .sidebar.collapsed:hover .nav-item{justify-content:flex-start;padding:9px 13px;gap:11px;border-right:none}
  .sidebar.collapsed:hover .nav-group-body .nav-item{padding:7px 13px}
  .sidebar.collapsed:hover .nav-item-child{padding-left:18px}
  .sidebar.collapsed:hover .nav-group-label{flex-grow:1}
  .sidebar.collapsed:hover .nav-group-head{justify-content:flex-start;padding:9px 14px;margin-right:8px;gap:11px}
  .sidebar.collapsed:hover .sidebar-collapse{justify-content:flex-start}
}

.sidebar-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--v21-border-light);font-size:var(--text-caption1);color:var(--color-service-grey)}
/* v55: width is bounded (not just margin-offset) so a wide table scrolls inside its .tbl-scroll
   container instead of stretching the whole page sideways on 13" laptops. */
.main-wrapper{margin-left:var(--v21-sidebar);margin-top:var(--v21-topbar);width:calc(100% - var(--v21-sidebar));min-width:0;flex:1;display:flex;flex-direction:column;min-height:calc(100vh - var(--v21-topbar));transition:margin-left 150ms ease,width 150ms ease}
/* v37 shell: breadcrumbs sit on the page background (no bar), uppercase area crumb, plain links. */
.breadcrumbs{padding:var(--space-5) var(--space-10) 0;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-secondary);background:transparent;border-bottom:none;display:flex;align-items:center;gap:var(--space-2)}
.breadcrumbs a{color:var(--color-text-link);text-transform:none;letter-spacing:0}.breadcrumbs a:hover{color:var(--color-text-link-hover);text-decoration:underline}.breadcrumbs .current{color:var(--color-navy);font-weight:var(--font-medium);text-transform:none;letter-spacing:0}.breadcrumbs .sep{color:var(--color-text-secondary)}
/* v55: cap the readable column on very wide screens (27-30" monitors) — tables stretched
   edge-to-edge past ~1800px read as sparse stripes. Cap + center; 13" behaviour unchanged. */
.main-content{flex:1;padding:var(--space-10) var(--space-10) var(--space-12);max-width:1800px;width:100%;margin-left:auto;margin-right:auto}
.breadcrumbs{max-width:1800px;width:100%;margin-left:auto;margin-right:auto}
/* Assignment tables benefit directly from the extra room on a 30-inch display. Keep the shared
   readable shell cap for every other route, and widen the page and its breadcrumb together. */
.main-content:has(> .assignments-page),
.main-wrapper:has(.assignments-page) > .breadcrumbs,
.main-content:has(> .settings-shell-grid),
.main-wrapper:has(.settings-shell-grid) > .breadcrumbs{max-width:var(--v21-data-content-max)}
/* v55 page head: compact working-title scale (the v37 2.25rem display title plus gradient eyebrow
   spent ~140px of every viewport before content started; on 13" laptops that pushed tables below
   the fold). No eyebrow, tighter block margin. */
.page-header{margin-bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-1)}
.page-title{font-size:1.75rem;font-weight:var(--font-medium);font-family:var(--font-heading);color:var(--color-navy);line-height:1.2;letter-spacing:-.015em;margin-bottom:0}
/* Blazor's FocusOnNavigate moves focus to the page h1 on every route change (a screen-reader
   affordance). The heading is not interactive, so suppress the visible focus ring it would draw. */
.page-title:focus{outline:none}
.page-subtitle{font-size:var(--text-subhead);color:var(--color-service-grey)}

/* Laptop widths (≤1512px, matching Sidebar.razor's CollapseBelowPx): tighter page gutters so the
   content column keeps its room. The sidebar's initial collapsed state at these widths is
   Blazor-driven (Sidebar.razor, on init) rather than a CSS force-collapse — a media block that
   collapsed regardless of the .collapsed class used to live here (≤1024px) and made the toggle a
   no-op at those widths. */
@media(max-width:1512px){
  .main-content{padding:var(--space-6) var(--space-6) var(--space-10)}
  .breadcrumbs{padding:var(--space-5) var(--space-6) 0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.user-menu-email {
    display: block;
    margin-top: 2px;
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* Preview is a server-enforced read-only mode. Remove known write affordances while retaining
   filters, links and other safe controls. */
.preview-active .asg-bulkbar,
.preview-active .asg-cb,
.preview-active .row-cta,
.preview-active .asg-actionbar,
.preview-active .issue-modal-overlay,
.preview-active .rq-actions,
.preview-active .rq-check,
.preview-active .rq-modal-overlay,
.preview-active .imp-new-btn,
.preview-active .imp-retry,
.preview-active .imp-modal,
.preview-active .imp-modal-overlay,
.preview-active .mr36-toolbar-right .mr36-btn,
.preview-active .mp-cbcell,
.preview-active .mp-bulkbar,
.preview-active .mp-row-actions,
.preview-active .action-btns,
.preview-active .kind-edit,
.preview-active .kind-inline-select,
.preview-active .mr36-cbcell,
.preview-active .mr36-row-actions,
.preview-active .mr36-bulkbar {
    display: none !important;
}

/* #307: the skip link is the first focusable shell control and remains visible while focused. */
.skip-link{position:absolute;left:var(--space-4);top:var(--space-3);z-index:1000;transform:translateY(-180%);background:var(--color-navy);color:var(--color-white);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-weight:var(--font-medium);text-decoration:none}
.skip-link:focus{transform:translateY(0);outline:none;box-shadow:var(--shadow-focus)}
#main-content:focus{outline:none}
.user-menu-panel:focus-visible,.user-menu-item:focus-visible,.user-menu-role-switch:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
@media(max-width:500px){
  .topbar{padding:0 var(--space-3);gap:var(--space-2)}
  .topbar-sep{margin:0 var(--space-2)}
  .breadcrumbs{min-width:0;flex-wrap:wrap}
  .breadcrumbs .current{min-width:0;overflow-wrap:anywhere}
  .user-menu-panel{position:fixed;top:calc(var(--v21-topbar) + var(--space-2));right:var(--space-2);left:var(--space-2);width:auto;max-width:calc(100vw - (2 * var(--space-2)))}
  .preview-banner{justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-caption1)}
  .preview-exit{min-width:100px}
}