/* Rail */
.rail {
  background: var(--rail);
  color: var(--rail-ink);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 900px) { .rail { position: static; height: auto; } }

.brand { display: flex; align-items: center; gap: 10px; color: inherit; padding: 2px 8px; --logo-bg: #ffffff; --logo-ink: #0b4f52; --logo-accent: #0e6366; }
.brand:hover { text-decoration: none; }
.brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-name span { font-weight: 400; opacity: 0.85; }

/* Navigation: named groups of links, scrolling together in one area between the brand and the account, so a
   short window still reaches every page. It reaches to the rail's edge, so the open dashboard's row can run
   flush into the page, like a tab, without being clipped. */
.rail-scroll {
  display: flex; flex-direction: column; gap: 22px; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rail-ink-2) transparent;
  margin-right: -14px; padding-right: 14px;
}
.rail-nav { display: flex; flex-direction: column; gap: 8px; flex: none; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 4px 0 10px; }
.rail-title { color: var(--rail-ink-2); font-weight: 500; }
a.rail-title:hover { text-decoration: none; color: var(--rail-ink); }
.rail-title.active { color: var(--rail-ink); }
.rail-add { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--rail-ink-2); }
.rail-add:hover { background: var(--rail-hover); color: var(--rail-ink); text-decoration: none; }
.rail-filter { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--radius); background: rgba(0, 0, 0, 0.18); color: var(--rail-ink-2); }
.rail-filter:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.rail-filter svg { flex-shrink: 0; }
.rail-filter input[type="search"] { flex: 1; min-width: 0; padding: 7px 0; border: 0; border-radius: 0; background: transparent; color: var(--rail-ink); outline: none; -webkit-appearance: none; appearance: none; }
.rail-filter input[type="search"]::-webkit-search-cancel-button { filter: invert(1); }
.rail-filter input::placeholder { color: var(--rail-ink-2); opacity: 1; }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.rail-link { display: block; padding: 7px 10px; border-radius: var(--radius); color: var(--rail-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-link:hover { background: var(--rail-hover); text-decoration: none; }
.rail-link.active { margin-right: -14px; padding-right: 24px; border-radius: var(--radius) 0 0 var(--radius); background: var(--plane); color: var(--ink); font-weight: 500; }
.rail-link.active:focus-visible { outline-offset: -2px; }
.rail-empty { padding: 7px 10px; color: var(--rail-ink-2); }

/* The account at the rail's foot; its menu opens upward with the admin pages and signing out. */
.account { position: relative; flex: none; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.account-toggle { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; }
.account-toggle::-webkit-details-marker { display: none; }
.account-toggle:hover, .account[open] .account-toggle { background: var(--rail-hover); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rail-active); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
.account-toggle.active .avatar { background: var(--rail-ink); color: var(--rail); }
.account-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.account-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role { color: var(--rail-ink-2); font-size: 0.85rem; }
.account-chevron { display: inline-flex; color: var(--rail-ink-2); transform: rotate(-90deg); }
.account[open] .account-chevron { transform: rotate(90deg); }
.account-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30; padding: 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.account-links { list-style: none; margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.menu-link { display: block; padding: 6px 10px; border-radius: var(--radius); color: var(--ink); }
.menu-link:hover { background: var(--surface-2); text-decoration: none; }
.menu-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.account-signout { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2); text-align: left; cursor: pointer; }
.account-signout:hover { background: var(--surface-2); color: var(--ink); }

/* Page header and text */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-head .lede { margin-top: 6px; color: var(--ink-2); max-width: 60ch; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
@media (max-width: 700px) { .page-head { flex-direction: column; } .page-head .actions { justify-content: flex-start; } }

.lede a { text-decoration: underline; text-decoration-color: var(--line-strong); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-small { padding: 4px 10px; font-size: 0.9rem; }
select.select-small { padding: 3px 24px 3px 8px; font-size: 0.9rem; width: auto; }
.btn-large { padding: 11px 18px; font-size: 1.05rem; width: 100%; }

/* Flash */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid var(--line); background: var(--surface); }
.flash-notice { border-color: var(--accent); background: var(--accent-soft); }
.flash-alert { border-color: var(--danger); background: var(--danger-soft); }

/* Toolbar: the single filter row above the panels */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; margin-bottom: 22px; }
.toolbar-form { display: contents; }

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.segmented > button, .segmented > label {
  padding: 6px 12px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 500;
  border-right: 1px solid var(--line);
}
.segmented > button:last-child, .segmented > label:last-child { border-right: 0; }
.segmented > button:hover, .segmented > label:hover { background: var(--surface-2); }
.segmented > button.active, .segmented > input:checked + label { background: var(--accent-soft); color: var(--accent); }
.segmented > button:focus-visible, .segmented > input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -2px; }
.segmented-radio > input { position: absolute; opacity: 0; width: 0; height: 0; }

.toolbar-custom { position: relative; }
.toolbar-custom summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); font-weight: 500; }
.toolbar-custom summary::-webkit-details-marker { display: none; }
.toolbar-custom summary.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.toolbar-custom-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toolbar-custom-fields label { color: var(--ink-2); }
.toolbar-interval { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-2); margin-left: auto; order: 3; }
.toolbar-interval label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.toolbar-custom { order: 2; }
.toolbar-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.toolbar-field { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.toolbar-field input { padding-top: 5px; padding-bottom: 5px; }

/* Tenant picker: below the toolbar, a search box over a native multiple select */
.tenant-picker { margin: -10px 0 22px; }
.tenant-picker summary { display: inline-block; list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); font-weight: 500; }
.tenant-picker summary::-webkit-details-marker { display: none; }
.tenant-picker summary.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tenant-picker-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tenant-picker-form label { color: var(--ink-2); font-weight: 500; }
.tenant-picker-actions { display: flex; gap: 8px; justify-content: flex-end; }

