/* Bold Benefits Analyzer — operations UI.
   Calm, dense, trustworthy. Colour carries meaning, never decoration.
   8pt spacing scale. No gradients, no glass, no decorative shadow. */

:root {
  /* Surfaces */
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-sunk: #f8fafb;
  --brand-navy: #123141;
  --brand-teal: #10666e;
  --brand-coral: #ea6a55;
  --sidebar: var(--brand-navy);
  --sidebar-hover: #1e464d;
  --sidebar-active: #24555d;

  /* Ink */
  --ink: #16202a;
  --ink-2: #3d4d5c;
  --muted: #5c6b7a;
  --on-dark: #dfeaec;
  --on-dark-dim: #9fb6ba;

  /* Lines */
  --line: #dbe2e8;
  --line-strong: #c2ccd5;
  --field-line: #9fadb9;

  /* Brand — coral is identity only and never semantic. */
  --accent: var(--brand-teal);
  --accent-dark: #0e4c53;
  --accent-tint: #e6f1f2;
  --focus: #0e4c53;

  /* Semantic — meaning only. Each pairs a text tone with a pale ground. */
  --red: #a4231a;      --red-bg: #fdf2f1;   --red-line: #f0c4c0;
  --amber: #7c4d00;    --amber-bg: #fdf7e8; --amber-line: #ecd7a4;
  --blue: #14509c;     --blue-bg: #eef5fd;  --blue-line: #bcd6f2;
  --green: #045c39;    --green-bg: #ebf8f1; --green-line: #b3e0c8;
  --gray: #3f4c5a;     --gray-bg: #f1f4f6;  --gray-line: #d3dbe2;

  /* Spacing — 8pt */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 1px rgba(16, 24, 40, .04);
  --shadow-pop: 0 6px 16px -4px rgba(16, 24, 40, .16), 0 2px 6px -2px rgba(16, 24, 40, .08);

  --font: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }

/* Browser surfaces we did not draw still belong to the design. */
::selection { background: #bfe0e3; color: var(--ink); }
:root { accent-color: var(--accent); caret-color: var(--accent); }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 99px;
  border: 3px solid var(--canvas); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #a9b6c1; background-clip: padding-box; }

h1, h2, h3 { text-wrap: balance; }
a { color: var(--accent-dark); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }

/* Dual-tone ring: dark core reads on pale ground, white halo reads on the dark rail. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
  border-radius: 3px;
}
.sidebar :focus-visible { outline-color: #7fd3d9; box-shadow: 0 0 0 4px rgba(0, 0, 0, .45); }

.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;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 20;
  background: var(--surface); color: var(--accent-dark);
  padding: var(--s3) var(--s4); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); font-weight: 650;
}
.skip-link:focus { top: var(--s4); }

/* Icons — one family, sized in place, never a lone glyph. */
.icon { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.icon-sm { width: 16px; height: 16px; }
.icon-defs { position: absolute; }

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

.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 2;
  background: var(--sidebar); color: var(--on-dark);
  padding: var(--s5) var(--s3) var(--s4);
  display: flex; flex-direction: column;
}
.brand {
  display: flex; align-items: center;
  color: #fff; text-decoration: none;
  padding: 0 var(--s2) var(--s6);
}
/* The logo carries its own white plate, so it needs margin from the rail edge
   rather than sitting flush against it. */
.logo-svg { display: block; height: auto; }
.logo-svg--full { width: 232px; max-width: 100%; }
.logo-svg--compact { width: 44px; }
.logo-compact { display: none; }
.brand { padding: var(--s1) var(--s2) var(--s6); }
.auth-aside .brand { padding: 0 0 var(--s2); }

.sidebar nav { display: grid; gap: 2px; }
.nav-section {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--on-dark-dim); padding: var(--s4) var(--s3) var(--s2);
}
.sidebar nav a, .collapse-control {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 42px; padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm); color: var(--on-dark);
  text-decoration: none; cursor: pointer; font-size: .9375rem;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover, .collapse-control:hover { background: var(--sidebar-hover); color: #fff; }
/* Active line is unmistakable: ground + rule + weight, not colour alone. */
.sidebar nav a[aria-current="page"] {
  background: var(--sidebar-active); color: #fff; font-weight: 650;
  border-left-color: #6fd0d6;
}
.collapse-control { margin-top: auto; color: var(--on-dark-dim); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle:checked ~ .sidebar { width: 72px; padding-left: var(--s2); padding-right: var(--s2); }
.nav-toggle:checked ~ .sidebar .nav-label,
.nav-toggle:checked ~ .sidebar .nav-section { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.nav-toggle:checked ~ .sidebar nav a,
.nav-toggle:checked ~ .sidebar .collapse-control { justify-content: center; border-left-width: 0; }
.nav-toggle:checked ~ .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.nav-toggle:checked ~ .sidebar .logo-full { display: none; }
.nav-toggle:checked ~ .sidebar .logo-compact { display: block; }
.nav-toggle:checked ~ .workspace { margin-left: -196px; }

.workspace { min-width: 0; display: flex; flex-direction: column; }

/* ---------- Top bar ---------- */
.topbar {
  min-height: 68px; background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s6);
  position: sticky; top: 0; z-index: 3;
}
.topbar-title { min-width: 0; }
.breadcrumb {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .875rem; color: var(--muted); margin: 0;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb .icon { color: var(--line-strong); }
.breadcrumb strong { color: var(--ink); font-weight: 650; }

.company-search { margin-left: auto; position: relative; display: flex; align-items: center; }
.company-search .icon { position: absolute; left: var(--s3); color: var(--muted); pointer-events: none; }
.company-search input { width: 264px; padding-left: 40px; background: var(--surface-sunk); }
.company-search input:focus { background: var(--surface); }

.topbar-link { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); text-decoration: none; font-size: .875rem; }
.topbar-link:hover { color: var(--accent-dark); text-decoration: underline; }
.notification { display: inline-flex; align-items: center; gap: var(--s1); color: var(--muted); font-size: .875rem; }

.user-menu { position: relative; }
.user-menu summary {
  cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm); list-style: none;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--surface-sunk); }
