/* Renewal Tracker stylesheet. Native CSS, no framework, no build step.

   Light theme only. Cool neutral (zinc) surfaces with Buckner navy #395382 as the
   single accent. The page looks the same whether Windows is in light or dark mode:
   color-scheme is pinned to light in the <head> and every colour is an explicit
   token on :root. Every text/background pair is >= 4.5:1; control borders are
   >= 3:1 against their field (WCAG 1.4.11).

   Radius: one value, 6px, on every control, table, badge, banner and panel.
   Type: system sans ("Segoe UI" first, the fleet is Windows). Page title 22/600,
   section title 15/600, body 14, table cells 13.5, meta 12.5, KPI 22/600.
   Tabular numerals on anything numeric or date-like.
   Controls: 36px tall, 14px labels above every field.
   Motion: colour transitions only, 120ms, disabled under prefers-reduced-motion. */

:root {
  color-scheme: light;

  --surface: #f4f4f5;          /* page */
  --surface-raised: #fcfcfc;   /* panels, tables, inputs, header, login card */
  --surface-sunken: #f1f1f3;   /* table head, code, hover rows */
  --border: #e4e4e7;
  --border-strong: #a1a1aa;    /* decorative strong borders (empty states) */
  --border-control: #85858e;   /* input and button borders: >= 3:1 against the field */

  --text: #18181b;
  --text-muted: #52525b;
  --text-faint: #6b6b74;       /* >= 4.5:1 on page and raised only; never on sunken */

  --accent: #395382;
  --accent-hover: #2c4067;
  --accent-text: #fcfcfc;
  --accent-soft: rgba(57, 83, 130, 0.10);

  --danger: #b42318;
  --danger-soft: rgba(180, 35, 24, 0.10);
  --warning: #854f0b;
  --warning-soft: rgba(133, 79, 11, 0.12);
  --success: #05653d;
  --success-soft: rgba(5, 101, 61, 0.11);

  --focus: var(--accent);
  --shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.06);

  --radius: 6px;
  --nav-h: 56px;
  --control-h: 36px;
  --content-w: 1280px;
  --gutter: 24px;
  --gap: 24px;
  --row-h: 40px;
  --t: 120ms;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: #f4f4f5; }

/* Column flex so the footer sits at the bottom of the viewport on short pages
   and flows after the content on long ones. dvh, not vh, so mobile browser
   chrome does not push the footer off-screen. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f4f4f5;
  background-color: var(--surface);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; border-radius: var(--radius); }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 22px; letter-spacing: -0.01em; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
p { margin: 0 0 12px; }

code {
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 5px;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.meta { font-size: 12.5px; color: var(--text-muted); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- navigation ---------- */

.topbar {
  display: flex;
  align-items: stretch;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex;
  align-items: center;
}
.topbar .brand a {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.topbar nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.topbar nav a {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--text-muted);
  padding: 0 10px;
  white-space: nowrap;
  border-radius: 0;
  transition: color var(--t) ease;
}
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.topbar nav a.active { color: var(--text); }
.topbar nav a.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.topbar nav a.primary {
  align-self: center;
  height: var(--control-h);
  margin-left: 6px;
  padding: 0 14px;
  border-radius: var(--radius);
  color: var(--accent-text);
  background: var(--accent);
  font-weight: 600;
  transition: background-color var(--t) ease;
}
.topbar nav a.primary:hover { background: var(--accent-hover); color: var(--accent-text); }
.topbar nav a.primary.active::after { display: none; }
.topbar .user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* ---------- layout ---------- */

.container {
  flex: 1;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--gap) var(--gutter);
}
.container.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container.centered > .flash { width: 100%; max-width: 380px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--gap);
}
.page-head .desc {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
}
.page-head .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.page-head .title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