input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="email"], select, textarea {
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); min-width: 0;
}
/* Selects draw their own chevron: the native arrow sits against the border, ignores the theme and pads the
   text further in than the inputs beside it. Two gradient halves make the chevron, in the theme's ink. */
select:not([multiple]) {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
select.select-small { padding-right: 24px; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; }
.toolbar select { padding-top: 6px; padding-bottom: 6px; } /* as tall as the segmented controls beside it */
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }

.search { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink-3); min-width: 280px; }
.search input { border: 0; padding: 7px 0; flex: 1; background: transparent; }
.search input:focus-visible { outline: none; }
.search:focus-within { outline: 2px solid var(--focus); }

/* Panel grid. It answers to its own width, not the window's, which the rail shares: every panel keeps the
   width it was given, as arranging shows it, until three no longer fit side by side; then each takes the row. */
.panel-grid { container: panel-grid / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.panel { grid-column: span var(--span, 6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 320px; transition: box-shadow 0.6s ease-out; }
@container panel-grid (max-width: 559px) { .panel { grid-column: span 12; } }
.panel.is-revealed { box-shadow: 0 0 0 3px var(--accent); transition: none; } /* just added or saved (reveal_controller.js) */

.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; }
.panel-head > div { min-width: 0; }
.panel-title { font-size: 1.05rem; font-weight: 700; }
.panel-selector { color: var(--ink-3); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.panel-edit { color: var(--ink-3); font-size: 0.9rem; flex-shrink: 0; }
.panel-edit:hover { color: var(--accent); }

.panel-body { position: relative; flex: 1; min-height: 220px; padding: 6px 12px 4px; }
.panel-body canvas { width: 100% !important; height: 100% !important; }
/* Out of flow, so the chart never sizes the body it is sized from: in flow, a panel stretched by its grid row
   (Explore's chart beside a long breakdown) grew a few pixels on every Chart.js resize, without end. The body
   keeps the 2:1 shape Chart.js used to give it, and still fills a taller panel. */
.panel-body:has(> canvas) { aspect-ratio: 2 / 1; max-height: 400px; } /* a full-width chart stays shorter than the screen */
.panel-body > canvas { position: absolute; inset: 6px 12px 4px; width: calc(100% - 24px) !important; height: calc(100% - 10px) !important; }
.panel-body.is-failed canvas { display: none; }
.panel-empty:not([hidden]), .panel-error:not([hidden]) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ink-3); }
.panel-error { color: var(--danger); }

/* The series under a chart (chart_controller.js#renderLegend): wraps rather than taking the chart's room. */
.panel-legend { list-style: none; margin: 0; padding: 4px 16px 2px; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.8rem; }
.panel-legend[hidden], .panel-body.is-table + .panel-legend { display: none; }
.panel-legend li { min-width: 0; max-width: 100%; }
.panel-legend button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
.panel-legend button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-legend button[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; }
.panel-legend button[aria-pressed="false"] .panel-legend-swatch { opacity: 0.35; }
.panel-legend-swatch { flex-shrink: 0; width: 12px; height: 10px; border-radius: 2px; background: var(--swatch); }
.panel-legend-swatch.is-line { height: 2px; border-radius: 1px; }
.panel-legend-swatch.is-dashed { height: 0; border-top: 2px dashed var(--swatch); background: none; }

.panel-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 16px 12px; color: var(--ink-3); font-size: 0.85rem; }
.panel-toggle { background: none; border: 0; padding: 0; color: var(--ink-3); cursor: pointer; font-size: inherit; white-space: nowrap; flex-shrink: 0; }
.panel-toggle:hover, .panel-toggle[aria-pressed="true"] { color: var(--accent); }

/* Table twin of the chart, shown in place of the chart inside the panel body. */
.panel-body.is-table canvas, .panel-body.is-table .stat { display: none !important; } /* Chart.js sets display inline */
.panel-table { position: absolute; inset: 6px 12px 4px; overflow: auto; background: var(--surface); }
.panel-table table { width: 100%; font-size: 0.85rem; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
.panel-table th, .panel-table td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 400; }
.panel-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--ink-2); font-weight: 500; z-index: 1; }
.panel-table th:first-child, .panel-table td:first-child { text-align: left; color: var(--ink-2); position: sticky; left: 0; background: var(--surface); }
.panel-table thead th:first-child { z-index: 2; }
.panel-table tbody tr:hover td, .panel-table tbody tr:hover th { background: var(--surface-2); }

