/* Admin console layout: login screen (after ui_kits/web) and the app shell.
   Mobile first; the sidebar docks at 900px. Tokens only. */

/* Admin-site addition, not (yet) a design-system token: the panel colour behind the sidebar and the
   login brand panel, so the page itself stays pure black or white. */
:root { --surface-chrome: #222222; }

html, body { min-height: 100%; }
body { background: var(--surface-page); color: var(--text-primary); }

/* One logo per theme. Both <img>s are in the markup; exactly one may be displayed. Never set
   `display` on these images elsewhere (a more specific rule would show both and double the
   gold mark) - the !important makes sure. */
img.wa-logo-dark { display: none !important; }
[data-theme="dark"] img.wa-logo-light { display: none !important; }
[data-theme="dark"] img.wa-logo-dark { display: block !important; }

.wa-muted { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.wa-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }

/* ---------- login ---------- */
.wa-login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.wa-login-brand { display: none; flex-direction: column; justify-content: space-between; padding: var(--space-12);
  background: var(--surface-chrome); color: var(--white); }
.wa-login-brand img { width: calc(var(--space-12) * 4); height: auto; }
.wa-login-brand h2 { margin: 0 0 var(--space-4); max-width: 14ch; font: var(--type-display); letter-spacing: var(--tracking-tight); }
.wa-login-brand p { margin: 0; max-width: 40ch; font-size: var(--text-lg); font-weight: var(--weight-light);
  line-height: var(--leading-normal); color: var(--grey-400); }
.wa-login-brand .wa-login-brand-foot { font: var(--type-caption); color: var(--grey-400); }

.wa-login-side { display: flex; flex-direction: column; padding: var(--space-5) var(--gutter-mobile) var(--space-10); }
.wa-login-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.wa-login-top img { height: var(--space-6); width: auto; }
.wa-login-form { width: 100%; max-width: 400px; margin: auto; padding-top: var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-5); }
.wa-login-form h1 { margin: 0 0 var(--space-2); font: var(--type-h1); letter-spacing: var(--tracking-tight); }
.wa-login-foot { margin: var(--space-2) 0 0; text-align: center; font: var(--type-caption); color: var(--text-secondary); }

@media (min-width: 900px) {
  .wa-login { grid-template-columns: 5fr 6fr; }
  .wa-login-brand { display: flex; }
  .wa-login-side { padding: var(--space-8) var(--space-12); }
  .wa-login-top .wa-login-logo { visibility: hidden; }
  .wa-login-form { padding-top: 0; }
}

/* ---------- app shell ---------- */
.wa-shell { min-height: 100vh; min-height: 100dvh; }

/* mobile top bar */
.wa-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-2);
  height: var(--nav-h); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); background: var(--surface-page); }
.wa-topbar img { height: var(--space-5); width: auto; }

/* sidebar: off-canvas drawer on mobile */
.wa-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column;
  width: min(calc(var(--space-16) * 4), 85vw); border-right: 1px solid var(--border-subtle); background: var(--surface-chrome);
  --surface-sunken: var(--grey-900); /* hover/active and the theme toggle, one step darker than the panel */
  --border-subtle: var(--grey-700);  /* grey-800 would vanish into the panel */
  --surface-card: var(--grey-700);   /* the selected theme button, lifted above the darker toggle */
  color: var(--text-primary); /* resolve inside the sidebar's own (dark) theme, not the body's */
  transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-standard); visibility: hidden; }
.wa-shell[data-nav-open="true"] .wa-sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); }
.wa-scrim { position: fixed; inset: 0; z-index: 30; background: var(--surface-overlay); border: 0; padding: 0;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); }
.wa-shell[data-nav-open="true"] .wa-scrim { opacity: 1; pointer-events: auto; }

.wa-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  height: var(--nav-h); padding: 0 var(--space-2) 0 var(--space-5); }
.wa-sidebar-logo { display: block; min-width: 0; }
.wa-sidebar-lockup { display: block; }
.wa-sidebar-lockup img { height: var(--space-5); width: auto; }
/* the gold W in the minimal sidebar (not one of the theme's logo images) */
.wa-sidebar-mark { display: none; width: var(--space-8); height: var(--space-8); object-fit: contain; }
/* the button that makes the sidebar minimal is for the docked sidebar only */
.wa-sidebar-toggle { display: none; }

.wa-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-3); }
.wa-nav-section { padding: var(--space-4) var(--space-3) var(--space-2); }
.wa-nav a { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min);
  padding: 0 var(--space-3); border-radius: var(--radius-control); font: var(--type-label); color: var(--text-secondary);
  text-decoration: none; transition: var(--transition-color); }
/* beside the content (a mouse, not a finger) each item is 2px lower, so the whole menu fits a laptop's screen */
@media (min-width: 900px) and (pointer: fine) {
  .wa-nav a { min-height: calc(var(--touch-min) - var(--space-1) / 2); }
}
.wa-nav a:hover { background: var(--surface-sunken); color: var(--text-primary); text-decoration: none; }
.wa-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* how many support cases wait for an answer, beside Support */
.wa-nav-count { margin-left: auto; display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); font: var(--type-caption); font-weight: var(--weight-bold); }
.wa-nav-count[hidden] { display: none; }
/* the gold dot beside Community while a room has unread messages, like the changelog's */
.wa-nav-dot { flex: none; margin-left: auto; inline-size: var(--space-2); block-size: var(--space-2); border-radius: 50%; background: var(--accent); }
.wa-nav-dot[hidden] { display: none; }
.wa-nav a[aria-current="page"] { background: var(--surface-sunken); color: var(--text-primary); }
.wa-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2);
  width: 3px; border-radius: var(--radius-xs); background: var(--accent); }
.wa-nav a[aria-current="page"] .wl-icon { color: var(--accent); }

.wa-sidebar-foot { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-subtle); }
.wa-user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.wa-avatar { flex: none; display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm);
  border-radius: 50%; background: var(--surface-inverse); color: var(--text-inverse); font: var(--type-label); }
.wa-user-txt { display: flex; flex-direction: column; min-width: 0; }
.wa-user-txt strong { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-user-txt span { font: var(--type-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-sidebar-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.wa-sidebar-buttons { display: flex; align-items: center; }
/* narrower than a standard icon button so the two icons read as a pair; still 44px tall for touch */
.wa-sidebar-buttons .wl-ibtn { width: var(--control-h-sm); }
.wa-sidebar-buttons form { margin: 0; }
.wa-sidebar-buttons a[aria-current="page"] { background: var(--surface-sunken); color: var(--accent); }

/* content */
.wa-main { min-width: 0; }
.wa-content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--gutter-mobile) var(--space-12); }
.wa-page-head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-6); }
.wa-page-head h1 { margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-tight); }
/* a heading with an action beside it (e.g. New user) */
.wa-page-head:has(> .wl-btn) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

.wa-stack { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--content-narrow); }
.wa-card-title { margin: 0 0 var(--space-5); font: var(--type-h3); }
.wa-form { display: flex; flex-direction: column; gap: var(--space-5); }
.wa-details { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.wa-details div { display: flex; flex-direction: column; gap: var(--space-1); }
.wa-details dt { font: var(--type-label); color: var(--text-secondary); }
.wa-details dd { margin: 0; font: var(--type-body); overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .wa-details div { flex-direction: row; align-items: baseline; gap: var(--space-4); }
  .wa-details dt { flex: none; width: calc(var(--space-16) * 2); }
}

/* users: search, table, pager */
.wa-search { margin-bottom: var(--space-5); }
.wa-search .wl-input { height: var(--control-h-lg); font-size: var(--text-lg); }
.wa-search .wl-adorn { left: var(--space-4); }
.wa-search .wl-inwrap > .wl-adorn + .wl-input { padding-left: var(--space-12); }
.wa-results-count { margin-bottom: var(--space-3); }

.wa-table-wrap { overflow: hidden; }
.wa-table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.wa-table th { padding: var(--space-3) var(--space-4); text-align: left; font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); }
.wa-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.wa-table tbody tr:last-child td { border-bottom: 0; }
.wa-table tbody tr[data-href] { cursor: pointer; transition: var(--transition-color); }
.wa-table tbody tr[data-href]:hover { background: var(--surface-sunken); }
.wa-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--text-primary); }
.wa-person:hover { color: var(--text-primary); text-decoration: none; }
.wa-person:focus-visible { border-radius: var(--radius-xs); }
.wa-person-txt { display: flex; flex-direction: column; min-width: 0; }
.wa-person-txt strong { font: var(--type-label); }
.wa-person-txt span { font: var(--type-caption); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-col-wide { display: none; }
/* narrow screens: the name column takes the free width, and long text truncates instead of wrapping */
@media (max-width: 699px) {
  .wa-table td:first-child { max-width: 0; width: 100%; }
}

.wa-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }

/* user page: identity header, tabs and their panels */
.wa-back { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4);
  font: var(--type-label); color: var(--text-secondary); }
