/* Tinderbox Works design system, taken from specimen.html (DESIGN.md). Do not edit by hand: regenerate from the specimen. */

/* Tinderbox Works — generated from tokens.json */
:root, [data-theme="light"] {
  --primary: #202124;
  --primary-hover: #3c3d41;
  --on-primary: #ffffff;
  --accent-blue: #245dcc;
  --link: var(--accent-blue);
  --focus: var(--accent-blue);
  --focus-on-stage: #7ba6f5;
  --selection: #e9effa;
  --selection-strong: #dce6f8;
  --canvas: #ffffff;
  --surface-1: #f5f5f3;
  --surface-2: #eaeae6;
  --surface-3: #dfdfd9;
  --surface-raised: #ffffff;
  --surface-sunken: var(--surface-1);
  --nav-current: #ffffff;
  --hover-on-raised: var(--surface-1);
  --stage: #18191b;
  --on-stage: #ffffff;
  --on-stage-muted: #b9bcc1;
  --scrim: #2021247a;
  --hairline: #d3d5d8;
  --hairline-soft: #e5e6e8;
  --hairline-strong: #82868c;
  --ink: #202124;
  --ink-muted: #5c6066;
  --ink-disabled: #a6a9ae;
  --inverse-canvas: #202124;
  --inverse-ink: #ffffff;
  --inverse-ink-muted: #b9bcc1;
  --success: #16803c;
  --success-tint: #e3f1e6;
  --success-on-inverse: #5cc07b;
  --warning: #8f6300;
  --warning-tint: #fbefcf;
  --warning-on-inverse: #e2ab45;
  --danger: #c5221f;
  --danger-tint: var(--gradient-coral);
  --danger-hover: #a81c19;
  --danger-on-inverse: #f47a70;
  --on-danger: #ffffff;
  --kind-bug: #b35214;
  --kind-bug-tint: var(--gradient-orange);
  --kind-crash: var(--danger);
  --kind-crash-tint: var(--gradient-coral);
  --kind-feature: #6b4cc9;
  --kind-feature-tint: var(--gradient-violet);
  --kind-feedback: #a3337f;
  --kind-feedback-tint: var(--gradient-magenta);
  --gradient-magenta: #f5d5ed;
  --gradient-violet: #e3dcfa;
  --gradient-orange: #ffe1c4;
  --gradient-coral: #fbd8dd;
  --gradient-glow: #ffffffb8;
  --gradient-violet-glow: #ffffff00;
  --gradient-magenta-glow: #ffffff00;
  --gradient-orange-glow: #ffffff00;
  --gradient-coral-glow: #ffffff00;
  --project-accent: #a3472a;
  --on-project-accent: #ffffff;
  --rail: #202124;
  --rail-hover: #2e2f33;
  --rail-current: #3c3d41;
  --on-rail: #ffffff;
  --on-rail-muted: #a7abb1;
  --rail-attention: #e2ab45;
  --shadow-1: 0 0 0 1px #2021240f, 0 1px 2px #2021240f;
  --shadow-2: 0 0 0 0.5px #2021241a, 0 10px 30px #20212414;
  --shadow-3: 0 0 0 0.5px #2021241f, 0 24px 64px #2021242e;
  --shadow-drag: 0 0 0 1px #20212414, 0 16px 40px #20212429;
  --shadow-selected: 0 0 0 2px #245dcc;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #245dcc;
  --shadow-halo: 0 0 0 1px #245dcc26;
}
[data-theme="dark"] {
  --primary: #f5f5f3;
  --primary-hover: #ffffff;
  --on-primary: #202124;
  --accent-blue: #7ba6f5;
  --link: var(--accent-blue);
  --focus: var(--accent-blue);
  --selection: #26324d;
  --selection-strong: #2f3d5e;
  --canvas: #202124;
  --surface-1: #28292c;
  --surface-2: #323337;
  --surface-3: #3c3d42;
  --surface-raised: #2c2d31;
  --surface-sunken: #1a1b1e;
  --nav-current: #3c3d42;
  --hover-on-raised: #36373b;
  --stage: #141517;
  --scrim: #000000a3;
  --hairline: #3f4146;
  --hairline-soft: #303236;
  --hairline-strong: #7b7f86;
  --ink: #e8e9eb;
  --ink-muted: #a6aab0;
  --ink-disabled: #5f6268;
  --inverse-canvas: #e8e9eb;
  --inverse-ink: #202124;
  --inverse-ink-muted: #5c6066;
  --success: #5cc07b;
  --success-tint: #1c3425;
  --success-on-inverse: #16803c;
  --warning: #e2ab45;
  --warning-tint: #3a301a;
  --warning-on-inverse: #8f6300;
  --danger: #f47a70;
  --danger-tint: var(--gradient-coral);
  --danger-hover: #f69289;
  --danger-on-inverse: #c5221f;
  --on-danger: #202124;
  --kind-bug: #f0995c;
  --kind-bug-tint: var(--gradient-orange);
  --kind-crash: var(--danger);
  --kind-crash-tint: var(--gradient-coral);
  --kind-feature: #ad9bf6;
  --kind-feature-tint: var(--gradient-violet);
  --kind-feedback: #e489c7;
  --kind-feedback-tint: var(--gradient-magenta);
  --gradient-magenta: #3a2238;
  --gradient-violet: #2b2648;
  --gradient-orange: #3c2b1d;
  --gradient-coral: #3e2329;
  --gradient-glow: #ffffff14;
  --gradient-violet-glow: #9d86f566;
  --gradient-magenta-glow: #e07ac466;
  --gradient-orange-glow: #f0995c59;
  --gradient-coral-glow: #f47a7059;
  --project-accent: #bb5631;
  --rail: #18191b;
  --rail-hover: #232427;
  --rail-current: #313236;
  --on-rail: #f5f5f3;
  --on-rail-muted: #9da1a7;
  --shadow-1: 0 0 0 1px #ffffff0f, 0 1px 2px #00000066;
  --shadow-2: 0 0 0 1px #ffffff14, 0 10px 30px #00000080;
  --shadow-3: 0 0 0 1px #ffffff1a, 0 24px 64px #0000009e;
  --shadow-drag: 0 0 0 1px #ffffff1f, 0 16px 40px #000000a6;
  --shadow-selected: 0 0 0 2px #7ba6f5;
  --focus-ring: 0 0 0 2px #202124, 0 0 0 4px #7ba6f5;
  --shadow-halo: 0 0 0 1px #7ba6f540;
}
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-hair: 1px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-xxl: 40px;
  --space-section: 96px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-xxl: 30px;
  --radius-pill: 100px;
  --radius-full: 9999px;
  --size-icon-sm: 12px;
  --size-icon: 16px;
  --size-icon-lg: 20px;
  --size-dot: 8px;
  --size-chip: 20px;
  --size-chip-lg: 24px;
  --size-control-sm: 28px;
  --size-control: 32px;
  --size-control-lg: 40px;
  --size-touch: 44px;
  --size-row-compact: 32px;
  --size-row: 36px;
  --size-row-2line: 52px;
  --size-topbar: 52px;
  --size-sidebar: 240px;
  --size-sidebar-rail: 56px;
  --size-bottom-nav: 56px;
  --size-aside: 320px;
  --size-frame-line: 2px;
  --size-focus: 2px;
  --size-content-max: 1200px;
  --size-reading-max: 680px;
  --size-avatar: 24px;
  --size-avatar-lg: 32px;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-shimmer: 1400ms;
  --duration-pulse: 2000ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-sheet: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-command: 60;
  --font-sans: "Inter Variable", Inter, system-ui, sans-serif;
  --font-inter: Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.app-display { font-family: var(--font-sans); font-size: 40px; line-height: 40px; font-weight: 500; letter-spacing: -2px; }
.app-title-lg { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.84px; }
.app-title { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.5px; }
.app-heading { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.24px; }
.app-body-lg { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: -0.15px; }
.app-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.14px; }
.app-body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.14px; }
.app-small { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.13px; }
.app-small-strong { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; }
.app-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; }
.app-micro { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0px; }
.app-button { font-family: var(--font-sans); font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: -0.14px; }
.app-button-sm { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -0.13px; }
.app-mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0px; }
.app-mono-sm { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0px; }
.display-xxl { font-family: var(--font-sans); font-size: 110px; line-height: 0.85; font-weight: 500; letter-spacing: -5.5px; }
.display-xl { font-family: var(--font-sans); font-size: 85px; line-height: 0.95; font-weight: 500; letter-spacing: -4.25px; }
.display-lg { font-family: var(--font-sans); font-size: 62px; line-height: 1.0; font-weight: 500; letter-spacing: -3.1px; }
.display-md { font-family: var(--font-sans); font-size: 32px; line-height: 1.13; font-weight: 500; letter-spacing: -1px; }
.headline { font-family: var(--font-inter); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.8px; }
.subhead { font-family: var(--font-sans); font-size: 24px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01px; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.3; font-weight: 400; letter-spacing: -0.18px; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 1.3; font-weight: 400; letter-spacing: -0.15px; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: -0.14px; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: -0.13px; }
.micro { font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 400; letter-spacing: -0.12px; }
.button { font-family: var(--font-sans); font-size: 14px; line-height: 1.0; font-weight: 500; letter-spacing: -0.14px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --primary: #f5f5f3;
  --primary-hover: #ffffff;
  --on-primary: #202124;
  --accent-blue: #7ba6f5;
  --link: var(--accent-blue);
  --focus: var(--accent-blue);
  --selection: #26324d;
  --selection-strong: #2f3d5e;
  --canvas: #202124;
  --surface-1: #28292c;
  --surface-2: #323337;
  --surface-3: #3c3d42;
  --surface-raised: #2c2d31;
  --surface-sunken: #1a1b1e;
  --nav-current: #3c3d42;
  --hover-on-raised: #36373b;
  --stage: #141517;
  --scrim: #000000a3;
  --hairline: #3f4146;
  --hairline-soft: #303236;
  --hairline-strong: #7b7f86;
  --ink: #e8e9eb;
  --ink-muted: #a6aab0;
  --ink-disabled: #5f6268;
  --inverse-canvas: #e8e9eb;
  --inverse-ink: #202124;
  --inverse-ink-muted: #5c6066;
  --success: #5cc07b;
  --success-tint: #1c3425;
  --success-on-inverse: #16803c;
  --warning: #e2ab45;
  --warning-tint: #3a301a;
  --warning-on-inverse: #8f6300;
  --danger: #f47a70;
  --danger-tint: var(--gradient-coral);
  --danger-hover: #f69289;
  --danger-on-inverse: #c5221f;
  --on-danger: #202124;
  --kind-bug: #f0995c;
  --kind-bug-tint: var(--gradient-orange);
  --kind-crash: var(--danger);
  --kind-crash-tint: var(--gradient-coral);
  --kind-feature: #ad9bf6;
  --kind-feature-tint: var(--gradient-violet);
  --kind-feedback: #e489c7;
  --kind-feedback-tint: var(--gradient-magenta);
  --gradient-magenta: #3a2238;
  --gradient-violet: #2b2648;
  --gradient-orange: #3c2b1d;
  --gradient-coral: #3e2329;
  --gradient-glow: #ffffff14;
  --gradient-violet-glow: #9d86f566;
  --gradient-magenta-glow: #e07ac466;
  --gradient-orange-glow: #f0995c59;
  --gradient-coral-glow: #f47a7059;
  --project-accent: #bb5631;
  --rail: #18191b;
  --rail-hover: #232427;
  --rail-current: #313236;
  --on-rail: #f5f5f3;
  --on-rail-muted: #9da1a7;
  --shadow-1: 0 0 0 1px #ffffff0f, 0 1px 2px #00000066;
  --shadow-2: 0 0 0 1px #ffffff14, 0 10px 30px #00000080;
  --shadow-3: 0 0 0 1px #ffffff1a, 0 24px 64px #0000009e;
  --shadow-drag: 0 0 0 1px #ffffff1f, 0 16px 40px #000000a6;
  --shadow-selected: 0 0 0 2px #7ba6f5;
  --focus-ring: 0 0 0 2px #202124, 0 0 0 4px #7ba6f5;
  --shadow-halo: 0 0 0 1px #7ba6f540;
  }
}

