/* Baton base layer
   ================
   The four apps are separate hand-written files with no shared stylesheet, so
   anything that should be true everywhere has had to be written four times —
   and in practice was written nowhere. This file is the start of the shared
   layer: rules that belong to the platform rather than to one console.

   It is linked AFTER each app's inline <style> so it can settle the handful of
   things every console should agree on, and deliberately does nothing else.
   Component consolidation goes in later, once each app's own copy is removed. */


/* 1 · Keyboard focus
   ------------------
   Before this, no console in Baton showed a keyboard user where they were:
   zero :focus-visible rules across all four files, and outline:none set
   explicitly in three of them. Someone working a review queue by keyboard —
   which is how a fast office person will want to work it — was flying blind.

   :focus-visible only fires for keyboard and assistive-tech focus, so a mouse
   click still gives no ring and nothing looks different for existing users.
   !important is here on purpose: the app files suppress outlines with
   higher-specificity selectors (.btn:focus{outline:none}) that this layer would
   otherwise lose to. It is scoped to the outline properties alone, so it cannot
   affect anything else a component sets on focus. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pink, #DF255E) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* On the dark rails, pink on deep purple is legible but tight. White reads
   cleanly against every rail colour the four apps use. */
.sidebar :is(a, button):focus-visible,
.side :is(a, button):focus-visible,
.sb :is(a, button):focus-visible,
.rail :is(a, button):focus-visible {
  outline-color: #fff !important;
}


/* 2 · Icon-only hit areas
   -----------------------
   The row actions — call, WhatsApp, email, flag — render at roughly 30px in a
   32px row, three abreast, and one of them dials a phone. The obvious fix is to
   make them bigger, but these lists are scanned in bulk and the density is
   worth keeping, so the visible button stays exactly as it is and only the
   clickable area grows, to about 42px, via an overlay that takes no space in
   the layout. Nothing moves; the target stops being a coin toss. */
.iconly { position: relative; }
.iconly::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 8px;
}

/* Where two of them sit side by side the overlays would overlap and the later
   sibling would swallow the edge of the earlier one, so give each its own
   stacking context and let the visible box decide the boundary. */
.iconly + .iconly::after { inset: -6px -4px; }


/* 3 · Reduced motion
   ------------------
   Toasts, drawers and the rota grid all animate. Respect the system setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   4 · Aligning the four consoles to the Rota
   ============================================================================
   The Rota is the best-resolved console in Baton, and the difference is not
   decoration — it is density. Rota sets 14px body text, 22px/24px page padding,
   14px between panels, a 236px rail and 13px table cells. Carer Base and
   Onboarding set 15px, 34px/42px, 22px, 246–280px and 14–15px, so the same
   screen holds noticeably less and reads as a looser, less finished product.
   These lists are scanned in thousands; the tighter setting is the right one.

   Everything below pulls the other three onto Rota's measurements. The values
   are Rota's, taken from its stylesheet rather than invented, so this section
   should shrink to nothing as the shared layer grows and each app's own copy is
   deleted. Rota itself is deliberately untouched: it is already correct.
   ========================================================================== */

/* --- 4.1 Base text ------------------------------------------------------- */
body[data-app="carer-base"],
body[data-app="onboarding"] { font-size: 14px; }

/* --- 4.2 Page padding ---------------------------------------------------- */
body[data-app="carer-base"] .main,
body[data-app="onboarding"] .main { padding: 22px 24px 60px; }
/* Client Base pads its scrolling .body rather than .main, so the same numbers
   go there. Its top bar is a white strip across the same column and gets the
   matching side inset, so the two edges line up. */
body[data-app="client-base"] .body { padding: 22px 24px 60px; }
body[data-app="client-base"] .top { padding: 14px 24px; }

/* --- 4.3 The page head --------------------------------------------------- */
/* Rota sets 26px at -.015em, and every console now matches it. */
body[data-app="carer-base"] .hero,
body[data-app="carer-base"] .page-head h1,
body[data-app="client-base"] .head h1,
body[data-app="onboarding"] .display { font-size: 26px; letter-spacing: -.015em; }

/* The standfirst runs the width of the page.
   ------------------------------------------
   It used to be capped at 64ch, which is the right measure for prose you sit
   and read — an article, a report. This is not that. It is one orientation line
   at the top of a working screen, read once and then skipped past forever, and a
   narrow column made it six stacked lines of grey that looked like a pull-quote
   somebody had left in. Set against a 1,200px-wide table it read as a box the
   page was working around rather than a sentence introducing it.

   So it uses the column it is standing in: two or three lines at a laptop width,
   and it stops growing past 1,180px so a very wide monitor does not turn it into
   a single unreadable ribbon. `text-wrap: pretty` keeps the last line from
   landing as one orphaned word. */
body[data-app="carer-base"] .hero-sub,
body[data-app="carer-base"] .page-head .sub,
body[data-app="client-base"] .head p,
body[data-app="onboarding"] .sub,
body[data-app="rota"] .head p {
  max-width: min(100%, 1180px);
  text-wrap: pretty;
}
/* Carer Base reuses .sub inside table cells and drawers, where the cell is the
   measure and this rule has nothing to say. Named here so the selector above
   staying page-head-scoped is deliberate rather than an oversight. */