.wa-back:hover { color: var(--text-primary); text-decoration: none; }
.wa-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.wa-identity-txt { flex: 1; min-width: 0; }
.wa-identity-txt h1 { margin: 0 0 var(--space-1); font: var(--type-h2); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.wa-identity-txt p { overflow-wrap: anywhere; }
.wa-identity-tags { display: flex; gap: var(--space-2); }
.wa-avatar[data-size="lg"] { width: var(--space-16); height: var(--space-16); font: var(--type-h3); }

.wa-tabpanels { margin-top: var(--space-6); }
.wa-tabpanels > .wa-pane { max-width: var(--content-narrow); }
.wa-tabpanels > .wa-pane-wide { max-width: none; padding: 0; }

/* change timeline: others' changesets on the left, the viewer's on the right, a line between;
   one column with the line on the left on narrow screens */
.wa-timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--space-6); list-style: none; }
.wa-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--space-2); width: 2px; background: var(--border-subtle); }
.wa-change { position: relative; }
.wa-change-dot { position: absolute; top: var(--space-5); left: calc(var(--space-2) - var(--space-6) - 4px); width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface-page); border: 2px solid var(--border-strong); }
.wa-change[data-side="mine"] .wa-change-dot { border-color: var(--accent); background: var(--accent); }
.wa-change-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.wa-change-head { display: flex; align-items: center; gap: var(--space-3); }
.wa-change-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wa-change-who strong { font: var(--type-label); }
.wa-change-who time { font: var(--type-caption); color: var(--text-secondary); }
.wa-diff { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.wa-diff-row { display: flex; flex-direction: column; gap: var(--space-1); }
.wa-diff dt { font: var(--type-caption); color: var(--text-secondary); }
.wa-diff dd { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; font: var(--type-body-sm); }
.wa-diff del, .wa-diff ins { padding: 0 var(--space-1); border-radius: var(--radius-xs); overflow-wrap: anywhere; }
.wa-diff del { background: var(--danger-soft); color: var(--danger-fg); text-decoration: line-through; }
.wa-diff ins { background: var(--success-soft); color: var(--success-fg); text-decoration: none; }
.wa-diff-secret { color: var(--text-secondary); font-style: italic; }

@media (min-width: 900px) {
  .wa-timeline { padding: 0; }
  .wa-timeline::before { left: 50%; transform: translateX(-1px); }
  .wa-change { width: calc(50% - var(--space-6)); }
  .wa-change[data-side="mine"] { align-self: flex-end; }
  .wa-change-dot { left: auto; right: calc(-1 * var(--space-6) - 5px); }
  .wa-change[data-side="mine"] .wa-change-dot { right: auto; left: calc(-1 * var(--space-6) - 5px); }
  .wa-diff-row { flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .wa-diff dt { flex: none; width: calc(var(--space-16) + var(--space-6)); }
}
.wa-pane { --wa-pane-pad: var(--space-5); padding: var(--wa-pane-pad); display: flex; flex-direction: column; gap: var(--space-4); }
.wa-pane .wa-card-title { margin: 0; }
/* read-only facts (the Vipps tab on the user card) */
.wa-facts { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.wa-facts > div { display: flex; flex-direction: column; gap: var(--space-1); }
.wa-facts dt { font: var(--type-caption); color: var(--text-secondary); }
.wa-facts dd { margin: 0; font: var(--type-body-sm); overflow-wrap: anywhere; }
.wa-facts code { font-family: var(--font-mono); font-size: var(--text-sm); }

/* several inputs under one legend: stacked, or side by side in a row
   (phone: a narrow calling code and the number; postal code and place) */
.wa-fields { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-row { display: grid; gap: var(--space-2); align-items: start; }
.wa-row[data-cols="code"] { grid-template-columns: calc(var(--space-16) + var(--space-6)) minmax(0, 1fr); }
.wa-row[data-cols="swatch"] { grid-template-columns: var(--space-12) minmax(0, 1fr); align-items: center; }
.wa-row[data-cols="postal"] { grid-template-columns: calc(var(--space-16) + var(--space-10)) minmax(0, 1fr); }
.wa-secret { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-sunken); }
.wa-secret p { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.wa-secret-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wa-secret code { font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: .04em; overflow-wrap: anywhere; }

@media (min-width: 700px) {
  .wa-col-wide { display: table-cell; }
  .wa-col-narrow { display: none; }
  .wa-pane { --wa-pane-pad: var(--space-8); }
}

/* the dashboard (docs/plans/dashboard/): the period and reseller, stat tiles with their change and a sparkline,
   a grid of cards, and charts drawn as SVG (dashboard/charts.html.twig; no inline styles under the CSP).
   Chart colours: --chart-1 gold for the period, --chart-2 blue for a second series (given, not bought),
   --chart-ref grey for the period before and sparklines; gold-500 and blue-500 pass the dataviz check on both
   surfaces. Text never wears a chart colour. */
:root { --chart-1: var(--gold-500); --chart-2: var(--blue-500); --chart-ref: var(--grey-400); --chart-grid: var(--border-subtle);
  --chart-track: var(--grey-100); }
[data-theme="dark"] { --chart-ref: var(--grey-600); --chart-track: var(--grey-800); }

.wa-dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.wa-dash-head h1 { margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-tight); }
.wa-dash-head p { margin: var(--space-1) 0 0; font: var(--type-body-sm); color: var(--text-secondary); }
.wa-dash-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.wa-dash-controls .wl-inwrap { width: auto; min-width: calc(var(--space-16) * 3); }
.wa-seg { display: inline-flex; flex-wrap: wrap; padding: var(--space-1); gap: var(--space-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control); background: var(--surface-sunken); }
.wa-seg a { display: inline-flex; align-items: center; height: calc(var(--control-h-md) - var(--space-3)); padding: 0 var(--space-3);
  border-radius: var(--radius-xs); font: var(--type-label); color: var(--text-secondary); }
.wa-seg a:hover { color: var(--text-primary); text-decoration: none; }
.wa-seg a[aria-current="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.wa-kpis { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-4); }
.wa-kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); min-width: 0; }
.wa-kpi p { margin: 0; }
.wa-kpi-label { font: var(--type-label); color: var(--text-secondary); }
.wa-kpi-value { font: var(--weight-semibold) var(--text-2xl)/var(--leading-tight) var(--font-body); color: var(--text-primary); white-space: nowrap; }
.wa-kpi-value small { margin-left: var(--space-1); font: var(--type-label); color: var(--text-secondary); }
.wa-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.wa-kpi-caption { font: var(--type-caption); color: var(--text-muted); }
.wa-delta { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-caption); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-delta[data-dir="up"] { color: var(--success-fg); }
.wa-delta[data-dir="down"] { color: var(--danger-fg); }
.wa-delta[data-dir="flat"] { color: var(--text-muted); }
.wa-spark { display: block; flex: none; width: calc(var(--space-16) + var(--space-4)); height: var(--space-6); overflow: visible; }
.wa-spark polyline { fill: none; stroke: var(--chart-ref); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.wa-spark circle { fill: var(--chart-1); stroke: var(--surface-card); stroke-width: 2; }

.wa-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.wa-dash-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); min-width: 0; }
.wa-dash-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.wa-dash-card h2 { margin: 0; display: flex; align-items: center; gap: var(--space-2); font: var(--type-label); font-size: var(--text-md); }
.wa-dash-card h2 .wl-icon { color: var(--text-secondary); }
.wa-dash-card > header p { margin: var(--space-1) 0 0; font: var(--type-caption); color: var(--text-muted); }
.wa-dash-card > header a { font: var(--type-body-sm); white-space: nowrap; }
.wa-dash-card[data-flush] { padding: 0; gap: 0; }
.wa-dash-card[data-flush] > header { padding: var(--space-5) var(--space-5) var(--space-3); }
.wa-dash-card[data-flush] .wa-table-wrap { border-radius: 0; }
.wa-dash-card .wa-table th, .wa-dash-card .wa-table td { padding-left: var(--space-5); padding-right: var(--space-5); }
.wa-dash-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.wa-dash-big strong { font: var(--weight-semibold) var(--text-3xl)/1 var(--font-body); }
.wa-dash-big span { font: var(--type-body-sm); color: var(--text-secondary); }
.wa-dash-note { margin: 0; font: var(--type-caption); color: var(--text-muted); }
.wa-dash-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.wa-dash-figs div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.wa-dash-figs dt { font: var(--type-caption); color: var(--text-secondary); }
.wa-dash-figs dd { margin: 0; font: var(--weight-semibold) var(--text-xl)/1.1 var(--font-body); }
.wa-dash-figs dd small { font: var(--type-caption); font-weight: var(--weight-regular); color: var(--text-muted); }
.wa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-table th.wa-num { text-align: right; }
.wa-table tfoot td { font-weight: var(--weight-semibold); border-top: 1px solid var(--border-strong); }
.wa-cell-sub { display: block; font: var(--type-caption); color: var(--text-muted); }
.wa-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wa-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); font: var(--type-body-sm); }
.wa-rows li:first-child { border-top: 0; padding-top: 0; }
.wa-rows li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wa-chart { position: relative; }
.wa-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.wa-chart-grid line { stroke: var(--chart-grid); stroke-width: 1; }
.wa-chart-axis text { fill: var(--text-muted); font: var(--type-caption); font-variant-numeric: tabular-nums; }
.wa-chart-bar { fill: var(--chart-1); }
.wa-chart-hit { fill: transparent; }
.wa-chart-col[data-hover] .wa-chart-bar { fill: var(--accent-hover); }
.wa-chart-ref { fill: none; stroke: var(--chart-ref); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.wa-chart-cross { stroke: var(--text-muted); stroke-width: 1; pointer-events: none; }
.wa-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none;
  font: var(--type-caption); color: var(--text-secondary); }
