@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --method-blue:#0062FB; --method-navy:#0B184F;
  --blue-600:#0053D6; --blue-300:#6E9BFF; --blue-100:#DCE8FF;
  --bg:#EEF2F9; --panel:#FFFFFF; --text:#0B184F; --muted:#5A648C;
  --border:rgba(11,24,79,.10);
  --glass-bg:rgba(255,255,255,.66); --glass-border:rgba(255,255,255,.85);
  --glass-shadow:0 8px 32px rgba(11,24,79,.10); --blur:16px;
  --ok:#0E9F6E; --warn:#B87200; --danger:#D02B39;
  --rail:var(--method-navy); --rail-text:#C7D4F5; --rail-active:rgba(0,98,251,.22);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#060C22; --panel:#0D1533; --text:#E9EEFB; --muted:#93A0C8;
  --border:rgba(233,238,251,.13);
  --glass-bg:rgba(17,28,66,.58); --glass-border:rgba(233,238,251,.12);
  --glass-shadow:0 8px 32px rgba(0,0,0,.5);
  --ok:#34D399; --warn:#FBBF24; --danger:#F87171;
  --rail:#080F28; --rail-text:#9FB0DC; --rail-active:rgba(0,98,251,.28);
  --blue-100:#16255C;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,-apple-system,system-ui,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; overflow:hidden;
}
/* soft colour fields so the frosted panels have something to refract */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(0,98,251,.30), transparent 60%),
    radial-gradient(40rem 30rem at 96% 6%, rgba(110,155,255,.26), transparent 62%),
    radial-gradient(44rem 34rem at 74% 104%, rgba(11,24,79,.16), transparent 60%);
}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(48rem 32rem at 12% -8%, rgba(0,98,251,.30), transparent 62%),
    radial-gradient(40rem 30rem at 96% 6%, rgba(0,60,170,.30), transparent 64%);
}

.shell{position:relative; z-index:1; display:grid; grid-template-columns:236px 1fr; height:100vh}

/* ---------- rail ---------- */
.rail{background:var(--rail); display:flex; flex-direction:column; padding:20px 14px; gap:26px; overflow-y:auto}
.brand{display:flex; align-items:center; gap:11px; padding:0 8px}
.brand svg{width:30px; height:30px; flex:none; color:var(--method-blue)}
.brand b{color:#fff; font-size:17px; letter-spacing:-.02em; font-weight:600}
.nav{display:flex; flex-direction:column; gap:2px}
.nav-label{color:#6D7DB0; font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding:0 10px; margin:14px 0 5px}
.nav button{
  all:unset; display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  color:var(--rail-text); cursor:pointer; font-size:13.5px; font-weight:500; transition:background .16s,color .16s;
}
.nav button:hover{background:rgba(255,255,255,.07); color:#fff}
.nav button[aria-current="page"]{background:var(--rail-active); color:#fff; font-weight:600}
.nav .ico{width:17px; text-align:center; opacity:.85; font-size:14px}
.rail-foot{margin-top:auto; color:#5B67A0; font-size:11px}

/* ---------- main ---------- */
.main{display:flex; flex-direction:column; min-width:0; overflow:hidden}
.topbar{
  display:flex; align-items:center; gap:14px; padding:15px 26px;
  border-bottom:1px solid var(--border); background:var(--glass-bg);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
}
.topbar h1{margin:0; font-size:19px; font-weight:650; letter-spacing:-.02em}
.topbar .sub{color:var(--muted); font-size:12.5px; margin-top:1px}
.spacer{flex:1}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--border); background:var(--panel); font-size:12.5px; font-weight:550; cursor:pointer;
  color:var(--text);
}
.pill:hover{border-color:var(--method-blue)}
.seg{display:inline-flex; background:var(--blue-100); border-radius:999px; padding:3px}
.seg button{
  all:unset; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  cursor:pointer; color:var(--muted);
}
.seg button[aria-pressed="true"]{background:var(--method-blue); color:#fff}
.avatar{width:31px; height:31px; border-radius:50%; background:var(--method-blue); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:650}

.content{padding:22px 26px 40px; overflow-y:auto; overflow-x:hidden; flex:1; min-width:0}

/* An address or a job title with no spaces in it is not a reason to widen the
   page. Cells and headings break rather than push. */
td, th, .note, .card h2, .card h3{overflow-wrap:anywhere}

/* Except a column heading. The rule above guards against what people type —
   an email address, a job title with no spaces — and a heading is neither:
   it is a word the product chose. Broken anywhere, a narrow column printed
   "NATIONALIT / Y" and "SERVIC / E". It still wraps, but only between words;
   a table too wide for the screen scrolls inside its own frame. */
thead th{overflow-wrap:normal}
.view{display:none} .view.on{display:block}

/* ---------- panels ---------- */
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow); backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur)); border-radius:15px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--panel)}
}
@media (prefers-reduced-transparency:reduce){ .glass{background:var(--panel); backdrop-filter:none} }

