/* ============================================================
   LISTO · Client hub
   The structure of the CRM (navigation at the side, page header,
   view switch, counts that filter, one table, tabs, cards) in
   Listo's colors and fonts. Brand tokens come from
   staffcom/packages/ui/tailwind.config.js.
   Kept minimal: small plain components, one line per table cell,
   flat surfaces, one accent.
   ============================================================ */

:root {
  --ink: #17083F;
  --ink2: #4E4773;       /* secondary text */
  --ink3: #6F6A91;       /* muted text: 4.9:1 on white */
  --ink4: #A6A2BE;       /* decoration only, never text */
  --bg: #FAFBFF;
  --card: #FFFFFF;
  --line: #E1E4EC;       /* card and section borders */
  --hair: #EEF0F5;       /* dividers between rows */
  --edge: #C8CCD9;       /* control edges: have to read against white */
  --wash: #F6F7FF;       /* hover */
  --mute: #F1F2F8;       /* neutral fills: tracks, neutral badges */

  --indigo: #3205BE;     /* the one accent */
  --indigo-d: #280498;
  --violet: #6938FA;     /* chart marks (brand indigo is too dark for the palette checks) */
  --violet-l: #B49CFC;
  --lav: #D7DCFF;
  --lav-l: #ECEEFF;
  --coral: #FA6464;      /* only for what needs attention */
  --coral-d: #B8272E;
  --coral-l: #FFE9E7;
  --sun: #FFD778;        /* only for pilots and notice periods */
  --sun-d: #6B4700;
  --sun-l: #FFF1CF;
  --ok: #269973;         /* only for live */
  --ok-d: #06734E;
  --ok-l: #DDF3EC;

  --display: 'Bricolage Grotesque', 'Mulish', sans-serif;   /* page titles only */
  --font: 'Mulish', system-ui, sans-serif;
  --side: 208px;         /* the navigation at the side */
  --top: 52px;           /* the same navigation once it folds into a bar */
  --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
svg { display: block; }
b, strong { font-weight: 600; }
small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink3); }
.ic { width: 16px; height: 16px; flex: none; }
.nil, .muted { color: var(--ink3); }
.bad { color: var(--coral-d); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ SHELL ============================ */
/* The navigation sits at the side, like the CRM's */
.side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--side); display: flex; flex-direction: column; padding: 18px 10px 10px; border-right: 1px solid var(--line); background: var(--card); }
.logo { display: flex; align-items: center; gap: 10px; padding: 2px 10px; color: var(--indigo); text-decoration: none; border-radius: 6px; }
.logo svg { width: 76px; height: 20px; }
.logo .mark { display: none; }
.logo span { padding-left: 10px; border-left: 1px solid var(--line); font-size: 12.5px; font-weight: 600; line-height: 16px; color: var(--ink3); white-space: nowrap; }
.nav { display: grid; gap: 2px; margin-top: 22px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink2); text-decoration: none; transition: background .15s, color .15s; }
.nav a .ic { color: var(--ink3); transition: color .15s; }
.nav a:hover { background: var(--wash); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--lav-l); color: var(--indigo); }
.nav a[aria-current="page"] .ic { color: var(--indigo); }
.logo:focus-visible, .nav a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.sample { margin-top: auto; padding: 10px; font-size: 12px; line-height: 1.45; color: var(--ink3); pointer-events: none; }
.sample b { display: flex; align-items: center; gap: 7px; color: var(--ink2); }
.sample b::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px rgba(107, 71, 0, .3); }
.sample span { display: block; margin-top: 2px; }

main { margin-left: var(--side); outline: none; }
.page, .dhead-in, .venue .content { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.page, .venue .content { display: grid; gap: 16px; padding-bottom: 64px; }
.page { container: page / inline-size; padding-top: 28px; }   /* the tables below answer to its width */
.page > *, .venue .content > * { min-width: 0; }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.phead h1 { font: 700 24px/1.25 var(--display); letter-spacing: -.015em; }
.phead p { margin-top: 2px; font-size: 13px; color: var(--ink3); }
.hint { font-size: 13px; color: var(--ink3); }
.results { display: grid; gap: 12px; }

/* ============================ PRIMITIVES ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink);
  font: 600 13.5px/1 var(--font); white-space: nowrap; text-decoration: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn .ic { width: 15px; height: 15px; }
.btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.btn.primary { background: var(--indigo); color: #fff; }
.btn.primary:hover { background: var(--indigo-d); }
.btn.outline { background: #fff; border-color: var(--edge); }
.btn.outline:hover { border-color: var(--indigo); color: var(--indigo); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.block { width: 100%; height: 36px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.link { font-size: 13px; font-weight: 600; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }

/* Who the client is: a small tag on that party */
.tag { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--lav-l); color: var(--indigo); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: 1px; }
.tag.pilot { background: var(--sun-l); color: var(--sun-d); }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.badge.ok   { background: var(--ok-l); color: var(--ok-d); }
.badge.warn { background: var(--sun-l); color: var(--sun-d); }
.badge.bad  { background: var(--coral-l); color: var(--coral-d); }
.badge.neu  { background: var(--mute); color: var(--ink2); }
.badge.outline { border-color: var(--line); color: var(--ink2); }
/* The stage is a dot and a word */
.stage { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); }
.dot.pri { background: var(--indigo); }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--coral); }

