/* b1043 — THE HEADER CARRIES ITS OWN FALLBACKS.
   It used to render into a shell whose inline tokens it could rely on; it now
   renders into each page and inherits whatever that page defines. The settings
   pages define no --dimmer, and an undefined custom property falls back to the
   INHERITED value — full-strength --text — which is the b1015 trap returning by
   a different route. Every --dimmer below therefore names its own fallback. */
/* The shared Mission Control header (services/missionControlHeader.js).
   Every class is wf-prefixed so page stylesheets, which style bare header, h1,
   .nav and .tab, cannot reach it. Colours come from each page's own tokens. */

/* ...with ONE exception, and it is the point of it (Peter, 2026-09-16: "I want
   the accent colour to be the one used everywhere"). Every page and the shell
   load this file, so a token defined here is the single place the product's
   accent lives — no page can drift from it and none has to redeclare it.

   It is NOT called --accent, because fleet.html already uses that name for
   something else entirely: the per-CARD status colour, green while an agent
   works and amber while it waits. A primary button inside a card would have
   taken its card's status colour. */
:root { --primary: #6366f1; }
:root[data-theme="light"] { --primary: #4f46e5; }

/* Inset on every control. An offset ring sits outside the box and gets clipped
   by overflow:hidden (missions filter, avatar, dialog fields). Fields also use
   :focus — a click in a text box is :focus, not always :focus-visible. */
html.mc-on :focus-visible {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: -2px;
}
html.mc-on :is(input, textarea, select):focus {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: -2px;
}

.wf-header {
  position: relative;
  z-index: 50;
  isolation: isolate;
  flex: none;
  margin: 0;
  padding: 14px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  overflow: visible;
}
.wf-bar {
  display: grid;
  /* b1029 — the main nav sits in the EXACT centre of the bar, so the two side
     columns are equal (1fr each) and the middle is sized to the nav itself.
     `auto 1fr auto` centred nothing: it gave the middle column whatever was
     left over, so the nav's position moved with the width of the logo and the
     icons — and, while the toolbar hoist existed, with what the page happened
     to be showing. minmax(0, 1fr) so a long workspace name shrinks its own
     column rather than pushing the nav off centre. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.wf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* b1014 — the workspace's own mark sits beside Workforce's, with a hairline
   between them so neither reads as part of the other. */
.wf-logo-sep { width: 1px; height: 18px; background: var(--line); flex: none; }
.wf-logo-company { max-height: 24px; max-width: 132px; width: auto; object-fit: contain; }
/* r28 — no mark yet: the workspace name takes that slot so the bar still says
   whose board this is, rather than Workforce alone. */
.wf-company-name {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-logo { display: block; height: 24px; width: auto; }
:root[data-theme="light"] .wf-logo-dark,
:root[data-theme="dark"] .wf-logo-light { display: none; }
.wf-bar-end { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* Segmented toggle — the VxSegmentedToggle design from app-vorx-com: a pill
   track, and a highlight that slides to the selected segment (header.js). */
.wf-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  padding: 4px;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-2) 60%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  box-shadow: none;
}
.wf-seg::-webkit-scrollbar { display: none; }
.wf-bar-mid {
  display: flex;
  align-items: center;
  justify-self: center;
  min-width: 0;
}
/* The nav is the only thing in the middle now (b1029). It still scrolls inside
   itself on a narrow window rather than squashing its labels — .wf-seg's own
   overflow-x — and it never reaches the side columns because they are 1fr each
   and it is the auto column between them. */
.wf-bar-mid > .wf-nav { min-width: 0; }
/* A toolbar left with nothing visible takes no room.
   b1032 — `[data-wf-header-action]` has to be excluded too. Those buttons are
   MIRRORED into the header's icon row and hidden here by a rule keyed on the
   embedded marker, but this test is STRUCTURAL: :has() asks what is in the DOM,
   not what is drawn. One such button (Missions' questions toggle) was enough to
   keep an otherwise-empty toolbar alive as a 14px band above the page. */
.wf-toolbar:not(:has(> :not([hidden]):not(.wf-spacer):not([data-wf-header-action]):not(:empty))) { display: none; }
.wf-seg-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  opacity: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line);
  pointer-events: none;
  transition: left 300ms cubic-bezier(0.34, 1.56, 0.64, 1), width 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 150ms;
}
.wf-seg .wf-seg-item,
.wf-seg .wf-seg-item.on {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--dim);
  font-weight: 500; font-size: 13px; line-height: 1.3; font-family: inherit;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms, background-color 200ms;
}
.wf-seg .wf-seg-item:hover { color: var(--text); background: color-mix(in srgb, var(--card) 50%, transparent); }
.wf-seg .wf-seg-item.on,
.wf-seg .wf-seg-item[aria-current="page"],
.wf-seg .wf-seg-item[aria-selected="true"] { color: var(--text); background: transparent; }
.wf-seg .wf-seg-item:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: -2px; }
/* A count inside a segment (Missions' "Human 24"). */
.wf-seg .wf-seg-item b {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--card-2);
  color: var(--dim);
}
.wf-seg .wf-seg-item.on b { background: color-mix(in srgb, var(--accent, #6366f1) 14%, transparent); color: var(--accent, #6366f1); }

/* Round icon button: theme here, and a page toolbar's icon buttons. */
.wf-icon,
.wf-toolbar .wf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--dim);
  font-size: 14px; line-height: 1; font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Hover, from app-vorx-com's VxIconButton: the surface changes, not only the
   glyph. Colour alone (which is all this had) is invisible on a 32px icon, so
   nothing said the thing was a button until you clicked it. */
.wf-icon:hover { color: var(--text); background: var(--card-2); border-color: color-mix(in srgb, var(--text) 18%, var(--line)); }
.wf-icon:active { background: color-mix(in srgb, var(--text) 8%, var(--card-2)); }
.wf-icon[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--primary) 12%, var(--card-2)); }
@media (prefers-reduced-motion: reduce) { .wf-icon { transition: none; } }
/* r30 — a header action that was hidden (nothing to act on) and then appears. */
@keyframes wf-control-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.wf-icon.wf-control-in { animation: wf-control-in 220ms ease; }
@media (prefers-reduced-motion: reduce) {
  .wf-icon.wf-control-in { animation: none; }
}
.wf-page-actions { display: contents; }
.wf-icon[aria-pressed="true"] { color: var(--text); background: var(--card-2); }
.wf-theme[aria-pressed] { background: var(--card); color: var(--dim); }
/* The theme toggle carries aria-pressed permanently, so its own rule (equal
   specificity, later in the file) was overriding the hover above and it was
   the one icon in the header with no hover state at all. */