.wa-chart-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
/* a note or legend below a table in a card without padding */
.wa-dash-pad { margin: 0; padding: var(--space-3) var(--space-5) var(--space-5); }
.wa-key { display: inline-block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-xs); background: var(--chart-1); }
.wa-key[data-series="2"] { background: var(--chart-2); }
.wa-key[data-series="ref"] { width: var(--space-4); height: 2px; border-radius: 1px; background: var(--chart-ref); }
.wa-key[data-series="track"] { background: var(--chart-track); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.wa-key[data-series="danger"] { background: var(--danger); }
.wa-tip { position: absolute; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-md);
  font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.wa-tip strong { font: var(--type-label); color: var(--text-primary); }

/* a share on its track, a bar split in parts (2px gaps), as SVG stretched to the box */
.wa-bar, .wa-split { display: block; width: 100%; height: var(--space-3); border-radius: var(--radius-xs); overflow: hidden; }
.wa-bar[data-size="sm"], .wa-split[data-size="sm"] { width: calc(var(--space-16) + var(--space-4)); height: var(--space-2); flex: none; }
.wa-bar-track { fill: var(--chart-track); }
.wa-bar-fill, .wa-split rect { fill: var(--chart-1); }
.wa-split rect[data-series="2"] { fill: var(--chart-2); }
.wa-split rect[data-series="track"] { fill: var(--chart-track); }
.wa-split rect[data-series="danger"] { fill: var(--danger); }
.wa-split-gap { stroke: var(--surface-card); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.wa-meter { display: inline-flex; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-funnel { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wa-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: baseline; }
.wa-funnel .wa-bar { grid-column: 1 / -1; }
.wa-funnel-label { font: var(--type-body-sm); }
.wa-funnel-val { font: var(--type-body-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.wa-funnel-val strong { color: var(--text-primary); }

/* the next live session, and the latest with how many came */
.wa-next { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--accent-soft); color: var(--accent-soft-fg); }
.wa-next:hover { text-decoration: none; color: var(--accent-soft-fg); }
.wa-next-date { display: flex; flex-direction: column; align-items: center; min-width: var(--space-10); font: var(--type-caption); text-transform: uppercase; }
.wa-next-date strong { font: var(--weight-bold) var(--text-xl)/1 var(--font-body); }
.wa-next-txt { display: flex; flex-direction: column; gap: 2px; font: var(--type-body-sm); }
.wa-next-txt strong { font: var(--type-label); color: var(--text-primary); }

@media (min-width: 600px) {
  .wa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wa-dash-figs:not([data-cols="2"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wa-dash-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wa-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wa-dash-grid[data-cols="2-1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .wa-dash-grid[data-cols="1-2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (max-width: 599px) {
  /* two tiles a row, revenue across both; tables drop the columns marked optional */
  .wa-kpi:first-child { grid-column: 1 / -1; }
  .wa-dash-card [data-opt] { display: none; }
}
/* an empty list: icon, heading and a hint, centred in a card */
.wa-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-16) var(--space-6);
  text-align: center; }
.wa-empty p { margin: 0; max-width: var(--content-narrow); }
.wa-empty .wl-icon { color: var(--text-muted); }
.wa-empty h2 { margin: 0; font: var(--type-h3); }

@media (min-width: 900px) {
  .wa-shell { display: grid; grid-template-columns: calc(var(--space-16) * 4) 1fr; }
  .wa-topbar, .wa-scrim, .wa-sidebar-close { display: none; }
  .wa-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; width: auto; transform: none; visibility: visible;
    box-shadow: none; transition: none; }
  .wa-shell[data-nav-open="true"] .wa-sidebar { box-shadow: none; }
  .wa-sidebar-head { height: calc(var(--nav-h) + var(--space-4)); padding-top: var(--space-4); }
  .wa-sidebar-lockup img { height: var(--space-6); }
  .wa-content { padding: var(--space-10) var(--gutter-desktop) var(--space-16); }

  /* the head's button, shown on hover or focus (always on touch): close in the full sidebar, open in the minimal one */
  .wa-sidebar-toggle { display: inline-grid; flex: none; width: var(--control-h-sm); height: var(--control-h-sm); color: var(--text-secondary); opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-standard), var(--transition-color); }
  .wa-sidebar-head:hover .wa-sidebar-toggle, .wa-sidebar-toggle:focus-visible { opacity: 1; }
  .wa-sidebar-toggle:hover { background: var(--surface-sunken); color: var(--text-primary); border-color: var(--border-subtle); }
  .wa-sidebar-toggle-hide, :root[data-side="rail"] .wa-sidebar-toggle-pin { display: contents; }
  .wa-sidebar-toggle-pin, :root[data-side="rail"] .wa-sidebar-toggle-hide { display: none; }
  @media (hover: none) { .wa-sidebar-toggle { opacity: 1; } }

  /* ---------- the minimal sidebar (docs/plans/sidebar/): a strip of icons, the page starting after it ---------- */
  :root[data-side="rail"] { --rail-w: calc(var(--space-16) + var(--space-3)); }
  :root[data-side="rail"] .wa-shell { display: block; padding-left: var(--rail-w); }
  :root[data-side="rail"] .wa-sidebar { position: fixed; left: 0; top: 0; z-index: 30; width: var(--rail-w); }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-head { justify-content: center; padding-inline: 0; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-lockup,
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-toggle,
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-version,
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-user-txt,
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-actions > .wl-theme { display: none; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-mark { display: block; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-nav { align-items: center; padding-inline: var(--space-2); scrollbar-width: none; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-nav a { flex: none; justify-content: center; width: var(--touch-min); padding-inline: 0; }
  /* the names stay for screen readers, and show when the menu opens */
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-nav a[aria-current="page"]::before { left: calc(var(--space-2) * -1); }
  /* the support count and the community dot sit on the icon's corner */
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-nav-count { position: absolute; top: 0; right: calc(var(--space-1) * -1); margin: 0;
    min-width: var(--space-4); height: var(--space-4); font-size: var(--text-xs); }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-nav-dot { position: absolute; top: var(--space-2); right: var(--space-2); margin: 0; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-foot { align-items: center; padding-inline: 0; }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-actions,
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-buttons { flex-direction: column; gap: var(--space-1); }
  :root[data-side="rail"] .wa-sidebar:not([data-open]) .wa-sidebar-buttons .wl-ibtn { width: var(--control-h-md); }
  /* opened by the mouse, focus or a tap: the whole menu over the page, which stays where it is. It is uncovered
     from the strip outwards with clip-path, which needs no new layout while it runs */
  :root[data-side="rail"] .wa-sidebar[data-open] { width: calc(var(--space-16) * 4); box-shadow: var(--shadow-lg);
    animation: wa-side-open var(--dur-base) var(--ease-standard); }
  @keyframes wa-side-open {
    from { clip-path: inset(0 calc(100% - var(--rail-w)) 0 0); }
    to { clip-path: inset(0 calc(var(--space-6) * -1) 0 0); }
  }
}

/* dark page: the grey panel already stands apart, no border needed */
[data-theme="dark"] .wa-sidebar[data-theme="dark"] { border-right-color: transparent; }

/* Reseller editor: the accent colour picker beside its hex field, and a logo preview on the
   background the logo is made for, whatever the console's own theme */
.wa-swatch { inline-size: var(--space-12); block-size: var(--space-10); padding: var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); cursor: pointer; }
.wa-logo-preview { display: flex; align-items: center; justify-content: center; min-block-size: var(--space-20); padding: var(--space-4); margin-block-end: var(--space-3); color: var(--grey-500); }
.wa-logo-preview[data-bg="light"] { background: var(--white); border-color: var(--grey-200); }
.wa-logo-preview[data-bg="dark"] { background: var(--black); border-color: var(--grey-800); }
.wa-logo-preview .wa-muted { color: inherit; }
.wa-logo-preview img { max-inline-size: 100%; max-block-size: var(--space-12); inline-size: auto; block-size: auto; object-fit: contain; }
/* Reseller list: the host name opens the reseller's member app in a new tab */
.wa-hostlink { display: inline-flex; align-items: center; gap: var(--space-1); }
.wa-favicon-preview { gap: var(--space-6); }
.wa-favicon-preview img { inline-size: var(--space-12); block-size: var(--space-12); }
/* the home screen icon's rounded square, roughly as iOS draws it */
.wa-favicon-preview img.wa-touch-icon { border-radius: 22%; box-shadow: 0 0 0 1px var(--grey-200); }

/* ---------- tasks ---------- */
/* a section heading with a link beside it (the dashboard's Your tasks) */
.wa-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.wa-section-head h2 { margin: 0; font: var(--type-h3); }
.wa-dash-tasks { margin-top: var(--space-10); }

/* list filters: the search field over the two selects on phones, one row from 700px */
.wa-filters { display: grid; gap: var(--space-3); }
.wa-filters .wl-field { gap: var(--space-1); }
.wa-filters .wl-field > label { font: var(--type-caption); color: var(--text-secondary); }
.wa-filters .wl-select { height: var(--control-h-lg); }
@media (min-width: 700px) {
  /* each select is as wide as its longest choice */
  .wa-filters { grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: max-content; align-items: end; }
  .wa-filters .wl-select { min-width: calc(var(--space-24) * 2); }
  .wa-filters-q > label { display: block; }
}
.wa-notice { margin-bottom: var(--space-4); }

/* task rows: the name, the parent of a subtask under it, due date and progress */
.wa-tasks td { vertical-align: middle; }
.wa-task-link { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; color: var(--text-primary); }
.wa-task-link:hover { color: var(--text-primary); text-decoration: none; }
.wa-task-link strong { font: var(--type-label); overflow-wrap: anywhere; }
.wa-task-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.wa-task-parent { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; font: var(--type-caption); color: var(--text-secondary); }
a.wa-task-parent:hover { color: var(--text-primary); }
.wa-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--type-caption); color: var(--text-secondary); }
.wa-task-meta:empty { display: none; }
@media (min-width: 700px) { .wa-task-meta.wa-col-narrow { display: none; } }
.wa-task-due { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); white-space: nowrap; }
.wa-tasks tr[data-overdue="true"] td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
/* comments: a narrow column, the icon as its heading, the number in a round bubble (a count chip, so pill) */
.wa-tasks .wa-col-comments { width: 1%; padding-left: var(--space-2); padding-right: var(--space-2); text-align: center; white-space: nowrap; }
.wa-tasks th.wa-col-comments .wl-icon { vertical-align: middle; color: var(--text-secondary); }
/* people: the faces on a task overlap, the responsible first with a gold ring; on hover, focus or a tap
   (admin.js sets aria-expanded) they spread out and their names show in a small panel under them */
.wa-tasks .wa-col-people { width: 1%; padding-left: var(--space-2); padding-right: var(--space-4); white-space: nowrap; }
.wa-tasks th.wa-col-people .wl-icon { vertical-align: middle; color: var(--text-secondary); }
.wa-faces { position: relative; display: inline-flex; align-items: center;
  min-height: var(--control-h-sm); padding: 0; border: 0; border-radius: var(--radius-control); background: none; cursor: pointer; }
.wa-faces:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-faces-stack { display: inline-flex; align-items: center; }
.wa-face { position: relative; box-shadow: 0 0 0 2px var(--surface-card); transition: margin var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.wa-face + .wa-face { margin-left: calc(-1 * var(--space-1)); }
/* room for the spread-out faces, so the table does not move when they open; on a phone the task's name needs it */
@media (min-width: 700px) { .wa-faces { min-width: calc(var(--space-16) + var(--space-12)); } }
.wa-face:nth-child(1) { z-index: 5; }
.wa-face:nth-child(2) { z-index: 4; }
.wa-face:nth-child(3) { z-index: 3; }
.wa-face:nth-child(4) { z-index: 2; }
.wa-face[data-responsible] { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 3px var(--accent); }
/* the responsible stands a little apart; everyone else is a quieter face in the stack after them */
.wa-face[data-responsible] + .wa-face { margin-left: var(--space-1); }
.wa-face:not([data-responsible]) { background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-strong); }
.wa-face[data-more] { background: var(--surface-sunken); color: var(--text-secondary); }
.wa-faces:hover .wa-face + .wa-face, .wa-faces:focus-visible .wa-face + .wa-face, .wa-faces[aria-expanded="true"] .wa-face + .wa-face { margin-left: var(--space-1); }
.wa-faces:hover .wa-face, .wa-faces:focus-visible .wa-face, .wa-faces[aria-expanded="true"] .wa-face { transform: translateY(-1px); }
.wa-faces-names { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 10; display: flex; flex-direction: column; gap: var(--space-1);
  min-width: calc(var(--space-24) * 1.75); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
  background: var(--surface-raised); box-shadow: var(--shadow-md); text-align: left; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--space-1)));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.wa-faces:hover .wa-faces-names, .wa-faces:focus-visible .wa-faces-names, .wa-faces[aria-expanded="true"] .wa-faces-names {
  opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.wa-faces-name { font: var(--type-caption); color: var(--text-primary); }
.wa-faces-name em { font-style: normal; color: var(--text-secondary); }
/* the names may reach past the card, so a task table rounds its corner cells instead of clipping */
.wa-table-wrap:has(> .wa-tasks) { overflow: visible; }
.wa-tasks thead th:first-child { border-top-left-radius: var(--radius-card); }
.wa-tasks thead th:last-child { border-top-right-radius: var(--radius-card); }
.wa-tasks tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-card); }
.wa-tasks tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-card); }
.wa-comment-count { display: inline-grid; place-items: center; min-width: var(--space-6); height: var(--space-6); padding: 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  font: var(--type-caption); font-weight: var(--weight-semibold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wa-progress { display: flex; align-items: center; gap: var(--space-2); min-width: calc(var(--space-24) + var(--space-6)); }
.wa-progress .wl-prog { flex: 1; }
.wa-progress-num { flex: none; font: var(--type-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .wa-tasks td:first-child { max-width: 0; width: 100%; }
}

/* one task: header, facts, tabs (on its page and in the dialog) */
.wa-task-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.wa-task-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.wa-task-title h1 { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.wa-task-title h1:focus { outline: none; }
.wl-dlg .wa-task-title h1 { font: var(--type-h3); }
.wa-avatar[data-size="sm"] { width: var(--space-6); height: var(--space-6); font: var(--type-caption); }
.wa-tab-count { margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-badge); background: var(--surface-sunken);
  font: var(--type-caption); color: var(--text-secondary); }
.wa-task .wa-tabpanels > .wa-pane, .wl-dlg .wa-tabpanels > .wa-pane { max-width: none; }
.wl-dlg .wa-tabpanels { margin-top: var(--space-4); }
.wl-dlg .wa-pane { --wa-pane-pad: var(--space-5); }
.wa-row[data-cols="2"] { grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 600px) { .wa-row[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wa-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* the confirmation dialog (layouts/admin.html.twig, admin.js) */
.wa-confirm p { margin: 0 0 var(--space-5); font: var(--type-body); overflow-wrap: anywhere; }
.wa-confirm-actions { justify-content: flex-end; }
/* a task's Save and Delete on one bar at the foot of its card, kept in view while the form scrolls (page or dialog) */
.wa-task-bar { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin: 0 calc(-1 * var(--wa-pane-pad)) calc(-1 * var(--wa-pane-pad)); padding: var(--space-3) var(--wa-pane-pad);
  border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--surface-card); }
.wa-task-bar [data-danger] { color: var(--danger-fg); }
.wa-task-bar-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* subtasks as a checklist */
.wa-checklist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wa-check-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); border-bottom: 1px solid var(--border-subtle); }
.wa-check-row:last-child { border-bottom: 0; }
.wa-check-row form { margin: 0; }
.wa-check-btn { color: var(--text-muted); }
.wa-check-row[data-done="true"] .wa-check-btn { color: var(--accent); }
.wa-check-name { flex: 1; min-width: 0; padding: var(--space-2) 0; font: var(--type-body-sm); color: var(--text-primary); overflow-wrap: anywhere; }
.wa-check-row[data-done="true"] .wa-check-name { color: var(--text-secondary); text-decoration: line-through; }
.wa-check-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }

/* people on a task */
.wa-people { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wa-people-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle); }
.wa-people-row:last-child { border-bottom: 0; }
.wa-people-row .wa-person { flex: 1 1 calc(var(--space-24) * 2); }
.wa-people-acts { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 0 auto; }

/* a field with its button beside it (new subtask, add a person), and its suggestions under it */
.wa-inline-form { margin-top: var(--space-2); }
.wa-inline-row { position: relative; display: flex; gap: var(--space-2); }
.wa-inline-row .wl-input { flex: 1; min-width: 0; }
.wa-suggest-list { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 5; max-height: calc(var(--space-24) * 3);
  overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
  background: var(--surface-card); box-shadow: var(--shadow-md); }