.grid{display:grid; gap:16px}
/* A grid item is as wide as its content by default, so one wide table would
   push its card past the screen edge. Letting it shrink leaves the table to
   scroll inside its own .table-wrap, which is what that is for. */
.grid > *{min-width:0}
.kpis{grid-template-columns:repeat(4,1fr)}
.kpis-3{grid-template-columns:repeat(3,1fr)}

/* Two figures and a breakdown. The breakdown is given the wider column
   because it carries a bar and two numbers on every row, where the figures
   carry one line each. */
.composition{grid-template-columns:1fr 1fr 1.7fr}
.cols-2{grid-template-columns:1.35fr 1fr}
.card{padding:17px 19px}
.card h3{margin:0 0 3px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.kpi .n{font-size:31px; font-weight:680; letter-spacing:-.03em; line-height:1.1}
.kpi .d{font-size:12px; color:var(--muted); margin-top:3px}
.card h2{margin:0 0 13px; font-size:15px; font-weight:650; letter-spacing:-.01em}

.live{display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-size:11.5px; font-weight:600}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }

/* Five figures that decide what a new tenant starts from. Each carries its
   own label rather than a tooltip nobody sees, and they wrap onto as many
   lines as the width allows. */
.defaults-row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.defaults-row label{display:flex; flex-direction:column; gap:3px; margin:0}
.defaults-row label span{
  font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600;
}
.defaults-row input{width:84px; padding:5px 7px}
.defaults-row button{margin-bottom:1px}

@media (max-width:1100px){
  .defaults-row{gap:10px 14px}
  .defaults-row label{flex:1 1 128px}
  .defaults-row input{width:100%}
  .defaults-row button{flex:1 1 100%; margin-top:4px}
}

/* ---------------------------------------------------------------------------
   A table with too many columns to scroll through.

   Scrolling sideways works for a list of dates and figures. It does not work
   for a row that carries a block of checkboxes, two forms and an address: the
   row grows a screen tall, the columns that matter sit off the right edge, and
   the reader is left staring at a company name beside a wall of white.

   Marked .stacked, such a table becomes one card per row below the breakpoint.
   Each cell states its own heading, taken from data-label, so nothing depends
   on a header row that is no longer there.

   The breakpoint is where the widest of them stops fitting, not where a phone
   starts. Between the two the table did not scroll — it squeezed, and broke
   every heading into one letter a line.
   --------------------------------------------------------------------------- */
/* Above the breakpoint the table is a table again — but a heading must never
   break mid-word into "JURISDICTI / ON". If one genuinely cannot fit, the card
   scrolls sideways, which is the lesser of the two. */
.stacked th{white-space:nowrap}

@media (max-width:1100px){
  .stacked thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .stacked, .stacked tbody, .stacked tr, .stacked td{display:block; width:auto}

  .stacked tr{
    border:1px solid var(--border); border-radius:14px;
    padding:12px 14px; margin-bottom:12px; background:var(--panel);
  }

  .stacked td{
    border:0; padding:8px 0;
    border-bottom:1px solid color-mix(in oklab, var(--border) 60%, transparent);
  }

  .stacked tr td:last-child{border-bottom:0; padding-bottom:0}
  .stacked tr td:first-child{padding-top:0}

  /* The heading the header row used to carry, now on the cell itself. */
  .stacked td[data-label]::before{
    content:attr(data-label);
    display:block; margin-bottom:4px;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); font-weight:600;
  }

  /* A cell that is only a name needs no heading above it: it is the title. */
  .stacked td.row-title::before{display:none}
  .stacked td.row-title{font-size:15px; padding-bottom:10px}

  /* Nothing inside is squeezed any more, so let it wrap again. */
  .table-wrap .stacked td, .table-wrap .stacked th{white-space:normal}
  .table-wrap .stacked{min-width:0}
}