.wf-theme[aria-pressed]:hover { background: var(--card-2); color: var(--text); }
/* A count riding on an icon (Missions' questions, while the section is hidden). */
.wf-icon.has-waiting { position: relative; }
.wf-icon.has-waiting::after {
  content: attr(data-waiting);
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ee1c99;
  color: #fff;
  font: 700 10px/15px ui-sans-serif, system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.wf-theme svg { display: block; }
@keyframes wf-spin { to { transform: rotate(360deg); } }
.wf-refresh.wf-spin svg { animation: wf-spin 0.7s linear; }
:root[data-theme="light"] .wf-theme .wf-icon-sun,
:root:not([data-theme="light"]) .wf-theme .wf-icon-moon { display: none; }
.wf-icon:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: -2px; }

/* Avatar and its menu. */
.wf-account { position: relative; }
.wf-avatar {
  display: block;
  width: 32px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-weight: 600; font-size: 13px; line-height: 30px; font-family: inherit;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}
.wf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wf-avatar { transition: box-shadow 0.15s ease, filter 0.15s ease; }
.wf-avatar:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
@media (prefers-reduced-motion: reduce) { .wf-avatar { transition: none; } }
.wf-avatar:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: -2px; }
.wf-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 200;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 40px));
  max-height: min(480px, calc(100dvh - 72px));
  overflow-x: visible;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.wf-menu[hidden] { display: none; }