/* Tinderbox Works — components. Built on tokens.css (generated from tokens.json); every colour, space, radius, shadow and duration is a token. */
/* ==========================================================================
   Base
   ========================================================================== */
:root { --press-scale: 0.97; --font-features: "cv01", "cv05", "cv09", "cv11", "ss03"; color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; letter-spacing: -0.14px;
  font-feature-settings: var(--font-features); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; font-feature-settings: inherit; color: inherit; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-focus); }
.tbx-num { font-variant-numeric: tabular-nums; }
.tbx-mono { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0; font-feature-settings: normal; }
.tbx-muted { color: var(--ink-muted); }
.tbx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tbx-row { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.tbx-stack { display: flex; flex-direction: column; gap: var(--space-8); }
.tbx-spacer { flex: 1; }
.tbx-divider { height: 1px; background: var(--hairline-soft); border: 0; margin: 0; }
.tbx-caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; color: var(--ink-muted); }
.tbx-h { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.24px; }
.tbx-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.5px; }
.tbx-title-lg { margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.84px; }
.tbx-reading { font-size: 15px; line-height: 22px; letter-spacing: -0.15px; max-width: var(--size-reading-max); }
.tbx-kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-xs);
  background: var(--surface-raised); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0;
}
.tbx-spinner {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tbx-spin 700ms linear infinite;
}
@keyframes tbx-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Buttons: pills only. Press is a scale, never a darker fill.
   ========================================================================== */
.tbx-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--size-control); padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: -0.14px; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.tbx-btn:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { transform: scale(var(--press-scale)); }
.tbx-btn--primary { background: var(--primary); color: var(--on-primary); }
.tbx-btn--primary:hover { background: var(--primary-hover); }
.tbx-btn--secondary { background: var(--surface-1); color: var(--ink); }
.tbx-btn--secondary:hover { background: var(--surface-2); }
.tbx-btn--secondary:active { background: var(--surface-3); }
.tbx-btn--secondary.tbx-btn--on-surface { background: var(--surface-2); }
.tbx-btn--secondary.tbx-btn--on-surface:hover { background: var(--surface-3); }
.tbx-btn--quiet { background: transparent; color: var(--ink); }
.tbx-btn--quiet:hover { background: var(--surface-1); }
.tbx-btn--quiet:active { background: var(--surface-2); }
.tbx-btn--danger { background: var(--danger); color: var(--on-danger); }
.tbx-btn--danger:hover { background: var(--danger-hover); }
.tbx-btn--sm { height: var(--size-control-sm); padding: 0 12px; gap: 4px; font-size: 13px; letter-spacing: -0.13px; }
.tbx-btn--lg { height: var(--size-control-lg); padding: 0 18px; }
.tbx-btn--xl { height: 48px; padding: 0 22px; font-size: 15px; }
.tbx-btn--block { width: 100%; }
.tbx-btn--icon-left { padding-left: 10px; }
.tbx-btn--sm.tbx-btn--icon-left { padding-left: 8px; }
.tbx-btn:disabled, .tbx-btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-disabled); cursor: not-allowed; }
.tbx-btn--quiet:disabled, .tbx-btn--quiet[aria-disabled="true"] { background: transparent; }
.tbx-btn[aria-busy="true"] { cursor: progress; }
.tbx-btn--primary[aria-busy="true"] { background: var(--primary); color: var(--on-primary); }

/* Icon buttons: circles */
.tbx-iconbtn {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size-control); height: var(--size-control);
  padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.tbx-iconbtn:hover { background: var(--surface-1); color: var(--ink); }
.tbx-iconbtn:active:not(:disabled) { background: var(--surface-2); transform: scale(var(--press-scale)); }
.tbx-iconbtn[aria-pressed="true"], .tbx-iconbtn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.tbx-iconbtn:disabled { color: var(--ink-disabled); background: transparent; cursor: not-allowed; }
.tbx-iconbtn--sm { width: var(--size-control-sm); height: var(--size-control-sm); }
.tbx-iconbtn--xs { width: 20px; height: 20px; }
.tbx-iconbtn--xs .tbx-i { width: 12px; height: 12px; }
.tbx-iconbtn--lg { width: var(--size-control-lg); height: var(--size-control-lg); }
.tbx-iconbtn--filled { background: var(--surface-1); color: var(--ink); }
.tbx-iconbtn--filled:hover { background: var(--surface-2); }
.tbx-iconbtn--on-surface:hover { background: var(--surface-2); }
.tbx-iconbtn--on-raised:hover { background: var(--hover-on-raised); }
.tbx-iconbtn--stage { background: var(--scrim); color: var(--on-stage); }
.tbx-iconbtn--stage:hover { background: var(--stage); color: var(--on-stage); }
.tbx-iconbtn--stage:focus-visible { outline-color: var(--focus-on-stage); }

/* Touch: every control gets a 44px hit area without growing visually */
@media (pointer: coarse) {
  .tbx-btn::before, .tbx-iconbtn::before, .tbx-chip--button::before, .tbx-check-hit::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--size-touch)); height: max(100%, var(--size-touch)); transform: translate(-50%, -50%);
  }
}

/* Segmented control: the current segment is a lift, never blue */
.tbx-seg { display: inline-flex; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-1); }
.tbx-seg--on-surface { background: var(--surface-2); }
.tbx-seg__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.tbx-seg__btn:hover { color: var(--ink); }
.tbx-seg__btn[aria-pressed="true"], .tbx-seg__btn[aria-selected="true"] { background: var(--nav-current); color: var(--ink); box-shadow: var(--shadow-1); }
.tbx-seg__btn:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.tbx-seg__btn--icon { width: 28px; padding: 0; justify-content: center; }

/* Tabs: 2px ink underline marks the current tab (DESIGN.md's sub-nav marker) */
.tbx-tabs { display: flex; align-items: stretch; gap: 20px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.tbx-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px; border: 0; background: none;
  color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; white-space: nowrap; cursor: pointer;
}
.tbx-tab:hover { color: var(--ink); }
.tbx-tab[aria-selected="true"] { color: var(--ink); }
.tbx-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.tbx-tab:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.tbx-tab:focus-visible { outline-offset: -2px; border-radius: 6px; }
.tbx-tab__meta { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Forms
   ========================================================================== */
.tbx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbx-label { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; color: var(--ink); }
.tbx-label__opt { color: var(--ink-muted); font-weight: 400; }
.tbx-input, .tbx-select, .tbx-textarea {
  appearance: none; width: 100%; height: var(--size-control); padding: 0 12px; margin: 0;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink);
  font-size: 14px; line-height: 20px; letter-spacing: -0.14px;
  transition: border-color var(--duration-instant) var(--ease-standard), box-shadow var(--duration-instant) var(--ease-standard);
}
.tbx-input::placeholder, .tbx-textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.tbx-input:hover, .tbx-select:hover, .tbx-textarea:hover { border-color: var(--ink-muted); }
.tbx-input:focus, .tbx-select:focus, .tbx-textarea:focus, .tbx-input:focus-visible, .tbx-select:focus-visible, .tbx-textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.tbx-input:disabled, .tbx-select:disabled, .tbx-textarea:disabled { border-color: var(--hairline); color: var(--ink-disabled); cursor: not-allowed; }
.tbx-input[readonly] { background: var(--surface-sunken); border-color: var(--hairline); }
.tbx-input[aria-invalid="true"], .tbx-select[aria-invalid="true"], .tbx-textarea[aria-invalid="true"] { border-color: var(--danger); }
.tbx-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--danger); }
.tbx-input--warning { border-color: var(--warning); }
.tbx-input--lg { height: var(--size-control-lg); }
.tbx-input--mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }
.tbx-textarea { height: auto; min-height: 88px; padding: 8px 12px; resize: vertical; }
.tbx-select { padding-right: 32px; cursor: pointer; }
.tbx-control { position: relative; display: flex; align-items: center; }
.tbx-control > .tbx-i { position: absolute; left: 10px; color: var(--ink-muted); pointer-events: none; }
.tbx-control > .tbx-i + .tbx-input { padding-left: 32px; }
.tbx-control > .tbx-i--chevron-down:last-child { left: auto; right: 10px; }
.tbx-control > .tbx-kbd { position: absolute; right: 8px; }
.tbx-control > .tbx-iconbtn { position: absolute; right: 2px; }
.tbx-help { display: flex; align-items: flex-start; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; color: var(--ink-muted); }
.tbx-help .tbx-i { margin-top: 2px; }
.tbx-help--error { color: var(--danger); }
.tbx-help--warning { color: var(--ink); }
.tbx-help--warning .tbx-i { color: var(--warning); }
.tbx-help--success .tbx-i { color: var(--success); }
.tbx-search { border-radius: var(--radius-pill); }

