/* Scandit theme for the LP emulator UI, loaded after vendor/nasaq.css.
 * 1. Semantic tokens (the only place raw values live), named after the Scandit design-system tokens.
 * 2. Nasaq's --nq-* variables pointed at those tokens (Nasaq derives --primary etc. from them).
 * 3. Overrides keyed on [data-slot] so Nasaq components take Scandit anatomy.
 * 4. Layout for this app.
 */

@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-style: normal; font-display: swap; src: url("vendor/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: swap; src: url("vendor/inter-latin-600-normal.woff2") format("woff2"); }

/* ---------- 1. Semantic tokens ---------- */
:root {
  --background-primary: #FFFFFF;
  --background-secondary: #F7F7F7;
  --background-brand: #141F2E;
  --background-overlay-darker: #00000066;

  --surface-default: #FFFFFF;
  --surface-formcomp: #F3F5F8;
  --surface-hover: #F3F5F8;
  --surface-pressed: #E1E7ED;
  --surface-selected: #EFF5FA;
  --surface-disabled: #E1E7ED;
  --surface-interactive: #1047A1;
  --surface-interactive-hover: #1660D9;
  --surface-interactive-pressed: #063073;
  --surface-info-full: #1660D9;
  --surface-info-soft: #D9E7FF;
  --surface-info-softer: #ECF3FF;
  --surface-success-full: #0D853D;
  --surface-success-soft: #CEF2DC;
  --surface-warning-full: #F0BD30;
  --surface-warning-soft: #FFF1CC;
  --surface-danger-full: #D92121;
  --surface-danger-soft: #FFD9D9;
  --surface-danger-softer: #FFE8E8;
  --surface-neutral-full: #525A61;
  --surface-neutral-soft: #E1E7ED;
  --surface-neutral-softer: #F3F5F8;

  --text-primary: #16191C;
  --text-secondary: #525A61;
  --text-disabled: #ACB6BF;
  --text-inverted: #FFFFFF;
  --text-info-default: #1660D9;
  --text-info-hover: #3683FF;
  --text-info-pressed: #1047A1;
  --text-danger: #D92121;
  --text-on-color-blue: #1047A1;
  --text-on-color-green: #05612A;
  --text-on-color-yellow: #4D3800;
  --text-on-color-red: #AD1111;

  --icon-primary: #16191C;
  --icon-secondary: #6C7680;
  --icon-on-color: #FFFFFF;
  --icon-info: #1660D9;
  --icon-positive: #0D853D;
  --icon-warning: #F0BD30;
  --icon-danger: #D92121;

  --border-primary: #525A61;
  --border-secondary: #C7CFD6;
  --border-tertiary: #E1E7ED;
  --border-interactive: #16191C;
  --border-info: #1660D9;
  --border-danger: #D92121;
  --border-notification-info: #B2D0FF;
  --border-notification-warning: #FFE7A6;
  --border-notification-success: #A1E5BC;
  --border-notification-error: #FFB8B8;

  --shadow-card: 0 0 4px 0 rgba(27, 32, 38, 0.08);
  --shadow-card-hover: 0 0 8px 0 rgba(27, 32, 38, 0.08);
  --shadow-floating: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-dialog: 0 1px 3px 0 rgba(0, 0, 0, 0.20), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

  --radius-input: 4px;
  --radius-badge: 6px;
  --radius-button: 8px;
  --radius-panel: 16px;

  --font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  /* Inter has no monospace cut; code and ids need one. */
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- 2. Nasaq variables -> Scandit tokens ---------- */
:root, [data-theme="light"] {
  --nq-bg: var(--background-secondary);
  --nq-surface: var(--surface-default);
  --nq-surface-raised: var(--surface-default);
  --nq-surface-overlay: var(--surface-default);
  --nq-surface-soft: var(--surface-formcomp);
  --nq-line: var(--border-secondary);
  --nq-line-strong: var(--border-primary);
  --nq-fg: var(--text-primary);
  --nq-fg-body: var(--text-primary);
  --nq-fg-muted: var(--text-secondary);
  --nq-accent: var(--surface-interactive);
  --nq-accent-text: var(--text-on-color-blue);
  --nq-focus: var(--border-interactive);
  --nq-success: var(--surface-success-full);
  --nq-success-text: var(--text-on-color-green);
  --nq-success-soft: var(--surface-success-soft);
  --nq-warning: var(--surface-warning-full);
  --nq-warning-text: var(--text-on-color-yellow);
  --nq-warning-soft: var(--surface-warning-soft);
  --nq-danger: var(--surface-danger-full);
  --nq-danger-text: var(--text-on-color-red);
  --nq-danger-solid: var(--surface-danger-full);
  --nq-on-danger: var(--text-inverted);
  --nq-danger-soft: var(--surface-danger-soft);
  --nq-info: var(--surface-info-full);
  --nq-info-text: var(--text-on-color-blue);
  --nq-info-soft: var(--surface-info-soft);
  --nq-hover: var(--surface-hover);
  --nq-selected: var(--surface-selected);
  --nq-elevated: var(--surface-default);
  --nq-action-l: var(--surface-interactive);
  --nq-on-action-l: var(--text-inverted);
  --nq-brand-l: var(--surface-interactive);
  --nq-font-sans: var(--font-sans);
  --nq-font-ui: var(--font-sans);
  --nq-font-mono: var(--font-code);
  --nq-radius-control: var(--radius-button);
  --nq-radius-card: var(--radius-panel);
  --nq-radius-surface: var(--radius-panel);
  --nq-radius-floating: var(--radius-button);
  --nq-control: 40px;
  --nq-control-sm: 32px;
  --nq-row: 48px;
  --nq-nav-row: 40px;
  --nq-control-pad: 24px;
  /* code-block syntax colours come from Nasaq's --shiki-* variables; keep them on status tokens */
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); background: var(--background-secondary); color: var(--text-primary); }
body { margin: 0; min-height: 100vh; background: var(--background-secondary); color: var(--text-primary);
  font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
code, pre, .mono { font-family: var(--font-code); letter-spacing: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; fill: var(--icon-color, var(--icon-primary)); }
.icon.s { width: 20px; height: 20px; }
.icon.xs { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--border-interactive); outline-offset: 2px; }

/* named type styles */
.t-heading-large { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
.t-heading-medium { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.t-heading-card { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.t-body { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; }
.t-body-md { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.25px; }
.t-label-button { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.25px; }
.t-label-medium { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.25px; }
.t-caption { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.25px; }
.muted { color: var(--text-secondary); }

/* ---------- 3. Component anatomy ---------- */

/* Button: 40px / 8px radius; primary = surface/interactive; ghost default. */
[data-slot="button"], [data-slot="copy-button"], [data-slot="dialog-close"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-button); background: transparent; color: var(--text-primary);
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.25px; white-space: nowrap; cursor: pointer;
  transition: background-color .15s;
}
[data-slot="button"]:hover, [data-slot="copy-button"]:hover { background: var(--surface-hover); }
[data-slot="button"]:active, [data-slot="copy-button"]:active { background: var(--surface-pressed); }
[data-slot="button"][data-variant="primary"] { background: var(--surface-interactive); color: var(--text-inverted); padding: 0 24px; }
[data-slot="button"][data-variant="primary"]:hover { background: var(--surface-interactive-hover); }
[data-slot="button"][data-variant="primary"]:active { background: var(--surface-interactive-pressed); }
[data-slot="button"][data-variant="primary"] .icon { --icon-color: var(--icon-on-color); }
[data-slot="button"][data-variant="secondary"] { background: var(--surface-default); border-color: var(--border-primary); }
[data-slot="button"][data-variant="secondary"]:hover { background: var(--surface-hover); }
[data-slot="button"][data-variant="danger"] { background: var(--surface-danger-full); color: var(--text-inverted); }
[data-slot="button"][data-variant="danger"]:hover { filter: brightness(.9); }  /* no danger-hover token in the kit */
/* While recording: red pulses to white; the text and border flip to red so the label stays readable. */
[data-slot="button"][data-variant="danger"].recording { border-color: var(--surface-danger-full); animation: rec-pulse 1.6s ease-in-out infinite; }
@keyframes rec-pulse { 50% { background: var(--surface-default); color: var(--text-danger); } }
@media (prefers-reduced-motion: reduce) { [data-slot="button"][data-variant="danger"].recording { animation: none; } }
[data-slot="button"][data-size="sm"], [data-slot="copy-button"] { height: 32px; padding: 0 12px; border-radius: var(--radius-badge);
  font-size: 14px; line-height: 20px; }
[data-slot="button"][disabled] { background: var(--surface-disabled); color: var(--text-disabled); cursor: not-allowed; }
[data-slot="copy-button"] { width: 32px; padding: 0; }
[data-slot="copy-button"] .icon, [data-slot="dialog-close"] .icon { --icon-color: var(--icon-primary); }
[data-slot="copy-button"][data-copied] .icon { --icon-color: var(--icon-positive); }
[data-slot="dialog-close"] { position: absolute; top: 16px; right: 16px; width: 40px; padding: 0; }

/* Text field / select trigger: gray surface/formcomp, 4px radius, 2px border/interactive on focus. */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .field > .label { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.25px; color: var(--text-secondary); }
.field .helper { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
[data-slot="input"], [data-slot="select-trigger"] {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 2px solid transparent; border-radius: var(--radius-input);
  background: var(--surface-formcomp); color: var(--text-primary); font-size: 14px; line-height: 20px; letter-spacing: 0.25px;
  outline: none; transition: background-color .15s;
}
[data-slot="input"]:hover, [data-slot="select-trigger"]:hover { background: var(--surface-pressed); }
[data-slot="input"]:focus, [data-slot="select-trigger"]:focus-visible, [data-slot="select-trigger"][data-popup-open] {
  border-color: var(--border-interactive); background: var(--surface-formcomp); }
[data-slot="input"][aria-invalid="true"] { border-color: var(--border-danger); background: var(--surface-danger-softer); }
[data-slot="select-trigger"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
[data-slot="select-value"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* Dropdown menu: Elevation/2 */
[data-slot="select-content"] { z-index: 60; min-width: var(--anchor-width, 200px); max-height: var(--available-height, 320px); overflow-y: auto;
  padding: 8px 0; background: var(--surface-default); border-radius: var(--radius-input); box-shadow: var(--shadow-floating);
  transition: opacity .15s; }
[data-slot="select-item"] { position: relative; display: flex; align-items: center; height: 40px; padding: 0 16px 0 40px; cursor: pointer;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.25px; color: var(--text-primary); outline: none; }
[data-slot="select-item"][data-highlighted] { background: var(--surface-hover); }
[data-slot="select-item"] .tick { position: absolute; left: 12px; display: inline-flex; }

/* Badge: 6px radius, uppercase label/small, soft surface + on-color text. Not a pill. */
[data-slot="badge"] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-badge);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.25px; text-transform: uppercase; white-space: nowrap;
  background: var(--surface-neutral-soft); color: var(--text-secondary); max-width: 100%; }
[data-slot="badge"][data-tone="info"] { background: var(--surface-info-soft); color: var(--text-on-color-blue); }
[data-slot="badge"][data-tone="success"] { background: var(--surface-success-soft); color: var(--text-on-color-green); }
[data-slot="badge"][data-tone="warning"] { background: var(--surface-warning-soft); color: var(--text-on-color-yellow); }
[data-slot="badge"][data-tone="danger"] { background: var(--surface-danger-soft); color: var(--text-on-color-red); }
[data-slot="badge"] .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--surface-neutral-full); flex: none; }
[data-slot="badge"][data-tone="info"] .dot { background: var(--surface-info-full); }
[data-slot="badge"][data-tone="success"] .dot { background: var(--surface-success-full); }
[data-slot="badge"][data-tone="warning"] .dot { background: var(--surface-warning-full); }
[data-slot="badge"][data-tone="danger"] .dot { background: var(--surface-danger-full); }
[data-slot="badge"] .txt { overflow: hidden; text-overflow: ellipsis; }

/* Callout / alert: 8px radius, 16px padding, 1px notification border, 24px icon. */
[data-slot="alert"] { display: flex; gap: 8px; align-items: flex-start; padding: 16px; border: 1px solid var(--border-notification-info);
  border-radius: var(--radius-button); background: var(--surface-info-soft); color: var(--text-on-color-blue);
  font-size: 16px; line-height: 24px; letter-spacing: 0.25px; }
[data-slot="alert"] .icon { --icon-color: var(--icon-info); }
[data-slot="alert"][data-tone="warning"] { background: var(--surface-warning-soft); border-color: var(--border-notification-warning); color: var(--text-on-color-yellow); }
[data-slot="alert"][data-tone="warning"] .icon { --icon-color: var(--icon-warning); }
[data-slot="alert"][data-tone="success"] { background: var(--surface-success-soft); border-color: var(--border-notification-success); color: var(--text-on-color-green); }
[data-slot="alert"][data-tone="success"] .icon { --icon-color: var(--icon-positive); }
[data-slot="alert"][data-tone="danger"] { background: var(--surface-danger-soft); border-color: var(--border-notification-error); color: var(--text-on-color-red); }
[data-slot="alert"][data-tone="danger"] .icon { --icon-color: var(--icon-danger); }
[data-slot="alert-body"] { min-width: 0; flex: 1; overflow-wrap: anywhere; }
[data-slot="alert-title"] { font-weight: 500; }
[data-slot="alert-time"] { font-size: 12px; line-height: 16px; opacity: 1; }

/* Tabs: underline, interactive colour for the active one. */
[data-slot="tabs-list"] { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-tertiary); }
[data-slot="tabs-list"]::-webkit-scrollbar { display: none; }
[data-slot="tabs-tab"] { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0;
  background: transparent; color: var(--text-secondary); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.25px;
  cursor: pointer; white-space: nowrap; }
[data-slot="tabs-tab"]:hover { color: var(--text-primary); background: var(--surface-hover); }
[data-slot="tabs-tab"][data-active] { color: var(--text-on-color-blue); }
[data-slot="tabs-tab"][data-active]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--surface-interactive); }
[data-slot="tabs-tab"] .icon { --icon-color: var(--icon-secondary); }
[data-slot="tabs-tab"][data-active] .icon { --icon-color: var(--icon-info); }
[data-slot="tabs-tab"] [data-slot="badge"] { text-transform: none; }
[data-slot="tabs-panel"] { outline: none; }