.wf-who { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.wf-who b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-who span { display: block; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-menu-label { padding: 6px 10px 2px; color: var(--dim); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.wf-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.wf-menu-item:hover,
.wf-menu-item:focus-visible { background: rgba(127, 127, 127, 0.14); outline: none; }
.wf-menu-item[aria-current="true"] { font-weight: 600; }
.wf-kbd {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* A page's own controls, in one consistent row under the header. */
.wf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 0 16px;
}
.wf-toolbar .wf-spacer { flex: 1 1 auto; }
/* `hidden` MUST WIN. EVERYWHERE. No selector list.
 *
 * An author `display` beats the browser's `[hidden] { display: none }` whatever
 * its specificity, so any component that sets its own display keeps rendering
 * while carrying the attribute — and code reading `el.hidden` is told "true"
 * about something the user is looking at.
 *
 * This has now cost SIX bugs: a toolbar that would not go, a page standfirst,
 * the Initiatives toolbar, the questions toggle sitting in the top right with
 * nothing to toggle (2026-09-16), and b1035 — the log composer's attachment
 * thumbnail, an <img> with no src, drawn as a broken-image icon beside "Attach
 * a screenshot" on a composer nobody had attached anything to.
 *
 * The first fix listed three ancestors and called itself "one rule rather than
 * a fifth selector". It was still a LIST, and the sixth instance landed in the
 * one component the list did not name — which is the tell that enumerating was
 * never the fix. Checked before widening it: across this stylesheet and every
 * page, no rule anywhere deliberately DISPLAYS a [hidden] element. Every
 * mention is a workaround for this same trap, so there is nothing for a blanket
 * rule to break. */
[hidden] { display: none !important; }

/* b1020 — inside the shell, a page does not draw its own header actions.
   The shell mirrors every `[data-wf-header-action]` into the top right and
   passes clicks back, so the page's copy would be the same control twice.
   Keyed on the marker the server renders in place of the header when a page
   is embedded, so a page opened on its own still shows its own buttons. */
.wf-embedded-top ~ * [data-wf-header-action],
.wf-embedded-top ~ [data-wf-header-action] { display: none; }
/* Vue layout has no .wf-embedded-top; the page still keeps the sources in
   its toolbar so header.js can mirror them. Hide those sources here. */
.wf-toolbar [data-wf-header-action] { display: none !important; }
.wf-toolbar .wf-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-weight: 500; font-size: 13px; line-height: 1; font-family: inherit;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.wf-toolbar .wf-btn:hover { background: var(--card-2); }
.wf-toolbar a.wf-btn, .wf-toolbar a.wf-btn:hover { text-decoration: none; }
/* The one control on a page that CHANGES something, rather than filtering or
   revealing what is already there. */
/* --accent is the SHELL's token; a page in the frame defines its own set and
   may not have it. An unresolved var() here is not a fallback colour, it is
   `background: transparent` under white text — an invisible button. The
   fallback is the one thing making this safe in both scopes. */
.wf-toolbar .wf-btn-primary { border-color: transparent; background: var(--primary); color: #fff; font-weight: 600; }
.wf-toolbar .wf-btn-primary:hover { background: var(--primary); filter: brightness(1.08); }
.wf-toolbar .wf-src { color: var(--dim); font-size: 12px; min-width: 0; }

@media (max-width: 720px) {
  .wf-header { padding: 10px 0 8px; }
  .wf-bar { grid-template-columns: auto 1fr; row-gap: 10px; }
  .wf-logo { height: 20px; }
  .wf-bar-mid { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; flex-wrap: wrap; }
  .wf-bar-mid > .wf-nav { flex: 1 1 100%; }
  .wf-bar-end { grid-column: 2; grid-row: 1; }
  .wf-toolbar { gap: 8px; }
  .wf-toolbar .wf-src { flex-basis: 100%; order: 10; }
}

/* b1046 — the app shell's CSS is gone with the shell (b1043): `body.wf-shell`
   (nothing sets that class any more) and `.wf-frame` (nothing renders that
   element). The `.wf-embedded-top` rules below stay — a page asked for AS an
   iframe still renders without its own header, and that mode is reachable. */
/* Content inside the frame: a little air where the header used to be. */
.wf-embedded-top { height: 10px; }
/* Inside the settings dialog the dialog says "Settings"; the page must not repeat it. */
.wf-embedded-top + .settings-head { display: none; }

/* Tooltip for icon buttons (header.js). */
.wf-tip {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  font: 500 12px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: normal;
}
.wf-tip[data-side="above"] { transform: translateY(2px); }
.wf-tip.on { opacity: 1; transform: translateY(0); }
.wf-tip[hidden] { display: none; }
:root[data-theme="dark"] .wf-tip { background: #f3f4f6; color: #111827; }
@media (prefers-reduced-motion: reduce) { .wf-tip { transition: none; } }

/* THE dialog. Same chrome as Vorx VxDialog (Peter): 8px radius, 56px title
   row, overflow clip so a side nav cannot square off the corners, title as
   TEXT, backdrop #00000075 with no blur. Height comes from viewport insets
   (top/bottom 2.5rem) rather than a hand-sum of header + footer. Every
   product dialog — Settings, log, ask, Add agent, instructions — uses these
   classes so they cannot drift apart. */
/* THE dialog. Same chrome as Vorx VxDialog (Peter): 8px radius, 56px title
   row, overflow clip so a side nav cannot square off the corners, title as
   TEXT, backdrop #00000075 with no blur. Height comes from viewport insets
   (top/bottom 2.5rem) rather than a hand-sum of header + footer. Every
   product dialog — Settings, log, ask, Add agent, instructions — uses these
   classes so they cannot drift apart. */
.wf-dialog-root { position: fixed; inset: 0; z-index: 1000; isolation: isolate; }
.wf-dialog-backdrop { position: absolute; inset: 0; background: #00000075; }
.wf-dialog-shell {
  position: absolute;
  inset: 2.5rem 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  pointer-events: none;
}
.wf-dialog-shell--drawer {
  inset: 0;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
}
.wf-dialog {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-width: none;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 5rem);
  flex-direction: column;
  pointer-events: auto;
}
div.wf-dialog { display: flex; margin: 0; }
/* Direct child only. Nested page forms (Settings → Workspace name) must not
   inherit the dialog shell's column + flex-grow, or the name field fills the
   pane and Save stretches under it. */
.wf-dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}
dialog.wf-dialog {
  margin: 2.5rem auto;
}
dialog.wf-dialog[open] { display: flex; }
dialog.wf-dialog::backdrop { background: #00000075; }
.wf-dialog-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  max-height: calc(100dvh - 5rem);
}
.wf-dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex: none;
}
.wf-dialog-title {
  margin: 0;
  font: 600 18px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}
.wf-dialog-top-end { display: flex; align-items: center; margin-left: auto; flex: none; }
.wf-dialog-close { border-radius: 999px; }
.wf-dialog-body { min-height: 0; flex: 1 1 auto; overflow: auto; background: var(--bg); }
.wf-dialog-pad { padding: 16px 20px; }
.wf-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
}
.wf-dialog--settings {
  width: min(1020px, calc(100vw - 32px));
  height: min(704px, calc(100dvh - 5rem));
}
.wf-dialog--wide {
  width: min(1100px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 5rem));
}
.wf-dialog--compact { width: min(460px, calc(100vw - 32px)); }
.wf-dialog--ask { width: min(420px, 92vw); }
.wf-dialog--drawer {
  width: min(560px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--line);
}
.wf-dialog--drawer .wf-dialog-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 800px) {
  .wf-dialog--settings,
  .wf-dialog--wide {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: 0;
  }
  .wf-dialog--settings .wf-dialog-panel,
  .wf-dialog--wide .wf-dialog-panel { max-height: 100dvh; }
}

