/*
 * Screen-only restyle. Print templates do not load this file. Loaded last.
 *
 * !important is not used. Existing !important rules are print-only or the
 * [hidden] display toggle. This file does not override display on [hidden],
 * .cdect-print-only, or .rotd-print-only.
 *
 * Rules that need !important:
 * (none)
 */

@media screen {
  body.lx-screen {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--canvas);
    --luci-accent: var(--primary-teal);
    --luci-accent-dark: var(--primary-teal);
    --luci-accent-deeper: var(--primary-teal);
    --luci-accent-tint: var(--teal-pale);
    --luci-accent-tint-strong: var(--teal-pale);
    --luci-ink: var(--ink);
    --luci-muted: var(--neutral-grey);
    --luci-border: var(--border);
    --luci-canvas: var(--canvas);
    --luci-bg: var(--canvas);
    --luci-surface: var(--surface);
    --luci-rail: var(--primary-teal);
    --luci-chart: var(--primary-teal);
    --luci-chart-soft: var(--neutral);
    --luci-chart-warm: var(--teal-light);
    --luci-chart-slate: var(--neutral-grey);
    --luci-chart-deep: var(--ink);
    --luci-chart-sand: var(--teal-mid);
    --luci-error: var(--ink);
    --luci-success: var(--ink);
    --luci-warn: var(--ink);
    --edd-critical: var(--risk-4);
    --edd-high: var(--risk-3);
    --edd-medium: var(--risk-2);
    --edd-low: var(--risk-1);
  }

  .lx-shell {
    min-height: 100vh;
    align-items: stretch;
  }

  .lx-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
  }

  .lx-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    /* Above sticky filter bars (.don-head is z-index 20). The pop-up is
       position:fixed inside this stacking context, so its own z-index cannot
       climb out and sit over those bars on its own. */
    z-index: 30;
  }

  .lx-rail summary.lx-ico {
    list-style: none;
  }

  .lx-rail summary.lx-ico::-webkit-details-marker {
    display: none;
  }

  .lx-ico--letter {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
  }

  .lx-rail-pop>.lx-scrim {
    display: none;
  }

  .lx-rail-pop[open]>.lx-scrim {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: var(--scrim);
    z-index: 20;
    cursor: pointer;
  }

  .lx-rail-pop[open]>.lx-pop {
    position: fixed;
    z-index: 21;
    left: 76px;
    top: 16px;
    width: min(620px, calc(100vw - 96px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    gap: 8px;
  }

  .lx-screen .lx-pop__head h2,
  .lx-screen .lx-pop .lx-iconbtn,
  .lx-screen .lx-pop .lx-search {
    margin: 0;
  }

  .lx-screen .lx-pop .lx-search {
    flex: none;
    width: 100%;
    max-width: none;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .lx-screen .lx-pop .lx-search input {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.2;
  }

  .lx-rail-pop[open]>summary.lx-ico {
    background: var(--teal-mid);
    color: var(--ink);
    opacity: 1;
    box-shadow: none;
    position: relative;
    z-index: 22;
  }

  .lx-rail .profile-menu {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
  }

  .lx-rail .profile-menu>summary {
    list-style: none;
    cursor: pointer;
    /* .profile-menu > summary is inline-flex and wins over .lx-avatar's grid,
       which leaves the initial on the start edge of the circle. */
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
  }

  .lx-rail .profile-menu>summary::-webkit-details-marker {
    display: none;
  }

  .lx-rail .profile-menu>summary::marker {
    content: "";
  }

  .lx-rail .profile-dropdown {
    position: absolute;
    left: calc(100% + 8px);
    right: auto;
    top: auto;
    bottom: 0;
    width: 220px;
    height: auto;
    z-index: 40;
    margin: 0;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-popover);
  }

  .lx-rail .profile-dropdown a,
  .lx-rail .profile-dropdown button.linklike {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
    background: transparent;
    border: 0;
    padding: 7px 10px;
    border-radius: var(--radius-control);
    text-decoration: none;
    cursor: pointer;
  }

  .lx-rail .profile-dropdown a:hover,
  .lx-rail .profile-dropdown button.linklike:hover {
    background: var(--teal-pale);
  }

  .lx-rail .profile-dropdown form {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 4px;
  }

  .lx-screen [data-lx-tip] {
    position: relative;
  }

  /* Expand stays top-right of its host; tip's relative would drop it into flow.
     Inline toggles (next to CSV) keep normal flow. */
  .lx-screen .lx-focus-toggle[data-lx-tip]:not(.lx-focus-toggle--inline):not(.lx-focus-toggle--with-csv) {
    position: absolute;
  }

  .lx-screen .lx-focus-toggle,
  .lx-screen .lx-focus__collapse {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--ink);
  }

  .lx-screen .lx-focus-toggle:hover,
  .lx-screen .lx-focus-toggle:focus-visible,
  .lx-screen .lx-focus__collapse:hover,
  .lx-screen .lx-focus__collapse:focus-visible {
    background: transparent;
    color: var(--primary-teal);
  }

  .lx-screen [data-lx-tip]:is(:hover, :focus-visible)::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-popover);
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 30;
  }

  .lx-content {
    min-width: 0;
  }

  /* The signed-in page sits on the grey canvas. The old .shell .panel rule
     does not match this layout, so the panel was one white sheet and the
     sections inside it had nothing to separate them. */
  .lx-screen .panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    width: auto;
    box-shadow: none;
  }

  .lx-content .page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .lx-header__aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-left: auto;
    min-width: 0;
  }

  .lx-header__aside .lx-meta {
    margin: 0;
    text-align: right;
  }

  .lx-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  .lx-header .lx-header-actions {
    margin: 0;
  }

  /* Header actions share one height. A link still carries the old button
     margin, which dropped Audit evidence below the PDF control. */
  .lx-screen .lx-header-actions .button,
  .lx-screen .lx-header-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    height: 34px;
    box-sizing: border-box;
    padding: 7px 12px;
    line-height: 1.2;
  }

  .lx-screen .lx-header nav.tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    margin: 0 0 -1px;
    border: 0;
    padding: 0;
  }

  .lx-screen .lx-header .cd-tabbar {
    margin: 0 0 -1px;
  }

  .lx-screen .lx-header .cd-tabbar>nav.tabs {
    margin: 0;
  }

  .lx-screen .lx-header nav.tabs a,
  .lx-screen .lx-header nav.tabs a:hover,
  .lx-screen .lx-header nav.tabs a[aria-current="page"],
  .lx-screen .lx-tab,
  .lx-screen .tabs a {
    text-decoration: none;
    /* Kill the old 2px portal underline completely. */
    border-bottom: 0 solid transparent;
    border-bottom-width: 0;
    border-bottom-color: transparent;
  }

  .lx-screen .lx-header nav.tabs a[aria-current="page"],
  .lx-screen .lx-tab[aria-current="page"],
  .lx-screen .lx-tab[aria-selected="true"],
  .lx-screen .tabs a[aria-current="page"] {
    background: var(--canvas);
    color: var(--ink);
    font-weight: 600;
    /* Top teal edge only. A canvas-coloured bottom border covers the header
       hairline under the active tab so no leftover underline can show. */
    box-shadow: var(--edge-tab);
    border-bottom: 2px solid var(--canvas);
    margin-bottom: -2px;
  }

  .lx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .lx-iconbtn {
    display: inline-flex;
    color: var(--teal-text);
    text-decoration: none;
  }

  .lx-code {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--teal-pale);
    color: var(--teal-text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .lx-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .lx-screen .lx-switch,
  .lx-screen .lx-switch:hover,
  .lx-screen .lx-switch:focus {
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin: 0;
    padding: 0 2px;
    line-height: 1;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
  }

  .lx-screen .lx-sep {
    align-self: center;
    height: 34px;
  }

  .lx-screen .lx-filters .cdect-sample-menu>summary {
    display: flex;
    align-items: center;
    min-height: 34px;
    box-sizing: border-box;
  }

  .lx-filters .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
  }

  .lx-badge--quiet {
    background: var(--neutral);
    color: var(--ink);
  }

  .lx-tab {
    display: inline-block;
    text-decoration: none;
  }

  .lx-signed-out {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 12px;
    background: var(--canvas);
  }

  .lx-wordmark {
    height: 22px;
    width: auto;
  }

  .lx-signed-out .page {
    width: min(28rem, 100%);
  }

  .lx-signed-out .lx-card h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
  }

  .lx-home-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex: none;
  }

  .lx-home-tools .lx-search {
    flex: none;
    width: 248px;
    height: 36px;
    margin: 0;
    padding: 0 10px;
  }

  .lx-card>[data-lx-home-group] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
  }

  .lx-card>[data-lx-home-group] .lx-label {
    margin: 0;
  }

  .lx-home-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
  }

  .lx-htile.is-external .nm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .lx-htile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
  }

  /* Card links: highlight + pointer only — never the base a:hover underline. */
  .lx-htile:hover {
    border-color: var(--teal-mid);
    box-shadow: var(--shadow-focus-glow);
    text-decoration: none;
  }

  .lx-htile .tile {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    display: grid;
    place-items: center;
    background: var(--teal-pale);
    color: var(--primary-teal);
  }

  .lx-htile .tile svg {
    width: 20px;
    height: 20px;
  }

  .lx-htile .nm {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
  }

  .lx-htile .ty {
    font-size: 12px;
    color: var(--neutral-grey);
  }

  .lx-screen main h1,
  .lx-screen .lx-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
  }

  .lx-column .trust-hero h1 {
    display: none;
  }

  .lx-screen .trust-notice {
    background: var(--teal-pale);
    color: var(--ink);
    border: 1px solid var(--border);
  }

  .lx-screen .trust-notice a {
    color: var(--teal-text);
  }

  .lx-screen main .button,
  .lx-screen main button.secondary,
  .lx-screen main a.button {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-control);
    text-decoration: none;
  }

  /* Not an Actions menu's items: a form-posting item (Resend invitation,
     Disable) is a <button>, and this rule's specificity would paint it a solid
     teal button beside the link items, over the .actions-dropdown rules. */
  .lx-screen main a.button:not(.secondary),
  .lx-screen main button:not(.secondary):not(.lx-switch):not(.linklike):not([data-lx-home-filter]):not(.edd-bars-head-label):not(.edd-bars-head-value):not(.edd-group-toggle):not(.hihp-row-toggle):not(.lx-focus-toggle):not(.lx-focus__collapse):not(.actions-dropdown button) {
    background: var(--primary-teal);
    color: var(--on-teal);
    border: 0;
    padding: 9px 16px;
  }

  /* Sort headings and row expanders are controls, but they are not actions. */
  .lx-screen .edd-bars-head button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--neutral-grey);
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .lx-screen button.edd-group-toggle,
  .lx-screen button.hihp-row-toggle {
    margin: 0 0.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    width: 1rem;
    height: 1rem;
  }

  .lx-screen .lx-seg {
    align-items: center;
    padding: 3px;
  }

  .lx-screen .lx-seg button {
    margin: 0;
    background: transparent;
    color: var(--neutral-grey);
    border: 0;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }

  .lx-screen .lx-seg button[aria-selected="true"] {
    background: var(--primary-teal);
    color: var(--on-teal);
  }

  .lx-screen #home-catalogue {
    font-weight: 700;
  }

  .lx-screen .lx-card__head {
    align-items: center;
  }

  .lx-screen .lx-home-tools .lx-seg {
    height: 36px;
    box-sizing: border-box;
  }

  .lx-screen .lx-home-tools .lx-seg button {
    height: 100%;
    padding: 0 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
  }

  .lx-screen .lx-home-tools .lx-search input {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.2;
  }

  .lx-screen main .button.secondary,
  .lx-screen main button.secondary,
  .lx-screen main a.button.secondary {
    background: transparent;
    color: var(--teal-text);
    box-shadow: inset 0 0 0 1.5px var(--teal-mid);
    padding: 7px 12px;
  }

  .lx-screen main .button.secondary:hover,
  .lx-screen main a.button.secondary:hover {
    background: var(--teal-pale);
  }

  .lx-screen main button.danger {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--neutral-grey);
  }

  .lx-screen .lx-export,
  .lx-screen main a.button[data-portal-download],
  .lx-screen main a.button[data-portal-print],
  .lx-screen .lx-focus-toggle--with-csv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    margin: 0;
    padding: 7px 12px;
    background: var(--surface);
    color: var(--teal-text);
    border: 0;
    border-radius: var(--radius-control);
    box-shadow: inset 0 0 0 1.5px var(--teal-mid);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .lx-screen .lx-export:hover,
  .lx-screen main a.button[data-portal-download]:hover,
  .lx-screen main a.button[data-portal-print]:hover,
  .lx-screen .lx-focus-toggle--with-csv:hover,
  .lx-screen .lx-focus-toggle--with-csv:focus-visible {
    background: var(--teal-pale);
    color: var(--teal-text);
  }

  /* Icon-only expand beside CSV: same height as the download control. */
  .lx-screen .lx-focus-toggle--with-csv {
    position: static;
    width: auto;
    height: auto;
    min-width: calc(14px + 16px);
    box-sizing: border-box;
  }

  .lx-screen .portal-section-summary,
  .lx-screen .hihp-section-summary,
  .lx-screen .chart-card .toolbar {
    min-width: 0;
    max-width: 100%;
  }

  .lx-screen .portal-section-heading,
  .lx-screen .chart-card .toolbar h2 {
    min-width: 0;
  }

  .lx-screen .filters label,
  .lx-screen .cdect-sample {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 34px;
    background: var(--surface);
    color: var(--neutral-grey);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
  }

  /* Caption and value share that one border. The older summary border would
     draw a second box inside it. */
  .lx-screen .cdect-sample .cdect-sample-menu>summary {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: right 2px center;
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    padding: 0 1.6rem 0 0;
  }

  /* Same height, one line. Width follows the label so a short one is not a wide empty box. */
  .lx-screen .filters>label,
  .lx-screen .filters>.cdect-sample {
    flex: 0 0 auto;
    width: auto;
    height: 34px;
    white-space: nowrap;
  }

  .lx-screen .filters select,
  .lx-screen .filters input[type="date"] {
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
  }

  /* Checkbox rows inside an open menu are not filter tiles. */
  .lx-screen .cdect-sample-panel label {
    display: flex;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.15rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink);
  }

  .lx-screen .filters>label select {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 1.6rem 0 0;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6560' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 2px center;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
  }

  .lx-screen .filters>label input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-weight: 600;
  }

  .lx-screen .cdect-sample-panel>.cdect-sample-actions:last-child {
    margin-top: 12px;
    margin-bottom: 0;
  }

  .lx-screen .page--cd .filters .cd-reset {
    align-self: center;
    height: 30px;
    min-width: 0;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }

  .lx-screen .filters-meta,
  .lx-screen .field-hint {
    font-size: 12px;
    color: var(--neutral-grey);
  }

  .lx-screen .tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
  }

  .lx-screen .tabs a {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-grey);
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 8px 8px 0 0;
  }

  .lx-screen .tabs a:hover {
    background: var(--teal-pale);
    color: var(--ink);
  }

  .lx-screen .don-head {
    background: var(--canvas);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 12px;
  }

  .lx-screen details.portal-section,
  .lx-screen details.hihp-section,
  .lx-screen .hihp-panel,
  .lx-screen .chart-card,
  .lx-screen .hihp-score-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: none;
    padding: 16px 20px;
  }

  /* A chart drawn inside a section is the section's contents, not a second tile. */
  .lx-screen details.portal-section .chart-card,
  .lx-screen details.hihp-section .chart-card,
  .lx-screen .hihp-panel .chart-card,
  .lx-screen .hihp-score-panel .chart-card {
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* CDECT sections already carry card padding. The older summary, body, and
     item margins were for the document layout and stack into large gaps. */
  .lx-screen .page--cdect .cdect-head {
    margin-bottom: 8px;
  }

  .lx-screen .page--cdect .portal-section {
    margin: 8px 0;
  }

  .lx-screen .page--cdect .portal-section-summary {
    padding: 0;
  }

  .lx-screen .page--cdect .portal-section-body {
    padding: 4px 0 0;
  }

  .lx-screen .page--cdect .cdect-item,
  .lx-screen .page--cdect .cdect-item-meta,
  .lx-screen .page--cdect .rotd-subsection {
    margin: 0;
  }

  .lx-screen .page--cdect .cdect-item>*+* {
    margin-top: 8px;
  }

  .lx-screen .page--rotd .don-head {
    margin-bottom: 8px;
  }

  .lx-screen .page--rotd .rotd-header {
    margin: 8px 0 0;
  }

  .lx-screen .page--rotd .portal-section {
    margin: 8px 0;
  }

  .lx-screen .page--rotd .portal-section-summary {
    padding: 0;
  }

  .lx-screen .page--rotd .portal-section-body {
    padding: 4px 0 0;
  }

  .lx-screen .page--rotd .rotd-subsection,
  .lx-screen .page--rotd .rotd-table-block,
  .lx-screen .page--rotd .rotd-section {
    margin: 0;
  }

  .lx-screen .page--rotd .portal-section-body>*+* {
    margin-top: 8px;
  }

  .lx-screen .portal-section-title,
  .lx-screen .chart-card h2,
  .lx-screen .chart-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }

  .lx-screen table.data {
    font-size: 13px;
    border-collapse: collapse;
  }

  .lx-screen table.data th {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-grey);
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 9px 12px;
  }

  .lx-screen table.data td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
  }

  .lx-screen table.data tbody tr:hover {
    background: var(--teal-pale);
  }

  /* A pinned first cell paints its own background, which would hide the row. */
  .lx-screen .portal-scroll[data-pin="1"] table.data tbody tr:hover>td:first-child,
  .lx-screen .hihp-scroll[data-pin="1"] table.data tbody tr:hover>td:first-child {
    background: var(--teal-pale);
  }

  .lx-screen .table-wrap,
  .lx-screen .portal-scroll table.data {
    border-radius: var(--radius-tag);
  }

  .lx-screen .stat-grid {
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    gap: 12px;
  }

  .lx-screen .stat-tile {
    flex: 1 1 8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: none;
    padding: 12px 16px;
  }

  .lx-screen a.stat-tile {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .lx-screen a.stat-tile:hover {
    border-color: var(--teal-mid);
    background: var(--teal-pale);
    text-decoration: none;
  }

  .lx-screen .chart-title a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .lx-screen .chart-title a:hover {
    color: var(--teal-text);
    text-decoration: none;
  }

  .lx-screen .bar-row-link {
    text-decoration: none;
    cursor: pointer;
  }

  .lx-screen .bar-row-link:hover {
    text-decoration: none;
  }

  .lx-screen .bar-row:has(> .bar-row-link):hover {
    background: var(--teal-pale);
  }

  .lx-screen .stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
  }

  .lx-screen .stat-label {
    font-size: 13px;
    color: var(--neutral-grey);
  }

  .lx-screen .stat-tile--selected {
    background: var(--teal-pale);
    box-shadow: var(--edge-selected);
    outline: none;
  }

  .lx-screen a.stat-tile.stat-tile--selected:focus,
  .lx-screen a.stat-tile.stat-tile--selected:focus-visible,
  .lx-screen .donut-arc:focus,
  .lx-screen .donut-arc:focus-visible {
    outline: none;
  }

  .lx-screen .page--hihp .hihp-resident-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .lx-screen .page--hihp .hihp-resident-row .stat-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: auto;
    margin: 0;
  }

  .lx-screen .page--hihp .hihp-resident-row .stat-tile {
    flex: 1 1 0;
    height: auto;
    align-self: flex-start;
  }

  .lx-screen .page--hihp .hihp-resident-row .stat-tile>.stat-label {
    flex: 0 0 auto;
  }

  .lx-screen .pill,
  .lx-screen .edd-pill,
  .lx-screen .edd-sev-critical:not(.key),
  .lx-screen .edd-sev-high:not(.key),
  .lx-screen .edd-sev-medium:not(.key),
  .lx-screen .edd-sev-low:not(.key),
  .lx-screen .sev-critical:not(.key),
  .lx-screen .sev-high:not(.key),
  .lx-screen .sev-medium:not(.key),
  .lx-screen .sev-low:not(.key) {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
  }

  .lx-screen .pill--ok {
    background: rgba(76, 158, 76, 0.18);
  }

  .lx-screen .pill--warn {
    background: rgba(217, 69, 59, 0.18);
  }

  .lx-screen .pill--overdue,
  .lx-screen .pill--muted,
  .lx-screen .pill--off {
    background: rgba(156, 154, 152, 0.18);
  }

  .lx-screen .edd-pill.edd-sev-critical,
  .lx-screen .edd-pill.sev-critical {
    background: var(--edd-critical);
    color: var(--on-teal);
  }

  .lx-screen .edd-pill.edd-sev-high,
  .lx-screen .edd-pill.sev-high {
    background: var(--edd-high);
    color: var(--ink);
  }

  .lx-screen .edd-pill.edd-sev-medium,
  .lx-screen .edd-pill.sev-medium {
    background: var(--edd-medium);
    color: var(--ink);
  }

  .lx-screen .edd-pill.edd-sev-low,
  .lx-screen .edd-pill.sev-low {
    background: var(--edd-low);
    color: var(--ink);
  }

  .lx-screen .donut-track {
    fill: var(--surface);
    stroke: var(--surface);
  }

  /* Severity classes set fill as well as stroke. On a donut that fill paints
     the whole disc, so the last slice covers the white centre. */
  .lx-screen .donut-arc {
    fill: none;
  }

  .lx-screen .donut-centre {
    inset: 23%;
    background: transparent;
  }

  .lx-screen .donut-centre-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
  }

  .lx-screen .donut-centre-caption {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.15;
    color: var(--neutral-grey);
  }

  .lx-screen .donut-legend li {
    font-size: 13px;
  }

  .lx-screen .donut-legend .key {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 2px;
    flex: none;
  }

  .lx-screen .donut-legend .key.sev-critical {
    background: var(--edd-critical);
  }

  .lx-screen .donut-legend .key.sev-high {
    background: var(--edd-high);
  }

  .lx-screen .donut-legend .key.sev-medium {
    background: var(--edd-medium);
  }

  .lx-screen .donut-legend .key.sev-low {
    background: var(--edd-low);
  }

  .lx-screen .toast-region .toast {
    background: var(--ink);
    color: var(--surface);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-popover);
  }

  .lx-screen :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  @media (max-width: 40rem) {
    .lx-shell {
      grid-template-columns: 52px minmax(0, 1fr);
    }

    .lx-ico {
      width: 38px;
      height: 38px;
    }

    .lx-rail-pop[open]>.lx-pop {
      left: 60px;
    }
  }

  @media (max-width: 48rem) {
    .lx-screen .page--hihp .hihp-resident-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 56rem) {
    .lx-meta {
      text-align: left;
    }

    .lx-screen .stat-tile {
      flex-basis: 40%;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .lx-screen .lx-ico,
    .lx-screen .lx-switch__track,
    .lx-screen .lx-switch__track::after {
      transition: none;
    }
  }

  /* Delayed loading overlay (portal_loading.js). Above rail, header, staff banner. */
  .lx-loading {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    pointer-events: auto;
  }

  .lx-loading[hidden] {
    display: none;
  }

  .lx-loading__scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
  }

  .lx-loading__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-popover);
    padding: var(--space-20) var(--space-28);
    font-family: var(--font-body);
    font-size: 14px;
    opacity: 0;
    animation: lx-loading-in 150ms ease-out forwards;
  }

  .lx-loading__text {
    margin: 0;
  }

  .lx-loading__slow {
    margin: 0;
    color: var(--neutral-grey);
    font-size: 13px;
  }

  /* The spinner: the hungry worm, which /static/shared/loading_worm.js plays on
     this canvas while the overlay shows. Its size is set here, and its colours, from
     tokens: --worm-body, --worm-track (the faint ring it glides round) and
     --worm-apple. With reduced motion the script draws one still frame. */
  .lx-loading__worm {
    display: block;
    width: 84px;
    height: 84px;
    --worm-body: var(--teal-text);
    --worm-track: var(--teal-pale);
    --worm-apple: var(--accent-orange);
  }

  /* /worm, the easter egg: the loading card alone, in the middle of the page. */
  body.lx-worm-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
  }

  @keyframes lx-loading-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lx-loading__card {
      animation: none;
      opacity: 1;
    }
  }

  /* ---------- Column resize + focus view ---------- */
  table.data.is-col-fixed {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
  }

  table.data.is-col-fixed td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Keep widened tables inside the white card / section border. The DON
     position tables often sit in a bare div; section+card must still clip. */
  .portal-section,
  .hihp-section,
  .chart-card,
  .hihp-score-panel,
  .portal-section-body,
  .hihp-section-body {
    min-width: 0;
    max-width: 100%;
  }

  .portal-section,
  .hihp-section,
  .chart-card,
  .hihp-score-panel {
    overflow-x: auto;
  }

  .portal-scroll,
  .hihp-scroll,
  .table-wrap,
  .don-compare-scroll,
  .chart-card .portal-scroll,
  .chart-card .table-wrap,
  .chart-card>div:has(> table.data) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  /* Win over the overflow-x rule above: --page must not become a capped
     scrollport (overflow-x:auto forces overflow-y to auto when left visible). */
  .lx-screen .portal-scroll.portal-scroll--page,
  .lx-screen .hihp-scroll.hihp-scroll--page {
    max-height: none;
    min-height: calc(100dvh - 14rem);
    overflow-x: auto;
    overflow-y: visible;
  }

  .lx-col-resize {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
  }

  /* Always-on grip so the edge is findable; hover/focus/drag turn teal. */
  .lx-col-resize::after {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 3px;
    width: 2px;
    border-radius: 1px;
    background: var(--neutral-grey);
    opacity: 0.55;
  }

  .lx-col-resize:hover::after,
  .lx-col-resize:focus-visible::after,
  .lx-col-resize.is-dragging::after {
    top: 0;
    bottom: 0;
    opacity: 1;
    background: var(--primary-teal);
  }

  .lx-col-resize:focus-visible {
    outline: none;
  }

  .lx-focus-host {
    position: relative;
  }

  .lx-focus-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    cursor: pointer;
  }

  .lx-focus-toggle--inline {
    position: static;
    flex-shrink: 0;
    margin-left: 8px;
  }

  /* Graph titles share a row with the expand control so the icon sits flush
     right of the heading instead of floating over the plot. */
  .lx-focus-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .lx-focus-heading>.chart-title,
  .lx-focus-heading>.portal-section-title,
  .lx-focus-heading>h2 {
    flex: 1;
    min-width: 0;
  }

  .lx-focus-heading>.lx-focus-toggle--inline {
    margin-left: 0;
  }

  .chart-card>.toolbar .filters-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .lx-focus-toggle:hover,
  .lx-focus-toggle:focus-visible {
    color: var(--primary-teal);
    background: transparent;
    box-shadow: none;
  }

  /* Keep CSV-matched expand on the download control chrome, not the bare icon. */
  .lx-screen .lx-focus-toggle--with-csv:hover,
  .lx-screen .lx-focus-toggle--with-csv:focus-visible {
    background: var(--teal-pale);
    color: var(--teal-text);
    box-shadow: inset 0 0 0 1.5px var(--teal-mid);
  }

  .lx-focus [data-lx-focus-body] .lx-focus-toggle {
    display: none;
  }

  .lx-focus {
    width: 94vw;
    height: 90vh;
    max-width: 94vw;
    max-height: 90vh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
  }

  .lx-focus::backdrop {
    background: var(--scrim);
  }

  .lx-focus__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }

  .lx-focus__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    min-width: 0;
  }

  .lx-focus__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .lx-focus__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    cursor: pointer;
  }

  .lx-focus__collapse:hover,
  .lx-focus__collapse:focus-visible {
    color: var(--primary-teal);
    background: transparent;
  }

  .lx-focus__body {
    height: calc(90vh - 53px);
    overflow: auto;
    padding: 12px 16px;
  }

  /* Use the full dialog width — do not keep the in-page card’s narrow measure. */
  .lx-focus__body>*,
  .lx-focus__body .lx-focus-chart-body,
  .lx-focus__body .portal-scroll,
  .lx-focus__body .hihp-scroll,
  .lx-focus__body .table-wrap,
  .lx-focus__body .don-compare-scroll,
  .lx-focus__body .chart-card {
    max-width: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .lx-focus__body .portal-scroll,
  .lx-focus__body .hihp-scroll {
    max-height: none;
  }

  .lx-focus__body table.data,
  .lx-focus__body table.data.is-col-fixed {
    width: 100%;
    min-width: 100%;
  }

  /* Charts fill the dialog width so labels scale with the plot, not stay card-sized. */
  .lx-focus__body .wing-chart,
  .lx-focus__body .stacked-chart,
  .lx-focus__body .line-chart,
  .lx-focus__body .donut,
  .lx-focus__body svg[class*="chart"] {
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, 40rem);
    height: auto;
    display: block;
  }

  .lx-focus-placeholder {
    pointer-events: none;
  }

  .lx-focus-chart-body {
    min-width: 0;
  }
}