/* The pink tick before the eyebrow is the one mark that says Baton rather than
   any other admin console. Three of the four had lost it to the text colour. */
body[data-app="carer-base"] .eyebrow::before,
body[data-app="client-base"] .eyebrow::before,
body[data-app="onboarding"] .kicker::before { background: var(--pink, #DF255E); width: 20px; }

/* Client Base has no italic-serif rule at all, and Carer Base only styles the
   accent inside .hero on its dashboard — so on its six inner pages the italic
   would have rendered as a sans italic. Both get the same treatment as Rota. */
body[data-app="client-base"] .head h1 em,
body[data-app="carer-base"] .page-head h1 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--pink, #DF255E);
}

/* --- 4.4 Panels ---------------------------------------------------------- */
body[data-app="carer-base"] .panel,
body[data-app="client-base"] .panel,
body[data-app="onboarding"] .panel { border-radius: 14px; margin-bottom: 14px; }

/* --- 4.5 Metric cards ---------------------------------------------------- */
/* One card, everywhere: 12px radius, 14/16 padding, label above the figure in
   Poppins 600 10px uppercase, figure at 24px/800. Carer Base's two card classes
   put the figure first in the markup, so they are reversed visually rather than
   rewritten — the reading order is label-then-number either way. */
body[data-app="carer-base"] .stat,
body[data-app="carer-base"] .stg,
body[data-app="client-base"] .kpi,
body[data-app="onboarding"] .stat {
  padding: 14px 16px;
  border-radius: 12px;
}
/* Carer Base's cards hold figure-then-label (.stat) and figure-then-label-then-
   description (.stg). Reversing the container would put the description on top,
   so the label is promoted instead and everything after it keeps its order. */
body[data-app="carer-base"] .stat,
body[data-app="carer-base"] .stg { display: flex; flex-direction: column; }
body[data-app="carer-base"] .stat .l,
body[data-app="carer-base"] .stg .l { order: -1; }

body[data-app="carer-base"] .stat .n,
body[data-app="carer-base"] .stg .n,
body[data-app="client-base"] .kpi .v,
body[data-app="onboarding"] .stat .num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 8px 0 0;
}
body[data-app="carer-base"] .stat .l,
body[data-app="carer-base"] .stg .l,
body[data-app="client-base"] .kpi .l,
body[data-app="onboarding"] .stat .lab {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted, #6B6580);
  margin: 0;
}

/* Rota fixes the card count per row so the grid does not reflow into a
   different shape at every width. */
body[data-app="carer-base"] .cards,
body[data-app="carer-base"] .pipe,
body[data-app="client-base"] .kpis { gap: 12px; margin-bottom: 20px; }
body[data-app="onboarding"] .statrow { gap: 12px; margin-bottom: 20px; }

/* --- 4.6 Buttons --------------------------------------------------------- */
body[data-app="carer-base"] .btn,
body[data-app="client-base"] .btn,
body[data-app="onboarding"] .btn { padding: 8px 15px; font-size: 12.5px; border-radius: 9px; }
body[data-app="carer-base"] .btn.small,
body[data-app="onboarding"] .btn.sm { padding: 5px 10px; font-size: 11.5px; }

/* --- 4.7 Tables ---------------------------------------------------------- */
/* Rota gives a row room on the side and centres the cell; Carer Base was 5px
   tighter on both axes and top-aligned, which is what made its rows look
   cramped and ragged next to the rota's. */
body[data-app="carer-base"] th,
body[data-app="client-base"] th,
body[data-app="onboarding"] table.grid th { font-size: 10px; letter-spacing: .08em; padding: 10px 17px; }
body[data-app="carer-base"] td,
body[data-app="client-base"] td,
body[data-app="onboarding"] table.grid td { font-size: 13px; padding: 11px 17px; vertical-align: middle; }
/* Client Base sets its own tighter padding on a couple of dense tables. Those
   keep it — this is the default the rest of its rows fall back to. */
body[data-app="client-base"] table.tight th,
body[data-app="client-base"] table.tight td { padding: 9px 13px; }

/* --- 4.8 The rail -------------------------------------------------------- */
body[data-app="carer-base"] .sidebar { width: 236px; }
body[data-app="carer-base"] .main { margin-left: 236px; }
body[data-app="onboarding"] .sidebar { width: 236px; }
body[data-app="onboarding"] .main { margin-left: 236px; }

/* Rota marks the current item with a 16% tint of the accent and keeps the text
   white. Carer Base and Client Base invert it — a solid light bar with dark ink
   — which is the single loudest reason the rails read as different products. */
body[data-app="carer-base"] .nav a.active,
body[data-app="client-base"] .nav a.on {
  background: rgba(223, 37, 94, .16);
  color: #fff;
  font-weight: 600;
}
body[data-app="client-base"] .nav a.on { background: rgba(127, 166, 220, .18); }