.wa-suggest-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer; }
.wa-suggest-item:hover, .wa-suggest-item[aria-selected="true"] { background: var(--surface-sunken); }
.wa-suggest-group + .wa-suggest-group { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
.wa-suggest-group > ul { margin: 0; padding: 0; list-style: none; }
.wa-suggest-label { display: block; padding: var(--space-2) var(--space-2) var(--space-1); font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.wa-suggest-empty { padding: var(--space-3); font: var(--type-body-sm); color: var(--text-secondary); }
/* in the dialog the change timeline keeps to one column, whatever the window's width */
.wl-dlg .wa-tabpanels > .wa-pane-wide { padding: 0; }
@media (min-width: 900px) {
  .wl-dlg .wa-timeline { padding: 0 0 0 var(--space-6); }
  .wl-dlg .wa-timeline::before { left: var(--space-2); transform: none; }
  .wl-dlg .wa-change, .wl-dlg .wa-change[data-side="mine"] { width: auto; align-self: stretch; }
  .wl-dlg .wa-change-dot, .wl-dlg .wa-change[data-side="mine"] .wa-change-dot { left: calc(var(--space-2) - var(--space-6) - 4px); right: auto; }
}
/* the dialog moves focus to its heading or message so it is read out; no ring for that */
.wa-task-title h1:focus-visible, .wa-notice:focus, .wa-notice:focus-visible { outline: none; box-shadow: none; }

/* ---------- one task as a document (tasks/task.html.twig, document.html.twig, rail.html.twig) ---------- */
/* two tabs, Oppgave and Endringer: above the layout on the task's page, the dialog's title bar in the dialog */
.wa-task-tabs { margin-bottom: var(--space-5); }
.wl-dlg-head .wa-task-tabs { align-self: stretch; margin: 0; gap: var(--space-4); border-bottom: 0; }
.wl-dlg-head .wa-task-tabs .wl-tab { height: 100%; min-height: var(--control-h-md); }
.wl-dlg-head .wa-task-tabs .wl-tab[aria-selected="true"]::after { bottom: -1px; }
.wl-dlg-head:has(.wa-task-tabs) { padding-top: 0; padding-bottom: 0; min-height: calc(var(--control-h-md) + var(--space-4)); }
.wa-task-pane { display: flex; flex-direction: column; min-height: 100%; }
.wa-task-pane .wa-task-bar { margin-top: auto; --wa-pane-pad: 0; padding-left: 0; padding-right: 0; border-radius: 0; }
.wl-dlg .wa-task-changes { padding: 0; }

/* the document beside its facts from 1000px; below that the facts come first, two to a row */
.wa-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--space-6); }
.wa-doc-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; order: 2; }
.wa-rail { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
/* below 1000px the document's parts are laid out with the facts: the name, then the facts, then the rest */
@media (max-width: 999px) {
  .wa-doc { gap: var(--space-4); }
  .wa-doc-body { display: contents; }
  .wa-doc-body > * { order: 3; }
  .wa-doc-body > .wa-task-parent, .wa-doc-body > [data-edit="name"] { order: 0; }
  .wa-doc-body > .wa-comments-open { order: 2; justify-self: start; }
  .wa-rail { order: 1; }
}
@media (min-width: 1000px) {
  .wa-doc { grid-template-columns: minmax(0, 1fr) calc(var(--space-24) * 2.75); gap: var(--space-8); align-items: start; }
  .wa-doc-body { order: 0; }
  .wa-rail { order: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-left: var(--space-5); border-left: 1px solid var(--border-subtle); }
}
.wa-rail-row { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.wa-rail dt { font: var(--type-caption); color: var(--text-secondary); }
.wa-rail dd { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font: var(--type-body-sm); }
.wa-rail dd.wa-rail-text { display: block; }
.wa-rail .wa-progress { width: 100%; min-width: 0; }
.wa-rail-form { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.wa-rail-error { flex-basis: 100%; }
.js .wa-rail-save { display: none; }

/* a fact that opens or changes something: quiet like text until the pointer is over it */
.wa-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); margin-left: calc(-1 * var(--space-1));
  padding: 0 var(--space-2) 0 var(--space-1); border: 1px solid transparent; border-radius: var(--radius-control); color: var(--text-primary);
  font: var(--type-body-sm); cursor: pointer; list-style: none; transition: var(--transition-color); }
.wa-chip::-webkit-details-marker { display: none; }
.wa-chip:hover, details[open] > .wa-chip, .wa-chip:focus-within { border-color: var(--border-subtle); background: var(--surface-sunken); }
.wa-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-chip > .wl-icon { color: var(--text-secondary); }
.wa-chip-plus { display: inline-grid; place-items: center; color: var(--text-secondary); }
.wa-rail-date .wl-input { width: auto; height: calc(var(--control-h-sm) - 2px); padding: 0; border: 0; background: none; box-shadow: none; font: var(--type-body-sm); }
.wa-rail-date .wl-input:focus { box-shadow: none; }
.wa-avatar-empty { background: var(--surface-sunken); color: var(--text-secondary); }
/* the status: a badge that is a select */
.wa-badge-select { position: relative; display: inline-flex; align-items: center; }
.wa-badge-select select { appearance: none; -webkit-appearance: none; height: var(--space-6); margin: 0; padding: 0 calc(var(--space-2) + 16px) 0 var(--space-2);
  border: 0; border-radius: var(--radius-badge); background: var(--surface-sunken); color: var(--text-secondary);
  font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; cursor: pointer; }
.wa-badge-select select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-badge-select .wl-icon { position: absolute; right: var(--space-1); pointer-events: none; color: currentColor; opacity: .8; }
.wa-badge-select[data-tone="info"] select { background: var(--info-soft); color: var(--info-fg); }
.wa-badge-select[data-tone="success"] select { background: var(--success-soft); color: var(--success-fg); }
.wa-badge-select[data-tone="warning"] select { background: var(--warning-soft); color: var(--warning-fg); }
.wa-badge-select[data-tone="info"] .wl-icon { color: var(--info-fg); }
.wa-badge-select[data-tone="success"] .wl-icon { color: var(--success-fg); }
.wa-badge-select[data-tone="warning"] .wl-icon { color: var(--warning-fg); }
/* the panels under the responsible and the people */
.wa-rail-panel { left: 0; right: auto; width: min(calc(var(--space-24) * 3.5), calc(100vw - var(--space-8))); }
.wa-pick-item { min-height: var(--touch-min); width: 100%; }
.wa-pick-item[aria-current="true"] { background: var(--surface-sunken); cursor: default; }
.wa-pick-item .wa-person-txt span { font: var(--type-caption); color: var(--text-secondary); }
.wa-pick-add { color: var(--text-secondary); border-top: 1px solid var(--border-subtle); border-radius: 0; padding-top: var(--space-2); margin-top: var(--space-1); }
.wa-people-panel .wa-people-row { flex-wrap: nowrap; padding: var(--space-2) 0; }
.wa-menu-panel .wa-people-acts { flex-direction: row; align-items: center; flex: none; }
.wa-menu-panel .wa-people-row + .wa-people-row form, .wa-menu-panel .wa-people form + form { border-top: 0; padding-top: 0; }
.wa-people-panel .wa-people-row .wa-person-txt { min-width: 0; }
.wa-people-panel .wa-people-row .wa-person-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-people-panel .wa-people-row .wa-person { flex: 1 1 auto; }
.wa-people-panel .wa-inline-form { margin-top: var(--space-1); }
@media (min-width: 1000px) { .wa-rail .wa-rail-panel { left: auto; right: 0; } }

/* the name and the description, edited where they stand */
.wa-doc-title { margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.wl-dlg .wa-doc-title { font: var(--type-h3); }
.wa-doc-title:focus, .wa-doc-title:focus-visible { outline: none; box-shadow: none; }
.wa-edit-show { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1);
  border: 0; border-bottom: 1px dashed transparent; border-radius: var(--radius-xs); background: none; color: inherit; font: inherit;
  letter-spacing: inherit; text-align: left; cursor: text; }
.wa-edit-show > .wl-icon { flex: none; margin-top: .3em; color: var(--text-muted); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.wa-edit-show:hover, .wa-edit-show:focus-visible { border-bottom-color: var(--border-strong); background: var(--surface-sunken); }
.wa-edit-show:hover > .wl-icon, .wa-edit-show:focus-visible > .wl-icon { opacity: 1; }
.wa-edit-show:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-doc-desc { display: block; flex: 1; min-width: 0; font: var(--type-body); overflow-wrap: anywhere; }
.wa-doc-desc a { position: relative; }
.wa-doc-empty { color: var(--text-muted); }
.wa-edit-form { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.wa-edit-title { height: auto; padding: var(--space-1) var(--space-2); font: var(--type-h3); letter-spacing: var(--tracking-tight); }
.wa-edit-text { min-height: calc(var(--space-24) * 1.25); font: var(--type-body); resize: vertical; }
.wa-edit-actions { display: flex; gap: var(--space-2); }
/* with script: the value shows until it is pressed; without: the form always, the heading plain above it */
.js .wa-edit .wa-edit-form, .js .wa-edit[data-editing] .wa-edit-show, .js .wa-edit-plain { display: none; }
.js .wa-edit[data-editing] .wa-edit-form { display: flex; }
html:not(.js) .wa-edit-show { display: none; }
/* without script the name's field is what shows it; the heading stays for screen readers */
html:not(.js) .wa-edit-plain { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wa-saved { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-caption); color: var(--success-fg); animation: wl-fade var(--dur-slow) var(--ease-out); }
.wa-saved .wl-icon { color: var(--success); }
.wa-doc-body .wa-comments-open { align-self: flex-start; }

/* the subtasks, under the description */
.wa-doc-section { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.wa-doc-section h2 { display: flex; align-items: center; margin: 0; font: var(--type-label); font-size: var(--text-md); }

/* ---------- task comments (tasks/comments.html.twig, comments.js) ---------- */
/* the task on the left and its comments on the right from 1000px; below that the comments are a panel from the
   right behind the Comments button, and without script they simply follow the task */
.wa-task-main { min-width: 0; }
.wa-comments { display: flex; flex-direction: column; min-height: 0; margin-top: var(--space-6); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); background: var(--surface-card); }
.wa-comments-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: calc(var(--control-h-md) + var(--space-4)); padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.wa-comments-head h2 { display: flex; align-items: center; margin: 0; font: var(--type-label); font-size: var(--text-md); }
.wa-comments-close { display: none; }
.wa-comments-log { flex: 1; min-height: calc(var(--space-24) * 2); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4); }
.wa-comments-empty { margin: 0 0 var(--space-4); font: var(--type-body-sm); }
[data-thread] { display: flex; flex-direction: column; gap: var(--space-4); }
.wa-comments-open { align-self: flex-start; }
.wa-comments-open .wa-tab-count { margin-left: var(--space-1); }

/* a comment: someone else's on the left with their initials, the viewer's own on the right */
.wa-comment { display: flex; align-items: flex-start; gap: var(--space-2); }
.wa-comment[data-mine] { justify-content: flex-end; }
.wa-comment-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; max-width: 88%; }
.wa-comment[data-mine] .wa-comment-main { align-items: flex-end; }
.wa-comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); min-height: var(--control-h-sm);
  font: var(--type-caption); color: var(--text-secondary); }
.wa-comment-meta strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.wa-comment-menu .wa-menu-panel { min-width: calc(var(--space-24) * 1.5); }
.wa-comment-menu [data-danger] { color: var(--danger-fg); }
.wa-comment-bubble { display: flex; flex-direction: column; gap: var(--space-2); max-width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.wa-comment[data-mine] .wa-comment-bubble { background: var(--surface-sunken); }
.wa-comment-text { font: var(--type-body-sm); overflow-wrap: anywhere; }
.wa-comment-gone { margin: 0; font: var(--type-caption); color: var(--text-muted); }
.wa-mention { font-weight: var(--weight-semibold); color: var(--text-primary); }
a.wa-mention { text-decoration: none; }
a.wa-mention:hover { text-decoration: underline; }
.wa-comment-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
.wa-comment-images[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.wa-comment-images a { display: block; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-sunken); }
.wa-comment-images img { display: block; width: 100%; height: auto; max-height: calc(var(--space-24) * 3); object-fit: cover; }
.wa-comment-images[data-count="1"] img { object-fit: contain; }

/* the box to write in: one line that grows to four (comments.js), the images pasted into it above it */
.wa-comment-form { flex: none; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-3);
  border-top: 1px solid var(--border-subtle); }
.wa-comment-compose { position: relative; display: flex; align-items: flex-end; gap: var(--space-2); }
.wa-comment-input { flex: 1; min-width: 0; height: auto; min-height: var(--control-h-md); padding: var(--space-2) var(--space-3);
  resize: none; overflow-y: hidden; font: var(--type-body-sm); }
.wa-comment-compose .wl-ibtn, .wa-comment-compose .wl-btn { flex: none; }
.wa-mention-list { top: auto; bottom: calc(100% + var(--space-1)); }
.wa-comment-files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.wa-comment-file { position: relative; width: calc(var(--space-16) + var(--space-2)); height: calc(var(--space-16) + var(--space-2));
  border: 1px solid var(--border-subtle); border-radius: var(--radius-control); overflow: hidden; background: var(--surface-sunken); }
.wa-comment-file img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wa-comment-file[data-busy] img { opacity: .5; }
.wa-comment-file .wl-ibtn { position: absolute; top: var(--space-1); right: var(--space-1); width: var(--space-6); height: var(--space-6);
  border-radius: var(--radius-xs); background: var(--surface-card); }
.wa-comment-form[data-busy] .wa-comment-input { opacity: .6; }
/* a comment being changed: the same box, in its bubble */
.wa-comment-edit { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; min-width: calc(var(--space-24) * 2.5); margin: 0; }
.wa-comment-edit .wa-actions { justify-content: flex-end; }

/* a narrow screen, with script: the comments are a panel from the right */
@media (max-width: 999px) {
  .js .wa-comments { position: fixed; inset: 0 0 0 auto; z-index: 30; width: min(100%, calc(var(--space-24) * 4.5)); margin: 0;
    border-width: 0 0 0 1px; border-radius: 0; box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  .js .wa-comments[data-open] { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
  .js .wa-comments-close { display: inline-grid; }
  .js .wa-comment-form { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
}
/* a wide screen: two columns. On the page the comments stay in view as it scrolls; in the dialog each column
   scrolls on its own, and the dialog is as tall as the window allows */
@media (min-width: 1000px) {
  .wa-comments-open { display: none; }
  .wa-task-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(var(--space-24) * 3.25), calc(var(--space-24) * 4));
    gap: var(--space-6); align-items: start; }
  .wa-task-layout > .wa-comments { position: sticky; top: var(--space-6); height: calc(100dvh - var(--space-12)); margin: 0; }
  .wl-dlg[data-task-dialog]:has(.wa-task-layout) { max-width: var(--content-max); height: calc(100dvh - 2 * var(--space-8)); }
  .wl-dlg:has(.wa-task-layout) .wl-dlg-body { display: flex; padding: 0; overflow: hidden; }
  .wl-dlg .wa-task-layout { flex: 1; gap: 0; height: 100%; align-items: stretch; }
  /* no padding at the foot: the save bar sticks to the inside of it, and would leave a gap that shows what is under it */
  .wl-dlg .wa-task-main { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5) var(--space-5) 0; }
  .wl-dlg .wa-task-layout > .wa-comments { position: static; height: auto; border-width: 0 0 0 1px; border-radius: 0; }
}

/* ---------- task board ---------- */
/* the head of the task pages: title, list/board switch, New task */
.wa-tasks-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.wa-tasks-head h1 { flex: 1 1 auto; }
.wa-tasks-head .wl-tab { gap: var(--space-2); }
@media (max-width: 599px) { .wa-tasks-head .wl-tabs { order: 3; } }
.wa-board-intro { margin-bottom: var(--space-5); max-width: var(--content-narrow); }

/* columns side by side, scrolling sideways when they outgrow the page */
.wa-board { display: flex; align-items: flex-start; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4);
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.wa-board[aria-busy="true"] { cursor: progress; }
.wa-col { flex: none; display: flex; flex-direction: column; gap: var(--space-3); width: min(calc(var(--space-24) * 3), 85vw);
  padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-sunken);
  scroll-snap-align: start; transition: var(--transition-color); }
.wa-col[data-over="true"] { border-color: var(--accent); }
.wa-col[data-kind="inbox"] { background: var(--surface-card); }
.wa-col-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); }
.wa-col-head h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--type-label); }
.wa-col-head h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-col-head .wa-tab-count { margin: 0; background: var(--surface-card); }
.wa-col[data-kind="inbox"] .wa-col-head .wa-tab-count { background: var(--surface-sunken); }
.wa-col-head .wl-ibtn { width: var(--control-h-sm); height: var(--control-h-sm); }
.wa-col-note, .wa-col-empty { margin: 0; font: var(--type-caption); color: var(--text-secondary); }
.wa-col-empty { padding: var(--space-4) var(--space-2); text-align: center; }
.wa-col-list { display: flex; flex-direction: column; gap: var(--space-2); min-height: var(--space-12); margin: 0; padding: 0; list-style: none; }
.wa-col-list:has([data-card]) + .wa-col-empty { display: none; }
.wa-col-more { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-caption); color: var(--text-secondary); }
.wa-col-add { gap: var(--space-2); background: transparent; border-style: dashed; }

