/* Shared interface tokens. /theme.css supplies the instance's color palette.
   Keep the compact layout through 100em (1600px at the browser default), then
   grow the rem base smoothly to 150% at 180em. Percent bounds respect the user's
   default font size. Borders remain device-independent hairlines. */
:root {
  --bg: #181818;
  --paper: #202020;
  --text: #fefefe;
  --muted: #b7b2bf;
  --line: #3b3b45;
  --accent: #3395fd;
  --accent-hover: #5caafd;
  --accent-soft: #222932;
  --accent-border: #39567c;
  --on-accent: #111111;
  --danger: #ff8798;
  --danger-soft: #32282a;
  --danger-border: #76525e;
  --on-danger: #111111;
  --subtle: #242424;
  --hover: #292929;
  --ui-font-size: clamp(100%, calc(37.5% + .625vw), 150%);
  --sidebar-width: 3.5rem;
  --content-max-width: 100rem;
  --form-max-width: 65rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.75rem;
  --text-section: 0.875rem;
  --text-title: 1.4375rem;
  --space-1: 0.1875rem;
  --space-2: 0.375rem;
  --space-3: 0.625rem;
  --space-4: 0.8125rem;
  --space-5: 1rem;
  --space-6: 1.1875rem;
  --space-8: 1.625rem;
  --space-10: 2rem;
  --radius-sm: 0.25rem;
  --radius-control: 0.375rem;
  --radius: 0.5rem;
  --control-height: 1.9375rem;
  --table-row-height: 2.25rem;
  --border: 1px solid var(--line);
  --popup-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 35%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--ui-font-size);
  line-height: 1.5;
  font-synthesis: none;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: var(--text-base); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, p { margin: 0; }
