/* ============================================================
   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;

  --font: 'Schibsted Grotesk', system-ui, sans-serif;   /* one family for everything */
  --display: var(--font);                    /* page titles: same family, set tighter */
  --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[hidden] { display: none; }   /* what the invitation does not open, and Access for anyone but an owner */
.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: 600 24px/1.25 var(--display); letter-spacing: -.025em; }
.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); }
/* Taking something away: coral, like everything that needs attention */
.btn.danger { background: var(--coral-d); color: #fff; }
.btn.danger:hover { background: #9C1F26; }
.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(190px, 1.5fr) minmax(136px, 1fr) minmax(164px, 1.15fr) minmax(131px, 1fr) minmax(138px, 1fr) 85px minmax(132px, .9fr) minmax(140px, .95fr); }
.tbl.tree { --cols: minmax(214px, 1.6fr) minmax(136px, 1fr) minmax(164px, 1.15fr) minmax(131px, 1fr) minmax(138px, 1fr) 85px minmax(132px, .9fr) minmax(140px, .95fr); }   /* its venues are indented */
.tbl.teams { --cols: minmax(172px, 1.2fr) minmax(170px, 1.4fr) minmax(124px, 1fr) minmax(164px, 1.15fr) minmax(138px, 1fr) 85px minmax(132px, .9fr) minmax(140px, .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: 600 24px/1.25 var(--display); letter-spacing: -.025em; }
.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; }
.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); }
.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, .meter.miss { background: var(--coral-l); }
.meter.over i, .meter.miss 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); }

/* ============================ CLIENTS ============================ */
/* The venues that are in Listo. The table is the venues table itself (.tbl, .tr, .grp) with the columns Listo
   and the hub's records can fill today. Rows are not links: a client has no page of its own yet. */
.src { font-size: 13px; color: var(--ink3); }
.src b { margin-right: 7px; color: var(--ink2); }
.src.test b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px rgba(107, 71, 0, .3); vertical-align: 1px; }
.tbl.clients { --cols: minmax(230px, 1.7fr) minmax(150px, 1fr) minmax(176px, 1.15fr) minmax(150px, 1fr) 124px 72px; }
.tbl.clients.tree { --cols: minmax(254px, 1.8fr) minmax(150px, 1fr) minmax(176px, 1.15fr) minmax(150px, 1fr) 124px 72px; }   /* its venues are indented */
.tbl.clients.teams { --cols: minmax(190px, 1.2fr) minmax(230px, 1.6fr) minmax(150px, 1fr) minmax(176px, 1.15fr) 124px 72px; }
.c-in { white-space: nowrap; }
.c-id { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink3); }
/* The four ways to list them: one switch, as tall as the search next to it and as wide as its labels. Each view
   carries what it lists: so many venues, operators, concessionaires, teams. */
.seg2.views { display: inline-grid; grid-auto-columns: auto; height: 32px; padding: 2px; }
.seg2.views button { padding: 0 12px; }
.seg2.views em { margin-left: 6px; font-style: normal; font-weight: 400; color: var(--ink3); font-variant-numeric: tabular-nums; }

/* ============================ CLIENT ============================ */
/* One client at a glance: a mosaic of cards, each with its icon, its number and its picture.
   Color means the same thing in every one of them:
     violet  use: guests asking            coral  what nobody attended
     green   alive: seen this month        amber  in between (cancelled, signed in before, an older version)
     grey    idle: never, or not in use
   The four hues passed the palette validator together (colorblind separation and lightness). Amber and coral sit
   under 3:1 against white, so every chart also prints its figures. Text never takes a data color. */
.dhead.plain .dhead-in { padding-bottom: 18px; }
.dash {
  --k-use: #6938FA; --k-use-l: #E6E1FF; --k-miss: #FA6464; --k-miss-l: #FFE3E0; --k-live: #269973; --k-live-l: #D6F0E7;
  --k-mid: #EDA100; --k-idle: #DADDE9;
  container: dash / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
}
.dash > * { grid-column: span 12; min-width: 0; }
.dash > .w8 { grid-column: span 8; }
.dash > .w4 { grid-column: span 4; }
.dside { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.dside .dnum { margin-top: auto; }   /* the two side cards fill their height: title on top, number and meter low */
.dside .dnum b { font-size: 36px; }
/* A figure that stands alone gets a thicker bar than a row of a list. Size only: the rows keep the original 4px. */
.dside .meter { height: 8px; border-radius: 4px; }
.dside .meter i { min-width: 4px; border-radius: 4px; }
.dash .k-use { background: var(--k-use); }
.dash .k-miss { background: var(--k-miss); }
.dash .k-live { background: var(--k-live); }
.dash .k-mid { background: var(--k-mid); }
.dash .k-idle { background: var(--k-idle); }
.dash .k-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--edge); }