/* a card: flat and bordered; it lifts only while it is being dragged */
.wa-kcard { display: flex; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-card); cursor: grab;
  transition: var(--transition-color); }
.wa-kcard:hover { border-color: var(--border-strong); }
.wa-kcard[data-overdue="true"] { box-shadow: inset 3px 0 0 var(--danger); }
.wa-kcard[data-dragged="true"] { opacity: .5; border-style: dashed; }
.wa-board[data-dragging="true"] .wa-kcard { cursor: grabbing; }
.wa-kcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wa-kcard-name { font: var(--type-label); color: var(--text-primary); overflow-wrap: anywhere; }
.wa-kcard-name:hover { color: var(--text-primary); }
.wa-kcard-name:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.wa-kcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--type-caption); color: var(--text-secondary); }
.wa-kcard-due { display: inline-flex; align-items: center; gap: var(--space-1); }
.wa-col[data-kind="done"] .wa-kcard-name, .wa-col[data-kind="discarded"] .wa-kcard-name { color: var(--text-secondary); }
.wa-col[data-kind="discarded"] .wa-kcard-name { text-decoration: line-through; }
.wa-kcard .wa-progress { min-width: 0; }
.wa-kcard .wl-ibtn { width: var(--control-h-sm); height: var(--control-h-sm); color: var(--text-secondary); }

/* menus: a <details> whose panel floats under its button */
.wa-menu { position: relative; }
.wa-menu > summary { list-style: none; }
.wa-menu > summary::-webkit-details-marker { display: none; }
.wa-menu-panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 10; display: flex; flex-direction: column; gap: var(--space-1);
  min-width: calc(var(--space-24) * 2); padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
  background: var(--surface-card); box-shadow: var(--shadow-md); cursor: default; }
.wa-menu-panel form { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.wa-menu-panel form + form { padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
.wa-menu-title { margin: 0; padding: var(--space-1) var(--space-2); font: var(--type-caption); color: var(--text-secondary); }
.wa-menu-item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); padding: 0 var(--space-2); border: 0;
  border-radius: var(--radius-sm); background: none; color: var(--text-primary); font: var(--type-body-sm); text-align: left; cursor: pointer; }
.wa-menu-item:hover { background: var(--surface-sunken); }
.wa-menu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-menu-item[data-tone="danger"] { color: var(--danger-fg); }
.wa-menu-rename { padding: 0 var(--space-1) var(--space-1); }
.wa-menu-rename .wl-input { height: var(--control-h-sm); }
/* the board page uses the whole width */
.wa-content-wide { max-width: none; }
/* Complete and Discarded share the last column, one over the other; each scrolls on its own */
.wa-piles { flex: none; display: flex; flex-direction: column; gap: var(--space-4); }
.wa-piles .wa-col-list { max-height: 40vh; max-height: 40dvh; overflow-y: auto; }
/* the person's own columns: part of the board's row on a phone; their own sideways scroll on a wide screen,
   so the Inbox and the piles stay in view */
.wa-board-mine { display: contents; }
@media (min-width: 900px) {
  .wa-board { overflow: visible; padding-bottom: 0; }
  .wa-board-mine { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-4); overflow-x: auto;
    padding-bottom: var(--space-4); scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .wa-board .wa-col { width: calc(var(--space-24) * 3 - var(--space-8)); }
}
/* the profile's time zone status line takes no room until it says something */
[data-timezone-status]:empty { display: none; }

/* the profile's Notifications card: the state on this device, and the devices with push on */
.wa-push-status { margin: 0; font: var(--type-body-sm); color: var(--text-primary); }
.wa-push-status:empty { display: none; }
[data-push][aria-busy="true"] .wl-btn { opacity: .6; pointer-events: none; }
.wa-subtitle { margin: 0 0 var(--space-2); font: var(--type-label); }
.wa-devices { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.wa-device { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.wa-device:last-child { border-bottom: 0; }
.wa-device > .wl-icon { color: var(--text-secondary); }
.wa-device-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-device-txt strong { font: var(--type-label); }
.wa-device-txt span { font: var(--type-caption); color: var(--text-secondary); }

/* products (/products/): a square thumbnail or the package icon, the SKU in the mono face, the prices
   in a row; a disabled product's row is muted */
.wa-thumb { flex: none; display: grid; place-items: center; width: var(--space-10); height: var(--space-10); overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); }
.wa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-thumb[data-size="lg"] { width: var(--space-16); height: var(--space-16); border-radius: var(--radius-control); }
/* a video's thumbnail is 16:9 (videos/) */
.wa-thumb[data-shape="wide"] { width: calc(var(--space-10) * 16 / 9); }
.wa-thumb[data-shape="wide"][data-size="lg"] { width: calc(var(--space-16) * 16 / 9); }
.wa-video-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-media);
  border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.wa-product { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--text-primary); }
.wa-product:hover { color: var(--text-primary); text-decoration: none; }
.wa-product-txt { display: flex; flex-direction: column; min-width: 0; }
.wa-product-txt strong { font: var(--type-label); overflow-wrap: anywhere; }
/* a video's type under its title in the list, when it is a recording */
.wa-video-type { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-1); font: var(--type-caption); color: var(--text-secondary); }
.wa-sku { font: var(--type-caption); font-family: var(--font-mono); color: var(--text-secondary); }
.wa-sku-input { font-family: var(--font-mono); text-transform: uppercase; }
.wa-prices-sum { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); white-space: nowrap; }
.wa-currency { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }
.wa-table tbody tr[data-disabled] td { color: var(--text-muted); }
.wa-table tbody tr[data-disabled] .wa-product-txt strong { color: var(--text-secondary); }
.wa-table tbody tr[data-disabled] .wa-thumb { opacity: .5; }

/* the product editor: the product as a document beside a rail (picture, status, offered to) */
.wa-pane-full { max-width: none; }
.wa-tabpanels > .wa-pane-full { max-width: none; }
.wa-product-layout { display: flex; flex-direction: column; gap: var(--space-8); }
.wa-product-doc { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.wa-product-rail { order: -1; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.wa-row2, .wa-row3 { display: grid; gap: var(--space-5); }
.wa-rail-block { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-offers { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-check-note { display: block; font: var(--type-caption); color: var(--text-secondary); }
.wa-prices-note { margin-top: var(--space-2); font: var(--type-caption); }
.wa-form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.wa-form-foot-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wa-form-foot-more [data-danger] { color: var(--danger-fg); }
@media (min-width: 600px) {
  .wa-row2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .wa-row2-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .wa-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .wa-product-layout { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--space-24) * 3); align-items: start; }
  .wa-product-rail { order: 0; padding-left: var(--space-6); border-left: 1px solid var(--border-subtle); }
}

/* the picture: a square that is a label around the file input; a picture dropped on it (or chosen)
   shows at once and is saved with the form (products.js) */
.wa-dropzone { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: calc(var(--space-24) * 3); overflow: hidden;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface-sunken); color: var(--text-secondary);
  text-align: center; cursor: pointer; transition: var(--transition-color); }
.wa-dropzone:hover { border-color: var(--text-muted); }
.wa-dropzone:focus-within { box-shadow: var(--focus-ring); }
.wa-dropzone[data-has-image] { border: 1px solid var(--border-subtle); }
.wa-dropzone-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-dropzone-empty, .wa-dropzone-over { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); font: var(--type-body-sm); }
.wa-dropzone-empty[hidden] { display: none; }
.wa-dropzone-empty .wl-icon { color: var(--text-muted); }
.wa-dropzone-over { display: none; }
.wa-dropzone[data-over] { border: 2px dashed var(--accent); background: var(--surface-card); color: var(--text-primary); }
.wa-dropzone[data-over] .wa-dropzone-img, .wa-dropzone[data-over] .wa-dropzone-empty, .wa-dropzone[data-over] .wa-dropzone-change { display: none; }
.wa-dropzone[data-over] .wa-dropzone-over { display: flex; }
.wa-dropzone[data-over] .wa-dropzone-over .wl-icon { color: var(--accent); }
.wa-dropzone-change { position: absolute; right: var(--space-2); bottom: var(--space-2); }
.wa-dropzone-change[hidden] { display: none; }
.wa-dropzone[data-removed] .wa-dropzone-img, .wa-dropzone[data-removed] .wa-dropzone-change { opacity: .3; }