/* ---- Settings dialog (header.js) — over the board, never replacing it. ---- */
/* The settings dialog. Shaped after Vorx's (Peter, 2026-09-16) — that one is
   the house style, and two settings dialogs in one company that look unrelated
   is worse than either of them alone.
   Measured from app-vorx-com: panel 1020.8 x 704 max, radius 8, 1px line,
   #00000075 backdrop with NO blur; header 56 tall, 18px semibold title, 20px
   left; sidebar 224 on its own surface; rows 32 tall, radius 6, 14px text,
   16px icon at 80%, 12px gap, 2px apart, 16px between groups; the active row is
   a filled pill and NOT bolder. */
.wf-settings {
  /* dvh, not vh: on a phone vh counts the browser chrome that is not there, so
     the dialog is taller than the screen and its last row is unreachable. */
  width: min(1020px, calc(100vw - 32px));
  height: min(704px, calc(100dvh - 128px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.wf-settings::backdrop { background: rgba(0, 0, 0, 0.46); }
.wf-settings-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.wf-settings-top h2 { margin: 0; font: 600 18px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.01em; }
.wf-settings-close { border-radius: 999px; }
.wf-settings-body { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: calc(100% - 56px); }
.wf-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: var(--card);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wf-settings-sec { display: flex; flex-direction: column; gap: 2px; }
.wf-settings-group {
  padding: 0 8px 4px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.wf-settings-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.wf-settings-link svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.8; }
.wf-settings-link span { overflow: hidden; text-overflow: ellipsis; }
.wf-settings-link:hover { background: var(--card-2); color: var(--text); }
/* Filled pill only — Vorx does not change the weight, and a row that gets
   bolder when selected reflows the ones beside it. */
.wf-settings-link.on { background: var(--card-2); color: var(--text); }
.wf-settings-frame {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  display: block;
  background: var(--bg);
  overflow: auto;
  box-sizing: border-box;
  padding: 28px 32px 36px;
}
/* The shell's half of a frame dialog's backdrop: the same colour, over
   everything above the frame, so the header darkens with the page instead of
   staying bright above a modal. */
/* ABOVE .wf-header (z-index 40) and its account menu (60) — at 40 it sat under
   the very thing it is there to darken, and the header stayed bright. Below the
   settings dialog (1000), which brings its own backdrop. */
/* Log a bug or request. It lives in the HEADER rather than on the Missions
   page, so the + button and the b/r shortcuts open it wherever you are instead
   of taking you to Missions first (Peter, 2026-09-16).
   NOT .wf-log: that is the + BUTTON's class, and sharing it made the button
   460px wide — the dialog's width, applied to a 32px icon. */
.wf-logbox {
  /* The family, explicitly. This dialog sits in the SHELL's document, where the
     only font rule is scoped to .wf-header — so it inherited the browser's
     default and rendered in Times (Peter, 2026-09-16: "showing serif fonts").
     Everything inside it inherits from here. */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* Same chrome as Settings / Add agent: 8px radius, 56px title row, X. */
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.wf-logbox::backdrop { background: rgba(0, 0, 0, 0.46); }
.wf-logbox form { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; }
.wf-logbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.wf-logbox-top h2 {
  margin: 0;
  font: 600 18px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}
.wf-logbox-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* b1006 — Kind and Severity share one row. Kind is the SAME segmented control
   as the main nav (.wf-seg), so a choice between two things looks the same
   wherever the product asks for one; Severity is a scale of four rising bars,
   read at a glance rather than opened and scanned. This replaces b7's two rows
   of pills, which replaced two dropdowns. */
.wf-logbox-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* b1015 — the two legends sit on one line. align-items: flex-end lined up the
   CONTROLS' bottoms, so a taller control pushed its legend up and "Kind" and
   "Severity" printed at different heights. Aligning the fields at the start
   puts both legends on the same baseline whatever the controls do. */
.wf-logbox-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 22px; }
.wf-logbox-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wf-logbox-legend { font-size: 12px; font-weight: 600; color: var(--dim); }
/* The nav's segments are links in a wide bar; here they are buttons in a small
   one, so only the sizing differs. */
.wf-logbox-seg .wf-seg-item {
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  border: 0;
  background: none;
  cursor: pointer;
}
/* b1015 — Severity is the SAME control as Kind: a .wf-seg, with its sliding
   pill, its arrow keys and its pill-shaped track. The only difference is what
   is printed inside each segment — four rising bars instead of a word — which
   is what Peter asked for: one component, icons instead of text. Everything
   that made it a separate control (its own box, its own hover, its own
   selected background) is gone; the pill draws all of that now. */
/* The two controls on this row are the same height, so neither reads as the
   odd one out: an icon's box and a word's line box are not the same size on
   their own. */
.wf-logbox-row .wf-seg { min-height: 40px; }
/* Both selectors, because `.wf-seg .wf-seg-item.on` further up carries the
   word-sized `padding: 6px 14px` and outranks a two-class rule — so the CHOSEN
   icon alone was squeezed to 6px of its 16 while its three neighbours drew
   correctly. Measured: svg width 6px on .on, 16px on the rest. */
.wf-sev .wf-sev-opt,
.wf-sev .wf-sev-opt.on {
  justify-content: center;
  width: 34px;
  padding: 5px 0;
  color: var(--dimmer, var(--dim));
}
/* An icon is not text: nothing else in the button can give the flexbox room to
   take, so say it cannot be taken. */
.wf-sev .wf-sev-opt svg { flex: none; }
/* The chosen one carries the colour of the level, so the scale reads without
   being read — the same four colours the Stages editor uses for severity. It
   beats .wf-seg-item.on's inherited --text on specificity, deliberately. */
.wf-sev .wf-sev-opt.on[data-sev="low"] { color: #64748b; }
.wf-sev .wf-sev-opt.on[data-sev="medium"] { color: #ca8a04; }
.wf-sev .wf-sev-opt.on[data-sev="high"] { color: #ea580c; }
.wf-sev .wf-sev-opt.on[data-sev="critical"] { color: #dc2626; }
.wf-sev .wf-sev-opt:hover { color: var(--text); }
.wf-logbox label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--dim); }
.wf-logbox select, .wf-logbox input, .wf-logbox textarea {
  /* NOT `font: 13.5px/1.4 inherit` — a CSS-wide keyword cannot be a COMPONENT
     of a shorthand, so the browser drops the whole declaration. Measured: the
     shorthand form computes to 16px/400, the separate properties to 13.5px. */
  font-size: 13.5px; line-height: 1.4; font-family: inherit; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.wf-logbox textarea { resize: vertical; }
.wf-logbox select:focus, .wf-logbox input:focus, .wf-logbox textarea:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
/* b1014 — the attachment row: a quiet button, and the thumbnail once there is
   one. The thumbnail is small on purpose; the composer is for writing, and the
   picture has a page of its own the moment the item is filed. */
.wf-logbox-attach { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.wf-logbox-attach-pick { display: inline-flex; }
.wf-logbox .wf-logbox-attach-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.wf-logbox .wf-logbox-attach-btn:hover { background: var(--card-2); color: var(--text); }
.wf-logbox-attach-now { position: relative; display: inline-flex; }
.wf-logbox-attach-now img {
  display: block;
  height: 34px;
  max-width: 120px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.wf-logbox-attach-now button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.wf-logbox-attach-now button:hover { color: var(--text); }
.wf-logbox-msg { font-size: 12.5px; color: var(--dim); min-height: 1em; }
.wf-logbox-msg.bad { color: var(--bad, #ef4444); }
.wf-logbox-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; }
/* b1015 — the board picker sits bottom-left, quiet: no box until you go near
   it, because almost every item is filed on the default and the choice should
   not read as a question the form is asking. `margin-right: auto` is what puts
   it opposite the buttons without a second flex container. */
/* Specificity, not preference: `.wf-logbox label` further down sets every
   label in this dialog to a stacked column, which put "Board" above its select
   and knocked the whole row out of line with the buttons. */
.wf-logbox .wf-logbox-board {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--dimmer, var(--dim));
}
.wf-logbox .wf-logbox-board select {
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.wf-logbox .wf-logbox-board select:hover { border-color: var(--line); background: var(--card-2); color: var(--text); }
.wf-logbox .wf-logbox-board select:focus { outline: 2px solid var(--primary); outline-offset: -2px; color: var(--text); }
.wf-logbox-actions button {
  font-weight: 500; font-size: 13px; line-height: 1; font-family: inherit; height: 34px; padding: 0 14px; border-radius: 999px;
  cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.wf-logbox-actions #wfLogSubmit { background: var(--primary); border-color: transparent; color: #fff; font-weight: 600; }
.wf-logbox-actions #wfLogSubmit:disabled { opacity: 0.5; cursor: default; }

.wf-dim-layer { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: rgba(0, 0, 0, 0.46); }
.wf-dim-layer[hidden] { display: none; }
.wf-menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.wf-menu-add { color: var(--dim); }

/* r17 — the workspace picker, ours rather than the operating system's.
   One row until you open it (r4's reason, kept), and inside the account menu
   rather than over it. */
.wf-ws { position: relative; margin: 2px 8px 6px; }
.wf-ws-now {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-2);
  color: var(--text);
  font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
}
.wf-ws-now:hover { border-color: var(--dimmer, var(--dim)); }
.wf-ws-now:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.wf-ws-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-ws-chev { flex: none; color: var(--dim); transition: transform 160ms ease; }
.wf-ws-now[aria-expanded="true"] .wf-ws-chev { transform: rotate(180deg); }
/* The list is part of the menu's column, so it indents under the button rather
   than floating over it. Bounded, because a person in fifteen workspaces should
   scroll this rather than the whole menu. */
.wf-ws-list {
  margin-top: 4px;
  padding: 4px;
  max-height: 232px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.wf-ws-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.wf-ws-opt:hover { background: var(--card-2); }
.wf-ws-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.wf-ws-opt.on { font-weight: 600; }
/* A fixed column for the tick, so the names line up whether or not one is
   selected — a list that shifts sideways as the tick moves is the thing a
   custom dropdown is supposed to do better than a native one. */
.wf-ws-tick { flex: none; width: 14px; color: var(--primary); text-align: center; }
.wf-ws-opt.wf-menu-add { color: var(--dim); }
.wf-ws-opt.wf-menu-add .wf-ws-tick { color: var(--dim); }
.wf-ws[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
@media (max-width: 720px) {
  .wf-settings,
  .wf-dialog--settings { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .wf-settings-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  /* A horizontal strip rather than a sidebar, and the group labels go: on one
     row they read as items. */
  .wf-settings-nav { flex-direction: row; gap: 6px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 8px; }
  .wf-settings-sec { flex-direction: row; gap: 6px; }
  .wf-settings-group { display: none; }
}

/* Toasts (r11) — app-vorx-com's VxToastContainer/VxToastPopup, brought across:
   bottom-right, 384px, stacked newest at the bottom, sliding in from the right.
   The host sits above the dialog layer because a dialog is exactly where a
   failed save gets reported. */
.wf-toasts {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(384px, calc(100vw - 32px));
  padding: 16px;
  pointer-events: none;
}
.wf-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.wf-toast.on { opacity: 1; transform: translateX(0); }
.wf-toast.out { opacity: 0; transform: translateX(16px); }
.wf-toast-icon { flex: none; line-height: 0; margin-top: 1px; color: var(--dim); }
.wf-toast-success .wf-toast-icon { color: var(--good, #16a34a); }
.wf-toast-error .wf-toast-icon { color: var(--bad, #ef4444); }
.wf-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wf-toast-text { font-weight: 600; overflow-wrap: anywhere; }
.wf-toast-sub { color: var(--dim); overflow-wrap: anywhere; }
.wf-toast-x {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: 16px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.wf-toast-x:hover { color: var(--text); background: var(--card-2); }
@media (prefers-reduced-motion: reduce) {
  .wf-toast { transition: none; transform: none; }
  .wf-toast.on, .wf-toast.out { transform: none; }
}

/* The blank slate (r5) — ONE copy, shared.
   It was written for the empty Fleet (Peter shaped it there: the mark, the one
   primary button, the sparkles around it) and lived in that page's own <style>,
   so the next empty screen would have been a second version of it. That is the
   inconsistency r5 is about, so it moved here rather than being copied.
   wf-prefixed like everything else in this file, so a page's own `.empty`
   cannot reach it and it cannot reach a page's. */
/* Peter chose "Card" from the six (b1010), so the shared blank slate IS a card
   — on Initiatives and on the empty Fleet alike, which is what having one
   component is for. */
.wf-blank {
  max-width: 520px;
  margin: 8vh auto 0;
  padding: 40px 36px 34px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 24px 60px -40px var(--shadow, rgba(0, 0, 0, 0.35));
  /* Missions' .board is a stretching flex/grid so every lane is the same
     height. This card is not a lane — without this it fills the leftover
     viewport. */
  align-self: start;
  justify-self: center;
  height: auto;
}
/* r14 — it arrives rather than appears: down a little and up to full, fast
   enough not to be a wait. On the shared component, so every blank slate does
   it. Honours a reduced-motion preference by simply being there. */
@keyframes wf-blank-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.wf-blank { animation: wf-blank-in 0.26s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) { .wf-blank { animation: none; } }
.wf-blank-mark {
  width: 56px; height: 56px; margin: 0 auto 18px;
  /* Stroke marks use currentColor; --primary is the product accent (header.css). */
  color: var(--primary);
}
.wf-blank-mark svg, .wf-blank-mark img { width: 100%; height: 100%; }
.wf-blank h2 { margin: 0 0 8px; font-size: 20px; font-weight: 650; }
.wf-blank p { margin: 0 0 18px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.wf-blank-go {
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--primary); color: #fff;
  font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit;
  text-decoration: none; cursor: pointer;
}
.wf-blank-go:hover { filter: brightness(1.08); }
/* A few sparkles around the one button on an empty screen. Subtle on purpose:
   four small four-point stars, slow, staggered, and OUTSIDE the button so they
   cannot move the label or sit under the pointer. */
.wf-blank-go-wrap { position: relative; display: inline-block; }
.wf-spark {
  position: absolute; width: 7px; height: 7px; pointer-events: none;
  background: var(--primary);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  animation: wf-spark 3.6s ease-in-out infinite;
}
.wf-spark.s1 { top: -9px; left: 6px; animation-delay: 0s; }
.wf-spark.s2 { top: -5px; right: -6px; width: 5px; height: 5px; animation-delay: 0.9s; }
.wf-spark.s3 { bottom: -8px; right: 14px; animation-delay: 1.8s; }
.wf-spark.s4 { bottom: -4px; left: -7px; width: 5px; height: 5px; animation-delay: 2.7s; }
@keyframes wf-spark {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  45% { opacity: 0.85; transform: scale(1) rotate(80deg); }
  70% { opacity: 0; transform: scale(0.5) rotate(120deg); }
}
/* Decoration, and the first thing to go for anyone who asked for less of it. */
@media (prefers-reduced-motion: reduce) { .wf-spark { display: none; } }
.wf-blank-note { margin: 14px 0 0; font-size: 12px; color: var(--dimmer, var(--dim)); }
@media (max-width: 600px) { .wf-blank { margin-top: 5vh; padding: 28px 20px 24px; } }

/* The product's own ask/confirm (b1004), replacing window.prompt and
   window.confirm. Same shape as the log composer so a dialog is a dialog
   wherever it comes from. */
.wf-ask {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  width: min(420px, 92vw);
  padding: 0;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}
.wf-ask::backdrop { background: rgba(0, 0, 0, 0.46); }
.wf-ask form { display: flex; flex-direction: column; gap: 10px; padding: 18px; margin: 0; }
.wf-ask h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.wf-ask-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); white-space: pre-line; }
.wf-ask-label { font-size: 12px; font-weight: 600; color: var(--dim); margin-top: 2px; }
.wf-ask-input {
  width: 100%;
  /* The settings pages carry their own `input { flex: 1 1 220px }`, written for
     a ROW; this dialog is a flex COLUMN, where that basis is read as a HEIGHT
     and the field draws 220px tall. Pinned here so no page can do it again. */
  flex: none;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
}
.wf-ask-input:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.wf-ask-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dimmer, var(--dim)); }
.wf-ask-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.wf-ask-btn {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
}
.wf-ask-btn:hover { border-color: var(--dimmer, var(--dim)); }
.wf-ask-go { background: var(--primary); border-color: transparent; color: #fff; font-weight: 600; }
.wf-ask-go:hover { filter: brightness(1.08); }
/* A destructive confirm says so in its primary button rather than in red text
   nobody reads. */
.wf-ask-danger .wf-ask-go { background: var(--bad, #ef4444); }

/* b1041 — every dropdown panel, wherever it is. The one place a panel's shape
   is decided, so a menu in the header and a menu on a card cannot drift apart.
   `.wf-menu-up` is set by placeMenu() when the panel does not fit below. */
.wf-pop {
  position: absolute;
  z-index: 1200;
  min-width: 180px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.wf-pop[hidden] { display: none; }
.wf-pop.wf-menu-up { margin-top: 0; margin-bottom: 6px; top: auto; bottom: 100%; }
.wf-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.wf-pop-item:hover { background: var(--card-2); }
.wf-pop-item:focus-visible { outline: 2px solid var(--primary, var(--accent, #6366f1)); outline-offset: -2px; }
.wf-pop-item.on { font-weight: 600; }
/* A fixed column for the tick so the labels line up whether or not one is
   chosen — a list that shifts sideways as the tick moves is the thing a custom
   dropdown should do better than a native one. */
.wf-pop-tick { flex: none; width: 14px; color: var(--primary, var(--accent, #6366f1)); text-align: center; }

/* b1041 — a <select> wearing the product's dropdown. The select itself is still
   there and still the value; this is what the person sees and clicks. */
.wf-sel { position: relative; display: inline-flex; min-width: 0; }
.wf-sel-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
}
.wf-sel-now:hover:not(:disabled) { border-color: var(--dimmer, var(--dim)); }
.wf-sel-now:focus-visible { outline: 2px solid var(--primary, var(--accent, #6366f1)); outline-offset: -2px; }
.wf-sel-now:disabled { opacity: 0.6; cursor: default; }
.wf-sel-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-sel-chev { flex: none; color: var(--dim); font-size: 11px; }
.wf-sel-list { min-width: 100%; }

/* b1041 — an open panel lives at the body, so nothing can clip it. Fixed rather
   than absolute: its coordinates come from the trigger's viewport rect. */
.wf-pop.wf-pop-portal { position: fixed; margin: 0; }
/* A PORTALED panel is placed by placeMenu's inline `top`, so `.wf-menu-up`'s
   `bottom: 100%` must not also apply: a fixed box with both top and bottom set
   is stretched between them, and the panel COLLAPSED to its padding — 12px
   tall with three 31px items hanging out of it. Only the last card in a column
   flips up, which is why this survived until b1041 put a menu there. */
.wf-pop.wf-pop-portal.wf-menu-up { bottom: auto; top: auto; }