/* Tokens and compact workspace rules follow Collision Hub's interface-style.md. */
:root {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  font-size: 11px;
  color: #18211d;
  background: #edf0ec;
  --ink: #18211d;
  --muted: #6f7973;
  --line: #d9dfda;
  --panel: #fbfcfa;
  --accent: #cf532f;
  --green: #24734b;
  --amber: #a66324;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 9px; background: white; color: #3e4b44;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
button:hover:not(:disabled) { border-color: #97a79d; background: #f2f6f2; }
button.primary { background: var(--green); border-color: var(--green); color: white; }
button.primary:hover:not(:disabled) { background: #1c5d3c; }
:is(button, input, select, textarea):disabled { opacity: .48; cursor: not-allowed; }
:is(button, input, select, textarea, a):focus-visible { outline: 2px solid #98aaa0; outline-offset: 2px; }
input, select {
  height: 32px; min-width: 0; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 9px; background: white; color: var(--ink);
}
input:focus, select:focus { border-color: #98aaa0; }
input:invalid { border-color: #c17869; }
input[type=number] { font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.app-shell { width: calc(100% - 32px); height: 100dvh; min-height: 0; margin: 0 auto; padding: 18px 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: 0 0 auto; min-height: 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; margin-bottom: 14px; }
.module-bar { display: flex; align-items: center; flex: 0 0 auto; gap: 5px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #f0f3ef99; overflow-x: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.brand { color: var(--accent); font-size: 14px; font-weight: 900; letter-spacing: .08em; line-height: 1; text-decoration: none; }
h1 { margin: 0; padding: 8px 12px; border-radius: 7px; background: var(--ink); color: white; box-shadow: 0 3px 10px #18211d26; font-size: 11px; font-weight: 750; }
h2 { margin: 0; font-size: 12px; font-weight: 700; }
.main-content { --view-gutter: 24px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; border: 1px solid #d3dad5; border-radius: 16px; background: #f0f3ef; box-shadow: 0 22px 65px #22332a14; }
.page-heading { flex: 0 0 auto; min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--view-gutter); border-bottom: 1px solid var(--line); background: var(--panel); }
.subtitle { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.document-bar { min-height: 53px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px 12px; align-items: center; border-bottom: 1px solid var(--line); }
/* Inline captions follow Collision's location-menu controls. */
.document-bar label { display: flex; flex-direction: row; align-items: center; min-width: 0; height: 32px; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.document-bar label > span, .document-bar .choice-label { flex-shrink: 0; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.document-bar input { width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; text-align: right; }
.document-bar input:focus { outline: none; box-shadow: none; }
.document-bar label:has(input:focus-visible) { outline: 2px solid #98aaa0; outline-offset: 2px; }
.document-bar label:has(input:invalid) { border-color: #c17869; }
.document-bar label:has(select) { padding: 0; border: 0; background: transparent; }
.document-bar label:has(select) > span { display: none; }
.document-bar .choice-trigger { min-width: 0; width: 100%; height: 32px; padding: 8px 11px; gap: 8px; border-radius: 10px; white-space: nowrap; }
.document-bar .choice-value { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.document-bar .choice-trigger:hover:not(:disabled), .document-bar .choice-trigger[aria-expanded="true"] { border-color: var(--line); background: #e8eeea; }
.document-bar .choice-trigger:focus-visible { outline: none; background: #e3eae5; box-shadow: inset 0 0 0 1px #aab7ae; }
.document-picker { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.document-picker .choice-trigger { width: 230px; max-width: 100%; height: 32px; white-space: nowrap; overflow: hidden; }
.empty-state { display: grid; justify-items: center; padding: 64px 20px; text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; background: #e8eeea; color: var(--green); font-size: 24px; margin-bottom: 16px; }
.empty-state h2 { font-size: 16px; }
.empty-state p { color: var(--muted); line-height: 1.7; margin: 12px 0 20px; }
.summary-card { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); grid-template-rows: auto auto; align-content: start; flex: 0 0 auto; overflow: hidden; }
.summary-grid { min-height: 53px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 10px; padding: 10px 12px; }
.summary-item { display: flex; min-width: 0; height: 32px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.view-tabs { display: flex; flex: 0 0 auto; gap: 5px; }
.view-tabs button, .module-bar > button { flex: 0 0 auto; min-height: 0; padding: 9px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; }
.view-tabs button:hover:not(:disabled), .module-bar > button:hover:not(:disabled) { background: transparent; }
.view-tabs button[aria-selected="true"], .view-tabs button[aria-selected="true"]:hover:not(:disabled) { background: var(--ink); color: white; box-shadow: 0 3px 10px #18211d26; }
.workspace-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 12px; padding: 12px; overflow: auto; background: #f0f3ef; }
#workspace { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 400px; gap: 12px; }
#table-view, .table-card, .scheme-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.table-toolbar, .scheme-toolbar { flex: 0 0 auto; }
.scheme-view { overflow: hidden; }
.scheme-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.scheme-page-controls { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.scheme-page-controls .choice-trigger { width: auto; min-width: 210px; gap: 12px; }
#scheme-status:empty { display: none; }
#scheme-status { color: var(--muted); white-space: nowrap; }
.scheme-scroll { cursor: grab; user-select: none; touch-action: none; overflow: auto; flex: 1 1 auto; min-height: 0; padding: 12px; background: #edf0ec; overscroll-behavior: contain; scrollbar-gutter: stable; }
.scheme-scroll.is-panning { cursor: grabbing; }
.scheme-canvas { display: flex; width: max-content; min-width: 100%; min-height: 100%; }
.scheme-zoom-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#scheme-zoom-value { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.scheme-zoom-controls button[aria-pressed="true"] { background: #e8eeea; border-color: #98aaa0; }
.scheme-sheet { --scheme-left: 0px; --scheme-top: 0px; flex: 0 0 auto; margin: auto; background: white; box-shadow: 0 2px 10px #18211d14; position: relative; width: calc(1546px + var(--scheme-left)); height: calc(684px + var(--scheme-top)); }
.scheme-table { position: absolute; left: var(--scheme-left); top: var(--scheme-top); }
.scheme-table svg { display: block; width: 1546px; height: 684px; overflow: visible; }
.scheme-blocks { position: absolute; left: calc(235.8015px + var(--scheme-left)); top: calc(13.2677px + var(--scheme-top)); display: flex; align-items: flex-start; width: 1280px; }
.scheme-input { position: absolute; pointer-events: none; }
.scheme-input svg { display: block; max-width: none; overflow: visible; }
.scheme-block { flex: 0 0 64px; width: 64px; height: 670px; position: relative; }
.scheme-block svg { display: block; width: 64px; height: 670px; max-width: none; overflow: visible; }
.scheme-block-placeholder { display: block; margin-top: 470px; color: var(--muted); font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }
.metric-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--muted); }
.metric-value { flex-shrink: 0; margin-left: auto; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-value strong { font-weight: 700; }
.metric-value small { margin-left: 2px; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.stale .metric-value { color: var(--muted); }
.table-card { overflow: hidden; }
.table-card.is-expanded, .scheme-view.is-expanded { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; width: 100vw; height: 100dvh; border-radius: 0; background: var(--panel); box-shadow: none; }
.table-card.is-expanded .table-scroll, .scheme-view.is-expanded .scheme-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
#save-status { color: var(--muted); font-size: 10px; margin-right: 4px; }
.table-viewport, .scheme-viewport { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.table-expand { position: absolute; top: 8px; right: 16px; z-index: 5; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: rgba(251,252,250,.7); color: var(--ink); opacity: .65; backdrop-filter: blur(4px); }
.table-expand:hover:not(:disabled), .table-expand:focus-visible { opacity: 1; background: rgba(251,252,250,.95); }
.table-expand .collapse-icon, .table-expand[aria-pressed="true"] .expand-icon { display: none; }
.table-expand[aria-pressed="true"] .collapse-icon { display: block; }
.table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
table { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
th { position: sticky; top: 0; z-index: 1; height: 100px; padding: 8px 4px; text-align: center; vertical-align: bottom; background: #f3f5f2; color: #7b847f; font-size: 10px; font-weight: 700; line-height: 1.4; border-bottom: 1px solid var(--line); }
.vertical-heading { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); inline-size: 84px; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.2; }
.column-number { display: block; margin: 5px -4px -8px; padding: 3px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 600; line-height: 12px; font-variant-numeric: tabular-nums; }
th.tree-column { width: 245px; left: 0; z-index: 4; box-shadow: 1px 0 var(--line); }
td.tree-column { position: sticky; left: 0; z-index: 2; background: var(--panel); box-shadow: 1px 0 var(--line); }
tr.kind-km td.tree-column { background: #edf2ee; }
tr.kind-automaton td.tree-column { background: #f6f8f5; }
tr:hover td.tree-column { background: #f2f6f2; }
tr.selected td.tree-column { background: #e8eeea; }
th { overflow-wrap: anywhere; }
th, td { border-right: 1px solid var(--line); }
th:last-child, td:last-child { border-right: 0; }
td { overflow-wrap: anywhere; white-space: normal; vertical-align: middle; }
.phase-choice { position: relative; display: block; color: var(--ink); font-weight: 500; cursor: pointer; }
td .phase-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
td .phase-choice span { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
td .phase-choice input:checked + span { background: var(--green); border-color: var(--green); color: white; font-weight: 700; }
td .phase-choice input:hover:not(:disabled) + span { border-color: #648a73; }
td .phase-choice input:focus-visible + span { outline: 2px solid #98aaa0; outline-offset: 2px; }
td .phase-choice input:disabled { cursor: not-allowed; }
td .phase-choice input:disabled + span { opacity: .48; }
td { height: 40px; padding: 4px 6px; text-align: right; border-bottom: 1px solid #e8ece8; font-variant-numeric: tabular-nums; }
td.cell-hatched {
  background-image: repeating-linear-gradient(135deg, #f3f5f2 0, #f3f5f2 5px, #dfe6df 5px, #dfe6df 6px);
  background-size: calc(100% - 16px) calc(100% - 14px);
  background-position: center;
  background-repeat: no-repeat;
}
td input, td select, td textarea { width: 100%; min-width: 0; height: 30px; padding: 0 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font-family: inherit; font-size: 11px; }
td textarea.cell-text { display: block; resize: none; overflow: hidden; padding: 6px 5px; line-height: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
td.cell-ellipsis, td.cell-ellipsis input, td.cell-ellipsis .wrapped-select > span, td.cell-ellipsis .choice-trigger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.cell-ellipsis .wrapped-select:not(:has(.choice-trigger)) > span, td.cell-ellipsis .choice-trigger { display: block; }
td textarea:hover, .wrapped-select:hover { border-color: var(--line); background: white; }
td textarea:focus, .wrapped-select:focus-within { border-color: #98aaa0; background: white; outline: 2px solid #98aaa0; outline-offset: 1px; }
td textarea:disabled { opacity: .48; cursor: not-allowed; }
.wrapped-select { position: relative; min-height: 30px; padding: 6px 18px 6px 5px; border: 1px solid transparent; border-radius: 6px; text-align: left; line-height: 16px; overflow-wrap: anywhere; }
.wrapped-select::after { content: "⌄"; position: absolute; right: 4px; top: 6px; color: var(--muted); }
.wrapped-select select { position: absolute; inset: 0; height: 100%; opacity: 0; }
.choice-native { display: none !important; }
.wrapped-select:has(.choice-trigger) { padding: 0; border: 0; }
.wrapped-select:has(.choice-trigger)::after, .wrapped-select:has(.choice-trigger) > span { display: none; }
.choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; min-height: 32px; height: auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.72); color: var(--ink); font-size: 11px; font-weight: 700; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.choice-trigger:hover, .choice-trigger[aria-expanded=true] { background: #e8eeea; }
td .choice-trigger { padding: 5px; min-height: 30px; border-radius: 6px; font-weight: inherit; }
.tree-cell > .choice-trigger { flex: 1; }
.choice-dropdown { position: fixed; z-index: 1000; box-sizing: border-box; padding: 3px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; background: rgba(251,252,250,.98); box-shadow: 0 18px 48px rgba(24,33,29,.16); backdrop-filter: blur(10px); }
.choice-option { display: block; width: 100%; height: auto; min-height: 32px; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 11px; font-weight: 400; }
.choice-option[aria-checked=true] { background: #e8eeea; color: var(--green); font-weight: 700; }
.choice-option:hover { background: #eef2ee; }
.choice-trigger:focus-visible, .choice-option:focus-visible { outline: none; background: #e3eae5; box-shadow: inset 0 0 0 1px #aab7ae; }
td input:hover, td select:hover { border-color: var(--line); background: white; }
td input:focus, td select:focus { border-color: #98aaa0; background: white; }
td input[type=number] { text-align: right; }
td.cell-centered, td.cell-centered input, td.cell-centered textarea, td.cell-centered .wrapped-select, td.cell-centered .choice-trigger { text-align: center; }
td.cell-centered .choice-trigger { justify-content: center; }
tr.kind-km { background: #edf2ee; font-weight: 700; }
tr.kind-automaton { background: #f6f8f5; }
tr:hover { background: #f2f6f2; }
tr.selected { background: #e8eeea; }
tr.selected td.tree-column { box-shadow: inset 3px 0 var(--green); }
.tree-cell { display: grid; grid-template-columns: 16px 22px 16px 24px minmax(0, 1fr); align-items: center; gap: 2px; }
.tree-parent { width: 16px; }
.tree-line { position: absolute; left: calc(35px + var(--lane) * 10px); top: 0; bottom: -1px; width: calc(22px - var(--lane) * 10px); border-left: 1px solid #91a69a; pointer-events: none; }
.tree-tee::after, .tree-elbow::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #91a69a; }
.tree-elbow { bottom: 50%; }
.tree-elbow::after { top: 100%; }
.tree-outgoing { top: calc(50% + 7px); }
.has-children .tree-tee, .has-children .tree-elbow { width: 4px; }
.is-collapsed .tree-outgoing { display: none; }
.tree-cell .wrapped-select { width: 64px; max-width: 100%; min-width: 0; }
.tree-cell input, .tree-cell textarea { font-weight: inherit; }
.toggle { width: 22px; min-height: 26px; height: 26px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: #738079; font-size: 13px; }
.tree-spacer { width: 22px; flex-shrink: 0; }
.type-badge { min-width: 24px; padding: 3px; border-radius: 5px; background: #e8eeea; color: #56675c; font-size: 9px; font-weight: 800; text-align: center; }
.type-spacer { width: 24px; }
.kind-km .type-badge { color: white; background: var(--ink); }
.kind-automaton .type-badge { color: #94571f; background: #f5e9dc; }
.result { font-size: 11px; font-weight: 700; }
.phase-inputs { display: flex; gap: 2px; align-items: center; }
.phase-inputs select { padding-left: 2px; padding-right: 0; }
.phase-inputs select:last-child { width: 57px; }
.phases-card { display: grid; grid-template-rows: subgrid; grid-column: 2; grid-row: 1 / 3; min-width: 0; border-left: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.phases-card .section-heading { min-height: 53px; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.phase-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
#phase-imbalance { color: var(--muted); font-size: 10px; }
#phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; min-height: 53px; padding: 10px 12px; gap: 6px 12px; }
.phase-row { display: grid; min-width: 0; gap: 4px; }
.phase-field { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 11px; }
.phase-field .phase-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; }
.phase-field .phase-bar { border-radius: 0; }
.phase-label { color: var(--muted); font-weight: 700; }
.phase-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e8ede9; }
.phase-bar { height: 100%; border-radius: 999px; background: #24734b; }
.phase-row:nth-child(2) .phase-bar { background: #6f8d7a; }
.phase-row:nth-child(3) .phase-bar { background: #bd6c32; }
.phase-number { text-align: right; font-variant-numeric: tabular-nums; }
.helper { margin: 12px 0 0; font-size: 10px; color: var(--muted); line-height: 1.6; }
#message { position: fixed; right: 22px; bottom: 18px; z-index: 1100; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; width: min(440px, calc(100vw - 28px)); max-height: 60vh; overflow: auto; padding: 11px 12px; box-shadow: 0 14px 40px #18211d2e; border: 1px solid #e3c0bb; border-radius: 12px; background: #fbefed; color: #883d34; line-height: 1.5; white-space: pre-line; }
.empty-table { height: 100px; text-align: center; color: var(--muted); }
@media (forced-colors: none) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { min-height: 36px; border: 2px solid transparent; border-radius: 999px; background: #a3b3a8; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: #7d9586; }
  ::-webkit-scrollbar-thumb:active { background-color: #5e7d69; }
  ::-webkit-scrollbar-track:vertical { margin-block: 6px; }
  ::-webkit-scrollbar-track:horizontal { margin-inline: 6px; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #a3b3a8 transparent; } }
}
@media (max-width: 1050px) {
  html, body { height: auto; min-height: 100%; overflow: visible; }
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .main-content { flex: none; overflow: visible; }
  .module-bar { border-radius: 15px 15px 0 0; }
  .workspace-content { overflow: visible; border-radius: 0 0 15px 15px; }
  #workspace { min-height: 0; }
  .table-scroll { max-height: 540px; }
  .scheme-scroll { min-height: 300px; max-height: 540px; }
  .summary-card { grid-template-columns: 1fr; }
  .phases-card { grid-template-rows: auto auto; grid-column: auto; grid-row: auto; border-left: 0; border-top: 1px solid var(--line); }
  .page-heading { flex-wrap: wrap; }
  .topbar { grid-template-columns: 1fr auto; gap: 12px; }
  .document-picker { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 650px) {
  .app-shell { width: calc(100% - 20px); padding-top: 10px; }
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .main-content { --view-gutter: 14px; }
  .module-bar { padding: 10px; }
  .page-heading { gap: 10px; }
  .document-bar { grid-template-columns: 1fr 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .document-picker { max-width: 100%; }
  .document-picker .choice-trigger { width: auto; flex: 1; }
  .table-toolbar > .actions { width: 100%; }
  #save-status { width: 100%; }
}

.drag-handle { cursor: grab; padding: 4px; color: var(--muted); user-select: none; }
tr.drag-over td { border-top: 2px solid var(--green); }
th { position: sticky; z-index: 3; }
.column-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; touch-action: none; }
.column-resize:hover { background: #98aaa066; }
td input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green); }
#message button { width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 7px; background: #edf1ed; color: #68736d; font-size: 16px; }
dialog { width: min(850px, 94vw); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: 0 24px 70px #18211d2e; background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(24,33,29,.42); }
#formula-fields label { display: grid; gap: 5px; margin: 12px 0; }
#formula-fields input, #formula-fields textarea { width: 100%; box-sizing: border-box; }
#formula-fields textarea { min-height: 58px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-family: monospace; resize: vertical; }
#formula-fields small { color: var(--muted); font-weight: normal; }
#formula-status { white-space: pre-wrap; }

#row-context-menu { position: fixed; z-index: 1100; min-width: 150px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 18px 48px #18211d29; }
#row-context-menu button { width: 100%; border: 0; background: transparent; color: #883d34; text-align: left; }
#row-context-menu button:hover, #row-context-menu button:focus-visible { background: #fbefed; }
#rows tr:focus-visible { outline: 2px solid #98aaa0; outline-offset: -2px; }

#delete-row-dialog { width: min(420px, 94vw); }
#delete-row-dialog p { margin: 12px 0; line-height: 1.5; }
#delete-row-dialog .danger { background: #883d34; border-color: #883d34; color: white; }

.scheme-page-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: grid; place-items: center; width: 32px; height: 40px; padding: 0; background: rgba(251,252,250,.7); color: var(--ink); opacity: .65; backdrop-filter: blur(4px); font-size: 18px; }
.scheme-page-prev { left: 8px; }
.scheme-page-next { right: 16px; }
.scheme-page-arrow:hover:not(:disabled), .scheme-page-arrow:focus-visible { opacity: 1; background: rgba(251,252,250,.95); }
.scheme-page-arrow:disabled { opacity: .25; }

#platform-context { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; padding: 12px; }
#revision-controls { padding: 12px; margin-bottom: 12px; }
#revision-controls > button { margin-left: 8px; }
.revision-row { border-top: 1px solid #d8ded9; padding: 10px 0; }
.revision-row pre { max-height: 300px; overflow: auto; white-space: pre-wrap; }

#apartment-picker { padding: 20px; }
#apartment-picker label { display: block; margin: 12px 0; }
#apartment-picker input { min-width: 240px; margin-left: 8px; }
#apartment-options a { display: block; padding: 10px; border: 1px solid var(--line, #d8ded9); border-radius: 8px; }
.ens-controls { margin-bottom: 16px; padding: 14px; flex-shrink: 0; }
.ens-controls p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; margin: 10px 0; }
#scheme-import-dialog { width: min(1500px, 96vw); }
.scheme-view-choice { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.scheme-import-settings { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.scheme-import-settings label { display: grid; gap: 6px; }
.scheme-import-scroll { overflow: auto; max-height: 52vh; margin: 12px 0; }
.scheme-import-table { min-width: 1550px; width: 100%; table-layout: auto; }
.scheme-import-table td { vertical-align: top; white-space: pre-line; padding: 8px; }
.scheme-import-table th { top: 0; height: auto; vertical-align: middle; background: var(--panel); padding: 8px; }
.scheme-import-table input[type=number] { width: 84px; }
.scheme-import-table select { max-width: 200px; min-width: 72px; }
.scheme-import-table small { display: block; }
#scheme-import-content pre { max-width: 600px; max-height: 240px; overflow: auto; white-space: pre-wrap; }
#scheme-import-result { margin: 12px 0; }
#scheme-import-result .scheme-import-table { min-width: 1000px; }