/* Open Altio's own styles: only what design/next's stylesheets (vendor/) do
   not already draw: the page layouts, the charts grid, the case window's
   columns and the filters menu's two panes. From the agreed design
   (prototype/open-altio-look, 400d2b8). */

@layer components {
  a.row, a.product-tab, a.brand-home, a.btn, a.menu-item { text-decoration: none; }
  /* room under every page */
  .frame-page { padding-bottom: var(--space-12); }
  .oa-apply { padding-bottom: 120px; }
  a.row .icon, button.row .icon { color: var(--ink-faint); }
  a.row:hover { --row-bg: var(--mist); --row-ink: var(--ink); }
  .oa-prod-row .chat-open { --row-ink: var(--ink-soft); }
  .oa-prod-row .row-current { --row-bg: var(--accent-soft); --row-ink: var(--accent); }
  .oa-prod-row[draggable="true"] { cursor: grab; }
  .oa-prod-row.oa-dragging { opacity: 0.45; }
  .oa-prod-row[data-drop="before"] { box-shadow: inset 0 2px 0 var(--accent); }
  .oa-prod-row[data-drop="after"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .menu .menu-item .icon, .menu .menu-item .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .menu .menu-note { max-width: 260px; white-space: normal; }
  /* a count of what waits, at the right of its row, as Drawing Board shows it */
  .oa-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
  .oa-side-note { padding: var(--space-3) var(--row-pad-x) var(--space-3) var(--row-indent); color: var(--ink-faint); font-size: var(--text-note); }
  .oa-side-release { padding: 0 var(--space-4); color: var(--ink-faint); font-size: var(--text-sm); }

  /* ---- the side panel and the folded rail: every icon they share at the same height (ruled 15-Oct) ----
     Both start --side-edge from the window's top and end --side-edge from its foot, with --side-pad
     inside their border; rows and rail buttons are --side-row high, --side-gap apart, their icons
     --side-icon. The fold button's row comes first, then a break (the rail draws a line in it), then
     Home, All cases, Tables and SQL, Administration and Products. View as, Settings and Sign out sit
     on the foot, over the release line; the rail keeps the release line's room (--side-foot) empty.
     The rail is as wide as the panel's icon column needs, so the icons line up sideways too. */
  .frame {
    --side-edge: var(--space-6);
    --side-pad: var(--space-5);
    --side-row: 44px;
    --side-gap: var(--space-1);
    --side-icon: 20px;
    --side-line: var(--space-3);
    --side-foot: 48px;
  }
  .side-panel {
    --panel-pad-y: var(--side-pad);
    --panel-pad-x: var(--side-pad);
    gap: var(--side-gap);
    align-self: stretch;
    max-height: none;
  }
  .side-panel > :is(.side-brand, .oa-side-row, .oa-side-you, .oa-side-release) { flex: none; }
  .side-brand {
    height: var(--side-row);
    padding: 0 0 0 calc(var(--row-pad-x) + (var(--side-icon) - var(--mark-width)) / 2);
    margin-bottom: calc(2 * var(--side-line) + var(--hairline) + var(--side-gap));
  }
  .side-collapse { width: var(--side-row); height: var(--side-row); }
  .side-panel :is(.oa-side-row, .oa-prod-head) { height: var(--side-row); }
  .side-panel :is(.side-collapse, .oa-side-row, .oa-prod-head) > .icon:first-child,
  .side-panel :is(.side-collapse, .oa-side-row, .oa-prod-head) > .icon:first-child svg { width: var(--side-icon); height: var(--side-icon); }
  /* Products is the last place in the top group; the person's products fill the room under it and
     scroll there, so a long list moves nothing else */
  .oa-prod-head { flex: none; padding: 0 var(--row-pad-x); gap: var(--row-pad-x); }
  .oa-side-products { flex: 1 1 0; min-height: calc(2.25 * var(--side-row)); gap: var(--side-gap); }
  .oa-prod-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; scrollbar-width: thin; }
  .oa-side-you { gap: var(--side-gap); margin-top: var(--space-6); }
  .oa-side-release { display: flex; align-items: flex-end; height: var(--side-foot); margin: 0; }

  .oa-faint { color: var(--ink-faint); }
  .oa-dot { margin: 0 var(--space-4); color: var(--ink-pale); }
  .oa-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .oa-note { color: var(--ink-soft); font-size: var(--text-sm); }
  .oa-empty { padding: var(--space-11) 0; color: var(--ink-soft); text-align: center; }
  .oa-gap { margin-top: var(--space-10); }
  .oa-gap-sm { margin-top: var(--space-3); }
  .oa-h2 { display: flex; align-items: center; gap: var(--space-5); margin: var(--space-6) 0; color: var(--accent-deep); font-family: var(--font-display); font-size: var(--text-brand); font-weight: var(--weight-medium); }
  /* one tag look everywhere (design/next's stage tag), its own font and size whatever it sits in:
     a tag inside a serif heading or a bold title stays the same tag */
  .oa-chip, .dashboard-stage {
    display: inline-block; padding: 0 var(--space-3); border-radius: var(--radius-mark);
    background: var(--accent-soft); color: var(--accent);
    font-family: var(--font-sans); font-size: var(--text-tag); font-weight: var(--weight-regular); font-style: normal;
    line-height: 18px; letter-spacing: var(--tracking-caps); text-transform: uppercase; vertical-align: middle; white-space: nowrap;
  }
  .oa-chip-aside { background: var(--warn-soft); color: var(--warn); }
  .oa-chip-serious { background: var(--danger-soft); color: var(--danger); }
  .oa-chips { display: inline-flex; gap: var(--space-2); margin-left: var(--space-4); vertical-align: middle; }
  .oa-era { color: var(--ink-faint); font-size: var(--text-tag); letter-spacing: var(--tracking-caps); }

  /* ---- the door, check your email, thank you ---- */
  .oa-door-mark .mark { width: 22px; height: 44px; margin: 0 auto var(--space-6); }
  .oa-door-line { margin-top: var(--space-4); color: var(--ink-soft); }
  .door-frame .field { gap: var(--space-2); }
  .door-frame .field-input { font-size: var(--text-base); }
  .door-frame .field ~ .btn { margin-top: var(--space-9); } /* 24 px from the box to its button with the frame's 6 px gap, as on the apply form */
  .oa-door-foot { margin-top: var(--space-8); color: var(--ink-soft); font-size: var(--text-md); }
  .door-frame .banner, .oa-form .banner { font-size: var(--text-md); }
  .field-input[aria-invalid="true"] { border-color: var(--warn); }
  .oa-field-problem { color: var(--warn); font-size: var(--text-note); }

  /* ---- applying ---- */
  .oa-plain { min-height: 100vh; }
  .oa-plain-head { padding: var(--space-8) var(--space-11); }
  .oa-apply { max-width: 760px; margin: 0 auto; padding: var(--space-10) var(--space-8) var(--space-12); }
  .oa-lead { margin: var(--space-2) 0 var(--space-9); color: var(--ink-soft); }
  .oa-form { --panel-pad-y: var(--space-10); --panel-pad-x: var(--space-10); display: flex; flex-direction: column; gap: var(--space-10); }
  .oa-form section { display: flex; flex-direction: column; gap: var(--space-6); }
  .oa-form .section-head { padding-left: 0; }
  .oa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-9); }
  .oa-form .field-input { font-size: var(--text-row); }
  .oa-form-foot { display: flex; justify-content: flex-end; gap: var(--space-4); }

  /* ---- home ---- */
  .oa-home { gap: var(--space-6); }
  .oa-find { position: relative; margin-top: var(--space-6); }
  .oa-find .search-input { padding-top: var(--space-5); padding-bottom: var(--space-5); font-size: var(--text-row); }
  .oa-find-results { position: absolute; z-index: 5; top: calc(100% + var(--space-3)); left: 0; right: 0; max-height: 60vh; overflow-y: auto; }
  .oa-home-section { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }
  .oa-home-section .section-head { padding-left: 0; }
  .oa-result .result-open { text-decoration: none; }
  .oa-result:hover { --result-row-bg: var(--mist); }
  .oa-result .result-title { color: var(--ink); }
  /* product tiles: two to a row, one fixed size */
  .oa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .oa-tile {
    --panel-pad-y: var(--space-8); --panel-pad-x: var(--space-9);
    display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-2);
    height: 150px; color: var(--ink); text-decoration: none; transition: border-color var(--motion-fast);
  }
  .oa-tile:hover { border-color: var(--accent-line); }
  .oa-tile .skeleton-row { width: 70%; margin: var(--space-2) 0; }
  .oa-tile-name { overflow: hidden; color: var(--accent-deep); font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-medium); text-overflow: ellipsis; white-space: nowrap; }
  .oa-tile-names { overflow: hidden; color: var(--ink-faint); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .oa-tile-stats { align-self: center; color: var(--ink-soft); font-size: var(--text-md); }
  .oa-tile-stats strong { color: var(--ink); font-weight: var(--weight-strong); }
  .oa-tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); font-size: var(--text-sm); }
  .oa-spark { display: inline-flex; align-items: flex-end; gap: 2px; width: 120px; height: 22px; }
  .oa-spark i { flex: 1 1 0; height: max(2px, calc(var(--h) * 22px)); border-radius: 1px 1px 0 0; background: var(--accent-line); }
  .oa-tile:hover .oa-spark i { background: color-mix(in srgb, var(--blue) 45%, var(--panel)); }
  .oa-release-card { --panel-pad-y: var(--space-8); --panel-pad-x: var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); color: var(--ink-soft); font-size: var(--text-row); }
  .oa-release-card strong { color: var(--ink); font-weight: var(--weight-medium); }
  .oa-links { display: flex; flex-wrap: wrap; gap: var(--space-10); font-size: var(--text-md); }

  /* ---- a product's page, all cases ---- */
  .oa-scope .product-title, .oa-sql .product-title, .oa-downloads .product-title,
  .oa-members .product-title, .oa-admin .product-title { margin-top: var(--space-11); margin-bottom: 0; }
  .oa-release .product-title { margin-bottom: 0; }
  .oa-subtitle { min-height: 1.55em; margin: var(--space-2) 0 var(--space-9); color: var(--ink-soft); font-size: var(--text-md); }
  /* Administration's subtitle: who it is for, then the backups' line (#70); on a phone the line wraps
     under it, its words wrapping beside the dot */
  .oa-admin-sub { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-9); row-gap: var(--space-2); }
  .oa-backup { display: inline-flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
  .oa-backup-dot { flex: none; width: var(--stale-dot); height: var(--stale-dot); border-radius: var(--radius-round); background: var(--danger); }
  .oa-backup-dot[data-state="green"] { background: var(--ok); }
  .oa-backup-dot[data-state="amber"] { background: var(--caution); }
  .oa-panel { gap: var(--space-7); padding: var(--space-8); }
  .oa-toolbar { display: flex; align-items: center; gap: var(--space-6); min-height: var(--hit-target); }
  /* a button's icon and its svg the same size, so the icon sits centred on the words */
  :is(.oa-toolbar, .oa-pager, .oa-members-bar, .oa-download-foot, .signal-cases-window-foot) .btn :is(.icon, .icon svg) { width: 15px; height: 15px; }
  /* the words' box holds their descenders, so the icon goes up to meet the letters' middle */
  :is(.oa-toolbar, .oa-pager, .oa-members-bar, .oa-download-foot, .signal-cases-window-foot) .btn .icon { transform: translateY(-1.5px); }
  .oa-countline { flex: 1 1 auto; margin: 0 var(--space-4); color: var(--ink-soft); font-size: var(--text-md); }
  .oa-countline strong { color: var(--ink); font-weight: var(--weight-strong); }
  .oa-count-skeleton { display: inline-block; width: 280px; vertical-align: middle; }
  .oa-clear { flex: 0 0 auto; padding-top: var(--space-1); font-size: var(--text-sm); }
  /* the filters in force: one line that always keeps its height */
  .oa-strip { display: flex; align-items: center; gap: var(--space-6); height: 40px; padding: 0 var(--space-5); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: var(--text-md); overflow: hidden; }
  .oa-strip-items { display: flex; align-items: center; gap: var(--space-8); flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .oa-strip-item { display: inline-flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; max-width: 420px; }
  .oa-strip-edit { display: inline-flex; align-items: baseline; gap: var(--space-3); min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
  .oa-strip-name { color: var(--ink-soft); }
  .oa-strip-value { overflow: hidden; text-overflow: ellipsis; }
  .oa-strip-edit:hover .oa-strip-value { text-decoration: underline; }
  .oa-strip-x { min-width: 22px; min-height: 22px; padding: 0; }
  .oa-strip-x .icon, .oa-strip-x .icon svg { width: 12px; height: 12px; }
  #oa-body { transition: opacity var(--motion-fast); }
  #oa-body[data-state="loading"] { opacity: 0.5; }

  /* the charts */
  .oa-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
  .oa-chart {
    display: flex; flex-direction: column; gap: var(--space-6);
    min-height: 300px; padding: var(--space-8) var(--space-9);
    border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  }
  .oa-chart-wide { grid-column: 1 / -1; min-height: 0; }
  .oa-chart .signal-charts-sentence { font-size: var(--text-md); color: var(--ink-soft); }
  .oa-chart .signal-charts-lead { color: var(--ink); }
  .oa-chart-skeleton { height: 100%; min-height: 200px; }
  .oa-chart .signal-charts-rows { gap: var(--space-4); font-size: var(--text-md); }
  .oa-chart .signal-charts-rows li { grid-template-columns: minmax(0, 38%) 1fr 72px; }
  .oa-chart .signal-charts-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oa-chart .signal-charts-track { height: 12px; border-radius: 2px; background: var(--mist); }
  .oa-chart .signal-charts-fill { border-radius: 2px; min-width: 2px; }
  .oa-chart .signal-charts-count { text-align: right; }
  .oa-chart li[data-state="chosen"] .signal-charts-fill { background: var(--blue); }
  .oa-chart li[data-state="chosen"] .signal-charts-row-label { color: var(--accent); font-weight: var(--weight-medium); }
  .oa-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-3); height: 210px; padding-top: var(--space-4); border-bottom: 0; }
  .oa-col-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-3); min-width: 0; }
  .oa-col-bar { width: 100%; max-width: 56px; height: calc(var(--share) * 170px); min-height: 2px; padding: 0; border: 0; border-radius: 3px 3px 0 0; background: var(--accent); cursor: pointer; }
  .oa-col-bar:hover, .oa-col-bar:focus-visible { background: var(--blue); }
  .oa-col-empty { width: 100%; height: 0; }
  .oa-col-label { height: 16px; padding-top: var(--space-2); border-top: var(--hairline) solid var(--line); width: 100%; color: var(--ink-faint); font-size: var(--text-tag); text-align: center; font-variant-numeric: tabular-nums; }
  .oa-col-bar.oa-bar-chosen { background: var(--blue); }
  /* the chart over time: its sentence and the grain on one line; a wide range scrolls inside the chart */
  .oa-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); flex-wrap: wrap; }
  .oa-chart-head .signal-charts-sentence { margin: 0; }
  .oa-grains { margin: 0; }
  .oa-cols-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--space-6); }
  /* fine grains: the gap shrinks with the bar, so a day is still a bar and not a hairline */
  .oa-cols[data-grain="month"] { gap: var(--space-2); }
  .oa-cols:is([data-grain="week"], [data-grain="day"]) { gap: 1px; }
  .oa-cols:is([data-grain="week"], [data-grain="day"]) .oa-col-label { overflow: visible; white-space: nowrap; border-top: 0; }
  .oa-chart-skeleton { display: block; height: 230px; }
  .oa-chart-note { margin: var(--space-4) 0 0; color: var(--ink-faint); font-size: var(--text-sm); }
  .oa-none { color: var(--ink-faint); }

  /* the cases list */
  .oa-cases-frame { border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; }
  .oa-cases { table-layout: fixed; min-width: 980px; font-size: var(--text-md); }
  .oa-cases th, .oa-cases td { padding: var(--space-5) var(--space-5); }
  .oa-cases thead th { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .oa-cases tbody tr:last-child td { border-bottom: 0; }
  .oa-cases .oa-clip { overflow: hidden; text-overflow: ellipsis; }
  .oa-cases td.oa-wrap { white-space: normal; line-height: 1.4; }
  .oa-cases td { vertical-align: top; }
  .oa-num { font-variant-numeric: tabular-nums; }
  .oa-more { color: var(--ink-faint); font-size: var(--text-sm); }
  .oa-table-skeleton { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) 0; min-height: 320px; }
  .oa-table-skeleton .skeleton-row { width: 100%; margin: 0; }
  .oa-pager { display: flex; align-items: center; gap: var(--space-6); color: var(--ink-soft); font-size: var(--text-md); }
  .oa-pager > span:first-child { margin-right: auto; }
  .btn:disabled { opacity: 0.45; cursor: default; }

  /* every header that sorts carries the up and down chevrons; the lit one is the way it is sorted */
  .oa-sortable { display: inline-flex; align-items: center; gap: var(--space-2); }
  .oa-sort { width: 9px; height: 14px; flex: 0 0 auto; fill: none; stroke-width: 1.6; }
  .oa-sort path { stroke: var(--ink-pale); }
  .oa-sortable:hover .oa-sort path { stroke: var(--ink-faint); }
  .oa-sort[data-sort="desc"] .oa-sort-down, .oa-sort[data-sort="asc"] .oa-sort-up { stroke: var(--accent); }
  .oa-sortable:has(.oa-sort[data-sort="desc"]), .oa-sortable:has(.oa-sort[data-sort="asc"]) { color: var(--ink); }

  /* a word that explains itself on hover */
  .oa-has-tip { cursor: help; text-decoration: underline dotted var(--ink-pale); text-underline-offset: 3px; }

  input[type="search"]::-webkit-search-cancel-button { appearance: none; }
  /* text boxes: a quiet line when focused, never a heavy ring */
  .field-input:focus-visible, .search-input:focus-visible, .chat-rename-input:focus-visible, .oa-cut-input:focus-visible {
    outline: none; border-color: color-mix(in srgb, var(--blue) 55%, var(--panel)); box-shadow: 0 0 0 3px var(--accent-soft);
  }

  /* statistics */
  .oa-stat-find { flex: 0 0 300px; margin: 0; }
  .oa-cutoffs { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); flex: 1 1 auto; color: var(--ink-soft); font-size: var(--text-sm); }
  .oa-cut { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); white-space: nowrap; }
  .oa-cut-input {
    width: 44px; height: 28px; padding: 0 var(--space-2);
    border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
    color: var(--ink); font: inherit; font-size: var(--text-md); font-variant-numeric: tabular-nums; text-align: center;
  }
  .oa-cut-input:hover { border-color: var(--accent-line); }
  .oa-cut[data-state="changed"] .oa-cut-input { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
  .oa-cut-reset { min-width: 28px; min-height: 28px; padding: var(--space-2); }
  .oa-cut-reset .icon, .oa-cut-reset .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .oa-cut-reset[data-state="hidden"] { visibility: hidden; }
  .oa-stats { font-size: var(--text-md); }
  .oa-stats th, .oa-stats td { padding: var(--space-5); }
  .oa-stats tbody th { font-weight: var(--weight-regular); color: var(--ink); }
  .oa-stats tbody tr { cursor: pointer; }
  .oa-stats tbody tr:hover { background: var(--mist); }
  .oa-stats td[data-state="pass"] { color: var(--ink); font-weight: var(--weight-strong); }
  .oa-stats td[data-state="pass"] .oa-faint { font-weight: var(--weight-regular); }
  .oa-stats td { font-variant-numeric: tabular-nums; }
  .oa-stat-lead { color: var(--ink-soft); font-size: var(--text-md); }
  .oa-stat-lead strong { color: var(--ink); font-weight: var(--weight-medium); }
  .oa-under { color: var(--warn); font-weight: var(--weight-medium); }
  .oa-stat-foot { display: flex; align-items: center; gap: var(--space-6); color: var(--ink-soft); font-size: var(--text-md); }

  /* ---- the filters menu: its rows, and the chosen row's options beside them ---- */
  .menu.oa-filter-menu:popover-open { display: grid; grid-template-columns: 230px 400px; height: min(540px, 76vh); padding: 0; overflow: hidden; }
  .oa-filter-rows { display: flex; flex-direction: column; padding: var(--space-3); border-right: var(--hairline) solid var(--line); }
  .oa-filter-row { --menu-item-ink: var(--ink); padding: var(--space-4) var(--space-5); }
  .oa-filter-row[aria-expanded="true"] { --menu-item-bg: var(--mist); }
  .oa-filter-row .filter-value { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .oa-filter-row > .icon, .oa-filter-row > .icon svg { width: var(--icon-chevron); height: var(--icon-chevron); color: var(--ink-faint); }
  .oa-filter-row .filter-value:empty + .icon { margin-left: auto; }
  .oa-filter-options { display: flex; flex-direction: column; min-height: 0; padding: var(--space-3); overflow-y: auto; }
  .oa-choices { display: flex; flex-direction: column; }
  /* a choice: a box to tick (a dot for one-of) at the left, never a filled row */
  .oa-choice { gap: var(--space-5); padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .oa-choice .menu-choice-words { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .oa-choice-note { color: var(--ink-faint); font-size: var(--text-sm); }
  .oa-tick { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--ink-faint); border-radius: 4px; background: var(--panel); }
  .oa-tick .icon, .oa-tick .icon svg { width: 12px; height: 12px; color: var(--on-accent); stroke-width: 2.4; }
  .oa-choice[aria-checked="true"] .oa-tick { border-color: var(--accent); background: var(--accent); }
  .oa-tick-radio { border-radius: 50%; }
  .oa-choice[aria-checked="true"] .oa-tick-radio { background: var(--panel); box-shadow: inset 0 0 0 3.5px var(--accent); }
  .oa-choice[aria-checked="true"] .menu-choice-words { color: var(--ink); }
  .oa-choice[data-state="empty"] { --menu-item-ink: var(--ink-pale); }
  .oa-choice[data-state="empty"] .oa-tick { border-color: var(--ink-pale); }
  .oa-pane-head { display: flex; align-items: center; gap: 0; }
  .oa-pane-head .menu-heading { padding-right: var(--space-2); }
  .oa-plus { min-width: 30px; min-height: 30px; padding: var(--space-2); }
  .oa-plus .icon, .oa-plus .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .oa-pane-none { padding: var(--space-4) var(--space-5); color: var(--ink-faint); font-size: var(--text-md); white-space: normal; }
  /* the kinds under the box: All, PTs, LLTs, SMQs, CMQs, each with its matches */
  .oa-kinds { gap: var(--space-7); margin: 0 var(--space-3) var(--space-2); flex: 0 0 auto; }
  .oa-kind { display: inline-flex; align-items: baseline; gap: var(--space-2); }
  .oa-kind-count { color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
  .oa-kind[aria-selected="true"] .oa-kind-count { color: var(--ink-soft); }
  /* Received by FDA: two days, both included, and whole years at a press */
  .oa-day { font-variant-numeric: tabular-nums; }
  .oa-day-note { padding: var(--space-4) var(--space-3) 0; color: var(--ink-soft); font-size: var(--text-sm); white-space: normal; }
  .oa-year-quick { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0 var(--space-3); }
  .oa-year-quick .oa-smq-scope[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  /* Reactions: the heading and the box stay put, only the results scroll */
  .oa-filter-options[data-kind="reactions"], .oa-filter-options[data-kind="drugs"] { overflow: hidden; }
  .oa-drug-role { display: flex; gap: var(--space-2); padding: 0 var(--space-1) var(--space-2); }
  .oa-drug-role .oa-choice { flex: 0 0 auto; }
  .oa-term-results { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .oa-term-results .skeleton-row { margin: var(--space-4) var(--space-5); width: 70%; }
  .oa-group-row { display: flex; align-items: stretch; border-radius: var(--radius-sm); }
  .oa-group-row > .oa-choice, .oa-group-row > .oa-smq { flex: 1 1 auto; min-width: 0; }
  .oa-group-row:hover { background: var(--mist); }
  .oa-group-row:hover > .oa-choice, .oa-group-row:hover > .oa-smq { --menu-item-bg: transparent; background: transparent; }
  .oa-expand { align-self: stretch; width: 34px; min-width: 34px; min-height: 0; height: auto; margin: 0; padding: 0; border-radius: var(--radius-sm); }
  .oa-expand:hover { background: var(--line); }
  .oa-expand .icon, .oa-expand .icon svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--motion-fast); }
  .oa-expand[aria-expanded="false"] .icon { transform: rotate(-90deg); }
  .oa-group-terms { display: flex; flex-direction: column; margin: 0 0 var(--space-4) var(--space-9); padding-left: var(--space-4); border-left: var(--hairline) solid var(--line); }
  .oa-group-terms .skeleton-row { margin: var(--space-3) var(--space-4); width: 60%; }
  .oa-group-note { padding: var(--space-2) var(--space-5) var(--space-3); color: var(--ink-faint); font-size: var(--text-sm); white-space: normal; }
  .oa-group-edit { align-self: flex-start; margin: var(--space-3) var(--space-5); font-size: var(--text-sm); }
  .oa-smq { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
  .oa-smq:hover { background: var(--mist); }
  .oa-smq-name { color: var(--ink); font-size: var(--text-menu); }
  .oa-smq-scopes { display: flex; gap: var(--space-3); }
  .oa-smq-scope { padding: var(--space-1) var(--space-4); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink-soft); font-size: var(--text-sm); cursor: pointer; }
  .oa-smq-scope:hover { border-color: var(--accent-line); color: var(--accent); }
  .oa-menu-search { margin: var(--space-2) var(--space-3) var(--space-3); }
  .oa-menu-form { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-4); }
  .oa-menu-form .field-input { flex: 1 1 auto; min-width: 0; }
  .oa-menu-form .btn { padding: var(--space-3) var(--space-6); }
  .oa-years-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-2) var(--space-3); }
  .oa-filter-options .menu-footnote { margin-top: auto; }

  /* ---- the case window ---- */
  .oa-case-window { width: min(1080px, calc(100vw - var(--space-11))); max-height: calc(100vh - var(--space-11)); }
  .oa-case-window .dialog-title { display: flex; align-items: center; font-family: var(--font-display); font-size: var(--text-brand); font-weight: var(--weight-medium); color: var(--accent-deep); }
  .oa-case-body { display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); }
  .oa-case-body .dialog-body p { margin: 0; }
  .oa-case-lead { margin: 0 0 var(--space-4); color: var(--ink); font-size: var(--text-row); }
  .oa-case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-11); }
  .oa-fields { grid-template-columns: 160px 1fr; font-size: var(--text-md); }
  .oa-fields dd { display: block; }
  .oa-fda { margin-left: var(--space-3); color: var(--ink-faint); font-size: var(--text-sm); white-space: nowrap; }
  .oa-case-scroll { overflow-x: auto; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); }
  .oa-case-scroll .signal-cases-table { font-size: var(--text-md); }
  .oa-case-scroll .signal-cases-table td, .oa-case-scroll .signal-cases-table th { padding: var(--space-4) var(--space-5); white-space: normal; }
  .oa-case-scroll .signal-cases-table tbody tr { cursor: default; }
  .oa-case-scroll .signal-cases-table tbody tr:last-child td { border-bottom: 0; }
  .oa-list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-md); }
  .signal-cases-window-foot .btn { padding: var(--space-3) var(--space-6); }

  /* ---- other windows ---- */
  .oa-dialog { width: min(600px, calc(100vw - var(--space-11))); }
  .oa-dialog .dialog-body { display: flex; flex-direction: column; gap: var(--space-5); }
  .oa-dialog .dialog-body p { margin: 0; }
  .oa-dialog-lead { color: var(--ink-soft); }
  .oa-cmq-dialog { width: min(760px, calc(100vw - var(--space-11))); }
  .oa-cmq-dialog { width: min(920px, calc(100vw - var(--space-11))); }
  .oa-cmq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .oa-cmq-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .oa-cmq-col .oa-kinds { margin: 0; }
  .oa-cmq-head { display: flex; align-items: center; justify-content: space-between; height: 34px; }
  .oa-cmq-head .oa-link { font-size: var(--text-sm); }
  .oa-cmq-list.oa-cmq-in { height: auto; min-height: 120px; max-height: 362px; }
  .oa-cmq-head { margin-top: 0; }
  .oa-cmq-add { margin: 0; padding-left: 0; }
  .oa-cmq-cols .menu-heading { padding-left: 0; }
  .oa-cmq-list { height: 300px; overflow-y: auto; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2); }
  .oa-cmq-list .menu-item { width: 100%; }
  .oa-danger-btn { color: var(--warn); }
  .oa-setting-row > .btn { flex-shrink: 0; white-space: nowrap; } /* a setting's button keeps to one line */
  .oa-spacer { flex: 1 1 auto; }
  .signal-cases-window-foot .oa-danger-btn { margin-right: auto; }
  .oa-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); padding: var(--space-7) 0; }
  .oa-setting-row + .oa-setting-row { border-top: var(--hairline) solid var(--line); }
  .oa-setting-name { color: var(--ink); font-weight: var(--weight-medium); }
  .oa-setting-row .oa-note { max-width: 640px; margin-top: var(--space-2); }
  .oa-settings { display: flex; flex-direction: column; }
  /* Emails to Altio (#68): the words, then who gets it under them; the menu's button keeps its place
     whoever is ticked */
  .oa-mail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-10); align-items: start; }
  .oa-mail-row > .btn { grid-column: 2; grid-row: 1 / span 2; }
  .oa-mail-to { grid-column: 1; max-width: 640px; color: var(--ink); }
  /* MedDRA versions (#72), kept small (16-Oct): the version used now and an upload button sit in the MedDRA
     switch's name line without making it taller; the chip has one width loading or loaded, so nothing moves */
  .oa-meddra-tools { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
  .oa-meddra-chip { box-sizing: border-box; width: 68px; height: 18px; padding: 0 3px; border: 0; text-align: center; text-transform: none; letter-spacing: normal; font-variant-numeric: tabular-nums; }
  button.oa-meddra-chip { cursor: pointer; }
  button.oa-meddra-chip:hover { background: var(--line); color: var(--ink); }
  .oa-meddra-up { --icon-btn-ink: var(--ink-soft); width: 22px; height: 22px; min-width: 0; min-height: 0; margin-block: -2px; padding: 0; }
  .oa-meddra-up .icon, .oa-meddra-up .icon svg { width: 15px; height: 15px; }
  /* the versions window: one compact row per version */
  .oa-meddra-history { width: min(720px, calc(100vw - var(--space-11))); }
  .oa-meddra { table-layout: fixed; }
  .oa-meddra :is(th, td) { vertical-align: middle; }
  .oa-meddra tbody th { min-width: 0; color: var(--ink); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
  /* the upload window: the zip, what its name says, the password; the line under the zip keeps its place */
  .oa-meddra-form { display: flex; flex-direction: column; gap: var(--space-4); }
  .oa-meddra-form .banner { margin: 0; }
  .oa-meddra-form .field-input { box-sizing: border-box; height: 40px; }
  .oa-meddra-form input[type="file"] { min-width: 0; padding-block: 0; }
  .oa-meddra-form input[type="file"]::file-selector-button { height: 100%; margin-right: var(--space-5); padding: 0 var(--space-6); border: 0; border-right: var(--hairline) solid var(--line); background: var(--panel); color: var(--ink-soft); font: inherit; cursor: pointer; }
  .oa-meddra-read { min-height: 1.5em; line-height: 1.5; }
  .oa-meddra-read[data-state="ok"] { color: var(--ink); }
  .oa-meddra-read[data-state="bad"] { color: var(--warn); }
  /* the button's words share one place, so naming a version or saying it is checking never changes its width */
  .oa-meddra-go { display: inline-grid; justify-items: center; }
  .oa-meddra-go > span { grid-area: 1 / 1; }
  .oa-meddra-go .oa-go-busy, .oa-meddra-go .oa-go-size, .oa-meddra-go[aria-busy="true"] .oa-go-idle { visibility: hidden; }
  .oa-meddra-go[aria-busy="true"] .oa-go-busy { visibility: visible; }
  .oa-meddra-go[aria-busy="true"] { cursor: progress; }
  .oa-dialog .oa-fields { margin-bottom: var(--space-8); }
  .oa-export-table { table-layout: fixed; min-width: 480px; font-size: var(--text-md); }
  .oa-export-table :is(th, td) { padding: var(--space-4) var(--space-6); vertical-align: middle; }
  .oa-export-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
  .oa-export-table tbody th { color: var(--ink); font-weight: var(--weight-regular); }
  #oa-export-files { margin-bottom: var(--space-4); }
  .oa-file { margin-left: var(--space-4); color: var(--ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }
  .oa-export-table .oa-num { text-align: right; font-variant-numeric: tabular-nums; }
  .oa-fits { color: var(--ok); }
  .oa-export-format { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
  .oa-export-format .slide-switch { align-self: flex-start; }
  .slide-switch-part:disabled { color: var(--ink-pale); cursor: not-allowed; }

  /* ---- SQL ---- */
  .oa-sql-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  /* the tables and the query box are one height, side by side; results go under the box */
  .oa-sql-tables { --panel-pad-y: var(--space-6); --panel-pad-x: var(--space-5); height: 460px; overflow-y: auto; font-size: var(--text-md); }
  .oa-table-details summary { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; }
  .oa-table-details summary:hover { background: var(--mist); }
  .oa-table-details ul { padding: 0 0 var(--space-4) var(--space-9); }
  .oa-table-details li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
  .oa-col { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; }
  .oa-sql-main { display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
  .oa-sql-editor { --panel-pad-y: var(--space-5); --panel-pad-x: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); height: 460px; }
  .oa-sql-text { flex: 1 1 auto; min-height: 0; padding: var(--space-4); border: 0; resize: none; color: var(--ink); background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-md); line-height: 1.6; }
  .oa-sql-text:focus-visible { outline: none; }
  .oa-sql-foot { display: flex; align-items: center; justify-content: space-between; }
  .oa-sql-table { font-size: var(--text-md); }
  .oa-sql-bar { display: flex; align-items: center; gap: var(--space-5); color: var(--ink-soft); font-size: var(--text-md); white-space: nowrap; }
  .oa-sql-pager { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-6); }
  .oa-sql-pager .icon-btn { min-width: 32px; min-height: 32px; }
  .oa-sql-pager .icon-btn:disabled { opacity: 0.35; }
  .oa-sql-bar strong { color: var(--ink); }
  .oa-sql-bar .btn :is(.icon, .icon svg) { width: 15px; height: 15px; }
  .oa-sql-bar .btn .icon { transform: translateY(-1.5px); }
  .oa-sql-table th, .oa-sql-table td { padding: var(--space-4) var(--space-5); white-space: nowrap; }

  /* ---- the release's title ---- */
  .oa-title-row { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-11); }
  .oa-title-row .product-title { margin-top: 0 !important; }
  .oa-chip-quiet { background: var(--mist); color: var(--ink-soft); }
  /* Releases, under Administration: the live release and its case funnel, read row by row */
  .oa-releases :is(td, th) { vertical-align: middle; }
  .oa-releases tbody th { font-weight: var(--weight-regular); color: var(--ink); white-space: normal; }

  /* ---- the release: groups of tables, each opening to its columns ---- */
  .oa-release .product-panel { gap: var(--space-10); }
  .oa-release .oa-sql-cols { margin: 0; }
  .oa-release-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); }
  .oa-release-bar .oa-note { max-width: 680px; }
  .oa-group-section { display: flex; flex-direction: column; gap: var(--space-3); }
  .oa-group-title { color: var(--accent-deep); font-size: var(--text-base); font-weight: var(--weight-strong); }
  .oa-group-section > .oa-note { margin-bottom: var(--space-3); }
  .oa-tables { table-layout: fixed; font-size: var(--text-md); }
  .oa-tables :is(td, th) { vertical-align: middle; padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .oa-tables tbody th { font-weight: var(--weight-regular); }
  .oa-tables .oa-expand-cell { padding: 0 0 0 var(--space-3); }
  .oa-tables .oa-expand { width: 32px; height: 32px; }
  .oa-tables .oa-num { text-align: right; }
  .oa-row-acts { text-align: right; white-space: nowrap; }
  .oa-small { padding: var(--space-2) var(--space-6); font-size: var(--text-sm); }
  .oa-cols-row > td { padding: 0 var(--space-5) var(--space-6) 56px; background: var(--frame-ground); }
  .oa-coltable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .oa-coltable :is(td, th) { padding: var(--space-2) var(--space-4); border-bottom: var(--hairline) solid var(--line); text-align: left; vertical-align: top; }
  .oa-coltable thead th { color: var(--ink-faint); font-weight: var(--weight-regular); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--text-xs); }
  .oa-coltable td:first-child { width: 230px; white-space: nowrap; }
  .oa-coltable td:nth-child(2) { width: 110px; }
  .oa-sql-tables .menu-heading { padding-left: var(--space-4); }
  .oa-sql-foot { gap: var(--space-6); }
  .oa-sql-foot .note-faint { margin-left: auto; }
  .oa-sql-foot .btn :is(.icon, .icon svg) { width: 15px; height: 15px; }

  /* ---- downloads, members, admin ---- */
  .oa-downloads .dashboard-table, .oa-members .dashboard-table, .oa-admin .dashboard-table { font-size: var(--text-md); }
  .oa-downloads .dashboard-table td, .oa-downloads .dashboard-table th { vertical-align: middle; }
  .oa-downloads .dashboard-table tbody th { font-weight: var(--weight-regular); }
  .oa-download-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-10); margin-top: var(--space-8); }
  .oa-download-foot .oa-note { max-width: 640px; }
  .oa-cite { margin-top: var(--space-11); display: flex; flex-direction: column; gap: var(--space-4); }
  .oa-cite .section-head { padding-left: 0; }
  .oa-cite-text { --panel-pad-y: var(--space-7); --panel-pad-x: var(--space-8); color: var(--ink-soft); font-size: var(--text-md); box-shadow: none; }
  .oa-members-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
  .oa-members-bar .section-head { padding-left: 0; }
  .oa-members .dashboard-table tbody th, .oa-admin .dashboard-table tbody th { font-weight: var(--weight-regular); color: var(--ink); }
  .oa-members .dashboard-table :is(td, th), .oa-admin .dashboard-table :is(td, th) { vertical-align: middle; }
  .oa-admin .oa-panel { gap: var(--space-5); }
  .oa-admin .section-head { padding-left: 0; }
  .oa-admin tbody tr[data-act] { cursor: pointer; }
  .oa-admin tbody tr[data-act]:hover { background: var(--mist); }
  .oa-back { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); text-decoration: none; }
  .oa-back .icon, .oa-back .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .oa-danger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-10); padding: var(--space-7) var(--space-8); border: var(--hairline) solid var(--warn-line); border-radius: var(--radius-sm); color: var(--warn); }

  /* ---- Improve this: top right of every page ---- */
  .frame-page { position: relative; }
  .oa-improve { position: absolute; z-index: 5; top: var(--space-8); right: var(--space-11); box-shadow: var(--shadow); }
  .door > .oa-improve { position: fixed; top: var(--space-8); right: var(--space-11); }
  .oa-plain-head { display: flex; align-items: center; justify-content: space-between; }
  .oa-plain-head .oa-improve { position: static; }
  .oa-improve :is(.icon, .icon svg) { width: 15px; height: 15px; }
  .oa-improve .icon { transform: translateY(-1px); }
  .oa-note-dialog textarea { width: 100%; }
  .oa-note-part { display: flex; align-items: center; gap: var(--space-4); }
  .oa-point { border: var(--hairline) solid var(--line); }
  .oa-point .icon svg { stroke-width: 1.6; }
  .oa-note-tag { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--text-md); }
  .oa-note-x { padding: 0 var(--space-2); border: 0; background: none; color: inherit; font-size: var(--text-base); cursor: pointer; }
  .oa-outlined { outline: 2px dashed var(--accent) !important; outline-offset: 2px; }
  .oa-outlined-hot { outline: 3px solid var(--accent) !important; }
  .oa-notes-bar { display: flex; align-items: center; gap: var(--space-6); }
  .oa-notes-bar .oa-note { max-width: 460px; text-align: right; }
  .oa-notes-bar .oa-note.oa-left { max-width: 640px; text-align: left; }
  .oa-notes-bar .btn :is(.icon, .icon svg) { width: 15px; height: 15px; }
  .oa-status { display: inline-flex; gap: var(--space-3); }
  .oa-status .icon, .oa-status .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .oa-status[data-state="making"] { border-color: var(--accent-line); color: var(--accent); }
  .oa-status[data-state="made"] { border-color: color-mix(in srgb, var(--ok) 40%, var(--panel)); color: var(--ok); }
  .oa-status[data-state="aside"] { color: var(--ink-faint); }
  .oa-notes tr[data-state="aside"] th { color: var(--ink-faint); }
  .oa-admin .oa-notes :is(td, th) { vertical-align: top; }
  .oa-status-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .oa-status-why { margin: 0; padding: var(--space-2) 0 var(--space-2) var(--space-5); border-left: 2px solid var(--line); color: var(--ink-soft); font-size: var(--text-md); line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
  .oa-status-who { margin: 0; color: var(--ink-faint); font-size: var(--text-sm); }
  .oa-status-done { display: inline-flex; padding: var(--space-2) var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-btn); font-size: var(--text-sm); }
  .oa-requests tbody tr[data-state="denied"] th { color: var(--ink-soft); }
  .oa-status:disabled { opacity: 1; cursor: default; }
  .oa-admin .oa-staff :is(td, th) { vertical-align: middle; }
  .oa-org-tabs { margin-top: var(--space-8); }
  .oa-audit { table-layout: fixed; }
  .oa-admin .oa-audit :is(td, th) { vertical-align: top; }
  .oa-audit td.oa-wrap { white-space: normal; }
  .oa-notes-empty { padding: var(--space-10) var(--space-8) !important; color: var(--ink-soft); text-align: center; }
  .oa-notes tbody tr { cursor: pointer; }
  .oa-notes tbody tr:hover { background: var(--mist); }
  .oa-notes tbody th { font-weight: var(--weight-regular); color: var(--ink); max-width: 520px; white-space: normal; }

  .oa-toasts { position: fixed; z-index: 60; left: 50%; bottom: 72px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
  .oa-toast { padding: 8px 14px; border-radius: var(--radius-btn); background: var(--accent-deep); color: var(--on-accent); font-size: var(--text-md); box-shadow: var(--shadow); }
  .oa-tip { position: fixed; z-index: 70; transform: translate(-50%, -100%); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--accent-deep); color: var(--on-accent); font-size: var(--text-sm); pointer-events: none; white-space: nowrap; }
}