.user-menu > div {
  position: absolute; right: 0; top: calc(100% + var(--s2)); width: 232px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
  box-shadow: var(--shadow-pop); z-index: 4;
}
.user-menu .who { margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.user-menu .who strong { display: block; }
.user-menu .who span { color: var(--muted); font-size: .8125rem; }
.user-menu a, .user-menu form { display: block; margin-top: var(--s2); }
.user-menu a { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.user-menu a:hover { text-decoration: underline; }
.link-button { border: 0; background: none; padding: 0; color: var(--accent-dark); text-decoration: underline; cursor: pointer; font-weight: 400; min-height: 0; }

main { max-width: 1440px; padding: var(--s6); margin: 0 auto; width: 100%; }

/* ---------- Page header ---------- */
.page-header { display: flex; justify-content: space-between; gap: var(--s6); align-items: flex-start; margin-bottom: var(--s5); }
.page-header h1 { font-size: 1.75rem; line-height: 1.2; margin: var(--s1) 0 var(--s2); letter-spacing: -.021em; }
.page-header > div:first-child > p { margin: 0; color: var(--muted); max-width: 68ch; }
.header-meta {
  display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap;
  margin-top: var(--s4); color: var(--muted); font-size: .875rem;
}
.header-meta strong { color: var(--ink-2); font-weight: 650; }

.action-row, .page-actions, .form-actions { display: flex; align-items: center; gap: var(--s3); justify-content: flex-end; margin: 0 0 var(--s5); }
.page-actions { margin: 0; flex: 0 0 auto; }
.form-actions { justify-content: flex-start; margin: var(--s5) 0 0; }

/* ---------- Controls ---------- */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: var(--s2) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  text-decoration: none; font-weight: 650; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.button:hover, button:hover { background: var(--surface-sunk); border-color: var(--field-line); text-decoration: none; }
.button:active, button:active { background: #eef2f4; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.button.danger { color: var(--red); border-color: var(--red-line); }
.button.danger:hover { background: var(--red-bg); }
.button[disabled], button[disabled], .button[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; background: var(--surface-sunk);
}

/* ---------- Panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5);
  margin-bottom: var(--s5); box-shadow: var(--shadow);
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.panel h2, .panel-heading h2 { font-size: 1.0625rem; margin: 0 0 var(--s1); letter-spacing: -.01em; }
.panel-heading p, .panel > p:first-of-type { margin: 0; color: var(--muted); }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.content-grid > .panel { min-width: 0; }

/* ---------- Status ---------- */
.status-badge, .status-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  border-radius: 999px; padding: 5px var(--s3);
  font-size: .8125rem; font-weight: 650; line-height: 1.3;
  border: 1px solid; white-space: nowrap;
}
.status-badge .icon { width: 15px; height: 15px; }
.status-badge--blocker, .status-chip.error   { color: var(--red);   background: var(--red-bg);   border-color: var(--red-line); }
.status-badge--warning, .status-chip.warning { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.status-badge--info                          { color: var(--blue);  background: var(--blue-bg);  border-color: var(--blue-line); }
.status-badge--success, .status-chip.success { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.status-badge--neutral                       { color: var(--gray);  background: var(--gray-bg);  border-color: var(--gray-line); }
.status-badge time, .status-badge .badge-owner { font-weight: 400; opacity: .85; }

/* The reason and next action are shown, not hidden in a tooltip. */
.status-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.status-reason { color: var(--muted); font-size: .875rem; margin: 0; }
.status-next { font-size: .875rem; color: var(--ink-2); margin: 0; }
.status-next strong { font-weight: 650; }
.status-blocked {
  display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--red); font-size: .8125rem; font-weight: 650;
}

/* ---------- Lists ---------- */
.checklist, .plain-list { list-style: none; margin: 0; padding: 0; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.checklist li { display: flex; gap: var(--s2); align-items: center; color: var(--muted); }
.checklist li .icon { color: var(--line-strong); }
.checklist li.done { color: var(--ink-2); }
.checklist li.done .icon { color: var(--green); }
.plain-list li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border: 0; }
.workflow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.workflow-steps li { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3); }
.workflow-steps strong, .workflow-steps span { display: block; }
.workflow-steps span { color: var(--muted); font-size: .8125rem; margin-top: var(--s1); }
.workflow-steps .unreachable { background: var(--surface-sunk); }

.details { display: grid; grid-template-columns: 1fr 1fr; margin: 0; gap: var(--s5) var(--s5); }
.details div { border-bottom: 1px solid var(--line); padding-bottom: var(--s3); min-width: 0; }
.details dt { font-size: .8125rem; color: var(--muted); }
.details dd { margin: var(--s1) 0 0; font-weight: 650; overflow-wrap: anywhere; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--surface-sunk); font-weight: 700;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:hover { background: var(--surface-sunk); }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 650; }
/* Row links stay quiet until pointed at — a table of underlines is noise. */
tbody th a, tbody td a { color: var(--accent-dark); text-decoration: none; }
tbody th a:hover, tbody td a:hover { text-decoration: underline; }
td.empty-cell { color: var(--muted); padding-top: var(--s5); padding-bottom: var(--s5); }
/* Money and counts line up digit-for-digit; operators compare down a column. */
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
time, .mono-num, td time { font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
.form-panel { max-width: 860px; }
.form-panel p { display: grid; gap: var(--s1); margin: 0 0 var(--s4); }
label, legend { font-weight: 650; }
.helptext { display: block; font-size: .8125rem; color: var(--muted); font-weight: 400; }
input, select, textarea {
  width: 100%; min-height: 40px;
  border: 1px solid var(--field-line); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--s2) var(--s3); color: var(--ink);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; }
input[type="number"], input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
/* 4.62:1 on the sunk field ground — placeholders are text and must clear AA. */
input::placeholder { color: #66727f; opacity: 1; }
.errorlist { color: var(--red); list-style: none; padding: 0; margin: var(--s1) 0 0; font-size: .875rem; font-weight: 650; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); margin: 0 0 var(--s4); }
legend { padding: 0 var(--s2); font-size: .875rem; }

/* Tier editor — six cards, identical rhythm, money right-aligned. */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.tier-grid fieldset { min-width: 0; margin: 0; background: var(--surface); box-shadow: var(--shadow); }
.tier-grid legend { font-weight: 700; color: var(--accent-dark); }
.tier-grid p { margin-bottom: var(--s3); }
.tier-grid label { font-size: .8125rem; color: var(--ink-2); }

.filter-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--s4); align-items: end; }
.filter-row p { margin: 0; }