/* Table */
[data-slot="table-container"] { width: 100%; overflow-x: auto; }
[data-slot="table"] { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
[data-slot="table"] th { height: 40px; padding: 0 16px; text-align: left; font-weight: 500; color: var(--text-secondary); white-space: nowrap;
  border-bottom: 1px solid var(--border-secondary); }
[data-slot="table"] td { height: 48px; padding: 8px 16px; vertical-align: middle; border-bottom: 1px solid var(--border-tertiary); }
[data-slot="table"] tbody tr:last-child td { border-bottom: 0; }
[data-slot="table"] tbody tr:hover { background: var(--surface-hover); }
[data-slot="table"] tr[data-clickable] { cursor: pointer; }
[data-slot="table"] tfoot td { border-top: 1px solid var(--border-secondary); border-bottom: 0; font-weight: 600; background: var(--surface-neutral-softer); }
[data-slot="table"] tfoot tr:hover { background: transparent; }
[data-slot="table"] .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-slot="table"] tr[data-dim] td { color: var(--text-secondary); }
[data-slot="table"] tr[data-dim] .strike { text-decoration: line-through; }
[data-slot="table"] td.nowrap { white-space: nowrap; }

/* Nasaq data table (nqDataTable): a div grid; header and body groups vanish (contents) and each row is a
   subgrid spanning every column, so cells line up like a <table>. Same look as the plain table above. */