/* Dark: the same tokens, darker values, as Drawing Board's dark theme draws them. */
:root[data-theme="dark"] {
  --accent: #9fbde0;
  --accent-deep: #dbe6f3;
  --blue: #6d9bd0;
  --ink: #e3e8ef;
  --ink-soft: #a9b4c2;
  --ink-faint: #7d8898;
  --page: #11161d;
  --panel: #19202a;
  --line: #2a3340;
  --warn: #e0a37c;
  --danger: #f07a7a;
  --danger-ground: #2a1717;
  --ok: #6fc394;
  --mark-bg: #4a4220;
  --view-switch-track: #222b37;
  --on-accent: #11161d;
  --ink-pale: #4a5463;
  color-scheme: dark;
}

html[data-note-pointing] * { cursor: crosshair !important; }

/* Open Altio's later layouts (audit log, Tables and SQL, versions, sheets): components, like the rest. */
@layer components {
  /* A column of numbers is right-aligned, and so is its title: never numbers right under a title on the left. */
  :is(table) :is(th, td).oa-num { text-align: right; font-variant-numeric: tabular-nums; }
  :is(table) th.oa-num .oa-sortable { justify-content: flex-end; }

  /* Every text box can be made taller by dragging its corner, never shorter than three lines (as Drawing Board). */
  textarea.field-input { resize: vertical; min-height: calc(3lh + 16px); }

  /* The audit log: search and Filters on one line, what is on in the strip under it, then the log. */
  .oa-audit-view { display: flex; flex-direction: column; gap: var(--space-5); }
  .oa-audit-view > .oa-note { margin: 0; }
  .oa-audit-find { flex: 0 1 360px; }
  .oa-audit-strip .oa-strip-all { flex: 0 0 auto; margin-left: auto; }
  .oa-audit .oa-when, .oa-who { display: flex; flex-direction: column; gap: var(--space-1); }
  .oa-audit .oa-when { display: table-cell; }
  .oa-audit .oa-when > span { display: block; }
  .oa-who-name, .oa-audit td { overflow-wrap: anywhere; }
  .oa-admin .oa-audit td { white-space: normal; line-height: 1.45; }
  .oa-audit-detail { display: block; margin-top: var(--space-1); }
  .oa-audit .oa-status-why { margin-top: var(--space-3); }
  .oa-sql-inline { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-sm); }
  .oa-more-cell { text-align: center; padding: var(--space-6) !important; }
  .oa-choice-kids { display: flex; flex-direction: column; padding-left: var(--space-8); margin-bottom: var(--space-3); }
  .oa-choice-group .menu-choice-words { font-weight: 600; }
  .oa-tick-part { display: block; width: 8px; height: 2px; margin: auto; border-radius: 1px; background: currentColor; }
  .oa-sub-heading { margin-top: var(--space-4); }
  .oa-filter-options[data-kind="audit-people"], .oa-filter-options[data-kind="audit-orgs"] { overflow: hidden; }
  .oa-filter-options[data-kind="audit-people"] #oa-audit-menu-list, .oa-filter-options[data-kind="audit-orgs"] #oa-audit-menu-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .oa-years-pick.oa-when-pick { display: flex; flex-direction: column; gap: var(--space-4); }
  .oa-when-pick .field-input { width: 100%; }

  /* Tables and SQL: one page. The catalogue stays in view at the left; the table picked, the SQL box
     and the results stack at the right. */
  .oa-release .oa-release-bar { align-items: flex-start; margin-top: var(--space-2); }
  .oa-release .oa-release-bar .oa-subtitle { max-width: 640px; margin: 0; }
  .oa-release-acts { display: flex; gap: var(--space-4); flex: 0 0 auto; }
  .oa-workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-top: var(--space-9); }
  .oa-catalogue { --panel-pad-y: var(--space-6); --panel-pad-x: var(--space-5); position: sticky; top: calc(var(--space-6) - var(--space-8)); display: flex; flex-direction: column; gap: var(--space-4); max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto; font-size: var(--text-md); }
  .oa-cat-key { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
  .oa-cat-cols, .oa-cat-pick { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-4); align-items: baseline; }
  .oa-cat-cols { padding: var(--space-3) calc(32px + var(--space-3)) var(--space-2) var(--space-4); border-bottom: var(--hairline) solid var(--line); color: var(--ink-faint); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .oa-cat-group { display: flex; flex-direction: column; padding-top: var(--space-6); }
  .oa-cat-group-head { display: flex; align-items: center; justify-content: space-between; padding-left: var(--space-4); }
  .oa-cat-group-name { margin: 0; color: var(--accent-deep); font-size: var(--text-md); font-weight: var(--weight-strong); }
  .oa-cat-group-line { margin: var(--space-1) 0 var(--space-3); padding: 0 var(--space-4); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
  .oa-cat-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--space-3); align-items: center; border-radius: var(--radius-sm); }
  .oa-cat-row:hover { background: var(--mist); }
  .oa-cat-row[data-current="true"] { background: var(--accent-soft); }
  .oa-cat-pick { padding: var(--space-3) var(--space-4); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .oa-cat-pick code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oa-cat-rows { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
  .oa-cat-hit { grid-column: 1 / -1; color: var(--ink-faint); font-size: var(--text-sm); }
  .oa-cat-row .icon-btn, .oa-cat-group-head .icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  .oa-work { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
  .oa-table-card { --panel-pad-y: var(--space-7); --panel-pad-x: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
  .oa-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
  .oa-card-name { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
  .oa-card-name h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-regular); }
  .oa-card-acts { display: flex; gap: var(--space-3); flex: 0 0 auto; }
  .oa-card-acts .btn :is(.icon, .icon svg), .oa-release-acts .btn :is(.icon, .icon svg) { width: 15px; height: 15px; }
  .oa-card-what { margin: 0; color: var(--ink); font-size: var(--text-base); }
  .oa-card-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--text-md); line-height: 1.5; }
  .oa-card-facts dt { color: var(--ink-faint); }
  .oa-card-facts dd { margin: 0; color: var(--ink-soft); }
  .oa-card-cols-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-4); }
  .oa-card-sub { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .oa-col-find { flex: 0 1 260px; }
  .oa-card-cols { max-height: 300px; overflow-y: auto; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); }
  .oa-card-cols .oa-coltable { table-layout: fixed; }
  .oa-card-cols .oa-coltable thead th { position: sticky; top: 0; background: var(--paper, var(--frame-ground)); z-index: 1; }
  .oa-card-cols .oa-coltable :is(td, th) { padding: var(--space-3) var(--space-5); vertical-align: top; }
  .oa-card-cols .oa-coltable td:first-child, .oa-card-cols .oa-coltable td:nth-child(2) { width: auto; }
  /* the card's columns: name, type and where it is from take what they need, the words the rest */
  .oa-coltable .oa-cc-name { width: 168px; }
  .oa-coltable .oa-cc-type { width: 84px; }
  .oa-coltable .oa-cc-from { width: 104px; }
  @media (min-width: 1440px) { .oa-coltable .oa-cc-name { width: 210px; } .oa-coltable .oa-cc-type { width: 100px; } .oa-coltable .oa-cc-from { width: 120px; } }
  .oa-card-cols .oa-coltable tbody tr:last-child td { border-bottom: 0; }
  .oa-release .oa-sql-editor { height: auto; gap: var(--space-4); --panel-pad-y: var(--space-6); --panel-pad-x: var(--space-7); }
  .oa-sql-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); font-size: var(--text-sm); }
  .oa-release .oa-sql-text { min-height: 220px; flex: 0 0 auto; resize: vertical; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); }
  .oa-release .oa-sql-foot .btn :is(.icon, .icon svg) { width: 15px; height: 15px; }
  #oa-sql-result:empty { display: none; }
  #oa-sql-result { display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: var(--space-8); }
  .oa-cat-cols { padding-right: calc(32px + var(--space-3) + var(--space-4)); }
  .oa-cat-cols .oa-num { text-align: right; }
  #oa-sql-result .dashboard-frame { overflow-x: auto; }

  /* A search box in a row of controls sits level with them: no top gap from the shared search-bar,
     and the box, Filters and Export share one height. */
  .oa-audit-find, .oa-col-find, .oa-table-find { margin: 0; }
  .oa-audit-view .oa-notes-bar { align-items: stretch; }
  .oa-audit-view .oa-notes-bar > .btn { height: auto; }
  .oa-audit-find .search-input { align-self: stretch; }

  .oa-plain-list { margin: var(--space-3) 0 0; padding-left: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
  .oa-download-list a { overflow-wrap: anywhere; }
  .oa-downloads-off { margin: var(--space-4) 0 0; }

  /* an email as the person gets it (#71): in the windows the admin's words go in a box inside the
     paragraph, which grows with them; How it works marks sample words in the same place */
  .oa-mail { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--frame-ground); font-size: var(--text-md); }
  .oa-mail-head { display: flex; gap: var(--space-4); margin: 0; }
  .oa-mail-head .oa-faint { flex: 0 0 64px; }
  .oa-mail-head > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .oa-mail-body { margin-top: var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--ink); }
  .oa-mail-gap {
    display: block; box-sizing: border-box; width: 100%; min-height: calc(4.65em + 2 * var(--space-3)); margin: var(--space-2) 0;
    padding: var(--space-3) var(--space-4); border: var(--hairline) solid var(--accent-line); border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--ink); font: inherit; line-height: 1.55; resize: none; overflow: hidden; white-space: pre-wrap;
  }
  .oa-mail-gap::placeholder { color: var(--ink-faint); }
  .oa-mail-gap:focus-visible { outline: none; border-color: color-mix(in srgb, var(--blue) 55%, var(--panel)); box-shadow: 0 0 0 3px var(--accent-soft); }
  .oa-mail-gap-sample { padding: 1px 2px; border-radius: 3px; background: var(--accent-soft); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .oa-mail-sign { margin: 0; padding-top: var(--space-4); color: var(--ink-faint); font-size: var(--text-sm); }

  .oa-admin .oa-notes:is(.oa-users, .oa-requests) :is(td, th) { vertical-align: middle; }
  .oa-users tbody th, .oa-requests tbody th { font-weight: var(--weight-regular); }
}

