:root {
  color-scheme: light;
  --ink: #1c292d;
  --muted: #617178;
  --line: #d5dfe1;
  --line-strong: #b8c9cc;
  --surface: #ffffff;
  --canvas: #f3f6f5;
  --nav: #e4ebed;
  --nav-soft: #d5e2e5;
  --teal: #3f747c;
  --teal-dark: #2a626b;
  --green: #3c8a68;
  --amber: #b9782f;
  --red: #b64d50;
  --blue: #456f91;
  --pink: #b66f86;
  --shadow: 0 10px 30px rgba(29, 49, 54, .12);
}

* { box-sizing: border-box; }
.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; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; letter-spacing: 0; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 3px; font-size: 22px; }
h2 { margin-bottom: 5px; font-size: 18px; }
h3 { margin-bottom: 4px; font-size: 15px; }
p { color: var(--muted); }

.app-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nav);
  color: #24343a;
  border-right: 1px solid #bccbd0;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 16px 18px; border-bottom: 1px solid #c4d0d4; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; }
.brand strong { display: block; font-size: 19px; color: #2a626b; }
.brand span { display: block; margin-top: 2px; color: #64747b; font-size: 11px; font-weight: 700; }

.navigation { display: grid; gap: 3px; padding: 14px 10px; overflow-y: auto; }
.nav-item { min-height: 42px; padding: 10px 12px; border: 0; border-left: 3px solid transparent; border-radius: 5px; background: transparent; color: #53646b; text-align: left; cursor: pointer; font-weight: 600; }
.nav-item:hover { background: #d5e2e5; color: #24343a; }
.nav-item.active { background: #c8dde1; border-left-color: #3f7f89; color: #2a626b; font-weight: 700; }

.account-block { margin-top: auto; padding: 15px; border-top: 1px solid #c4d0d4; }
.account-name, .account-role { display: block; }
.account-name { font-weight: 700; color: #24343a; }
.account-role { margin: 2px 0 12px; color: #53646b; font-size: 12px; }

.main-area { width: 100%; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 62px; display: flex; align-items: center; gap: 14px; padding: 12px 15px; background: var(--canvas); }
.topbar p { margin-bottom: 0; font-size: 13px; }
.server-state { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #dcefe6; }

.content { width: 100%; min-width: 0; margin: 0 auto; padding: 15px 15px 40px; }
.view { display: none; min-width: 0; }
.view.active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.toolbar, .report-controls, .section-heading, .result-meta { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.toolbar { margin-bottom: 16px; }
.toolbar h2, .report-controls h2 { margin-bottom: 3px; }
.toolbar p, .report-controls p, .section-heading p { margin-bottom: 0; }
.filter-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 180px; }

.field { display: grid; gap: 6px; }
.field > span { color: #46575d; font-size: 12px; font-weight: 700; }
.field.compact input, .field.compact select { min-height: 39px; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink);
  outline: none;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,120,129,.12); }
input[type="checkbox"] { width: 20px; min-height: 20px; accent-color: var(--teal); }
.check-field { display: flex; align-items: center; gap: 9px; min-height: 42px; color: #34474c; }

.button, .icon-button {
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--teal); color: #ffffff; border-color: var(--teal); }
.button.primary:hover { background: var(--teal-dark); }
.button.secondary { background: #ffffff; color: var(--teal-dark); border-color: var(--line-strong); }
.button.secondary:hover { border-color: var(--teal); }
.button.danger { background: #fff7f7; color: var(--red); border-color: #dfabad; }
.button.ghost { background: #ffffff; color: #2a626b; border-color: #b7c7cc; }
.button.small { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.button:disabled { opacity: .5; cursor: default; transform: none; }
.wide { width: 100%; }
.icon-button { width: 38px; height: 38px; padding: 0; background: transparent; color: var(--ink); font-size: 24px; }
.link-button { padding: 0; border: 0; background: transparent; color: var(--teal-dark); text-align: left; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.detail-summary { padding: 14px; border-left: 4px solid var(--teal); background: #f1f7f5; }
.detail-summary p { margin-bottom: 6px; }

.dashboard-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dashboard-toolbar > div:first-child { display: grid; gap: 4px; }
.dashboard-controls { display: flex; align-items: end; gap: 8px; }
.dashboard-controls .field { min-width: 180px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-card { min-height: 106px; padding: 14px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 6px; background: var(--surface); }
.stat-card.tone-amber { border-top-color: var(--amber); }
.stat-card.tone-green { border-top-color: var(--green); }
.stat-card.tone-red { border-top-color: var(--red); }
.stat-card.tone-pink { border-top-color: var(--pink); }
.stat-card.tone-blue { border-top-color: var(--blue); }
.stat-card strong { display: block; margin-top: 11px; font-size: 27px; line-height: 1; }
.stat-card span { color: #44575c; font-size: 12px; font-weight: 700; }
.stat-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; }

.ratio-strip { margin-bottom: 16px; border: 1px solid var(--line); background: #ffffff; }
.ratio-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.ratio-item { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-right: 1px solid var(--line); }
.ratio-item:last-child { border-right: 0; }
.ratio-item span { color: var(--muted); font-size: 12px; }
.ratio-item strong { color: var(--teal-dark); font-size: 18px; white-space: nowrap; }

.dashboard-primary-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dashboard-triple-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.dashboard-span-2 { grid-column: span 2; }
.dashboard-table-section { margin-top: 14px; }
.plain-section { min-width: 0; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.section-heading { margin-bottom: 13px; }
.chart-legend { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend span::before { width: 9px; height: 9px; display: block; background: var(--teal); content: ""; }
.chart-legend .legend-combat::before { background: var(--green); }
.chart-legend .legend-vlk::before { background: var(--blue); }

.month-chart { min-height: 236px; overflow-x: auto; }
.month-chart-grid { min-width: 720px; height: 236px; display: grid; grid-template-columns: repeat(12, minmax(48px, 1fr)); gap: 7px; align-items: end; padding-top: 12px; }
.month-column { min-width: 0; height: 212px; display: grid; grid-template-rows: 20px minmax(0, 1fr) 24px; gap: 4px; align-items: end; }
.month-value { color: #3f5358; font-size: 10px; font-weight: 700; text-align: center; }
.month-bars { height: 160px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 0 4px; border-bottom: 1px solid var(--line-strong); }
.month-bar { width: min(13px, 28%); min-height: 0; background: var(--teal); transition: height .25s ease; }
.month-bar.combat { background: var(--green); }
.month-bar.vlk { background: var(--blue); }
.month-label { color: var(--muted); font-size: 10px; text-align: center; white-space: nowrap; }

.summary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.summary-metric { min-height: 76px; display: flex; flex-direction: column; justify-content: space-between; padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-metric span { color: var(--muted); font-size: 11px; }
.summary-metric strong { margin-top: 8px; color: var(--ink); font-size: 19px; }
.summary-metric:last-child { grid-column: 1 / -1; }

.metric-bars { display: grid; gap: 11px; }
.metric-bar-row { min-width: 0; display: grid; gap: 5px; }
.metric-bar-label { min-width: 0; display: flex; justify-content: space-between; gap: 12px; color: #384c51; font-size: 11px; }
.metric-bar-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-bar-label strong { color: #263a3f; font-size: 10px; white-space: nowrap; }
.metric-bar-track { height: 7px; overflow: hidden; background: #e5eceb; }
.metric-bar-fill { height: 100%; background: var(--teal); transition: width .25s ease; }
.metric-bar-fill.tone-green { background: var(--green); }
.metric-bar-fill.tone-red { background: var(--red); }
.metric-bar-fill.tone-amber { background: var(--amber); }
.metric-bar-fill.tone-blue { background: var(--blue); }
.metric-bar-fill.tone-pink { background: var(--pink); }
.dashboard-empty { min-height: 92px; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.diagnosis-cell { min-width: 230px; max-width: 430px; }

.table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow: auto; border: 1px solid var(--line); background: #ffffff; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 10px 11px; border-bottom: 1px solid #e2e8e9; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: #21353a; color: #ffffff; font-size: 12px; white-space: nowrap; }
tbody tr:hover { background: #f1f8f6; }
tbody tr.personnel-row { cursor: pointer; }
tbody tr.personnel-row.selected-row, tbody tr.personnel-row.selected-row:hover { background: #bedde1; color: #24343a; }
tbody tr.combat-personnel-row, tbody tr.combat-personnel-row:hover,
tbody tr.combat-personnel-row.selected-row, tbody tr.combat-personnel-row.selected-row:hover { background: #3cb371; color: #ffffff; font-weight: 700; }
tbody tr.personnel-row:focus-visible { outline: 2px solid #3f7f89; outline-offset: -2px; }
.desktop-table th { background: #d9e4e7; color: #30444b; border: 1px solid #bfcdd2; font-size: 13px; }
.desktop-table td { border: 1px solid #d9e3e6; }
tbody tr.first-combat-injury, tbody tr.first-combat-injury:hover { background: #3cb371; color: #fff; font-weight: 700; }
tbody tr.first-combat-injury .cell-muted { color: #fff; }
td { max-width: 360px; }
.cell-wrap { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-muted { color: var(--muted); font-size: 12px; }
.actions-cell { width: 1%; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; }
.toolbar .row-actions { flex-wrap: wrap; }
.file-missing { display: inline-flex; align-items: center; min-height: 30px; padding: 0 8px; border: 1px solid #d8b7b8; border-radius: 4px; background: #fff4f4; color: #8d3f42; font-size: 11px; font-weight: 700; }
.empty-row { padding: 34px; color: var(--muted); text-align: center; }

.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid #bdd1d4; border-radius: 999px; background: #f0f6f6; color: #365c63; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.green { background: #e8f5ee; border-color: #b7d9c7; color: #28664d; }
.badge.red { background: #fff0f0; border-color: #e5b5b7; color: #934144; }
.badge.amber { background: #fff7e9; border-color: #e5c795; color: #88591f; }

.result-meta { min-height: 38px; margin: 5px 0 8px; color: var(--muted); font-size: 12px; }
.person-events-layout { display: grid; grid-template-columns: 260px minmax(280px, 1fr) minmax(280px, 1fr); gap: 8px; min-height: calc(100vh - 190px); }
.person-events-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); background: #fff; }
.person-events-panel h3 { margin: 0; }
.person-events-panel .section-heading { align-items: center; margin: 0; }
.person-events-panel .section-heading h3 { overflow-wrap: anywhere; }
.person-events-list, .person-event-items, .person-document-items { min-height: 260px; max-height: calc(100vh - 290px); overflow-y: auto; }
.person-events-list { border: 1px solid var(--line); }
.person-events-person { width: 100%; display: grid; gap: 3px; padding: 10px 11px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.person-events-person:hover, .person-events-person.selected { background: #dcecee; }
.person-events-person.combat-person { background: #3cb371; color: #fff; }
.person-events-person.combat-person:hover, .person-events-person.combat-person.selected { background: #2d9360; }
.person-events-person span { font-size: 12px; opacity: .78; }
.person-event-items, .person-document-items { display: grid; align-content: start; gap: 8px; }
.person-event-item, .person-document-item { min-width: 0; display: grid; gap: 7px; padding: 11px; border: 1px solid var(--line); background: #fff; }
.person-event-item.combat-event { border-left: 4px solid #3cb371; }
.person-event-item p { margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.person-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.person-document-item > span { overflow-wrap: anywhere; font-size: 12px; }
.person-document-item > small { color: var(--muted); }
.person-document-item .row-actions, .person-event-item .row-actions { flex-wrap: wrap; }
.archive-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 15px; min-height: calc(100vh - 110px); }
.archive-panel { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.archive-panel h2 { margin: 0; font-size: 15px; }
.archive-list { min-height: 280px; max-height: calc(100vh - 260px); flex: 1; overflow: auto; border: 1px solid #c5d1d5; border-radius: 6px; background: #fff; }
.archive-item { width: 100%; min-height: 36px; display: block; padding: 8px 10px; border: 0; border-bottom: 1px solid #d9e3e6; background: #fff; color: #24343a; text-align: left; cursor: pointer; }
.archive-item:hover, .archive-item.selected { background: #bedde1; }
.archive-item.combat-person, .archive-item.combat-person:hover, .archive-item.combat-person.selected { background: #3cb371; color: #fff; font-weight: 700; }
.archive-open { display: inline-flex; justify-content: center; text-decoration: none; }
.archive-panel .row-actions { flex-wrap: wrap; }
.archive-panel .row-actions .button { padding: 8px 10px; font-size: 13px; }
.disabled-link { pointer-events: none; opacity: .5; }
.pagination { display: flex; align-items: center; gap: 6px; }
.page-button { min-width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; cursor: pointer; }
.page-button.active { border-color: var(--teal); background: var(--teal); color: #fff; }

.report-controls { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.reports-panel { padding: 20px; border: 1px solid var(--line); background: #fff; }
.reports-panel h3 { margin-bottom: 8px; }
.reports-panel p { margin-bottom: 14px; }
.reports-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-height: max(520px, calc(100vh - 310px)); overflow-y: auto; }
.report-list-button { min-height: 48px; width: 100%; padding: 10px 14px; border: 1px solid #b7c7cc; border-radius: 7px; background: #fff; color: #24343a; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; }
.report-list-button:hover, .report-list-button:focus-visible { background: #e2eef0; border-color: #7daab2; color: #2a626b; }
.report-list-button.combat { background: #3cb371; border-color: #3cb371; color: #173b2c; font-weight: 700; }
.report-list-button.combat:hover, .report-list-button.combat:focus-visible { background: #54bd84; border-color: #54bd84; }
.report-list-button.extended-combat { background: #db7093; border-color: #db7093; color: #351d25; font-weight: 700; }
.report-list-button.extended-combat:hover, .report-list-button.extended-combat:focus-visible { background: #e583a3; border-color: #e583a3; }

.template-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-strong); margin-bottom: 15px; }
.template-tab { padding: 10px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; background: transparent; color: var(--ink); cursor: pointer; }
.template-tab.active { background: #fff; border-color: var(--line-strong); font-weight: 700; }
.template-tab-panel[hidden] { display: none; }
.template-workspace { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 15px; }
.template-library, .template-help { min-width: 0; padding: 15px; border: 1px solid var(--line); background: #fff; }
.template-library h2, .template-help h2 { font-size: 15px; }
.template-list { display: grid; align-content: start; min-height: 260px; max-height: 460px; overflow: auto; margin: 10px 0; border: 1px solid var(--line-strong); }
.template-list-item { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.template-list-item:hover, .template-list-item.selected { background: #c8dde1; }
.template-library .row-actions { flex-wrap: wrap; margin-bottom: 10px; }
.template-help p { line-height: 1.5; }
.generated-row { cursor: pointer; }
.event-action-list { display: grid; gap: 10px; }
.event-action-list h3 { text-align: center; margin-bottom: 4px; }
.event-action-list .event-action { min-height: 44px; text-align: left; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.settings-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line-strong); margin-bottom: 15px; }
.settings-tab { flex: none; padding: 11px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.settings-tab:hover { background: var(--nav-soft); color: var(--ink); }
.settings-tab.active { border-bottom-color: var(--teal); color: var(--teal-dark); }
.settings-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.settings-grid > div { min-height: 88px; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.settings-grid dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.settings-grid dd { margin: 8px 0 0; overflow-wrap: anywhere; font-weight: 600; }
.settings-reference-section { margin-top: 0; }
.reference-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; max-height: 65vh; overflow-y: auto; margin-top: 14px; }
.reference-item { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); background: #fff; }
.reference-item span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.reference-item .button { flex: none; }
.tag-reference-table { max-height: min(62vh, 620px); }
.tag-copy { border: 0; background: transparent; color: var(--teal); cursor: pointer; padding: 4px 0; text-align: left; }
.tag-copy:hover { text-decoration: underline; }

.builder-layout { min-height: calc(100vh - 140px); display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--line); background: #fff; }
.builder-list-panel { padding: 16px; border-right: 1px solid var(--line); background: #f7f9f8; }
.builder-list { display: grid; gap: 5px; }
.builder-list-button { width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.builder-list-button:hover, .builder-list-button.active { border-color: var(--line-strong); background: #fff; }
.builder-list-button.active { border-left: 4px solid var(--teal); font-weight: 700; }
.builder-editor { min-width: 0; padding: 18px; }
.builder-empty { display: grid; place-items: center; min-height: 360px; color: var(--muted); }
.builder-columns, .builder-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 7px 12px; }
.check-grid label { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.builder-field-list { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 4px 8px; max-height: 290px; overflow: auto; margin: 8px 0; }
.builder-field-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; cursor: pointer; }
.builder-field-row:hover, .builder-field-row.active { border-color: var(--line-strong); background: #eef6f3; }
.builder-field-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#builder-field-search { width: min(100%, 350px); }
.builder-rules { display: grid; gap: 8px; }
.builder-rule { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, .65fr) minmax(180px, 1fr) 38px; gap: 8px; align-items: end; }
.builder-actions { margin: 20px -18px -18px; }
.diagnosis-picker { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.diagnosis-picker span { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: #f7f9f8; overflow-wrap: anywhere; white-space: pre-wrap; }
.diagnosis-picker .button { flex: none; }
.diagnosis-dialog { width: min(650px, calc(100vw - 24px)); }
.diagnosis-dialog textarea { min-height: 220px; }
.archive-health { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-top: 0; background: #f7f9f8; color: var(--muted); font-size: 13px; }
.archive-health .row-actions { flex-wrap: wrap; min-width: 0; }
.archive-health input[type="file"] { width: 220px; max-width: 100%; }
.builder-preview { max-height: 430px; margin-top: 18px; }

.app-dialog, .confirm-dialog { width: min(860px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: #ffffff; color: var(--ink); box-shadow: var(--shadow); }
.app-dialog.person-dialog { width: min(490px, calc(100vw - 30px)); }
.person-dialog #dialog-eyebrow { display: none; }
.confirm-dialog { width: min(480px, calc(100vw - 30px)); padding: 22px; }
.app-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(11, 24, 27, .58); }
.app-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 30px); }
.dialog-header { display: flex; align-items: start; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin-bottom: 0; }
.eyebrow { margin-bottom: 4px; color: var(--teal); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.dialog-body { padding: 18px 20px; overflow: auto; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--line); background: #f7f9f8; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.person-card-form { grid-template-columns: minmax(0, 1fr); max-width: 540px; }
.person-card-form .field { grid-column: 1; grid-template-columns: 135px minmax(0, 1fr); align-items: center; }
.person-card-form .field > span { font-size: 13px; font-weight: 400; }
.form-section { grid-column: 1 / -1; margin-top: 5px; padding-top: 14px; border-top: 1px solid var(--line); }
.form-section h3 { margin-bottom: 10px; }
.vlk-multi-group { min-width: 0; }
.vlk-multi-list { display: grid; gap: 7px; }
.vlk-multi-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 7px; }
.vlk-pair-row { grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr) 38px; }
.vlk-pair-labels { display: grid; grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr) 38px; gap: 7px; color: #46575d; font-size: 12px; font-weight: 700; }
.vlk-row-action { width: 38px; min-height: 42px; padding: 0; font-size: 22px; }
.vlk-report-check { gap: 14px; font-size: 17px; font-weight: 800; color: #2f6871; }
.vlk-report-check input[type="checkbox"] { width: 52px; height: 52px; min-height: 52px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.event-character-popup { position: fixed; left: 22px; bottom: 22px; z-index: 5; width: min(320px, calc(100vw - 44px)); max-height: min(550px, calc(100vh - 44px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: auto; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.event-character-options { display: grid; gap: 7px; overflow-y: auto; }
.event-character-options label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.person-picker-results { min-height: 112px; }
.form-error { margin: 0; padding: 10px; border: 1px solid #e5b5b7; background: #fff0f0; color: #934144; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); }
.toast { padding: 12px 14px; border: 1px solid #95c5b1; border-left: 5px solid var(--green); border-radius: 5px; background: #ffffff; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { border-color: #dfabad; border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 15px; background: #f2f5f6; }
.login-shell { width: min(390px, 100%); display: block; border: 1px solid #b7c7cc; border-radius: 6px; background: #f2f5f6; box-shadow: 0 8px 24px rgba(29,49,54,.13); }
.login-brand { display: none; }
.login-logo { width: 72px; height: 72px; margin-bottom: 24px; }
.login-brand h1 { font-size: 38px; }
.login-copy { max-width: 420px; color: #b9d0cc; font-size: 16px; line-height: 1.6; }
.server-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 35px 0 0; }
.server-facts div { padding-top: 10px; border-top: 1px solid #426167; }
.server-facts dt { color: #8bb9b1; font-size: 11px; font-weight: 700; }
.server-facts dd { margin: 5px 0 0; color: #ffffff; font-size: 12px; }
.login-form-panel { padding: 16px; }
.login-form { display: grid; gap: 12px; }
.login-form h2 { margin-bottom: 4px; color: #2a626b; font-size: 18px; }
.login-form .field { grid-template-columns: 80px minmax(0, 1fr); align-items: center; }
.login-form .field > span { font-size: 13px; font-weight: 400; }
.login-form input, .login-form select { min-height: 34px; padding: 5px 9px; }
.login-form #login-submit { width: 120px; min-height: 34px; justify-self: end; }

[hidden] { display: none !important; }
.mobile-only { display: none; }

@media (max-width: 1120px) {
  .person-events-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .person-events-panel:last-child { grid-column: 2; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-primary-grid { grid-template-columns: 1fr; }
  .dashboard-triple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-span-2 { grid-column: auto; }
  .ratio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratio-item:nth-child(2) { border-right: 0; }
  .ratio-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .check-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 800px) {
  .archive-layout { grid-template-columns: 1fr; min-height: 0; }
  .archive-list { min-height: 180px; max-height: 330px; }
  .archive-panel .row-actions { flex-wrap: wrap; }
  .person-events-layout { grid-template-columns: 1fr; min-height: 0; }
  .person-events-panel:last-child { grid-column: auto; }
  .person-events-list { max-height: 210px; min-height: 0; }
  .person-event-items, .person-document-items { max-height: none; min-height: 100px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -260px; width: 250px; transition: left .18s ease; box-shadow: var(--shadow); }
  .sidebar.open { left: 0; }
  .mobile-only { display: inline-grid; place-items: center; }
  .topbar { padding: 12px 14px; }
  .content { padding: 15px 12px 32px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-controls { width: 100%; }
  .dashboard-controls .field { flex: 1; }
  .dashboard-triple-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .toolbar, .report-controls { align-items: stretch; flex-direction: column; }
  .vertical-mobile { align-items: stretch; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .vlk-pair-row { grid-template-columns: minmax(0, 1fr) minmax(95px, .45fr) 38px; }
  .vlk-pair-labels { grid-template-columns: minmax(0, 1fr) minmax(95px, .45fr) 38px; }
  .login-page { padding: 15px; }
  .builder-layout { grid-template-columns: 1fr; }
  .builder-list-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .check-grid, .builder-field-list { grid-template-columns: 1fr; }
  .reference-item { flex-wrap: wrap; }
  .reference-item span { flex-basis: 100%; }
  .builder-rule { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .archive-health { flex-wrap: wrap; }
  .builder-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-actions .button { width: 100%; min-width: 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .ratio-grid { grid-template-columns: 1fr; }
  .ratio-item, .ratio-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .ratio-item:last-child { border-bottom: 0; }
  .dashboard-controls { align-items: stretch; flex-direction: column; }
  .summary-metrics { grid-template-columns: 1fr; }
  .summary-metric:last-child { grid-column: auto; }
  .server-state { display: none; }
  .filter-row { align-items: stretch; flex-direction: column; }
  .filter-row > * { width: 100%; }
  .template-workspace { grid-template-columns: 1fr; }
}