[data-slot="data-table"] [data-slot="table"] { display: grid; min-width: max-content; }
[data-slot="data-table"] [data-slot="table-header"], [data-slot="data-table"] [data-slot="table-body"] { display: contents; }
[data-slot="data-table"] [data-slot="table-row"] { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  border-bottom: 1px solid var(--border-tertiary); }
[data-slot="data-table"] [data-slot="table-header"] [data-slot="table-row"] { border-bottom-color: var(--border-secondary); }
[data-slot="data-table"] [data-slot="table-body"]:last-of-type [data-slot="table-row"] { border-bottom: 0; }
[data-slot="data-table"] [data-row] { cursor: pointer; }
[data-slot="data-table"] [data-row]:hover { background: var(--surface-hover); }
[data-slot="data-table"] [data-row]:focus-visible { outline-offset: -2px; }
[data-slot="table-head"] { display: flex; align-items: center; height: 40px; padding: 0 16px; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap; }
[data-slot="table-head"] button { display: inline-flex; align-items: center; gap: 4px; margin: 0 -4px; padding: 2px 4px; border: 0;
  border-radius: var(--radius-badge); background: none; color: inherit; font: inherit; cursor: pointer; }
[data-slot="table-head"] button:hover, [data-slot="table-head"] button[data-sorted] { color: var(--text-primary); }
[data-slot="table-cell"] { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; }
[data-slot="data-table"] .num { justify-content: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-slot="data-table"] .nowrap { white-space: nowrap; }
[data-slot="data-table-pagination"] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px;
  font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* Dialog: 16px radius, Elevation/3, scrim, 676px max */