/* A card: its icon in a tinted chip, its title, and what period it covers */
.dc { display: flex; flex-direction: column; }
.dc-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dc-h h2 { font-size: 14px; font-weight: 600; line-height: 1.4; }
.dc-h > span:not(.dchip) { margin-left: auto; font-size: 12.5px; color: var(--ink3); text-align: right; }
.dc-h > .link { margin-left: auto; }
.dchip { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; }
.dchip .ic { width: 17px; height: 17px; }
.dchip.use { background: var(--k-use-l); color: var(--indigo); }
.dchip.miss { background: var(--k-miss-l); color: var(--coral-d); }
.dchip.live { background: var(--k-live-l); color: var(--ok-d); }
.dchip.plain { background: var(--lav-l); color: var(--indigo); }
.dc .def { margin-top: 12px; }

/* What is set up, in one strip */
.dfacts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 14px 6px; }
.dfacts li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 14px; border-left: 1px solid var(--hair); }
.dfacts li:first-child { border-left: 0; }
.dfacts b { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.dfacts span:last-child { min-width: 0; font-size: 12.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Numbers: one hero on the page, the rest a step down */
.hero b { display: block; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.hero span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink3); }
.dnum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 12px; }
.dnum b { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.dnum span { font-size: 13px; color: var(--ink3); }
.dnum.sm { margin-bottom: 8px; }
.dnum.sm b { font-size: 22px; }

/* Requests: the hero, how they ended, and each day as a column */
.dreq { display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 24px; }
.segbar { display: flex; gap: 2px; height: 10px; }
.segbar i { flex: 1 0 0; min-width: 4px; border-radius: 3px; }
.segbar i:first-child { border-radius: 5px 3px 3px 5px; }
.segbar i:last-child { border-radius: 3px 5px 5px 3px; }
.segbar i:only-child { border-radius: 5px; }
.segbar.thin { height: 8px; }
.dkey { display: grid; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--ink2); }
.dkey li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dkey i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.dkey b { margin-left: auto; padding-left: 8px; color: var(--ink); }
.dkey em { flex: none; width: 46px; font-style: normal; text-align: right; color: var(--ink3); }
.plot.big { height: 168px; }
.plot.big .pcol i { width: min(14px, 58%); }
.plot.big .pcol i:first-child { border-radius: 4px 4px 0 0; }

/* The thirty days as a calendar, Monday first, darker with more requests */
.heat { margin-bottom: 14px; }
.heat-h, .heat-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.heat-h span { font-size: 11px; line-height: 14px; text-align: center; color: var(--ink3); }
.heat-g { margin-top: 4px; }
.hc { height: 22px; border-radius: 5px; background: var(--mute); }
.hc.none { background: transparent; }
.hc.s1 { background: #D7DCFF; }
.hc.s2 { background: #B49CFC; }
.hc.s3 { background: #6938FA; }
.hc.s4 { background: #3205BE; }
.hc.now { outline: 1.5px solid var(--ink3); outline-offset: 1.5px; }
.heat-k { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--ink3); }
.heat-k .hc { width: 14px; height: 10px; border-radius: 3px; }
.heat-k span:first-child { margin-right: 2px; }
.heat-k span:last-child { margin-left: 2px; }
.dpair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); }
.dpair dt { font-size: 12px; line-height: 1.4; color: var(--ink3); }
.dpair dd { font-weight: 600; }
.dpair small { font-weight: 400; }

/* Devices and the contract use the rows of the venue page's contract card: icon, kind, bar, figures */
.dc .lic.flush { margin-top: 2px; }
.dc .lic-r { grid-template-columns: 16px 60px minmax(0, 1fr) auto; }
.dc .lic-r .n { min-width: 62px; }
.dver { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }

/* People: one dot each, colored by what Listo saw of them */
.dwho2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.dwho2 > .dwho + .dwho { padding-left: 48px; border-left: 1px solid var(--hair); }
.dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; }