.card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-h h2 { font-size: 14px; font-weight: 700; line-height: 1.4; }
.card-h > span:not(.badge):not(.stage) { font-size: 12.5px; color: var(--ink3); text-align: right; }
.card-h .stage { font-size: 13px; }
.card-f { margin-top: 16px; }
.empty { padding: 36px 24px; border: 1px dashed var(--edge); border-radius: 10px; background: var(--card); text-align: center; font-size: 13px; color: var(--ink3); }
.empty .ic { width: 26px; height: 26px; margin: 0 auto 10px; stroke-width: 1.5; color: var(--ink4); }
.empty b { display: block; margin-bottom: 2px; font-size: 14px; color: var(--ink); }
.empty .btn { margin-top: 14px; }

.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.span2 { grid-column: span 2; display: grid; gap: 16px; min-width: 0; }
.col { display: grid; gap: 16px; min-width: 0; }

/* The form's own progress, step by step: done, the step in progress, the rest */
.rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.rail i { height: 6px; border-radius: 3px; background: var(--mute); }
.rail i.done { background: var(--indigo); }
.rail i.now { background: var(--coral); }

/* Plain text tabs: the views of the list, and the parts of a venue */
.tabs { display: flex; gap: 22px; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > * {
  flex: none; position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0; border: 0;
  background: none; color: var(--ink3); font: 600 13.5px/1 var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .15s;
}
.tabs > *:hover { color: var(--ink); }
.tabs > *:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: 6px; }
.tabs > *::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--indigo); opacity: 0; transition: opacity .15s; }
.tabs > [aria-selected="true"] { color: var(--ink); }
.tabs > [aria-selected="true"]::after { opacity: 1; }

/* ============================ VENUES ============================ */
/* Counts that filter the list, and the search next to them */
.fbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink2); font: 600 13px/1 var(--font);
  cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s, border-color .15s, color .15s;
}
.fchip em { font-style: normal; font-weight: 400; color: var(--ink3); font-variant-numeric: tabular-nums; transition: color .15s; }
.fchip.bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.fchip:hover { border-color: var(--edge); color: var(--ink); }
.fchip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.fchip[aria-pressed="true"] { border-color: var(--indigo); background: var(--lav-l); color: var(--indigo); }
.fchip[aria-pressed="true"] em { color: var(--indigo); }
.searchbox { position: relative; display: block; }
.searchbox .ic { position: absolute; left: 10px; top: 8px; color: var(--ink3); pointer-events: none; }
.searchbox input { width: 240px; padding-left: 32px; }

.input {
  width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 8px;
  background: #fff; color: var(--ink); font: 400 13.5px/1 var(--font);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink3); }
.input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(50, 5, 190, .12); }
.input:disabled { background: var(--mute); color: var(--ink3); }
.input.bad, .tokens.bad { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(250, 100, 100, .18); }
select.input { padding-right: 28px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6A91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 15px; }