[data-slot="dialog-backdrop"] { position: fixed; inset: 0; z-index: 70; background: var(--background-overlay-darker); transition: opacity .15s; }
[data-slot="dialog-content"] { position: fixed; inset: 0; z-index: 71; margin: auto; width: calc(100% - 32px); max-width: 676px; height: fit-content;
  max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; display: grid; gap: 16px; background: var(--surface-default);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-panel); box-shadow: var(--shadow-dialog); outline: none; transition: opacity .15s; }
[data-slot="dialog-title"] { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: 0; padding-right: 48px; }
[data-slot="dialog-description"] { color: var(--text-secondary); }
[data-starting-style], [data-ending-style] { opacity: 0; }

/* Code block */
[data-slot="code-block"] { margin: 0; overflow: hidden; border: 1px solid var(--border-secondary); border-radius: var(--radius-button);
  background: var(--surface-formcomp);
  --shiki-foreground: var(--text-primary); --shiki-background: transparent; --shiki-token-comment: var(--text-secondary);
  --shiki-token-keyword: var(--text-on-color-blue); --shiki-token-string: var(--text-on-color-green);
  --shiki-token-string-expression: var(--text-on-color-green); --shiki-token-constant: var(--text-on-color-yellow);
  --shiki-token-function: var(--text-on-color-blue); --shiki-token-parameter: var(--text-primary);
  --shiki-token-punctuation: var(--text-secondary); --shiki-token-link: var(--text-info-pressed); }