/* Onboarding's nav items are square-edged full-bleed rows at 14.5px with a
   border-left marker; every other console uses a 9px-radius pill at 13px. */
body[data-app="onboarding"] .nav a {
  padding: 9px 11px;
  margin: 0 8px;
  border-radius: 9px;
  font-size: 13px;
  border-left: 0;
}
body[data-app="onboarding"] .nav a.active {
  background: rgba(223, 37, 94, .16);
  color: #fff;
}
body[data-app="onboarding"] .nav .section { font-size: 9.5px; letter-spacing: .16em; padding: 15px 19px 6px; }

/* --- 4.9 The three copies of one card ------------------------------------ */
/* .split .s and .chan-split .s are byte-for-byte identical in Carer Base's
   stylesheet, and .reach-split is the same look a third time. All three are the
   metric card under another name, so they get the card the rest of the platform
   uses rather than a fourth variant of it. */
body[data-app="carer-base"] .split .s,
body[data-app="carer-base"] .chan-split .s,
body[data-app="carer-base"] .reach-split .s {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 12px;
}
body[data-app="carer-base"] .split .s .l,
body[data-app="carer-base"] .chan-split .s .l,
body[data-app="carer-base"] .reach-split .s .l {
  order: -1;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted, #6B6580);
  margin: 0;
}
body[data-app="carer-base"] .split .s .n,
body[data-app="carer-base"] .chan-split .s .n,
body[data-app="carer-base"] .reach-split .s .n {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 8px 0 0;
}
body[data-app="carer-base"] .split,
body[data-app="carer-base"] .chan-split,
body[data-app="carer-base"] .reach-split { gap: 12px; margin-bottom: 20px; }

/* --- 4.10 One sign-in screen --------------------------------------------- */
/* Carer Base and Client Base share a host and a Supabase session, so signing in
   to either already signs you in to both. Only the screens differed — a purple
   card with the logo and a pink rule on one side, a flat navy card with neither
   on the other. Client Base takes Carer Base's, which is the better of the two,
   and the accent goes to WAC pink on both: this is the front door, and the front
   door is the brand rather than the console behind it. */