/* One table for every view: fixed columns, one line per cell (two for the venue), the client as a tag on its party */
.tablecard { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.tbl { --cols: minmax(186px, 1.5fr) minmax(134px, 1fr) minmax(166px, 1.15fr) minmax(132px, 1fr) minmax(138px, 1fr) 86px minmax(136px, .9fr) minmax(136px, .95fr); }
.tbl.tree { --cols: minmax(210px, 1.6fr) minmax(134px, 1fr) minmax(166px, 1.15fr) minmax(132px, 1fr) minmax(138px, 1fr) 86px minmax(136px, .9fr) minmax(136px, .95fr); }   /* its venues are indented */
.tbl.teams { --cols: minmax(168px, 1.2fr) minmax(178px, 1.4fr) minmax(130px, 1fr) minmax(166px, 1.15fr) minmax(138px, 1fr) 86px minmax(136px, .9fr) minmax(136px, .95fr); }
.tr { display: grid; grid-template-columns: var(--cols); align-items: center; min-height: 52px; border-bottom: 1px solid var(--hair); color: inherit; font-size: 13.5px; text-decoration: none; transition: background .15s; }
.tbl > .tr:last-child, .grp:last-child .grp-b .tr:last-child { border-bottom: 0; }
.tr > span { min-width: 0; padding: 7px 8px; }
.tr > span:first-child { padding-left: 16px; }
.tr > span:last-child { padding-right: 16px; }
.tr.th { min-height: 36px; border-bottom-color: var(--line); font-size: 12px; font-weight: 600; color: var(--ink3); }
.tr.th > span { padding-top: 0; padding-bottom: 0; white-space: nowrap; }
a.tr:hover { background: var(--wash); }
a.tr:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.c-venue b, .c-venue small, .c-pty, .c-con, .c-since, .c-stage small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-lic { display: flex; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-lic > span { display: inline-flex; align-items: center; gap: 3px; }
.c-lic .ic { width: 13px; height: 13px; color: var(--ink3); }
.c-lic .bad .ic { color: var(--coral-d); }
.c-venue b, .c-team b { display: block; font-size: 14px; }
.c-team { display: flex; align-items: center; }
.c-team b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-team .tag { flex: none; }
.c-stage small { margin-top: 1px; }
.c-stage small.bad { font-weight: 600; color: var(--coral-d); }

/* By operator, by concessionaire: the same rows, folded under the organization they belong to */
.grp-h {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--hair);
  background: var(--card); color: inherit; font: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s;
}
.grp:last-child > .grp-h[aria-expanded="false"] { border-bottom: 0; }
.grp-h:hover { background: var(--wash); }
.grp-h:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.grp-h > .ic { width: 14px; height: 14px; color: var(--ink3); transition: transform .2s; }
.grp-h[aria-expanded="true"] > .ic { transform: rotate(90deg); }
.grp-h b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-h small { flex: none; }
.grp-s { flex: none; margin-left: auto; font-size: 12.5px; color: var(--ink3); white-space: nowrap; }
.grp-b .tr { background: #FCFCFF; }
.grp-b .tr > span:first-child { padding-left: 40px; }

/* ============================ VENUE ============================ */
.dhead { border-bottom: 1px solid var(--line); background: var(--card); }
.dhead-in { padding-top: 18px; }
.back { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; padding: 2px 8px 2px 2px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink3); text-decoration: none; transition: color .15s; }
.back .ic { width: 14px; height: 14px; }
.back:hover { color: var(--indigo); }
.back:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.dhead-r { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 6px; }
.dhead-t { min-width: 0; }
.dhead-n { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.dhead-n h1 { font: 700 24px/1.25 var(--display); letter-spacing: -.015em; }
.dhead-n .stage { font-size: 13px; font-weight: 600; }
.dhead-m { margin-top: 2px; font-size: 13px; color: var(--ink3); }
.dhead-a { flex: none; display: flex; gap: 8px; }
/* Everyone involved, by role, the way the table lists them */
.parties { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 16px; }
.parties dt { font-size: 12px; line-height: 1.4; color: var(--ink3); }
.parties dd { font-weight: 600; }
.dhead .tabs { margin-top: 16px; box-shadow: none; }
.venue .content { padding-top: 20px; }

.alert { display: flex; gap: 10px; padding: 10px 14px; border: 1px solid #FFD5D1; border-radius: 10px; background: #FFF6F5; font-size: 13.5px; }
.alert .ic { margin-top: 2px; color: var(--coral-d); }
.alert p + p { margin-top: 2px; }

.list > * { padding: 9px 0; border-top: 1px solid var(--hair); }
.list > *:first-child { padding-top: 0; border-top: 0; }
.list > *:last-child { padding-bottom: 0; }
.vlink { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; color: inherit; font-size: 13.5px; text-decoration: none; }
.vlink b { transition: color .15s; }
.vlink:hover b { color: var(--indigo); }
.vlink:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fig b { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fig span { display: block; font-size: 12.5px; color: var(--ink3); }
.lead { font-weight: 600; }
.lead.bad { color: var(--coral-d); }

/* Contact, dates and links, side by side */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.facts dt { font-size: 12px; line-height: 1.4; color: var(--ink3); }
.facts dd { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts dd small, .facts .nil { font-weight: 400; }

/* ---------- onboarding ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
/* the target date, counted down */
.count h2 { font-size: 12.5px; font-weight: 600; color: var(--ink3); }
.count b { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.count.late b { color: var(--coral-d); }
.count p { margin-top: 4px; font-size: 13px; color: var(--ink3); }
/* who has the form */
.recips { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: 13px; }
/* the steps, done or not, without what was typed */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 14px; font-size: 13px; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--hair); color: var(--ink3); }
.steps li:nth-child(-n + 2) { border-top: 0; }
.steps li i { width: 20px; font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink4); }
.steps li em { margin-left: auto; font-style: normal; font-size: 12px; }
.steps li.done { color: var(--ink); }
.steps li.done em { color: var(--ok-d); }
.steps li.now { color: var(--ink); }
.steps li.now em { color: var(--indigo); font-weight: 600; }
/* the brand as it was sent */
.logos { display: flex; flex-wrap: wrap; gap: 12px; }
.logo-tile { width: 196px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.logo-tile.dark { background: #1E1B3A; border-color: #1E1B3A; }
.logo-tile img { display: block; width: 100%; height: 48px; object-fit: contain; }
.logo-tile figcaption { margin-top: 10px; font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-tile.dark figcaption { color: var(--lav); }
.palette { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 16px; }
.swatch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.swatch i { flex: none; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(23, 8, 63, .14); }
.swatch small { font-size: 11.5px; }
.socials { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 13px; color: var(--ink3); }
/* every field as it was typed, folded away */
.raw { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.raw summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; list-style: none; cursor: pointer; }
.raw summary::-webkit-details-marker { display: none; }
.raw summary .ic { width: 14px; height: 14px; color: var(--ink3); transition: transform .2s; }
.raw[open] summary .ic { transform: rotate(90deg); }
.raw summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; border-radius: 10px; }
.raw-b { display: grid; gap: 16px; padding: 4px 20px 20px; }
.raw-b h3 { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.raw-b h3 i { display: inline-block; width: 26px; font-style: normal; font-size: 12px; font-weight: 400; color: var(--ink3); font-variant-numeric: tabular-nums; }
.raw-b dl { display: grid; gap: 3px; font-size: 13px; }
.raw-b dl > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
.raw-b dt { color: var(--ink3); }
.raw-b dd { overflow-wrap: anywhere; }
.prog-l { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--ink3); }
.say { margin-top: 14px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* The answers read like the form: one row per step */
.rows { font-size: 13.5px; }
.rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--hair); }
.rows > div:first-child { padding-top: 0; border-top: 0; }
.rows > div:last-child { padding-bottom: 0; }
.rows dt { color: var(--ink3); }
.rows dt i { display: inline-block; width: 26px; font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.rows dd { min-width: 0; overflow-wrap: anywhere; }
.rows dd p + p, .rows dd p + .chips, .rows dd .chips + p { margin-top: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips .badge em { margin-left: 4px; font-style: normal; font-weight: 400; color: var(--ink3); }
.reqs li { display: flex; align-items: center; gap: 8px; }
.reqs li + li { margin-top: 4px; }
.reqs .badge { min-width: 70px; justify-content: center; }

.plan { font-size: 13.5px; }
.plan li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair); }
.plan li.skip { color: var(--ink3); }
.plan li.skip b { font-weight: 400; }
.plan li em { font-style: normal; font-size: 12px; color: var(--ink3); }
.plan li:first-child { padding-top: 0; border-top: 0; }
.plan li span { color: var(--ink3); }
.plan li b small { font-weight: 400; }
.st { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--edge); border-radius: 50%; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.st .ic { width: 10px; height: 10px; stroke-width: 3; }
.plan li.doing .st { border-color: var(--indigo); border-top-color: transparent; animation: spin .6s linear infinite; }
.plan li.done .st { background: var(--ok); border-color: var(--ok); color: #fff; }

.events { position: relative; padding-left: 16px; font-size: 13.5px; }
.events::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.events li { position: relative; padding-bottom: 10px; }
.events li:last-child { padding-bottom: 0; }
.events li::before { content: ""; position: absolute; left: -16px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink4); }
.events li:first-child::before { background: var(--indigo); border-color: var(--indigo); }
.events b { display: block; }

/* ---------- usage ---------- */
.signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; }
.sig h3 { font-size: 12.5px; font-weight: 400; color: var(--ink3); }
.sig strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 1px 0 3px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.sig strong.bad { color: var(--coral-d); }
.delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.delta.good { color: var(--ok-d); }
.delta.worse { color: var(--coral-d); }
.sig p { font-size: 12.5px; line-height: 1.45; color: var(--ink3); }
.sig .badge { margin-top: 7px; }

.block + .block { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hair); }
.bhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bhead h3 { font-size: 13.5px; font-weight: 600; }
.legend { margin-left: auto; display: flex; gap: 14px; font-size: 12.5px; color: var(--ink3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.def { margin-top: 2px; font-size: 12.5px; color: var(--ink3); }
.block .figs { display: flex; gap: 32px; margin: 12px 0 14px; }
.plot { position: relative; height: 88px; margin-left: 38px; }
.gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--hair); }
.gl.base { border-top-color: var(--edge); }
.gl em { position: absolute; right: 100%; top: -7px; margin-right: 8px; font: normal 400 11px/14px var(--font); color: var(--ink3); font-variant-numeric: tabular-nums; }
.pcols { position: absolute; inset: 0; display: flex; }
.pcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; border-radius: 4px 4px 0 0; }
.pcol i { width: min(12px, 62%); min-height: 2px; background: var(--violet); transition: opacity .12s; }
.pcol i:first-child { border-radius: 3px 3px 0 0; }
.plot.guests .s2 { background: var(--violet-l); }
.plot.reqs .s2 { background: var(--coral); }
.charts.hov .pcol:not(.hot) i { opacity: .4; }
.pcol.hot { background: var(--wash); }
.xax { display: flex; height: 14px; margin: 6px 0 0 38px; }
.xax span { flex: 1; position: relative; }
.xax em { position: absolute; left: 50%; transform: translateX(-50%); font: normal 400 11px/14px var(--font); color: var(--ink3); white-space: nowrap; }
.xax span:last-child em { left: auto; right: 0; transform: none; }
/* the same requests chart, smaller, on the overview */
.charts.mini { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.charts.mini .plot { height: 72px; margin-top: 14px; }

/* ---------- contract ---------- */
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sec-h h2 { font-size: 15px; font-weight: 700; line-height: 1.4; }
.sec-h p { font-size: 13px; color: var(--ink3); }
.ctop { display: flex; align-items: flex-start; gap: 16px; }
.ctop .grow { flex: 1; min-width: 0; }
.ctop h3 { margin-top: 8px; font-size: 14px; font-weight: 700; }
.ctop p { font-size: 13px; color: var(--ink3); }
.ctop .lead { font-size: 14px; color: var(--ink); }
.term { position: relative; height: 6px; margin: 16px 0 7px; border-radius: 3px; background: var(--lav); }
.term .past { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 3px; background: var(--violet); }
.term .notice { position: absolute; right: 0; top: 0; bottom: 0; width: calc(var(--n) * 100%); border-radius: 0 3px 3px 0; background: var(--sun); }
.term.due .notice { background: var(--coral); }
.term .now { position: absolute; left: calc(var(--p) * 100%); top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.term-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink3); }
.lic { margin-top: 16px; }
.lic-h { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; font-size: 12px; color: var(--ink3); }
.lic-r { display: grid; grid-template-columns: 16px 60px minmax(0, 1fr) 62px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.lic-r:last-child { padding-bottom: 0; }
.lic-r .ic { color: var(--ink3); }
.lic-r .n { text-align: right; color: var(--ink3); font-variant-numeric: tabular-nums; }
.lic-r .n b { color: var(--ink); }
.lic-r.over .n b { color: var(--coral-d); }
.meter { display: block; height: 4px; border-radius: 2px; background: var(--lav); overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 2px; background: var(--violet); }
.meter.over { background: var(--coral-l); }
.meter.over i { background: var(--coral); }
.fine { margin-top: 12px; font-size: 12.5px; color: var(--ink3); }
.drop-on { border-color: var(--indigo) !important; box-shadow: 0 0 0 3px rgba(50, 5, 190, .14) !important; }

.attach-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.attach {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px dashed var(--edge); border-radius: 8px; background: #fff; color: var(--ink2);
  font: 600 13px/1 var(--font); white-space: nowrap;
  cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .15s, color .15s;
}
.attach .ic { width: 14px; height: 14px; }
.attach:hover { border-color: var(--indigo); color: var(--indigo); }
.attach:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pdf { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pdf a { min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; color: var(--indigo); font-size: 13px; font-weight: 600; text-decoration: none; }
.pdf a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pdf a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.pdf a .ic { width: 14px; height: 14px; }
.pdf a span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf a em { flex: none; font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink3); }

/* ============================ CONTRACTS ============================ */
.ktable { --kc: 170px 196px 136px minmax(160px, 1fr) 146px 132px; }
.kthead, .krow { display: grid; grid-template-columns: var(--kc); align-items: center; }
.kthead { height: 40px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink3); }
.kthead > span, .krow > * { min-width: 0; padding: 0 8px; }
.kthead > span:first-child, .krow > :first-child { padding-left: 16px; }
.krow { position: relative; min-height: 52px; border-bottom: 1px solid var(--hair); font-size: 13.5px; transition: background .15s; }
.krow:last-child { border-bottom: 0; }
.krow b, .krow small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krow small.bad { color: var(--coral-d); font-weight: 600; }
.k-client { align-self: stretch; display: flex; flex-direction: column; justify-content: center; color: inherit; text-decoration: none; }
.k-client b { font-size: 14px; transition: color .15s; }
.k-client:hover b { color: var(--indigo); }
.k-client:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.k-lic { display: flex; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.k-lic .ic { width: 13px; height: 13px; color: var(--ink3); }
.k-lic span { display: inline-flex; align-items: center; gap: 3px; min-width: 32px; }
.k-time { position: relative; align-self: stretch; padding: 0 !important; margin: 0 12px; }
.k-time .tk { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.k-time .today { position: absolute; z-index: 2; top: 0; bottom: 0; width: 1px; background: var(--ink); }
/* Two lines inside the header: the Today flag on top, the dates under it, so they never touch */
.kthead .k-time span { position: absolute; top: 23px; transform: translateX(-50%); font-size: 11px; font-weight: 400; line-height: 1; white-space: nowrap; }
.kthead .k-time span.t { top: 5px; z-index: 3; padding: 2px 6px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600; }
.kbar { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 5px; background: var(--lav); }
.kbar .el { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 0 0 5px; background: var(--violet-l); }
.kbar .nt { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 0 5px 5px 0; background: var(--sun); }
.kbar.due .nt { background: var(--coral); }
.kbar.cut-l, .kbar.cut-l .el { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.kbar.cut-r, .kbar.cut-r .nt { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kbar.pilot { height: 6px; margin-top: -3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #EDB53A 0 6px, transparent 6px 10px); }
.krow.none .k-none { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; color: var(--ink3); }

/* ============================ DIALOGS AND FORMS ============================ */
.dlg { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 20px 50px rgba(23, 8, 63, .24); overflow: auto; }
.dlg[open] { animation: fade .15s ease-out; }
.dlg::backdrop { background: rgba(23, 8, 63, .4); }
.dlg-in { padding: 22px; }
.dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dh h2 { font-size: 16px; font-weight: 700; line-height: 1.35; }
.dh p { margin-top: 2px; font-size: 13px; color: var(--ink3); }
.xbtn { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--ink3); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s, color .15s; }
.xbtn .ic { width: 14px; height: 14px; }
.xbtn:hover { background: var(--mute); color: var(--ink); }
.xbtn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.dh .xbtn { margin: -3px -5px 0 0; }

.dlg form > * + * { margin-top: 14px; }
.dlg .input { height: 34px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.field { display: grid; gap: 5px; align-content: start; min-width: 0; font-size: 13px; }
.field > span { font-weight: 600; }
.field > span small { display: inline; font-weight: 400; }
.sect { padding: 0; margin-inline: 0; border: 0; min-width: 0; }
.sect legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.sect legend small { margin-top: 1px; font-weight: 400; }
.sect .grid2 { row-gap: 12px; }
.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; padding: 3px 4px; border: 1px solid var(--edge); border-radius: 8px; background: #fff; cursor: text; transition: border-color .15s, box-shadow .15s; }
.tokens:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(50, 5, 190, .12); }
.tokens input { flex: 1; min-width: 80px; height: 24px; padding: 0 6px; border: 0; background: transparent; color: var(--ink); font: 400 13.5px/1 var(--font); outline: none; }
.tokens input::placeholder { color: var(--ink3); }
.tokens input::-webkit-calendar-picker-indicator { display: none !important; }
.tok { display: inline-flex; align-items: center; gap: 1px; height: 24px; padding: 0 2px 0 8px; border-radius: 6px; background: var(--mute); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tok-x { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: var(--ink3); cursor: pointer; -webkit-appearance: none; appearance: none; }
.tok-x:hover { background: var(--line); color: var(--ink); }
.tok-x:focus-visible { outline: 2px solid var(--indigo); }
.tok-x .ic { width: 11px; height: 11px; }

.opts { display: grid; gap: 8px; }
.opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.opt:has(input:checked) { border-color: var(--indigo); background: var(--wash); }
.opt input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: var(--indigo); }
.opt .input { grid-column: 2; }
.opt .input:disabled { opacity: .6; }
.checks { display: grid; gap: 2px; }
.check-r { display: grid; grid-template-columns: auto 100px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 600; cursor: pointer; }
.check-r:first-child { border-top: 0; }
.check-r input { width: 15px; height: 15px; margin: 0; accent-color: var(--indigo); }
.check-r input:disabled { opacity: .5; }
.check-r small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 34px; padding: 3px; border-radius: 8px; background: var(--mute); }
.seg2 button { padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink3); font: 600 13px/1 var(--font); white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s, color .15s, box-shadow .15s; }
.seg2 button:hover { color: var(--ink); }
.seg2 button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23, 8, 63, .12); }
.seg2 button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 8px; height: 34px; margin-top: 24px; font-size: 13px; font-weight: 600; cursor: pointer; }
.check input { width: 15px; height: 15px; margin: 0; accent-color: var(--indigo); cursor: pointer; }
.dfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px !important; }
.err { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--coral-d); }
.dfoot .hint { margin-right: auto; }
.dropzone { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--edge); border-radius: 8px; font-size: 13px; color: var(--ink3); transition: border-color .15s, background .15s; }
.dropzone .ic { flex: none; width: 14px; height: 14px; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--indigo); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.linkbtn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 3px; }