/* Arranging a dashboard's panels (arrange_controller.js) */
.arrange-hint { margin: -8px 0 16px; color: var(--ink-2); }
.arrange-hint.is-error { color: var(--danger); }
.panel-arrange { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 16px 8px; }
.panel-arrange[hidden] { display: none; }
.panel-arrange .segmented > button { display: inline-flex; align-items: center; padding: 4px 10px; }
.panel-arrange .segmented > button:disabled { color: var(--ink-3); cursor: default; opacity: 0.5; background: transparent; }
.panel-grip { display: inline-flex; color: var(--ink-3); cursor: grab; }
.panel-widths-note { display: none; flex-basis: 100%; }
@container panel-grid (max-width: 559px) { .panel-widths-note { display: block; } }
.is-arranging .panel { position: relative; cursor: grab; border-style: dashed; border-color: var(--line-strong); }
.is-arranging .panel.is-dragging { opacity: 0.4; }
.is-arranging .panel.is-drop-before::before, .is-arranging .panel.is-drop-after::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--accent); pointer-events: none;
}
.is-arranging .panel.is-drop-before::before { left: -10px; }
.is-arranging .panel.is-drop-after::after { right: -10px; }
.is-arranging .panel.is-drop-wide::before, .is-arranging .panel.is-drop-wide::after { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 4px; }
.is-arranging .panel.is-drop-wide.is-drop-before::before { top: -10px; }
.is-arranging .panel.is-drop-wide.is-drop-after::after { bottom: -10px; }