body[data-app="client-base"] .gate {
  background: var(--rail, #16294D);
  background-image: radial-gradient(ellipse 60% 55% at 88% 8%, rgba(223, 37, 94, .30), transparent 70%);
}
body[data-app="client-base"] .gate .card { padding: 38px 36px 34px; }
body[data-app="client-base"] .gate h1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.015em;
  margin: 0 0 5px;
}
body[data-app="client-base"] .signin-logo { height: 30px; width: auto; display: block; }
body[data-app="client-base"] .signin-rule {
  width: 40px; height: 3px; border-radius: 2px;
  background: var(--pink, #DF255E); margin: 20px 0 22px;
}
body[data-app="client-base"] .gate .btn.pri {
  background: var(--pink, #DF255E);
  border-color: var(--pink, #DF255E);
  color: #fff;
}
body[data-app="client-base"] .gate a { color: var(--purple, #35276A); }
body[data-app="client-base"] .signin-foot {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line, #E7E2EE);
  font-size: 11px; line-height: 1.6; color: var(--muted, #6B6580);
}
body[data-app="client-base"] .signin-foot .baton {
  font-family: Georgia, serif; font-style: italic; color: var(--gold, #C9A24B);
}

/* --- 4.11 Rails that can outgrow the window ------------------------------ */
/* Every rail is a fixed-height flex column with overflow:hidden, so once the nav
   is taller than the viewport the items at the bottom are silently clipped —
   no scrollbar, no cue, they are simply not there. The rota was within 18px of
   that before the switch and the sibling-workspace group went in, and a laptop
   at 800px would already have lost the last few.
   Let the nav scroll inside the rail and keep the footer where it is. min-height:0
   is what allows a flex child to shrink below its content in the first place. */
.rail, .sidebar, aside.sidebar { display: flex; flex-direction: column; }
.rail .nav, .sidebar .nav, aside.sidebar .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.rail .railfoot, .sidebar .railfoot { flex: none; }

/* --- 4.12 The lifecycle, as cards, on both bases ------------------------- */
/* Carer Base has always shown its lifecycle on the page as a row of cards you
   click into; Client Base showed the same four stages only as a mode bar in the
   rail. Two controls for one idea, and the page one was the one people found
   first. Client Base now renders the same card row, using the same class names,
   so this block is the shared definition rather than a copy — Carer Base already
   declares .pipe/.stg inline and gets its density from 4.5 above.
   The cards carry data-mode, the same attribute the rail buttons carry, so the
   click is the rail's click and cannot drift from it. */
body[data-app="client-base"] .pipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
body[data-app="client-base"] .stg {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid var(--line, #E7E2EE);
  border-radius: 12px;
  padding: 14px 16px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body[data-app="client-base"] .stg.click { cursor: pointer; transition: box-shadow .15s, transform .15s; }
body[data-app="client-base"] .stg.click:hover { box-shadow: 0 6px 20px -10px rgba(26,26,46,.3); transform: translateY(-1px); }
/* Where you already are is not a destination. It keeps the accent edge the rail
   gives the selected mode, loses the lift, and says so instead of inviting a
   click that would do nothing. */
body[data-app="client-base"] .stg.here {
  border-color: var(--accent, #1F3A6E);
  box-shadow: inset 3px 0 0 var(--accent, #1F3A6E);
  cursor: default;
}
body[data-app="client-base"] .stg.here:hover { box-shadow: inset 3px 0 0 var(--accent, #1F3A6E); transform: none; }
body[data-app="client-base"] .stg.here .go { opacity: 1; color: var(--muted, #6B6580); }
body[data-app="client-base"] .stg .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
body[data-app="client-base"] .stg .n {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800; font-size: 24px; line-height: 1.1;
  letter-spacing: -.025em; margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
body[data-app="client-base"] .stg .l {
  order: -1;
  display: flex; align-items: center; gap: 7px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted, #6B6580); margin: 0;
}
body[data-app="client-base"] .stg .l:before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); flex: none;
}
body[data-app="client-base"] .stg .d { font-size: 11.5px; color: var(--muted, #6B6580); margin-top: 4px; line-height: 1.4; }
body[data-app="client-base"] .stg .own {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px; letter-spacing: .08em; color: var(--muted, #6B6580); flex: none;
}
body[data-app="client-base"] .stg .go {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 11px; color: var(--accent, #1F3A6E); font-weight: 600;
  opacity: 0; transition: opacity .15s;
}
body[data-app="client-base"] .stg.click:hover .go { opacity: 1; }

/* --- 4.13 The messages tab ------------------------------------------------ */
/* Above the workspaces in every rail, because Messages is not a section of the
   app you are in — it is the one queue belonging to the whole platform, and the
   only one where a person is actively waiting on us. Same shape everywhere, so
   it is findable without looking. The count is threads NOT PICKED UP; a badge
   that never reaches zero stops being read within a week. */
.msgtab {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px; padding: 10px 11px;
  border-radius: 10px; text-decoration: none;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 12.5px;
}
.msgtab:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.msgtab .mi { width: 15px; height: 15px; flex: none; display: block; }
.msgtab .mi svg { width: 15px; height: 15px; display: block; }
.msgtab .mt { flex: 1; }
.msgtab .mn {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px;
  font-variant-numeric: tabular-nums; opacity: .55;
}
/* Anything unowned turns it pink. Nothing waiting and it goes quiet, which is
   the only way the pink keeps meaning something. */
.msgtab.hot {
  background: rgba(223, 37, 94, .16);
  border-color: rgba(223, 37, 94, .42);
  color: #fff;
}
.msgtab.hot .mn {
  background: var(--pink, #DF255E); color: #fff; opacity: 1;
  border-radius: 100px; padding: 1px 8px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 600;
}

/* --- 4.13 The shared rail (baton-nav.js) --------------------------------- */
/* One rail for the carer side, drawn by BatonNav.rail() in every console. These
   rules are scoped to .nav.bn and written with enough specificity to beat each
   console's own .nav a / .nav button rules, so the rail looks the same whether
   the page around it is Carer Base, Carer Office or the rota. Stage rows carry
   their colour in --c; the current stage is a filled row, the current tool a
   tinted pill, and anything that leaves the console has an arrow. */
body .nav.bn { padding: 2px 0 8px; }
body .nav.bn .section {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.38); padding: 11px 19px 4px; margin: 0; border: 0;
}
body .nav.bn .section.bn-stagehead { color: rgba(255,255,255,.7); }
body .nav.bn a.bn-item, body .nav.bn a.bn-stage {
  display: flex; align-items: center; gap: 9px;
  margin: 0 8px; padding: 6px 11px; border-radius: 8px; border: 0;
  font-size: 13px; font-weight: 500; line-height: 1.25;
  color: rgba(255,255,255,.62); text-decoration: none; background: none;
}
body .nav.bn a.bn-item:hover, body .nav.bn a.bn-stage:hover { background: rgba(255,255,255,.07); color: #fff; }
body .nav.bn a.bn-item.active { background: rgba(223,37,94,.16); color: #fff; font-weight: 600; }
/* Calling identity — the same row shape as a rail item, but a button. */
body .nav.bn button.bn-dial {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit;
  color: rgba(255,255,255,.72); padding: 7px 12px; border-radius: 8px;
}
body .nav.bn button.bn-dial:hover { background: rgba(255,255,255,.07); color: #fff; }
body .nav.bn button.bn-dial.on { color: #fff; }
body .nav.bn button.bn-dial.on .bn-l::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #3ddc97; margin-right: 7px; vertical-align: middle;
}
body .nav.bn button.bn-dial .bn-dialset {
  margin-left: auto; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold, #C9A24B);
}
body .nav.bn a.bn-home { font-weight: 600; color: rgba(255,255,255,.8); }
body .nav.bn a.bn-stage { padding: 5px 11px; }
body .nav.bn a.bn-stage.on { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
body .nav.bn .bn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #fff); flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
body .nav.bn a.bn-stage.on .bn-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
body .nav.bn .bn-l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .nav.bn .count {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .6;
  background: none; padding: 0; border-radius: 0; color: inherit;
}
body .nav.bn a.active .count, body .nav.bn a.on .count { opacity: .9; }
body .nav.bn .bn-ar { width: 11px; height: 11px; flex: none; opacity: .45; }
body .nav.bn a:hover .bn-ar { opacity: .9; }
body .nav.bn a.out { color: rgba(255,255,255,.55); }

/* --- 4.14 Phones (baton-nav.js draws the top bar) ------------------------ */
/* Below 820px the rail becomes a drawer: hidden off the left edge, opened from a
   menu button in a fixed top bar that also names where you are and carries the
   Messages badge. Choosing anything in the drawer closes it. The three consoles
   lay their rails out differently (fixed, grid column), so these rules pin every
   variant the same way; the main column loses its left margin and gains room for
   the bar. */
.bn-topbar { display: none; }
.bn-only { display: none !important; } /* aside.sidebar { display:flex } outranks a bare class; the phone media rule below re-shows it */
/* Go straight to is a phone affordance. quickAccess() falls back to .rail when a
   console has no phone-only drawer, and on Client Base that rail is visible at
   desktop width — so hide it here and let the 820px rule below re-show it. */
.bn-quick { display: none; }
@media (max-width: 820px) {
  .bn-topbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 120;
    padding: 0 12px 0 8px; background: var(--rail, #1A1533); color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
  }
  .bn-topbar .bn-menu {
    width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  }
  .bn-topbar .bn-menu svg { width: 22px; height: 22px; }
  .bn-topbar .bn-brand { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-right: 6px; text-decoration: none; color: #fff; }
  .bn-topbar .bn-brand img { height: 22px; width: auto; display: block; }
  .bn-topbar .bn-brand .bn-powered { font-size: 9.5px; letter-spacing: .02em; color: rgba(255,255,255,.6); white-space: nowrap; line-height: 1; }
  .bn-topbar .bn-brand .bn-powered b { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: var(--gold, #C9A24B); }
  .bn-topbar .bn-where { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.14); }
  .bn-topbar .bn-where { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .bn-topbar .bn-where b { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bn-topbar .bn-where span { font-size: 11px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bn-topbar .bn-msgs {
    flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #fff;
    padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12.5px; font-weight: 600;
  }
  .bn-topbar .bn-msgs i { font-style: normal; background: var(--pink, #DF255E); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
  .bn-topbar .bn-msgs i:empty { display: none; }

  /* Messages keeps its own phone rail (a filter strip); it gets the drawer via .bn-only below. */
  body .sidebar, body aside.sidebar, body:not([data-app="messages"]) .rail {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: min(300px, 86vw) !important; z-index: 130; margin: 0;
    transform: translateX(-102%); transition: transform .22s cubic-bezier(.2,.7,.3,1);
    overflow-y: auto; box-shadow: 18px 0 50px -20px rgba(0,0,0,.5);
  }
  body.rail-open .sidebar, body.rail-open aside.sidebar, body.rail-open:not([data-app="messages"]) .rail { transform: none; }
  /* a drawer that exists only on phones, for consoles whose desktop rail is not the stage rail */
  .bn-only { display: flex !important; flex-direction: column; background: var(--rail, #1A1533); color: #fff; padding: 14px 8px 18px; }
  .bn-brandblock { padding: 8px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
  .bn-brandblock img { height: 30px; width: auto; display: block; }
  .bn-brandblock .bn-powered { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.55); }
  .bn-brandblock .bn-powered b { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: var(--gold, #C9A24B); }
  .bn-brandblock .bn-switch { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(0,0,0,.28); border-radius: 999px; padding: 4px; }
  .bn-brandblock .bn-switch a { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11.5px; padding: 8px 6px; border-radius: 999px; text-align: center; text-decoration: none; color: rgba(255,255,255,.7); }
  .bn-brandblock .bn-switch a.on { background: rgba(255,255,255,.14); color: #fff; }
  .bn-scrim { position: fixed; inset: 0; background: rgba(26,21,51,.45); z-index: 125; display: none; }
  body.rail-open .bn-scrim { display: block; }

  /* Go straight to: the three screens that get used standing up, at the top of
     the drawer. Phone only — on a desktop the rails already reach all three and
     baton-nav never draws it anywhere it would show. */
  .bn-quick { display: grid; gap: 5px; padding: 4px 14px 14px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08); }
  .bn-quicklab { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 9px;
    letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42);
    margin: 2px 0 4px; }
  .bn-quick a { display: flex; align-items: center; gap: 9px; text-decoration: none;
    background: rgba(255,255,255,.09); color: #fff; border-radius: 10px; padding: 12px 14px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.1; }
  .bn-quick a.on { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  .bn-quick a .bn-qn { font-style: normal; margin-left: auto; background: var(--pink, #DF255E);
    border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
  .bn-quick a .bn-qn:empty { display: none; }

  body .main { margin-left: 0 !important; padding: 74px 14px 40px !important; }
  /* Messages keeps its rail as a strip at the top of the page (filters + who is on
     call); the fixed bar was sitting on top of it. Push the strip under the bar
     and let the main column start straight after it. */
  body[data-app="messages"] .rail { padding-top: 68px !important; }
  body[data-app="messages"] .main { padding-top: 14px !important; }
  body[data-app="rota"] .shell, body[data-app="client-base"] .shell { grid-template-columns: 1fr !important; height: auto !important; min-height: 100vh; }
  body[data-app="rota"] .main, body[data-app="client-base"] .main { overflow: visible !important; }
  /* Client Base on a phone: the top strip stacks (search full width, then the
     buttons), wide tables scroll inside their panel, side-by-side layouts stack. */
  body[data-app="client-base"] .main { padding-top: 58px !important; }
  body[data-app="client-base"] .top { padding: 10px 14px !important; gap: 8px; }
  body[data-app="client-base"] .top .srchwrap, body[data-app="client-base"] .top .search { max-width: none !important; flex: 1 1 100% !important; }
  body[data-app="client-base"] .top .who { margin-left: 0 !important; width: 100%; justify-content: space-between; }
  body[data-app="client-base"] .body, body[data-app="client-base"] .content { padding: 14px 14px 40px !important; }
  body[data-app="client-base"] .split, body[data-app="client-base"] .twocol, body[data-app="client-base"] .sqgrid { grid-template-columns: 1fr !important; }
  body[data-app="client-base"] .kpis, body[data-app="client-base"] .tally { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  body[data-app="client-base"] .panel { overflow-x: auto; }
  body[data-app="client-base"] table { min-width: 560px; }
  body[data-app="client-base"] .chips, body[data-app="client-base"] .filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body[data-app="client-base"] .chips .chip, body[data-app="client-base"] .chips button, body[data-app="client-base"] .filters button { white-space: nowrap; flex: none; }
  body[data-app="client-base"] .ptop { flex-wrap: wrap; }
  body[data-app="client-base"] .ptop .chips { flex: 1 1 100%; margin-top: 8px; }
  body[data-app="client-base"] .top .who { order: 3; }
  body[data-app="client-base"] .top > .btn, body[data-app="client-base"] .top .newwrap { order: 2; flex: 1 1 auto; }
  body[data-app="client-base"] .rail .brand { display: none; }
  /* the preview / live ribbons sit under the bar on a phone */
  .ribbon { top: 58px !important; }

/* The band is drawn only on a phone, but a default here means a band left in
   the page by a resize can never appear on a desktop. */
.mband { display: none; }

  /* ---- the phone band and cards, shared -----------------------------------
     Drawn by BatonNav.phone(). The band is the last inch of the dark bar above
     it, not a card under it: same ground, no seam, bled to both screen edges,
     and the white page begins below the pink line. That is the rule on every
     screen, and this is the one copy of it. */
  .mband { display: block; background: #1A1533; border-bottom: 3px solid #DF255E;
    padding: 8px 13px 11px; margin: -16px -14px 14px; }
  .mb-who { text-align: right; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px;
    color: var(--gold, #C9A24B); letter-spacing: .03em; line-height: 1.2; margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-counts { display: grid; }
  .mb-c { display: block; min-width: 0; width: 100%; padding: 2px 6px 2px 0; border: 0;
    border-right: 1px solid rgba(255,255,255,.10); background: none; font: inherit; text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mb-c:last-child { border-right: 0; padding-right: 0; }
  .mb-c[disabled] { cursor: default; opacity: .72; }
  .mb-c:focus-visible { outline: 2px solid var(--pink, #DF255E); outline-offset: 2px; border-radius: 4px; }
  .mb-c b { display: block; font-size: 17px; font-weight: 700; line-height: 1; color: #fff;
    font-family: 'Poppins', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-c em { display: block; font-style: normal; font-family: 'Poppins', sans-serif; font-size: 8px;
    letter-spacing: .04em; text-transform: uppercase; color: #9E96B8; font-weight: 600; line-height: 1.2;
    margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .tcards, .tcards tbody, .tcards tr, .tcards td, .tcards th { display: block; }
  .tcards thead, .tcards colgroup, .tcards .thead-row { display: none; }
  .tcards { border: 0; }
  .tcards tr { border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff);
    padding: 11px 13px; margin-bottom: 8px; }
  .tcards tr:last-child { margin-bottom: 0; }
  .tcards td, .tcards th { border: 0 !important; padding: 3px 0 !important; width: auto !important; }
  .tcards td:first-child { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px;
    color: var(--ink); padding-bottom: 5px !important; }
  .tcards td[data-l]:not(:first-child) { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
  .tcards td[data-l]:not(:first-child)::before { content: attr(data-l); flex: 0 0 38%;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 8.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); line-height: 1.5; }
  .tcards td:empty { display: none; }
  /* Who it is, the three facts that place them, and whatever you can do about it.
     Giving every column its own line made one Follow-ups card 357px and the page
     120,000px — readable and unusable at the same time. The columns in between
     are not lost: the row still opens the record, where all of them are. */
  .tcards td:nth-child(n+5):not(:last-child) { display: none; }
  .tcards td:last-child:has(button, a, select, input) { display: flex; gap: 8px;
    flex-wrap: wrap; align-items: center; padding-top: 8px !important; }
  .tcards td:last-child:has(button, a, select, input)::before { display: none; }
  .tcards td .btn, .tcards td select { width: 100%; }
  /* Full width is right for a single control on its own line, and wrong for a row
     of them: four actions each taking the full width stacked into 149px, half the
     card. In the actions cell they sit side by side and wrap when they run out. */
  .tcards td:last-child:has(button, a, select, input) .btn,
  .tcards td:last-child:has(button, a, select, input) select,
  .tcards td:last-child:has(button, a, select, input) a { width: auto; flex: 0 1 auto; }

  /* ---- Carer Base ----------------------------------------------------------
     Its widest table was 992px in a 390px screen and two of its screens scrolled
     the whole page sideways, which the Carer Office never did because the guard
     was written into that console rather than here. Here is where it belongs. */
  /* On the root element as well as the body. Hiding it on the body alone left
     the document itself scrollable, which is how a seven-button filter row
     running to 692px still dragged the whole page sideways. */
  html { max-width: 100%; overflow-x: hidden; }
  body[data-app="carer-base"] { max-width: 100%; overflow-x: hidden; }
  body[data-app="carer-base"] .bx-display,
  body[data-app="carer-base"] .bx-head,
  body[data-app="carer-base"] .hero { display: none; }
  /* Hidden because the band has taken it, not because of which console it is on.
     A row the band could not fully represent keeps showing. */
  .statrow.mb-replaced, .bx-statrow.mb-replaced { display: none; }
  body[data-app="carer-base"] .bx-panel { border-radius: 0; border-left: 0; border-right: 0;
    margin-left: -14px; margin-right: -14px; overflow: visible; }
  /* 260px of minimum width on a search box is most of a phone. */
  body[data-app="carer-base"] .bx-search { min-width: 0; flex: 1 1 100%; }
  body[data-app="carer-base"] .bx-filters { flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body[data-app="carer-base"] .bx-filters::-webkit-scrollbar { display: none; }
  body[data-app="carer-base"] .bx-filters > * { flex: none; }
  /* Everything, Hot leads, Applied to us, Overdue, Due today … seven of them in a
     row that ran to 692px. A strip you thumb along, like every other filter row. */
  body[data-app="carer-base"] .bands { display: flex; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px 2px; }
  body[data-app="carer-base"] .bands::-webkit-scrollbar { display: none; }
  body[data-app="carer-base"] .bands > * { flex: none; white-space: nowrap; }

  /* The rota's desktop chrome, hidden from the stylesheet rather than by script.
     rota-mobile.js is the last file on the page, so anything it hides has
     already been handed to the browser once — you saw the headline for a frame
     on every load. A rule here applies to the first paint, so there is nothing
     to flash. The script still owns swapping the board itself. */
  body[data-app="rota"] .head,
  body[data-app="rota"] .kpis,
  body[data-app="rota"] .views,
  body[data-app="rota"] .clf { display: none !important; }

  /* stat rows stack to two-up; the hero shrinks; the rota's week grid scrolls sideways */
  body .pipe { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  body .statrow { grid-template-columns: 1fr 1fr !important; }
  body[data-app="rota"] .kpis { grid-template-columns: 1fr 1fr !important; }
  body .hero, body h1.display, body .page-head h1 { font-size: 24px !important; line-height: 1.15; }
  body .drawer { width: 100vw !important; max-width: 100vw !important; }
}

/* the Sling feed line in the rail (baton-nav.js feedLine) */
body .nav.bn .bn-feed { display: flex; align-items: center; gap: 8px; margin: 10px 19px 4px; font-size: 11px; color: rgba(255,255,255,.45); }
body .nav.bn .bn-feed .bn-dot { width: 7px; height: 7px; background: var(--green, #1F8A5B); box-shadow: 0 0 0 0 rgba(31,138,91,.55); animation: bn-pulse 2.4s ease-out infinite; }
@keyframes bn-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,91,.55); } 70% { box-shadow: 0 0 0 6px rgba(31,138,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,91,0); } }
@media (prefers-reduced-motion: reduce) { body .nav.bn .bn-feed .bn-dot { animation: none; } }
body .nav.bn .bn-feed.stale { color: #fff; font-weight: 600; }
body .nav.bn .bn-feed.stale .bn-dot { background: var(--pink, #DF255E); animation: none; box-shadow: none; }

/* §4.15 Stage screens — the one look for a list of people and a record.
   Carer Office wrote these first (Active workers, Lapsed); Carer Base's
   Prospects list uses the same set so every stage reads the same. Prefixed
   bx- because both consoles already have .panel/.chip/.av of their own. */
.bx-hero { margin: 0 0 20px; }
.bx-kicker { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bx-kicker::before { content: ""; width: 22px; height: 2px; background: var(--purple); flex: none; }
.bx-display { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; color: var(--ink); }
.bx-display .bx-serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: var(--pink); letter-spacing: 0; }
.bx-sub { color: var(--muted); font-size: 13.5px; max-width: 76ch; margin: 0; text-wrap: pretty; }
.bx-statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.bx-stat { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: box-shadow .18s; box-shadow: 0 1px 2px rgba(26,26,46,.05), 0 8px 24px -18px rgba(26,26,46,.18); }
.bx-stat:hover { box-shadow: 0 2px 4px rgba(26,26,46,.06), 0 14px 34px -18px rgba(26,26,46,.26); }
.bx-stat.on { border: 2px solid var(--purple); padding: 15px 17px 13px; }
.bx-stat .lab { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.bx-stat .lab i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--lilac); display: inline-block; }
.bx-stat .num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; margin: 6px 0 2px; letter-spacing: -.02em; color: var(--ink); }
.bx-stat .note { font-size: 12.5px; color: var(--muted); }
.bx-panel { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(26,26,46,.05), 0 8px 24px -18px rgba(26,26,46,.18); }
.bx-phead { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; flex-wrap: wrap; }
.bx-phead h2 { font-size: 18px; margin: 0; }
.bx-phead .n { color: var(--muted); font-size: 13.5px; }
.bx-phead .grow { flex: 1; }
.bx-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; min-width: 260px; background: #fff; }
.bx-search input { border: none; outline: none; flex: 1; background: transparent; font: inherit; }
.bx-filters { display: flex; gap: 8px; padding: 0 22px 14px; flex-wrap: wrap; align-items: center; }
.bx-fsel { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 10px; font-size: 13.5px; color: var(--ink); font-family: inherit; }
table.bx-grid { width: 100%; border-collapse: collapse; }
table.bx-grid th { text-align: left; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); padding: 10px 22px; border-bottom: 1px solid var(--line); background: var(--surface, #F6F5FA); }
table.bx-grid td { padding: 13px 22px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13.5px; }
table.bx-grid tr:last-child td { border-bottom: none; }
table.bx-grid tr.row { cursor: pointer; }
table.bx-grid tr.row:hover { background: var(--tint, rgba(53,39,106,.04)); }
.bx-who { display: flex; align-items: center; gap: 12px; }
.bx-av { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; color: #fff; background: var(--purple); }
.bx-who .nm { font-weight: 600; }
.bx-who .rf { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--soft); margin-top: 1px; }
.bx-chip { display: inline-block; background: var(--pill, rgba(53,39,106,.09)); color: var(--purple); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.bx-chip.warn { background: var(--amber-bg, rgba(201,84,44,.12)); color: var(--amber, #C9542C); }
.bx-chip.bad { background: var(--red-bg, rgba(223,37,94,.11)); color: var(--red, #DF255E); }
.bx-chip.ok { background: var(--green-bg, rgba(31,138,91,.12)); color: var(--green, #1F8A5B); }
.bx-chip.gold { background: rgba(201,162,75,.16); color: #8A6A1E; }
.bx-chip.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .04em; }
.bx-chev { color: var(--soft); font-size: 18px; }
.bx-empty { padding: 34px 22px; text-align: center; color: var(--soft); }
.bx-crumb { font-size: 13.5px; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--purple); text-decoration: none; font-weight: 600; }
.bx-rechead { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.bx-rechead .bx-av { width: 62px; height: 62px; border-radius: 16px; font-size: 20px; }
.bx-rechead h1 { font-family: 'Poppins', sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.bx-rechead h1 .rf { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--soft); font-weight: 400; }
.bx-rechead .meta { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.bx-rechead .grow { flex: 1; min-width: 240px; }
.bx-btnrow { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.bx-infogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 22px; padding: 4px 22px 18px; }
.bx-infogrid .f .k { font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 3px; }
.bx-infogrid .f .v { font-size: 14.5px; word-break: break-word; }
.bx-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.bx-sec { padding: 0 22px 18px; }
.bx-sec h3 { font-size: 15px; margin: 14px 0 8px; }
.bx-statrow.six { grid-template-columns: repeat(6, 1fr); }
.bx-statrow.six .bx-stat .num { font-size: 26px; }
.bx-stat:where(a) { display: block; }
@media (max-width: 1100px) { .bx-statrow, .bx-infogrid { grid-template-columns: repeat(2, 1fr); } .bx-statrow.six { grid-template-columns: repeat(3, 1fr); } .bx-two { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bx-statrow, .bx-statrow.six { grid-template-columns: 1fr 1fr; gap: 10px; } .bx-display { font-size: 23px; } table.bx-grid th, table.bx-grid td { padding: 11px 14px; } }