[data-slot="code-block-header"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 4px 0 16px;
  border-bottom: 1px solid var(--border-secondary); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
[data-slot="code-block-header"] > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-slot="code-block-pre"] { margin: 0; padding: 12px 0; overflow: auto; max-height: 420px; font-size: 13px; line-height: 20px; color: var(--text-primary); }
[data-slot="code-block-pre"] code { display: block; width: max-content; min-width: 100%; }
[data-slot="code-block-pre"] [data-line] { display: flex; padding: 0 16px; white-space: pre; }
[data-slot="code-block-pre"] [data-line] > [aria-hidden] { display: none; }

/* Toasts: bottom-right, white panel with a status icon. */
[data-slot="toaster"] { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
[data-slot="toast"] { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; background: var(--background-brand); color: var(--text-inverted);
  border-radius: var(--radius-button); box-shadow: var(--shadow-floating); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.25px; }
[data-slot="toast"] .icon { --icon-color: var(--icon-on-color); }
[data-slot="toast"][data-type="success"] .icon { --icon-color: var(--icon-positive); }
[data-slot="toast"][data-type="error"] .icon { --icon-color: var(--icon-danger); }
[data-slot="toast"] .desc { font-weight: 400; opacity: 1; overflow-wrap: anywhere; }
[data-slot="toast"] button { margin-left: auto; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; }
[data-slot="toast"] button .icon { --icon-color: var(--icon-on-color); width: 20px; height: 20px; }

/* ---------- 4. App layout ---------- */
.topbar { background: var(--background-brand); color: var(--text-inverted); }
.topbar-in { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand .logo { width: 136px; height: 20px; color: var(--text-inverted); flex: none; }
.brand .product { padding-left: 16px; border-left: 1px solid var(--text-secondary); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.25px; white-space: nowrap; }
.station { color: var(--text-disabled); font-size: 14px; white-space: nowrap; }
.station b { color: var(--text-inverted); font-weight: 500; font-family: var(--font-code); }
.status { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.status [data-slot="badge"] { max-width: 320px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 16px; }
.page-head p { color: var(--text-secondary); margin-top: 4px; }
.page-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tabs-bar { background: var(--background-secondary); }
.stack { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.panel { background: var(--surface-default); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); padding: 24px; min-width: 0; }
.panel.flush { padding: 24px 0 0; }
.panel.flush > .panel-head { padding: 0 24px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.panel-head h2 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.panel-sub { color: var(--text-secondary); margin: -8px 0 16px; }
.flush .panel-head { margin-bottom: 8px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; }
.fact dt { color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; margin-bottom: 4px; }
.fact dd { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; overflow-wrap: anywhere; }
.fact dd.big { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-button);
  background: var(--surface-neutral-softer); }
.row.hl { background: var(--surface-info-soft); color: var(--text-on-color-blue); font-weight: 500; }
.row .time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.row.hl .time { color: var(--text-on-color-blue); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.empty .ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--surface-info-softer); margin-bottom: 8px; }
.empty .ico .icon { --icon-color: var(--icon-info); width: 28px; height: 28px; }
.empty p { color: var(--text-secondary); max-width: 440px; }
.link { color: var(--text-info-default); font-weight: 500; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--text-info-hover); text-decoration: underline; }
.link:active { color: var(--text-info-pressed); }
.empty-inline { color: var(--text-secondary); padding: 8px 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.form-group + .form-group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-tertiary); }
.form-group h3 { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 12px; letter-spacing: 0.25px; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; }
.form-error { color: var(--text-danger); margin-right: auto; }
.details { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; align-items: center; }
.details .k, .details .v, .details .a { padding: 8px 0; border-bottom: 1px solid var(--border-tertiary); min-height: 48px; display: flex; align-items: center; }
.details .k { color: var(--text-secondary); font-weight: 500; }
.details .v { font-family: var(--font-code); font-size: 13px; letter-spacing: 0; overflow-wrap: anywhere; min-width: 0; padding-right: 8px; }
.details .v.plain { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.25px; }
.details .a { justify-content: flex-end; }
.snippets { display: flex; flex-direction: column; gap: 16px; }
.snippet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 500; }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.msg-head h2 { font-family: var(--font-code); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.msg-purpose { color: var(--text-secondary); margin: 8px 0 0; }
.msg-tabs [data-slot="tabs-list"] { margin-top: 8px; }
.msg-tabs [data-slot="tabs-tab"] { height: 40px; font-size: 14px; line-height: 20px; }
.msg-tabs [data-slot="tabs-panel"] { padding-top: 16px; }
.rules { margin: 4px 0 0; padding-left: 20px; }
.log-count { display: flex; flex-wrap: wrap; gap: 8px; }
.reason { color: var(--text-secondary); overflow-wrap: anywhere; }
.top-tabs { margin-top: 8px; }

@media (max-width: 960px) {
  .cols, .cols.even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .topbar-in { padding: 12px 16px; gap: 8px 16px; }
  .wrap { padding: 0 16px 32px; }
  .brand .product { display: none; }
  .status { margin-left: 0; width: 100%; }
  .panel { padding: 16px; }
  .panel.flush { padding: 16px 0 0; }
  .panel.flush > .panel-head { padding: 0 16px; }
  .details { grid-template-columns: 1fr auto; }
  .details .k { grid-column: 1 / -1; border-bottom: 0; min-height: 0; padding-bottom: 0; }
  [data-slot="tabs-tab"] { padding: 0 12px; }
  [data-slot="table"] th, [data-slot="table"] td { padding-left: 12px; padding-right: 12px; }
  [data-slot="table-head"], [data-slot="table-cell"] { padding-left: 12px; padding-right: 12px; }
  [data-slot="dialog-content"] { padding: 16px; }
}

.contents { display: contents; }
.stack.flat { padding-top: 0; }
.panel.flush.top0 { padding-top: 0; }
.empty-inline.padded { padding: 8px 24px 24px; }
.link-icon { --icon-color: var(--icon-info); }
.facts { margin: 0; }
.panel.flush { overflow: hidden; }
.flush [data-slot="table"] th:first-child, .flush [data-slot="table"] td:first-child { padding-left: 24px; }
.flush [data-slot="table"] th:last-child, .flush [data-slot="table"] td:last-child { padding-right: 24px; }
@media (max-width: 640px) {
  .flush [data-slot="table"] th:first-child, .flush [data-slot="table"] td:first-child { padding-left: 16px; }
  .flush [data-slot="table"] th:last-child, .flush [data-slot="table"] td:last-child { padding-right: 16px; }
}
.invisible { visibility: hidden; } .invisible button { pointer-events: none; }
.rules { list-style: disc; }
/* Getting-started checklist: numbered marks, a green check once done; only the current step shows its detail. */
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 4px 0; }
.step-mark { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface-neutral-soft); color: var(--text-secondary); font-size: 14px; font-weight: 600; }
.steps [data-state="current"] .step-mark { background: var(--surface-info-full); color: var(--text-inverted); }
.steps [data-state="done"] .step-mark { background: none; }
.step-mark .icon { --icon-color: var(--icon-positive); width: 28px; height: 28px; }
.steps h3 { font-size: 16px; line-height: 28px; font-weight: 600; }
.steps [data-state="todo"] h3, .steps [data-state="done"] h3 { color: var(--text-secondary); font-weight: 500; }
.step-detail { display: grid; gap: 12px; margin: 4px 0 8px; max-width: 760px; }
.step-detail .muted { color: var(--text-secondary); }
.step-detail .link { display: inline; }
.step-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.step-done { margin: 8px 0 0 40px; color: var(--text-secondary); }
.guide { margin-bottom: 16px; }

/* Buttons on the dark top bar: inverted text, translucent hover. The secondary (white) one keeps its own colors. */
.topbar [data-slot="button"]:not([data-variant]) { color: var(--text-inverted); }
.topbar [data-slot="button"]:not([data-variant]):hover { background: rgba(255, 255, 255, 0.12); }
[data-slot="dialog-content"] > form { display: grid; gap: 16px; }