/* Menu (select popover, row actions) */
.tbx-menu { min-width: 200px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-2); }
.tbx-menu__label { padding: 8px 8px 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.tbx-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--size-control); padding: 0 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font-size: 14px; line-height: 20px; text-align: left; cursor: pointer;
}
a.tbx-menu__item { text-decoration: none; }
.tbx-menu__item:hover, .tbx-menu__item[data-active="true"] { background: var(--hover-on-raised); }
.tbx-menu__item .tbx-i { color: var(--ink-muted); }
.tbx-menu__item[aria-selected="true"] .tbx-menu__check { visibility: visible; }
.tbx-menu__check { visibility: hidden; margin-left: auto; color: var(--ink) !important; }
.tbx-menu__item[aria-disabled="true"] { color: var(--ink-disabled); cursor: not-allowed; }
.tbx-menu__item--danger { color: var(--danger); }
.tbx-menu__item--danger .tbx-i { color: var(--danger); }
.tbx-menu__sep { height: 1px; margin: 4px 0; background: var(--hairline-soft); }

/* Filter bar */
.tbx-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); min-height: 44px; }
.tbx-filterbar .tbx-control { width: 240px; }
.tbx-filterchip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: var(--size-control-sm); padding: 0 4px 0 10px;
  border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; white-space: nowrap;
}
.tbx-filterchip__field { color: var(--ink-muted); font-weight: 400; }
.tbx-filterchip .tbx-iconbtn { width: 20px; height: 20px; }
.tbx-filterchip .tbx-iconbtn .tbx-i { width: 12px; height: 12px; }
.tbx-filterchip .tbx-iconbtn:hover { background: var(--surface-2); }

/* Tag input: user tags are 6px, system chips are pills */
.tbx-taginput {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: var(--size-control); padding: 4px 6px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-1); cursor: text;
}
.tbx-taginput:hover { border-color: var(--ink-muted); }
.tbx-taginput:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.tbx-taginput input { flex: 1; min-width: 96px; height: 22px; padding: 0 4px; border: 0; background: transparent; outline: none; font-size: 14px; }
.tbx-taginput input::placeholder { color: var(--ink-muted); }
.tbx-tag {
  display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 2px 0 8px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; white-space: nowrap;
}
.tbx-tag--static { padding-right: 8px; }
.tbx-tag button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.tbx-tag button:hover { background: var(--surface-3); color: var(--ink); }

/* Toggle: off = outlined track and small muted knob; on = graphite track */
.tbx-toggle {
  position: relative; flex: none; width: 34px; height: 20px; padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.tbx-toggle::after {
  content: ""; position: absolute; top: 50%; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-muted);
  transform: translateY(-50%); transition: left var(--duration-fast) var(--ease-standard), width var(--duration-fast) var(--ease-standard), height var(--duration-fast) var(--ease-standard);
}
.tbx-toggle:hover { border-color: var(--ink-muted); }
.tbx-toggle[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.tbx-toggle[aria-checked="true"]::after { left: 16px; width: 14px; height: 14px; background: var(--on-primary); }
.tbx-toggle:disabled { background: var(--surface-1); border-color: var(--hairline); cursor: not-allowed; }
.tbx-toggle:disabled::after { background: var(--ink-disabled); }
.tbx-toggle[aria-checked="true"]:disabled { background: var(--surface-3); border-color: var(--surface-3); }
.tbx-toggle[aria-busy="true"]::after { animation: tbx-pulse-knob 900ms var(--ease-standard) infinite alternate; }
@keyframes tbx-pulse-knob { to { opacity: .35; } }

/* Checkbox */
.tbx-check {
  appearance: none; position: relative; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 2px 0 0;
  border: 1.5px solid var(--hairline-strong); border-radius: var(--radius-xs); background: var(--canvas); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.tbx-check:hover { border-color: var(--ink-muted); }
.tbx-check:checked, .tbx-check:indeterminate { background: var(--primary); border-color: var(--primary); }
.tbx-check:checked::after, .tbx-check:indeterminate::after {
  content: ""; width: 12px; height: 12px; background: var(--on-primary);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.tbx-check:checked::after { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5l-5-5'/%3E%3C/svg%3E"); }
.tbx-check:indeterminate::after { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.tbx-check:disabled { background: var(--surface-1); border-color: var(--hairline); cursor: not-allowed; }
.tbx-check:disabled:checked { background: var(--surface-3); border-color: var(--surface-3); }
.tbx-check[aria-invalid="true"] { border-color: var(--danger); }
.tbx-checkrow { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; cursor: pointer; }
.tbx-checkrow small { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }

/* ==========================================================================
   Chips, dots, counts, marks: colour lives here, small
   ========================================================================== */
.tbx-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: var(--size-chip); padding: 0 8px 0 6px; border: 0;
  border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; white-space: nowrap; vertical-align: middle;
  --glyph: var(--ink-muted);
}
.tbx-chip > .tbx-i { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--glyph); vertical-align: 0; }
.tbx-chip--text { padding: 0 8px; }
.tbx-chip--lg { height: var(--size-chip-lg); padding: 0 10px 0 8px; font-size: 13px; line-height: 18px; letter-spacing: -0.13px; }
.tbx-chip--on-surface { background: var(--surface-2); }
.tbx-chip--bug { background: var(--kind-bug-tint); --glyph: var(--kind-bug); }
.tbx-chip--crash { background: var(--kind-crash-tint); --glyph: var(--kind-crash); }
.tbx-chip--feature { background: var(--kind-feature-tint); --glyph: var(--kind-feature); }
.tbx-chip--feedback { background: var(--kind-feedback-tint); --glyph: var(--kind-feedback); }
.tbx-chip--success { background: var(--success-tint); --glyph: var(--success); }
.tbx-chip--warning { background: var(--warning-tint); --glyph: var(--warning); }
.tbx-chip--danger { background: var(--danger-tint); --glyph: var(--danger); }
.tbx-chip--ink { --glyph: var(--ink); }
.tbx-chip--urgent { background: var(--danger-tint); --glyph: var(--danger); }
.tbx-chip--selected { background: var(--selection); --glyph: var(--accent-blue); }
.tbx-chip--button { cursor: pointer; }
.tbx-chip--button:hover { background: var(--surface-2); }
.tbx-chip--running > .tbx-i { animation: tbx-spin 1600ms linear infinite; }

/* Network and platform monogram: neutral, always followed by the name */
.tbx-mark {
  display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: var(--radius-xs);
  background: var(--ink); color: var(--canvas); font-size: 8px; line-height: 1; font-weight: 700; letter-spacing: -0.1px; font-feature-settings: normal;
}
.tbx-chip > .tbx-mark { width: 14px; height: 14px; margin-left: -2px; font-size: 7.5px; }
.tbx-mark--lg { width: 20px; height: 20px; font-size: 9.5px; border-radius: 5px; }

/* Status dot and label */
.tbx-dot { position: relative; display: inline-block; flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-full); background: var(--ink-muted); }
.tbx-dot--success { background: var(--success); }
.tbx-dot--warning { background: var(--warning); }
.tbx-dot--danger { background: var(--danger); }
.tbx-dot--ink { background: var(--ink); }
.tbx-dot--accent { background: var(--project-accent); }
.tbx-dot--hollow { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.tbx-dot--hollow.tbx-dot--success { box-shadow: inset 0 0 0 1.5px var(--success); }
.tbx-dot--pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: tbx-heartbeat var(--duration-pulse) var(--ease-standard) infinite; }
@keyframes tbx-heartbeat { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.tbx-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; color: var(--ink); white-space: nowrap; }
.tbx-status__meta { color: var(--ink-muted); }

/* Count badge */
.tbx-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.tbx-count--warning { background: var(--warning-tint); }

/* Cost label */
.tbx-cost { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbx-cost > .tbx-i { width: var(--size-icon-sm); height: var(--size-icon-sm); vertical-align: 0; }
.tbx-cost--chip { height: var(--size-chip); padding: 0 8px 0 6px; border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink); }
.tbx-cost--chip > .tbx-i { color: var(--ink-muted); }
.tbx-cost--over > .tbx-i { color: var(--warning); }

/* Project chip and tile: the only in-app homes of project-accent */
.tbx-ptile {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--project-accent); color: var(--on-project-accent); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0;
}
.tbx-ptile img { width: 100%; height: 100%; object-fit: cover; }
.tbx-ptile--lg { width: 40px; height: 40px; border-radius: var(--radius-md); font-size: 15px; }
.tbx-pchip {
  display: inline-flex; align-items: center; gap: 6px; height: var(--size-chip); padding: 0 8px 0 7px; border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; white-space: nowrap;
}
.tbx-pchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--project-accent); }
.tbx-frame { height: var(--size-frame-line); background: var(--project-accent); flex: none; }

/* ==========================================================================
   Shell: frame line, sidebar, top bar, command palette, bottom nav
   ========================================================================== */
.tbx-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--size-frame-line) minmax(0, 1fr); min-height: 100%; background: var(--canvas); }
.tbx-shell > .tbx-frame { grid-column: 1 / -1; }
.tbx-main { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); }