/* the price table: one row per market; an empty amount means not sold there, and its row is quiet */
.wa-prices-wrap { overflow-x: auto; }
.wa-prices { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.wa-prices thead th { padding: 0 var(--space-2) var(--space-2); text-align: left; font: var(--type-caption); color: var(--text-secondary); }
.wa-prices tbody th, .wa-prices td { padding: var(--space-1) var(--space-2); border-top: 1px solid var(--border-subtle); vertical-align: middle; text-align: left; font-weight: inherit; }
.wa-prices th:first-child, .wa-prices td:first-child { padding-left: 0; }
.wa-prices .wl-input { height: var(--control-h-sm); }
.wa-amount { display: flex; align-items: center; gap: var(--space-2); }
.wa-amount .wl-input { width: calc(var(--space-24) + var(--space-8)); text-align: right; font-variant-numeric: tabular-nums; }
.wa-vat { display: flex; align-items: center; gap: var(--space-1); }
.wa-vat .wl-input { width: calc(var(--space-16) + var(--space-4)); text-align: right; font-variant-numeric: tabular-nums; }
.wa-amount .wa-currency { min-width: var(--space-8); }
.wa-market { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.wa-market code { font: var(--type-caption); font-family: var(--font-mono); color: var(--text-muted); }
.wa-prices tr[data-empty] .wa-market, .wa-prices tr[data-empty] .wa-vat, .wa-prices tr[data-empty] .wl-check { color: var(--text-muted); }
.wa-prices tr[data-invalid="true"] .wl-input[aria-invalid="true"] { border-color: var(--danger); }
.wa-prices .wa-prices-error td { border-top: 0; padding-top: 0; }
.wa-prices .wa-prices-error .wl-hint { color: var(--danger-fg); }
/* on a phone each market is a small block: its name, then the price, then VAT and Incl. VAT side by side */
@media (max-width: 599px) {
  .wa-prices, .wa-prices tbody { display: block; }
  .wa-prices thead { display: none; }
  .wa-prices tr[data-price-row] { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
  .wa-prices tr[data-price-row] > * { padding: 0; border-top: 0; }
  .wa-prices tr[data-price-row] > th, .wa-prices tr[data-price-row] > td:nth-child(2) { grid-column: 1 / -1; }
  .wa-prices .wa-prices-error { display: block; }
  .wa-prices .wa-prices-error td { display: block; padding: 0 0 var(--space-2); }
}

/* ---------- orders (/orders/) ---------- */
.wa-num, .wa-table th.wa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-order-number { font: var(--type-label); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.wa-order-number:hover { color: var(--text-primary); }
/* the head: customer, sold by and market side by side on a wide screen */
.wa-order-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.wa-order-head .wa-suggest { position: relative; }
.wa-order-value { margin: 0; min-height: var(--control-h-md); display: flex; align-items: center; }
@media (min-width: 900px) {
  .wa-order-head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); align-items: start; }
}
/* the lines: a product and its description, quantity, unit price, VAT, then what the line comes to */
.wa-lines-wrap { overflow-x: auto; }
.wa-lines { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.wa-lines thead th { padding: 0 var(--space-2) var(--space-2); text-align: left; font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; }
.wa-lines thead th.wa-num { text-align: right; }
.wa-lines td { padding: var(--space-2); border-top: 1px solid var(--border-subtle); vertical-align: top; }
.wa-lines td.wa-num { padding-top: calc(var(--space-2) + var(--space-2)); }
.wa-lines th:first-child, .wa-lines td:first-child { padding-left: 0; }
.wa-lines th:last-child, .wa-lines td:last-child { padding-right: 0; }
.wa-lines .wl-input { height: var(--control-h-sm); }
.wa-line-item { display: flex; flex-direction: column; gap: var(--space-1); min-width: calc(var(--space-24) * 2.5); }
.wa-line-item .wa-sku { display: block; }
.wa-line-qty .wl-input { width: calc(var(--space-12) + var(--space-4)); text-align: right; font-variant-numeric: tabular-nums; }
.wa-line-vat { display: flex; flex-direction: column; gap: var(--space-1); }
.wa-line-vat .wl-inwrap { width: calc(var(--space-24) + var(--space-10)); }
.wa-line-total { font-weight: var(--weight-semibold); }
.wa-line-remove { width: 1%; }
.wa-lines tr[data-invalid="true"] td { background: var(--danger-soft); }
.wa-lines .wa-lines-error td { border-top: 0; padding-top: 0; }
.wa-lines .wa-lines-error .wl-hint, .wa-lines-note { color: var(--danger-fg); }
.wa-lines tfoot th, .wa-lines tfoot td { padding: var(--space-1) var(--space-2); border-top: 0; text-align: right; vertical-align: baseline; font-weight: inherit; color: var(--text-secondary); }
.wa-lines tfoot tr:first-child > * { padding-top: var(--space-3); border-top: 1px solid var(--border-strong); }
.wa-lines tfoot td { color: var(--text-primary); }
.wa-lines tfoot .wa-lines-total > * { font: var(--type-label); color: var(--text-primary); }
.wa-lines-add { margin-top: var(--space-3); }
.wa-lines-add[hidden], .wa-line-remove [hidden] { display: none; }
/* on a phone each line is a small block: the product, then quantity, price and VAT, then its amounts */
@media (max-width: 699px) {
  .wa-lines, .wa-lines tbody, .wa-lines tfoot { display: block; }
  .wa-lines thead { display: none; }
  .wa-lines tr.wa-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
  .wa-lines tr.wa-line > td { padding: 0; border-top: 0; }
  .wa-lines tr.wa-line > .wa-line-item { grid-column: 1 / -1; min-width: 0; }
  .wa-lines tr.wa-line > .wa-num { text-align: left; padding: 0; }
  .wa-lines tr.wa-line > .wa-num::before { content: attr(data-label); display: block; font: var(--type-caption); color: var(--text-secondary); }
  .wa-lines tr.wa-line > .wa-line-remove { grid-column: 1 / -1; width: auto; }
  .wa-lines .wa-lines-error, .wa-lines .wa-lines-error td { display: block; padding: 0 0 var(--space-2); }
  .wa-lines tfoot tr { display: flex; justify-content: space-between; }
  .wa-lines tfoot tr > :empty { display: none; }
}

/* ---------- the changelog (/changelog/) and the dashboard's What's new ---------- */
/* the version link above the account in the menu; a gold dot while there is news */
.wa-version { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
  margin: 0 var(--space-3) var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-control);
  font: var(--type-caption); color: var(--text-muted); text-decoration: none; transition: var(--transition-color); }
.wa-version:hover, .wa-version[aria-current="page"] { color: var(--text-primary); text-decoration: none; }
.wa-version:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-version-dot { inline-size: var(--space-2); block-size: var(--space-2); border-radius: 50%; background: var(--accent); }

.wa-changelog { display: flex; flex-direction: column; gap: var(--space-6); }
.wa-cl-day { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
.wa-cl-day > h2 { margin: 0; font: var(--type-h3); }
.wa-cl-change { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  scroll-margin-top: var(--space-8); }
.wa-cl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.wa-cl-head h3 { margin: 0; font: var(--type-label); font-size: var(--text-md); }
.wa-cl-head h3 a { color: var(--text-primary); }
.wa-cl-meta { display: inline-flex; align-items: center; gap: var(--space-2); }
.wa-cl-number { font: var(--type-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wa-cl-text { max-inline-size: var(--content-narrow); color: var(--text-secondary); }
.wa-cl-text p, .wa-cl-text ul { margin: 0 0 var(--space-2); }
.wa-cl-text > :last-child { margin-bottom: 0; }
.wa-cl-text ul { padding-left: var(--space-6); }
.wa-cl-links { inline-size: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.wa-cl-links caption { padding-bottom: var(--space-2); text-align: left; }
.wa-cl-links th, .wa-cl-links td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--border-subtle);
  text-align: left; vertical-align: top; }
.wa-cl-links th { font-weight: var(--weight-semibold); white-space: nowrap; }
@media (max-width: 599px) {
  .wa-cl-links th, .wa-cl-links td { display: block; padding-right: 0; }
  .wa-cl-links td { border-top: 0; padding-top: 0; }
}
@media (min-width: 900px) {
  .wa-cl-day { padding: var(--space-8); }
}

.wa-news { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); padding: var(--space-5); }
.wa-news .wa-section-head { margin: 0; }
.wa-news .wa-section-head h2 { display: inline-flex; align-items: center; gap: var(--space-2); }
.wa-news .wa-section-head .wl-icon { color: var(--accent); }
.wa-news-list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.wa-news-list > li { display: flex; flex-direction: column; gap: var(--space-1); }
.wa-news-list > li + li { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.wa-news-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font: var(--type-body-sm); }
.wa-news-foot form { margin: 0; }

/* ---------- videos: the uploader and a video being made (docs/plans/encoding/) ---------- */
.wa-video-drop { aspect-ratio: auto; max-width: none; width: 100%; min-height: calc(var(--space-24) * 2); }
.wa-video-drop[data-over] { border-color: var(--accent); background: var(--accent-soft); }
.wa-video-file { font: var(--type-label); overflow-wrap: anywhere; text-align: center; padding: var(--space-4); }
.wa-job-bar { height: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.wa-job-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent);
  transition: width var(--dur-base) var(--ease-standard); }
.wa-job-step { margin: 0; font: var(--type-label); }
.wa-job-details summary { cursor: pointer; font: var(--type-body-sm); color: var(--text-secondary); }
.wa-job-log { max-height: calc(var(--space-24) * 2); overflow: auto; margin: var(--space-2) 0 0; padding: var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-sunken);
  font: var(--type-caption); font-family: var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-upload-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-upload-progress p { margin: 0; font-variant-numeric: tabular-nums; }
.wa-uploads { margin-top: var(--space-6); }
.wa-uploads h2 { margin: 0 0 var(--space-3); font: var(--type-h3); }
.wa-upload-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.wa-upload-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.wa-upload-actions { display: flex; gap: var(--space-2); }

/* ---------- Programs (docs/plans/program/02-editor.md) ---------- */
.wa-page-head:has(> form > .wl-btn) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wa-page-head > form { margin: 0; }
.wa-prog-name { display: flex; flex-direction: column; color: var(--text-primary); }
.wa-prog-name:hover { color: var(--text-primary); text-decoration: none; }
.wa-prog-name strong { font: var(--type-label); }
.wa-prog-name span { font: var(--type-caption); color: var(--text-secondary); }

/* the editor: the program, the lifeline, the videos */
.wa-programs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.wa-prog-side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.wa-prog-details { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
/* the program's days: two numbers side by side, the hint under both */
.wa-prog-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.wa-prog-days .wl-hint { grid-column: 1 / -1; }
.wa-prog-title { width: 100%; margin: 0 0 0 calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); border: 1px solid transparent;
  border-radius: var(--radius-control); background: transparent; color: var(--text-primary); font: var(--type-h2); letter-spacing: var(--tracking-tight); }
.wa-prog-title:hover { border-color: var(--border-subtle); }
.wa-prog-title:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); background: var(--surface-card); }
.wa-prog-saved { margin: 0; min-height: 1lh; font: var(--type-caption); }
.wa-prog-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle); }
.wa-prog-block h2 { margin: 0; font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.wa-prog-block p { margin: 0; font: var(--type-body-sm); }
.wa-prog-block form { margin: 0; }
.wa-prog-list { align-self: stretch; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.wa-prog-list a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
  font: var(--type-body-sm); color: var(--text-primary); }
.wa-prog-list a:hover { background: var(--surface-sunken); text-decoration: none; }
.wa-prog-list a[aria-current] { background: var(--surface-sunken); font-weight: var(--weight-semibold); }
.wa-dot { flex: none; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--border-strong); }
.wa-dot[data-status="active"] { background: var(--success); }
.wa-prog-main { display: flex; flex-direction: column; min-width: 0; }
.wa-prog-main .wa-tabpanels { margin-top: var(--space-4); }
/* the button that hides the program's column (programs.js; data-prog-side on <html>), left of the tabs */
.wa-prog-tabsrow { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.wa-prog-tabsrow .wl-tabs { flex: 1; min-width: 0; border-bottom: 0; }
.wa-prog-sidetoggle { flex: none; }
.wa-prog-sidetoggle [data-when="hidden"], [data-prog-side="hidden"] .wa-prog-sidetoggle [data-when="shown"] { display: none; }
[data-prog-side="hidden"] .wa-prog-sidetoggle [data-when="hidden"] { display: contents; }
[data-prog-side="hidden"] .wa-prog-side { display: none; }
.wa-prog-flash { margin: 0 0 var(--space-3); }
.wa-prog-problem { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.wa-prog-problem ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.wa-programs[aria-busy="true"] .wa-lifeline { opacity: .6; transition: opacity var(--dur-fast) var(--ease-standard); }

/* the lifeline: a lane is a column with a blue line down its middle (--info) */
.wa-lifeline { position: relative; overflow-x: auto; padding: var(--space-2) 0 var(--space-6); }
.wa-lifeline-hint { margin: var(--space-4) auto 0; max-width: 40ch; text-align: center; font: var(--type-body-sm); }
.wa-lane { position: relative; flex: 1 1 0; min-width: calc(var(--space-24) * 2); display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3); padding: 0 var(--space-2); }
.wa-lane::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--info); }
.wa-step { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; }
.wa-line-start { width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--info); box-shadow: 0 0 0 4px var(--info-soft); }
.wa-line-end { width: var(--space-6); height: 3px; border-radius: 2px; background: var(--info); }

.wa-plus { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); padding: 0; border: 1.5px solid var(--info);
  border-radius: 50%; background: var(--surface-page); color: var(--info); opacity: .45; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.wa-plus:hover, .wa-plus:focus-visible, .wa-plus[aria-expanded="true"] { opacity: 1; background: var(--info-soft); }
.wa-plus:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-plus .wl-icon { color: inherit; }
.wa-step-plus { min-height: var(--space-6); align-items: center; }
.wa-marker-name { max-width: calc(var(--space-24) * 2.5); height: var(--control-h-sm); }

.wa-marker-wrap { display: flex; align-items: center; gap: var(--space-2); }
.wa-plus-side { opacity: 0; }
.wa-marker-wrap:hover .wa-plus-side, .wa-marker-wrap:focus-within .wa-plus-side { opacity: .8; }
.wa-marker { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2);
  min-height: var(--control-h-sm); padding: var(--space-1) var(--space-4); border: 1.5px solid var(--info); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-primary); font: var(--type-label); cursor: pointer; }
.wa-marker .wl-icon { color: var(--info); }
.wa-marker[data-branches] { background: var(--info); color: var(--white); }
.wa-marker[data-branches] .wl-icon, .wa-marker[data-branches] .wa-marker-rule { color: var(--white); }
.wa-marker[aria-expanded="true"], .wa-marker:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-marker-rule { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-caption); color: var(--text-secondary); }
.wa-marker-rule .wl-icon { color: inherit; }

.wa-vrow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-width: 100%; padding: var(--space-2);
  border-radius: var(--radius-card); background: var(--info-soft); }
.wa-vrow-add { align-self: center; display: grid; place-items: center; width: var(--space-6); height: var(--space-6); padding: 0; border: 1.5px dashed var(--info);
  border-radius: 50%; background: transparent; color: var(--info); opacity: 0; cursor: pointer; }
.wa-vrow:hover .wa-vrow-add, .wa-vrow-add:focus-visible { opacity: 1; }
.wa-vrow-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-vcard { position: relative; display: flex; flex-direction: column; width: calc(var(--space-24) * 1.4); overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-card); box-shadow: var(--shadow-sm); cursor: grab; }
.wa-vcard[data-status] .wa-vcard-pic { opacity: .6; }
.wa-vcard[data-dragging] { opacity: .4; }
.wa-vcard-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-sunken); color: var(--text-muted); }
.wa-vcard-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-vcard-time { position: absolute; right: var(--space-1); bottom: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--black) 70%, transparent); color: var(--white); font: var(--type-caption); }
.wa-vcard-txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2); }
.wa-vcard-txt strong { font: var(--type-caption); font-weight: var(--weight-semibold); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.wa-vcard-txt .wl-badge { gap: var(--space-1); max-width: 100%; height: auto; min-height: var(--space-5); text-transform: none; letter-spacing: 0; white-space: normal; }
.wa-vcard-menu { position: absolute; top: var(--space-1); right: var(--space-1); width: var(--space-6); height: var(--space-6);
  background: var(--surface-card); border-radius: var(--radius-sm); }

/* options: a column each, under a bar from the first to the last; the bar again where they meet */
.wa-lanes { position: relative; z-index: 1; display: flex; align-items: stretch; width: 100%; padding: var(--space-4) 0; background: var(--surface-page); }
.wa-lanes { --n: 1; }
.wa-lanes[data-n="2"] { --n: 2; } .wa-lanes[data-n="3"] { --n: 3; } .wa-lanes[data-n="4"] { --n: 4; } .wa-lanes[data-n="5"] { --n: 5; }
.wa-lanes[data-n="6"] { --n: 6; } .wa-lanes[data-n="7"] { --n: 7; } .wa-lanes[data-n="8"] { --n: 8; }
.wa-lanes::before, .wa-lanes[data-joined]::after { content: ""; position: absolute; left: calc(100% / (2 * var(--n))); right: calc(100% / (2 * var(--n)));
  height: 3px; border-radius: 2px; background: var(--info); }
.wa-lanes::before { top: 0; }
.wa-lanes[data-joined]::after { bottom: 0; }
.wa-lane-label { display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--info); border-radius: var(--radius-control); background: var(--surface-page); color: var(--text-primary); text-align: center; cursor: pointer; }
.wa-lane-label strong { font: var(--type-label); }
.wa-lane-label span { font: var(--type-caption); color: var(--text-secondary); }
.wa-lane-label[data-unnamed] strong { color: var(--warning-fg); }
.wa-lane-label:focus-visible, .wa-lane-end:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-lane-end { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill);
  background: var(--surface-page); color: var(--info-fg); font: var(--type-caption); cursor: pointer; }

