/* The pieces pages are built from: shell, buttons, forms, tables, badges, documents and the chart kit. */
@layer components {
  /* ─── Skip link ──────────────────────────────────────────────────────────── */

  .skip-link {
    position: absolute;
    top: var(--md-sys-spacing-2);
    left: var(--md-sys-spacing-2);
    z-index: 1000;
    transform: translateY(-200%);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font: var(--md-sys-typescale-label-large);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
  }
  .skip-link:focus { transform: none; text-decoration: none; }

  /* ─── App frame: the rail beside a pane of top app bar over content ──────── */

  .app {
    display: flex;
    flex: 1;
    min-height: 0;
  }

  .app-pane {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Positioned, so what is placed absolutely inside it (the visually hidden labels) scrolls with it
     instead of stretching the document under the shell. */
  #main {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--md-sys-spacing-6) var(--md-sys-spacing-8);
  }
  /* The skip link lands focus on the region itself; a ring around the whole page says nothing. */
  #main:focus { outline: 0; }

  /* ─── Navigation rail (M3): collapsed 600–1199, expanded from 1200, a modal drawer below 600 ── */

  .nav-rail {
    width: var(--rail-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-1);
    padding: 0 var(--md-sys-spacing-1) var(--md-sys-spacing-4);
    background: var(--md-sys-color-surface-container-low);
    overflow-y: auto;
  }

  .rail-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--md-sys-spacing-1);
    min-height: var(--nav-height);
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-label-medium);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
    text-align: center;
  }
  .rail-brand:hover { color: var(--md-sys-color-primary); text-decoration: none; }
  .rail-brand .material-symbols-outlined { color: var(--md-sys-color-primary); }

  .rail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-3);
  }
  .rail-divider {
    border: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: var(--md-sys-spacing-1) var(--md-sys-spacing-3);
  }

  .rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--md-sys-spacing-1);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-medium);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
    text-align: center;
    text-decoration: none;
    border-radius: var(--md-sys-shape-large);
  }
  .rail-item:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
  .rail-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border-radius: var(--md-sys-shape-full);
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }
  .rail-item:hover .rail-indicator {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
  }
  .rail-item[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 700; }
  .rail-item[aria-current="page"] .rail-indicator {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
  }
  /* A long label breaks where the page's language hyphenates it, not at any letter. */
  .rail-label { max-width: 100%; hyphens: auto; -webkit-hyphens: auto; }

  /* Expanded, and as the modal drawer: the icon beside its label, the whole row the indicator. */
  @media (min-width: 1200px), (max-width: 599.98px) {
    .nav-rail { width: var(--rail-expanded-width); padding: 0 var(--md-sys-spacing-3) var(--md-sys-spacing-4); }
    .rail-brand {
      flex-direction: row;
      justify-content: flex-start;
      gap: var(--md-sys-spacing-3);
      padding: 0 var(--md-sys-spacing-4);
      font: var(--md-sys-typescale-title-medium);
      letter-spacing: var(--md-sys-typescale-title-medium-tracking);
    }
    .rail-list { gap: 0; }
    .rail-item {
      flex-direction: row;
      gap: var(--md-sys-spacing-3);
      min-height: 56px;
      padding: 0 var(--md-sys-spacing-4);
      border-radius: var(--md-sys-shape-full);
      font: var(--md-sys-typescale-label-large);
      letter-spacing: var(--md-sys-typescale-label-large-tracking);
      text-align: left;
    }
    .rail-indicator { width: auto; height: auto; }
    .rail-item:hover .rail-indicator, .rail-item[aria-current="page"] .rail-indicator { background: none; }
    .rail-item:hover {
      background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    }
    .rail-item[aria-current="page"] {
      background: var(--md-sys-color-secondary-container);
      color: var(--md-sys-color-on-secondary-container);
    }
  }

  /* The menu button is an icon button, whose display it overrides: only the drawer needs it. */
  .top-app-bar .rail-toggle { display: none; }
  .scrim { display: none; }

  @media (max-width: 599.98px) {
    .top-app-bar .rail-toggle { display: inline-flex; }
    .nav-rail {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 300;
      width: min(var(--drawer-width), 85vw);
      border-radius: 0 var(--md-sys-shape-large) var(--md-sys-shape-large) 0;
      box-shadow: var(--md-sys-elevation-level1);
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
        visibility var(--md-sys-motion-duration-medium2);
    }
    .rail-open .nav-rail { transform: none; visibility: visible; }
    .rail-open .scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 250;
      background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
    }
    #main { padding: var(--md-sys-spacing-4); }
  }

  /* ─── Top app bar (M3, small) ────────────────────────────────────────────── */

  .top-app-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    min-height: var(--nav-height);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
    flex-shrink: 0;
    z-index: 100;
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  .top-app-bar-headline { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
  .top-app-bar-title {
    font: var(--md-sys-typescale-title-large);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-app-bar-center { flex: 1 1 12rem; display: flex; justify-content: center; min-width: 0; }
  .top-app-bar-center:empty { flex-basis: 0; }
  .top-app-bar-trailing { display: flex; align-items: center; gap: var(--md-sys-spacing-1); margin-left: auto; }
  .top-app-bar > .progress { position: absolute; left: 0; right: 0; bottom: -1px; }

  @media (max-width: 899.98px) {
    .top-app-bar .period-filter { order: 10; flex-basis: 100%; }
  }

  /* ─── Icon buttons and menus ─────────────────────────────────────────────── */

  .icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    list-style: none;
  }
  .icon-button:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
  }

  .menu { position: relative; }
  .menu > summary { list-style: none; cursor: pointer; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary.icon-button {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
  }
  .menu-surface {
    position: absolute;
    top: calc(100% + var(--md-sys-spacing-1));
    right: 0;
    z-index: 200;
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - var(--md-sys-spacing-8)));
    max-height: 75vh;
    overflow-y: auto;
    padding: var(--md-sys-spacing-2) 0;
    border-radius: var(--md-sys-shape-extra-small);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level2);
  }
  .menu-start > .menu-surface { left: 0; right: auto; }
  .menu-item {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--md-sys-spacing-3);
    border: 0;
    background: none;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-label-large);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .menu-item:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    text-decoration: none;
  }
  .menu-item[aria-current="page"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  .menu-item .material-symbols-outlined { font-size: 20px; color: var(--md-sys-color-on-surface-variant); }
  .menu-item-meta { margin-left: auto; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); }
  .menu-divider { border: 0; border-top: 1px solid var(--md-sys-color-outline-variant); margin: var(--md-sys-spacing-2) 0; }
  .menu-form { margin: 0; }

  /* The base a page is about, and the others it switches to on the same tab. */
  .base-select > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    min-height: 40px;
    max-width: 100%;
    padding: 0 var(--md-sys-spacing-2) 0 var(--md-sys-spacing-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-medium);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  }
  .base-select > summary:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
  }
  .base-select > summary code { background: none; padding: 0; font-size: inherit; overflow: hidden; text-overflow: ellipsis; }

  /* Who is signed in, their roles, the language and theme they read in, and the way out. */
  .user-menu .menu-surface { min-width: 17rem; }
  .user-identity {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  }
  .user-identity > .material-symbols-outlined { font-size: 36px; color: var(--md-sys-color-on-surface-variant); }
  .user-identity-text { min-width: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); }
  .user-identity-name {
    font: var(--md-sys-typescale-title-small);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-identity-roles { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1); }

  .preference-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--md-sys-spacing-2);
    margin: 0;
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3) var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  }
  .preference-label {
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
  }
  .preference-label .material-symbols-outlined { font-size: 20px; }
  .preference-options {
    display: inline-flex;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    overflow: hidden;
  }
  .preference-option {
    min-height: 32px;
    padding: 0 var(--md-sys-spacing-3);
    border: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-label-medium);
    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
    cursor: pointer;
  }
  .preference-option + .preference-option { border-left: 1px solid var(--md-sys-color-outline); }
  .preference-option:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
  }
  .preference-option:focus-visible { outline-offset: -2px; }
  .preference-option.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    cursor: default;
  }
  .preference-option .material-symbols-outlined { font-size: 18px; vertical-align: middle; }

  /* ─── Segmented buttons (M3) ─────────────────────────────────────────────── */

  .segmented {
    display: inline-flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
  }
  .segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--md-sys-spacing-2);
    min-height: 40px;
    padding: 0 var(--md-sys-spacing-4);
    border: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-label-large);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }
  .segment + .segment { border-left: 1px solid var(--md-sys-color-outline); }
  .segment:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    text-decoration: none;
  }
  .segment:focus-visible { outline-offset: -2px; }
  .segment.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  .segment-check { display: none; font-size: 18px; }
  .segment.selected .segment-check { display: inline-block; }
  .segmented-compact .segment { min-height: 32px; padding: 0 var(--md-sys-spacing-3); }
  .sub-nav { margin: 0 0 var(--md-sys-spacing-6); }

  /* ─── Tabs (M3 primary): the base's seven groups ─────────────────────────── */

  .tabs {
    display: flex;
    overflow-x: auto;
    margin-bottom: var(--md-sys-spacing-4);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    scrollbar-width: thin;
  }
  .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    min-height: 48px;
    padding: 0 var(--md-sys-spacing-4);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-title-small);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
    white-space: nowrap;
    text-decoration: none;
  }
  .tab:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
  }
  .tab:focus-visible { outline-offset: -2px; }
  .tab .material-symbols-outlined { font-size: 20px; }
  .tab.active { color: var(--md-sys-color-primary); }
  .tab.active::after {
    content: "";
    position: absolute;
    left: var(--md-sys-spacing-2);
    right: var(--md-sys-spacing-2);
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--md-sys-color-primary);
  }

  /* ── Page header — standardized content area header ──────────────────────────
     Built by page_header in templates/_components.html.
     Rules:
       - Primary action is always the rightmost filled button
       - Destructive actions are never in this row — they live near the affected item
       - Secondary/tertiary actions use outlined or text buttons, left of primary
  ────────────────────────────────────────────────────────────────────────────── */

  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--md-sys-spacing-4);
    margin-bottom: var(--md-sys-spacing-6);
    flex-wrap: wrap;
  }

  .page-header-text { min-width: 0; }
  .page-title-row { display: flex; align-items: flex-start; gap: var(--md-sys-spacing-1); }

  .page-title {
    margin: 0 0 var(--md-sys-spacing-1);
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-headline-medium);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
    overflow-wrap: anywhere;
  }

  .page-subtitle {
    margin: 0;
    max-width: 72ch;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-body-medium);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  }

  .page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  /* What the page is for, one press away from its title: an M3 rich tooltip. */
  .page-about { position: relative; }
  .page-about > summary { width: 32px; height: 32px; margin-top: var(--md-sys-spacing-1); }
  .page-about > summary::-webkit-details-marker { display: none; }
  .page-about > summary .material-symbols-outlined { font-size: 20px; }
  .page-about-text {
    position: absolute;
    top: calc(100% + var(--md-sys-spacing-1));
    left: 0;
    z-index: 150;
    width: max-content;
    max-width: min(40ch, 80vw);
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: var(--md-sys-elevation-level2);
    font: var(--md-sys-typescale-body-medium);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  }

  /* Breadcrumb inside page-header (smaller, no bottom margin) */
  .breadcrumb-inline {
    margin-bottom: var(--md-sys-spacing-1);
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-body-small);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
  }
  .breadcrumb-inline a { color: var(--md-sys-color-on-surface-variant); }
  .breadcrumb-inline a:hover { color: var(--md-sys-color-primary); }

  /* ─── The page's sidebar: a base's document tree ─────────────────────────── */

  #sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--md-sys-color-surface-container-low);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Scrollable navigation area — grows to fill available height */
  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  /* ─── Sidebar components ─────────────────────────────────────────────────── */

  .sidebar-header {
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-6) var(--md-sys-spacing-2);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: var(--md-sys-typescale-label-medium-size);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
  }

  .sidebar-project { color: var(--md-sys-color-on-surface); }
  .sidebar-path {
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-ref-typeface-mono);
    word-break: break-all;
  }
  .sidebar-empty {
    padding: var(--md-sys-spacing-4);
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-medium-size);
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-3);
    gap: 0.125rem;
  }
  .sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    height: 56px;
    padding: 0 var(--md-sys-spacing-4) 0 var(--md-sys-spacing-5);
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    letter-spacing: 0.006em;
    border: none;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    text-decoration: none;
    width: 100%;
    text-align: left;
  }
  .sidebar-nav .nav-link:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    border-left: none;
  }
  .sidebar-nav .nav-link.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 700;
    border-left: none;
    text-decoration: none;
  }
  .sidebar-nav .nav-link > .material-symbols-outlined { font-size: 1.25rem; flex-shrink: 0; }

  /* ─── Tree ───────────────────────────────────────────────────────────────── */

  .tree-list {
    list-style: none;
    padding-left: 0;
  }

  /* Each level costs only its own indent: the folder li carries no padding, so
     it does not add up on both sides at every level. Past the min-width the
     sidebar scrolls sideways instead of breaking names one letter per line. */
  .tree-list .tree-list {
    padding-left: 0.15rem;
    border-left: 1px solid var(--md-sys-color-outline-variant);
    margin-left: var(--md-sys-spacing-4);
    min-width: 9rem;
  }

  /* Each tree item: icon · name (wraps) · edit icon — all in one flex row. */
  .tree-node {
    padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
    display: flex;
    align-items: flex-start;   /* top-align so icon and button sit at the top of wrapped text */
    gap: var(--md-sys-spacing-1);
    font-size: var(--md-sys-typescale-body-medium-size);
    border-radius: 3px;
    cursor: default;
  }
  .tree-doc:hover,
  .tree-folder-row:hover { background: var(--md-sys-color-surface-container); }

  /* Icons stay put at the top of the row. */
  .tree-doc-icon,
  .tree-folder-icon {
    flex-shrink: 0;
    line-height: 1.5;
    font-size: 0.9rem;
  }

  /* Folder rows: keep icon + name on one flex row, children below. */
  .tree-folder {
    padding: 0;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    flex-direction: column;
    align-items: flex-start;
  }
  .tree-folder > .tree-folder-row {
    display: flex;
    align-items: flex-start;
    gap: var(--md-sys-spacing-1);
    width: 100%;
    padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
    border-radius: 3px;
  }
  .tree-folder-name {
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  /* Wrapper that holds the link so it can flex-grow without fighting the icon. */
  .tree-doc-body {
    flex: 1;
    min-width: 0;   /* the critical fix: allows a flex child to shrink below content size */
  }

  /* Document links wrap instead of truncating. */
  .tree-doc-link {
    display: block;
    color: var(--md-sys-color-on-surface);
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .tree-doc-link:hover { color: var(--md-sys-color-primary); }

  /* Edit icon: stays in the flex row at the right, aligned to the top.
     flex-shrink:0 prevents it from being squeezed away by a long name. */
  .tree-edit-icon {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.15rem;
    opacity: 0;
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    padding: 0.1rem var(--md-sys-spacing-1);
    border-radius: 3px;
    line-height: 1;
  }
  .tree-doc:hover .tree-edit-icon { opacity: 1; }
  .tree-edit-icon:hover { color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-container); }

  /* ─── Flash messages ─────────────────────────────────────────────────────── */

  .flash {
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-6);
    font-size: var(--md-sys-typescale-body-medium-size);
    border-left: 4px solid;
    flex-shrink: 0;
  }
  .flash-error   { background: color-mix(in srgb, var(--md-sys-color-error) 10%, var(--md-sys-color-surface-container-low)); border-color: var(--md-sys-color-error); }
  .flash-warning { background: color-mix(in srgb, var(--md-extended-color-warning) 10%, var(--md-sys-color-surface-container-low)); border-color: var(--md-extended-color-warning); }
  .flash-info    { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, var(--md-sys-color-surface-container-low)); border-color: var(--md-sys-color-primary); }
  .flash-success { background: color-mix(in srgb, var(--md-extended-color-success) 10%, var(--md-sys-color-surface-container-low)); border-color: var(--md-extended-color-success); }

  /* ─── Buttons (MD3) ─────────────────────────────────────────────────────── */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    padding: 0 var(--md-sys-spacing-6);
    height: 40px;
    border-radius: var(--md-sys-shape-full);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    letter-spacing: 0.006em;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }
  .btn:disabled { opacity: 0.38; cursor: not-allowed; }
  .btn:hover { text-decoration: none; }

  /* MD3 state layer — ripple approximation via ::before */
  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    border-radius: inherit;
    pointer-events: none;
  }
  .btn:hover:not(:disabled)::before         { opacity: var(--md-sys-state-hover-state-layer-opacity); }
  .btn:focus-visible:not(:disabled)::before { opacity: var(--md-sys-state-focus-state-layer-opacity); }
  .btn:active:not(:disabled)::before        { opacity: var(--md-sys-state-pressed-state-layer-opacity); }

  /* Filled (primary) */
  .btn-primary {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level1);
  }
  .btn-primary:hover:not(:disabled) {
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-level2);
  }

  /* Outlined (ghost) */
  .btn-ghost {
    background: transparent;
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-outline);
  }
  .btn-ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    color: var(--md-sys-color-primary);
  }

  /* Outlined danger */
  .btn-danger {
    background: transparent;
    color: var(--md-sys-color-error);
    border-color: var(--md-sys-color-error);
  }
  .btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--md-sys-color-error) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
  }

  /* Filled warning */
  .btn-warning {
    background: var(--md-extended-color-warning);
    color: var(--md-extended-color-on-warning);
  }
  .btn-warning:hover:not(:disabled) { opacity: 0.92; }

  .btn-sm   { height: 32px; padding: 0 var(--md-sys-spacing-4); font-size: var(--md-sys-typescale-body-small-size); }

  .btn-full { width: 100%; justify-content: center; }

  /* ─── Forms ──────────────────────────────────────────────────────────────── */

  .form-group { display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); margin-bottom: var(--md-sys-spacing-4); }
  .form-group label { font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); }
  .form-row { display: flex; gap: var(--md-sys-spacing-2); }
  .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 1.2em; margin-bottom: 0.4em; }
  .markdown-body code { font-size: 0.85em; }
  .markdown-body strong { color: var(--md-sys-color-on-surface); }

  .doc-kind {
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px var(--md-sys-spacing-1);
    border-radius: 3px;
  }
  .kind-markdown { background: color-mix(in srgb, var(--md-sys-color-primary) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-sys-color-primary); }
  .kind-yaml     { background: color-mix(in srgb, var(--md-extended-color-warning) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-extended-color-warning); }

  /* ─── Breadcrumb ─────────────────────────────────────────────────────────── */

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
  }
  .breadcrumb a { color: var(--md-sys-color-on-surface-variant); }
  .breadcrumb a:hover { color: var(--md-sys-color-primary); }
  .breadcrumb-sep { color: var(--md-sys-color-outline-variant); }
  /* ─── Save result states ─────────────────────────────────────────────────── */

  .result-success,
  .result-warning,
  .result-error {
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-medium);
    margin-bottom: var(--md-sys-spacing-3);
    border-left: 4px solid;
    font-size: var(--md-sys-typescale-body-medium-size);
  }
  .result-success { background: color-mix(in srgb, var(--md-extended-color-success) 12%, var(--md-sys-color-surface-container-low)); border-color: var(--md-extended-color-success); }
  .result-warning { background: color-mix(in srgb, var(--md-extended-color-warning) 12%, var(--md-sys-color-surface-container-low)); border-color: var(--md-extended-color-warning); }
  .result-error   { background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface-container-low)); border-color: var(--md-sys-color-error); }

  .result-note { margin-top: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); }
  .warning-list { margin-top: var(--md-sys-spacing-2); padding-left: var(--md-sys-spacing-5); }

  /* ─── Search ─────────────────────────────────────────────────────────────── */

  .search-form { flex: 1; max-width: 420px; }
  .search-input {
    width: 100%;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    color: var(--md-sys-color-on-surface);
    font-size: var(--md-sys-typescale-body-medium-size);
  }
  .search-input:focus { border-color: var(--md-sys-color-primary); }

  .search-header { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium-size); margin-bottom: var(--md-sys-spacing-3); }
  .search-empty  { color: var(--md-sys-color-on-surface-variant); padding: var(--md-sys-spacing-4) 0; }
  .search-list   { list-style: none; display: flex; flex-direction: column; gap: var(--md-sys-spacing-3); }

  .search-hit {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  }
  .search-hit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--md-sys-spacing-1);
  }
  .search-hit-path { font-family: var(--md-ref-typeface-mono); font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-primary); }
  .search-excerpt { font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); }
  .search-excerpt mark { background: color-mix(in srgb, var(--md-extended-color-warning) 30%, transparent); color: var(--md-sys-color-on-surface); border-radius: 2px; }

  /* ─── Score bar ──────────────────────────────────────────────────────────── */

  .score-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--md-sys-color-outline-variant);
    border-radius: 3px;
    vertical-align: middle;
    overflow: hidden;
  }
  .score-fill {
    height: 100%;
    background: var(--md-sys-color-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
  }
  .search-score {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
  }

  /* ─── Role badge ─────────────────────────────────────────────────────────── */

  .role-badge {
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--md-sys-color-secondary-container);
    border: none;
    border-radius: var(--md-sys-shape-full);
    padding: 2px var(--md-sys-spacing-2);
    color: var(--md-sys-color-on-secondary-container);
  }

  /* ─── Result badge ───────────────────────────────────────────────────────── */

  .result-badge {
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: 600;
    padding: 2px var(--md-sys-spacing-2);
    border-radius: 10px;
    letter-spacing: 0.03em;
  }
  .result-success { background: color-mix(in srgb, var(--md-extended-color-success) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-extended-color-success); }
  .result-warning { background: color-mix(in srgb, var(--md-extended-color-warning) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-extended-color-warning); }
  .result-error   { background: color-mix(in srgb, var(--md-sys-color-error) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-sys-color-error); }
  .result-denied  { background: color-mix(in srgb, var(--md-sys-color-error) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-sys-color-error); }
  .result-partial { background: color-mix(in srgb, var(--md-extended-color-warning) 20%, var(--md-sys-color-surface-container-low)); color: var(--md-extended-color-warning); }

  /* ─── Tables ─────────────────────────────────────────────────────────────── */

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--md-sys-typescale-body-medium-size);
  }
  .data-table th {
    text-align: left;
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-weight: 600;
    font-size: var(--md-sys-typescale-label-medium-size);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .data-table td {
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
    vertical-align: middle;
  }
  .data-table tbody tr:hover { background: var(--md-sys-color-surface-container); }
  .data-table-compact th,
  .data-table-compact td { padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2); }

  .empty-row { color: var(--md-sys-color-on-surface-variant); text-align: center; padding: var(--md-sys-spacing-4) !important; }
  .resource-cell {
    font-family: var(--md-ref-typeface-mono);
    font-size: var(--md-sys-typescale-body-small-size);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── Forms in a dialog ─────────────────────────────────────────────────── */

  .modal-form { display: flex; flex-direction: column; }

  /* Modal form helpers */
  .label-hint    { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); font-weight: 400; }
  .label-required { color: var(--md-sys-color-error); font-size: var(--md-sys-typescale-body-small-size); }
  .radio-group   { display: flex; gap: var(--md-sys-spacing-4); flex-wrap: wrap; }
  .radio-label   { display: flex; align-items: center; gap: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-body-medium-size);
                   color: var(--md-sys-color-on-surface); cursor: pointer; }
  .radio-label input[type="radio"] { cursor: pointer; }
  .select-full   { width: 100%; padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size);
                   background: var(--md-sys-color-background); color: var(--md-sys-color-on-surface);
                   border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium);
                   appearance: auto; }
  .form-hint     { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); min-height: 1rem; }

  /* ─── Responsive ─────────────────────────────────────────────────────────── */

  @media (max-width: 800px) {
    .layout { flex-direction: column; }

    #sidebar {
      width: 100%;
      max-height: 200px;
      border-right: none;
      border-bottom: 1px solid var(--md-sys-color-outline-variant);
      overflow-x: auto;
    }

  }

  .badge {
    font-size: var(--md-sys-typescale-label-small-size);
    padding: 0.15rem var(--md-sys-spacing-2);
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .badge-read   { background: var(--kb-badge-read-container); color: var(--kb-badge-read-on-container); }
  .badge-write  { background: var(--kb-badge-write-container); color: var(--kb-badge-write-on-container); }
  .badge-muted, .badge-sev-info { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
  /* Warning state (e.g. a git working tree with uncommitted changes). The
     template used badge-warn but the class was never defined, so the badge
     rendered unstyled. */
  .badge-warn, .badge-sev-warning { background: var(--kb-badge-warn-container); color: var(--kb-badge-warn-on-container); }
  .badge-error, .badge-sev-error { background: var(--kb-badge-error-container); color: var(--kb-badge-error-on-container); }

  /* ─── Panel shell ────────────────────────────────────────────────────────── */
  /* Panel is a layout constraint only — no card chrome. Content sections carry
     their own surface treatment via stat-tile, admin-record, data-table, etc. */

  .panel {
    max-width: 1180px;
  }

  /* ─── Sections ───────────────────────────────────────────────────────────── */

  .admin-section { margin-bottom: var(--md-sys-spacing-8); }
  .admin-section:last-child { margin-bottom: 0; }

  .admin-section-title {
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: var(--md-sys-spacing-3);
    padding-bottom: var(--md-sys-spacing-2);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  /* A hint explains; meta is a number or a name beside its subject; empty says there is nothing to show. */
  .hint, .meta, .empty { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); }

  /* ─── Stat tiles ─────────────────────────────────────────────────────────── */

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: var(--md-sys-spacing-3);
  }

  .stat-tile {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-1);
    min-width: 0;
  }

  .stat-label {
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
  }

  .stat-value {
    font-size: var(--md-sys-typescale-headline-small-size);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .stat-note {
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.4;
  }

  .stat-tile-warn { border-color: color-mix(in srgb, var(--md-extended-color-warning) 45%, var(--md-sys-color-outline-variant)); }
  .stat-tile-bad  { border-color: color-mix(in srgb, var(--md-sys-color-error) 45%, var(--md-sys-color-outline-variant)); }

  /* ─── Data tables: numeric alignment ─────────────────────────────────────── */

  .data-table th.num,
  .data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* path_breaks lets a path break between folders; a single name wider than its card
     still has to break somewhere. In a table the cell's nowrap wins. */
  .mono-cell { overflow-wrap: anywhere; }

  .data-table .mono-cell {
    font-family: var(--md-ref-typeface-mono);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
  }

  .data-table td form { display: inline-block; }

  /* ─── Admin forms ────────────────────────────────────────────────────────── */

  .admin-form {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-4);
  }
  .admin-form + .admin-form { margin-top: var(--md-sys-spacing-3); }

  .field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 var(--md-sys-spacing-4);
  }

  .inline-form {
    display: flex;
    align-items: flex-end;
    gap: var(--md-sys-spacing-3);
  }
  .inline-form .form-group { margin-bottom: 0; flex: 1; max-width: 320px; }

  .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    /* Hit target comfortably larger than the box itself. */
    padding: var(--md-sys-spacing-1) 0;
  }
  .checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ─── Danger zones ───────────────────────────────────────────────────────── */

  .danger-zone {
    margin-top: var(--md-sys-spacing-4);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 40%, var(--md-sys-color-outline-variant));
    border-left: 4px solid var(--md-sys-color-error);
    border-radius: var(--md-sys-shape-medium);
    background: color-mix(in srgb, var(--md-sys-color-error) 7%, var(--md-sys-color-surface-container-low));
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--md-sys-spacing-5);
    flex-wrap: wrap;
  }

  .danger-zone-soft {
    border-color: color-mix(in srgb, var(--md-extended-color-warning) 40%, var(--md-sys-color-outline-variant));
    border-left-color: var(--md-extended-color-warning);
    background: color-mix(in srgb, var(--md-extended-color-warning) 7%, var(--md-sys-color-surface-container-low));
  }

  .danger-zone-text { flex: 1; min-width: 260px; }
  .danger-zone-text strong { display: block; margin-bottom: var(--md-sys-spacing-1); }
  .danger-zone-text p {
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface-variant);
    max-width: 68ch;
  }
  .danger-zone-text p + p { margin-top: var(--md-sys-spacing-2); }

  .danger-zone-note {
    color: var(--md-sys-color-on-surface) !important;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-2);
  }

  .confirm-form { min-width: 240px; }
  .confirm-form .form-group { margin-bottom: var(--md-sys-spacing-2); }
  .confirm-form label { font-size: var(--md-sys-typescale-body-small-size); }

  /* ─── Responsive ─────────────────────────────────────────────────────────── */

  @media (max-width: 800px) {
    .panel { padding: var(--md-sys-spacing-4); }
    .inline-form { flex-direction: column; align-items: stretch; }
    .inline-form .form-group { max-width: none; }
    .danger-zone { flex-direction: column; }
  }

  /* ─── Rule badges ────────────────────────────────────────────────────────── */

  /* The whole point of these two is that they must not be mistaken for each
     other: "gate" refuses a save, "advisory" only warns. So they differ in hue
     *and* carry different words — colour alone would leave the distinction
     invisible to anyone who cannot see the difference. */
  .badge-enforced {
    background: color-mix(in srgb, var(--md-sys-color-error) 22%, var(--md-sys-color-surface-container));
    color: var(--md-sys-color-error);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 45%, transparent);
  }
  .badge-advisory {
    background: var(--md-sys-color-surface-container);
    color: var(--md-extended-color-warning);
    border: 1px solid color-mix(in srgb, var(--md-extended-color-warning) 40%, transparent);
  }

  /* Content type identity, not a permission — a third hue so it never reads as
     one of the read/write badges next to it in the same row. */
  .badge-type {
    background: var(--kb-badge-type-container);
    color: var(--kb-badge-type-on-container);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--md-ref-typeface-mono);
  }
  a.badge-type:hover { text-decoration: none; background: var(--kb-badge-type-hover-container); }

  /* ─── Editor type hint ───────────────────────────────────────────────────── */

  .type-hint {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-left: 4px solid var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container-low);
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    margin-bottom: var(--md-sys-spacing-3);
  }
  /* An enforced type that already fails is the one case where the author must not
     discover the problem only after pressing Save. */
  .type-hint-blocking {
    border-left-color: var(--md-sys-color-error);
    background: color-mix(in srgb, var(--md-sys-color-error) 6%, var(--md-sys-color-surface-container-low));
  }

  .type-hint-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    margin-bottom: var(--md-sys-spacing-2);
  }

  .type-hint-verdict {
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: 1.6;
    margin-bottom: var(--md-sys-spacing-2);
  }

  .type-hint-fields {
    list-style: none;
    margin: 0 0 var(--md-sys-spacing-2);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-1);
  }

  .type-hint-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--md-sys-spacing-2);
    font-size: var(--md-sys-typescale-body-medium-size);
    padding: 0.15rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent);
  }
  .type-hint-field:last-child { border-bottom: none; }
  .type-hint-field .mono-cell {
    font-family: var(--md-ref-typeface-mono);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
  }

  /* ─── Supplied / missing ticks ───────────────────────────────────────────── */

  /* Paired with the word "required" or an issue message in the same row, so the
     glyph is a summary and never the only signal. */
  .tick-yes { color: var(--md-extended-color-success); font-weight: 700; }
  .tick-no  { color: var(--md-sys-color-error);   font-weight: 700; }

  .field-issue {
    display: inline-block;
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-error);
    overflow-wrap: anywhere;
  }

  /* ─── Rendered document typography ───────────────────────────────────────── */
  /*
   * The previous renderer replaced every newline with <br>, so lists, tables and
   * code blocks all collapsed into run-together text and none of this styling had
   * anything to attach to. Now that render_markdown emits real block elements,
   * these rules are what make a document readable.
   */

  .markdown-body {
    max-width: 78ch;          /* Prose is unreadable much wider than this. */
    line-height: 1.7;
  }

  .markdown-body > *:first-child { margin-top: 0; }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    color: var(--md-sys-color-on-surface);
    line-height: 1.3;
    margin: var(--md-sys-spacing-8) 0 var(--md-sys-spacing-3);
    scroll-margin-top: calc(var(--nav-height) + 1rem);
  }

  .markdown-body h1 { font-size: var(--md-sys-typescale-headline-medium-size); }
  .markdown-body h2 {
    font-size: var(--md-sys-typescale-title-large-size);
    /* A rule under H2 is what makes the section boundaries scannable. */
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: var(--md-sys-spacing-1);
  }
  .markdown-body h3 { font-size: var(--md-sys-typescale-body-large-size); }
  .markdown-body h4 { font-size: var(--md-sys-typescale-body-large-size); color: var(--md-sys-color-on-surface-variant); }

  .markdown-body p { margin: 0 0 var(--md-sys-spacing-4); }

  .markdown-body a { color: var(--md-sys-color-primary); text-decoration: none; }
  .markdown-body a:hover { text-decoration: underline; }

  .markdown-body strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
  .markdown-body em { font-style: italic; }
  .markdown-body del { color: var(--md-sys-color-on-surface-variant); }

  .markdown-body ul,
  .markdown-body ol { margin: 0 0 var(--md-sys-spacing-4); padding-left: var(--md-sys-spacing-6); }
  .markdown-body li { margin: var(--md-sys-spacing-1) 0; }
  .markdown-body li > ul,
  .markdown-body li > ol { margin: var(--md-sys-spacing-1) 0; }

  .markdown-body blockquote {
    margin: 0 0 var(--md-sys-spacing-4);
    padding: 0.1rem var(--md-sys-spacing-4);
    border-left: 3px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-low);
    border-radius: 0 var(--md-sys-shape-medium) var(--md-sys-shape-medium) 0;
    color: var(--md-sys-color-on-surface-variant);
  }
  .markdown-body blockquote p { margin: var(--md-sys-spacing-3) 0; }

  .markdown-body hr {
    border: 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: var(--md-sys-spacing-8) 0;
  }

  /* Inline code, distinct from a code block so the two do not read alike. */
  .markdown-body code {
    font-family: var(--md-ref-typeface-mono);
    font-size: 0.85em;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 4px;
    padding: 0.1em 0.35em;
  }

  /* ─── Code blocks and syntax highlighting ────────────────────────────────── */

  .code-block {
    position: relative;
    margin: 0 0 var(--md-sys-spacing-4);
    background: var(--md-sys-color-background);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    overflow: hidden;
  }

  .code-block pre {
    margin: 0;
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-4);
    overflow-x: auto;
  }

  /* A code block's <code> must not inherit the inline-code chrome. */
  .code-block pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
    white-space: pre;
  }

  .code-lang {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.15rem var(--md-sys-spacing-2);
    font-family: var(--md-ref-typeface-mono);
    font-size: var(--md-sys-typescale-label-small-size);
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container);
    border-left: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0 0 0 var(--md-sys-shape-medium);
    text-transform: lowercase;
    user-select: none;
  }

  /* Legible rather than familiar: this is a reading view, so every syntax token
     clears 4.5:1 on the code block in both themes (tokens.css). */
  .tok-keyword { color: var(--kb-syntax-keyword); }
  .tok-string  { color: var(--kb-syntax-string); }
  .tok-number  { color: var(--kb-syntax-number); }
  .tok-comment { color: var(--kb-syntax-comment); font-style: italic; }
  .tok-key     { color: var(--kb-syntax-key); }   /* YAML mapping keys */

  /* ─── Tables in rendered documents ───────────────────────────────────────── */

  .table-wrap {
    margin: 0 0 var(--md-sys-spacing-4);
    overflow-x: auto;    /* A wide table scrolls instead of breaking the layout. */
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
  }

  .md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--md-sys-typescale-body-medium-size);
  }

  .md-table th,
  .md-table td {
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  .md-table thead th {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
    white-space: nowrap;
  }

  .md-table tbody tr:last-child td { border-bottom: 0; }
  .md-table tbody tr:hover { background: var(--md-sys-color-surface-container-low); }

  .markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--md-sys-shape-medium);
  }

  @media (min-width: 1400px) {
    .markdown-body { max-width: 90ch; }
  }

  /* ─── Snackbar (M3): the one live region every notice of the last action goes to ── */

  .snackbar-region {
    position: fixed;
    left: 50%;
    bottom: var(--md-sys-spacing-6);
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-2);
    width: min(37.5rem, calc(100vw - var(--md-sys-spacing-8)));
    transform: translateX(-50%);
    pointer-events: none;
  }
  .snackbar {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    min-height: 48px;
    padding: var(--md-sys-spacing-1) var(--md-sys-spacing-1) var(--md-sys-spacing-1) var(--md-sys-spacing-4);
    border-radius: var(--md-sys-shape-extra-small);
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    box-shadow: var(--md-sys-elevation-level3);
    font: var(--md-sys-typescale-body-medium);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
    pointer-events: auto;
    animation: snackbar-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard-decelerate);
  }
  .snackbar-icon { color: var(--md-sys-color-inverse-primary); }
  .snackbar-text { flex: 1; min-width: 0; padding: var(--md-sys-spacing-2) 0; }
  .snackbar .icon-button { color: var(--md-sys-color-inverse-on-surface); }
  .snackbar .icon-button:hover {
    background: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
  }
  /* The primary ring all but vanishes on the inverse surface, under 2:1 in both themes. */
  .snackbar :focus-visible { outline-color: var(--md-sys-color-inverse-primary); }
  @keyframes snackbar-in { from { opacity: 0; transform: translateY(var(--md-sys-spacing-4)); } }
  @media (prefers-reduced-motion: reduce) { .snackbar { animation: none; } }

  /* ─── Linear progress (M3) ───────────────────────────────────────────────── */

  .progress {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-highest);
  }
  .progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--md-sys-color-primary); }
  .progress-indeterminate .progress-bar { width: 40%; animation: progress-slide 1.2s var(--md-sys-motion-easing-standard) infinite; }
  @keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
  /* A request indicator shows only while htmx has one in flight. */
  .progress.htmx-indicator { opacity: 0; transition: opacity var(--md-sys-motion-duration-short4); }
  .progress.htmx-indicator.htmx-request { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .progress-indeterminate .progress-bar { animation-duration: 3s; } }

  /* ─── Cards (M3 outlined) ────────────────────────────────────────────────── */

  .card {
    --table-head: var(--md-sys-color-surface-container-low);
    margin-bottom: var(--md-sys-spacing-6);
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-5);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container-low);
  }
  .card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--md-sys-spacing-2); margin-bottom: var(--md-sys-spacing-3); }
  /* A form in a card is already on the card's surface. */
  .card > .admin-form { padding: 0; border: 0; background: none; }
  .card-title {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-medium);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  }

  /* ─── Data table: a fixed head over rows a reader can sort ───────────────── */

  .table-wrap { max-height: 70vh; overflow: auto; }
  .table-wrap > .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--table-head, var(--md-sys-color-surface));
  }
  .viz .table-wrap { --table-head: var(--viz-surface); }
  .sort-button {
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-1);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
  }
  .sort-button .material-symbols-outlined { font-size: 16px; opacity: 0.45; }
  th[aria-sort="ascending"] .sort-button .material-symbols-outlined,
  th[aria-sort="descending"] .sort-button .material-symbols-outlined { opacity: 1; color: var(--md-sys-color-primary); }
  th.num .sort-button { flex-direction: row-reverse; }
  .table-actions { display: flex; justify-content: flex-end; gap: var(--md-sys-spacing-2); margin-top: var(--md-sys-spacing-2); }

  /* ─── Buttons: the text button (M3) ──────────────────────────────────────── */

  .btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 0 var(--md-sys-spacing-3); }
  .btn-text.btn-sm { padding: 0 var(--md-sys-spacing-2); }
  .btn .material-symbols-outlined { font-size: 18px; }

  /* ─── Chips (M3 filter) ──────────────────────────────────────────────────── */

  .chip-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2); }
  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    min-height: 32px;
    padding: 0 var(--md-sys-spacing-4);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-small);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: var(--md-sys-typescale-label-large);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  .chip:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
    text-decoration: none;
  }
  .chip > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .chip:has(> input:focus-visible) { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
  .chip-check { display: none; font-size: 18px; }
  .chip:has(> input:checked), .chip.selected {
    padding-left: var(--md-sys-spacing-2);
    border-color: transparent;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
  }
  .chip:has(> input:checked) .chip-check, .chip.selected .chip-check { display: inline-block; }

  /* ─── Filter bar: presets as segmented buttons, the fields beside them ───── */

  .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2) var(--md-sys-spacing-4); margin: var(--md-sys-spacing-3) 0 var(--md-sys-spacing-4); }
  .filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2); min-width: 0; }
  .period-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2); }

  /* ─── Dialog (M3 basic, on the native <dialog>) ──────────────────────────── */

  .dialog {
    width: calc(100vw - var(--md-sys-spacing-8));
    max-width: 35rem;
    margin: auto;
    padding: var(--md-sys-spacing-6);
    border: 0;
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level3);
  }
  .dialog::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); }
  .dialog-title {
    margin: 0 0 var(--md-sys-spacing-4);
    font: var(--md-sys-typescale-headline-small);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  }
  .dialog-actions { display: flex; justify-content: flex-end; gap: var(--md-sys-spacing-2); margin-top: var(--md-sys-spacing-6); }
  .kb-confirm-dialog { max-width: 26rem; }
  .kb-confirm-msg { margin: 0; font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-body-large-tracking); }

  /* ─── Empty state ────────────────────────────────────────────────────────── */

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    padding: var(--md-sys-spacing-8) var(--md-sys-spacing-4);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
  }
  .empty-state > .material-symbols-outlined { font-size: 40px; }

  /* ─── Knowledge-base insights ────────────────────────────────────────────── */

  .finding-group {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    margin-bottom: var(--md-sys-spacing-2);
  }
  .finding-group > summary { cursor: pointer; display: flex; gap: var(--md-sys-spacing-2); align-items: center; }

  .side-by-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--md-sys-spacing-3);
  }
  .side-by-side pre {
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--md-sys-color-background);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-3);
    font-size: var(--md-sys-typescale-body-small-size);
  }

  /* ─── Chart kit (templates/admin/_charts.html, static/charts.js) ─────────── */
  .viz { margin: 0 0 var(--md-sys-spacing-4); min-width: 0; background: var(--viz-surface); border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4) var(--md-sys-spacing-2); }
  .viz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem var(--md-sys-spacing-3); margin-bottom: var(--md-sys-spacing-2); }
  .viz-title { margin: 0; font-weight: 600; font-size: var(--md-sys-typescale-title-medium-size); color: var(--viz-ink); }
  .viz-empty { padding-bottom: var(--md-sys-spacing-3); }
  .viz-subtitle { font-size: var(--md-sys-typescale-body-small-size); color: var(--viz-ink-2); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .viz-plot { width: 100%; border-radius: var(--md-sys-shape-small); }
  .viz-table { margin-top: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); overflow-x: auto; }
  .viz-table > summary { cursor: pointer; width: fit-content; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .viz-table .data-table { margin-top: var(--md-sys-spacing-2); }
  .viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--md-sys-spacing-4); align-items: start; margin-bottom: var(--md-sys-spacing-4); }

  .viz-tip { min-width: 8rem; font-size: var(--md-sys-typescale-body-small-size); line-height: 1.5; }
  .viz-tip-head { margin-bottom: .15rem; color: var(--viz-ink-2); }
  .viz-tip-row { display: flex; align-items: center; gap: var(--md-sys-spacing-2); white-space: nowrap; }
  .viz-tip-key { display: inline-block; width: 12px; height: 0; border-top: 2px solid currentColor; }
  .viz-tip-value { color: var(--viz-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .viz-tip-name { color: var(--viz-ink-2); }
  .viz-tip-n, .viz-tip-extra { color: var(--viz-ink-muted); }

  .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--md-sys-spacing-3); margin: var(--md-sys-spacing-4) 0; }
  .kpi-hero { grid-column: span 2; }
  .kpi-hero .stat-value { font-size: var(--md-sys-typescale-display-medium-size); line-height: 1.05; }
  .stat-value a { color: inherit; }
  /* Six tiles beside a hero: the hero holds the left column, the tiles fill three to a row. */
  .kpi-split { grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr); }
  .kpi-split > .kpi-hero { grid-column: auto; justify-content: space-between; }
  .kpi-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--md-sys-spacing-3); }
  @media (max-width: 1200px) { .kpi-split { grid-template-columns: 1fr; } }
  @media (max-width: 700px) { .kpi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat-spark { width: 100%; height: 28px; margin-top: var(--md-sys-spacing-1); }

  .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2) var(--md-sys-spacing-4); margin: var(--md-sys-spacing-3) 0 var(--md-sys-spacing-4); }
  .filter-label { font-size: var(--md-sys-typescale-label-medium-size); text-transform: uppercase; letter-spacing: .06em; color: var(--md-sys-color-on-surface-variant); }

  .meter { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-2); min-width: 8rem; --meter: var(--viz-cat-1); }
  .meter-warning { --meter: var(--viz-sev-warning); }
  .meter-danger { --meter: var(--viz-sev-error); }
  .meter-track { flex: 1; height: 8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--meter) 22%, transparent); }
  .meter-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--meter); }
  .meter-text { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }

  .stack-row { display: flex; gap: 2px; min-width: 6rem; height: 8px; overflow: hidden; border-radius: 4px; }
  .stack-seg { display: block; min-width: 2px; height: 100%; background: var(--seg, var(--viz-deemph)); }
  .seg-error { --seg: var(--viz-sev-error); }
  .seg-warning { --seg: var(--viz-sev-warning); }
  .seg-info { --seg: var(--viz-sev-info); }

  .reading-chip { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); padding: .05rem var(--md-sys-spacing-2); border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-medium-size); font-weight: 500; white-space: nowrap; }
  .reading-chip .material-symbols-outlined { font-size: .95rem; }

  .look-findings { display: flex; align-items: center; gap: var(--md-sys-spacing-2); }
  .look-findings .stack-row { flex: 0 0 6rem; }
  .look-bar { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-2); }
  .look-track { width: 5rem; height: 8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--viz-cat-1) 22%, transparent); }
  .look-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-cat-1); }
}