/* Side nav: one graphite left column, expanded (248px, loops with their pages) or compact (64px, icons + flyout) */
.tbx-shell { grid-template-columns: auto minmax(0, 1fr); }
.tbx-nav { display: flex; flex-direction: column; gap: 2px; width: 248px; padding: 10px 10px 12px; background: var(--rail); color: var(--on-rail-muted); min-height: 0; overflow-y: auto; transition: width var(--duration-slow) var(--ease-standard); }
.tbx-nav__head { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px; margin-bottom: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--on-rail); text-align: left; cursor: pointer; }
.tbx-nav__head:hover { background: var(--rail-hover); }
.tbx-nav__head .tbx-ptile { width: 32px; height: 32px; border-radius: var(--radius-md); font-size: 12px; box-shadow: 0 0 0 1px var(--on-rail-muted); }
.tbx-nav__project { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tbx-nav__project b { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbx-nav__project span { color: var(--on-rail-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-nav__head > .tbx-i { color: var(--on-rail-muted); }
.tbx-nav__item {
  position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px 0 10px; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--on-rail-muted); text-decoration: none; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; white-space: nowrap; cursor: pointer; text-align: left; width: 100%;
  transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard);
}
.tbx-nav__item .tbx-i { flex: none; }
.tbx-nav__item:hover { background: var(--rail-hover); color: var(--on-rail); text-decoration: none; }
.tbx-nav__item[aria-current="page"] { background: var(--rail-current); color: var(--on-rail); }
.tbx-nav__item--loop[aria-expanded="true"] { color: var(--on-rail); }
.tbx-nav__item .tbx-nav__chev { margin-left: auto; width: 12px; height: 12px; transition: transform var(--duration-fast) var(--ease-standard); }
.tbx-nav__item--loop[aria-expanded="true"] .tbx-nav__chev { transform: rotate(180deg); }
.tbx-nav__pages { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px 18px; padding-left: 11px; border-left: 1px solid var(--rail-current); }
.tbx-nav__pages .tbx-nav__item { height: 30px; padding-left: 10px; }
.tbx-nav__count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--rail-current); color: var(--on-rail); font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.tbx-nav__count--attention { background: var(--rail-attention); color: var(--rail); }
.tbx-nav__item .tbx-nav__chev + .tbx-nav__count, .tbx-nav__count + .tbx-nav__chev { margin-left: 6px; }
.tbx-nav__sep { height: 1px; margin: 8px 6px; background: var(--rail-current); }
.tbx-nav__foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.tbx-nav__user { display: flex; align-items: center; gap: 10px; padding: 8px 4px 0 6px; color: var(--on-rail); font-size: 13px; font-weight: 500; }
.tbx-nav__user .tbx-avatar { width: 28px; height: 28px; background: var(--rail-current); color: var(--on-rail); font-size: 10px; }
.tbx-nav__user .tbx-iconbtn { margin-left: auto; color: var(--on-rail-muted); width: 28px; height: 28px; }
.tbx-nav__user .tbx-iconbtn:hover { background: var(--rail-hover); color: var(--on-rail); }
.tbx-nav :focus-visible { outline-color: var(--focus-on-stage); outline-offset: -2px; }
/* compact: 64px, icons only; labels become tooltips, a loop's pages open in a flyout */
.tbx-nav--compact { width: 64px; padding: 10px 8px 12px; align-items: center; overflow: visible; position: relative; z-index: 2; }
.tbx-nav--compact .tbx-nav__head { width: 44px; justify-content: center; padding: 0; }
.tbx-nav--compact .tbx-nav__project, .tbx-nav--compact .tbx-nav__head > .tbx-i, .tbx-nav--compact .tbx-nav__label, .tbx-nav--compact .tbx-nav__chev, .tbx-nav--compact .tbx-nav__pages { display: none; }
.tbx-nav--compact .tbx-nav__item { width: 44px; height: 40px; justify-content: center; padding: 0; }
.tbx-nav--compact .tbx-nav__item .tbx-i { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.tbx-nav--compact .tbx-nav__count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.tbx-nav--compact .tbx-nav__sep { width: 28px; }
.tbx-nav--compact .tbx-nav__user { flex-direction: column; padding: 8px 0 0; gap: 8px; }
.tbx-nav--compact .tbx-nav__user .tbx-iconbtn { margin: 0; }
.tbx-nav--compact .tbx-nav__user > span:not(.tbx-avatar) { display: none; }
.tbx-nav__flyout { position: absolute; left: 70px; top: 0; z-index: var(--z-dropdown); min-width: 200px; padding: 4px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-2); }
.tbx-nav__flyout .tbx-menu__label { padding-top: 6px; }
.tbx-nav__hold { position: relative; }

/* Page bar: loop and page on the left, search and actions on the right */
.tbx-loopbar { flex: none; padding: 0 24px; background: var(--canvas); border-bottom: 1px solid var(--hairline-soft); }
.tbx-loopbar__top { display: flex; align-items: center; gap: 10px; height: 56px; }
.tbx-loopbar__crumb { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; }
.tbx-loopbar__slash { color: var(--hairline-strong); font-size: 18px; font-weight: 300; }
.tbx-loopbar__loop { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); }
.tbx-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; color: var(--ink-muted); }
.tbx-crumbs a { color: inherit; text-decoration: none; }
.tbx-crumbs a:hover { color: var(--ink); }
.tbx-crumbs [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-crumbs .tbx-i { width: 12px; height: 12px; color: var(--ink-disabled); }
.tbx-cmdk {
  display: inline-flex; align-items: center; gap: 8px; width: 260px; height: var(--size-control); padding: 0 6px 0 12px; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--ink-muted); font-size: 13px; line-height: 18px; cursor: pointer; text-align: left;
}
.tbx-cmdk:hover { background: var(--surface-2); }
.tbx-cmdk span { flex: 1; }

.tbx-cmd { width: min(640px, 100%); overflow: hidden; border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-3); }
.tbx-cmd__input { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--hairline-soft); }
.tbx-cmd__input input { flex: 1; height: 100%; border: 0; outline: none; background: transparent; font-size: 16px; line-height: 22px; letter-spacing: -0.16px; }
.tbx-cmd__input input::placeholder { color: var(--ink-muted); }
.tbx-cmd__input > .tbx-i { color: var(--ink-muted); }
.tbx-cmd__list { max-height: 380px; overflow-y: auto; padding: 6px; }
.tbx-cmd__group { padding: 8px 10px 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.tbx-cmd__item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--radius-md); color: var(--ink); font-size: 14px; line-height: 20px; cursor: pointer; }
.tbx-cmd__item > .tbx-i { color: var(--ink-muted); }
.tbx-cmd__item:hover { background: var(--hover-on-raised); }
.tbx-cmd__item[aria-selected="true"] { background: var(--selection); }
.tbx-cmd__item .tbx-cmd__hint { margin-left: auto; display: flex; gap: 4px; color: var(--ink-muted); font-size: 12px; }
.tbx-cmd__foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--hairline-soft); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-cmd__foot span { display: inline-flex; gap: 4px; align-items: center; }

.tbx-bottomnav { display: flex; height: calc(var(--size-bottom-nav) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--canvas); border-top: 1px solid var(--hairline-soft); flex: none; }
.tbx-bottomnav a {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--size-touch);
  color: var(--ink-muted); text-decoration: none; font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0;
}
.tbx-bottomnav a[aria-current="page"] { color: var(--ink); }
.tbx-bottomnav .tbx-i { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.tbx-bottomnav .tbx-count { position: absolute; top: 5px; left: calc(50% + 6px); }
.tbx-bottomnav a:focus-visible { outline-offset: -4px; border-radius: 12px; }

/* Page scaffolding */
.tbx-page { width: 100%; max-width: var(--size-content-max); padding: var(--space-24); margin: 0 auto; }
.tbx-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.tbx-section { display: flex; flex-direction: column; gap: 12px; }
.tbx-section__head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.tbx-section__head .tbx-h { flex: 1; }
.tbx-card-box { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }

/* ==========================================================================
   Data: table, kanban, list rows
   ========================================================================== */
.tbx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 18px; letter-spacing: -0.13px; }
.tbx-table th {
  position: sticky; top: 0; z-index: var(--z-sticky); height: 32px; padding: 0 12px; text-align: left; white-space: nowrap;
  background: var(--canvas); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; border-bottom: 1px solid var(--hairline);
}
.tbx-table th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tbx-table th button:hover { color: var(--ink); }
.tbx-table th[aria-sort] { color: var(--ink); }
.tbx-table td { height: var(--size-row); padding: 0 12px; white-space: nowrap; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); vertical-align: middle; background: var(--canvas); }
.tbx-table tbody tr { cursor: pointer; }
.tbx-table tbody tr:hover td { background: var(--surface-1); }
.tbx-table tbody tr[aria-selected="true"] td { background: var(--selection); }
.tbx-table tbody tr[aria-selected="true"]:hover td { background: var(--selection-strong); }
.tbx-table tbody tr:focus-visible { outline: none; }
.tbx-table tbody tr:focus-visible td { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.tbx-table tbody tr:focus-visible td:first-child { box-shadow: inset 2px 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.tbx-table tbody tr:focus-visible td:last-child { box-shadow: inset -2px 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.tbx-table--compact td { height: var(--size-row-compact); }
.tbx-table .tbx-table__check { width: 36px; padding-right: 0; }
.tbx-table .tbx-table__title { font-weight: 500; max-width: 0; width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-table .tbx-table__muted { color: var(--ink-muted); }
.tbx-table td.tbx-num, .tbx-table th.tbx-num { text-align: right; }
.tbx-table__dup { color: var(--ink-muted); font-size: 12px; }

.tbx-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.tbx-col { flex: 0 0 272px; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: var(--radius-lg); background: var(--surface-1); }
.tbx-col__head { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 4px 0 6px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; }
.tbx-col__head .tbx-i { color: var(--ink-muted); }
.tbx-col__head .tbx-iconbtn { margin-left: auto; }
.tbx-kcard {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--ink); cursor: grab;
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.tbx-kcard:hover { box-shadow: var(--shadow-2); }
.tbx-kcard[aria-selected="true"] { box-shadow: var(--shadow-1), var(--shadow-selected); }
.tbx-kcard--dragging { box-shadow: var(--shadow-drag); transform: rotate(1.5deg) scale(1.02); cursor: grabbing; }
.tbx-kcard__thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--stage); }
.tbx-kcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbx-kcard__title { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbx-kcard__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-kcard__meta .tbx-i { width: 12px; height: 12px; }
.tbx-kcard__id { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; }
.tbx-dropslot { height: 52px; border-radius: var(--radius-md); background: var(--selection-strong); outline: 2px dashed var(--accent-blue); outline-offset: -2px; }

.tbx-list { display: flex; flex-direction: column; }
.tbx-listrow {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--hairline-soft);
  color: var(--ink); text-decoration: none; background: var(--canvas); cursor: pointer;
}
.tbx-listrow:hover { background: var(--surface-1); text-decoration: none; }
.tbx-listrow[aria-selected="true"] { background: var(--selection); }
.tbx-listrow:focus-visible { outline-offset: -2px; }
.tbx-listrow--2line { min-height: var(--size-row-2line); }
.tbx-listrow__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tbx-listrow__title { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-listrow__meta { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-listrow__end { display: flex; align-items: center; gap: 8px; flex: none; color: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tbx-listrow--unread .tbx-listrow__title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--ink); }
.tbx-listrow__thumb { width: 56px; height: 36px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--stage); }
.tbx-listrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Reports and item detail
   ========================================================================== */
.tbx-report { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: box-shadow var(--duration-fast) var(--ease-standard); }
.tbx-report:hover { box-shadow: var(--shadow-2); text-decoration: none; }
.tbx-report[aria-selected="true"] { box-shadow: var(--shadow-1), var(--shadow-selected); }
.tbx-report__media { aspect-ratio: 16 / 9; background: var(--stage); overflow: hidden; }
.tbx-report__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbx-report__body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.tbx-report__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbx-report__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-report--unread .tbx-report__title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--ink); }