h1 { font-size: var(--text-title); line-height: 1.25; letter-spacing: -0.04375rem; font-weight: 650; }
h2 { font-size: var(--text-section); line-height: 1.4; font-weight: 600; }
.muted { color: var(--muted); }
.shell { --sidebar-size: clamp(10rem, var(--sidebar-user-width, var(--sidebar-width)), min(32rem, 45vw)); display: grid; grid-template-columns: var(--sidebar-size) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; min-width: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; padding: var(--space-6) var(--space-3); background: var(--paper); border-right: var(--border); }
.sidebar nav { min-width: 0; }
.sidebar-resizer { position: fixed; inset-block: 0; inset-inline-start: calc(var(--sidebar-size) - .375rem); width: .375rem; cursor: col-resize; touch-action: none; z-index: 2; }
.sidebar-resizer:hover, .sidebar-resizer:focus-visible { background: var(--accent-border); }
.is-resizing-sidebar, .is-resizing-sidebar * { cursor: col-resize !important; user-select: none !important; }
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin: 0 var(--space-3) var(--space-8); font-size: var(--text-section); font-weight: 650; letter-spacing: -0.021875rem; overflow-wrap: anywhere; }
.brand-mark { display: inline-block; flex-shrink: 0; width: 1.875rem; height: 1.875rem; background: url("./logo.svg") center / contain no-repeat; }
.brand-mark.large { width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-6); }
.brand-logo { width: 2rem; height: 2rem; display: block; flex-shrink: 0; object-fit: contain; }
.brand-logo.large { width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-6); }
.nav-label { display: flex; justify-content: space-between; margin: var(--space-6) var(--space-3) var(--space-2); color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05rem; }
.nav-link { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 1.9375rem; margin: 0.125rem 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--muted); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav-icon { font-size: 1rem; }
.nav-empty { padding: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.sidebar-bottom { display: flex; gap: var(--space-2); align-items: center; margin-top: auto; padding: var(--space-6) var(--space-3) 0; color: var(--muted); font-size: var(--text-xs); }
.sidebar-bottom .muted { margin-left: auto; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 3rem; padding: 0 var(--space-8); background: var(--paper); border-bottom: var(--border); font-size: var(--text-sm); }
.breadcrumbs { min-width: 0; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current=page] { max-width: 32ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.breadcrumb-divider { color: var(--muted); }
.account { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); white-space: nowrap; }
.avatar { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: var(--border); border-radius: 50%; background: var(--subtle); font-weight: 600; }
.account form { margin-left: var(--space-4); }
.link-button { display: inline-block; border: 0; padding: var(--space-1) 0; background: none; color: var(--muted); font-size: var(--text-sm); }
.link-button:hover { color: var(--text); text-decoration: underline; }
.content { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-8) var(--space-8) var(--space-10); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.page-heading > div { min-width: 0; }
.page-heading h1, .login-card h1, .subtitle { overflow-wrap: anywhere; }
.eyebrow { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.subtitle { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); line-height: 1.6; white-space: pre-line; }
.badge { border: var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: var(--muted); background: var(--paper); font-size: var(--text-xs); white-space: nowrap; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: var(--space-8) 0 var(--space-4); }
.section-heading > .muted { font-size: var(--text-xs); }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); gap: var(--space-4); }
.collection-card { display: block; padding: var(--space-5); border: var(--border); border-radius: var(--radius); background: var(--paper); }
a.collection-card:hover { border-color: var(--accent-border); }
.collection-card h2 { margin-bottom: var(--space-1); }
.collection-card > p { font-size: var(--text-sm); }
.card-footer { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--border); color: var(--muted); font-size: var(--text-xs); }
.card-footer a:hover { color: var(--accent); text-decoration: underline; }
.page-grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.custom-page-card { display: flex; justify-content: space-between; gap: var(--space-10); padding: var(--space-4) var(--space-5); border: var(--border); border-radius: var(--radius); background: var(--paper); font-size: var(--text-sm); }
.custom-page-card:hover { border-color: var(--accent-border); }
.panel { border: var(--border); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.history-heading { margin-bottom: var(--space-6); }
.history-heading .eyebrow { text-transform: uppercase; letter-spacing: 0.06875rem; font-size: 0.625rem; }
.history-timezone { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; align-self: start; padding-top: var(--space-2); }
.history-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border); border-radius: var(--radius); background: var(--paper); }
.history-field { display: grid; gap: var(--space-2); flex: 1 1 10.625rem; font-size: var(--text-sm); }
.history-field > label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.history-filters .active-filters { flex: 1; padding: 0; gap: var(--space-2); }
.history-filter-fallback { width: 100%; border: 0; padding: 0; margin: 0; }
.history-filters > .history-period { margin-left: auto; }
.history-period { position: relative; min-width: 0; }
.history-period > summary { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); min-width: 15.625rem; max-width: 100%; padding: var(--space-2) var(--space-3); border: var(--border); border-radius: var(--radius-control); list-style: none; cursor: pointer; background: var(--paper); font-size: var(--text-sm); }
.history-period > summary::-webkit-details-marker { display: none; }
.history-period > summary:hover, .history-period[open] > summary { border-color: var(--accent); }
.history-period > summary > svg:first-child { width: 1rem; height: 1rem; color: var(--accent); flex-shrink: 0; }
.history-period > summary > span:not(.sr-only) { flex: 1; }
.history-period > summary small { color: var(--muted); font-size: 0.625rem; }
.period-caret { width: .75rem; height: .75rem; color: var(--muted); flex-shrink: 0; }
.history-period-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 20.625rem; }
.history-period-panel[data-period-view=range] { width: 36.875rem; }
.period-tabs { display: flex; border-bottom: var(--border); padding: 0 var(--space-3); }
.period-tabs > button { flex: 1; padding: var(--space-4) var(--space-2); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.period-tabs > button[aria-selected=true] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.history-period [data-period-panel] { padding: var(--space-3); }
.history-period-panel:not([data-period-view=quick]) [data-period-panel=quick],
.history-period-panel:not([data-period-view=day]) [data-period-panel=day],
.history-period-panel:not([data-period-view=range]) [data-period-panel=range] { display: none; }
.period-section-label { margin-bottom: var(--space-3); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.period-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.period-presets button { padding: var(--space-2) 0; border: 0; background: transparent; color: var(--accent); text-align: left; font-size: var(--text-sm); cursor: pointer; }
.period-presets button:hover { text-decoration: underline; }
.period-range-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.period-range-columns > div { min-width: 0; }
.date-calendar-toolbar { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); }
.date-calendar-toolbar button { display: grid; place-items: center; flex: 0 0 1.625rem; height: 1.75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; font-size: 1.25rem; }
.date-calendar-toolbar button:hover { background: var(--hover); color: var(--text); }
.date-calendar-toolbar select { flex: 1; min-width: 0; min-height: 1.75rem; padding: var(--space-1) var(--space-2); border: 0; background: var(--subtle); font-size: var(--text-xs); }
.date-calendar-toolbar input { width: 3.875rem; min-height: 1.75rem; padding: var(--space-1); border: 0; background: var(--subtle); font-size: var(--text-xs); }
.date-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.125rem; }
.date-calendar-grid > span { padding: var(--space-1) 0; color: var(--muted); font-size: 0.625rem; text-align: center; }
.date-calendar-grid button { display: grid; place-items: center; min-width: 0; height: 1.6875rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: var(--text-xs); cursor: pointer; font-variant-numeric: tabular-nums; }
.date-calendar-grid button:hover { background: var(--hover); }
.date-calendar-grid button.date-outside { color: var(--muted); opacity: .5; }
.date-calendar-grid button.date-in-range { background: var(--accent-soft); border-radius: 0; }
.date-calendar-grid button[aria-current=date] { border-color: var(--accent-border); }
.date-calendar-grid button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); opacity: 1; }
.period-date-input { margin-top: var(--space-3); }
.period-date-input input { min-width: 0; min-height: 2rem; font-size: var(--text-xs); }
.period-error { padding: 0 var(--space-4) var(--space-3); color: var(--danger); font-size: var(--text-xs); }
.period-panel-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border); background: var(--subtle); }
.period-panel-footer > span { font-size: 0.625rem; color: var(--muted); }
@media (max-width: 40.625em) {
  .history-filters .active-filters { flex-basis: 100%; }
  .history-period { max-width: 100%; }
  .history-period > summary { min-width: 0; }
  .history-period-panel[data-period-view=range] { width: 20.625rem; }
  .period-range-columns { grid-template-columns: minmax(0, 1fr); }
}
.history-journal-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-6) 0 var(--space-5); font-size: var(--text-xs); }
.history-view-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.history-view-toggle { display: inline-flex; padding: 0.1875rem; gap: 0.1875rem; border: var(--border); border-radius: var(--radius-control); background: var(--subtle); }
.history-view-toggle a { display: inline-flex; align-items: center; min-height: 1.75rem; padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; }
.history-view-toggle a:hover { color: var(--text); }
.history-view-toggle a[aria-current=page] { border-color: var(--line); background: var(--paper); color: var(--text); box-shadow: 0 1px 0.125rem rgb(0 0 0 / 4%); }
.history-table { table-layout: fixed; min-width: 60rem; white-space: normal; }
.history-table .history-time-col { width: 17%; }
.history-table .history-user-col { width: 13%; }
.history-table .history-collection-col, .history-table .history-action-col, .history-table .history-result-col { width: 12%; }
.history-table .history-changes-col { width: 34%; }
.history-table td { vertical-align: top; height: auto; padding-block: var(--space-4); overflow-wrap: anywhere; }
.history-table time { white-space: nowrap; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.history-table .history-subject { display: block; }
.history-table .activity-changes { border: 0; }
.history-table .activity-changes > summary { padding: 0; gap: var(--space-2); background: transparent; }
.history-table .activity-field-preview { display: none; }
.history-table .activity-diff { padding: var(--space-3) 0 0; }
.history-table .activity-diff-header, .history-table .activity-diff-row { grid-template-columns: minmax(2.8125rem, .6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.history-table .activity-diff-header { display: grid; }
.history-table .activity-diff-field { grid-column: auto; }
.history-table .change-mobile-label { display: none; }
.history-table .activity-before, .history-table .activity-after { padding-inline: var(--space-2); }
.history-table .activity-note { padding: 0; white-space: normal; }
.history-table .activity-changes .activity-note { padding-top: var(--space-3); }
.history-pagination.history-pagination-table { margin-left: 0; }
.history-subject { color: var(--muted); overflow-wrap: anywhere; }
.activity-day + .activity-day { margin-top: var(--space-8); }
.activity-day-heading { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4) 2.5rem; font-size: var(--text-sm); }
.activity-day-heading time { color: var(--muted); font-weight: 400; font-size: var(--text-xs); }
.activity-events { list-style: none; padding: 0 0 0 2.5rem; margin: 0; }
.activity-entry { position: relative; padding-bottom: var(--space-4); }
.activity-entry::before { content: ''; position: absolute; left: -1.625rem; top: 1.625rem; bottom: -1.625rem; width: 1px; background: var(--line); }
.activity-entry:last-child::before { bottom: 1.625rem; }
.activity-entry::after { content: ''; position: absolute; top: 1.5625rem; left: -1.8125rem; width: 0.4375rem; height: 0.4375rem; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.activity-event { border: var(--border); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.activity-event-heading { display: flex; align-items: start; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.activity-symbol { display: flex; align-items: center; justify-content: center; flex: 0 0 2.125rem; height: 2.125rem; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent); }
.activity-symbol svg { width: 1.125rem; height: 1.125rem; }
.activity-symbol-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--paper)); }
.activity-event-title { min-width: 0; flex: 1; }
.activity-title-line { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-3); row-gap: var(--space-1); }
.activity-title-line h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.activity-collection { color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: .0625rem var(--space-2); font-size: var(--text-xs); font-weight: 500; }
.activity-record { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
a.activity-record:hover { color: var(--accent); text-decoration: underline; }
.activity-byline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.activity-byline strong { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.activity-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.0625rem; height: 1.0625rem; border: var(--border); border-radius: 50%; background: var(--subtle); font-size: 0.5625rem; color: var(--text); }
.activity-byline time { font-variant-numeric: tabular-nums; }
.activity-result { display: flex; align-items: center; gap: var(--space-2); padding-top: 0.125rem; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.activity-result::before { content: ''; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--accent); }
.activity-result-failed { color: var(--danger); }
.activity-result-failed::before { background: var(--danger); }
.activity-changes { border-top: var(--border); }
.activity-changes > summary { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); list-style: none; cursor: pointer; font-size: var(--text-xs); background: var(--subtle); }
.activity-changes > summary::-webkit-details-marker { display: none; }
.activity-change-count { flex-shrink: 0; font-weight: 500; }
.activity-field-preview { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-chevron { margin-left: auto; color: var(--muted); font-size: 1.0625rem; line-height: 1; transition: transform .15s; }
.activity-changes[open] .activity-chevron { transform: rotate(180deg); }
.activity-diff { padding: 0 var(--space-6); }
.activity-diff-header, .activity-diff-row { display: grid; grid-template-columns: minmax(6.25rem, .65fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.activity-diff-header { padding: var(--space-3) 0; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04375rem; color: var(--muted); border-bottom: var(--border); }
.activity-diff-row { padding: var(--space-3) 0; align-items: stretch; }
.activity-diff-row + .activity-diff-row { border-top: var(--border); }
.activity-diff-field { min-width: 0; padding: var(--space-2) 0; overflow-wrap: anywhere; }
.activity-diff-field strong { display: block; font-size: var(--text-sm); font-weight: 500; }
.activity-diff-field code { display: block; font-size: 0.625rem; margin-top: 0.125rem; color: var(--muted); }
.activity-before, .activity-after { min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 5%, var(--paper)); }
.activity-after { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.change-value { margin: 0; max-height: 11.25rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.6875rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.change-empty { color: var(--muted); font-size: var(--text-xs); font-style: italic; }
.change-null { font-style: normal; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.change-boolean { font-size: var(--text-xs); }
.change-truncated { display: block; margin-top: var(--space-2); color: var(--muted); }
.change-mobile-label { display: none; }
.activity-note { padding: 0 var(--space-6) var(--space-4) 4.1875rem; color: var(--muted); font-size: var(--text-xs); }
.activity-changes .activity-note { padding: var(--space-3) var(--space-6); }
.activity-event-compact .activity-event-heading { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0 0 2.5rem; font-size: var(--text-xs); }
.history-empty { display: grid; justify-items: center; gap: var(--space-3); padding: 3.4375rem var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.history-empty-icon { font-size: 1.875rem; line-height: 1; }
.history-empty h2 { color: var(--text); }
@media (max-width: 43.75em) {
  .history-timezone { display: none; }
  .history-journal-tools { flex-wrap: wrap; }
  .activity-events { padding-left: 1rem; }
  .activity-entry::before { left: -0.75rem; }
  .activity-entry::after { left: -0.9375rem; }
  .activity-day-heading, .history-pagination { margin-left: 1rem; }
  .activity-event-heading { gap: var(--space-3); padding: var(--space-4); flex-wrap: wrap; }
  .activity-symbol { flex-basis: 1.75rem; height: 1.75rem; }
  .activity-result { margin-left: 2.375rem; }
  .activity-changes > summary { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .activity-diff { padding: 0 var(--space-4); }
  .activity-diff-header { display: none; }
  .activity-diff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .activity-diff-field { grid-column: 1 / -1; }
  .change-mobile-label { display: block; font-size: 0.625rem; color: var(--muted); margin-bottom: var(--space-2); }
  .activity-note { padding: 0 var(--space-4) var(--space-4); }
}
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: var(--control-height); border: 1px solid transparent; border-radius: var(--radius-control); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); line-height: 1.0625rem; font-weight: 600; white-space: nowrap; }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.primary:hover { background: var(--accent-hover); }
.button.secondary { border-color: var(--line); background: var(--paper); color: var(--text); }
.button.secondary:hover { background: var(--hover); }
.button.small { min-height: 1.875rem; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.button.danger { color: var(--on-danger); background: var(--danger); }
.button.danger:hover { filter: brightness(.92); }
.button.danger-outline { border-color: var(--danger-border); color: var(--danger); background: var(--paper); }
.button.danger-outline:hover { background: var(--danger-soft); }
.button-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.full { width: 100%; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); }
.search-form { display: flex; align-items: center; gap: var(--space-2); }
.search-form input { width: 18.75rem; max-width: 100%; }
.count { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); }
.filter-chip { padding: var(--space-1) var(--space-2); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); overflow-wrap: anywhere; }
input, select, textarea { display: block; width: 100%; min-height: var(--control-height); border: var(--border); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); color: var(--text); background: var(--paper); font-size: var(--text-base); line-height: 1.0625rem; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 1px; }
input::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; }
input, select, textarea { scroll-margin-block: 5rem; }
select[multiple] { padding: var(--space-1); }
select[multiple] option { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
select[multiple] option:checked { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-sm); line-height: 1.6; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
input[aria-invalid=true]:focus, select[aria-invalid=true]:focus, textarea[aria-invalid=true]:focus { outline-color: var(--danger-border); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { border-top: var(--border); border-bottom: var(--border); padding: var(--space-3) var(--space-4); background: var(--subtle); color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
th a { display: flex; align-items: center; justify-content: flex-start; gap: 0.375rem; }
th a:hover { color: var(--text); }
th[aria-sort] { color: var(--accent); }
.sort-icon { color: var(--muted); font-size: var(--text-xs); }
th[aria-sort] .sort-icon { color: var(--accent); }
td { height: var(--table-row-height); border-bottom: var(--border); padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover, tbody tr:focus-within { background: var(--hover); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
th.numeric a { justify-content: flex-end; }
th.numeric .sort-icon { order: -1; }
.record-id { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.cell-value, [data-cell-value] { display: inline-block; vertical-align: middle; }
.cell-value { max-width: 22.5rem; overflow: hidden; text-overflow: ellipsis; }
.record-row { position: relative; }
.record-row-clickable { cursor: pointer; }
.record-row-link::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.record-row-link:focus-visible { outline: none; }
.record-row-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.delete-col, .actions-col { width: 1%; text-align: right; white-space: nowrap; }
.record-row .delete-col { position: relative; z-index: 2; cursor: default; }
.record-row .delete-action { width: 1.875rem; min-height: 1.875rem; border-color: transparent; padding: 0.375rem; background: transparent; color: var(--muted); font-weight: 500; }
.record-row .delete-action:hover { background: var(--danger-soft); color: var(--danger); }
.boolean-badge { display: inline-block; color: var(--text); font-size: var(--text-sm); }
.boolean-badge.no { color: var(--muted); }
.null-value { color: var(--muted); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 2.875rem; padding: var(--space-3) var(--space-4); border-top: var(--border); color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.pagination > div { display: flex; align-items: center; gap: var(--space-2); }
.pagination-divider { margin: 0 var(--space-2); }
.empty-state { padding: 3rem var(--space-6); text-align: center; white-space: normal; color: var(--muted); }
.empty-state h2 { margin-bottom: var(--space-2); color: var(--text); }
.empty-state p { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.collection-grid > .empty-state { grid-column: 1 / -1; border: var(--border); border-radius: var(--radius); }
.back-link { display: inline-block; margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.back-link:hover { color: var(--text); text-decoration: underline; }
.record-editor { width: 100%; max-width: var(--form-max-width); min-width: 0; margin-inline: auto; }
.record-heading { align-items: flex-end; }
.record-heading > .button { flex-shrink: 0; }
.record-form { width: 100%; min-width: 0; max-width: var(--form-max-width); padding: 0 var(--space-8); overflow: visible; }
.form-section { min-width: 0; margin: 0; padding: var(--space-8) 0; border: 0; }
.form-section + .form-section { border-top: var(--border); }
.form-section h2 { margin-bottom: var(--space-6); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-6) var(--space-8); }
.form-field { min-width: 0; overflow-wrap: anywhere; }
.form-field.wide { grid-column: 1 / -1; }
.record-form .form-field > label:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin-bottom: .5rem; font-size: .8125rem; font-weight: 500; }
.record-form .form-field > label:first-child :is(.field-tag, .optional-label) { margin-inline-start: 0; }
.record-form .form-field > :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
.record-form .form-temporal-row > input,
.record-form .form-date-control > input { min-width: 0; min-height: 2.5rem; padding: .625rem .75rem; font-size: .8125rem; }
.record-form .form-field > textarea { min-height: 7.5rem; line-height: 1.6; }
.record-form :is(input, textarea)::placeholder { color: var(--muted); opacity: .7; }
.record-form .form-field > :is(input, select, textarea):hover:not(:focus):not([aria-invalid=true]) { border-color: var(--muted); }
.record-form .form-field > .toggle-control { min-height: 2.5rem; }
.record-form .has-error > label:first-child { color: var(--danger); }
.record-form .is-readonly > .readonly-value { min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--text); background: transparent; }
.record-form .is-readonly > label:first-child { color: var(--muted); }
.record-form .form-section-readonly .form-grid { gap: var(--space-5) var(--space-8); }
label, .field-label { display: block; margin-bottom: 0.375rem; font-size: var(--text-sm); font-weight: 600; }
.field-tag, .optional-label { margin-left: var(--space-2); color: var(--muted); font-size: var(--text-xs); font-weight: 400; white-space: nowrap; }
.field-tag { border: var(--border); border-radius: var(--radius-sm); padding: .0625rem 0.3125rem; background: var(--subtle); }
.readonly-value { min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: var(--border); border-radius: var(--radius-control); color: var(--muted); background: var(--subtle); white-space: pre-wrap; overflow-wrap: anywhere; }
.readonly-value a { color: var(--accent); text-decoration: underline; }
.checkbox-label { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
.checkbox-label input { flex-shrink: 0; width: 0.9375rem; height: 0.9375rem; min-height: 0; margin: 0.125rem 0 0; padding: 0; accent-color: var(--accent); }
.field-help, .field-error { margin-top: 0.375rem; font-size: var(--text-xs); line-height: 1.5; }
.field-help { color: var(--muted); }
.field-error { color: var(--danger); }
.form-footer { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); margin: 0 calc(-1 * var(--space-8)); padding: var(--space-4) var(--space-8); border-top: var(--border); border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }
.record-form .form-footer .button { min-height: 2.5rem; padding-inline: 1rem; font-size: .8125rem; }
.record-actions { margin-top: var(--space-6); }
.record-form > .alert { margin-top: var(--space-6); margin-bottom: 0; }
.alert { margin-bottom: var(--space-6); border: 1px solid var(--danger-border); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); color: var(--danger); background: var(--danger-soft); font-size: var(--text-sm); }
.alert p { margin-top: var(--space-1); }
[hidden] { display: none !important; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62.5rem; margin: 0; padding: 0 var(--space-6); }
.detail-field { min-width: 0; padding: var(--space-5) var(--space-2); border-bottom: var(--border); }
.detail-field dt { margin-bottom: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.detail-field dd { margin: 0; }
.detail-field pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.delete-card { max-width: 38.75rem; padding: var(--space-8); }
.delete-summary { margin: var(--space-6) 0; padding: var(--space-4) 0; border-top: var(--border); border-bottom: var(--border); font-size: var(--text-sm); }
.delete-summary > div { display: flex; justify-content: space-between; gap: var(--space-6); }
.delete-summary dt { color: var(--muted); }
.delete-summary dd { margin: 0; overflow-wrap: anywhere; }
.shell-login { display: block; background: var(--bg); }
.shell-login .content { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-8) var(--space-6); }
.login-card { width: 100%; max-width: 25rem; padding: var(--space-8); border: var(--border); border-radius: var(--radius); background: var(--paper); }
.login-brand { display: flex; align-items: center; gap: var(--space-3); }
.login-brand h1 { min-width: 0; }
.login-brand .brand-mark, .login-brand .brand-logo { margin-bottom: 0; }
.login-card .subtitle { margin-bottom: var(--space-6); }
.login-card .stack { margin-top: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack .button { margin-top: var(--space-1); }
.login-note { margin-top: var(--space-6); color: var(--muted); font-size: var(--text-xs); text-align: center; }
.error-page { max-width: 43.75rem; margin: var(--space-8) auto 0; }
.error-page .button { margin-top: var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Lists use an independent toolbar and a light table frame, without an enclosing card. */
.list-heading { margin-bottom: var(--space-5); }
.heading-with-count { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.record-count { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.list-toolbar { padding: 0; margin-bottom: var(--space-4); }
.record-list > .active-filters { padding: 0 0 var(--space-4); }
.list-table-scroll { border: var(--border); border-radius: var(--radius-control); background: var(--paper); }
.record-list th { background: var(--paper); border-top: 0; height: 2.5rem; padding: var(--space-2) var(--space-3); }
.record-list td { padding: 0.375rem var(--space-3); }
.record-list .delete-col { width: 3rem; }
.record-list .numeric:first-child { width: 4.25rem; }
.record-list .cell-primary .cell-value { font-weight: 550; }
.record-list .pagination { min-height: 3.25rem; padding: var(--space-3) 0; border-top: 0; }
.action-icon { flex-shrink: 0; width: 1rem; height: 1rem; }

@media (max-width: 68.75em) {
  .content { padding: var(--space-6); }
  .topbar { padding: 0 var(--space-6); }
}
@media (max-width: 50em) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field.wide { grid-column: auto; }
  .search-form input { width: 15rem; }
}
@media (max-width: 43.75em) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; max-height: 60vh; padding: var(--space-4); border-right: 0; border-bottom: var(--border); }
  .brand { margin: 0 0 var(--space-4); }
  .sidebar .nav-label { margin: var(--space-4) 0 var(--space-1); }
  .sidebar nav { display: block; overflow: visible; }
  .sidebar .nav-link { white-space: normal; }
  .sidebar-resizer { display: none; }
  .sidebar-bottom { display: none; }
  .topbar { height: auto; min-height: 3.5rem; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .breadcrumbs { font-size: var(--text-xs); }
  .breadcrumbs [aria-current=page] { max-width: 22ch; }
  .account > span:not(.avatar) { display: none; }
  .account form { margin-left: 0; }
  .content { padding: var(--space-6) var(--space-4); }
  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); }
  h1 { font-size: 1.5rem; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .collection-card { padding: var(--space-4); }
  .collection-card h2 { overflow-wrap: anywhere; }
  .toolbar { flex-wrap: wrap; gap: var(--space-3); }
  .search-form { flex: 1 1 100%; min-width: 0; }
  .search-form input { width: 100%; min-width: 0; }
  .record-form { padding: 0 var(--space-4); }
  .form-footer { margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-4); }
  .delete-card { padding: var(--space-6); }
  .pagination { flex-wrap: wrap; }
  .login-card { padding: var(--space-6); }
}
@media (max-width: 26.25em) {
  .collection-grid { grid-template-columns: minmax(0, 1fr); }
  .account .avatar { display: none; }
  .button-group { row-gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.collection-card .report-value { font-size: 1.75rem; line-height: 1.3; font-weight: 650; font-variant-numeric: tabular-nums; margin: var(--space-3) 0; }
.record-actions h2 { margin-bottom: var(--space-3); }

.conflict-reload { margin: var(--space-4) 0 0; }

/* Searchable relationship editors retain a native form-control fallback. */
.relation-picker.is-enhanced > .picker-native { display: none; }
.relation-picker.is-enhanced { min-width: 0; width: 100%; max-width: 32rem; padding: .375rem; border: var(--border); border-radius: var(--radius-control); background: var(--paper); }
.picker-selection-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.picker-selection-heading .picker-clear { min-height: 1.5rem; padding: .125rem .375rem; border-color: transparent; background: transparent; color: var(--muted); }
.picker-selection-heading .picker-clear:hover { color: var(--text); background: var(--hover); }
.picker-selection { display: flex; flex-wrap: wrap; gap: .375rem; max-height: 10rem; overflow-y: auto; overscroll-behavior: contain; }
.picker-selection:not(:empty) { margin-bottom: .375rem; }
.picker-chip { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; padding: .1875rem .25rem .1875rem .625rem; border: 1px solid var(--accent-border); border-radius: var(--radius-sm); background: var(--accent-soft); }
.picker-chip > span { min-width: 0; overflow-wrap: anywhere; }
.picker-chip .button { flex: none; border: 0; padding: .125rem .375rem; min-height: 1.625rem; background: transparent; }
.picker-chip .button:hover { background: var(--hover); }
.picker-menu { position: relative; min-width: 0; width: 100%; }
.picker-menu[open] { z-index: 12; }
.picker-trigger { display: flex; justify-content: flex-start; width: 100%; max-width: 100%; gap: .5rem; white-space: normal; text-align: start; cursor: pointer; list-style: none; }
.picker-trigger > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.picker-trigger::-webkit-details-marker { display: none; }
.picker-trigger::after { content: '⌄'; margin-inline-start: auto; flex: none; }
.picker-menu[open] > .picker-trigger::after { transform: rotate(180deg); }
.picker-trigger[aria-invalid=true] { border-color: var(--danger); }
.picker-count { flex: none; min-width: 1.25rem; padding: 0 .25rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
.picker-panel { position: absolute; inset-inline-start: 0; top: calc(100% + .25rem); display: flex; flex-direction: column; min-width: 0; width: min(100%, 32rem); max-height: min(22rem, 40vh); max-height: min(22rem, 40dvh); overflow: auto; overscroll-behavior: contain; padding: .375rem; border: var(--border); border-radius: var(--radius-control); background: var(--paper); box-shadow: var(--popup-shadow); }
.picker-panel > :not(.picker-results) { flex: none; }
.picker-opens-up > .picker-panel { top: auto; bottom: calc(100% + .25rem); }
.picker-constrained > .picker-panel { max-height: 30vh; max-height: 30dvh; }
.record-form .picker-trigger, .record-form .picker-panel > input { min-height: 2rem; padding: .375rem .625rem; font-size: var(--text-sm); }
.picker-status { margin: .375rem .125rem; }
.picker-results { flex: 1 1 auto; min-height: 0; max-height: 12rem; overflow-y: auto; overscroll-behavior: contain; }
.picker-results[aria-busy=true] { opacity: .6; pointer-events: none; }
.picker-option { display: flex; align-items: flex-start; gap: .5rem; min-height: 2rem; margin: 0; padding: .3125rem .5rem; border-radius: var(--radius-sm); font-weight: 400; cursor: pointer; }
.picker-option:hover, .picker-option:focus-within { background: var(--hover); }
.picker-option:has(input:checked) { background: var(--accent-soft); }
.picker-option input { width: .875rem; min-height: .875rem; height: .875rem; flex-shrink: 0; margin: .125rem 0 0; accent-color: var(--accent); }
.picker-option-text { display: flex; align-items: baseline; flex: 1; min-width: 0; gap: .5rem; overflow-wrap: anywhere; }
.picker-option-text > span, .picker-option-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-option-text > span { flex: 1; min-width: 0; }
.picker-option-description { flex: 0 1 auto; max-width: 45%; color: var(--muted); font-size: var(--text-xs); font-weight: 400; line-height: 1.35; }
.picker-pagination { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: space-between; margin-top: .375rem; padding-top: .375rem; border-top: var(--border); }
.picker-pagination .button { min-height: 1.625rem; padding: .1875rem .5rem; }

.filter-disclosure { margin-bottom: 1rem; }
.filter-disclosure > summary { width: fit-content; list-style: none; cursor: pointer; }
.filter-disclosure > summary::-webkit-details-marker { display: none; }
.filter-panel { margin-top: 0.75rem; padding: 1.25rem; border: var(--border); border-radius: var(--radius-control); background: var(--paper); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem 1.5rem; }
.filter-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-field legend, .filter-field > label { margin: 0 0 0.375rem; padding: 0; font-weight: 600; }
.filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.filter-range label { color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.filter-null { margin-top: 0.5rem; }
.filter-footer { margin-top: 1.25rem; }
.filter-panel > .alert { margin-bottom: 1.25rem; }
.filter-chip { display: inline-flex; align-items: center; gap: 0.5rem; }
a.filter-chip:hover { border-color: var(--accent-border); }
.filter-field .picker-menu { max-width: 100%; }
.filter-field .picker-pagination { flex-wrap: wrap; }

.schema-heading p { margin-top: 0.5rem; font-size: var(--text-sm); }
.schema-workspace { border: var(--border); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.schema-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-bottom: var(--border); }
.schema-find, .schema-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.schema-find select { width: 15rem; }
.schema-controls output { min-width: 2.625rem; text-align: center; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.schema-controls .button[data-schema-zoom] { min-width: 2rem; font-size: 1.125rem; }
.schema-help { padding: 0.625rem 1rem; color: var(--muted); font-size: var(--text-xs); background: var(--subtle); border-bottom: var(--border); }
.schema-canvas { display: block; width: 100%; height: max(28.75rem, calc(100vh - 21.875rem)); background: var(--bg); touch-action: none; user-select: none; cursor: grab; }
.schema-canvas.is-dragging { cursor: grabbing; }
.schema-node { cursor: pointer; outline: none; }
.schema-node .node-surface { fill: var(--paper); stroke: var(--line); stroke-width: 1.25; }
.schema-node:hover .node-surface, .schema-node:focus .node-surface, .schema-node.is-selected .node-surface { stroke: var(--accent); stroke-width: 2; }
.schema-node .node-header { fill: var(--subtle); }
.schema-node .node-divider { stroke: var(--line); stroke-width: 1; }
/* SVG labels stay in viewBox units so text and node geometry zoom together. */
.schema-node text { fill: var(--text); font-size: 12px; }
.schema-node .node-title { font-size: 14px; font-weight: 650; }
.schema-node .node-subtitle, .schema-node .field-type, .schema-node .node-toggle { fill: var(--muted); font-size: 11px; }
.schema-node .field-name { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.schema-node .key-label { fill: var(--accent); font-size: 10px; font-weight: 650; }
.schema-node .node-toggle { fill: var(--accent); }
.schema-edge { color: var(--muted); outline: none; }
.schema-edge path.edge-line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.schema-edge .edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: help; }
.schema-edge.is-highlighted path.edge-line, .schema-edge:focus path.edge-line, .schema-edge:hover path.edge-line { stroke: var(--accent); stroke-width: 2.5; }
.schema-edge.is-dimmed { opacity: .5; }
.schema-edge .edge-label-bg { fill: var(--paper); stroke: var(--line); }
.schema-edge text { fill: var(--muted); font-size: 10px; font-weight: 600; text-anchor: middle; }
.schema-marker { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.schema-legend { display: flex; flex-wrap: wrap; gap: 0.625rem 1.5rem; padding: 0.75rem 1rem; border-top: var(--border); font-size: var(--text-xs); color: var(--muted); }
.schema-legend b { font-weight: 600; color: var(--text); margin-right: 0.375rem; }
.schema-workspace [hidden] { display: none; }
@media (max-width: 40.625em) {
  .schema-toolbar { padding: 0.75rem; }
  .schema-find { width: 100%; }
  .schema-find select { width: 100%; }
  .schema-canvas { height: 32.5rem; }
}
.schema-body { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); }
.schema-sidebar { min-width: 0; max-height: max(28.75rem, calc(100vh - 21.875rem)); overflow: auto; padding: 1rem 0.75rem; border-right: var(--border); }
.schema-sidebar-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.schema-sidebar-heading h2 { font-size: var(--text-sm); }
.schema-sidebar-heading span { font-size: var(--text-xs); }
.schema-sidebar input[type=search] { min-height: 2rem; font-size: var(--text-xs); }
.schema-select-actions { display: flex; gap: 0.75rem; margin: 0.75rem 0; }
.schema-select-actions button { font-size: var(--text-xs); }
.schema-table-choice, .schema-group-choice { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: var(--text-xs); cursor: pointer; }
.schema-table-choice { padding: 0.4375rem 0; font-weight: 400; overflow-wrap: anywhere; }
.schema-table-choice input, .schema-group-choice input { width: 0.9375rem; min-height: 0.9375rem; height: 0.9375rem; flex-shrink: 0; margin: 0.125rem 0 0; accent-color: var(--accent); }
.schema-table-choice small { display: block; font-size: 0.625rem; color: var(--muted); }
.schema-workspace.is-sidebar-hidden .schema-body { grid-template-columns: minmax(0, 1fr); }
.schema-workspace.is-sidebar-hidden .schema-sidebar { display: none; }
.schema-edge.is-expandable { cursor: pointer; }
.schema-edge.is-expandable .edge-hit { cursor: pointer; }
.schema-edge.is-expandable .edge-label-bg { stroke: var(--accent-border); }
.schema-edge.is-expandable text { fill: var(--accent); }
.schema-node.is-junction .node-header { fill: var(--accent-soft); }
.schema-empty { fill: var(--muted); font-size: 14px; text-anchor: middle; }
@media (max-width: 40.625em) {
  .schema-body { grid-template-columns: 9.375rem minmax(0, 1fr); }
  .schema-sidebar { max-height: 32.5rem; padding: 0.75rem 0.5rem; }
  .schema-select-actions { gap: 0.375rem; flex-wrap: wrap; }
}
.schema-table-name { min-width: 0; text-align: left; font-size: var(--text-xs); line-height: 1.4; }
.schema-table-name:hover { color: var(--accent); }
.schema-table-group { min-width: 0; border: 0; border-top: var(--border); margin: 0.75rem 0 0; padding: 0.25rem 0 0; }
.schema-table-group legend { max-width: 100%; padding: 0 0.375rem 0 0; }
.schema-group-choice { font-weight: 600; }
.schema-group-choice span { min-width: 0; overflow-wrap: anywhere; }
.schema-group-choice small { flex-shrink: 0; font-size: var(--text-xs); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.schema-table-group .schema-table-choice { margin-inline-start: 0.5rem; }
.schema-group-search-help { margin-block: 0.75rem; }
.schema-workspace.is-expanded { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; flex-direction: column; }
.schema-workspace.is-expanded .schema-body { flex: 1; min-height: 0; overflow: hidden; }
.schema-workspace.is-expanded .schema-canvas { height: 100%; min-height: 0; }
.schema-workspace.is-expanded .schema-sidebar { height: 100%; max-height: none; }

/* Compact, condition-based filters; the full field form is a no-script fallback. */
.filter-fallback { border: 0; margin: 0; padding: 0; min-width: 0; }
[data-filter-builder] [hidden] { display: none !important; }
.list-toolbar { justify-content: flex-start; gap: 0.75rem; }
.filter-add { gap: 0.375rem; white-space: nowrap; }
.filter-condition { padding: 0; gap: 0; overflow: hidden; }
.filter-condition > a, .filter-condition > button, .filter-condition > .filter-label { display: inline-flex; align-items: center; align-self: stretch; color: inherit; text-decoration: none; }
.filter-condition > button { border: 0; border-radius: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.filter-condition .filter-edit, .filter-condition .filter-label { padding: 0.25rem 0.5rem 0.25rem 0.625rem; overflow-wrap: anywhere; }
.filter-condition .filter-remove { padding: 0.25rem 0.5rem; color: var(--muted); border-left: 1px solid var(--line); }
.filter-condition:has(.has-filter-error) { border-color: var(--danger-border); color: var(--danger); background: var(--danger-soft); }
.filter-condition > a:hover, .filter-condition > button:hover { color: var(--accent); background: var(--accent-soft); }
.filter-popover { position: fixed; inset: auto; margin: 0; padding: 0; color: var(--text); background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--popup-shadow); overflow: auto; font: inherit; }
.filter-menu-header { padding: 0.75rem; border-bottom: var(--border); }
.filter-menu-header input { min-height: 2.25rem; }
.filter-field-menu { max-height: 18.75rem; overflow-y: auto; padding: 0.375rem; }
.filter-field-option { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; padding: 0.5625rem 0.625rem; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.filter-field-option:hover, .filter-field-option:focus-visible { background: var(--hover); }
.filter-field-option[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
.filter-option-note { margin-left: auto; color: var(--accent); }
.filter-menu-help { margin: 0; padding: 0.625rem 1rem; color: var(--muted); font-size: var(--text-xs); border-top: var(--border); }
.filter-editor-heading { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: var(--border); }
.filter-back { border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; cursor: pointer; padding: 0.25rem 0.5rem; }
.filter-back:hover { background: var(--hover); color: var(--text); }
.filter-editor-body { padding: 1rem; }
.filter-editor-body label { margin-bottom: 0.375rem; font-size: var(--text-sm); font-weight: 500; }
.filter-editor-values:not(:empty) { margin-top: 1rem; }
.filter-editor-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; }
.filter-editor-range .field-help { grid-column: 1 / -1; }
.filter-editor-body .field-error { margin: 0.75rem 0 0; }
.filter-editor-footer { display: flex; justify-content: flex-end; gap: 0.5rem; border-top: var(--border); padding: 0.75rem 1rem; }
.filter-related-selected { margin: 0.625rem 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.filter-lookup-status { margin: 0.625rem 0 0; color: var(--muted); font-size: var(--text-sm); }
.filter-lookup-status:empty { display: none; }
.filter-related-results { max-height: 13.75rem; overflow-y: auto; margin: 0.5rem -0.375rem 0; }
.filter-lookup-pages { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.filter-lookup-pages:empty { display: none; }
.filter-condition [hidden], .filter-popover [hidden] { display: none !important; }
@media (max-width: 43.75em) { .list-toolbar .search-form { flex: 1 1 15rem; } }

.export-panel { margin-block: 0.75rem; padding: 0.75rem; }
.export-panel summary { cursor: pointer; font-weight: 600; }
.export-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 0.375rem; max-height: 15rem; overflow: auto; }
.export-form fieldset { margin-block: 0.75rem; }

.json-editor { position: relative; }
.json-editor .code-input { tab-size: 2; }
.json-highlight { position: absolute; inset: 0; margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-control); white-space: pre; overflow: hidden; pointer-events: none; color: var(--text); background: var(--paper); }
.json-editor textarea { position: relative; background: transparent; color: transparent; caret-color: var(--text); }
.json-editor textarea::selection { background: var(--accent-border); }
.json-editor.json-plain textarea { color: var(--text); background: var(--paper); }
.json-key { color: var(--json-key, var(--text)); }
.json-string { color: var(--json-string, var(--text)); }
.json-number { color: var(--json-number, var(--text)); }
.json-literal { color: var(--json-literal, var(--text)); }
.json-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5625rem; margin-top: 0.375rem; }
.json-toolbar .field-help { margin: 0; }
@media (forced-colors: active) { .json-highlight { display: none; } .json-editor textarea { color: CanvasText; background: Canvas; } }

.dashboard-group { margin-bottom: var(--space-3); border: var(--border); border-radius: var(--radius); }
.dashboard-group > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); cursor: pointer; list-style: none; font-weight: 600; }
.dashboard-group > summary::-webkit-details-marker { display: none; }
.dashboard-group > summary::before { content: '▸'; color: var(--muted); }
.dashboard-group[open] > summary::before { content: '▾'; }
.dashboard-group > summary .badge { margin-inline-start: auto; }
.dashboard-group > .collection-grid { padding: 0 var(--space-4) var(--space-4); }
.nav-group { margin-block: var(--space-2); }
.nav-group summary { display: flex; align-items: baseline; gap: var(--space-2); cursor: pointer; padding: var(--space-2) var(--space-3); color: var(--muted); font-size: var(--text-xs); font-weight: 600; overflow-wrap: anywhere; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::before { content: '▸'; flex-shrink: 0; }
.nav-group[open] > summary::before { content: '▾'; }
.nav-group summary span { flex-shrink: 0; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.nav-group .nav-link { margin-left: var(--space-3); }

@media (pointer: coarse) { .button, input, select, .nav-link, summary { min-height: 2.5rem; } }

/* All built-in date controls use the history calendar and the same popover surface. */
.date-time-control { position: relative; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; border: var(--border); border-radius: var(--radius-control); background: var(--paper); }
.date-time-control:focus-within { border-color: var(--accent); }
.date-time-control > input { flex: 1; width: 0; min-width: 0; border: 0; background: transparent; box-shadow: none; }
.date-time-trigger { display: grid; place-items: center; align-self: stretch; flex: 0 0 2.125rem; min-height: var(--control-height); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--accent); cursor: pointer; }
.date-time-trigger:hover { background: var(--hover); }
[data-calendar-input]::-webkit-calendar-picker-indicator { display: none; }
.form-date-control { flex-wrap: nowrap; }
.form-date-control > input { order: 0; }
.form-date-control > .date-time-trigger { order: 1; }
.form-date-control input::-webkit-calendar-picker-indicator { display: none; }
.form-date-panel { order: 2; width: 18.75rem; max-height: min(20.625rem, 60vh); }
.form-date-calendar { padding: var(--space-3); }
.form-date-panel.date-panel-align-left { left: 0; right: auto; }
.form-date-panel.date-panel-constrained { max-height: 35vh; }
.form-temporal-row { display: grid; min-width: 0; }
.form-temporal-datetime { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.form-temporal-datetime > .form-date-control { flex: 1 1 10rem; }
.form-temporal-datetime > input { flex: 1 1 7.5rem; width: 0; }
.form-temporal-row > input { min-width: 0; }
.form-temporal-row > input[type=time]::-webkit-calendar-picker-indicator { display: none; }
.form-temporal-options { margin-top: var(--space-2); }
.form-temporal-options > summary { display: flex; gap: var(--space-3); align-items: center; width: fit-content; cursor: pointer; color: var(--muted); font-size: var(--text-xs); }
.form-temporal-options > summary::after { content: "⌄"; }
.form-temporal-options[open] > summary::after { transform: rotate(180deg); }
.form-temporal-options > summary small { color: var(--accent); font-variant-numeric: tabular-nums; }
.form-temporal-options .field-help { margin-top: var(--space-2); }
.date-time-range-control { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); grid-column: 1 / -1; }
.date-time-endpoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.date-time-endpoints > div { min-width: 0; }
.date-time-endpoints label { font-size: var(--text-xs); color: var(--muted); }
.date-time-endpoints input { min-width: 0; font-size: var(--text-xs); }
.date-picker-panel { scroll-margin-block: var(--space-4); z-index: 40; max-width: calc(100vw - 3rem); max-height: min(40.625rem, 75vh); overflow: auto; border: var(--border); border-radius: var(--radius); background: var(--paper); color: var(--text); box-shadow: var(--popup-shadow); }
.date-time-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 21.875rem; }
.date-time-range-panel { width: 38.75rem; }
.date-time-panel.date-picker-above { top: auto; bottom: calc(100% + 0.5rem); }
.date-picker-heading { padding: var(--space-3) var(--space-4); border-bottom: var(--border); color: var(--accent); font-weight: 600; font-size: var(--text-sm); }
.date-picker-columns { display: grid; padding: var(--space-3); gap: var(--space-5); }
.date-picker-range-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.date-picker-column { min-width: 0; }
.date-picker-bound { color: var(--muted); font-size: var(--text-xs); margin-bottom: var(--space-3); }
.date-picker-field { display: grid; gap: var(--space-2); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.date-picker-field input { min-width: 0; min-height: 2rem; font-size: var(--text-xs); }
.date-picker-panel input[type=date]::-webkit-calendar-picker-indicator, .date-picker-field input[type=time]::-webkit-calendar-picker-indicator { display: none; }
.date-picker-date-clock, .date-picker-precision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.date-picker-advanced { margin-top: var(--space-3); border-top: var(--border); padding-top: var(--space-3); }
.date-picker-advanced summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--muted); font-size: var(--text-xs); }
.date-picker-advanced summary::after { content: "⌄"; margin-left: auto; }
.date-picker-advanced[open] > summary::after { transform: rotate(180deg); }
.date-picker-advanced summary small { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.date-picker-zone-help { margin-top: var(--space-2); font-size: 0.625rem; }
.date-picker-error { padding: 0 var(--space-4) var(--space-3); }
.date-picker-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border); background: var(--subtle); }
.inline-dialog .form-date-control { flex-wrap: wrap; }
.filter-dialog .date-time-panel, .inline-dialog .date-time-panel { position: static; flex-basis: 100%; grid-column: 1 / -1; width: 100%; max-width: 100%; margin-top: var(--space-2); border-bottom: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 40.625em) { .date-picker-range-columns { grid-template-columns: minmax(0, 1fr); } .date-time-range-panel { width: 21.875rem; } }

.icon-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); min-height: var(--control-height); padding: 0; list-style: none; }
.icon-button::-webkit-details-marker { display: none; }
.icon-button svg { width: 1.125rem; height: 1.125rem; pointer-events: none; }
@media (pointer: coarse) { .icon-button { width: 2.5rem; height: 2.5rem; min-height: 2.5rem; } }

.list-tools { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.list-tools .list-query-form { flex: 0 1 21.25rem; min-width: 0; }
.list-tools .list-toolbar { margin-bottom: 0; justify-content: flex-start; padding: 0; gap: var(--space-2); }
.list-tools .export-panel { position: relative; flex-shrink: 0; border: 0; margin: 0; padding: 0; }
.export-panel .export-form { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.375rem); z-index: 8; width: min(35rem, calc(100vw - var(--sidebar-rail-width, var(--sidebar-width)) - 2rem)); max-height: 70vh; overflow: auto; padding: var(--space-4); background: var(--paper); color: var(--text); border: var(--border); border-radius: var(--radius); box-shadow: var(--popup-shadow); }
.export-form fieldset { min-width: 0; padding: var(--space-2); border: var(--border); }

.toggle-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.toggle-control .field-help { margin: 0; }
.boolean-toggle { position: relative; flex: 0 0 2.125rem; width: 2.125rem; height: 1.25rem; padding: 0.125rem; border: var(--border); border-radius: 0.75rem; background: var(--line); }
.boolean-toggle::after { content: ''; display: block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--paper); transition: transform .12s; }
.boolean-toggle[aria-checked=true] { background: var(--accent); border-color: var(--accent); }
.boolean-toggle[aria-checked=true]::after { transform: translateX(0.875rem); background: var(--on-accent); }
.toggle-control [aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .boolean-toggle::after { transition: none; } }

.cell-edit { position: relative; z-index: 2; display: inline-flex; vertical-align: middle; align-items: center; gap: var(--space-2); max-width: 100%; border: 0; border-radius: var(--radius-sm); margin-inline-start: var(--space-2); padding: var(--space-1) var(--space-2); color: inherit; background: transparent; text-align: inherit; font: inherit; }
.cell-edit:hover { color: var(--accent); }
.cell-edit-mark { color: var(--muted); opacity: .35; font-size: var(--text-xs); }
.cell-edit:hover .cell-edit-mark, .cell-edit:focus-visible .cell-edit-mark { opacity: 1; }
.cell-open { display: inline-block; margin-inline-end: var(--space-2); color: var(--muted); }
.inline-dialog { width: min(35rem, calc(100vw - 2rem)); overflow: visible; padding: var(--space-5); border: var(--border); border-radius: var(--radius); background: var(--paper); color: var(--text); }
.inline-dialog::backdrop, .filter-dialog::backdrop { background: color-mix(in srgb, var(--text) 25%, transparent); }
.inline-dialog h2 { margin-bottom: var(--space-3); }
.inline-dialog .button-group { margin-top: var(--space-4); justify-content: flex-end; }

.list-tools .search-form { flex: 1; min-width: 0; }
.list-tools .search-form input { width: 100%; }
.list-create { margin-inline-start: auto; flex-shrink: 0; white-space: nowrap; }
.list-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); max-width: 100%; margin-inline-start: auto; }
.list-actions .export-panel { position: static; }
.list-actions .list-create { margin-inline-start: 0; }
@media (max-width: 30em) { .list-tools { flex-wrap: wrap; } .list-tools .list-query-form { flex: 1 1 10rem; } }

/* Lists share the page gutters and reading width of the other admin screens. */
.listing-page .list-heading { margin-bottom: var(--space-4); }
.listing-page .list-table-scroll th:first-child, .listing-page .list-table-scroll td:first-child { padding-inline-start: var(--space-3); }
.listing-page .list-table-scroll th:last-child, .listing-page .list-table-scroll td:last-child { padding-inline-end: var(--space-3); }
.listing-page .active-filters { padding-inline: 0; }
.listing-page .pagination { padding-inline: 0; min-height: var(--control-height); }
.listing-page .list-table-scroll { position: relative; isolation: isolate; }

.list-toggle-control { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; }
.list-toggle-control[data-value=null] .boolean-toggle { background: transparent; border-style: dashed; }
.list-null-button { padding: .0625rem 0.1875rem; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); font: inherit; }
.list-null-button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
.toggle-null-state { color: var(--muted); font-size: var(--text-xs); }

.filter-dialog { width: min(47.5rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: var(--border); border-radius: var(--radius); color: var(--text); background: var(--paper); }
.filter-dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: var(--border); }
.filter-dialog-layout { display: grid; grid-template-columns: 13.125rem minmax(0,1fr); max-height: calc(100dvh - 10rem); overflow-y: auto; }
.filter-dialog-sidebar { padding: var(--space-3); border-inline-end: var(--border); background: var(--subtle); min-width: 0; }
.filter-dialog-sidebar .filter-field-menu { max-height: 55vh; overflow-y: auto; margin-top: var(--space-2); }
.filter-dialog-pane { min-width: 0; }
.filter-dialog .filter-editor-heading { justify-content: space-between; }
.filter-dialog .filter-field-option[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
.filter-dialog-sidebar .filter-field-option { flex-wrap: wrap; gap: 0.125rem 0.5rem; }
.filter-dialog-sidebar .filter-option-label { flex: 1 0 5rem; min-width: 0; }
.filter-dialog-sidebar .filter-option-note { max-width: 100%; margin-left: 0; font-size: var(--text-xs); }
.filter-dialog-hint { padding: var(--space-2) var(--space-4); border-top: var(--border); color: var(--muted); font-size: var(--text-xs); }
.filter-saved-conditions { display: flex; gap: var(--space-1); flex-wrap: wrap; padding: var(--space-2) var(--space-4) 0; }
.filter-saved-conditions:empty { display: none; }
.filter-saved-condition { border: var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--text-xs); color: var(--muted); background: var(--paper); max-width: 100%; overflow-wrap: anywhere; text-align: start; }
.filter-saved-condition.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.filter-preview { margin-top: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--accent); background: var(--accent-soft); font-size: var(--text-xs); overflow-wrap: anywhere; }
.filter-choice-list { max-height: 12.5rem; overflow: auto; padding-block: var(--space-2); }
.filter-dialog .filter-related-results .filter-field-option { flex-direction: column; align-items: stretch; }
.filter-result-description { color: var(--muted); font-size: var(--text-xs); font-weight: 400; overflow-wrap: anywhere; }
.filter-dialog .filter-editor-values { min-width: 0; }
.filter-dialog .calendar-control { display: grid; grid-template-columns: minmax(0,1fr) var(--control-height); }
.filter-dialog .calendar-panel { position: static; grid-column: 1 / -1; justify-self: end; width: min(18.125rem, 100%); box-shadow: none; }
.filter-dialog .filter-editor-footer { flex-wrap: wrap; }
@media (max-width: 37.5em) { .filter-dialog-layout { grid-template-columns: minmax(0,1fr); } .filter-dialog-sidebar { border-inline-end: 0; border-bottom: var(--border); } .filter-dialog-sidebar .filter-field-menu { max-height: 8.125rem; } }
/* Explicit page-local selections and the confirmation step. */
.bulk-panel { flex-shrink: 0; }
.bulk-panel summary { position: relative; cursor: pointer; }
.bulk-panel[open] summary, .bulk-panel[data-selected=true] summary { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.bulk-badge { position: absolute; inset-block-start: -0.375rem; inset-inline-end: -0.375rem; min-width: 1rem; padding: 0 0.1875rem; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--accent); font-size: var(--text-xs); line-height: 1rem; }
.bulk-toolbar { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.375rem); z-index: 8; display: grid; gap: var(--space-3); width: min(20rem, calc(100vw - 2.5rem)); max-height: 70vh; overflow: auto; padding: var(--space-4); border: var(--border); border-radius: var(--radius); background: var(--paper); color: var(--text); box-shadow: var(--popup-shadow); }
.bulk-toolbar label { margin: 0; }
.bulk-toolbar select { min-width: 0; width: 100%; }
.selection-col { position:relative; z-index:2; width:1.875rem; text-align:center; cursor:default; }
.selection-col input { width:0.75rem; height:0.75rem; margin:0; }
.bulk-confirmation { padding:0.9375rem; }
.bulk-confirmation ul { max-height:18rem; overflow:auto; padding-left:1.125rem; }
.field-display { position:relative; display:flex; align-items:flex-start; gap:0.375rem; max-width:100%; min-width:0; }
.record-row .field-display :is(a, button, summary, .value-details[open] .value-pre) { position:relative; z-index:2; }
.field-display .value-content { min-width:0; flex:1; }
.field-display .value-url { display:block; }
.value-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.value-pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; max-height:18rem; overflow:auto; }
[data-field-display="json"] .value-pre { font-family:var(--font-mono, monospace); }
.value-details summary { cursor:pointer; max-width:28.5rem; overflow-wrap:anywhere; white-space:normal; }
.value-details[open] .value-pre { padding-top:0.375rem; }
.field-display .value-copy { flex:none; padding:0.1125rem 0.3rem; }
.field-url-preview { margin-top:0.375rem; }

.relation-value { position: relative; z-index: 2; }
.relation-value:hover { color: var(--accent); }

.topbar-start { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sidebar-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0.375rem; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); }
.sidebar-toggle:hover { background: var(--hover); color: var(--text); }
.sidebar-toggle svg { width: 1.125rem; height: 1.125rem; }
.shell.is-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.shell.is-sidebar-collapsed > .sidebar { display: none; }