/* The email as the client gets it (after staffcom/email-template.html) */
.mailmeta { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px 12px; font-size: 13px; }
.mailmeta dt { color: var(--ink3); }
.mailmeta dd { display: flex; gap: 8px; min-width: 0; font-weight: 600; }
.mail { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #FAFBFF; }
.mail-top { display: flex; align-items: center; height: 40px; padding: 0 16px; background: #3205BE; color: #fff; }
.mail-top svg { width: 61px; height: 16px; }
.mail-body { padding: 24px 28px; text-align: center; }
.mail-body h3 { font: 700 20px/1.3 Helvetica, Arial, sans-serif; color: #1D2330; }
.mail-note { max-width: 46ch; margin: 8px auto 16px; padding: 6px 8px; border-radius: 6px; font: 400 14px/1.6 Helvetica, Arial, sans-serif; color: #1D2330; outline: none; cursor: text; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background .15s; }
.mail-note:hover { box-shadow: inset 0 0 0 1px var(--edge); }
.mail-note:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--indigo); }
.mail-cta { display: inline-block; padding: 10px 28px; border-radius: 4px; background: #3205BE; color: #fff; font: 700 15px/1.4 Helvetica, Arial, sans-serif; }
.mail-small { margin-top: 12px; font: 400 12px/1.5 Helvetica, Arial, sans-serif; color: #626D84; }
.mail-foot { padding: 8px 16px; background: #F6F7FC; text-align: center; font: 400 12px/1.5 Helvetica, Arial, sans-serif; color: #626D84; }

/* ============================ TOOLTIP, TOASTS ============================ */
.tip { position: fixed; z-index: 100; left: 0; top: 0; max-width: 280px; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; }
.tip b { font-weight: 700; }
.tip .row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tip .row i { display: inline-block; width: 10px; height: 3px; margin-right: 7px; border-radius: 2px; vertical-align: middle; }
.tip .hd { margin-bottom: 3px; color: var(--lav); }
.toasts { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast { max-width: min(380px, calc(100vw - 40px)); padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 28px rgba(23, 8, 63, .24); animation: fade .2s ease-out; transition: opacity .2s; }
.toast.bye { opacity: 0; }
.toast small { margin-top: 2px; font-weight: 400; color: var(--lav); }

/* ============================ SESSION ============================ */
/* Who is signed in, at the bottom of the navigation (takes the place of the sample note once the hub is online) */
.who { margin-top: auto; padding: 10px; font-size: 12px; line-height: 1.45; color: var(--ink3); }
.who b { display: flex; align-items: center; gap: 7px; color: var(--ink2); }
.who span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .linkbtn { margin-top: 4px; font-size: 12px; text-decoration: none; }
.who .linkbtn:hover { text-decoration: underline; }
/* Sign in: one card in the middle of the page; the navigation waits until there is a session */
body.auth .side { display: none; }
body.auth main { margin: 0; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 368px; padding: 28px; }
.auth-logo { width: 92px; height: 24px; margin-bottom: 22px; color: var(--indigo); }
.auth-card h1 { font: 700 20px/1.3 var(--display); letter-spacing: -.01em; }
.auth-card h1 + p { margin-top: 4px; font-size: 13px; color: var(--ink3); }
.auth-card form { display: grid; gap: 14px; margin-top: 20px; }
.auth-card .input, .auth-card .btn.block { height: 36px; }
.auth-card .err { margin: 0; }
.auth-card .linkbtn { justify-self: start; text-decoration: none; }
.auth-card .linkbtn:hover { text-decoration: underline; }
.auth-note { padding: 8px 10px; border-radius: 8px; background: var(--ok-l); color: var(--ok-d); font-size: 13px; font-weight: 600; }
.rules { display: grid; gap: 3px; margin-top: -6px; font-size: 12.5px; color: var(--ink3); }
.rules li { display: flex; align-items: center; gap: 7px; }
.rules li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); }
.rules li.ok { color: var(--ok-d); }
.rules li.ok::before { background: var(--ok); }
.auth-foot { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink3); }

/* ============================ NARROWER SCREENS ============================ */
@media (max-width: 1499px) {
  :root { --gutter: 24px; }
}

/* Between 1252px and 1395px the sidebar shrinks to icons, so the tables keep their columns */
@media (max-width: 1395px) {
  :root { --side: 64px; }
  .side { padding: 14px 8px 10px; }
  .logo { justify-content: center; padding: 0; }
  .logo .full, .logo span { display: none; }
  .logo .mark { display: block; width: 30px; height: 26px; }
  .nav { margin-top: 18px; }
  .nav a { flex-direction: column; justify-content: center; gap: 4px; height: 52px; padding: 0; font-size: 10.5px; }
  .sample { display: flex; justify-content: center; padding: 8px 0; pointer-events: auto; cursor: help; }
  .sample b { gap: 0; font-size: 0; }
  .sample span { display: none; }
  .who { display: flex; justify-content: center; padding: 8px 0; }
  .who b { gap: 0; font-size: 0; }
  .who span, .who .linkbtn { display: none; }
}

/* The tables answer to the room they get, not to the window. A short contracts timeline keeps the years only... */
@container page (max-width: 995px) {
  .kthead .k-time .mid { display: none; }
}

/* ...and when the columns no longer fit, each row becomes a small card */
@container page (max-width: 1139px) {
  .tr.th { display: none; }
  .tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; min-height: 0; padding: 12px 16px; }
  .tr > span, .tr > span:first-child, .tr > span:last-child, .grp-b .tr > span:first-child { padding: 0; }
  .tr > .c-stage { grid-area: 1 / 2; justify-self: end; text-align: right; }
  .tr > .c-pty { grid-column: 1 / -1; }
  .tr > .c-pty.is-nil { display: none; }
  .tr > .c-pty::before { content: attr(data-label); display: inline-block; width: 112px; color: var(--ink3); }
  .tr > .c-since, .tr > .c-con, .tr > .c-lic { grid-column: 1 / -1; }
  .tr > .c-since::before, .tr > .c-con::before, .tr > .c-lic::before { display: inline-block; width: 112px; color: var(--ink3); }
  .tr > .c-since::before { content: "Client since"; }
  .tr > .c-con::before { content: "Contract"; }
  .tr > .c-lic::before { content: "Licenses"; }
  .tr > .c-lic { display: block; }
  .tr > .c-lic > span { margin-right: 10px; }
  .tbl.teams .tr > .c-venue { grid-column: 1 / -1; }
  .tbl.teams .tr > .c-venue b, .tbl.teams .tr > .c-venue small { display: inline; font-size: 13.5px; }
  .tbl.teams .tr > .c-venue small { margin-left: 6px; }
  .grp-h { flex-wrap: wrap; row-gap: 0; padding: 10px 16px; }
  .grp-s { flex: 1 1 100%; margin: 0; padding-left: 24px; }
  .grp-b .tr { padding-left: 40px; }
}

@container page (max-width: 941px) {
  .kthead { display: none; }
  .krow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "client end" "agr lic" "time time" "pdf pdf"; row-gap: 8px; padding: 12px 6px; }
  .krow > :nth-child(1) { grid-area: client; padding-left: 10px; }
  .krow > :nth-child(2) { grid-area: agr; }
  .krow > :nth-child(3) { grid-area: lic; }
  .krow > :nth-child(4) { grid-area: time; height: 20px; }
  .krow > :nth-child(5) { grid-area: end; text-align: right; }
  .krow > :nth-child(6) { grid-area: pdf; }
  .krow.none { grid-template-areas: "client" "bare"; grid-template-columns: minmax(0, 1fr); }
  .krow.none .k-none { grid-area: bare; flex-wrap: wrap; row-gap: 8px; }
}

/* Below 1252px even the rail would squeeze the tables into cards, so the navigation folds into a bar at the top */
@media (max-width: 1251px) {
  .side { position: sticky; inset: 0 0 auto 0; width: auto; flex-direction: row; align-items: center; gap: 14px; height: var(--top); padding: 0 var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); }
  .logo { justify-content: flex-start; padding: 0; }
  .logo .full, .logo span { display: block; }
  .logo .mark { display: none; }
  .nav { display: flex; gap: 2px; margin: 0; }
  .nav a { flex-direction: row; height: 34px; padding: 0 10px; font-size: 13.5px; }
  .nav a .ic { display: none; }
  .sample { display: block; margin: 0 0 0 auto; padding: 0; pointer-events: auto; cursor: help; }
  .sample b { gap: 7px; font-size: 12px; }
  .sample span { display: none; }
  .who { display: flex; align-items: center; gap: 12px; margin: 0 0 0 auto; padding: 0; }
  .who b { gap: 7px; font-size: 12px; }
  .who span { display: none; }
  .who .linkbtn { display: inline; margin: 0; }   /* hidden by the rail rules above, back in the bar */
  main { margin-left: 0; }
}

