/* Furniverse Broker UI. Tokens on :root, redefined for dark mode (D33); no web fonts, no CDN (D16). */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-muted: #f1f3f5;
  --text: #1c2024;
  --muted: #60666d;
  --border: #e1e4e8;
  --accent: #2457c5;
  --accent-text: #ffffff;
  --ok: #1d7a46;
  --ok-bg: #e7f5ed;
  --warn: #8a5a00;
  --warn-bg: #fdf3dc;
  --bad: #b42318;
  --bad-bg: #fdecea;
  --on-bad: #ffffff;
  --info: #2457c5;
  --info-bg: #e8effc;
  --neutral: #5b6168;
  --neutral-bg: #eef0f2;
  --bar-ok: #2e9d5b;
  --bar-warn: #d39a1e;
  --bar-bad: #d1453b;
  --bar-none: #c4c9cf;
  --radius: 12px;
  --radius-small: 8px;
  --focus: 0 0 0 3px rgba(36, 87, 197, .35);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --surface: #1a1e23;
    --surface-muted: #22272d;
    --text: #e6e9ed;
    --muted: #9aa2ab;
    --border: #2e343b;
    --accent: #6b98f2;
    --accent-text: #0d1117;
    --ok: #6fd39a;
    --ok-bg: #173325;
    --warn: #f0c060;
    --warn-bg: #3a2d10;
    --bad: #ff8a80;
    --bad-bg: #3d1a18;
    --on-bad: #2a0b08;
    --info: #8fb2f7;
    --info-bg: #1b2b4a;
    --neutral: #b2b9c1;
    --neutral-bg: #2a3037;
    --bar-ok: #3fb872;
    --bar-warn: #e0aa38;
    --bar-bad: #e5675d;
    --bar-none: #4a525b;
    --focus: 0 0 0 3px rgba(107, 152, 242, .45);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* A scrollbar on short pages too, so switching areas does not shift the layout sideways. Not scrollbar-gutter:
   its empty gutter takes the page colour and shows as a strip beside the header. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-small);
}
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: .88em; }
.muted { color: var(--muted); }
.wrap { max-width: 1300px; margin: 0 auto; padding: 0 16px; }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border); }
.top-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 0 12px; }
.brand { flex: 1 1 260px; min-width: 0; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.brand h1 { font-size: 1.25rem; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.menu-product { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: .82rem; color: var(--muted); }
.mark { color: var(--accent); flex: none; }
.mark .mark-f { stroke: var(--accent-text); }
.skip { position: absolute; left: 8px; top: -48px; z-index: 10; background: var(--surface); color: var(--accent); padding: 8px 12px; border-radius: var(--radius-small); }
.skip:focus { top: 8px; }
main:focus { outline: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.actions form { margin: 0; }
.button.sync { display: inline-flex; align-items: center; gap: 8px; }
.button.sync .spinner, .button.sync .sync-busy, .button.sync .sync-icon { display: none; }
.button.sync[aria-busy="true"] .spinner, .button.sync[aria-busy="true"] .sync-busy { display: inline-block; }
.button.sync[aria-busy="true"] .sync-idle { display: none; }
.button.sync[disabled] { cursor: progress; opacity: .6; pointer-events: none; filter: none; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { color: var(--text); border-color: var(--muted); }
.menu-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: max-content; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: .9rem; }
.menu-panel form { margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.nav { display: flex; gap: 4px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.nav a {
  padding: 10px 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-weight: 500;
}
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.nav a { display: inline-flex; align-items: center; gap: 7px; }
.nav-icon { width: 17px; height: 17px; flex: none; }
.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; }
/* Inset: the scrolling nav would clip an outer ring. */
.nav a:focus-visible { box-shadow: inset var(--focus); }
main.wrap { padding-top: 20px; padding-bottom: 48px; }
main > * + * { margin-top: 16px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
h3 { font-size: .95rem; margin: 0 0 8px; }

/* buttons, pills */
.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-small);
  padding: 7px 14px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.button:hover { background: var(--surface-muted); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.button.primary:hover { filter: brightness(1.08); }
.button.danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.button[disabled] { opacity: .5; cursor: not-allowed; }
.button.icon-only { padding: 6px 9px; }
.button.icon-only .btn-icon { display: block; }
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--neutral-bg);
  color: var(--neutral);
}
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
[hidden] { display: none !important; }

/* cards, banner, flash */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-head h2, .card-head p { margin: 0; }
/* The chips are taller than the heading; without this the heading drops below where the overview's sits. */
.card-head > .filters { margin-block: -4px; margin-left: auto; justify-content: flex-end; }
.banner { border-radius: var(--radius); padding: 14px 16px; border: 1px solid transparent; font-size: 1rem; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.info { background: var(--info-bg); color: var(--info); }
.banner a { color: inherit; font-weight: 600; }
.card .banner { margin-top: 12px; }
.update-notice { margin-bottom: 16px; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: min(360px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-small);
  padding: 14px 18px;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: opacity .3s, transform .3s;
}
.toast > span { flex: 1 1 auto; }
.toast.leaving { opacity: 0; transform: translate(-50%, 8px); }
.toast .dismiss { color: var(--muted); text-decoration: none; font-size: 1.2rem; line-height: 1; padding: 0 4px; }
details.status { position: relative; }
details.status > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
details.status > summary::-webkit-details-marker { display: none; }
details.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
details.status[data-tone="warn"] > summary { color: var(--warn); border-color: var(--warn); }
details.status[data-tone="warn"] .dot { background: var(--warn); }
details.status[data-tone="bad"] > summary { color: var(--bad); border-color: var(--bad); }
details.status[data-tone="bad"] .dot { background: var(--bad); }
details.status[data-tone="info"] > summary { color: var(--info); border-color: var(--info); }
details.status[data-tone="info"] .dot { background: var(--info); }
.status-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: min(360px, calc(100vw - 32px)); padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: .88rem; }
.status-pop p { margin: 0 0 8px; color: var(--muted); }
.banner { display: flex; gap: 12px; align-items: center; }
.banner > span { flex: 1 1 auto; }
.banner-dismiss { background: none; border: 0; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.danger-zone { border-color: var(--bad); }
.danger-zone h2 { color: var(--bad); }

/* figures */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "heat tiles" "areas tiles" "conn ."; gap: 16px; align-items: stretch; }
.overview-grid > .heat { grid-area: heat; }
.overview-grid > .areas { grid-area: areas; }
.overview-grid > .tiles { grid-area: tiles; }
.overview-grid > .conn { grid-area: conn; }
.overview-grid .tiles { display: flex; flex-direction: column; gap: 12px; }
.overview-grid > .tiles { align-self: start; }
.overview-grid .tile .label { margin: 0 0 4px; }
.overview-grid > .card { display: flex; flex-direction: column; }
.overview-grid .rows { flex: 1 1 auto; display: flex; flex-direction: column; }
.overview-grid .rows li { flex: 1 1 auto; border-top-color: color-mix(in srgb, var(--border) 45%, transparent); }
.overview-grid .rows li:first-child { padding-top: 10px; }
.overview-grid .rows li:last-child { padding-bottom: 0; }
.overview-grid .areas .name { flex: 0 0 30%; min-width: 170px; }
.overview-grid .areas .when { flex: 1 1 160px; }
.heatmap { display: flex; gap: 6px; }
.hm-weekdays, .hm-grid { display: grid; grid-template-rows: 14px repeat(7, 12px); gap: 3px; font-size: .7rem; line-height: 12px; color: var(--muted); }
.hm-weekdays { flex: none; width: 22px; }
.hm-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; justify-content: flex-end; padding: 2px; }
.hm-grid { grid-auto-flow: column; grid-auto-columns: 12px; }
.hm-month { white-space: nowrap; }
.hm-year { grid-row: span 7; display: flex; align-items: center; justify-content: center; }
.hm-year > span { transform: rotate(-90deg); font-size: .66rem; letter-spacing: .08em; color: var(--muted); opacity: .8; white-space: nowrap; }
.hm { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.hm-empty { background: color-mix(in srgb, var(--border) 55%, transparent); }
.hm-none { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.hm-ok.hm-l1 { background: color-mix(in srgb, var(--bar-ok) 35%, transparent); }
.hm-ok.hm-l2 { background: color-mix(in srgb, var(--bar-ok) 60%, transparent); }
.hm-ok.hm-l3 { background: color-mix(in srgb, var(--bar-ok) 80%, transparent); }
.hm-ok.hm-l4 { background: var(--bar-ok); }
.hm-warn { background: var(--bar-warn); }
.hm-bad { background: var(--bar-bad); }
.hm-future { visibility: hidden; }
a.hm:hover, a.hm:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.conn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
dl.pairs { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); font-size: .92rem; }
dl.pairs dt, dl.pairs dd { padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
dl.pairs dt:first-of-type, dl.pairs dd:first-of-type { border-top: 0; }
dl.pairs dt { color: var(--muted); padding-right: 16px; }
dl.pairs dd { margin: 0; text-align: right; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
dl.pairs .id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: .82rem; }
.copy { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font: inherit; }
.copy:hover { color: var(--text); }
@media (max-width: 900px) {
  .conn { grid-template-columns: minmax(0, 1fr); }
}
.chip-filter { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; }
.hm-legend { padding-left: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* One square's width between legend items: 6px of margin plus the 6px gap. */
.hm-legend .hm { margin-left: 6px; }
.hm-legend .hm + .hm { margin-left: 0; }
.hm-legend .hm:first-child { margin-left: 0; }
@media (max-width: 760px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tiles" "heat" "areas" "conn"; }
  .overview-grid .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .overview-grid.detail-grid { grid-template-areas: "tiles" "main"; }
}
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.tile .value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile .label { font-size: .76rem; color: var(--muted); margin-top: 4px; }
.tile .value.bad { color: var(--bad); }
.tile .sub { font-size: .76rem; margin-top: 4px; overflow-wrap: anywhere; }

/* run detail: the overview's grid, the run's areas and items left, its figures as tiles right */
.run-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crumbs a { text-decoration: none; }
.crumb-day { display: inline-flex; align-items: center; gap: 6px; }
.crumbs .run-time { font-weight: 600; }
.day-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; }
.day-strip > a:not(.hm) { color: var(--muted); text-decoration: none; margin: 0 6px; }
.day-strip > a:not(.hm):hover { color: var(--text); }
.day-strip .hm.current { outline: 2px solid var(--text); outline-offset: 1px; }
/* Scoped to wide screens: unscoped, it came after the 760px query and kept two areas in one column on phones. */
@media (min-width: 761px) { .overview-grid.detail-grid { grid-template-areas: "main tiles"; } }
.detail-grid > .detail-main { grid-area: main; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.effect-bar.large { height: 10px; }
.legend.effect-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.seg-unchanged { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.detail-grid .areas .name { flex: 0 0 150px; min-width: 0; }
/* Count centred between the bar and the error pill; one column each, so every row lines up. */
.area-figures { display: grid; grid-template-columns: 96px 92px; align-items: center; font-variant-numeric: tabular-nums; }
.area-count { text-align: center; }
.area-pill { display: flex; justify-content: flex-end; }
.area-wide { grid-column: 1 / -1; justify-self: end; }
.detail-grid .run-group .rows li { padding: 9px 12px; }
/* Fixed columns, so the kind and parts text starts at one edge whatever links a row carries. */
.detail-grid .rows.items li { display: grid; grid-template-columns: 20px minmax(0, 2fr) minmax(0, 3fr) 70px; }
.detail-grid .rows.items .links { justify-content: flex-end; }
.detail-grid .rows.items .detail { grid-column: 2 / -1; }
.item-icon { display: inline-flex; color: var(--muted); }
/* Whole-row links: the name's link stretches over its row; icon links and the shop id sit above it. */
.rows li:has(.row-link) { position: relative; }
.rows li:has(.row-link):hover { background: var(--surface-muted); }
.row-link { color: var(--text); text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { box-shadow: inset var(--focus); }
.catalog-shop a, .icon-links a, .rows li .pill { position: relative; z-index: 1; }
.icon-links { display: inline-flex; gap: 6px; justify-content: flex-end; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-small); color: var(--muted); }
.icon-link:hover { color: var(--text); border-color: var(--muted); }
.icon-link.off { visibility: hidden; }
.row-chev { justify-self: end; color: var(--muted); display: inline-flex; }

/* catalog: the run pages' bar, legend and blocks, coloured by state */
.st-current { background: var(--bar-ok); }
.st-media { background: var(--accent); }
.st-unpublished { background: var(--bar-warn); }
.st-failed { background: var(--bar-bad); }
.filters a { display: inline-flex; align-items: center; gap: 6px; }
.filters a .icon { width: 15px; height: 15px; color: inherit; }
.icon-pill { padding: 4px 10px !important; min-height: calc(1.5em + 10px); justify-content: center; }
.kind-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
.kind-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.kind-tabs a:hover { color: var(--text); }
.kind-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.kind-tabs .icon { width: 16px; height: 16px; color: inherit; }
.kind-tabs .count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.run-group .catalog-rows li, .detail-grid .history-rows li { display: grid; align-items: center; gap: 4px 12px; }
.run-group .catalog-rows li, .run-group .catalog-rows li:first-child { padding: 9px 12px; }
.catalog-rows li { grid-template-columns: 20px minmax(160px, 1.3fr) minmax(150px, 1fr) 110px; }
.catalog-rows.with-category li { grid-template-columns: 20px minmax(160px, 1.3fr) minmax(120px, 1fr) minmax(150px, 1fr) 110px; }
.catalog-rows .catalog-synced { text-align: right; white-space: nowrap; }
.catalog-shop { white-space: nowrap; font-size: .85rem; }
.history-rows li { grid-template-columns: 12px 44px minmax(0, 1fr) auto; }
.history-rows .when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile .value.small { font-size: 1rem; display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.tile .value.ok { color: var(--ok); }
.tile .value.warn { color: var(--warn); }
.tile .value.info { color: var(--accent); }
.button.small { padding: 4px 10px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }

/* API calls: two-line rows, the call above and its PR-like meta line with links below */
.rows.call-rows li { display: grid; grid-template-columns: 12px 44px 18px minmax(0, 1fr) 72px 16px; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 12px; }
.call-line { position: relative; display: grid; grid-template-columns: 12px 64px 18px minmax(0, 1fr) 72px 16px; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 12px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.call-line:hover { background: var(--surface-muted); }
.call-line .call-meta, .call-line .call-error { grid-column: 4; margin: 0; }
.rows.call-rows li:first-child { padding-top: 8px; }
.call-op { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.call-op .mono { overflow-wrap: anywhere; }
.call-took { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .85rem; }
.call-rows .call-meta { grid-column: 4; margin: 0; }
/* Square, time, icon, duration and chevron span both lines, so they sit centred on the call and its meta line. */
.call-rows li > .hm, .call-line > .hm { grid-area: 1 / 1 / 3 / 2; align-self: center; }
.call-rows li > .run-time, .call-line > .run-time { grid-area: 1 / 2 / 3 / 3; align-self: center; }
.call-rows li > .item-icon, .call-line > .item-icon { grid-area: 1 / 3 / 3 / 4; align-self: center; }
.call-rows li > .call-op, .call-line > .call-op { grid-area: 1 / 4 / 2 / 5; }
.call-rows li > .call-took, .call-line > .call-took { grid-area: 1 / 5 / 3 / 6; align-self: center; }
.call-rows li > .row-chev, .call-line > .row-chev { grid-area: 1 / 6 / 3 / 7; align-self: center; }
.call-rows li > .call-meta, .call-line > .call-meta { grid-area: 2 / 4 / 3 / 5; }
.call-line > .call-error { grid-area: 3 / 4 / 4 / 5; }
.call-meta a { position: relative; z-index: 1; }
.warn-text { color: var(--warn); }
#body-modal pre { max-height: 50vh; }
dialog.modal:has(#body-modal) { width: min(900px, calc(100vw - 32px)); }

.seg-switch { display: inline-flex; margin-right: auto; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg-switch a { padding: 4px 12px; font-size: .85rem; color: var(--text); text-decoration: none; }
.seg-switch a + a { border-left: 1px solid var(--border); }
.seg-switch a[aria-current="true"] { background: var(--accent); color: var(--accent-text); }

/* collapsible cards: the script folds them on load, so without it every row stays visible */
.collapse-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; }
.collapse-toggle:hover { color: var(--text); }
.collapsible.collapsed .collapse-body { display: none; }
.collapsible.collapsed .legend.effect-legend { margin-bottom: 0; }
.collapsible:not(.collapsed) .collapse-toggle .when-closed, .collapsible.collapsed .collapse-toggle .when-open { display: none; }
.collapsible:not(.collapsed) .collapse-toggle .chev { transform: rotate(180deg); }
.parts-legend form { margin-left: auto; }

/* tracking: the overview's grid; rows with right-aligned figures, and the history as a line chart */
.rows.track-rows li { display: grid; grid-template-columns: 20px minmax(120px, 220px) minmax(0, 1fr) 120px; align-items: center; gap: 4px 12px; }
.track-rows .track-count { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-rows .when { grid-column: 3; }
.with-info .info { color: var(--muted); font-weight: 400; font-size: .85rem; cursor: help; }
.hm.round { border-radius: 50%; }
.tchart { margin-top: 6px; }
.tchart-plot { position: relative; height: 150px; margin: 8px 0 0 28px; border-bottom: 1px solid var(--border); }
.tchart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tchart-area { fill: var(--bar-ok); opacity: .16; }
.tchart-accent .tchart-area { fill: var(--accent); }
.tchart-accent .tchart-line { stroke: var(--accent); }
.tchart-swatch { background: var(--bar-ok); }
.tchart-accent .tchart-swatch { background: var(--accent); }
.tchart-line { fill: none; stroke: var(--bar-ok); stroke-width: 1.8; stroke-linejoin: round; }
.tchart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.tchart-grid > span { position: absolute; right: calc(100% + 6px); top: -.6em; font-size: .7rem; color: var(--muted); }
.tchart-dot { position: absolute; width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px; border-radius: 50%; background: var(--bar-bad); pointer-events: none; }
.tchart-hit { position: absolute; top: 0; bottom: 0; }
.tchart-hit:hover { background: linear-gradient(var(--muted), var(--muted)) center / 1px 100% no-repeat; }
.tchart-tip { display: none; position: absolute; top: 4px; z-index: 5; width: max-content; padding: 6px 10px; font-size: .78rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.tchart-tip strong { display: block; color: var(--text); font-weight: 600; }
.tchart-hit:hover .tchart-tip { display: block; }
.tchart-axis { position: relative; height: 18px; margin-left: 28px; font-size: .7rem; color: var(--muted); }
.tchart-axis > span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.more-panel.right { left: auto; right: 0; }
details.more-filters.search-toggle > summary { padding: 4px 10px; min-height: calc(1.5em + 10px); justify-content: center; }
details.more-filters.search-toggle > summary::after { content: none; }
.search-toggle form.search { margin: 0; padding: 4px; flex-wrap: nowrap; }
.search-toggle input[type=search] { width: 280px; max-width: 60vw; padding: 6px 10px; }
a.pill.bad, .pill-link { text-decoration: none; cursor: pointer; }
a.pill.bad:hover { outline: 1px solid var(--bad); }
.pill-link:hover .pill { outline: 1px solid currentColor; }
dialog.modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; padding: 16px 18px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .5); }
/* Without script the error links target the dialog, and this shows it in place. */
dialog.modal:target { display: block; z-index: 30; }
dialog.modal[open], dialog.modal:target { position: fixed; inset: 0; margin: auto; height: fit-content; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal-head h2 { margin: 0; }
.modal-close { color: var(--muted); text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0 4px; }
.modal-close:hover { color: var(--text); }
dialog.modal .tech { margin-top: 10px; }

/* areas list */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows .icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
.rows .count { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.card h3 { font-size: .9rem; color: var(--muted); margin: 16px 0 6px; }
.rows .name { font-weight: 600; flex: 1 1 140px; }
.rows .when { color: var(--muted); font-size: .88rem; flex: 1 1 160px; }
.rows .detail { flex-basis: 100%; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }

/* run strip */
.legend { font-size: .82rem; color: var(--muted); margin: 8px 0 0; }

p.filters { margin: 0 0 12px; }
input[type=number] { padding: 8px 10px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); width: 9em; max-width: 100%; }

/* search, items, catalog */
form.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
form.search input[type=search] { flex: 1 1 220px; min-width: 0; }
input[type=search], select {
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  max-width: 100%;
}
/* Own chevron instead of the native arrow glued to the edge; the SVG cannot read --muted, so dark mode swaps it. */
select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2360666d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
@media (prefers-color-scheme: dark) {
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa2ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
.rows .links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: .88rem; }
p.links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; }
.banner p, .banner ul { margin: 6px 0 0; }
.banner ul { padding-left: 20px; }
details.tech { margin-top: 8px; font-size: .88rem; }
details.tech pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: top; }
thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: .8rem; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* filters, paging */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: .85rem; }
.filters a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.filters .count { color: var(--muted); font-variant-numeric: tabular-nums; }
/* The active chip's count takes the chip's own text colour: --muted on --accent is 1.1 : 1, unreadable. */
.filters a[aria-current="true"] .count { color: inherit; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; font-size: .9rem; }
details.more-filters { position: relative; }
details.more-filters > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: .85rem; }
details.more-filters > summary::-webkit-details-marker { display: none; }
details.more-filters > summary::after { content: "▾"; color: var(--muted); }
details.more-filters > summary.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
details.more-filters > summary.active::after { color: inherit; }
.more-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.filters .more-panel a { border-color: transparent; border-radius: var(--radius-small); }
.filters .more-panel a:hover { background: var(--surface-muted); }
.filters .more-panel a[aria-current="true"]:hover { background: var(--accent); }

/* run list: one linked row per run, one framed block per D18 day */
.run-group { border: 1px solid var(--border); border-radius: var(--radius-small); overflow: hidden; }
.run-group + .run-group { margin-top: 14px; }
.run-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; background: var(--surface-muted); border-bottom: 1px solid var(--border); font-size: .85rem; }
.card h3.run-day { font-size: .9rem; font-weight: 600; color: var(--text); margin: 0; }
.run-day-sum { margin-left: auto; font-variant-numeric: tabular-nums; }
.run-list { list-style: none; margin: 0; padding: 0; }
.run-list li + li { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.run-row {
  display: grid;
  grid-template-columns: 12px 44px 20px minmax(0, 1fr) minmax(150px, 210px) 72px;
  gap: 4px 14px;
  align-items: center;
  padding: 9px 12px;
  color: var(--text);
  text-decoration: none;
}
.run-row:hover { background: var(--surface-muted); }
.hm-running { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.run-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.run-trigger { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.run-trigger svg { flex: none; }
.run-figures .pill, .run-day-sum .pill { font-size: .72rem; padding: 1px 8px; margin-right: 8px; }
.run-figures .run-errors, .run-day-sum .run-errors { margin: 0 0 0 8px; }
.run-effect { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .85rem; }
.effect-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-muted); }
.effect-bar .seg { display: block; height: 100%; }
.seg-created { background: var(--bar-ok); }
.seg-updated { background: var(--accent); }
.seg-unpublished { background: var(--bar-warn); }
.seg-deleted { background: var(--muted); }
.seg-failed { background: var(--bar-bad); }
.effect-bar.idle .seg:not(.seg-failed) { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.run-figures { font-size: .88rem; font-variant-numeric: tabular-nums; padding-left: 10px; }
.run-took { font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  /* Two lines: name and last sync, then category and shop id. A shop id that is only a dash takes no line. */
  .catalog-rows li { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "icon name synced" ". shop shop"; }
  .catalog-rows.with-category li { grid-template-columns: 20px auto minmax(0, 1fr) auto; grid-template-areas: "icon name name synced" ". category shop shop"; }
  .catalog-rows .item-icon { grid-area: icon; }
  .catalog-rows .name { grid-area: name; min-width: 0; }
  .catalog-rows .when { grid-area: category; }
  .catalog-rows .catalog-shop { grid-area: shop; min-width: 0; }
  .catalog-rows .catalog-synced { grid-area: synced; }
  .catalog-rows .catalog-shop:has(> .muted:only-child) { display: none; }
  /* The shop link beside the name; what changed below. */
  .detail-grid .rows.items li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .detail-grid .rows.items .name { grid-column: 2; grid-row: 1; }
  .detail-grid .rows.items .icon-links { grid-column: 3; grid-row: 1; }
  .detail-grid .rows.items .when { grid-column: 2 / -1; grid-row: 2; }
  /* Scoped to the run row: unscoped, the named areas pulled the history and call rows' times onto a row of their own. */
  .run-row { grid-template-columns: 12px auto 20px minmax(0, 1fr); grid-template-areas: "dot time trigger took" ". effect effect effect" ". figures figures figures"; }
  .run-row > .hm { grid-area: dot; }
  .run-row > .run-time { grid-area: time; }
  .run-row > .run-trigger { grid-area: trigger; }
  .run-day-sum { margin-left: 0; flex-basis: 100%; }
  .run-row > .run-effect { grid-area: effect; }
  .run-row > .run-figures { grid-area: figures; font-size: .82rem; color: var(--muted); padding-left: 0; }
  .run-row > .run-took { grid-area: took; }
  /* Calls: time, icon and duration on the first line, the operation and its meta full width below. */
  .rows.call-rows li, .call-line { grid-template-columns: 12px auto 18px minmax(0, 1fr) auto 16px; }
  .call-rows li > .hm, .call-line > .hm { grid-area: 1 / 1 / 2 / 2; }
  .call-rows li > .run-time, .call-line > .run-time { grid-area: 1 / 2 / 2 / 3; }
  .call-rows li > .item-icon, .call-line > .item-icon { grid-area: 1 / 3 / 2 / 4; }
  .call-rows li > .call-took, .call-line > .call-took { grid-area: 1 / 5 / 2 / 6; }
  .call-rows li > .row-chev, .call-line > .row-chev { grid-area: 1 / 6 / 2 / 7; }
  .call-rows li > .call-op, .call-line > .call-op { grid-area: 2 / 2 / 3 / 7; }
  .call-rows li > .call-meta, .call-line > .call-meta { grid-area: 3 / 2 / 4 / 7; }
  .call-line > .call-error { grid-area: 4 / 2 / 5 / 7; }
  /* Tracking rows: name and count, then the bar or the sentence full width. */
  .rows.track-rows li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .track-rows .name { grid-column: 2; grid-row: 1; }
  .track-rows .track-count { grid-column: 3; grid-row: 1; }
  .track-rows .effect-bar, .track-rows .when { grid-column: 2 / -1; grid-row: 2; }
}

p.note { margin: 0 0 8px; font-size: .88rem; }

/* forms */
form.stack { max-width: 440px; }
form.stack label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: .9rem; }
input[type=text], input[type=password] {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* maintenance: action rows open their dialog; retention rows draw each limit against the longest */
.rows.maint-rows li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 12px; }
.rows .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rows .what > * { flex: none; }
.rows .icon.danger-icon { color: var(--bad); }
.rows.retention-rows li { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(40px, 140px) 80px; gap: 4px 12px; }
.retention-rows .what { grid-column: 2 / 4; }
.retention-rows .kept { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-head .small-note { font-size: .82rem; }
.config-hint { margin: 0 0 12px; font-size: .9rem; }
.config-rows .what { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.config-rows .what .name { flex: 0 0 auto; }
.config-rows .detail { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; min-width: 0; font-size: .9rem; }
.config-rows .config-id { flex-wrap: nowrap; gap: 4px; }
.config-rows .config-id .id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: .82rem; }
.purge-reason { margin: 8px 0 0 32px; font-size: .88rem; }
dialog.modal > p { margin: 0; }

/* api traffic */
details.group { border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); }
details.group + details.group { margin-top: 8px; }
details.group > summary { cursor: pointer; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
details.group[open] > summary { border-bottom: 1px solid var(--border); }
details.group .body { padding: 10px 12px; }
details.group.step { border-color: var(--border); margin-top: 8px; }
.call-meta { font-size: .85rem; color: var(--muted); margin: 4px 0 0; overflow-wrap: anywhere; }
.call-error { color: var(--bad); font-size: .88rem; margin: 4px 0 0; overflow-wrap: anywhere; }
.body-view { margin-top: 8px; }
.body-view pre {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 10px;
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 28rem;
  overflow: auto;
  margin: 6px 0;
}

/* access pages */
.access { max-width: 480px; margin: 48px auto; }
.access .card { padding: 24px; }
.access h1 { font-size: 1.3rem; margin: 0 0 4px; }

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

@media (max-width: 600px) {
  body { font-size: 14px; }
  .config-rows .detail { flex-basis: 100%; justify-content: flex-start; }
  .access { margin: 16px auto; }
  /* Only the current area keeps its label in view; the others keep it for screen readers. */
  .nav a { padding: 10px; }
  .nav a:not([aria-current="page"]) .nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* Inline below the chips: an absolute panel would push past the right edge and scroll the page. */
  details.more-filters[open] { flex-basis: 100%; }
  .more-panel { position: static; width: auto; flex-direction: row; flex-wrap: wrap; margin-top: 6px; box-shadow: none; }
  /* Header: name and the two buttons on one line, the status pills below; the sync button shrinks to its icon. */
  .top-row { gap: 6px 10px; padding: 10px 0 6px; }
  .brand, .title-row { display: contents; }
  .brand h1 { order: 1; flex: 1 1 0; min-width: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actions { order: 2; flex-wrap: nowrap; }
  .top-row::after { content: ""; order: 3; flex-basis: 100%; }
  .title-row > .pill, .title-row > details.status { order: 4; }
  .button.sync { position: relative; padding: 7px 10px; }
  .button.sync .sync-icon { display: inline-block; }
  .button.sync[aria-busy="true"] .sync-icon { display: none; }
  .button.sync .sync-idle, .button.sync .sync-busy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Anchored to the header, not the pill, so it stays inside the screen. */
  details.status { position: static; }
  .status-pop { left: 16px; right: 16px; top: calc(100% - 4px); width: auto; max-width: none; }
  /* One swipeable line of chips and tabs; opening a dropdown or the search lets the row wrap to show its panel. */
  .card-head > .filters { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
  .filters, .kind-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .filters::-webkit-scrollbar, .kind-tabs::-webkit-scrollbar { display: none; }
  .filters > *, .kind-tabs > * { flex: none; }
  .filters:has(details[open]) { flex-wrap: wrap; overflow: visible; }
  .kind-tabs a { white-space: nowrap; }
  /* Retention: name and limit on one line, the bar below. */
  .rows.retention-rows li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .retention-rows .name, .retention-rows .what { grid-column: 2; grid-row: 1; }
  .retention-rows .kept { grid-column: 3; grid-row: 1; }
  .retention-rows .effect-bar { grid-column: 2 / -1; grid-row: 2; }
}

/* setup wizard (broker-setup-wizard D20, D21, D30): the journey on the access card, then the rail beside one step card */
.journey { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 18px; padding: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.journey li { display: inline-flex; align-items: center; gap: 6px; }
.journey li + li::before { content: ""; width: 18px; height: 1px; background: var(--border); margin-right: 2px; }
.journey .num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface); }
.journey .current { color: var(--text); font-weight: 600; }
.journey .current .num { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.journey .done .num { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.path-line { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin: 8px 0 4px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-small); }
.path-line code { flex: 1 1 auto; overflow-wrap: anywhere; }
p.token-where { margin-bottom: 0; }
p.token-renewed { font-size: .84rem; margin-top: 4px; }
.access .banner { margin: 12px 0 0; font-size: .92rem; }

.wrap.narrow { max-width: 1080px; }
.wiz { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.wiz-rail { padding: 10px 8px; position: sticky; top: 84px; }
.wiz-rail ol { list-style: none; margin: 0; padding: 0; }
.wiz-rail .step { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 8px; border-radius: var(--radius-small); color: var(--muted); text-decoration: none; font-size: .9rem; }
.wiz-rail a.step:hover { background: var(--surface-muted); color: var(--text); }
/* Empty ring = open, dot = current, check = done (D10); "!" amber = untested or failed (D14), red = required step skipped. */
.wiz-rail .ring { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; line-height: 1; }
.wiz-rail .ring svg, .ring-demo svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.wiz-rail li.current .step { background: var(--info-bg); color: var(--text); font-weight: 600; }
.wiz-rail li.current .ring { border-color: var(--accent); }
.wiz-rail li.current .ring::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wiz-rail li.done .step, .wiz-rail li.untested .step, .wiz-rail li.missing .step, .wiz-rail li.changed .step { color: var(--text); }
.wiz-rail li.done .ring { border-color: var(--ok); color: var(--ok); }
.wiz-rail li.untested .ring, .ring-demo.untested { border-color: var(--warn); color: var(--warn); font-size: .7rem; font-weight: 700; line-height: 1; }
.wiz-rail li.missing .ring { border-color: var(--bad); color: var(--bad); }
/* Changed after the first setup and verified (D31): the check on a filled accent ring. */
.wiz-rail li.changed .ring { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* Advanced steps under Einfach (D9): listed, passive, not a link. */
.wiz-rail li.off .step { opacity: .45; cursor: default; }
.wiz-rail li.off .ring { border-style: dashed; }
.ring-demo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.wiz-progress { display: none; }

.wiz-step { padding: 20px 22px; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.step-head h2 { font-size: 1.2rem; margin: 0; }
.step-head [data-test="requirement"] { margin-left: auto; }
.lead { font-size: .98rem; margin: 10px 0 0; }
.wiz-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); gap: 0 22px; margin-top: 14px; }
.wiz-fields { min-width: 0; }
.wiz-body > .wiz-actions { grid-column: 1 / -1; }
.wiz-help { border-left: 1px solid var(--border); padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: .88rem; min-width: 0; }
.wiz-help h3 { display: flex; align-items: center; gap: 6px; font-size: .88rem; margin: 0 0 2px; }
.wiz-help svg { width: 16px; height: 16px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wiz-help .without h3, .wiz-help .without svg { color: var(--warn); }
.wiz-help p { margin: 0; color: var(--muted); }
.wiz-help ol { margin: 0; padding-left: 18px; color: var(--muted); }
.wiz-help li + li { margin-top: 6px; }
.wiz-help code { overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .wiz-body { grid-template-columns: minmax(0, 1fr); }
  .wiz-help { order: -1; border-left: 0; padding: 0 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
}
.next-hint { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: .88rem; color: var(--muted); }
.wiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.wiz-actions .spacer { flex: 1 1 auto; }
/* The spacer takes the free space first; on a wrapped line the auto margin keeps "Weiter" on the right. */
.wiz-actions .button.primary { margin-left: auto; }
.saved-note { font-size: .8rem; color: var(--muted); }
/* The form's first submit button, so Enter in a field means "Weiter"; off-screen, never focusable. */
.default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Willkommen: what to have ready, and the mode choice */
h3.section, .card h3.section { font-size: .95rem; color: var(--text); margin: 22px 0 0; }
.missing-intro { font-size: .88rem; margin: 6px 0 0; }
.missing-list { margin: 6px 0 0; padding-left: 20px; font-size: .88rem; }
.ready { list-style: none; margin: 14px 0 0; padding: 0; }
.ready li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.ready li:first-child { border-top: 0; }
.ready svg { width: 20px; height: 20px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ready .name { font-weight: 600; }
.ready .detail { grid-column: 2; color: var(--muted); font-size: .86rem; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.choice { position: relative; display: block; padding: 14px 16px 14px 44px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.choice input { position: absolute; left: 16px; top: 17px; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--info-bg) 45%, var(--surface)); }
.choice .title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.choice p { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.choice .meta { margin-top: 8px; font-size: .8rem; }
.mode-note { font-size: .84rem; margin: 8px 0 0; }

/* step fields and the connection test (M2-M4, D11, D19) */
.fields { margin-top: 18px; }
.field + .field { margin-top: 16px; }
.field label, .field .label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; margin: 0 0 6px; }
.field .hint { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }
.field .hint.bad { color: var(--bad); }
.field .hint code { overflow-wrap: anywhere; }
.field select.wide { width: 100%; }
.field select { padding: 9px 32px 9px 12px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1 1 auto; min-width: 0; }
.input-row .button { flex: none; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-small); overflow: hidden; }
.seg label { margin: 0; padding: 6px 12px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.seg label + label { border-left: 1px solid var(--border); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--accent); color: var(--accent-text); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Only the chosen Shopify credential kind; without :has both show and the POST keeps the chosen one. */
.fields:has(input[name=credential][value=token]:checked) .cred-client,
.fields:has(input[name=credential][value=client]:checked) .cred-token { display: none; }
.wiz-step .banner { margin-top: 14px; }
.test-box { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius); }
.test-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
.test-head .what { flex: 1 1 200px; font-size: .88rem; color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 4px 14px 12px; border-top: 1px solid var(--border); }
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 8px 0; font-size: .92rem; }
.checks li + li { border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.checks .ic { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.checks .ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.checks .ok .ic { background: var(--ok-bg); color: var(--ok); }
.checks .bad .ic { background: var(--bad-bg); color: var(--bad); }
.checks .warn .ic { background: var(--warn-bg); color: var(--warn); }
.checks .skip .ic { background: var(--neutral-bg); color: var(--neutral); }
/* ⚠ The skip link's .skip (top: -48px) also matches a skipped check line; undo it there. */
.checks li.skip { position: static; z-index: auto; background: none; color: inherit; padding: 8px 0; border-radius: 0; }
.checks .title { display: block; }
.checks .detail { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.checks .bad .title { color: var(--bad); font-weight: 600; }
.checks .confirm { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 10px; background: var(--surface-muted); border-radius: var(--radius-small); }
.checks .later .ic { background: var(--neutral-bg); color: var(--neutral); }
.checks.plain { border-top: 0; padding: 4px 0 0; }

/* M5-M8: the feature switch, and what it hides while off (M6, M7); without :has everything shows and the POST saves the switch only */
.fields.fields-tight { margin-top: 8px; }
.field label.toggle-line, .set-rows label.toggle-line { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .95rem; }
.toggle-line input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.toggle-line:has(.switch:checked) .off, .toggle-line:has(.switch:not(:checked)) .on { display: none; }
/* M6, M7: what only the restart window checks (D48), as one info line */
.after-save { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; font-size: .86rem; color: var(--muted); }
.after-save svg { width: 16px; height: 16px; margin-top: 2px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wiz-step:has(.feature-switch:not(:checked)) :is(.feature-on, .next-hint) { display: none; }

/* M9-M13: one row per setting, the default on the right; a changed row carries the dot and its reset (D31, D32) */
.set-rows { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--border); }
.set-tools { display: flex; justify-content: flex-end; margin-top: 14px; }
.set-tools + .set-rows { margin-top: 10px; }
.set-group { font-size: .84rem; font-weight: 600; color: var(--muted); margin: 22px 0 6px; }
.set-tools + .set-group { margin-top: 6px; }
.set-group + .set-rows { margin-top: 0; }
.set-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 200px 170px; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.set-rows .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-rows .name { font-weight: 600; font-size: .9rem; }
.set-rows .detail { color: var(--muted); font-size: .82rem; }
.set-rows .hint.bad { color: var(--bad); font-size: .82rem; }
.set-rows .ctl input[type=text], .set-rows .ctl select { width: 100%; padding: 7px 10px; }
.set-rows .ctl select { padding-right: 32px; }
.set-rows .dur { display: flex; align-items: center; gap: 6px; }
.set-rows .ctl .dur input { width: 90px; padding: 7px 8px; }
.set-rows .ctl .dur select { flex: 1 1 auto; padding: 7px 30px 7px 8px; }
.set-rows .unit { color: var(--muted); font-size: .88rem; }
.set-rows .def { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; font-size: .8rem; text-align: right; }
.set-rows .def .reset { font-size: .8rem; }
.set-rows li.changed .name::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: 2px; }
.set-rows li.invalid .ctl :is(input, select) { border-color: var(--bad); }
dl.read-only { margin-top: 8px; }
dl.read-only code { overflow-wrap: anywhere; }
dl.read-only dd { flex-wrap: wrap; }
dl.read-only .why { flex-basis: 100%; color: var(--muted); font-size: .8rem; }

/* M14 summary: one line per step, the rail's rings (D13, D14); dashed = left at its default */
.sum-rows { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--border); }
.sum-rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 60px; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.sum-rows .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sum-rows .name { font-weight: 600; font-size: .92rem; }
.sum-rows .detail { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.sum-rows li > a { justify-self: end; font-size: .88rem; }
.sum-rows .ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.sum-rows .ring svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sum-rows .done .ring { border-color: var(--ok); color: var(--ok); }
.sum-rows .untested .ring { border-color: var(--warn); color: var(--warn); }
.sum-rows .missing .ring { border-color: var(--bad); color: var(--bad); }
.sum-rows .missing .name { color: var(--bad); }
.sum-rows .skipped .ring { border-style: dashed; }
.inline-form { display: inline; }
.inline-form .link-button { font-size: inherit; }
ol.steps-after { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
ol.steps-after li + li { margin-top: 4px; }

/* M15 restart: the access card, a bar driven by the script's sub-steps and one line per stage; the start id decides, not
   the bar (D35). Lines stay neutral (pending ring, spinner, grey tick) until the bar is full (D44). */
.restart h1 { margin-bottom: 6px; }
.restart-bar { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin: 14px 0 6px; }
.restart-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease-out; }
.checks .pending .ic { border: 2px solid var(--border); }
.checks .pending .title { color: var(--muted); }
.checks .done .ic { background: var(--neutral-bg); color: var(--neutral); }
.checks .run .ic { color: var(--accent); }
.checks .run .ic .spinner { display: inline-block; width: 12px; height: 12px; }
.checks .warn .ic { font-size: .72rem; font-weight: 700; }
/* WizardCheckSlots: the token slot only for the client-credential kind, like its fields. */
body:has(input[name=credential][value=token]:checked) .slot-client { display: none; }

/* D50 wizard test dialog: the restart window's bar and neutral lines; the verdict as a banner once the bar is full.
   Anchored at the top, so a line growing at the reveal pushes down instead of re-centring the dialog. */
dialog.modal.test-dialog[open] { margin: 10vh auto auto; }
.test-dialog .restart-bar { margin-top: 0; }
.test-dialog .checks.plain { padding-top: 8px; }
.test-dialog .test-status.banner { margin: 8px 0 0; }

/* M16 Übersicht after the setup: a banner's own button stays its size */
.banner > .button, .banner-form { flex: none; }
.banner-form { margin: 0; }

@media (max-width: 760px) {
  /* One line with the step's name and a bar; "Alle Schritte" opens the rail in place (D30). */
  .wiz { grid-template-columns: minmax(0, 1fr); }
  .wiz-rail { display: none; position: static; }
  .wiz-rail:target { display: block; }
  .wiz-progress { display: block; padding: 10px 14px; margin-bottom: 12px; }
  .wiz-progress .bar { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-top: 8px; }
  .wiz-progress .bar span { display: block; height: 100%; background: var(--accent); }
  .wiz-progress .row { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
  .wiz-step { padding: 16px; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .set-rows li { grid-template-columns: minmax(0, 1fr); }
  .set-rows .def { justify-content: flex-start; text-align: left; }
  .sum-rows li { grid-template-columns: 18px minmax(0, 1fr) 50px; }
  .sum-rows li > .pill { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* the wizard from Wartung (D29-D31): the entry in the Konfiguration card, the draft banner, kept secrets, M17c's rings */
.card-head .setup-open { margin-left: auto; }
.banner.setup-draft { flex-wrap: wrap; margin-bottom: 16px; }
.banner.setup-draft > span { flex: 1 1 320px; }
.banner.setup-draft .button, .banner.setup-draft form { flex: none; }
.set-secret { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius-small); font-size: .9rem; }
.set-secret .muted { flex: 1 1 auto; }
details.secret-replace[open] { flex-basis: 100%; }
details.secret-replace > summary { list-style: none; cursor: pointer; width: max-content; }
details.secret-replace > summary::-webkit-details-marker { display: none; }
details.secret-replace[open] > summary { display: none; }
.sum-rows .changed .ring { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.wiz-step .change-note { font-size: .86rem; margin: 12px 0 0; }