/* Number panel. The number shrinks with a narrow panel, such as a third of a laptop's grid. */
.panel-stat { min-height: 200px; container-type: inline-size; }
.stat { display: grid; grid-template-rows: auto auto 1fr; height: 100%; padding: 4px 4px 0; }
.stat-value { font-size: clamp(1.75rem, 16cqi, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-caption { color: var(--ink-3); min-height: 1.5em; }
.stat-delta[data-direction="up"] { color: var(--good); }
.stat-delta[data-direction="down"] { color: var(--danger); }
.stat-spark { max-height: 72px; margin-top: 8px; }

/* Empty states */
.empty { max-width: 56ch; padding: 40px 0; }
.empty h2 { margin-bottom: 8px; }
.empty p { color: var(--ink-2); margin-bottom: 18px; }

/* Cards (dashboard list) */
.card-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.card-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.card-text { color: var(--ink-2); }
.card-meta { color: var(--ink-3); font-size: 0.9rem; margin-top: auto; }
/* Dashboards overview: sections (yours, shared, products) and the first panel titles on each card */
.dashboard-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.card-preview { list-style: none; margin: 0; padding: 0; color: var(--ink-2); font-size: 0.9rem; }
.card-preview li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-preview li::before { content: "\2013\00a0"; color: var(--ink-3); }

/* Forms */
.form-column { max-width: 560px; display: flex; flex-direction: column; gap: 32px; }
.form-column-wide { max-width: 760px; }
.form-column + .table-scroll-x { margin-top: 32px; } /* a full-width table under a narrow column, spaced like the column's own gap */
.form { display: flex; flex-direction: column; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.form-row { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.form-intro { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; } /* heading and hint above a row of fields */
.form-intro h3 { font-size: 1rem; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field-narrow { max-width: 200px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } .field-row-dates { grid-template-columns: 1fr 1fr; } }
.field-row-dates input { width: 100%; }
.field label, .field legend { font-weight: 500; }
.field legend { margin-bottom: 6px; padding: 0; }
.field[hidden] { display: none; } /* panel options the chosen chart type does not use */
.form-options { display: flex; flex-direction: column; gap: 20px; } /* the panel form's options, spaced like the form */
.form-advanced summary { cursor: pointer; color: var(--ink-2); font-weight: 500; width: fit-content; }
.form-advanced[open] summary { margin-bottom: 14px; }
.field-inline:not([hidden]) { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hint { color: var(--ink-3); font-size: 0.9rem; }
.hint a { text-decoration: underline; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice span { display: flex; flex-direction: column; }
.choice small { color: var(--ink-2); }
.form-actions { display: flex; gap: 8px; align-items: center; }
.form-errors { border: 1px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius); padding: 10px 14px; }
.form-errors ul { margin: 4px 0 0; padding-left: 18px; }
.inline-form { display: inline-flex; }

.danger-zone { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.danger-zone p { color: var(--ink-2); }

/* Selector preview in the panel form */
.preview { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-2); max-height: 240px; overflow: auto; }
.preview.is-invalid { border-color: var(--danger); }
.preview-status { color: var(--ink-2); }
.preview.is-invalid .preview-status { color: var(--danger); }
.preview-keys { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.preview-keys li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-keys code { background: transparent; border: 0; padding: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-badge { color: var(--ink-3); font-size: 0.85rem; flex-shrink: 0; }

/* The panel form's chart preview (panel_preview_controller.js). On a wide screen it has a column of its own
   beside the fields and stays in view while the options are changed; otherwise it follows the metrics it plots. */
.field-label { font-weight: 500; }
.panel-preview turbo-frame { display: block; }
.panel-preview turbo-frame[busy] > * { opacity: 0.55; } /* the next chart is being drawn */
@media (min-width: 1280px) {
  .form-column-preview { max-width: 1240px; }
  .form-with-preview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 0 28px; align-items: start; }
  .form-with-preview > * { grid-column: 1; margin-bottom: 20px; }
  .form-with-preview > :last-child { margin-bottom: 0; }
  /* Spans more rows than the fields fill; the empty ones add nothing, as the fields space with margins. */
  .form-with-preview > .panel-preview { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 24px; margin-bottom: 0; }
}

/* Metric picker in the panel form: app, metric and tag values from the catalog. */
.picker { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.picker > summary { cursor: pointer; padding: 8px 12px; font-weight: 500; color: var(--accent); }
.picker[open] > summary { border-bottom: 1px solid var(--line); }
.picker-body { display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.picker-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 640px) { .picker-filters { grid-template-columns: 1fr; } }
.picker-options { display: flex; flex-direction: column; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.picker-options:empty { display: none; }
.picker-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.picker-option:last-child { border-bottom: 0; }
.picker-option:has(input:checked) { background: var(--accent-soft); }
.picker-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.picker-option input, .picker-values input { accent-color: var(--accent); }
.picker-option code { background: transparent; border: 0; padding: 0; overflow-wrap: anywhere; }
.picker-option small { color: var(--ink-3); flex-basis: 100%; padding-left: 22px; }
.picker-tag { border: 0; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.picker-tag legend { font-weight: 500; padding: 0; margin-bottom: 6px; }
.picker-tag legend small { color: var(--ink-3); font-weight: 400; }
.picker-values { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.picker-values label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.picker-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.picker-result p { color: var(--ink-2); overflow-wrap: anywhere; }
.picker-result .btn:disabled { opacity: 0.55; cursor: default; }

/* Tables */
.table { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-weight: 500; color: var(--ink-2); background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td > span.muted { display: block; font-size: 0.9rem; } /* secondary line under a name, e.g. an email address */
.table td.muted { color: var(--ink-3); }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions form { display: inline; }
.result-count { margin-bottom: 10px; }
.key-cell { font-weight: 500; white-space: nowrap; } /* one line per metric; the table scrolls sideways when needed */
.key-cell .dot { color: var(--ink-3); padding: 0 1px; }

.menu { position: relative; display: inline-block; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; list-style: none; margin: 0; padding: 4px; min-width: 200px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); text-align: left; }
.menu li a { display: block; padding: 6px 10px; border-radius: 4px; color: var(--ink); }
.menu li a:hover { background: var(--surface-2); text-decoration: none; }

.role-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.role-legend dt { font-weight: 700; }
.role-legend dd { margin: 0; color: var(--ink-2); }
@media (max-width: 700px) { .role-legend { grid-template-columns: 1fr; } }

/* Sign-in */
.session-body { display: grid; place-items: center; padding: 24px; background: var(--rail); }
.session-card { width: min(440px, 100%); background: var(--surface); border-radius: 10px; padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.session-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.session-card h1 { font-size: 1.75rem; }
.session-lede { color: var(--ink-2); margin-bottom: 8px; }
.session-note { color: var(--ink-3); font-size: 0.9rem; }
/* The consent screen of the MCP connection: Allow and Deny side by side. */
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Small screens: the rail is a sticky top bar with the current page and a menu; filters scroll sideways;
   wide tables keep their first column in view. */
.segmented > button, .segmented > label, .segmented-link { white-space: nowrap; }
.rail-menu-toggle { display: none; }
.rail-menu { display: contents; }
@media (max-width: 900px) {
  .rail {
    position: sticky; top: 0; z-index: 20; height: auto; overflow: visible;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px;
    /* Installed on a phone the bar runs under the status bar and round the notch; the insets keep it clear. */
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .brand { padding: 4px 4px; }
  .brand-name { display: none; }
  .rail-menu-toggle {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; min-width: 0;
    padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); background: transparent; color: var(--rail-ink); font: inherit; font-weight: 500; cursor: pointer;
  }
  .rail-menu-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .rail-menu-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-menu-icon { display: inline-flex; flex-shrink: 0; }
  .rail-menu-icon-close, .rail.is-open .rail-menu-icon-open { display: none; }
  .rail.is-open .rail-menu-icon-close { display: inline-flex; }
  /* The menu drops over the page from the bar rather than pushing it down, so the page stays where it was
     when the menu closes; the rest of the screen dims behind it and the page itself stops scrolling. A menu
     taller than the screen scrolls on its own; the active link's negative margin runs its highlight to the edge. */
  .rail-menu { display: none; flex-direction: column; gap: 14px; }
  .rail.is-open .rail-menu {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    background: var(--rail); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  }
  .rail.is-open::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100dvh; background: rgba(5, 20, 20, 0.5); }
  body.menu-open { overflow: hidden; }
  .rail-menu > * { flex-shrink: 0; } /* the menu scrolls; its sections keep their height */
  .rail-nav { gap: 2px; }
  .rail-list { gap: 0; }
  .rail-link { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; }
  .rail-heading { padding: 4px 4px 4px 10px; }
  .rail-scroll { display: contents; } /* the dropped-down menu is the one area that scrolls, account included */
  .rail-link.active { margin-right: calc(-12px - env(safe-area-inset-right)); }
  .account { margin-top: 4px; }
  .account-toggle { min-height: 44px; }
  .account-menu { position: static; margin-top: 4px; box-shadow: none; }
  .menu-link, .account-signout { min-height: 44px; display: flex; align-items: center; }
  .main { padding: 16px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
  .table th, .table td { padding: 8px 10px; }
  .field-row { gap: 12px; }
  .explore-grid .panel:has(.explore-table), .explore-table.panel-body { min-height: 0; } /* the breakdown is as tall as its rows */
  .toolbar { gap: 8px 12px; }
  .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmented::-webkit-scrollbar { display: none; }
  .toolbar-interval { margin-left: 0; }
  .search { min-width: 0; width: 100%; }
  .table-scroll-x .table th:first-child, .table-scroll-x .table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .table-scroll-x .table th:first-child { background: var(--surface-2); }
  .table-scroll-x .table tr.is-current td:first-child { background: var(--surface); }
  .panel { min-height: 280px; }
  .panel-stat { min-height: 0; }
  .panel-stat .panel-body { min-height: 150px; }
  .stat-value { font-size: clamp(1.75rem, 16cqi, 2.25rem); }
  .answer-number { font-size: 2.5rem; }
  .save-panel input[type="text"] { min-width: 0; width: 100%; }
  .explore-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
}
/* Fingers need more room than pointers. */
@media (pointer: coarse) {
  .btn, .segmented > button, .segmented > label, .segmented-link, .panel-toggle, .toolbar-check { min-height: 42px; display: inline-flex; align-items: center; }
  .coverage-toggle { width: 38px; height: 38px; }
  input, select, textarea, select.select-small { font-size: 16px; } /* anything smaller and iOS zooms into the field */
}

/* Dialogs: the confirmation (replaces window.confirm for data-turbo-confirm) and small task dialogs such as linking a tenant */
.confirm, .dialog { border: 1px solid var(--line-strong); border-radius: 8px; padding: 24px; background: var(--surface); color: var(--ink); width: min(420px, calc(100vw - 32px)); }
.confirm::backdrop, .dialog::backdrop { background: rgba(10, 20, 18, 0.45); }
.confirm p { font-size: 1.05rem; margin-bottom: 18px; }
.confirm .form-actions, .dialog .form-actions { justify-content: flex-end; margin-top: 4px; }
.dialog-form { display: flex; flex-direction: column; gap: 16px; }
.dialog-form h2 { overflow-wrap: anywhere; }
.dialog-form > .hint { margin-top: -8px; }

/* Tags in the catalog */
/* Cells stay table cells; the chips inside them are inline so they flow on one line and wrap as a group. */
.tags-cell { line-height: 1.9; white-space: normal; min-width: 16rem; max-width: 34rem; }
.tags-cell .tag { margin: 0 4px 2px 0; }
.tag { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; margin-right: 4px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; white-space: nowrap; vertical-align: middle; }
.tag-name { color: var(--ink-3); }
.tag-name::after { content: "="; }
.tag-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tag-count::before { content: "\00a0"; }
.table-keys td:nth-child(n+3) { white-space: nowrap; }

/* Explore */
.explore-form { margin-bottom: 24px; }
.explore-form.is-changed ~ .answer, .explore-form.is-changed ~ .explore-grid { opacity: 0.55; } /* it answers the previous question */
.answer { margin-bottom: 20px; }
.answer-number { font-size: 3.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.answer-caption { color: var(--ink-2); max-width: 70ch; margin-top: 4px; }
.save-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.save-panel input[type="text"] { min-width: 320px; flex: 1; }
.explore-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; } /* the chart keeps its height beside a long breakdown */
.explore-grid .panel { min-height: 360px; }
@media (max-width: 1000px) { .explore-grid .panel { grid-column: span 12; } }
.explore-table { overflow: auto; padding: 0 16px 8px; }
.explore-table table { width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
.explore-table th, .explore-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.explore-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--ink-2); font-weight: 500; }
.explore-table .num { text-align: right; }
.explore-table td a { color: var(--ink); }

/* CRM extension */
.stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.stack > h2 { margin-top: 8px; }
.integration { gap: 12px; }
.integration-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.integration-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.integration-status dt { color: var(--ink-3); font-size: 0.9rem; }
.integration-status dd { margin: 0; }

/* A license term in detail: one panel per product, its figures in a row above a chart kept low so
   a term with a product or two reads without scrolling. */
.term-panel { min-height: 0; }
.term-panel .panel-body { flex: none; height: clamp(180px, 30vh, 260px); min-height: 0; }
.term-panel .panel-selector { white-space: normal; } /* a sentence, not a selector */
.term-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 16px; margin: 0; padding: 4px 16px 10px; border-bottom: 1px solid var(--line); }
.term-facts dt { color: var(--ink-3); font-size: 0.85rem; }
.term-facts dd { margin: 0; font-weight: 500; }
.error-text { color: var(--danger); }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.switch input { accent-color: var(--accent); width: 18px; height: 18px; }
.license { gap: 10px; }
.license.is-archived { opacity: 0.6; }
.license-head h3 { font-size: 1rem; }
.table-flat { border: 0; border-radius: 0; }
.table-flat th { background: transparent; }
.table tr.is-current td { background: var(--accent-soft); }
.invoice-split { display: block; font-size: 0.8rem; white-space: nowrap; } /* "5,300 + 700" under a period's total seats */
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.badge-muted { background: var(--surface-2); color: var(--ink-3); }
/* Discrepancies page: the per-check summary and the groups below it. */
.discrepancy-summary { max-width: 640px; margin-bottom: 26px; }
.discrepancy-summary-wide { max-width: none; } /* a column per product */
.discrepancy-total th, .discrepancy-total td { border-top: 2px solid var(--line); font-weight: 600; }
.discrepancy-group { margin-top: 30px; scroll-margin-top: 72px; } /* the summary's anchor links land below the sticky bar */
.discrepancy-group .section-head h2 .badge { margin-left: 8px; }
.discrepancy-group .table-scroll-x .table td { white-space: normal; } /* long license names and details wrap; the table stays on screen */
.discrepancy-group .table td:first-child, .discrepancy-group .table td:nth-child(2) { white-space: nowrap; }
.discrepancy-group .table td:nth-child(3) { min-width: 24ch; }
.discrepancy-detail { font-variant-numeric: tabular-nums; min-width: 28ch; }
.badge-warn { background: var(--danger-soft); color: var(--danger); margin-left: 0; }
/* At risk page (alpha): the flag in the rail and the heading. */
.flag { display: inline-block; vertical-align: middle; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
h1 .flag { margin-left: 8px; }
/* A term's risk tier, as loud as it is risky: High solid, Medium tinted, Low plain text, Unknown
   outlined with a dash (unreadable, which is not the same as fine). */
.badge-tier { margin-left: 0; font-weight: 600; border: 1px solid transparent; }
.badge-high { background: var(--danger); color: var(--surface); }
.badge-medium { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.badge-low { background: transparent; color: var(--ink-2); font-weight: 500; padding-left: 0; }
.badge-unknown { background: transparent; color: var(--ink-2); border: 1px dashed var(--ink-3); }
/* The At risk table: a chevron in a column of its own opens a detail row below with the scoring,
   the trend and every linked tenant, and the company is the row header. The facts wrap, the
   figures do not; the detail keeps to the visible part of the table when the table scrolls. */
.risk-legend, .risk-notice { max-width: 90ch; margin: -6px 0 12px; }
.risk-table { --toggle-width: 32px; }
.risk-table th, .risk-table td { vertical-align: top; }
.risk-table tbody th { background: var(--surface); color: var(--ink); font-weight: 400; }
.table-scroll-x .risk-table :is(th.risk-company, td.risk-why, td.risk-tenants) { white-space: normal; }
.risk-company { min-width: calc(14ch - var(--toggle-width)); max-width: 24ch; } /* with the chevron's column, as wide as the company column was with the chevron in it */
.risk-table th.risk-company { padding-left: 4px; }
.risk-tenants { min-width: 12ch; max-width: 24ch; }
.risk-table .risk-toggle-cell { width: var(--toggle-width); padding-right: 0; }
.risk-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -1px 0 0 -6px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer; }
.risk-toggle:hover { background: var(--surface-2); color: var(--ink); }
.risk-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.risk-toggle svg { transition: transform 120ms ease; }
.risk-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.risk-sub { display: block; font-size: 0.85rem; color: var(--ink-2); }
.risk-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 22ch; max-width: 38ch; }
.risk-facts a, .signals dd a { text-decoration: underline; text-decoration-color: var(--line-strong); } /* a link inside a sentence is not told apart by colour alone */
.risk-when { display: block; font-weight: 600; white-space: nowrap; }
.risk-when.is-urgent { color: var(--danger); }
.risk-issue { display: block; color: var(--danger); font-size: 0.9rem; }
.risk-highlight { display: block; font-weight: 600; color: var(--accent); }
.risk-seats .utilisation { display: flex; }
.risk-seats .meter { width: 64px; }
.risk-tenants .badge-health { margin-bottom: 2px; }
.risk-table tr.risk-detail > td { background: var(--surface-2); padding-top: 12px; padding-bottom: 14px; }
.risk-table tr:has(+ tr.risk-detail:not([hidden])) > * { border-bottom-color: transparent; }
.risk-table tbody tr:last-child > *, .risk-table tbody tr:nth-last-child(2):has(+ tr.risk-detail[hidden]) > * { border-bottom: 0; } /* the last visible row meets the table's border */
.table-scroll-x .risk-table tr.risk-detail td { white-space: normal; }
.table-scroll-x:has(> .risk-table) { container-type: inline-size; }
.risk-detail-list { position: sticky; left: 24px; width: min(110ch, calc(100cqw - 48px)); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; font-size: 0.9rem; }
.risk-detail-list dt { font-weight: 500; color: var(--ink-2); }
.risk-detail-list dd { margin: 0; }
.risk-detail-items { margin: 0; padding-left: 1.1em; }
.risk-lapsed { margin-top: 28px; }
.risk-lapsed > summary { cursor: pointer; margin-bottom: 12px; }
.risk-lapsed > summary h2 { display: inline; font-size: 1.15rem; }
.risk-lapsed > summary h2 .badge { vertical-align: 2px; }
.risk-lapsed > summary .hint { margin-left: 8px; }
.risk-explain { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.risk-explain > h2 { font-size: 1.15rem; margin-bottom: 12px; }
@media (pointer: coarse) {
  .risk-table { --toggle-width: 44px; }
  .risk-toggle { width: 38px; height: 38px; margin: -8px 0 -8px -8px; }
}
/* Mid widths: the chevron and the company stay pinned while the figures scroll, and a name breaks
   between words only. The pinned column shows what scrolled under it, so there is no fade on that side. */
@media (max-width: 900px) {
  .table-scroll-x.has-more-start:has(> .risk-table) { --fade-start: 0px; }
  .table-scroll-x .risk-table tr > :is(th, td).risk-toggle-cell { min-width: var(--toggle-width); max-width: var(--toggle-width); box-shadow: none; }
  .table-scroll-x .risk-table :is(th.risk-company, thead th:nth-child(2)) { position: sticky; left: var(--toggle-width); z-index: 1; min-width: 9rem; max-width: 40vw; overflow-wrap: break-word; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .table-scroll-x .risk-table thead th:nth-child(2) { background: var(--surface-2); }
  /* The lapsed table has no chevron: its company is the first column, pinned at the edge. */
  .risk-lapsed .table-scroll-x .risk-table th.risk-company { left: 0; }
  .risk-lapsed .table-scroll-x .risk-table thead th:nth-child(2) { position: static; box-shadow: none; }
  .table-scroll-x .risk-table tbody th:first-child { background: var(--surface); }
  .table-scroll-x .risk-table tr.risk-detail td:first-child { position: static; max-width: none; min-width: 0; box-shadow: none; background: var(--surface-2); }
  .risk-detail-list { left: 10px; width: calc(100cqw - 44px); grid-template-columns: minmax(0, 1fr); gap: 2px; } /* clear of the end fade */
  .risk-detail-list dd { margin-bottom: 6px; }
}
/* Phones: each term is a card, the chevron, the company and its tier on top, the facts across, every
   figure under its label (the label is drawn, the column header still names it to a screen reader). */
@media (max-width: 700px) {
  .table-scroll-x:has(> .risk-table) { overflow: visible; mask-image: none; }
  .risk-table, .risk-table tbody, .risk-table tr, .risk-table th, .risk-table td { display: block; }
  .risk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .risk-table tbody tr:not(.risk-detail) { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .risk-lapsed .risk-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .risk-table tbody tr:last-child, .risk-table tbody tr:nth-last-child(2):has(+ tr.risk-detail[hidden]) { border-bottom: 0; }
  .risk-table tbody tr:has(+ tr.risk-detail:not([hidden])) { border-bottom-color: transparent; }
  .risk-table tr[hidden] { display: none; }
  .table-scroll-x .risk-table tbody :is(th, td), .table-scroll-x .risk-table tbody :is(th, td):first-child, .table-scroll-x .risk-table tbody th.risk-company { position: static; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; box-shadow: none; background: transparent; white-space: normal; }
  .risk-table .risk-tier { justify-self: end; text-align: right; }
  .risk-table .risk-why { grid-column: 2 / -1; }
  .risk-table :is(.risk-renews, .risk-tenants) { grid-column: 2; }
  .risk-lapsed .risk-table .risk-company { grid-column: 1 / -1; }
  .risk-lapsed .risk-table :is(.risk-renews, .risk-tenants) { grid-column: auto; }
  .risk-facts { min-width: 0; max-width: none; }
  .risk-table td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px; font-size: 0.8rem; color: var(--ink-2); }
  .risk-table .cell-actions { align-self: end; justify-self: end; }
  .table-scroll-x .risk-table tr.risk-detail > td:first-child { padding: 12px 14px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
  .risk-detail-list { position: static; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .risk-toggle svg { transition: none; } }
.signals { margin-bottom: 20px; }
.signals summary { cursor: pointer; color: var(--ink-2); }
.signals dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 0; }
.signals dt { font-weight: 500; white-space: nowrap; }
.signals dd { margin: 0; color: var(--ink-2); }
/* Tenant health bands (TenantHealth): the At risk page shows a tenant's only when it needs a look. */
.badge-health { margin-left: 0; font-variant-numeric: tabular-nums; }
.badge-health.is-watch { background: var(--warn-soft); color: var(--warn); }
.badge-health.is-at_risk { background: var(--danger-soft); color: var(--danger); }
.tenant-key { font-weight: 500; }
.utilisation { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.meter { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--accent); }
.meter-fill.is-over { background: var(--danger); }
.row-link { color: var(--ink); font-weight: 500; }
.pager { display: flex; gap: 8px; margin-top: 12px; }
.segmented-link { padding: 6px 12px; color: var(--ink-2); font-weight: 500; border-right: 1px solid var(--line); text-decoration: none; }
.segmented-link:last-child { border-right: 0; }
.segmented-link:hover { background: var(--surface-2); text-decoration: none; }
.segmented-link.active { background: var(--accent-soft); color: var(--accent); }
/* The wrapper scrolls and clips the rounded corners; a table that clipped itself would be the box its sticky
   first column sticks to, so it would scroll away with the rest. It is positioned so that an absolutely placed
   descendant (the screen-reader label in a coverage toggle) sits inside it: positioned against the page instead,
   such a label lands wherever its cell is in the unscrolled table and widens the page beyond the screen. */
.table-scroll-x { position: relative; overflow-x: auto; border-radius: var(--radius); }
/* A fading edge on the side where a table, filter row or the rail's menu has more; scroll_hint_controller sets
   the classes. The rail's menu scrolls up and down, so its edges are the top and bottom. */
.table-scroll-x, .segmented, .rail-scroll { --fade-start: 0px; --fade-end: 0px; }
.has-more-start { --fade-start: 32px; }
.has-more-end { --fade-end: 32px; }
.has-more-start, .has-more-end { mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); }
.rail-scroll.has-more-start, .rail-scroll.has-more-end { mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); }
.table-scroll-x .table { overflow: visible; border-collapse: separate; border-spacing: 0; }
.table-scroll-x .table td, .table-scroll-x .table th { white-space: nowrap; }
.table-scroll-x .table td.tags-cell { white-space: normal; } /* the catalog's tag chips wrap as a group */
/* The pinned first column takes at most half the screen and wraps, so the columns beside it stay readable. */
@media (max-width: 900px) {
  .table-scroll-x .table :is(th, td):first-child { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; max-width: 45vw; }
  .table-scroll-x .table td.key-cell { overflow-wrap: normal; } /* a metric key breaks between its parts, never inside one */
  .table-scroll-x .table td.key-cell .segments-metric { flex-wrap: wrap; }
}
.trend-down { color: var(--danger); font-weight: 500; }

/* Coverage grid: which tenants count towards which license */
.section-head { display: flex; flex-direction: column; gap: 4px; }
.section-head .hint { max-width: 70ch; }
.coverage-grid th, .coverage-grid td { vertical-align: middle; }
.coverage-grid thead th { white-space: normal; }
.coverage-license { min-width: 160px; max-width: 220px; }
.coverage-license-name { display: block; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coverage-license-meta { display: block; font-weight: 400; font-size: 0.85rem; white-space: normal; } /* wraps: a long product list would otherwise run into the next column */
.coverage-tenant { font-weight: 400; text-align: left; }
.coverage-tenant .tenant-key { display: block; }
.coverage-tenant .muted { display: block; font-size: 0.85rem; }
.coverage-cell { text-align: center; width: 1%; }
.coverage-cell .inline-form { display: inline-block; }
.coverage-toggle { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--on-accent); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.coverage-toggle:hover { border-color: var(--accent); }
.coverage-toggle:active { transform: scale(0.94); }
.coverage-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.coverage-toggle.is-on { background: var(--accent); border-color: var(--accent); }
.coverage-toggle.is-on:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.coverage-toggle svg { width: 16px; height: 16px; }
.crm-mark { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; flex-shrink: 0; }
.coverage-toggle[disabled] { cursor: default; opacity: 0.7; }
.coverage-toggle[disabled]:hover { border-color: var(--line-strong); }
.coverage-note { font-size: 0.85rem; white-space: nowrap; }
.coverage-grid tr.is-uncovered .coverage-tenant .tenant-key { color: var(--ink-2); }
.coverage-count { text-align: center; font-size: 0.85rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.coverage-count.is-empty { color: var(--danger); }
.coverage-grid tfoot td { padding-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .coverage-toggle { transition: none; } .coverage-toggle:active { transform: none; } }

/* Metric templates: a key drawn part by part */
.code-field { font-weight: 500; }
.segments { display: inline-flex; flex-wrap: wrap; align-items: flex-start; gap: 0 2px; }
.segment { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 6px; border-radius: 4px; font-weight: 500; line-height: 1.25; }
.segment + .segment::before { content: none; }
.segment small { font-weight: 400; font-size: 0.72rem; color: var(--ink-3); line-height: 1.2; }
.segment.is-literal { color: var(--ink-3); font-weight: 400; }
.segment.is-metric { color: var(--ink); }
.segment.is-tag { color: var(--accent); background: var(--accent-soft); }
.segment.is-tag small { color: var(--accent); opacity: 0.85; }
.segment.is-skip { color: var(--ink-3); text-decoration: line-through; }
.segment.is-invalid { color: var(--danger); background: var(--danger-soft); }
.segments .segment:not(:last-child)::after { content: ""; }
.readings { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.readings li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.readings li:last-child { border-bottom: 0; }
.reading-metric { font-size: 0.9rem; align-self: center; }
.preview { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.preview-summary { max-width: 80ch; }
.preview-problem { color: var(--danger); display: block; }
.preview-metrics { margin-top: 8px; max-width: 90ch; }
.templates td .segments { margin-bottom: 2px; }
.template-description { display: block; font-size: 0.85rem; }
.templates td.is-zero { color: var(--danger); }
.regroup-status { margin-bottom: 32px; }
.regroup-status p { margin: 0; max-width: 90ch; }
.unread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.unread-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.unread-keys { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.segments-metric { flex-wrap: nowrap; }
.segments-metric .segment { padding: 1px 4px; }
.segments-metric .segment.is-tag { font-size: 0.85rem; }
.segments-link { text-decoration: none; }
.segments-link:hover .segment.is-tag { background: var(--accent); color: var(--on-accent); }
.segments-link:hover .segment.is-tag small { color: var(--on-accent); }