.tbx-detail { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-aside); gap: 32px; align-items: start; }
.tbx-detail__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tbx-detail__aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 16px; }
.tbx-detail__head { display: flex; flex-direction: column; gap: 10px; }
.tbx-props { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 0; }
.tbx-props dt { padding: 8px 0; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; }
.tbx-props dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 32px; margin: 0; padding: 4px 0; font-size: 13px; line-height: 18px; letter-spacing: -0.13px; min-width: 0; }
.tbx-aside-box { padding: 4px 16px 8px; border-radius: var(--radius-lg); background: var(--surface-1); }
.tbx-aside-box .tbx-props dd .tbx-chip { background: var(--surface-2); }
.tbx-aside-box .tbx-props dd .tbx-chip--bug { background: var(--kind-bug-tint); }
.tbx-aside-box .tbx-props dd .tbx-chip--warning { background: var(--warning-tint); }
.tbx-aside-box .tbx-props dd .tbx-chip--success { background: var(--success-tint); }
.tbx-aside-box .tbx-props dd .tbx-chip--danger, .tbx-aside-box .tbx-props dd .tbx-chip--urgent { background: var(--danger-tint); }

/* Screenshot viewer: the stage is the same near-black in both themes */
.tbx-viewer { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "canvas canvas" "bar meta"; overflow: hidden; border-radius: var(--radius-lg); background: var(--stage); color: var(--on-stage); }
.tbx-viewer__canvas { grid-area: canvas; position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in; touch-action: none; }
.tbx-viewer[data-zoomed="true"] .tbx-viewer__canvas { cursor: grab; }
.tbx-viewer__canvas img { display: block; max-width: 100%; max-height: 100%; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--zoom, 1)); transition: transform var(--duration-base) var(--ease-standard); user-select: none; -webkit-user-drag: none; }
.tbx-viewer__bar { grid-area: bar; display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
.tbx-viewer__bar .tbx-iconbtn { color: var(--on-stage); width: 28px; height: 28px; }
.tbx-viewer__bar .tbx-iconbtn:hover { background: var(--stage); color: var(--on-stage); }
.tbx-viewer__bar .tbx-iconbtn:focus-visible, .tbx-viewer :focus-visible { outline-color: var(--focus-on-stage); }
.tbx-viewer__zoom { min-width: 44px; text-align: center; color: var(--on-stage); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-viewer__meta { grid-area: meta; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; color: var(--on-stage-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-viewer__state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--on-stage-muted); font-size: 13px; text-align: center; }
.tbx-viewer__state .tbx-i--st-failed { color: var(--danger); width: 20px; height: 20px; }

/* Known context fields */
.tbx-ctx { display: flex; flex-wrap: wrap; gap: 1px; overflow: hidden; border-radius: var(--radius-lg); background: var(--hairline-soft); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.tbx-ctx__cell { flex: 1 1 var(--ctx-min, 200px); display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--canvas); }
.tbx-ctx__label { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; }
.tbx-ctx__label .tbx-i { width: 12px; height: 12px; }
.tbx-ctx__value { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; line-height: 18px; letter-spacing: -0.13px; min-width: 0; }
.tbx-ctx__value .tbx-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-ctx__cell--wide { flex-basis: 100%; }
.tbx-crew { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.tbx-crew th { height: 28px; padding: 0 8px 0 0; text-align: left; color: var(--ink-muted); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--hairline-soft); }
.tbx-crew td { height: 32px; padding: 0 8px 0 0; border-bottom: 1px solid var(--hairline-soft); }
.tbx-crew tr:last-child td { border-bottom: 0; }
.tbx-meter { display: inline-block; width: 48px; height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.tbx-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.tbx-meter--warning > span { background: var(--warning); }
.tbx-meter--danger > span { background: var(--danger); }

/* JSON tree: native details for keyboard support */
.tbx-json { padding: 8px 0; overflow: auto; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 22px; letter-spacing: 0; font-feature-settings: normal; }
.tbx-json details, .tbx-json__leaf { padding-left: 16px; }
.tbx-json > details, .tbx-json > .tbx-json__leaf { padding-left: 8px; }
.tbx-json summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; border-radius: 4px; padding-right: 12px; }
.tbx-json summary::-webkit-details-marker { display: none; }
.tbx-json summary::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--ink-muted); transition: transform var(--duration-fast) var(--ease-standard);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.tbx-json details[open] > summary::before { transform: rotate(90deg); }
.tbx-json summary:hover, .tbx-json__leaf:hover { background: var(--surface-2); }
.tbx-json summary:focus-visible { outline-offset: -2px; }
.tbx-json__leaf { display: flex; gap: 4px; padding-right: 12px; margin-left: 16px; border-radius: 4px; }
.tbx-json__k { color: var(--ink-muted); }
.tbx-json__s { color: var(--ink); }
.tbx-json__s::before, .tbx-json__s::after { content: '"'; color: var(--ink-muted); }
.tbx-json__n { color: var(--ink); font-variant-numeric: tabular-nums; }
.tbx-json__b { color: var(--ink-muted); font-style: italic; }
.tbx-json__sum { color: var(--ink-muted); }
.tbx-json details[open] > summary .tbx-json__sum { display: none; }

/* Log block: level words stay ink; colour goes to the glyph and the error row tint */
.tbx-log { max-height: 300px; overflow: auto; padding: 6px 0; border-radius: var(--radius-md); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 0; font-feature-settings: normal; }
.tbx-log__line { display: grid; grid-template-columns: 28px 64px 60px minmax(0, 1fr); column-gap: 10px; padding: 0 12px 0 8px; white-space: pre; }
.tbx-log--wrap .tbx-log__line { white-space: pre-wrap; }
.tbx-log__n { color: var(--ink-muted); text-align: right; user-select: none; }
.tbx-log__t { color: var(--ink-muted); }
.tbx-log__lvl { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); }
.tbx-log__lvl .tbx-i { width: 12px; height: 12px; }
.tbx-log__line--warn .tbx-log__lvl { color: var(--ink); }
.tbx-log__line--warn .tbx-log__lvl .tbx-i { color: var(--warning); }
.tbx-log__line--error { background: var(--danger-tint); }
.tbx-log__line--error .tbx-log__lvl { color: var(--ink); }
.tbx-log__line--error .tbx-log__lvl .tbx-i { color: var(--danger); }
.tbx-log__more { display: block; width: 100%; padding: 6px 12px 2px 46px; border: 0; background: none; color: var(--link); font: 500 12px/16px var(--font-sans); text-align: left; cursor: pointer; }

/* Code snippet and copy/key fields */
.tbx-code { overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); }
.tbx-code__head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 0 12px; }
.tbx-code__head .tbx-tabs { border-bottom: 0; gap: 16px; flex: 1; }
.tbx-code__head .tbx-tab { height: 30px; }
.tbx-code pre { margin: 0; padding: 10px 14px 14px; overflow: auto; color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 19px; letter-spacing: 0; font-feature-settings: normal; tab-size: 4; }
.tbx-code .k { font-weight: 500; }
.tbx-code .c { color: var(--ink-muted); }
.tbx-keyfield { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 3px 0 12px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.tbx-keyfield__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0; color: var(--ink); }
.tbx-keyfield__value[data-masked="true"] { color: var(--ink-muted); }
.tbx-keyfield .tbx-iconbtn:hover { background: var(--surface-2); }
.tbx-keyfield--new { border-color: var(--warning); }
.tbx-keyfield .tbx-chip { flex: none; }
.tbx-copied { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 500; }
.tbx-copied .tbx-i { color: var(--success); width: 12px; height: 12px; }

/* ==========================================================================
   Media and demos
   ========================================================================== */
.tbx-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--stage); color: var(--on-stage); }
.tbx-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbx-media--contain > img { object-fit: contain; }
.tbx-media--natural { aspect-ratio: auto; }
.tbx-media--natural > img { height: auto; }
.tbx-media__badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--scrim); color: var(--on-stage); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-media__controls { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.tbx-media__center { position: absolute; inset: 0; display: grid; place-items: center; }
.tbx-media__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--scrim); }
.tbx-media__progress > span { display: block; height: 100%; width: var(--p, 0%); background: var(--on-stage); }
.tbx-media--playing .tbx-media__progress > span { animation: tbx-progress 6s linear infinite; }
@keyframes tbx-progress { from { width: 0%; } to { width: 100%; } }
.tbx-media__state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; color: var(--on-stage-muted); font-size: 13px; line-height: 18px; text-align: center; }
.tbx-media__state .tbx-i--st-failed { color: var(--danger); width: 20px; height: 20px; }
.tbx-media:focus-within { outline: var(--size-focus) solid var(--focus); outline-offset: var(--size-focus); }
.tbx-media .tbx-iconbtn--stage:focus-visible { outline-offset: 1px; }

.tbx-demo { display: flex; flex-direction: column; gap: 10px; }
.tbx-demo__caption { margin: 0; font-size: 15px; line-height: 22px; letter-spacing: -0.15px; color: var(--ink); max-width: var(--size-reading-max); }
.tbx-demo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-demo__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbx-demo__comment { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-1); font-size: 13px; line-height: 18px; }

.tbx-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
.tbx-run__title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; font-variant-numeric: tabular-nums; }
.tbx-run__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-run__strip { display: flex; align-items: center; gap: 2px; height: 16px; }
.tbx-run__strip i { display: block; width: 3px; height: 10px; border-radius: 2px; background: var(--success); }
.tbx-run__strip i.f { width: 5px; height: 16px; background: var(--danger); }
.tbx-run__strip i.s { background: var(--hairline-strong); }

/* ==========================================================================
   Machines and AI Agent tasks
   ========================================================================== */
.tbx-machine { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--ink); }
.tbx-machine__head { display: flex; align-items: flex-start; gap: 10px; }
.tbx-machine__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); }
.tbx-machine__name { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.24px; }
.tbx-machine__id { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0; }
.tbx-machine__head .tbx-status { margin-left: auto; }
.tbx-machine__task { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-1); }
.tbx-machine__task-title { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; min-width: 0; }
.tbx-machine__task-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-machine__notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-machine__notes li:first-child { color: var(--ink); }
.tbx-machine__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-machine__foot .tbx-btn { margin-left: auto; }
.tbx-machine--offline { background: var(--surface-1); box-shadow: none; }
.tbx-machine--offline .tbx-machine__icon { background: var(--surface-2); color: var(--ink-muted); }
.tbx-progress { height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.tbx-progress > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--ink); transition: width var(--duration-slow) var(--ease-standard); }
.tbx-machine__task .tbx-progress { background: var(--surface-3); }
.tbx-heartbeat { display: inline-flex; align-items: center; gap: 6px; }
.tbx-heartbeat--late { color: var(--ink); }

.tbx-agent-task { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--ink); }
.tbx-agent-task__top { display: flex; align-items: center; gap: 8px; }
.tbx-agent-task__id { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; }
.tbx-agent-task__title { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; }
.tbx-agent-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