/* ---------- States ---------- */
.empty-state {
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--radius); min-height: 300px;
  display: grid; place-content: center; justify-items: center;
  text-align: center; padding: var(--s7);
}
.empty-state .icon { width: 28px; height: 28px; color: var(--accent); }
.empty-state h2 { margin: var(--s3) 0 var(--s1); font-size: 1.125rem; }
.empty-state p { max-width: 60ch; color: var(--muted); margin: 0 0 var(--s4); }
.stage-note {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .8125rem; font-weight: 650; color: var(--gray);
  background: var(--gray-bg); border: 1px solid var(--gray-line);
  border-radius: 999px; padding: var(--s1) var(--s3);
}
.subnav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.message {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--blue-bg); border: 1px solid var(--blue-line);
  color: var(--blue); padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm); margin: 0 0 var(--s4); font-weight: 650;
}

/* ---------- Auth ---------- */
/* Two real panels, not a page-wide fake border. */
.auth-layout {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  background: var(--canvas); padding: 0; margin: 0; max-width: none;
}
.auth-aside {
  background: var(--sidebar); color: var(--on-dark);
  padding: var(--s6); display: grid;
  grid-template-rows: auto 1fr auto; gap: var(--s6);
  align-content: start;
}
.auth-aside .brand { padding: 0; }
.auth-aside > div { align-self: center; }
.auth-aside h2 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -.02em; color: #fff; margin: 0 0 var(--s3); max-width: 22ch; }
.auth-aside p { color: var(--on-dark-dim); margin: 0; max-width: 42ch; }
.auth-aside .auth-foot { color: var(--on-dark-dim); font-size: .8125rem; display: flex; align-items: center; gap: var(--s2); }
.auth-main { display: grid; place-items: center; padding: var(--s6); }
.auth-card { width: min(440px, 100%); }
.auth-card h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 var(--s2); }
.auth-card > p { color: var(--muted); margin: 0 0 var(--s5); }
/* ---------- Payroll workflow stepper ---------- */
/* Every step stays visible; unreachable ones name the decision that blocks them,
   so the shape of the workflow is honest about what is not built yet. */