/* A table is the one thing on a page that legitimately wants to be wider than
   a phone. It scrolls inside its own card rather than dragging the page
   sideways with it, which is what used to clip the first column off screen. */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}

table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:start; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
   font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--border)}
td{padding:10px; border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(0,98,251,.05)}
.who{display:flex; align-items:center; gap:9px}
.mini{width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-size:10.5px; font-weight:650; color:#fff; flex:none}
.tag{display:inline-block; padding:2.5px 8px; border-radius:999px; font-size:11px; font-weight:600}
.t-in{background:rgba(14,159,110,.15); color:var(--ok)}
.t-leave{background:rgba(184,114,0,.15); color:var(--warn)}
.t-out{background:var(--blue-100); color:var(--muted)}

label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin:0 0 5px;
  text-transform:uppercase; letter-spacing:.05em}
input,select{
  width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font:inherit; font-size:13.5px;
}
input:focus,select:focus{outline:2px solid var(--method-blue); outline-offset:-1px; border-color:transparent}
.field{margin-bottom:13px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* sick-leave ladder */
.ladder{display:flex; height:34px; border-radius:9px; overflow:hidden; border:1px solid var(--border)}
.rung{position:relative; display:grid; place-items:center; font-size:10.5px; font-weight:650; color:#fff;
  transition:flex-grow .3s ease}
.rung small{opacity:.85; font-weight:500}
.legend{display:flex; flex-wrap:wrap; gap:13px; margin-top:9px; font-size:11.5px; color:var(--muted)}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-inline-end:5px; vertical-align:-1px}

.workings{list-style:none; margin:0; padding:0; font-size:12.5px}
.workings li{padding:7px 0; padding-inline-start:20px; border-bottom:1px dashed var(--border);
  position:relative; color:var(--muted)}
.workings li::before{content:'→'; position:absolute; inset-inline-start:0; color:var(--method-blue)}
/* An arrow is a picture of a direction, not a letter: it has to be redrawn,
   not just repositioned. */
[dir=rtl] .workings li::before{content:'←'}
.workings li:last-child{border-bottom:0; color:var(--text); font-weight:600}

.big-figure{font-size:33px; font-weight:700; letter-spacing:-.03em}
.note{font-size:12px; color:var(--muted); line-height:1.55}
.alert{display:flex; gap:10px; padding:11px 13px; border-radius:10px; margin-bottom:9px; font-size:12.5px; line-height:1.5}
.a-violation{background:rgba(208,43,57,.11); color:var(--danger)}
.a-warning{background:rgba(184,114,0,.13); color:var(--warn)}
.a-info{background:rgba(0,98,251,.10); color:var(--method-blue)}
.alert b{display:block; margin-bottom:1px}
.alert .ref{opacity:.75; font-size:11px; margin-top:3px}

/* kanban */
.board{display:grid; grid-template-columns:repeat(8,minmax(158px,1fr)); gap:11px; overflow-x:auto; padding-bottom:8px}
.col{background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:11px; min-height:230px}
.col h4{margin:0 0 9px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; justify-content:space-between}
.col h4 span{background:var(--blue-100); color:var(--muted); border-radius:999px; padding:1px 7px; font-size:10.5px}
.cand{background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:9px 10px; margin-bottom:7px; cursor:grab; font-size:12.5px}
.cand:hover{border-color:var(--method-blue)}
.cand b{display:block; font-weight:600; margin-bottom:2px}
.cand span{color:var(--muted); font-size:11px}
.cand.drag{opacity:.4}
.col.over{outline:2px dashed var(--method-blue); outline-offset:-3px}