section { margin: 0 0 var(--gap); }
section:last-child { margin-bottom: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-head h2 .count { font-weight: 400; color: var(--text-muted); margin-left: 6px; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.stack { display: grid; gap: var(--gap); }

.foot {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 20px var(--gutter);
  color: var(--text-faint);
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}

/* ---------- flash banners ---------- */

.flash {
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13.5px;
}
.flash.error   { border-left-color: var(--danger);  background: var(--danger-soft); }
.flash.success { border-left-color: var(--success); background: var(--success-soft); }
.flash.info    { border-left-color: var(--accent);  background: var(--accent-soft); }

/* "Needs attention" banner on the dashboard: one line per item, warning tint. */
.attention {
  margin-bottom: var(--gap);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  background: var(--warning-soft);
  color: var(--text);
}
.attention h2 { font-size: 14px; margin-bottom: 4px; }
.attention ul { margin: 0; padding: 0; list-style: none; }
.attention li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.attention li a { font-weight: 600; }
.attention li .why { color: var(--text-muted); }

/* ---------- panels ---------- */

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 .count { font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.panel-body { padding: 14px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel:target { border-color: var(--accent); }

/* Compact list inside a panel: one row per item, hairline dividers. */
.list { margin: 0; padding: 0; list-style: none; }
.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--row-h);
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.list li:last-child { border-bottom: none; }
.list .primary-text { min-width: 0; }
.list .primary-text a { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .sub { display: block; font-size: 12.5px; color: var(--text-muted); }
.list .right { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Empty state, inside or outside a panel. */
.empty {
  margin: 0;
  padding: 16px 14px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.empty.standalone {
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.empty.standalone a { font-weight: 600; }

/* ---------- stat strip ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--gap);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat {
  padding: 8px 14px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.stat:last-child { border-right: none; }
.stat .label { font-size: 12.5px; color: var(--text-muted); }
.stat .row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.stat .value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.stat .sub {
  font-size: 12.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stat.danger .value { color: var(--danger); }
.stat.warn .value   { color: var(--warning); }
.stat.ok .value     { color: var(--success); }

/* ---------- key facts grid (contract detail) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fact {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.fact:nth-child(3n) { border-right: none; }
.fact:nth-last-child(-n+3) { border-bottom: none; }
.fact .label { font-size: 12.5px; color: var(--text-muted); }
.fact .value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  padding: 0 7px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge.danger { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.badge.warn   { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge.ok     { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge.muted  { background: var(--surface-sunken); color: var(--text-muted); }
.badge.status { text-transform: capitalize; }

/* ---------- tables ---------- */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.panel > .table-wrap { border: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  height: var(--row-h);
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
table.data thead th:first-child { border-top-left-radius: var(--radius); }
table.data thead th:last-child  { border-top-right-radius: var(--radius); }
.panel table.data thead th:first-child, .panel table.data thead th:last-child { border-radius: 0; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--surface-sunken); }
table.data th.num, table.data td.num { text-align: right; }
table.data th.actions, table.data td.actions { text-align: right; white-space: nowrap; }
table.data td a { font-weight: 600; }
table.data td a:hover { text-decoration: underline; }
table.data td .sub {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 400;
}
table.data td.nowrap, table.data th.nowrap { white-space: nowrap; }
table.data td .flag { margin-left: 6px; }

/* ---------- buttons ---------- */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}
button:hover, .button:hover { background: var(--surface-sunken); text-decoration: none; }
button:disabled, .button:disabled { opacity: 0.6; cursor: default; }

button.primary, .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
button.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }

button.danger, .button.danger { color: var(--danger); }
button.danger:hover, .button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

button.link {
  height: auto;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: 500;
}
button.link:hover { background: none; text-decoration: underline; }
button.link.danger { color: var(--danger); }
button.link.danger:hover { background: none; }

button.block, .button.block { display: flex; width: 100%; }

form.inline { display: inline; margin: 0; }

/* ---------- forms ---------- */

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input:not([type]), select, textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 10px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color var(--t) ease;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; min-height: 84px; }
input[type="number"], input[type="date"] { font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
}
select { padding-right: 28px; }
input[type="file"] {
  width: 100%;
  height: var(--control-h);
  padding: 4px 6px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
input[type="file"]::file-selector-button {
  margin-right: 8px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

/* Field: label above input, helper or error text below. */
.contract-form label, .login-card label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.contract-form label > input, .contract-form label > select, .contract-form label > textarea,
.login-card label > input {
  margin-top: 6px;
  font-weight: 400;
  font-size: 14px;
}
.field-help, .field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}
.field-help { color: var(--text-muted); }
.field-error { color: var(--danger); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

.contract-form { max-width: 760px; }
.contract-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.contract-form label.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  height: var(--control-h);
  font-weight: 400;
  font-size: 14px;
}
.contract-form label.checkbox input { width: auto; margin: 0; }
.contract-form .actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Toolbar: filters left, result count, optional secondary panel right. */
.toolbar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar form.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
}
.toolbar form.filters input[type="text"] { flex: 1 1 200px; min-width: 140px; }
.toolbar form.filters select { width: auto; flex: 0 0 auto; }
.toolbar .count {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.toolbar .panel.slim {
  flex: 0 1 460px;
  min-width: 0;
  margin-left: auto;
  padding: 8px 10px;
  box-shadow: none;
}
.toolbar .panel.slim .label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.toolbar .panel.slim form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.toolbar .panel.slim input[type="file"] { flex: 1; min-width: 0; }
.toolbar .panel.slim .field-help { margin-top: 6px; }

.upload-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.upload-form input[type="file"] { flex: 1; min-width: 0; }

.note-form textarea { margin-bottom: 8px; }

/* ---------- login ---------- */

.login-card {
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 28px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.login-card .wordmark { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.login-card h1 { margin-bottom: 4px; }
.login-card > .muted { font-size: 13.5px; margin-bottom: 18px; }
.login-card .button.block { margin-top: 4px; }

/* ---------- contract detail ---------- */

.description {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13.5px;
}

.note {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.note:last-child { border-bottom: none; }
.note-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 2px;
  font-size: 12.5px;
}
.note-head strong { color: var(--text); font-weight: 600; }
.note-head form { margin-left: auto; }
.note-body { white-space: pre-wrap; font-size: 13.5px; }

dl.kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0 12px;
  margin: 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
dl.kv dt, dl.kv dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
dl.kv dt { color: var(--text-muted); }
dl.kv dt:last-of-type, dl.kv dd:last-of-type { border-bottom: none; }

.detail-actions { display: flex; gap: 8px; }
.detail-actions .button, .detail-actions form { flex: 1; }
.detail-actions form button { width: 100%; }

/* ---------- vendor registry ---------- */

.vendor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1024px) {
  .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vendor {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.vendor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.vendor-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor dl.kv {
  grid-template-columns: 110px minmax(0, 1fr);
  padding: 4px 12px;
  font-size: 13px;
}
.vendor dl.kv dt, .vendor dl.kv dd { padding: 4px 0; border-bottom: none; }
.vendor-notes {
  padding: 6px 12px 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.vendor-notes summary {
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: var(--radius);
}
.vendor-notes summary:hover { color: var(--text); background: var(--surface-sunken); }
.vendor-notes .description { margin-top: 6px; font-size: 13px; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 899px) {
  /* Below desktop widths the wrapper becomes the horizontal scroll container, which
     also disables the sticky header (sticky needs a non-scrolling ancestor). */
  .table-wrap { overflow-x: auto; }
  table.data { min-width: 640px; }
  table.data thead th { position: static; }
  .toolbar .panel.slim { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 639px) {
  .topbar { height: auto; flex-wrap: wrap; gap: 0 16px; padding: 8px 16px; }
  .topbar .brand { order: 1; height: 36px; }
  .topbar .user { order: 2; height: 36px; }
  .topbar nav { order: 3; flex-basis: 100%; height: 44px; overflow-x: auto; }
  .topbar .user > span { display: none; }

  .container { padding: 16px; }
  h1 { font-size: 20px; }
  .page-head { flex-direction: column; }
  .page-head .actions { width: 100%; }
  .page-head .actions .button { flex: 1; }

  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3n) { border-right: 1px solid var(--border); }
  .fact:nth-child(2n) { border-right: none; }
  .fact:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
  .fact:nth-last-child(-n+2) { border-bottom: none; }

  .contract-form .row { grid-template-columns: 1fr; }
  .contract-form label.checkbox { margin-top: 0; margin-bottom: 14px; }
  .toolbar form.filters { flex-wrap: wrap; }
  .toolbar form.filters input[type="text"] { flex-basis: 100%; }
  .toolbar .panel.slim form { flex-direction: column; align-items: stretch; }
  .upload-form { flex-direction: column; align-items: stretch; }
  dl.kv, .vendor dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { padding-bottom: 0; border-bottom: none; }
  dl.kv dd { padding-top: 2px; }
  .login-card { padding: 22px; }
  .foot { padding: 16px; }
}