@media (max-width: 960px) {
  .g3 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
}

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .page { padding-top: 20px; }
  .searchbox, .searchbox input { width: 100%; }
  .dhead-r { flex-wrap: wrap; }
  .dhead-a { flex: 1 1 100%; }
  .dhead-a .btn { flex: 1; }
  .parties { gap: 8px 24px; }
  .card { padding: 16px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block .figs { flex-wrap: wrap; gap: 12px 24px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .steps li:nth-child(2) { border-top: 1px solid var(--hair); }
  .raw-b dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .check-r { grid-template-columns: auto minmax(0, 1fr); }
  .check-r small { grid-column: 2; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legend { margin-left: 0; flex-basis: 100%; }
  .sec-h { flex-wrap: wrap; }
  .toasts { right: 16px; left: 16px; bottom: 16px; justify-items: stretch; }
}

@media (max-width: 560px) {
  .side { gap: 8px; }
  .logo span { display: none; }
  .nav a { padding: 0 8px; }
  .dlg-in { padding: 18px 16px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .check { margin-top: 0; }
  .seg2 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; height: auto; }
  .seg2 button { height: 28px; }
  .mailmeta dd { flex-wrap: wrap; }
  .mail-body { padding: 20px 16px; }
  .dfoot { flex-wrap: wrap; }
  .dfoot .hint { flex-basis: 100%; }
}

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