.bars{display:flex; flex-direction:column; gap:9px}
.bar-row{display:grid; grid-template-columns:96px 1fr 40px; align-items:center; gap:10px; font-size:12.5px}
.bar{height:8px; border-radius:999px; background:var(--blue-100); overflow:hidden}
.bar i{display:block; height:100%; border-radius:999px; background:var(--method-blue)}
.muted{color:var(--muted)}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .cols-2{grid-template-columns:1fr} }

/* Below this the breakdown's bars are thinner than the words beside them, so
   it takes the full width underneath the two figures rather than a third of it. */
@media (max-width:1100px){
  .composition{grid-template-columns:1fr 1fr}
  .composition > :last-child{grid-column:1 / -1}
}
@media (max-width:960px){ .row-3, .row-4{grid-template-columns:repeat(2,1fr)} }

/* Blade layout uses anchors in the rail rather than buttons */
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  color:var(--rail-text); cursor:pointer; font-size:13.5px; font-weight:500;
  text-decoration:none; transition:background .16s,color .16s;
}
.nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.nav a[aria-current="page"]{background:var(--rail-active); color:#fff; font-weight:600}
.topbar form{margin:0}

/* ---------- flash + forms added with the feature build ---------- */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;font-weight:500}
.flash-ok{background:rgba(14,159,110,.13);color:var(--ok)}
.flash-bad{background:rgba(208,43,57,.12);color:var(--danger)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:0;border-radius:9px;
  background:var(--method-blue);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue-600)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:transparent;border-color:var(--method-blue)}
.btn-ok{background:var(--ok)} .btn-bad{background:var(--danger)}
.btn-sm{padding:5px 10px;font-size:12px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
textarea{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font:inherit;font-size:13.5px;min-height:74px;resize:vertical}
textarea:focus{outline:2px solid var(--method-blue);outline-offset:-1px;border-color:transparent}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.section-head h2{margin:0}
details.panel{border:1px solid var(--border);border-radius:11px;padding:0;margin-bottom:16px;background:var(--glass-bg)}
details.panel>summary{padding:13px 17px;cursor:pointer;font-weight:600;font-size:13.5px;list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:'+ ';color:var(--method-blue);font-weight:700}
details.panel[open]>summary::before{content:'– '}
details.panel>div{padding:0 17px 17px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;text-transform:none;letter-spacing:0;
  font-weight:500;color:var(--text);margin-bottom:9px}
.check input{width:auto}
.tag-cat{background:var(--blue-100);color:var(--muted);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}

/* An expired residency is a different class of problem from an expiring one:
   the employment itself is unlawful until it is renewed. */
.t-expired{background:rgba(208,43,57,.16);color:var(--danger);font-weight:700}
.stat-strip{display:flex;gap:22px;flex-wrap:wrap;padding:12px 0}
.stat-strip > div{min-width:120px}
.stat-strip .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat-strip .v{font-size:19px;font-weight:650;letter-spacing:-.02em;margin-top:2px}
.payslip-line{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.payslip-line:last-child{border-bottom:0}
.payslip-line.total{font-weight:700;font-size:15px;border-top:2px solid var(--border);border-bottom:0;margin-top:6px;padding-top:11px}

/* ---------------------------------------------------------------- profile tabs
   The segmented control scrolls sideways on a narrow screen rather than
   wrapping into a second row that reads as two different controls. */
.tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; padding-bottom:2px}
.tabs .seg{white-space:nowrap}
.tabs .seg button{display:inline-flex; align-items:center; gap:6px}
.tab-badge{background:var(--method-blue); color:#fff; border-radius:999px; font-size:10.5px;
  font-weight:700; padding:0 6px; line-height:17px}

/* ---------------------------------------------------------------- timeline */
.timeline{list-style:none; margin:14px 0 0; padding:0; position:relative}
.timeline::before{content:''; position:absolute; inset-inline-start:96px; top:6px; bottom:6px;
  width:2px; background:var(--border)}
.timeline li{display:grid; grid-template-columns:86px 1fr; gap:20px; padding:0 0 18px; position:relative}
.timeline li::after{content:''; position:absolute; inset-inline-start:91px; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--panel); border:2px solid var(--method-blue)}
.timeline li.tl-joined::after{background:var(--method-blue)}
.timeline li.tl-leaving::after{border-color:var(--danger)}
.tl-date{font-size:12px; color:var(--muted); text-align:end; padding-top:1px; font-variant-numeric:tabular-nums}
.tl-body{font-size:13px; padding-inline-start:4px}
.tl-change{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-top:4px; font-size:12.5px}