.workflow-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s3);
}
.workflow-steps li {
  display: grid; gap: var(--s1); align-content: start;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.workflow-steps strong { font-size: .9375rem; }
.workflow-steps span { font-size: .8125rem; color: var(--muted); }
.workflow-steps .reachable { border-left: 3px solid var(--accent); }
/* Gray, recessed, and lower-contrast — blocked steps must not compete with
   the live ones for attention. */
.workflow-steps .unreachable { background: var(--surface-sunk); border-style: dashed; }
.workflow-steps .unreachable strong { color: var(--ink-2); }

/* ---------- Summary tiles ---------- */
.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s3);
}
.summary-grid article {
  display: grid; gap: var(--s1); align-content: start;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-sunk);
}
/* Label above value above note — stacked, or the label runs into the value. */
.summary-grid span { font-size: .8125rem; color: var(--muted); }
.summary-grid strong { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.summary-grid small { font-size: .75rem; color: var(--muted); }

.form-error {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--red-bg); border: 1px solid var(--red-line);
  color: var(--red); padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm); margin: 0 0 var(--s4); font-weight: 650;
}
.qr-frame {
  display: grid; place-items: center; padding: var(--s4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: var(--s4);
}
.qr-frame img, .qr-frame svg { width: 200px; height: 200px; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Responsive: 1024 laptop, then narrow ---------- */
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 232px minmax(0, 1fr); }
  .topbar { gap: var(--s3); padding: var(--s3) var(--s5); }
  .company-search input { width: 200px; }
  main { padding: var(--s5); }
  .content-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .nav-toggle:checked ~ .workspace { margin-left: -160px; }
  .auth-layout { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: auto !important; height: auto; padding: var(--s4); }
  .sidebar nav { grid-template-columns: 1fr 1fr; }
  .nav-section { display: none; }
  .collapse-control, .nav-toggle { display: none; }
  .workspace { margin: 0 !important; }
  .topbar { flex-wrap: wrap; position: static; }
  .company-search { order: 3; width: 100%; margin: 0; }
  .company-search input { width: 100%; }
  .tier-grid, .details, .checklist { grid-template-columns: 1fr; }
  .page-header { display: block; }
  .page-actions { margin-top: var(--s4); justify-content: flex-start; }
  .filter-row { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  thead th { position: static; }
}