/* What was typed in by hand on a client's page: what it uses Listo for, its departments */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.duse { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 48px; }
.duse h3 { margin-bottom: 8px; font-size: 12.5px; font-weight: 400; color: var(--ink3); }
.uses, .depts { display: flex; flex-wrap: wrap; gap: 6px; }
.use { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--ink3); white-space: nowrap; }
.use .ic { width: 14px; height: 14px; }
.use.on { border-color: transparent; background: var(--k-use-l); color: var(--ink); font-weight: 600; }
.use.on .ic { color: var(--k-use); }
.dept { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--mute); font-size: 13px; font-weight: 600; white-space: nowrap; }
.dby { margin-top: 12px; font-size: 12.5px; color: var(--ink3); }
/* Access: who was invited, and what each invitation opens */
.dfoot > .btn.left { margin-right: auto; }   /* a second action, set apart from Cancel and Save */
.people { padding: 0; }   /* nothing clipped: the menu of the last row opens past its edge */
.prow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 6px 14px; width: 100%; min-height: 50px; padding: 9px 16px; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); font: 400 13.5px/1.35 var(--font); text-align: left; }
.prow:first-child { border-top: 0; }
.prow b { font-weight: 600; overflow-wrap: anywhere; }
.prow small { font-size: 12.5px; color: var(--ink3); }
.pacts { display: flex; justify-content: flex-end; min-width: 28px; }
/* The three dots of a row and the menu they open */
.pmore { position: relative; display: inline-flex; }
.btn.sm.icon { width: 28px; padding: 0; }
.btn.icon[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo); }
.pmenu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; display: grid; min-width: 148px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 8px 24px rgba(23, 8, 63, .14); }
.pmenu[hidden] { display: none; }
.pmenu button { display: flex; align-items: center; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 600 13px/1 var(--font); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pmenu button:hover, .pmenu button:focus-visible { background: var(--wash); outline: none; }
.pmenu button.danger { color: var(--coral-d); }
.pmenu button.danger:hover, .pmenu button.danger:focus-visible { background: var(--coral-l); }
.mods { display: flex; flex-wrap: wrap; gap: 4px; }
.mods .dept { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; }
@media (max-width: 700px) {
  .prow { grid-template-columns: minmax(0, 1fr); }
  .pacts { justify-content: flex-start; min-width: 0; }
  .pmenu { right: auto; left: 0; }
  .pacts:empty { display: none; }
}
/* Client details: one modal, the things to enter listed at the left, the fields of the one that is open at the right */
.dlg.wide { width: min(720px, calc(100vw - 32px)); }
.dset { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 22px; min-height: 292px; }
.dset-n button > span:not(.done) { white-space: nowrap; }
.dset-n { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; border-right: 1px solid var(--hair); }
.dset-n button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink2); font: 600 13px/1.2 var(--font); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.dset-n button > .ic { flex: none; width: 15px; height: 15px; color: var(--ink3); }
.dset-n button:hover { background: var(--mute); color: var(--ink); }
.dset-n button[aria-selected="true"] { background: var(--lav-l); color: var(--indigo); }
.dset-n button[aria-selected="true"] > .ic { color: var(--indigo); }
.dset-n button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.dset-n .done { position: relative; display: grid; margin-left: auto; color: var(--ink3); }
.dset-n .done .ic { width: 13px; height: 13px; }
.dset-p > section > * + * { margin-top: 14px; }
.dset-h h3 { font-size: 14px; font-weight: 700; line-height: 1.4; }
.dset-h p { margin-top: 1px; font-size: 13px; color: var(--ink3); }
@media (max-width: 600px) {
  .dset { grid-template-columns: minmax(0, 1fr); gap: 14px 0; min-height: 0; }
  .dset-n { flex-direction: row; flex-wrap: wrap; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .dset-n .done { margin-left: 2px; }
}
.usepick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.usebox { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.usebox input { position: absolute; opacity: 0; pointer-events: none; }
.usebox .ic { flex: none; width: 15px; height: 15px; color: var(--ink3); }
.usebox:has(input:checked) { border-color: var(--indigo); background: var(--lav-l); }
.usebox:has(input:checked) .ic { color: var(--indigo); }
.usebox:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }

@container dash (max-width: 1019px) {
  .dash > .w8, .dash > .w4.end { grid-column: span 12; }
  .dash > .w4 { grid-column: span 6; }
  .dash > .dside { grid-column: span 12; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .dfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .dfacts li:nth-child(4) { border-left: 0; }
}
@container dash (max-width: 639px) {
  .duse { grid-template-columns: minmax(0, 1fr); }
  .dash > .w4, .dash > .w8 { grid-column: span 12; }
  .dash > .dside { grid-template-columns: minmax(0, 1fr); }
  .dwho2 { grid-template-columns: minmax(0, 1fr); }
  .dwho2 > .dwho + .dwho { margin-top: 18px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .dreq { grid-template-columns: minmax(0, 1fr); }
  .dfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dfacts li:nth-child(4) { border-left: 1px solid var(--hair); }
  .dfacts li:nth-child(odd) { border-left: 0; }
  .hero b { font-size: 44px; }
}

/* ============================ 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"], .seg2 button[aria-selected="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 { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; text-decoration: none; }
.who .linkbtn svg { width: 13px; height: 13px; }
.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: 600 20px/1.3 var(--display); letter-spacing: -.02em; }
.auth-wait { font-size: 13px; color: var(--ink3); }
.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; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
  .who b { gap: 0; font-size: 0; }
  .who > span, .who .linkbtn span { display: none; }
  .who .linkbtn { margin: 0; padding: 7px; border-radius: 8px; }   /* in the rail, signing out is a door */
  .who .linkbtn:hover { background: var(--wash); }
  .who .linkbtn svg { width: 16px; height: 16px; }
}

/* 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; }
  .tr > .c-in { grid-column: 1 / -1; }
  .tr > .c-in::before { content: "In Listo since"; display: inline-block; width: 112px; color: var(--ink3); }
  .tr > .c-id { grid-area: 1 / 2; justify-self: end; }
  .tr > .c-id::before { content: "ID "; }
  .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 { margin: 0; padding: 0; }
  .who .linkbtn span { display: inline; }   /* hidden by the rail rules above, back in the bar */
  .who .linkbtn svg { width: 13px; height: 13px; }
  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, .seg2.views { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; height: auto; }
  .seg2.views { width: 100%; }
  .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; }
}