@media (max-width:640px){
  .timeline::before{inset-inline-start:6px}
  .timeline li{grid-template-columns:1fr; gap:2px; padding-inline-start:26px}
  .timeline li::after{inset-inline-start:1px}
  .tl-date{text-align:start}
}

/* ---------------------------------------------------------------- mobile nav
   The rail is a fixed grid column on a desktop. On a narrow screen it becomes
   a drawer: off-canvas by default, slid in when asked for, and dismissed by
   the backdrop, the Escape key, or following a link. Without this it occupied
   236px of a phone screen with no way to close it. */
.nav-toggle{display:none}
.nav-backdrop{display:none}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}

  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:var(--glass-bg); border:1px solid var(--glass-border);
    border-radius:9px; padding:7px 11px; cursor:pointer; color:var(--text);
    font-size:13px; font-weight:600;
  }
  .nav-toggle:focus-visible{outline:2px solid var(--method-blue); outline-offset:2px}

  .rail{
    position:fixed; top:0; inset-inline-start:0; bottom:0; width:264px; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  [dir=rtl] .rail{transform:translateX(100%)}
  .shell.nav-open .rail{transform:none}

  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(3,8,26,.55); opacity:0; pointer-events:none;
    transition:opacity .22s ease; border:0; padding:0; cursor:pointer;
  }
  .shell.nav-open .nav-backdrop{opacity:1; pointer-events:auto}

  /* The drawer overlays the page, so the content keeps the full width. */
  .main{width:100%}

  /* The topbar was a single non-wrapping row, so on a phone the language
     pill, Sign out and the avatar ran off the right edge and were clipped by
     the overflow rule above — reachable by nobody. It wraps now: identity on
     the first line, controls on the second. */
  .topbar{flex-wrap:wrap; gap:8px 10px; padding:12px 14px}
  .topbar h1{font-size:17px}
  .topbar .sub{font-size:11.5px}
  .spacer{flex-basis:100%; height:0}
  .pill{padding:6px 10px; font-size:12px}

  .content{padding:16px 14px 40px}

  /* Wide enough to read, and scrolled to rather than squeezed into three
     characters a column. Only below this width: on a desktop there is room to
     wrap, and wrapping is the nicer of the two. */
  .table-wrap table{min-width:max-content}
  .table-wrap td, .table-wrap th{white-space:nowrap}
  .table-wrap td .who, .table-wrap td form{white-space:normal}

  /* A list of labels and values is the opposite case. It has two columns, and
     the one on the right is often a sentence — an address, an email. Scrolling
     sideways to finish reading somebody's street is worse than a second line,
     so the value wraps and the label stays on one. */
  .table-wrap table.details{min-width:0; width:100%}
  .table-wrap table.details td{white-space:normal}
  .table-wrap table.details td:first-child{white-space:nowrap}

  /* "Nothing pending." spans every column, so centring it put it halfway
     across a table the screen cannot show. An empty state has nothing to
     scroll to, so it stays where it can be read. */
  .table-wrap td[colspan]{
    position:sticky; inset-inline-start:0;
    white-space:normal; text-align:start !important;
    max-width:calc(100vw - 92px);
  }

  /* Form grids that never collapsed. Four columns across 390px gave each
     field about 85 pixels. */
  .row-2, .row-3, .row-4{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .composition{grid-template-columns:1fr}

  /* Heading and its buttons stack rather than squeeze. */
  .section-head{flex-wrap:wrap; align-items:flex-start}

  /* A form laid out as a row on a desktop is a column on a phone. */
  .card form[style*="display:flex"]{flex-wrap:wrap}

  input, select, textarea{max-width:100%}
}

@media (max-width:640px){
  /* Inline widths set on individual fields stop meaning anything useful at
     this width; let them fill the column instead. */
  .card input[style*="width"], .card select[style*="width"]{width:100% !important; max-width:100%}
  .row-2{grid-template-columns:1fr}
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .rail, .nav-backdrop{transition:none}
}