/* Map Builder and Campaign Plan: the pieces Tsugi has no component for.

   Tsugi (assets/tsugi/tsugi.min.css, loaded first) supplies the tokens, the
   base styles and every component the screens use: btn, badge, card, field,
   input, input-group, select, checkbox, dropdown, popover, tabs, drawer,
   dialog, alert, item, avatar, table, accordion, empty, page-header and the
   Lucide icon font. This file holds only the Builder's own parts, written on
   Tsugi's tokens (--background, --card, --border, --muted-foreground,
   --primary and the status colours) so both themes follow .dark on <html>.
   Tsugi's rules sit in cascade layers; these do not, so a rule here wins
   where the two meet. docs/tsugi-gaps.md lists each part that stays here and
   what core Tsugi could offer instead. See docs/designs/map-workspace.md. */

/* ---------- base ---------- */
/* Tsugi names Geist Mono and ships no file for it. Code text here is
   JetBrains Mono, loaded from Google Fonts by index.html. */
:root {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.workspace-body {
  font-size: 0.875rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Quiet supporting text outside a field: 13px muted. Inside a .field, Tsugi's
   own help paragraph does this job. */
.help { font-size: 0.8125rem; line-height: 1.45; color: var(--muted-foreground); }
.help.warn { color: var(--warning); }
/* A link button inside a line of text reads as a link: Tsugi's link button
   keeps a button's height and side padding, which would indent it. */
:is(p, .help) > :is(button, a).btn[data-variant="link"] { height: auto; padding-inline: 0; vertical-align: baseline; }
.strike { color: var(--muted-foreground); text-decoration: line-through; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row > .grow-1 { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.gap-lg { gap: 24px; }
.stack.gap-sm { gap: 8px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.icon.is-inline { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- app header (markup from shared/navbar.js) ---------- */
.topbar {
  display: flex; align-items: center; gap: 4px; height: 56px; flex: none;
  padding: 0 24px; position: relative; z-index: 30;
  border-bottom: 1px solid var(--border); background: var(--background);
}
/* The navbar markup is shared with the Simulator and QA, which still run on
   the --ds-* tokens; its logo mark fills with --ds-primary, so that one name
   points at Tsugi's primary here. */
.brand { --ds-primary: var(--primary); display: flex; align-items: center; gap: 12px; margin-right: 20px; color: var(--foreground); }
.brand a { display: flex; align-items: center; color: inherit; }
.brand svg { display: block; height: 24px; width: auto; }
.brand .divider { width: 1px; height: 20px; background: var(--border); }
.brand .name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.topbar nav { display: flex; gap: 2px; flex: none; }
.topbar nav a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground); transition: color 100ms, background-color 100ms;
}
.topbar nav a:hover { color: var(--foreground); background: var(--muted); }
.topbar nav a[aria-current="page"] { color: var(--foreground); background: var(--muted); }
.topbar nav a[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.topbar nav a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.topbar .grow { flex: 1; }
.topbar .version { margin-right: 4px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.theme-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-md); color: var(--muted-foreground);
}
.theme-toggle:hover { color: var(--foreground); background: var(--muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
.dark .theme-toggle .icon-sun { display: block; }
.dark .theme-toggle .icon-moon { display: none; }

/* ---------- workspace frame ---------- */
.ws { display: flex; flex-direction: column; height: 100vh; }
.ws-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; }
.ws-body--single { grid-template-columns: minmax(0, 1fr); overflow: auto; }
.ws-body--map { display: flex; overflow: hidden; --ws-panel-w: 520px; }
.ws-body--map:has(.ws-panel .pkggrid) { --ws-panel-w: 640px; }
.ws-map { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.ws-canvas { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--background); }

/* ---------- campaign header (Tsugi page-header) ---------- */
.campaign-header { padding: 20px 28px 16px; background: var(--background); z-index: 20; }
.campaign-header h1 { overflow-wrap: anywhere; }
.campaign-header hgroup > p { overflow-wrap: anywhere; }
.campaign-header .page-header-action { flex-wrap: wrap; }
/* Measurement consent sits under the header: Tsugi's bordered checkbox row. */
.ws-consent { display: block; width: auto; margin: 12px 28px 0; background: var(--card); }

/* Versions: a Tsugi popover holding one item per saved version. */
.ws-versions > [data-popover] { width: 380px; max-width: calc(100vw - 32px); gap: 12px; padding: 12px; }
.ws-versions .item-group { max-height: 320px; overflow: auto; gap: 2px; }
.ws-versions .item h3 { font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; }
.ws-versions footer { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.ws-versions footer > .btn:last-child { margin-left: auto; }

.ws-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-save-group { display: flex; align-items: center; gap: 10px; }
/* Save state: one quiet word beside Save, with the dot it always had. */
.savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--muted-foreground); white-space: nowrap; }
.savestate__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-foreground); opacity: 0.6; }
.savestate--dirty .savestate__dot { background: var(--warning); opacity: 1; }
.savestate--clean .savestate__dot { background: var(--success); opacity: 1; }
.savestate--error { color: var(--destructive); }
.savestate--error .savestate__dot { background: var(--destructive); opacity: 1; }
/* The count of settings to fix, on the corner of the settings button. */
.settings-button { position: relative; }
.settings-button > .badge { position: absolute; top: -4px; right: -6px; height: 16px; min-width: 16px; padding: 0 4px; font-size: 0.6875rem; background: color-mix(in oklch, var(--warning) 18%, var(--card)); }

/* ---------- map toolbar ---------- */
.map-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 28px;
  border-bottom: 1px solid var(--border); background: var(--background); z-index: 10;
}
.map-toolbar select.select { max-width: 240px; }
/* Segmented toggle: Tsugi's tab-list look on plain pressed buttons, because
   these switch a view in place and own no tab panel. */
.seg { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 3px; border-radius: var(--radius-lg); background: var(--muted); }
.seg > button {
  height: 100%; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: 0.8125rem; font-weight: 500; color: color-mix(in oklch, var(--foreground) 60%, transparent);
}
.seg > button:hover { color: var(--foreground); }
.seg > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.seg > button:is([aria-pressed="true"], [aria-current="true"]) { color: var(--foreground); background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.dark .seg > button:is([aria-pressed="true"], [aria-current="true"]) { border-color: var(--input); background: color-mix(in oklch, var(--input) 30%, transparent); }
.seg--sm { height: 28px; }
.seg--sm > button { padding: 0 8px; font-size: 0.75rem; }
/* Issues: a details disclosure whose list opens as a Tsugi popover surface. */
.map-issues { margin-left: auto; }
.map-issues > summary { list-style: none; }
.map-issues > [data-popover] { width: min(480px, 85vw); max-height: 45vh; padding: 8px 4px; gap: 0; }
.map-issues ul { display: flex; flex-direction: column; }
.map-issues li { padding: 2px 8px; font-size: 0.8125rem; color: var(--muted-foreground); }
.map-issues li > .btn { height: auto; min-height: 28px; padding: 4px 0; white-space: normal; text-align: left; justify-content: flex-start; }

/* ---------- route graph canvas ---------- */
.page-graph { position: relative; flex: 1; min-height: 0; overflow: auto; }
.page-graph__canvas {
  position: relative; display: flex; align-items: flex-start; gap: 80px;
  width: max-content; min-width: 100%; padding: 28px 660px 32px 28px; box-sizing: border-box;
}
.page-graph__column { width: 260px; flex: none; display: flex; flex-direction: column; gap: 40px; }
.page-graph__column h2 { margin: 0 0 -20px; font-size: 0.75rem; line-height: 20px; font-weight: 500; color: var(--muted-foreground); }
.page-graph__edges {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  color: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
}
.page-graph__edges g > path { stroke: currentColor; stroke-width: 1.25; fill: none; }
.page-graph__edges text { fill: var(--muted-foreground); font-size: 10px; }
.page-graph__edges .is-selected { color: var(--primary); }
.page-graph__edges .is-selected text { fill: var(--primary); }
.page-graph__edges .is-selected > path { stroke-width: 2; }
.page-graph__edges .is-back > path { stroke-dasharray: 4 3; }
.page-graph__routes { margin: 0 28px 24px; padding-left: 18px; list-style: disc; max-width: 800px; font-size: 0.75rem; color: var(--muted-foreground); }

/* Route card: ordinal and type, title, route, package count, exceptional states. */
.page-node {
  position: relative; display: flex; flex-direction: column; gap: 6px; flex: none;
  width: 260px; min-height: 142px; padding: 14px 16px; text-align: left;
  color: var(--card-foreground); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: border-color 100ms, box-shadow 100ms;
}
.page-node:hover { border-color: color-mix(in oklch, var(--foreground) 25%, transparent); }
.page-node.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.page-node:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.page-node.is-disabled { opacity: 0.6; }
.page-node__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; font-size: 0.75rem; color: var(--muted-foreground); }
.page-node__title {
  font-size: 0.875rem; line-height: 20px; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.page-node__route { max-width: 100%; font-size: 0.75rem; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-node__packages { font-size: 0.8125rem; }
.page-node__state { font-size: 0.75rem; color: var(--muted-foreground); }
.page-node__warning { font-size: 0.75rem; color: var(--warning); }

/* List view: the same cards as rows. */
.page-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 28px; overflow: auto; }
.page-list li { display: flex; align-items: center; gap: 8px; }
.page-list .page-node {
  flex: 1; width: auto; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: 130px minmax(160px, 1fr) minmax(120px, 1fr); align-items: center;
}
.page-list__reorder { display: flex; gap: 2px; }

/* ---------- sales summary (page focus) and its commercial detail ---------- */
.page-focus-space {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; pointer-events: none;
}
.ws-map--panel-open .page-focus-space { right: var(--ws-panel-w); }
.page-focus {
  display: flex; flex-direction: column; width: 620px; max-width: 100%; max-height: 100%; min-width: 0; overflow: hidden;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.06);
  pointer-events: auto;
}
.dark .page-focus { box-shadow: 0 16px 48px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.3); }
.page-focus:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.page-focus__actions { display: flex; flex: none; align-items: center; gap: 6px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.page-focus__actions .grow { flex: 1; }
.page-focus__body { padding: 20px; overflow: auto; overscroll-behavior: contain; }
.page-focus__pricing {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
}

.tcard__top { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.tcard__ord { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.tcard__type { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.tcard__flags { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.tcard__label { margin: 8px 0 0; font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tcard__route { margin-top: 4px; font-size: 0.8125rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.tcard__route--derived { color: color-mix(in oklch, var(--muted-foreground) 75%, transparent); }
.tcard__route .badge { margin-left: 6px; vertical-align: 1px; }
.tfocus__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--primary); }
.tfocus__link:hover { text-decoration: underline; }
.tfocus { margin-top: 4px; }
.tfocus.is-stale .tline__f { opacity: 0.55; }
.tfocus__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tfocus__price-k { font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); }
.tfocus__price-v { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tfocus__price.is-stale .tfocus__price-v { color: var(--muted-foreground); }
.tfocus__price-s { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--muted-foreground); }
.pdot { font-size: 10px; }
.pdot--exact { color: var(--success); }
.pdot--stale { color: var(--warning); }
.pdot--unresolved { color: var(--muted-foreground); }
.tfocus__sec { margin-top: 18px; }
.tfocus__h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); }
.tfocus__note { margin: 14px 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.tfocus__note b { color: var(--foreground); font-weight: 500; }
.tprod { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.tprod:first-child { border-top: 0; padding-top: 0; }
.tprod__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 500; line-height: 1.3; }
.tprod__sub { margin-top: 2px; font-size: 0.8125rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.tlines { margin: 6px 0 0; }
.tline {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 2px; align-items: baseline;
  width: calc(100% + 12px); margin: 0 -6px; padding: 4px 6px; border-radius: var(--radius-md);
  font-size: 0.8125rem; text-align: left; color: inherit;
}
button.tline:hover { background: var(--muted); }
button.tline:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.tline__q { font-weight: 600; font-variant-numeric: tabular-nums; }
.tline__o { grid-column: 2 / -1; grid-row: 2; color: var(--muted-foreground); overflow-wrap: anywhere; }
button.tline:hover .tline__o { color: var(--primary); }
.tline__e { grid-column: 2; grid-row: 1; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tline__b { grid-column: 3; grid-row: 1; color: var(--muted-foreground); text-decoration: line-through; text-align: right; font-variant-numeric: tabular-nums; }
.tline__f { grid-column: 4; grid-row: 1; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.toffer { display: flex; flex-direction: column; gap: 2px; width: calc(100% + 12px); margin: 0 -6px; padding: 6px; border-radius: var(--radius-md); text-align: left; color: inherit; }
button.toffer:hover { background: var(--muted); }
.toffer__n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 500; font-size: 0.875rem; }
.toffer__b { font-size: 0.8125rem; color: var(--muted-foreground); }
.troutes { display: flex; flex-wrap: wrap; gap: 6px; }
.troute { font-weight: 400; }
.troute b { font-weight: 600; }
.troute--next b { color: var(--primary); }
.troute--accept b { color: var(--success); }
.troute--decline b { color: var(--destructive); }
span.troute { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.75rem; }

/* ---------- the docked right panel ---------- */
.ws-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(var(--ws-panel-w), 100%);
  overflow: auto; overscroll-behavior: contain;
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px -12px rgb(0 0 0 / 0.12);
  transform: translateX(100%); visibility: hidden;
}
.ws-panel.is-open { transform: none; visibility: visible; }
.ws-inspector__empty { padding: 32px; }

.insp { display: flex; flex-direction: column; }
.insp--disabled .isec { opacity: 0.7; }
.insp__head {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; min-height: 56px;
  padding: 10px 12px 10px 24px; background: var(--card); border-bottom: 1px solid var(--border);
}
/* The page title, editable in place: plain text until hovered or focused. */
.inspector-title {
  flex: 1; min-width: 0; height: 32px; margin: 0 0 0 -8px; padding: 0 8px;
  font-size: 0.9375rem; font-weight: 600; color: var(--foreground);
  border: 1px solid transparent; border-radius: var(--radius-md); outline: none;
}
.inspector-title:hover { border-color: var(--input); }
.inspector-title:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); background: var(--control); }
.inspector-title--static { display: flex; align-items: center; border-color: transparent; }
.insp__close { margin-left: auto; }
.insp__head .dropdown + .insp__close { margin-left: 0; }
.insp__warns { display: flex; flex-direction: column; gap: 6px; margin: 16px 24px 0; }
.insp__warns > .alert { padding-top: 8px; padding-bottom: 8px; }
.insp__warns > .alert > footer { top: 4px; }

.isec { padding: 18px 24px 22px; border-top: 1px solid var(--border); }
.insp__head + .isec, .insp__warns + .isec { border-top: 0; }
.isec__h { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 10px; }
.isec__h h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; }
.isec__sub { font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
.isec__action { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.isec__b { display: flex; flex-direction: column; gap: 16px; }
/* Advanced, Template: a section that is a one-item Tsugi accordion. */
.isec.accordion { padding-top: 0; padding-bottom: 0; }
.isec.accordion > details > summary { align-items: center; gap: 8px; }
.isec.accordion > details > summary h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; }
.isec.accordion > details > summary .help { margin-left: auto; }
.isec.accordion > details > summary .help + .icon { margin-left: 8px; }
.isec.accordion > details > .isec__b { padding-bottom: 22px; }

/* Route selects carry the edge colour they draw in the map. */
select.select.route--accept { border-color: color-mix(in oklch, var(--success) 45%, var(--input)); }
select.select.route--decline { border-color: color-mix(in oklch, var(--destructive) 45%, var(--input)); }
/* Tsugi's select is as wide as its longest option; its docs add a w-full
   utility, which the shipped stylesheet does not carry. */
.field > select.select { width: 100%; }
.field > .input + .input, .field > select + .input { margin-top: -2px; }
.custom-field-key { flex: 0 0 120px; }
.summary-row {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 0;
  font-size: 0.8125rem; color: var(--muted-foreground); text-align: left;
}
.summary-row:hover { color: var(--primary); }
.routing-navigation .isec__b { gap: 2px; }

/* Package and offer rows: one line per product and quantity. */
.pkgrows { display: flex; flex-direction: column; }
.pkgrow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pkgrow:last-child { border-bottom: 0; }
.pkgrow--package { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px 28px; column-gap: 10px; row-gap: 4px; }
.pkgrow--package > .avatar { grid-row: 1 / span 2; align-self: start; }
.pkgrow__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pkgrow__price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; font-weight: 400; color: var(--muted-foreground); }
.pkgrow__tag { color: var(--warning); font-weight: 500; }
.pkgrow__upsell { color: var(--primary); font-weight: 500; }
.pkgrow__billing { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 4px; font-size: 0.75rem; line-height: 1.4; }
/* The number stepper: a small Tsugi input showing the browser's own arrows. */
.pkgrow__qty .input[type="number"] { width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.pkgbill { font-weight: 500; }
.pkgbill--one-time { color: var(--muted-foreground); }
.pkgbill--subscription { color: var(--primary); }
.pkgbill--unknown { color: var(--muted-foreground); font-style: italic; }
.pkgbill__mark { flex: none; }
.pkgbill__text { min-width: 0; overflow-wrap: anywhere; }
@keyframes field-flash { from { box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 35%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
.field-flash { animation: field-flash 1.5s ease-out; border-radius: var(--radius-md); }

/* Catalog search: a Tsugi input group whose matches open as a popover list. */
.catsearch { position: relative; }
.catsearch > [data-popover] { width: 100%; max-height: 300px; padding: 4px; gap: 0; }
.catsearch__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px;
  border-radius: var(--radius-sm); text-align: left; color: var(--popover-foreground);
}
.catsearch__item:hover:not(:disabled), .catsearch__item:focus-visible { background: var(--accent); outline: none; }
.catsearch__item:disabled { opacity: 0.6; cursor: default; }
.catsearch__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.catsearch__name { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catsearch__sub { font-size: 0.75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catsearch__price { flex: none; font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.catsearch__flag { flex: none; font-size: 0.75rem; color: var(--muted-foreground); }
.catsearch__empty { padding: 10px 8px; font-size: 0.8125rem; color: var(--muted-foreground); }
.catsearch__foot { padding: 4px 4px 0; margin-top: 4px; border-top: 1px solid var(--border); }

/* Offer placements: a one-item accordion whose summary lists both states. */
.surfaces { margin-top: -4px; }
.surfaces > details > summary { padding: 10px 0; }
/* Tsugi underlines an accordion summary on hover; here that would strike
   through both status rows, so only the title takes it. */
.surfaces > details > summary:hover { text-decoration: none; }
.surfaces > details > summary:hover .surfaces__title { text-decoration: underline; }
.surfaces__overview { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.surfaces__title { font-size: 0.875rem; font-weight: 500; }
.surfaces__statuses { display: flex; flex-direction: column; gap: 2px; }
.surfaces__status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; font-size: 0.8125rem; font-weight: 400; color: var(--muted-foreground); }
.surfaces__value { text-align: right; overflow-wrap: anywhere; }
.surfaces__value.is-enabled { color: var(--foreground); font-weight: 500; }
.surfaces__b { display: flex; flex-direction: column; gap: 16px; }

/* Map settings: promo code cards and the template list. */
.promo > header { min-height: 44px; }
.promo > header h3 { font-family: var(--font-mono); font-size: 0.8125rem; }
.promo .accordion > details > summary { padding: 10px 0; font-weight: 500; }
.tmpls { display: flex; flex-direction: column; gap: 8px; }
.tmpls .item p, .start__templates .item p { font-family: var(--font-mono); font-size: 0.75rem; }
/* A template row is a button carrying Tsugi's item; Tsugi gives a link item
   its hover, so the button item gets the same one here. */
button.item { text-align: left; }
button.item:hover { background: var(--muted); }
button.item[aria-current="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* ---------- package grid: packages by quantity tier ---------- */
.pkggrid { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.pkggrid__t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.pkggrid__t th, .pkggrid__t td { padding: 4px 2px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.pkggrid__t thead th { position: sticky; top: 0; z-index: 2; padding-bottom: 6px; background: var(--card); font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); text-align: left; }
.pkggrid__pkg { position: sticky; left: 0; z-index: 1; min-width: 170px; max-width: 240px; padding-right: 8px; background: var(--card); font-weight: 400; text-align: left; }
.pkggrid__t thead .pkggrid__pkg { z-index: 3; }
.pkggrid__t tr.is-upsell .pkggrid__pkg { box-shadow: inset 2px 0 0 color-mix(in oklch, var(--primary) 50%, transparent); }
.pkggrid__row { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.pkggrid__name { display: flex; flex-direction: column; min-width: 0; }
.pkggrid__label { font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pkggrid__sub { font-size: 0.75rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkggrid .pkgbill { white-space: normal; line-height: 1.25; }
.pkggrid__flag { color: var(--primary); font-family: var(--font-sans); font-weight: 500; }
.pkggrid__tier { width: 42px; text-align: center; }
.pkggrid__act { width: 32px; text-align: right; }
.pkggrid__col, .pkggrid__cell {
  width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--input);
  font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted-foreground);
}
.pkggrid__col { font-weight: 600; color: var(--foreground); background: var(--muted); }
.pkggrid__col.is-some { border-style: dashed; }
.pkggrid__col:hover, .pkggrid__cell:hover { border-color: var(--ring); color: var(--foreground); }
.pkggrid__col:focus-visible, .pkggrid__cell:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.pkggrid__col.is-all, .pkggrid__cell.is-on { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }
.pkggrid__help { margin-top: 8px; }

/* ---------- views: Forecast, QA, Handoff ---------- */
.view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.viewbar {
  display: flex; align-items: center; gap: 12px; min-height: 52px; flex: none; padding: 0 28px;
  border-bottom: 1px solid var(--border); background: var(--background);
}
.viewbar__main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.viewbar h1 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.viewbar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.view__frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--background); }
.view__body { flex: 1; overflow: auto; padding: 32px 28px; }
.view__body--narrow > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.view__body--narrow > * + * { margin-top: 20px; }

/* Code with a copy button: one line of code that scrolls sideways under a
   button that stays put. */
.codebox {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px 0 12px;
  background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.codebox > code { flex: 1; min-width: 0; padding: 9px 0; overflow-x: auto; white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem; color: var(--foreground); scrollbar-width: thin; }
.codebox > :is(.btn, a) { flex: none; }
.codeblock { max-height: 520px; overflow: auto; padding: 14px 16px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); }
.codeblock pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.65; }

/* Handoff: the verdict is a Tsugi alert with its actions under the text. */
.verdict > section { gap: 12px; }
.verdict > h2 { font-size: 1rem; }
.verdict__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.verdict__actions .btn[data-variant="outline"] { color: var(--foreground); }
.issues { display: flex; flex-direction: column; }
.issue { display: flex; align-items: flex-start; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--border); font-size: 0.875rem; }
.issue:first-child { border-top: 0; }
.issue__msg { flex: 1; min-width: 0; padding-top: 4px; }
.issue > .btn { flex: none; }
/* Facts about the saved plan: label over value in a quiet box. */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.kv .cell { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.kv .cell.warn { border-color: color-mix(in oklch, var(--warning) 25%, transparent); background: color-mix(in oklch, var(--warning) 8%, var(--card)); }
.kv .k { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.kv .v { margin-top: 3px; font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.kv .v.mute { color: var(--muted-foreground); }
.kv .v.sans, .kv .v .badge { font-family: var(--font-sans); }
.kv .help { margin-top: 4px; }
.handoff__tech .accordion > details > summary { padding: 16px 24px; }
.handoff__tech .accordion > details > section { display: flex; flex-direction: column; gap: 16px; padding: 4px 24px 24px; }
.handoff__copybar { display: flex; flex-wrap: wrap; gap: 8px; }
.line { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 0.8125rem; }
.line + .line { border-top: 1px solid var(--border); }
.line .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- start (nothing loaded) ---------- */
.start { width: 100%; max-width: 600px; margin: 0 auto; padding: 48px 28px; }
.start > .page-header { margin-bottom: 24px; }
.start .card + .field-separator { margin: 28px 0 20px; }
.start__templates { display: flex; flex-direction: column; gap: 8px; }

/* ---------- campaign settings (Tsugi drawer, right side) ---------- */
/* Tsugi's right drawer is 24rem wide; the settings forms need 40rem. */
.settings-drawer > div { width: 100%; max-width: 640px; }
.settings-drawer > div > header { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--border); }
.settings-drawer > div > header h2 { font-size: 1rem; font-weight: 600; }
.settings-drawer .tabs { flex: 1; min-height: 0; gap: 0; overflow: hidden; }
.settings-drawer .tabs > [role="tablist"] { flex: none; width: 100%; justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; height: 44px; }
.settings-drawer .tabs > [role="tablist"] > [role="tab"] { flex: none; }
.settings-drawer .tabs > [role="tablist"] > [role="tab"] .badge { height: 18px; padding: 0 6px; }
.settings-drawer .tabs > [role="tabpanel"] { overflow: auto; padding: 24px; }
.settings-drawer .card > section { display: flex; flex-direction: column; gap: 16px; }
/* What a settings section still needs, each line landing on its field. */
.fixlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.fixlist > .alert { padding-top: 8px; padding-bottom: 8px; }
.fixlist > .alert > footer { top: 4px; }
.input-group.url-input > span[data-align="start"] { font-family: var(--font-mono); font-size: 0.8125rem; }
.blocked { display: flex; flex-direction: column; gap: 8px; }
.blocked__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.blocked__row > .label { margin-right: 4px; }
.blocked__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.blocked__list { display: flex; flex-direction: column; gap: 12px; max-height: 240px; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); }
.blocked__cat { display: flex; flex-direction: column; gap: 8px; }
.blocked__cat > h4 { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.linkrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 150px auto 32px; gap: 8px; align-items: center; }
.shiprow { padding: 10px 0; border-bottom: 1px solid var(--border); }
.shiprow:last-child { border-bottom: 0; }
.sdk-version { flex: 0 0 160px; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; }
.table .strong { font-weight: 500; }
.label .opt, .label .req, .field > label .opt, .field > label .req { font-weight: 400; color: var(--muted-foreground); }
.field > label .req { color: var(--destructive); }

/* ---------- notices (toasts) ---------- */
.notices {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px;
  width: min(420px, calc(100vw - 48px)); pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 16px; pointer-events: auto;
  font-size: 0.875rem; line-height: 1.4; color: var(--popover-foreground);
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  animation: toast-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast--error { border-color: color-mix(in oklch, var(--destructive) 30%, var(--border)); }
.toast--error .toast__title { color: var(--destructive); }
.toast__text { flex: 1; min-width: 0; padding-top: 4px; overflow-wrap: anywhere; }
.toast__title { font-weight: 500; }
.toast__body { margin-top: 2px; color: var(--muted-foreground); }
.toast > .btn { flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- campaign plan (/view/) ---------- */
.plan-body { min-height: 100vh; }
.plan-topbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--background); }
.plan-topbar .brand { margin-right: 0; }
.plan-topbar__sep { width: 1px; height: 20px; background: var(--border); }
.plan-topbar__title { font-weight: 600; }
.plan-topbar__end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.plan-head { max-width: 1200px; padding: 28px 48px 16px; }
.plan-title { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.plan-title h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.plan-brand { flex: none; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.plan-brand--icon { padding: 4px; }
.plan-brand--logo { width: auto; max-width: 180px; padding: 6px 10px; }
.plan-brand--mono { display: grid; place-items: center; font-weight: 600; color: var(--muted-foreground); background: var(--muted); }
.plan-store { margin-top: 2px; font-size: 0.8125rem; color: var(--muted-foreground); }
.plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; font-size: 0.8125rem; color: var(--muted-foreground); }
.plan-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--foreground); }
.plan-status__ticks { display: inline-flex; gap: 2px; }
.plan-status__ticks i { width: 8px; height: 3px; border-radius: 2px; background: var(--border); }
.plan-status__ticks i.is-on { background: var(--foreground); }
.plan-strategy { max-width: 72ch; margin-top: 12px; line-height: 1.5; color: var(--muted-foreground); }
.plan-paths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.plan-paths [role="tab"] {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--muted-foreground);
}
.plan-paths [role="tab"] b { font-weight: 500; color: var(--foreground); }
.plan-paths [role="tab"] span { font-size: 0.75rem; }
.plan-paths [role="tab"][aria-selected="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan-paths [role="tab"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.plan-track { border-top: 1px solid var(--border); min-height: 480px; }
.plan-track .page-graph { max-height: 75vh; }
.plan-track .page-graph__canvas { padding-right: 28px; padding-left: 48px; }
.plan-stack { max-width: 760px; margin: 0 auto 0 24px; padding: 12px 16px 32px; }
.plan-stack__h { margin: 24px 0 8px; font-size: 1rem; font-weight: 600; }
.plan-stack__branch { margin: -4px 0 8px 20px; font-size: 0.75rem; font-weight: 500; color: var(--destructive); }
/* A page at full detail in the stacked (phone, print) document. */
.tcard--stacked { margin-bottom: 12px; break-inside: avoid; }
.tcard--stacked > section { padding: 18px 20px; }
.tcard--stacked.tcard--branch { margin-left: 32px; }
.plan-foot { padding: 20px 48px 40px; border-top: 1px solid var(--border); }
.plan-foot > .help { margin-top: 12px; }
.plan-tech > details > summary { padding: 12px 0; }
.plan-tech__b { display: grid; gap: 20px; }
.plan-tech h3 { margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; }
.plan-tech ul { padding-left: 18px; list-style: disc; font-size: 0.8125rem; line-height: 1.6; }
.plan-kv td { padding: 2px 16px 2px 0; font-size: 0.8125rem; }
.plan-kv td:first-child { color: var(--muted-foreground); }
.plan-empty { max-width: 560px; margin: 15vh auto; padding: 0 24px; }
.plan-empty h1 { margin-bottom: 6px; font-size: 1.25rem; font-weight: 600; }
.plan-tech a { color: var(--primary); }
/* Page details: a Tsugi dialog; its body scrolls inside the viewport. */
:root:has(.plan-selected-detail[open]) { overflow: hidden; }
.plan-selected-detail > div { padding: 0; gap: 0; }
.plan-selected-detail > div > section { min-height: 0; overflow: auto; padding: 20px 24px 24px; }
.plan-selected-detail .tcard--stacked { margin: 0; border: 0; box-shadow: none; background: transparent; }
.plan-selected-detail .tcard--stacked > section { padding: 0 40px 0 0; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .workspace-body *, .workspace-body *::before, .workspace-body *::after {
    scroll-behavior: auto !important; animation: none !important; transition: none !important;
  }
}

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .brand .name, .brand .divider { display: none; }
  .ws-body--map { --ws-panel-w: 480px; }
  .ws-body--map:has(.ws-panel .pkggrid) { --ws-panel-w: 600px; }
}
@media (max-width: 1024px) {
  .ws-panel { width: min(var(--ws-panel-w), calc(100vw - 48px)); }
  .linkrow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .ws-canvas:has(.page-focus) { display: block; overflow: auto; }
  .ws-canvas:has(.page-focus) > .page-graph,
  .ws-canvas:has(.page-focus) > .page-list { display: none; }
  .ws-map .page-focus-space { position: relative; inset: auto; padding: 12px; }
  .page-focus { width: 100%; max-height: none; }
  .page-focus__body { overflow: visible; }
  .workspace-body .ws-canvas:has(.page-focus) .ws-panel.is-open { position: relative; inset: auto; width: 100%; height: auto; overflow: visible; box-shadow: none; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 860px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px; height: auto; padding: 10px 16px; }
  .topbar nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .topbar .version { display: none; }
  .campaign-header { padding: 16px; }
  .campaign-header .page-header-action { width: 100%; }
  .ws-consent { margin: 12px 16px 0; }
  .ws-save-group { flex-direction: column; align-items: flex-start; gap: 2px; }
  .map-toolbar { gap: 6px; padding: 10px 16px; }
  .page-list { padding: 16px; }
  .page-list .page-node { display: flex; align-items: stretch; }
  .page-list__reorder { flex-direction: column; }
  .page-graph__canvas { padding-left: 16px; padding-right: 28px; }
  .page-focus__body { padding: 16px; }
  .page-focus .tprod { display: block; }
  .page-focus .tprod > .avatar { display: none; }
  .ws-panel { width: 100%; }
  .viewbar { padding: 0 16px; }
  .view__body { padding: 16px; }
  .start { padding: 28px 16px; }
  .issue { padding: 10px 16px; }
  .notices { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .plan-topbar { flex-wrap: wrap; padding: 8px 16px; height: auto; min-height: 56px; }
  .plan-topbar__title { display: none; }
  .plan-head, .plan-foot { padding-left: 16px; padding-right: 16px; }
  .plan-stack { margin: 0; }
}
@media (max-width: 640px) {
  .savestate { display: none; }
  .settings-drawer .tabs > [role="tabpanel"] { padding: 16px; }
}
@media print {
  .workspace-body { background: #fff; }
  .page-node__title { display: block; }
  .plan-topbar, .plan-paths { display: none; }
  .plan-head, .plan-foot { padding-left: 0; padding-right: 0; }
  .plan-stack { max-width: none; margin: 0; padding: 0; }
  .tcard--stacked { box-shadow: none; }
  .tfocus__link::after { content: " " attr(href); font-weight: 400; color: #555; }
  .plan-selected-detail { display: none; }
}