/* How it works: one process at a time. Numbered steps joined by a line, the number coloured by who acts;
   each email a compact card under its step. */
@layer components {
  .oa-how-link { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; align-self: center; padding: 0 var(--space-4); color: var(--accent); font-size: var(--text-md); white-space: nowrap; text-decoration: none; }
  .oa-how-link:hover { text-decoration: underline; }
  .oa-how-link :is(.icon, .icon svg) { width: 15px; height: 15px; }
  .oa-howintro { margin: 0 0 var(--space-6); }
  .oa-how { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
  .oa-howpick { display: none; }
  .oa-howlist { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
  .oa-howitem { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: var(--text-md); text-decoration: none; }
  .oa-howitem:hover { background: var(--mist); color: var(--ink); }
  .oa-howitem[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: var(--weight-medium); }
  .oa-howmain { max-width: 760px; min-width: 0; }
  .oa-howhead { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-9); }
  .oa-howhead .oa-howtitle { margin: 0; }
  .oa-howstarts { margin: 0; color: var(--ink-soft); font-size: var(--text-base); line-height: 1.5; }
  .oa-howmeta { margin: var(--space-2) 0 0; color: var(--ink-faint); font-size: var(--text-sm); }
  .oa-howsteps { margin: 0; padding: 0; list-style: none; }
  .oa-howstep { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--space-9); }
  .oa-howstep:last-child { padding-bottom: 0; }
  .oa-howstep:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--line); }
  .oa-howstep-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: var(--text-md); font-weight: var(--weight-strong); }
  .oa-howstep[data-who="person"] .oa-howstep-n { background: color-mix(in srgb, var(--blue) 18%, var(--panel)); color: var(--accent-deep); }
  .oa-howstep[data-who="system"] .oa-howstep-n { background: var(--mist); color: var(--ink-soft); border: var(--hairline) solid var(--line); }
  .oa-howstep:is([data-who="admin"], [data-who="super"]) .oa-howstep-n { background: var(--accent); color: var(--on-accent); }
  .oa-howstep-body { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); min-width: 0; }
  .oa-howstep-who { margin: 0; color: var(--ink-faint); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .oa-howstep-title { margin: 0; color: var(--ink); font-size: var(--text-base); font-weight: var(--weight-medium); }
  .oa-howstep-text { margin: 0; color: var(--ink-soft); font-size: var(--text-md); line-height: 1.55; }
  .oa-mailcard { display: flex; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-4); padding: var(--space-5) var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--frame-ground); }
  .oa-mailcard-icon { display: inline-flex; padding-top: 2px; color: var(--accent); }
  .oa-mailcard-icon :is(.icon, .icon svg) { width: 16px; height: 16px; }
  .oa-mailcard-words { min-width: 0; }
  .oa-mailcard-subject { margin: 0; color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
  .oa-mailcard-meta { margin: var(--space-1) 0 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
  .oa-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-2); }
  .oa-outcome { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
  .oa-outcome-label { margin: 0 0 var(--space-1); color: var(--accent-deep); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .oa-outcome .oa-mailcard { margin-top: var(--space-3); }
  .oa-howmails { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
  .oa-howmails .oa-mailcard { margin: 0; }
  .oa-mailgroup { display: flex; flex-direction: column; gap: var(--space-4); }
  .oa-mailgroup + .oa-mailgroup { margin-top: var(--space-10); }
  .oa-mailgroup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
  .oa-mailgroup-head .oa-card-sub { margin: 0; }
  .oa-mailgroup-open { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
  .oa-mailgroup-open:hover { text-decoration: underline; }
  .oa-mailgroup-open :is(.icon, .icon svg) { width: 14px; height: 14px; }
  .oa-mailgroup .oa-howmails { gap: var(--space-4); }
}

/* To decide: each kind of decision in a group; each item its words at the left, its decision at the right */
@layer components {
  .oa-decide-group { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-10); }
  .oa-decide-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: var(--space-2); padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); letter-spacing: 0; }
  .oa-decide-none { margin: 0; padding: var(--space-6) var(--space-7); border: var(--hairline) dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: var(--text-md); }
  .oa-decide-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
  .oa-decide-item { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-7); }
  .oa-decide-item + .oa-decide-item { border-top: var(--hairline) solid var(--line); }
  .oa-decide-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); cursor: pointer; }
  .oa-decide-words:not([data-act]) { cursor: default; }
  .oa-decide-title { margin: 0; color: var(--ink); font-size: var(--text-row); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
  .oa-decide-title .oa-faint { font-weight: var(--weight-regular); margin-left: var(--space-3); }
  .oa-decide-meta { margin: 0; color: var(--ink-soft); font-size: var(--text-md); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .oa-decide-acts { display: flex; gap: var(--space-4); flex: 0 0 auto; }
}

/* the apply form's optional box for what Other was, shown only once Other is picked */
@layer components {
  .oa-heard-other[hidden] { display: none; }
}

/* the apply form's rhythm: 6 px from a label to its box, 16 px between fields and from a section's
   head, 32 px between sections, 24 px to the tick box and the buttons; every one-line box one height */
@layer components {
  .oa-form section { gap: var(--space-8); }
  .oa-form section + section { margin-top: var(--space-4); }
  .oa-form :is(input, select).field-input { line-height: 22px; }
  .oa-form select.field-input { min-height: calc(22px + 2 * var(--input-pad-y) + 2 * var(--hairline)); }
}

/* View as (#66): the row near Signed in as, its menu, and the banner on every page while viewing
   as someone else; where the banner sits at each width is in responsive.css */
@layer components {
  .oa-viewas-row .row-label { flex: 0 0 auto; }
  .oa-viewas-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--ink-faint); font-size: var(--text-md); }
  .oa-viewas-row > .icon:last-child, .oa-viewas-row > .icon:last-child svg { width: var(--icon-sm); height: var(--icon-sm); }
  .oa-viewas-menu { min-width: 240px; }
  .oa-viewas-menu .menu-footnote { max-width: 260px; }
  .oa-viewing { position: fixed; z-index: 58; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-7); box-shadow: var(--shadow); font-size: var(--text-md); }
  .oa-viewing > .icon, .oa-viewing > .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .oa-viewing-words { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
  .oa-viewing-back { flex: 0 0 auto; white-space: nowrap; }
  .oa-viewing-off { color: var(--warn); }
  body[data-viewing] .oa-toasts { bottom: 128px; }
}

/* the backup line opens How it works' Backups page */
@layer components {
  a.oa-backup { color: inherit; text-decoration: none; }
  a.oa-backup:hover span:last-child { text-decoration: underline; }
}

/* a switch for a part still being built: greyed, fixed at Off */
@layer components {
  .oa-switch-dev { opacity: 0.55; }
  .oa-switch-dev .slide-switch-part { cursor: not-allowed; }
}