.tbx-timeline { margin: 0; padding: 0; list-style: none; }
.tbx-timeline > li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; padding-bottom: 16px; }
.tbx-timeline > li::before { content: ""; position: absolute; left: 7.5px; top: 20px; bottom: 2px; width: 1px; background: var(--hairline); }
.tbx-timeline > li:last-child { padding-bottom: 0; }
.tbx-timeline > li:last-child::before { display: none; }
.tbx-timeline__glyph { margin-top: 1px; color: var(--ink-muted); }
.tbx-timeline__glyph.is-success { color: var(--success); }
.tbx-timeline__glyph.is-warning { color: var(--warning); }
.tbx-timeline__glyph.is-danger { color: var(--danger); }
.tbx-timeline__glyph.is-ink { color: var(--ink); }
.tbx-timeline__glyph.is-running { color: var(--ink); animation: tbx-spin 1600ms linear infinite; }
.tbx-timeline__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; }
.tbx-timeline__time { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-timeline__body { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-muted); font-size: 13px; line-height: 18px; }

.tbx-question { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.tbx-question__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-question__text { margin: 0; font-size: 15px; line-height: 22px; letter-spacing: -0.15px; color: var(--ink); max-width: var(--size-reading-max); }
.tbx-question__suggest { display: flex; gap: 6px; flex-wrap: wrap; }
.tbx-question__answer { display: flex; gap: 8px; align-items: flex-start; }
.tbx-question__answer .tbx-input { flex: 1; }
.tbx-question--answered { gap: 8px; background: var(--surface-1); box-shadow: none; }

/* ==========================================================================
   Approval: the one consistent pattern
   ========================================================================== */
.tbx-approval { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 12px 12px 16px; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-2); }
.tbx-approval::before, .tbx-sheet--approval::before, .tbx-queue__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--size-frame-line); background: var(--project-accent); z-index: 1; }
.tbx-approval__summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tbx-approval__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; }
.tbx-approval__aud { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-approval__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tbx-approval__note { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }

.tbx-goes { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; margin: 0; font-size: 13px; line-height: 18px; letter-spacing: -0.13px; }
.tbx-goes dt { padding: 7px 0; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-goes dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; margin: 0; padding: 4px 0; min-width: 0; }
.tbx-goes__title { margin: 0 0 4px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-goes__preview { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--radius-md); background: var(--surface-1); }
.tbx-goes__preview img { width: 64px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); background: var(--stage); flex: none; }

.tbx-sheet { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface-raised); box-shadow: var(--shadow-3); }
.tbx-sheet__grab { width: 36px; height: 4px; margin: 2px auto 2px; border-radius: var(--radius-pill); background: var(--hairline-strong); flex: none; }
.tbx-sheet__head { display: flex; align-items: center; gap: 8px; }
.tbx-sheet__head .tbx-title { flex: 1; font-size: 18px; line-height: 24px; letter-spacing: -0.4px; }
.tbx-sheet__actions { display: flex; gap: 8px; }
.tbx-sheet__actions .tbx-btn { flex: 1; }

.tbx-queue { position: relative; height: 420px; }
.tbx-queue__card { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-2); transform-origin: 50% 100%;
  transform: translateY(calc(var(--n, 0) * 10px)) scale(calc(1 - var(--n, 0) * 0.04)); transition: transform var(--duration-slow) var(--ease-standard); }
.tbx-queue__card--top { touch-action: pan-y; cursor: grab; }
.tbx-queue__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px; flex: 1; min-height: 0; overflow: hidden; }
.tbx-queue__reveal { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 28px; gap: 8px; border-radius: var(--radius-xl); font-size: 15px; font-weight: 600; opacity: 0; }
.tbx-queue__reveal--approve { justify-content: flex-start; background: var(--primary); color: var(--on-primary); }
.tbx-queue__reveal--later { justify-content: flex-end; background: var(--surface-2); color: var(--ink); }
.tbx-queue__progress { display: flex; align-items: center; justify-content: space-between; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-queue__buttons { display: flex; gap: 8px; }
.tbx-queue__buttons .tbx-btn { flex: 1; }
.tbx-batchbar { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--radius-lg); background: var(--inverse-canvas); color: var(--inverse-ink); box-shadow: var(--shadow-2); font-size: 13px; line-height: 18px; font-weight: 500; }
.tbx-batchbar span { flex: 1; }
.tbx-batchbar .tbx-btn { background: var(--inverse-ink); color: var(--inverse-canvas); }