/* while a video is dragged, the places open into drop zones */
.wa-dragging .wa-step-plus { min-height: var(--space-12); }
.wa-dragging .wa-step-plus .wa-plus { width: 100%; max-width: calc(var(--space-24) * 2.5); height: var(--space-10); border-style: dashed;
  border-radius: var(--radius-card); opacity: .8; background: var(--surface-page); }
.wa-dragging .wa-vrow { outline: 2px dashed transparent; outline-offset: 2px; }
.wa-dragging [data-place][data-over] .wa-plus { background: var(--info-soft); border-width: 2px; opacity: 1; }
.wa-dragging .wa-vrow[data-over] { outline-color: var(--info); }
/* where a video dropped on a card in a row goes: a bar on that side of it */
.wa-dragging .wa-vcard[data-over="before"] { box-shadow: calc(-1 * var(--space-1)) 0 0 var(--info); }
.wa-dragging .wa-vcard[data-over="after"] { box-shadow: var(--space-1) 0 0 var(--info); }

/* the marker's and an option's panel, and the menu */
.wa-marker-panel { z-index: 30; width: calc(var(--space-24) * 3); padding: var(--space-4); box-shadow: var(--shadow-lg); }
.wa-marker-panel[hidden], .wa-pop[hidden] { display: none; }
.wa-marker-panel form { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.wa-marker-panel-head { display: flex; align-items: center; justify-content: space-between; font: var(--type-label); }
.wa-marker-panel .wl-fieldset { margin: 0; padding: 0; border: 0; }
.wa-marker-panel .wl-radios { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.wa-marker-panel .wl-radio { min-height: var(--control-h-sm); font: var(--type-body-sm); }
.wa-days { max-width: var(--space-20); }
.wa-marker-panel-foot { display: flex; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.wa-pop { z-index: 30; right: auto; max-height: 60vh; overflow-y: auto; }

/* the video strip, and the picker */
.wa-strip { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.wa-strip h2 { margin: 0; font: var(--type-label); }
.wa-strip-hint { margin: 0; font: var(--type-caption); }
.wa-strip-list, .wa-picker-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.wa-strip-item, .wa-picker-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control); background: var(--surface-card); color: var(--text-primary); text-align: left; cursor: grab; }
.wa-picker-item { cursor: pointer; }
.wa-picker-item:hover, .wa-strip-item:hover { border-color: var(--border-strong); }
.wa-strip-item:focus-visible, .wa-picker-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-strip-item[data-dragging] { opacity: .45; border-style: dashed; }
.wa-strip-item[data-status] .wa-strip-pic { opacity: .6; }
.wa-strip-grip { color: var(--text-muted); }
.wa-strip-pic { position: relative; flex: none; display: grid; place-items: center; width: var(--space-20); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--text-muted); }
.wa-strip-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-strip-txt { display: flex; flex-direction: column; min-width: 0; }
.wa-strip-txt strong { font: var(--type-caption); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.wa-strip-txt > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font: var(--type-caption); color: var(--text-secondary); }
.wa-strip-used { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.wa-picker-list { max-height: 60vh; overflow-y: auto; }

@media (min-width: 1000px) {
  .wa-programs { grid-template-columns: minmax(0, 1fr) calc(var(--space-24) * 3); }
  .wa-prog-side { grid-column: 1 / -1; }
  .wa-strip { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; }
}
@media (min-width: 1400px) {
  .wa-programs { grid-template-columns: calc(var(--space-16) * 4) minmax(0, 1fr) calc(var(--space-24) * 3); }
  .wa-prog-side { grid-column: auto; position: sticky; top: var(--space-4); }
  [data-prog-side="hidden"] .wa-programs { grid-template-columns: minmax(0, 1fr) calc(var(--space-24) * 3); }
}

/* who has a program: the form that gives it, and the rows (their menus may reach below the table) */
.wa-enrol-form .wl-hint { margin: 0; }
.wa-enrol-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.wa-enrol-row .wl-field { flex: 1 1 calc(var(--space-24) * 2); }
.wa-enrolments-wrap { overflow: visible; }
.wa-enrolments td { vertical-align: middle; }
.wa-enrolment-choice { display: block; font: var(--type-body-sm); }
.wa-enrolment-menu { min-width: calc(var(--space-24) * 2.5); }
.wa-enrolment-menu .wl-input { height: var(--control-h-sm); }
.wa-actions-cell { width: 1%; text-align: right; }
.wa-enrolments td:not(.wa-enrolment-who, .wa-enrolment-choices) { white-space: nowrap; }
.wa-enrolment-who span { display: block; font: var(--type-caption); }
.wa-enrolment-choices .wl-badge { height: auto; white-space: normal; }

/* tags on videos: a second row under the title */
.wa-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 2px 0; }
/* a video found in what is said: where, and the words around it (\Video::search()) */
.wa-said { display: block; margin: 2px 0; font: var(--type-caption); font-style: italic; color: var(--text-secondary); white-space: normal; }
.wa-tag { display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-secondary); font: var(--type-caption); line-height: var(--leading-snug); white-space: nowrap; }
button.wa-tag { cursor: pointer; }
button.wa-tag:hover { border-color: var(--border-strong); color: var(--text-primary); }
button.wa-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-tag-picks { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.wa-vcard-txt .wa-tags { margin: 0; }

/* Groups (groups/edit.html.twig) */
.wa-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wa-capacity { white-space: nowrap; }
.wa-cell-action { width: 1%; text-align: end; }
.wa-group-members td { vertical-align: middle; }

/* A video's transcript (videos/transcript.html.twig) */
.wa-transcript-head { display: flex; flex-direction: column; gap: var(--space-3); }
.wa-cues { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.wa-cue { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.wa-cue-times { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.wa-cue-times .wl-input.wa-cue-time { width: calc(var(--space-24) + var(--space-4)); min-height: 0; padding-block: var(--space-1);
  font: var(--type-caption); font-variant-numeric: tabular-nums; }
.wa-cue-text { min-height: 0; }
.wa-cue-actions { display: flex; align-items: flex-start; gap: var(--space-1); }
.wa-diff-lines { white-space: pre-line; }
.wa-transcript-fields { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.wa-transcript-fields[disabled] { opacity: 0.6; }
.wa-transcript-layout { display: grid; gap: var(--space-6); }
.wa-transcript-chat { height: calc(var(--space-24) * 6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
@media (min-width: 1200px) {
  .wa-transcript-layout { grid-template-columns: minmax(0, 1fr) calc(var(--space-24) * 4); align-items: start; }
  .wa-transcript-chat { position: sticky; top: var(--space-6); height: calc(100vh - var(--space-12)); }
}
.wa-description-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.wa-description-foot .wl-hint { flex: 1 1 calc(var(--space-24) * 3); }
.wa-title-field { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-title-foot { display: flex; justify-content: flex-end; }
.wa-transcript-langs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wa-translate-form { flex: 0 1 auto; }

/* ---------- the moderation log (/community/moderation) ---------- */
.wa-moderation-time { white-space: nowrap; }
.wa-moderation-text { min-width: calc(var(--space-24) * 2.5); overflow-wrap: anywhere; }
.wa-moderation-text > span:first-child { white-space: pre-wrap; }
.wa-moderation-text small { display: block; margin-top: var(--space-1); font: var(--type-caption); }

/* a profile picture (partials/picture.html.twig): a circle with a camera, Remove beside it */
.wl-picture { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.wl-picture-face { position: relative; flex: none; display: grid; place-items: center; width: var(--space-16); height: var(--space-16);
  border-radius: 50%; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text-secondary);
  font: var(--type-h3); cursor: pointer; }
.wl-picture-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wl-picture-face:focus-within { box-shadow: var(--focus-ring); }
.wl-picture-face[data-over] { box-shadow: inset 0 0 0 2px var(--accent); }
.wl-picture-fallback { display: grid; place-items: center; }
.wl-picture-fallback[hidden], .wl-picture [data-picture-remove][hidden] { display: none; }
.wl-picture-cam { position: absolute; right: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); display: grid; place-items: center;
  width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-sm);
  color: var(--text-primary); }
.wl-picture-face:hover .wl-picture-cam { background: var(--surface-sunken); }
.wl-picture[data-busy] .wl-picture-face { opacity: .55; cursor: progress; }
.wl-picture-actions:empty { display: none; }
.wl-picture-hint { flex-basis: 100%; margin: 0; font: var(--type-caption); color: var(--text-secondary); }
.wl-picture + * { margin-top: var(--space-4); }

.wa-avatar[data-picture] { overflow: hidden; background: var(--surface-sunken); }
.wa-avatar[data-picture] img { width: 100%; height: 100%; object-fit: cover; }
.wa-identity .wl-picture { flex-direction: column; }

/* the picture dialog (picture.js): a file or the camera, the avatars in a grid of four, and the cropper */
.wl-picker { max-width: calc(var(--space-24) * 5.5); }
.wl-picker[data-busy] { opacity: .6; pointer-events: none; }
.wl-picker-step { display: flex; flex-direction: column; gap: var(--space-3); }
.wl-picker-step[hidden] { display: none; }
.wl-picker-sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wl-picker-sources .wl-btn:focus-within { box-shadow: var(--focus-ring); }
.wl-picker-camera { display: none; }
@media (hover: none) and (pointer: coarse) { .wl-picker-camera { display: inline-flex; } }
.wl-picker-label { margin: var(--space-2) 0 0; font: var(--type-label); color: var(--text-secondary); }
.wl-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  max-height: min(50vh, calc(var(--space-24) * 3.6)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.wl-picker-avatar { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.wl-picker-avatar img { display: block; width: 100%; height: auto; border-radius: 50%; }
.wl-picker-avatar:hover { box-shadow: 0 0 0 2px var(--border-strong); transform: scale(1.03); }
.wl-picker-avatar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wl-picker-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.wl-picker-gap { flex: 1; }

.wl-crop { position: relative; width: fit-content; margin: 0 auto; overflow: hidden; border-radius: var(--radius-md);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.wl-crop img { display: block; max-width: none; }
/* everything outside the square is dimmed; the ring inside shows the circle the picture is shown in */
.wl-crop-box { position: absolute; box-shadow: 0 0 0 100vmax var(--surface-overlay); outline: 2px solid var(--white); cursor: move; touch-action: none; }
.wl-crop-box::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--white); opacity: .7; pointer-events: none; }
.wl-crop-box:focus-visible { outline-color: var(--focus-color); outline-width: 3px; }
.wl-crop-handle { position: absolute; right: var(--space-1); bottom: var(--space-1); width: var(--space-4); height: var(--space-4);
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-strong); cursor: nwse-resize; }
.wl-crop-handle::after { content: ""; position: absolute; inset: calc(-1 * var(--space-3)); }

/* a live session's chat in its Chat tab (live/edit.html.twig): the messages as the chat's Stream style
   draws them, a day line between days; a message staff deleted greyed, with who and when */
/* a meeting's minutes: the lengths and the writing on one line, then the minutes as a page */
.wa-minutes-bar .wl-tab[data-empty]:not([aria-current]) { color: var(--text-muted); }
.wa-minutes-bar, .wa-minutes { max-width: calc(var(--space-24) * 9); }
.wa-minutes-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.wa-minutes-write { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wa-minutes-write .wl-btn[aria-busy="true"] { cursor: progress; }
[data-minutes-status][data-failed] { color: var(--danger-fg); }
.wa-minutes { padding: var(--space-6) var(--space-8); }
.wa-minutes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.wa-minutes-head p { margin: 0; }
.wa-minutes-text { font: var(--type-body); color: var(--text-primary); }
.wa-minutes-text h2 { font: var(--type-h3); margin: var(--space-5) 0 var(--space-2); }
.wa-minutes-text h2:first-child { margin-top: 0; }
.wa-minutes-text p { margin: 0 0 var(--space-3); }
.wa-minutes-text ul, .wa-minutes-text ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.wa-minutes-text li { margin-bottom: var(--space-1); }
.wa-minutes-text table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-3); font: var(--type-body-sm); }
.wa-minutes-text th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); font: var(--type-label); }
.wa-minutes-text td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.wa-minutes-text td:first-child { font-weight: var(--weight-semibold); white-space: nowrap; }
@media (max-width: 767px) { .wa-minutes { padding: var(--space-4); } }

/* a meeting's badge: the icon beside the word */
.wa-typebadge { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; }

/* a live session's type: two cards side by side */
.wa-types .wl-radios { grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-24) * 1.6), 1fr)); }
.wa-types .wl-radio > .wl-icon { color: var(--text-secondary); }
.wa-types .wl-radio:has(input:checked) > .wl-icon { color: var(--accent); }

.wa-livechat { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.wa-livechat [data-colour="blue"] { --nick: var(--info-fg); }
.wa-livechat [data-colour="green"] { --nick: var(--success-fg); }
.wa-livechat [data-colour="amber"] { --nick: var(--warning-fg); }
.wa-livechat [data-colour="red"] { --nick: var(--danger-fg); }
.wa-livechat-day { display: flex; justify-content: center; margin: var(--space-2) 0; }
.wa-livechat-day span { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunken);
  font: var(--type-caption); font-weight: var(--weight-medium); color: var(--text-secondary); }