/* Draft diff: tint plus strike/underline plus gutter sign */
.tbx-diff { font-size: 15px; line-height: 24px; letter-spacing: -0.15px; color: var(--ink); max-width: var(--size-reading-max); }
.tbx-diff del { padding: 1px 2px; border-radius: 3px; background: var(--danger-tint); color: var(--ink); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; }
.tbx-diff ins { padding: 1px 2px; border-radius: 3px; background: var(--success-tint); color: var(--ink); text-decoration: underline; text-decoration-color: var(--success); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tbx-diff__legend { display: flex; gap: 12px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-diff__legend del, .tbx-diff__legend ins { font-size: 12px; }

/* ==========================================================================
   Story: variant editor, counters, calendar
   ========================================================================== */
.tbx-editor { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline); }
.tbx-editor:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.tbx-editor__tabs { padding: 0 16px; }
.tbx-editor__tabs .tbx-tabs { gap: 18px; }
.tbx-editor__toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--hairline-soft); }
.tbx-editor__toolbar .tbx-spacer + * { margin-left: 8px; }
.tbx-editor__body { min-height: 180px; padding: 16px 20px; font-size: 15px; line-height: 22px; letter-spacing: -0.15px; outline: none; max-width: calc(var(--size-reading-max) + 40px); }
.tbx-editor__body p { margin: 0 0 10px; }
.tbx-editor__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--hairline-soft); }
.tbx-counter { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbx-counter .tbx-i { width: 12px; height: 12px; }
.tbx-counter--near { color: var(--ink); }
.tbx-counter--near .tbx-i { color: var(--warning); }
.tbx-counter--over { color: var(--danger); }
.tbx-counter--over .tbx-i { color: var(--danger); }
.tbx-tab .tbx-dot { width: 6px; height: 6px; }

.tbx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.tbx-cal__dow { height: 30px; padding: 0 8px; display: flex; align-items: center; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; border-bottom: 1px solid var(--hairline-soft); }
.tbx-cal__cell { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 104px; padding: 6px; background: var(--canvas); border-right: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); min-width: 0; }
.tbx-cal__cell:nth-child(7n) { border-right: 0; }
.tbx-cal__cell--other { background: var(--surface-1); }
.tbx-cal__cell--selected { box-shadow: inset 0 0 0 2px var(--accent-blue); }
.tbx-cal__cell--drop { background: var(--selection-strong); }
.tbx-cal__day { align-self: flex-start; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-cal__cell--today .tbx-cal__day { background: var(--primary); color: var(--on-primary); }
.tbx-cal__item { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 3px; border-radius: var(--radius-xs); background: var(--surface-1); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.12px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.tbx-cal__cell--other .tbx-cal__item { background: var(--surface-2); }
.tbx-cal__item:hover { background: var(--surface-2); }
.tbx-cal__item > span:not(.tbx-mark) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tbx-cal__item > .tbx-mark { width: 14px; height: 14px; font-size: 7px; }
.tbx-cal__item > .tbx-i { width: 12px; height: 12px; color: var(--ink-muted); }
.tbx-cal__item > .tbx-i.is-success { color: var(--success); }
.tbx-cal__item > .tbx-i.is-warning { color: var(--warning); }
.tbx-week { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.tbx-week__dow { height: 40px; display: flex; flex-direction: column; justify-content: center; padding: 0 8px; border-bottom: 1px solid var(--hairline-soft); border-left: 1px solid var(--hairline-soft); color: var(--ink-muted); font-size: 12px; line-height: 15px; font-weight: 500; }
.tbx-week__dow b { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbx-week__dow--today b { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); }
.tbx-week__hours { display: flex; flex-direction: column; }
.tbx-week__hours span { height: 44px; padding: 2px 6px 0 0; text-align: right; color: var(--ink-muted); font-size: 11px; line-height: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-week__day { position: relative; border-left: 1px solid var(--hairline-soft); background-image: linear-gradient(var(--hairline-soft) 1px, transparent 1px); background-size: 100% 44px; }
.tbx-week__event { position: absolute; left: 3px; right: 3px; top: calc(var(--s) * 44px + 2px); height: calc(var(--d) * 44px - 4px); display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-1); font-size: 12px; line-height: 15px; font-weight: 500; color: var(--ink); }
.tbx-week__event small { color: var(--ink-muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-week__t { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tbx-week__t > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-week__now { position: absolute; left: 0; right: 0; top: calc(var(--s) * 44px); height: 0; border-top: 1.5px solid var(--ink); z-index: 1; }
.tbx-week__now::before { content: ""; position: absolute; left: -4px; top: -4.75px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

/* ==========================================================================
   Audience: creators, outreach, communities
   ========================================================================== */
.tbx-avatar { display: inline-grid; place-items: center; flex: none; width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-full); background: var(--surface-2); color: var(--ink); font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0; overflow: hidden; }
.tbx-avatar--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); font-size: 12px; }
.tbx-creators { display: flex; flex-direction: column; min-width: 0; overflow-x: auto; }
.tbx-creator { display: grid; grid-template-columns: 28px 32px minmax(150px, 1.3fr) 104px 96px 104px 64px minmax(200px, 2fr) 136px; align-items: center; gap: 12px; min-height: var(--size-row-2line); padding: 8px 12px 8px 8px; border-bottom: 1px solid var(--hairline-soft); background: var(--canvas); min-width: 1040px; }
.tbx-creator:hover { background: var(--surface-1); }
.tbx-creator[aria-selected="true"] { background: var(--selection); }
.tbx-creator--head { min-height: 32px; padding-top: 0; padding-bottom: 0; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; border-bottom-color: var(--hairline); }
.tbx-creator--head:hover { background: var(--canvas); }
.tbx-creator__rank { color: var(--ink-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.tbx-creator__name { display: flex; flex-direction: column; min-width: 0; }
.tbx-creator__name b { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-creator__name span, .tbx-creator__video span { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-creator__video { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 18px; }
.tbx-creator__video b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-creator__fit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-creator__cell { font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tbx-mail { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); }
.tbx-mail__head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 8px; font-size: 12px; line-height: 16px; }
.tbx-mail__head dt { color: var(--ink-muted); font-weight: 500; }
.tbx-mail__head dd { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-mail__body { font-size: 14px; line-height: 21px; letter-spacing: -0.14px; }
.tbx-mail__body p { margin: 0 0 8px; }

.tbx-keybatch { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.tbx-keybatch__stats { display: flex; gap: 16px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-keybatch__stats b { display: block; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; }

.tbx-community { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--ink); }
.tbx-community__head { display: flex; align-items: center; gap: 10px; }
.tbx-community__name { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.24px; }
.tbx-community__sub { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-community__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tbx-community__stats div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-community__stats b { color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbx-rules { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.tbx-rules__title { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-rules ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 19px; }
.tbx-rules a { font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-community__signals { display: flex; flex-wrap: wrap; gap: 6px; }

.tbx-thread { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
.tbx-thread__head { display: flex; align-items: flex-start; gap: 10px; }
.tbx-thread__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.14px; }
.tbx-thread__meta { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tbx-reply { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 14px; line-height: 21px; letter-spacing: -0.14px; color: var(--ink); }
.tbx-reply p { margin: 0 0 6px; }
.tbx-reply p:last-child { margin: 0; }
.tbx-thread__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Feedback and overlays
   ========================================================================== */
.tbx-toast { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: 460px; padding: 8px 8px 8px 14px; border-radius: var(--radius-lg); background: var(--inverse-canvas); color: var(--inverse-ink); box-shadow: var(--shadow-2); font-size: 13px; line-height: 18px; letter-spacing: -0.13px; }
.tbx-toast__text { flex: 1; min-width: 0; padding: 4px 0; }
.tbx-toast__text b { font-weight: 500; }
.tbx-toast__detail { display: block; color: var(--inverse-ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-toast > .tbx-i { color: var(--inverse-ink); }
.tbx-toast--success > .tbx-i { color: var(--success-on-inverse); }
.tbx-toast--warning > .tbx-i { color: var(--warning-on-inverse); }
.tbx-toast--danger > .tbx-i { color: var(--danger-on-inverse); }
.tbx-toast__action { height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--inverse-ink); color: var(--inverse-canvas); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tbx-toast .tbx-iconbtn { width: 28px; height: 28px; color: var(--inverse-ink-muted); }
.tbx-toast .tbx-iconbtn:hover { background: transparent; color: var(--inverse-ink); }
.tbx-toast :focus-visible { outline-color: var(--inverse-ink); }
.tbx-toasts { position: fixed; left: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }

.tbx-scrim { display: grid; place-items: center; padding: 24px; background: var(--scrim); }
.tbx-modal { width: min(480px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-3); color: var(--ink); }
.tbx-modal__head { display: flex; align-items: flex-start; gap: 12px; }
.tbx-modal__head .tbx-title { flex: 1; }
.tbx-modal__body { font-size: 14px; line-height: 20px; color: var(--ink); }
.tbx-modal__body p { margin: 0 0 10px; }
.tbx-modal__body p:last-child { margin: 0; }
.tbx-modal__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tbx-modal__list li { display: flex; gap: 8px; align-items: flex-start; }
.tbx-modal__list .tbx-i { margin-top: 2px; color: var(--ink-muted); }
.tbx-modal__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.tbx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--space-40); }
.tbx-empty__title { margin: 0; font-size: 40px; line-height: 40px; font-weight: 500; letter-spacing: -2px; }
.tbx-empty__text { margin: 0; max-width: 46ch; color: var(--ink-muted); font-size: 15px; line-height: 22px; letter-spacing: -0.15px; }
.tbx-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Spotlight card: one per screen. Two adjacent gradient stops at 135deg, a top-left bloom, a dark-mode light source. */
.tbx-spotlight { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: var(--space-24); border-radius: var(--radius-xl); color: var(--ink); }
.tbx-spotlight--violet { background: radial-gradient(70% 90% at 100% 0%, var(--gradient-violet-glow), transparent 70%), radial-gradient(80% 90% at 0% 0%, var(--gradient-glow), transparent 70%), linear-gradient(135deg, var(--gradient-violet), var(--gradient-magenta)); }
.tbx-spotlight--magenta { background: radial-gradient(70% 90% at 100% 0%, var(--gradient-magenta-glow), transparent 70%), radial-gradient(80% 90% at 0% 0%, var(--gradient-glow), transparent 70%), linear-gradient(135deg, var(--gradient-magenta), var(--gradient-coral)); }
.tbx-spotlight--orange { background: radial-gradient(70% 90% at 100% 0%, var(--gradient-orange-glow), transparent 70%), radial-gradient(80% 90% at 0% 0%, var(--gradient-glow), transparent 70%), linear-gradient(160deg, var(--gradient-orange), var(--gradient-coral)); }
.tbx-spotlight--coral { background: radial-gradient(70% 90% at 100% 0%, var(--gradient-coral-glow), transparent 70%), radial-gradient(80% 90% at 0% 0%, var(--gradient-glow), transparent 70%), linear-gradient(135deg, var(--gradient-coral), var(--gradient-magenta)); }
.tbx-spotlight--marketing { padding: 32px; border-radius: var(--radius-xxl); }
.tbx-spotlight__eyebrow { color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-spotlight__title { margin: 0; font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: -1px; }
.tbx-spotlight__text { margin: 0; max-width: 52ch; color: var(--ink-muted); font-size: 15px; line-height: 22px; letter-spacing: -0.15px; }
.tbx-spotlight .tbx-btn--secondary { background: var(--surface-raised); }
.tbx-spotlight .tbx-btn--secondary:hover { background: var(--canvas); }

/* Skeleton */
.tbx-skel { position: relative; overflow: hidden; border-radius: var(--radius-xs); background: var(--surface-2); }
.tbx-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--hover-on-raised), transparent); animation: tbx-shimmer var(--duration-shimmer) var(--ease-standard) infinite; }
@keyframes tbx-shimmer { to { transform: translateX(100%); } }
.tbx-skel--line { height: 12px; }
.tbx-skel--title { height: 18px; }
.tbx-skel--media { aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.tbx-skel--chip { width: 56px; height: 20px; border-radius: var(--radius-pill); }
.tbx-skel--stage { background: transparent; }
.tbx-skel--stage::after { background: linear-gradient(90deg, transparent, var(--on-stage), transparent); opacity: .08; }

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767px) {
  .tbx-input, .tbx-select, .tbx-taginput input, .tbx-cmd__input input { font-size: 16px; }
  .tbx-detail { grid-template-columns: minmax(0, 1fr); }
  .tbx-detail__aside { position: static; }
  .tbx-page { padding: var(--space-16); }
  .tbx-empty__title { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .tbx-spotlight__title { font-size: 26px; line-height: 30px; letter-spacing: -0.8px; }
  .tbx-approval { flex-direction: column; align-items: stretch; }
}

/* Reduced motion: nothing slides, pulses, spins or shimmers; GIFs stay on their first frame */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .tbx-dot--pulse::after, .tbx-skel::after { display: none; }
}

/* ==========================================================================
   Preview scaffolding (component cards only)
   ========================================================================== */
.tbx-pv { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.tbx-pv__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tbx-pv__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tbx-pv__label { min-width: 88px; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-pv--surface { background: var(--surface-1); }
.tbx-pv__phone { width: 375px; max-width: 100%; height: 760px; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--canvas); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-2); }
.tbx-phone-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.tbx-phone-scroll > * { flex-shrink: 0; }
.tbx-pv__status { display: flex; justify-content: space-between; padding: 12px 22px 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }

/* Approval rules: per output kind, ask / on schedule / automatic */
.tbx-rule { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
.tbx-rule__what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbx-rule__what b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.14px; }
.tbx-rule__what span:not(.tbx-mark) { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 500; }
.tbx-rule__note { grid-column: 1 / -1; margin: 0 0 0 30px; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
@media (max-width: 767px) { .tbx-rule { grid-template-columns: minmax(0, 1fr); } .tbx-rule__note { margin-left: 0; } }

/* Icons and status glyphs: CSS masks on currentColor. 24-unit grid, 2px round strokes (Lucide geometry). */
.tbx-i { display: inline-block; flex: none; width: var(--size-icon); height: var(--size-icon); background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -3px; }
.tbx-i--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); vertical-align: -1px; }
.tbx-i--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.tbx-i--home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7V20a1 1 0 0 1-1 1H15v-6.5H9V21H4.5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.tbx-i--inbox { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 12.5h-6l-2 3h-3l-2-3h-6'/%3E%3Cpath d='M5.6 5.2 2.5 12.5V18a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2v-5.5l-3.1-7.3a2 2 0 0 0-1.8-1.2H7.4a2 2 0 0 0-1.8 1.2z'/%3E%3C/svg%3E"); }
.tbx-i--layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.tbx-i--kanban { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 7.5v8M12 7.5v4M16 7.5v6'/%3E%3C/svg%3E"); }
.tbx-i--list { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); }
.tbx-i--film { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7.5 3v18M16.5 3v18M3 8h4.5M3 12h18M3 16h4.5M16.5 8H21M16.5 16H21'/%3E%3C/svg%3E"); }
.tbx-i--cpu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); }
.tbx-i--laptop { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19.5h20'/%3E%3C/svg%3E"); }
.tbx-i--terminal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 17 5.5-5-5.5-5M12 18.5h7.5'/%3E%3C/svg%3E"); }
.tbx-i--pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5h8.5'/%3E%3Cpath d='M16.4 3.6a2.1 2.1 0 0 1 3 3L7.5 18.5l-4 1 1-4z'/%3E%3C/svg%3E"); }
.tbx-i--calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E"); }
.tbx-i--newspaper { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4.5h13a2 2 0 0 1 2 2V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8h3'/%3E%3Cpath d='M6 4.5V19a2 2 0 0 1-2 2M10 9h7M10 13h7M10 17h4'/%3E%3C/svg%3E"); }
.tbx-i--video { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.5 8-5 4 5 4z'/%3E%3Crect x='2.5' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E"); }
.tbx-i--users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20.5v-1.5a4 4 0 0 0-4-4H6.5a4 4 0 0 0-4 4v1.5'/%3E%3Ccircle cx='9.25' cy='7.5' r='3.75'/%3E%3Cpath d='M21.5 20.5v-1.5a4 4 0 0 0-3-3.9M15.5 3.8a3.8 3.8 0 0 1 0 7.4'/%3E%3C/svg%3E"); }
.tbx-i--gamepad { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='19' height='11' rx='5.5'/%3E%3Cpath d='M7 12h4M9 10v4M15 11.5h.01M17.5 13h.01'/%3E%3C/svg%3E"); }
.tbx-i--globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a13.5 13.5 0 0 1 0 18M12 3a13.5 13.5 0 0 0 0 18'/%3E%3C/svg%3E"); }
.tbx-i--sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21v-6.5M5 10.5V3M12 21v-8.5M12 8.5V3M19 21v-4.5M19 12.5V3M2.5 14.5h5M9.5 8.5h5M16.5 16.5h5'/%3E%3C/svg%3E"); }
.tbx-i--approvals { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E"); }
.tbx-i--bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6 6 0 0 1 12 0c0 6.5 2.5 8.5 2.5 8.5h-17S6 15 6 8.5M10.3 20.5a2 2 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.tbx-i--megaphone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h2l6 4.5v-15l-6 4.5h-2a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M7 15l1.5 5.5'/%3E%3C/svg%3E"); }
.tbx-i--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5l-5-5'/%3E%3C/svg%3E"); }
.tbx-i--x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.tbx-i--plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E"); }
.tbx-i--minus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.tbx-i--chevron-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.tbx-i--chevron-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
.tbx-i--chevron-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.tbx-i--chevron-left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.tbx-i--chevrons-up-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E"); }
.tbx-i--search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.5-4.5'/%3E%3C/svg%3E"); }
.tbx-i--copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12.5' height='12.5' rx='2'/%3E%3Cpath d='M15.5 8.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2h3.5'/%3E%3C/svg%3E"); }
.tbx-i--external { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5h6v6M10 14 20.5 3.5M18.5 13.5v5a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E"); }
.tbx-i--more { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.8-9.8M15.5 7.5l3 3M18.5 4.5l2 2'/%3E%3C/svg%3E"); }
.tbx-i--eye { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5 12 5s9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.tbx-i--eye-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5 12 5s9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3.5 3.5 17 17'/%3E%3C/svg%3E"); }
.tbx-i--refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6l2.5 2.5'/%3E%3Cpath d='M20.5 3.5v5h-5'/%3E%3C/svg%3E"); }
.tbx-i--trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6h17M8.5 6V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2M18.5 6l-.9 13.1a2 2 0 0 1-2 1.9H8.4a2 2 0 0 1-2-1.9L5.5 6'/%3E%3C/svg%3E"); }
.tbx-i--message { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15a2 2 0 0 1-2 2h-11l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.tbx-i--send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.5 2.5-6.5 19-4-8.5-8.5-4z'/%3E%3Cpath d='M21.5 2.5 11 13'/%3E%3C/svg%3E"); }
.tbx-i--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.tbx-i--mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='m21.5 7-9.5 6-9.5-6'/%3E%3C/svg%3E"); }
.tbx-i--play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5v15l12-7.5z' fill='black'/%3E%3C/svg%3E"); }
.tbx-i--pause { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='black' stroke='none'%3E%3Crect x='6' y='4.5' width='4' height='15' rx='1'/%3E%3Crect x='14' y='4.5' width='4' height='15' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--zoom-in { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
.tbx-i--zoom-out { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.5-4.5M8 11h6'/%3E%3C/svg%3E"); }
.tbx-i--fit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5H5.5a2 2 0 0 0-2 2V8M20.5 8V5.5a2 2 0 0 0-2-2H16M3.5 16v2.5a2 2 0 0 0 2 2H8M16 20.5h2.5a2 2 0 0 0 2-2V16'/%3E%3C/svg%3E"); }
.tbx-i--download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15v3.5a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V15M7 10l5 5 5-5M12 15V3.5'/%3E%3C/svg%3E"); }
.tbx-i--image { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 20.5'/%3E%3C/svg%3E"); }
.tbx-i--commit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M2.5 12h6M15.5 12h6'/%3E%3C/svg%3E"); }
.tbx-i--activity { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h4l2.5-6.5 5 13 2.5-6.5h5'/%3E%3C/svg%3E"); }
.tbx-i--coin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.6 9.4c-.4-.9-1.4-1.4-2.6-1.4-1.5 0-2.6.8-2.6 2s1.1 1.6 2.6 1.9 2.6.8 2.6 2-1.1 2.1-2.6 2.1c-1.2 0-2.2-.6-2.6-1.5M12 6.5V8M12 16v1.5'/%3E%3C/svg%3E"); }
.tbx-i--filter { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h17l-6.5 7.5v6l-4 2v-8z'/%3E%3C/svg%3E"); }
.tbx-i--sort { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 16 4 4 4-4M7.5 20V4M20.5 8l-4-4-4 4M16.5 4v16'/%3E%3C/svg%3E"); }
.tbx-i--sun { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M2.5 12h2M19.5 12h2M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E"); }
.tbx-i--moon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3a6.5 6.5 0 0 0 8.5 8.5A9 9 0 1 1 12.5 3z'/%3E%3C/svg%3E"); }
.tbx-i--map-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10c0 5.5-7.5 11.5-7.5 11.5S4.5 15.5 4.5 10a7.5 7.5 0 0 1 15 0z'/%3E%3Ccircle cx='12' cy='10' r='2.75'/%3E%3C/svg%3E"); }
.tbx-i--dice { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='8.5' cy='8.5' r='1.4'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.4'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.4'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--mountain { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 4.5 4 7.5 3-3.5 6.5 11h-19z'/%3E%3C/svg%3E"); }
.tbx-i--link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.5a4.5 4.5 0 0 0 6.8.5l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.6 1.6M14 10.5a4.5 4.5 0 0 0-6.8-.5l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.6-1.6'/%3E%3C/svg%3E"); }
.tbx-i--arrow-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.tbx-i--grip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='9' cy='6' r='1.5'/%3E%3Ccircle cx='15' cy='6' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='18' r='1.5'/%3E%3Ccircle cx='15' cy='18' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--sparkle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.9 9 19.5 11l-5.6 2-1.9 5.5-1.9-5.5-5.6-2 5.6-2z'/%3E%3Cpath d='M19 3.5v3M17.5 5h3'/%3E%3C/svg%3E"); }
.tbx-i--bot { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 8V4.5M9 4.5h6M2 13.5v2M22 13.5v2'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='9' cy='14' r='1.4'/%3E%3Ccircle cx='15' cy='14' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 21.5V4M4.5 15.5s1-1 4-1 5 2 8 2 3-1 3-1V4s-1 1-3 1-5-2-8-2-4 1-4 1'/%3E%3C/svg%3E"); }
.tbx-i--undo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14.5 4 9.5l5-5'/%3E%3Cpath d='M4 9.5h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
.tbx-i--split { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E"); }
.tbx-i--bold { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.5h6a3.75 3.75 0 0 1 0 7.5H7zM7 12h7a3.75 3.75 0 0 1 0 7.5H7z'/%3E%3C/svg%3E"); }
.tbx-i--italic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 4.5h-8M13.5 19.5h-8M14.5 4.5l-5 15'/%3E%3C/svg%3E"); }
.tbx-i--panel { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E"); }
.tbx-i--heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8.5c0 5-8 11-8 11s-8-6-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 8.5z'/%3E%3C/svg%3E"); }
.tbx-i--alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4 2.4 17.8a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E"); }
.tbx-i--lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E"); }
.tbx-i--st-draft { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke-dasharray='3.35 3.33'/%3E%3C/svg%3E"); }
.tbx-i--st-queued { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E"); }
.tbx-i--st-claimed { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 12V6.5a5.5 5.5 0 0 1 5.5 5.5z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.tbx-i--st-running { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 6.5a5.5 5.5 0 0 1 0 11z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.tbx-i--st-needs-answer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 0 1 4.85.85c0 1.7-2.45 2.2-2.45 3.6'/%3E%3Cpath d='M12 17.2h.01' stroke-width='2.8'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='black' stroke='none'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--st-done { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 12.4 2.7 2.7L16 9.8'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='black' stroke='none'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--st-failed { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='black' stroke='none'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--st-needs-approval { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.4v5.2'/%3E%3Cpath d='M12 16.6h.01' stroke-width='2.8'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='black' stroke='none'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--st-approved { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-4.6'/%3E%3C/svg%3E"); }
.tbx-i--st-scheduled { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8v4l2.6 1.6'/%3E%3C/svg%3E"); }
.tbx-i--st-discarded { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6.2 17.8 17.8 6.2'/%3E%3C/svg%3E"); }
.tbx-i--st-warning { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9.2v4.4'/%3E%3Cpath d='M12 17.2h.01' stroke-width='2.8'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='black' stroke='none'%3E%3Cpath d='M10.2 3.6 1.9 18a2.1 2.1 0 0 0 1.8 3.1h16.6a2.1 2.1 0 0 0 1.8-3.1L13.8 3.6a2.1 2.1 0 0 0-3.6 0z'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--kind-bug { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.5' y='7' width='9' height='13.5' rx='4.5'/%3E%3Cpath d='M12 11.5v9M7.5 12.5H4M20 12.5h-3.5M7.5 17H4.5M19.5 17h-3M10 7.3 8.6 4.5M14 7.3l1.4-2.8'/%3E%3C/svg%3E"); }
.tbx-i--kind-crash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.00 2.00 L13.68 7.93 L19.07 4.93 L16.07 10.32 L22.00 12.00 L16.07 13.68 L19.07 19.07 L13.68 16.07 L12.00 22.00 L10.32 16.07 L4.93 19.07 L7.93 13.68 L2.00 12.00 L7.93 10.32 L4.93 4.93 L10.32 7.93Z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.tbx-i--kind-feature { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21.5h4'/%3E%3Cpath d='M12 2.5a6.5 6.5 0 0 0-3.9 11.7c.6.5.9 1.1.9 1.8h6c0-.7.3-1.3.9-1.8A6.5 6.5 0 0 0 12 2.5z'/%3E%3C/svg%3E"); }
.tbx-i--kind-feedback { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.4 8.4 0 0 1-12.3 7.4L3.5 20.5l1.6-4.5a8.4 8.4 0 1 1 15.4-4.4z'/%3E%3C/svg%3E"); }
.tbx-i--pri-urgent { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.2v6'/%3E%3Cpath d='M12 16.8h.01' stroke-width='2.8'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='black' stroke='none'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--pri-high { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='black' stroke='none'%3E%3Crect x='3.5' y='14' width='4' height='6.5' rx='1'/%3E%3Crect x='10' y='9' width='4' height='11.5' rx='1'/%3E%3Crect x='16.5' y='3.5' width='4' height='17' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--pri-medium { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='black' stroke='none'%3E%3Crect x='3.5' y='14' width='4' height='6.5' rx='1'/%3E%3Crect x='10' y='9' width='4' height='11.5' rx='1'/%3E%3Crect x='16.5' y='3.5' width='4' height='17' rx='1' fill-opacity='.28'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--pri-low { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='black' stroke='none'%3E%3Crect x='3.5' y='14' width='4' height='6.5' rx='1'/%3E%3Crect x='10' y='9' width='4' height='11.5' rx='1' fill-opacity='.28'/%3E%3Crect x='16.5' y='3.5' width='4' height='17' rx='1' fill-opacity='.28'/%3E%3C/g%3E%3C/svg%3E"); }
.tbx-i--pri-none { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h3M10.5 12h3M17 12h3'/%3E%3C/svg%3E"); }