.wa-livechat-msg { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.wa-livechat-face { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); overflow: hidden; border-radius: 50%;
  background: color-mix(in oklch, var(--nick, var(--text-muted)) 16%, var(--surface-card)); color: var(--nick, var(--text-secondary));
  font: var(--type-label); font-weight: var(--weight-semibold); }
.wa-livechat-face[data-staff] { background: var(--accent); color: var(--text-on-accent); }
.wa-livechat-face img { width: 100%; height: 100%; object-fit: cover; }
.wa-livechat-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.wa-livechat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.wa-livechat-head strong { font: var(--type-label); color: var(--nick, var(--text-primary)); }
.wa-livechat-head strong[data-staff] { color: var(--accent-soft-fg); }
.wa-livechat-head time { font: var(--type-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wa-livechat-text { margin: 0; overflow-wrap: anywhere; }
.wa-livechat-text a { color: var(--text-link); }
.wa-livechat-msg[data-deleted] .wa-livechat-face, .wa-livechat-msg[data-deleted] .wa-livechat-head,
.wa-livechat-msg[data-deleted] .wa-livechat-text { opacity: .55; }
.wa-livechat-msg[data-deleted] .wa-livechat-text { text-decoration: line-through; text-decoration-color: var(--text-muted); }
.wa-livechat-deleted { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; font: var(--type-caption); color: var(--text-secondary); }
.wa-livechat .cm-mention { padding: 0 2px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-soft-fg); font-weight: var(--weight-medium); }

/* ---------- the calendar (docs/plans/calendar/): as the app's, with the week, the list's rows and the choice on a free day or half hour ---------- */
.cal-admin .wa-page-head { margin-bottom: var(--space-4); }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.cal-nav { display: flex; align-items: center; gap: var(--space-1); }
.cal-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.cal-nav h2 { margin: 0 var(--space-1); font: var(--type-h3); white-space: nowrap; }
.cal-nav .wl-btn { margin-left: var(--space-2); }
/* Month | Week | List: links in the theme toggle's look */
.cal-switch a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  color: var(--text-secondary); font: var(--type-label); text-decoration: none; }
.cal-switch a:hover { color: var(--text-primary); text-decoration: none; }
.cal-switch a[aria-current="page"] { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* the month: a phone shows the times, and a tap on a day opens its week */
.cal-month { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.cal-wd, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd { border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.cal-wd span { padding: var(--space-2) 0; font: var(--type-caption); font-weight: var(--weight-semibold); text-align: center; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.cal-days { grid-auto-rows: minmax(calc(var(--space-12) + var(--space-4)), auto); }
.cal-day { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-1) 2px;
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-day[data-out] { background: var(--surface-sunken); }
.cal-daylink { color: inherit; text-decoration: none; }
.cal-daylink:hover { text-decoration: none; }
.cal-num { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: 50%; font: var(--type-label);
  font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cal-day[data-out] .cal-num, .cal-day[data-past] .cal-num { color: var(--text-muted); }
.cal-day[data-today] .cal-num { background: var(--accent); color: var(--text-on-accent); }
.cal-daylink:hover .cal-num { text-decoration: underline; }

.cal-events { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cal-chip { display: flex; align-items: center; gap: var(--space-1); max-width: 100%; padding: 0 var(--space-1); border-radius: var(--radius-xs);
  font: var(--type-caption); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.cal-chip:hover { text-decoration: none; }
.cal-chip[data-kind="live"] { background: var(--accent-soft); color: var(--accent-soft-fg); }
.cal-chip[data-kind="live"][data-past] { background: var(--surface-sunken); color: var(--text-secondary); }
.cal-chip-title { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-medium); }
.cal-more { font: var(--type-caption); color: var(--text-secondary); }

/* the list */
.cal-empty { margin: 0; font: var(--type-body-sm); color: var(--text-muted); }

.cal-section { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.cal-section > h2 { margin: 0; font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.cal-groups { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.cal-group { display: grid; grid-template-columns: var(--space-10) minmax(0, 1fr); gap: var(--space-3); }
.cal-date { display: flex; flex-direction: column; align-items: center; padding-top: var(--space-3); font: var(--type-caption); color: var(--text-muted); text-transform: uppercase; }
.cal-date strong { font: var(--type-h3); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cal-group[data-today] .cal-date strong { color: var(--accent); }

/* from 768px the titles fit in the month, and a chip opens the session */
@media (min-width: 768px) {
  .cal-wd span { padding-left: var(--space-3); text-align: left; }
  .cal-days { grid-auto-rows: minmax(var(--space-24), auto); }
  .cal-day { align-items: stretch; padding: var(--space-1) var(--space-1) var(--space-2); }
  .cal-num { margin-left: var(--space-1); }
  .cal-events { align-items: stretch; }
  .cal-chip { padding: 2px var(--space-2); }
  a.cal-chip:hover .cal-chip-title { text-decoration: underline; }
  .cal-chip-title { display: block; }
  .cal-more { padding: 0 var(--space-2); }
  .cal-group { grid-template-columns: var(--space-12) minmax(0, 1fr); gap: var(--space-5); }
}

/* the date opens its week; the rest of a day is free for the choice of a new session, and a chip opens its session */
.cal-daylink { border-radius: 50%; }
.cal-daylink:focus-visible { box-shadow: var(--focus-ring); }
.cal-day[data-plan] { cursor: copy; }
.cal-chip[data-state="cancelled"] { background: transparent; color: var(--text-muted); text-decoration: line-through; }
.cal-more { text-decoration: none; }
.cal-stage { position: relative; --hour: var(--space-12); }

/* the + on a day still to come, on hover or focus (and always without a pointer that hovers) */
.cal-add { position: absolute; z-index: 2; top: var(--space-1); right: var(--space-1); display: grid; place-items: center; width: var(--space-6); height: var(--space-6);
  border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-soft-fg); opacity: 0; }
.cal-add:hover { text-decoration: none; }
.cal-day:hover .cal-add, .cal-week-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
@media (hover: none) { .cal-add { opacity: 1; } }

/* the week: the hours down the side, a column per day, the sessions as blocks at their time */
.cal-week-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.cal-week { display: grid; min-width: calc(var(--space-24) * 6); grid-template-columns: var(--space-16) repeat(7, minmax(0, 1fr));
  grid-template-rows: var(--space-16) calc(var(--hours) * var(--hour)); }
.cal-week-corner, .cal-week-day { border-bottom: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.cal-week-day { position: relative; display: flex; flex-direction: column; justify-content: center; padding-left: var(--space-3); border-left: 1px solid var(--border-subtle);
  font: var(--type-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.cal-week-day strong { font: var(--type-h3); letter-spacing: 0; color: var(--text-primary); }
.cal-week-day[data-today] strong { color: var(--accent); }
.cal-week-day .cal-add { top: 50%; right: var(--space-2); transform: translateY(-50%); }
.cal-hours { display: grid; grid-auto-rows: var(--hour); }
.cal-hours span { padding: 2px var(--space-2) 0 0; text-align: right; font: var(--type-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-col { position: relative; border-left: 1px solid var(--border-subtle);
  background: repeating-linear-gradient(to bottom, var(--border-subtle) 0 1px, transparent 1px var(--hour)); }
.cal-col[data-past] { background-color: var(--surface-sunken); }
.cal-col[data-plan] { cursor: copy; }
/* a block: the time and title on one line, who it is for under them, as much as its length has room for */
.cal-block { position: absolute; z-index: 1; left: 2px; right: var(--space-1); top: calc(var(--from) * var(--hour) + 1px); height: calc(var(--len) * var(--hour) - 2px);
  display: block; overflow: hidden; padding: 2px var(--space-2); white-space: nowrap; text-overflow: ellipsis; line-height: 1.35;
  border: 1px solid var(--accent); border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-soft-fg);
  font: var(--type-caption); font-variant-numeric: tabular-nums; text-decoration: none; }
.cal-block:hover { text-decoration: none; }
.cal-block:hover strong { text-decoration: underline; }
.cal-block strong { font-weight: var(--weight-semibold); }
.cal-block span { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.cal-block[data-past] { border-color: var(--border-strong); background: var(--surface-sunken); color: var(--text-secondary); }
.cal-block[data-state="cancelled"] { text-decoration: line-through; background: transparent; border-style: dashed; color: var(--text-muted); }
.cal-ghost { position: absolute; z-index: 1; left: 2px; right: var(--space-1); top: calc(var(--from) * var(--hour)); height: calc(var(--hour) / 2);
  display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: 1px dashed var(--accent); border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent-soft-fg); font: var(--type-caption); font-weight: var(--weight-semibold); pointer-events: none; }
.cal-now { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--from) * var(--hour)); height: 2px; background: var(--danger); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* the choice on a free day or half hour */
.cal-pop { position: absolute; z-index: 30; display: flex; flex-direction: column; gap: var(--space-2); width: calc(var(--space-24) * 2.8); max-width: calc(100% - var(--space-4));
  padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.cal-pop[hidden] { display: none; }
.cal-pop-when { margin: 0; padding: 0 var(--space-2); font: var(--type-label); }
.cal-pop-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-control);
  color: var(--text-primary); text-decoration: none; background: var(--surface-sunken); }
.cal-pop-item:hover { text-decoration: none; background: var(--accent-soft); }
.cal-pop-item > .wl-icon { margin-top: 2px; color: var(--accent); }
.cal-pop-item > span { display: flex; flex-direction: column; }
.cal-pop-item strong { font: var(--type-label); }
.cal-pop-item span span { font: var(--type-caption); color: var(--text-secondary); }

/* the list: a card per day, a row per session */
.cal-arows { margin: 0; padding: 0; list-style: none; }
.cal-arow { display: grid; grid-template-columns: calc(var(--space-24) + var(--space-4)) minmax(0, 2fr) minmax(0, 1.4fr) calc(var(--space-24) * 1.8); align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-subtle); font: var(--type-body-sm); }
.cal-arow:last-child { border-bottom: 0; }
.cal-arow-time { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cal-arow-title { font: var(--type-label); color: var(--text-primary); }
.cal-arow-who { color: var(--text-secondary); }
.cal-arow-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.cal-arow-tags .wl-badge { display: inline-flex; align-items: center; gap: var(--space-1); }
.cal-arow[data-state="cancelled"] .cal-arow-title { text-decoration: line-through; color: var(--text-muted); }
.cal-admin .cal-section { margin-bottom: var(--space-6); }
@media (max-width: 767px) {
  .cal-arow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); }
  .cal-arow-time { grid-column: 1 / -1; }
}

/* ---------- the product's Discount codes tab (docs/plans/checkout/) ---------- */
.wa-discounts .wa-table-wrap { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.wa-code { font-family: var(--font-mono); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); }
.wa-code-input { font-family: var(--font-mono); text-transform: uppercase; }
.wa-code-input::placeholder { font-family: var(--font-body); text-transform: none; }
.wa-tabpanels > .wa-discounts { max-width: calc(var(--content-narrow) + var(--space-24) * 2); }
.wa-discount-made { display: flex; flex-direction: column; }
.wa-discount-made .wa-muted { font: var(--type-caption); }
.wa-discount-add { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-4); }
.wa-discount-add .wa-card-title { margin: 0; }
.wa-discount-add .wl-field.wa-field-narrow { flex: 0 1 calc(var(--space-24) + var(--space-6)); }
.wa-discount-add .wa-amount .wl-input { width: var(--space-16); }
.wa-discount-add .wa-enrol-row { align-items: flex-start; }
.wa-discount-add .wa-enrol-row > .wl-btn { margin-top: calc(var(--space-6) + var(--space-1)); }

/* ---------- how a member got a program (programs/enrolments.html.twig; docs/plans/checkout/) ---------- */
.wa-enrolment-who .wa-enrolment-src { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); font: inherit; }
.wa-enrolment-who .wa-enrolment-src .wa-muted { display: inline; font: var(--type-caption); }
.wa-enrolment-who .wa-enrolment-code { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.wa-enrolment-code .wl-icon { width: 14px; height: 14px; }

/* API keys (/api-keys/; docs/plans/resellerapi/): each key with its actions beside it, wrapping under it on a phone */
.wa-apikeys-pick { margin-bottom: var(--space-6); max-width: 32rem; }
.wa-apikey { align-items: flex-start; flex-wrap: wrap; padding: var(--space-3) 0; }
.wa-apikey > .wl-icon { margin-top: 2px; }
.wa-apikey .wa-device-txt { gap: var(--space-1); }
.wa-apikey .wa-device-txt strong { display: flex; align-items: center; gap: var(--space-2); }
.wa-apikey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); width: 100%;
  padding-left: calc(20px + var(--space-3)); }
.wa-apikey-actions form { display: flex; align-items: center; gap: var(--space-2); }
.wa-apikey-calls summary { cursor: pointer; font: var(--type-body-sm); color: var(--text-link); }
.wa-apikey-calls .wa-table-wrap { margin-top: var(--space-2); overflow-x: auto; }
.wa-apikeys-pick .wa-row { display: flex; align-items: center; gap: var(--space-2); }
.wa-apikeys-pick .wl-inwrap { flex: 1; min-width: 0; }