/* clawback.capital UI system — shell + components (gh-628 / U1 gh-629).
 * Design of record: docs/design/ui-system.md §2 (shell) and §3 (components).
 * Requires tokens.css first. No build step, no framework. RTL-safe: logical
 * properties everywhere; `[dir="rtl"]` only where a transform must mirror.
 *
 * Grammar (see README.md): one block class per component (.btn, .card, .table…),
 * variants as `.<block>-<variant>` (.btn-primary, .badge-up), states as
 * `.is-<state>` (.is-active, .is-open) or the native attribute (:disabled,
 * [aria-current="page"]). Type styles are `.t-<style>`. */

/* ── 0. Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--background); color: var(--foreground);
  font: var(--text-body); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1 { font: var(--text-h1); letter-spacing: -.01em; }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }
code, kbd, pre { font-family: var(--font-mono); font-size: .93em; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Selected text inverts the theme (tokens.css). Universal on purpose: links, P&L numbers, code and inputs inside a
   selection take the selection colour; the fill colour keeps gradient-text headings readable when selected. */
::selection { background: var(--selection-bg); color: var(--selection-fg); -webkit-text-fill-color: var(--selection-fg); }
[hidden] { display: none !important; }

/* Type scale */
.t-display { font: var(--text-display); letter-spacing: -.02em; }
.t-h1 { font: var(--text-h1); letter-spacing: -.01em; }
.t-h2 { font: var(--text-h2); }
.t-h3 { font: var(--text-h3); }
.t-body { font: var(--text-body); }
.t-body-md { font: var(--text-body-md); }
.t-small { font: var(--text-small); }
.t-caption { font: var(--text-caption); }
.t-label, .label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.t-kpi, .kpi-value { font: var(--text-kpi); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted-foreground); }
.text-end { text-align: end; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* P&L colour — NUMBERS ONLY, never chrome */
.pnl-profit { color: var(--pnl-profit); font-variant-numeric: tabular-nums; }
.pnl-loss { color: var(--pnl-loss); font-variant-numeric: tabular-nums; }
/* Arabic / Persian script gets no tracking */
[dir="rtl"] .t-label, [dir="rtl"] .label, [dir="rtl"] .badge, [dir="rtl"] .table th,
[dir="rtl"] .brand-hall, [dir="rtl"] .sidebar-label { letter-spacing: 0; }

/* Layout utilities */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 1023.98px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ── 1. Shell ────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  display: flex; flex-direction: column; gap: var(--space-5);
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); height: 100vh; overflow-y: auto;
  padding: var(--space-5) var(--space-4);
  background: var(--card); border-inline-end: 1px solid var(--border);
  z-index: 30;
}
.brand-row { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--foreground); }
.brand-row:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-control);
  background: var(--primary); color: var(--primary-foreground);
  font: 900 13px/1 var(--font-sans); letter-spacing: .02em;
}
.brand-name { font: 700 15px/20px var(--font-sans); letter-spacing: -.01em; white-space: nowrap; }
.brand-hall { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.sidebar-section { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); padding-inline: 12px; }

/* Workspace switcher — a details menu that shows the acting org / mode */
.workspace { position: relative; }
.workspace > summary, .workspace-static {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px;
  border-radius: var(--radius-control); background: var(--secondary); border: 1px solid var(--border);
  font: var(--text-body-md); color: var(--foreground); cursor: pointer; list-style: none;
}
.workspace > summary::-webkit-details-marker { display: none; }
.workspace > summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border: solid var(--muted-foreground); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); flex: none; }
.workspace-static { cursor: default; }
.workspace-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-meta { font: var(--text-caption); color: var(--muted-foreground); }
.workspace .menu-list { inset-inline: 0; min-width: 0; }
/* gh-674: the organisation toggle under the brand row (GENKAN · HONMARU · DOJO · KAGAMI). A segmented control that
   FITS the 207px sidebar: segments flex evenly, the label is a span so ellipsis applies (a flex item never ellipsizes
   its own text), the acting org is the primary-filled segment. One org → the static chip. */
.sidebar-orgs { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 8px; }
.sidebar-orgs .segmented { display: flex; width: 100%; }
.sidebar-orgs .segmented > button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.sidebar-orgs .segmented > button > .seg-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-orgs .segmented > button.is-active { background: var(--primary); color: var(--primary-foreground); }
.shell.is-collapsed .sidebar-orgs { display: none; }
@media (max-width: 1023.98px) { .shell:not(.is-expanded) .sidebar-orgs { display: none; } }

/* Nav */
.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 37px; padding: 0 12px;
  border-radius: var(--radius-control); font: var(--text-body-md); color: var(--muted-foreground);
  background: none; border: 0; width: 100%; text-align: start; transition: background-color .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--secondary); color: var(--foreground); text-decoration: none; }
.nav-item.is-active, .nav-item[aria-current="page"] { background: var(--accent); color: var(--accent-foreground); }
.nav-item[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.nav-icon { width: 18px; height: 18px; flex: none; }
.nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { margin-inline-start: auto; }
.nav-ext { width: 12px; height: 12px; opacity: .6; flex: none; }
.sidebar-spacer { flex: 1 1 auto; }

/* User chip (bottom of the sidebar) */
.user-chip { position: relative; }
.user-chip > summary, .user-chip-static {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px;
  border-radius: 10px; background: var(--secondary); color: var(--foreground); cursor: pointer; list-style: none;
}
.user-chip > summary::-webkit-details-marker { display: none; }
.user-chip > summary:hover { background: var(--muted); }
.user-chip .menu-list { inset-inline: 0; bottom: calc(100% + 8px); top: auto; min-width: 0; }
.user-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.user-name { font: 600 13px/18px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email { font: var(--text-caption); font-weight: 400; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Main + page header */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--main-pad-y) var(--main-pad-x); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); flex-wrap: wrap; }
.page-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-title { font: var(--text-h1); letter-spacing: -.01em; }
.page-subtitle { font: var(--text-small); color: var(--muted-foreground); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.content { display: flex; flex-direction: column; gap: var(--space-5); }
.content-narrow { max-width: 960px; }
.page-footer { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-5); font: var(--text-caption); font-weight: 400; color: var(--muted-foreground); }

/* Hamburger (drawer) + scrim — visible only below 768 */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--card); color: var(--foreground); flex: none; }
.nav-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 29; border: 0; padding: 0; }

/* Collapse: below 1024 → 64px icon rail (or `.shell.is-collapsed` at any width) */
@media (max-width: 1023.98px) {
  .shell:not(.is-expanded) .sidebar { width: var(--sidebar-rail-w); flex-basis: var(--sidebar-rail-w); padding-inline: 12px; gap: var(--space-4); }
  .shell:not(.is-expanded) .brand-text, .shell:not(.is-expanded) .sidebar-label, .shell:not(.is-expanded) .nav-text,
  .shell:not(.is-expanded) .nav-badge, .shell:not(.is-expanded) .nav-ext, .shell:not(.is-expanded) .user-text,
  .shell:not(.is-expanded) .workspace-name, .shell:not(.is-expanded) .workspace-meta, .shell:not(.is-expanded) .workspace > summary::after { display: none; }
  .shell:not(.is-expanded) .nav-item, .shell:not(.is-expanded) .workspace > summary, .shell:not(.is-expanded) .workspace-static,
  .shell:not(.is-expanded) .user-chip > summary, .shell:not(.is-expanded) .user-chip-static { justify-content: center; padding-inline: 0; }
  .shell:not(.is-expanded) .user-chip .menu-list, .shell:not(.is-expanded) .workspace .menu-list { inset-inline-start: 0; inset-inline-end: auto; min-width: 220px; }
  .main { --main-pad-x: 24px; }
}
.shell.is-collapsed .sidebar { width: var(--sidebar-rail-w); flex-basis: var(--sidebar-rail-w); padding-inline: 12px; }
.shell.is-collapsed .brand-text, .shell.is-collapsed .sidebar-label, .shell.is-collapsed .nav-text, .shell.is-collapsed .nav-badge,
.shell.is-collapsed .nav-ext, .shell.is-collapsed .user-text, .shell.is-collapsed .workspace-name, .shell.is-collapsed .workspace-meta,
.shell.is-collapsed .workspace > summary::after { display: none; }
.shell.is-collapsed .nav-item, .shell.is-collapsed .workspace > summary, .shell.is-collapsed .user-chip > summary { justify-content: center; padding-inline: 0; }

/* Drawer: below 768 the sidebar is off-canvas; `.is-nav-open` on .shell slides it in */
@media (max-width: 767.98px) {
  .shell .sidebar, .shell:not(.is-expanded) .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); flex-basis: var(--sidebar-w); padding-inline: var(--space-4);
    transform: translateX(-100%); transition: transform .2s ease; z-index: 40; box-shadow: none;
  }
  [dir="rtl"] .shell .sidebar { transform: translateX(100%); }
  .shell.is-nav-open .sidebar, [dir="rtl"] .shell.is-nav-open .sidebar { transform: none; box-shadow: var(--shadow-pop); }
  .shell.is-nav-open .scrim { display: block; }
  .shell .brand-text, .shell .sidebar-label, .shell .nav-text, .shell .nav-badge, .shell .nav-ext, .shell .user-text,
  .shell .workspace-name, .shell .workspace-meta, .shell .workspace > summary::after { display: initial; }
  .shell .nav-text, .shell .user-text, .shell .workspace-name { display: block; }
  .shell .nav-item, .shell .workspace > summary, .shell .user-chip > summary { justify-content: flex-start; padding-inline: 12px; }
  .shell .user-chip > summary { padding-inline: 10px; }
  .main { --main-pad-x: 16px; --main-pad-y: 16px; }
  .nav-toggle { display: inline-flex; }
  .page-header { min-height: 0; }
  .page-title { font: var(--text-h2); }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .drawer, .nav-item, .skeleton::after { transition: none; animation: none; } }

/* ── 2. Auth pages (TORII door) ──────────────────────────────────────── */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-7) var(--space-4); }
.auth-corner { position: fixed; top: var(--space-4); inset-inline-end: var(--space-4); display: flex; align-items: center; gap: var(--space-2); z-index: 20; }
.auth-card {
  width: 100%; max-width: var(--auth-card-w); display: flex; flex-direction: column; gap: var(--space-5);
  padding: 40px; border-radius: var(--radius-hero); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.auth-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-title { display: flex; flex-direction: column; gap: 6px; }
.auth-title h1 { font: 600 28px/34px var(--font-sans); letter-spacing: -.01em; }
.auth-sub { font: var(--text-body); color: var(--muted-foreground); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.auth-cta > :only-child { margin-inline-start: auto; }
.auth-switch { font: var(--text-small); color: var(--muted-foreground); text-align: center; }
.auth-legal { font: var(--text-caption); font-weight: 400; color: var(--muted-foreground); }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-foreground); font: var(--text-caption); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.providers { display: flex; flex-direction: column; gap: var(--space-2); }
.btn-provider { justify-content: center; }
@media (max-width: 767.98px) {
  .auth-page { padding: 72px var(--space-4) var(--space-5); align-items: start; }
  .auth-card { padding: var(--space-5); border-radius: var(--radius-card); }
  .auth-title h1 { font: var(--text-h2); }
}

/* ── 3. Components ───────────────────────────────────────────────────── */

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 39px; padding: 0 16px; border-radius: var(--radius-control);
  border: 1px solid transparent; font: var(--text-body-md); white-space: nowrap;
  background: var(--secondary); color: var(--secondary-foreground); text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--brand-600); }
:root[data-theme="light"] .btn-primary:hover { background: var(--brand-700); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.btn-secondary:hover { background: var(--muted); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--secondary); }
.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-destructive:hover { filter: brightness(.92); }
.btn-link { background: none; color: var(--link); padding-inline: 4px; min-height: 0; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn-sm { min-height: 32px; padding: 0 12px; font: 500 13px/18px var(--font-sans); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-icon { width: 38px; padding: 0; }

/* Input / Select / Textarea */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font: var(--text-caption); color: var(--muted-foreground); }
.input {
  width: 100%; min-height: 38px; padding: 8px 12px; border-radius: var(--radius-control);
  border: 1px solid var(--input); background: var(--muted); color: var(--foreground); font: var(--text-body);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder { color: var(--muted-foreground); opacity: .8; }
.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); }
.input:disabled { opacity: .6; cursor: not-allowed; }
.input.is-error, .input[aria-invalid="true"] { border-color: var(--destructive); }
textarea.input { min-height: 96px; resize: vertical; line-height: 20px; }
select.input { appearance: none; padding-inline-end: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select.input { background-position: 11px 50%, 16px 50%; padding-inline-end: 12px; padding-inline-start: 32px; }
.input-code { font: 600 22px/28px var(--font-mono); letter-spacing: .35em; text-align: center; min-height: 48px; }
[dir="rtl"] .input-code { letter-spacing: .35em; direction: ltr; }
.input-sm { min-height: 34px; padding: 6px 10px; font: var(--text-small); }
.hint { font: var(--text-caption); font-weight: 400; color: var(--muted-foreground); }
.error-text { font: var(--text-small); color: var(--destructive); }
.ok-text { font: var(--text-small); color: var(--muted-foreground); }
.check { display: inline-flex; align-items: center; gap: 8px; font: var(--text-small); color: var(--foreground); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.checks { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: var(--radius-badge);
  font: var(--text-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: var(--secondary); color: var(--muted-foreground); border: 1px solid transparent;
}
.badge-brand { background: var(--accent); color: var(--accent-foreground); }
.badge-up { background: color-mix(in srgb, var(--semantic-up) 18%, transparent); color: var(--semantic-up); }
.badge-down { background: color-mix(in srgb, var(--semantic-down) 18%, transparent); color: var(--semantic-down); }
.badge-alert { background: color-mix(in srgb, var(--semantic-alert) 20%, transparent); color: var(--semantic-alert); }
.badge-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.badge-outline { background: transparent; border-color: var(--border); }
.badge-crypto { background: color-mix(in srgb, var(--brand-crypto) 20%, transparent); color: var(--brand-crypto); }
.badge-stock { background: color-mix(in srgb, var(--brand-stock) 22%, transparent); color: var(--brand-stock-foreground); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Avatar */
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--primary); color: var(--primary-foreground); font: 700 12px/1 var(--font-sans); text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 40px; height: 40px; font-size: 15px; }

/* gh-865: theme-paired art — every service avatar / emblem spot carries two images, img.cb-art-dark + img.cb-art-light
   (the `-light` twin), both loading="lazy" (a display:none lazy image is never fetched). The other one is hidden under
   EXACTLY the conditions tokens.css switches the colours on: [data-theme] decides, prefers-color-scheme only when no
   theme is set. Only the hidden image is touched, so the shown one keeps its component's display. docs/design/ui-system.md § 3a */
:root[data-theme="light"] .cb-art-dark,
:root[data-theme="dark"] .cb-art-light { display: none !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cb-art-dark { display: none !important; } }
@media not all and (prefers-color-scheme: light) { :root:not([data-theme="light"]) .cb-art-light { display: none !important; } }

/* Chip (page-header account / status chips) */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 10px 3px 4px; border-radius: var(--radius-control);
  background: var(--card); border: 1px solid var(--border); font: 600 12.5px/16px var(--font-sans); color: var(--foreground); max-width: 100%;
}
[dir="rtl"] .chip { padding: 3px 4px 3px 10px; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip form { display: contents; }
.chip button { background: none; border: 0; padding: 0; color: var(--muted-foreground); font: inherit; font-weight: 500; }
.chip button:hover { color: var(--foreground); }
.chip .ini { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font: 800 11px/1 var(--font-sans); flex: none; }
.chip img { width: 24px; height: 24px; border-radius: 50%; }
.chip-static { padding-inline: 10px; }

/* Segmented (TabPill / TimeRange) */
.segmented { display: inline-flex; align-items: center; gap: 2px; padding: 2px; min-height: 28px; border-radius: var(--radius-control); background: var(--secondary); border: 1px solid var(--border); }
.segmented .seg, .segmented > button, .segmented > a, .segmented > label > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 22px; padding: 0 10px; border-radius: 6px;
  border: 0; background: none; color: var(--muted-foreground); font: var(--text-caption); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.segmented > label { display: contents; }
.segmented > label > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.segmented .seg:hover, .segmented > button:hover, .segmented > a:hover { color: var(--foreground); }
.segmented .is-active, .segmented [aria-pressed="true"], .segmented [aria-current="page"], .segmented > label > input:checked + span,
.segmented .seg.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-card); }
.segmented-brand .is-active, .segmented-brand [aria-pressed="true"], .segmented-brand > label > input:checked + span { background: var(--primary); color: var(--primary-foreground); }
.segmented-lg { min-height: 38px; }
.segmented-lg .seg, .segmented-lg > label > span { min-height: 32px; padding: 0 14px; font: var(--text-small); font-weight: 600; }

/* ThemeToggle — the existing component, unchanged markup:
   <button class="theme-toggle" data-theme-toggle><span class="seg seg-dark">☾</span><span class="seg seg-light">☀</span></button> */
.theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-control); background: var(--card); border: 1px solid var(--border); cursor: pointer; flex: none; }
.theme-toggle .seg { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 6px; font-size: 13px; color: var(--muted-foreground); }
:root[data-theme="light"] .theme-toggle .seg-light, :root:not([data-theme="light"]) .theme-toggle .seg-dark { background: var(--primary); color: var(--primary-foreground); }

/* Skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--muted); border-radius: var(--radius-control); min-height: 14px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent); animation: cb-shimmer 1.4s infinite; }
[dir="rtl"] .skeleton::after { animation-name: cb-shimmer-rtl; }
.skeleton-line { height: 14px; width: 100%; }
.skeleton-block { height: 96px; border-radius: var(--radius-card); }
.skeleton-tile { height: 130px; border-radius: var(--radius-card); }
@keyframes cb-shimmer { to { transform: translateX(100%); } }
@keyframes cb-shimmer-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* KpiTile */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.kpi { display: flex; flex-direction: column; gap: 6px; min-height: 130px; padding: 20px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.kpi-delta { font: var(--text-caption); color: var(--muted-foreground); }
.kpi-bar { margin-top: auto; }

/* Progress bar */
.progress { height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.progress > i, .progress-fill { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.progress-indeterminate > i, .progress[aria-busy="true"] > i { width: 38%; animation: cb-slide 1.6s ease-in-out infinite; }
[dir="rtl"] .progress-indeterminate > i, [dir="rtl"] .progress[aria-busy="true"] > i { animation-name: cb-slide-rtl; }
@keyframes cb-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes cb-slide-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-300%); } }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: cb-spin .9s linear infinite; vertical-align: -2px; }
@keyframes cb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .progress-indeterminate > i, .progress[aria-busy="true"] > i { animation: none; } .progress-indeterminate > i, .progress[aria-busy="true"] > i { width: 100%; opacity: .5; } }

/* Card */
.card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); box-shadow: var(--shadow-card); min-width: 0; }
.card-hero { border-radius: var(--radius-hero); }
.card-flush { padding: 0; overflow: hidden; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.card-title { font: var(--text-h2); }
.card-sub { font: var(--text-small); color: var(--muted-foreground); }
.card-footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); align-items: stretch; }
.card.is-highlight { border-color: var(--primary); }
.card.is-dim { opacity: .7; }
.card-tile { min-height: 188px; }
.card-value { font: var(--text-h2); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-value-lg { font: var(--text-kpi); font-variant-numeric: tabular-nums; }

/* KV list (label / value rows) */
.kv { display: flex; justify-content: space-between; gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid var(--border); font: var(--text-body); }
.kv:last-child { border-bottom: 0; }
.kv .k { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); padding-top: 3px; flex: none; }
.kv .v { font-weight: 600; text-align: end; min-width: 0; }
.kv .v-text { font-weight: 400; max-width: 62%; }
[dir="rtl"] .kv .k { letter-spacing: 0; }

/* DataTable */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: auto; background: var(--card); box-shadow: var(--shadow-card); }
.table { width: 100%; border-collapse: collapse; font: var(--text-small); }
.table th { text-align: start; height: 51px; padding: 0 16px; background: var(--secondary); font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; }
.table td { height: 44px; padding: 8px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover td { background: var(--muted); }
.table tr.is-selected td { background: var(--accent); color: var(--accent-foreground); }
.table .num, .table td.num { font-variant-numeric: tabular-nums; }
.table th.text-end, .table td.text-end { text-align: end; }
.table-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.table th[aria-sort] { cursor: pointer; user-select: none; }
.table th[aria-sort]::after { content: "↕"; margin-inline-start: 6px; opacity: .5; }
.table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.table-empty td { text-align: center; color: var(--muted-foreground); height: 64px; }
.table-compact td { height: 36px; padding-block: 4px; }
.card-flush .table-wrap, .card > .table-wrap { border-radius: 0; border-inline: 0; border-bottom: 0; }
.card > .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-control); }

/* Callout */
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: var(--secondary); border: 1px solid var(--border); font: var(--text-small); color: var(--foreground); }
.callout-info { background: var(--accent); color: var(--accent-foreground); border-color: transparent; }
.callout-alert { background: color-mix(in srgb, var(--semantic-alert) 14%, transparent); border-color: color-mix(in srgb, var(--semantic-alert) 40%, transparent); }
.callout-destructive { background: color-mix(in srgb, var(--destructive) 12%, transparent); border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
.callout b, .callout strong { font-weight: 600; }

/* EmptyState */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; color: var(--muted-foreground); font: var(--text-small); }
.empty-title { font: var(--text-h3); color: var(--foreground); }

/* Menu — <details class="menu"> with a .menu-list popover (closes on outside click via ui.js) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 45; min-width: 220px; max-height: 70vh; overflow: auto;
  padding: 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
}
.menu-list-start { inset-inline-end: auto; inset-inline-start: 0; }
.menu-list a, .menu-list button, .menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 6px;
  font: var(--text-body-md); color: var(--foreground); background: none; border: 0; text-align: start; cursor: pointer; text-decoration: none;
}
.menu-list a:hover, .menu-list button:hover, .menu-item:hover { background: var(--secondary); text-decoration: none; }
.menu-list .is-active, .menu-list .active { background: var(--accent); color: var(--accent-foreground); }
.menu-list form { display: contents; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.menu-head { padding: 6px 10px 4px; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.menu-list .sub { font: var(--text-caption); font-weight: 400; color: var(--muted-foreground); }
/* summary styled as a chip: <summary class="chip"> */
.menu > summary.chip::after, .menu > summary.btn::after { content: "▾"; font-size: 10px; color: var(--muted-foreground); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--scrim); }
.modal[hidden] { display: none !important; }
.modal-panel { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-hero); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; overscroll-behavior: contain; }   /* gh-730 (2026-09-30): a tall panel (the plans popup with its tick lists) scrolls inside the viewport instead of overflowing it */
.modal-title { font: var(--text-h2); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
dialog.modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
dialog.modal::backdrop { background: var(--scrim); }
dialog.modal:not([open]) { display: none; }

/* Drawer (right, 680) */
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60; width: min(var(--drawer-w), 100vw); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--card); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform .2s ease; }
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open, [dir="rtl"] .drawer.is-open { transform: none; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 59; background: var(--scrim); border: 0; padding: 0; }
.drawer-backdrop[hidden] { display: none !important; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.drawer-body { flex: 1; overflow: auto; }

/* Toast / Flash */
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--secondary); border: 1px solid var(--border); font: var(--text-small); color: var(--foreground); }
.flash-ok { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: var(--accent); color: var(--accent-foreground); }
.flash-bad, .flash.bad { border-color: color-mix(in srgb, var(--destructive) 45%, transparent); background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive); }
.toast-stack { position: fixed; bottom: var(--space-4); inset-inline-end: var(--space-4); z-index: 70; display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.toast-stack .flash { box-shadow: var(--shadow-pop); background: var(--card); }

/* Keybox (reveal-once secrets) */
.keybox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.keybox code { flex: 1 1 240px; padding: 12px 14px; border-radius: var(--radius-control); background: var(--muted); border: 1px solid var(--border); font: 600 14px/20px var(--font-mono); word-break: break-all; direction: ltr; text-align: start; }

/* Steps strip (DOJO wait) */
.steps { display: flex; gap: var(--space-4); }
.step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted-foreground); font: var(--text-small); text-align: center; }
.step.is-active { border-color: var(--primary); color: var(--foreground); background: var(--secondary); }
.step.is-done { color: var(--muted-foreground); background: var(--accent); border-color: transparent; }
@media (max-width: 767.98px) { .steps { flex-direction: column; gap: var(--space-2); } }

/* Stat chips (DOJO result header) */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chips .chip { flex-direction: column; align-items: center; gap: 2px; min-width: 110px; padding: 8px 16px; background: var(--secondary); }
.chips .chip .k { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.chips .chip .v { font: 700 17px/22px var(--font-sans); }
[dir="rtl"] .chips .chip .k { letter-spacing: 0; }

/* Drop zone */
.drop { border: 1.5px dashed var(--border); border-radius: var(--radius-card); padding: 26px; text-align: center; color: var(--muted-foreground); background: var(--muted); font: var(--text-small); }
.drop.is-over { border-color: var(--primary); }

/* Search results popover (htmx) */
.sr-wrap { position: relative; }
.sr-list { position: absolute; z-index: 20; inset-inline: 0; top: 100%; margin-top: 4px; border-radius: var(--radius-control); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-pop); overflow: hidden; }
.sr-item { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; cursor: pointer; font: var(--text-small); }
.sr-item:hover { background: var(--secondary); }
.sr-item b { min-width: 150px; text-align: start; }
.sr-item span { color: var(--muted-foreground); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item em { color: var(--muted-foreground); font-style: normal; font: var(--text-caption); }

/* Price list (billing) */
.price { font: 700 26px/32px var(--font-sans); font-variant-numeric: tabular-nums; }
.price small { font: var(--text-caption); font-weight: 500; color: var(--muted-foreground); }

/* Small helpers used by the templates */
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── gh-638 (UI system U8): two-level nav + the language selector ─────────────────────────
   <details class="nav-group" open> = one level-1 group: the summary is the label row (11px
   uppercase + chevron), the children are NavItems. Collapsed = the label only; the current
   app's group ships open. Appended, nothing above renamed. */
.nav-group { display: flex; flex-direction: column; gap: var(--space-1); padding: 0; }
.nav-group + .nav-group { margin-top: var(--space-2); }
.nav-group > summary {
  display: flex; align-items: center; gap: 8px; min-height: 28px; padding-inline: 12px; border-radius: var(--radius-control);
  font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground);
  list-style: none; cursor: pointer; user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: var(--foreground); background: var(--secondary); }
.nav-group > summary .nav-icon { width: 14px; height: 14px; }
.nav-group > summary .nav-icon svg { width: 14px; height: 14px; }
.nav-group-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-chev { margin-inline-start: auto; width: 7px; height: 7px; flex: none; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.nav-group[open] > summary .nav-group-chev { transform: translateY(1px) rotate(225deg); }
[dir="rtl"] .nav-group > summary { letter-spacing: 0; }
@media (max-width: 1023.98px) {
  .shell:not(.is-expanded) .nav-group-text, .shell:not(.is-expanded) .nav-group-chev { display: none; }
  .shell:not(.is-expanded) .nav-group > summary { justify-content: center; padding-inline: 0; }
}
.shell.is-collapsed .nav-group-text, .shell.is-collapsed .nav-group-chev { display: none; }
.shell.is-collapsed .nav-group > summary { justify-content: center; padding-inline: 0; }
@media (max-width: 767.98px) {
  .shell .nav-group-text { display: block; }
  .shell .nav-group-chev { display: block; }
  .shell .nav-group > summary { justify-content: flex-start; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .nav-group-chev { transition: none; } }

/* Language selector — <details class="menu lang" data-lang-select> beside the ThemeToggle.
   Rows carry their own dir; ui.js writes the shared `torii_lang` cookie on click. */
.menu.lang > summary { min-height: 28px; }
.menu.lang .menu-list { min-width: 180px; }
.menu.lang .menu-list a { justify-content: flex-start; }
.menu.lang .menu-list a .tick { margin-inline-start: auto; font-size: 11px; }

/* ── gh-667 (2026-09-26): the brand lockup in every service's brand row ─────────────────────
   The inline SVG = the CB mark + the live-text `ClawBack` wordmark (Amifer Black via the Typekit
   kit `coh4evc`, Inter while it loads), 40 px tall, stacked over the hall label. The old `.brand-mark`
   tile stays defined for anything else that still uses it. Favicons: /static/ui/brand/. */
.brand-row-lockup { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; }
.brand-lockup { display: block; height: 40px; width: auto; color: var(--primary); }
.brand-lockup-text { font-family: "amifer", "Inter", var(--font-sans); font-weight: 900; }
.brand-row-lockup .brand-hall { padding-inline-start: 2px; }
.shell.is-collapsed .brand-lockup, .shell:not(.is-expanded) .brand-lockup { height: 32px; }
@media (max-width: 1023.98px) { .shell:not(.is-expanded) .brand-row-lockup .brand-hall { display: none; } }
@media (max-width: 767.98px) { .shell .brand-row-lockup .brand-hall { display: inline; } .shell .brand-lockup { height: 40px; } }

/* gh-681: plan tiles — equal height, buttons pinned to the same line, terms at the foot */
.plans-grid { align-items: stretch; }
.plan-card { height: 100%; }
.plan-card .card-footer { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: auto; }
.plan-card .card-footer form { display: contents; }
.plan-card .plan-held { padding: 8px 0; }
.plan-card .plan-terms { min-height: 3.6em; }

/* gh-695: support threads */
.thread { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.msg { padding: 10px 14px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--muted); max-width: 80%; }
.msg-staff { align-self: flex-end; background: var(--card); border-color: var(--primary); }
.msg-body { white-space: pre-wrap; margin-top: 4px; }
a.card-tile { color: inherit; text-decoration: none; }
a.card-tile:hover { border-color: var(--primary); }

/* gh-698: the price editor */
.price-table .input.num { text-align: right; font-variant-numeric: tabular-nums; }
.price-table .input.is-derived { background: var(--muted); color: var(--muted-foreground); }
.price-table .input.is-usd { font-weight: 600; }

/* ── Cookie banner (gh-725) — bottom sheet on every host until a choice; gated embeds ─────── */
.cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; padding: 16px; pointer-events: none; }
.cookie-banner[hidden] { display: none; }
.cookie-card { pointer-events: auto; margin: 0 auto; max-width: 960px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--radius-lg, 12px); background: var(--card); color: var(--card-foreground, var(--foreground)); border: 1px solid var(--border); box-shadow: var(--shadow-pop, 0 12px 40px rgba(0,0,0,.35)); }
.cookie-text { font: var(--text-small); flex: 1 1 420px; }
.cookie-text strong { color: var(--foreground); }
.cookie-text .link { color: var(--primary); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex: none; }
[data-consent-gate].is-gated > :not([data-consent-placeholder]) { display: none; }
[data-consent-gate] [data-consent-placeholder] { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius-lg, 12px); background: var(--secondary); color: var(--secondary-foreground); font: var(--text-small); }

/* ── the providers' branded sign-in buttons (TORII door; operator 2026-09-30) ─────────────────────────────────────
   Google: developers.google.com/identity/branding-guidelines — Roboto Medium 14px, 40px tall, 12px padding, the 20px
   four-colour G, light: #FFF on #747775 border, dark: #131314 on #8E918F border, text #1F1F1F / #E3E3E3, no shadow.
   Apple: developer.apple.com/design/human-interface-guidelines/sign-in-with-apple — black button with the white logo on
   light surfaces, white with the black logo on dark ones, system font. */
.providers { display: flex; flex-direction: column; gap: 10px; }
.btn-google, .btn-apple { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 40px; padding: 0 12px;
  border-radius: 4px; font: 500 14px/20px Roboto, var(--font-sans); letter-spacing: 0.25px; text-decoration: none; cursor: pointer; transition: background .15s; }
.btn-google { background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; }
.btn-google:hover { background: #F2F2F2; } .btn-google:active { background: #E6E6E6; }
.btn-google .pv-logo { flex: 0 0 20px; }
.btn-apple { background: #000000; color: #FFFFFF; border: 1px solid #000000; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", var(--font-sans); }
.btn-apple:hover { background: #1a1a1a; }
:root[data-theme="dark"] .btn-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
:root[data-theme="dark"] .btn-google:hover { background: #1f1f20; }
:root[data-theme="dark"] .btn-apple { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
:root[data-theme="dark"] .btn-apple:hover { background: #ebebeb; }

/* ── gh-776: level 3 — a SHOGUN workspace's pages under its row (Stock · Crypto). The same NavItem, indented one step
   (the 18px icon + 10px gap of the row above); the icon rail (<1024 / .is-collapsed) keeps its centred icon-only rows
   because its selectors outrank this one, and the phone drawer (<768) keeps the indent. */
.nav-item.nav-sub { padding-inline-start: 40px; }

/* ── gh-776 (operator 2026-10-04, "when SHOGUN is selected the logo on top of the menu disappears"): the sidebar is a
   100vh flex column with overflow-y:auto, and `.brand-row-lockup` sets min-height:0 — so once the open groups overflow
   the column, flex-shrink squeezed the brand row to 0px (the lockup vanished, the hall label overlapped the toggle).
   No sidebar child ever shrinks; the column scrolls instead, and the brand row stays pinned at its top while the
   nav scrolls under it (every hall, SHOGUN included). */
.sidebar > * { flex-shrink: 0; }
.sidebar > .brand-row {
  /* the sticky inset counts from the sidebar's padding edge, so top = minus its top padding pins it flush */
  position: sticky; top: calc(-1 * var(--space-5)); z-index: 2; background: var(--card);
  margin-top: calc(-1 * var(--space-5)); padding-top: var(--space-5);
  margin-bottom: calc(-1 * var(--space-2)); padding-bottom: var(--space-2);
}

/* gh-776: the phone drawer (<768) is the full sidebar — labels, group headers, the org toggle. The icon-rail rules
   (`.shell:not(.is-expanded) …`, `.shell.is-collapsed …`, 0-3-0) outranked the drawer's `.shell …` (0-2-0), so the
   drawer opened as a bare column of icons with no words. Same selectors, declared later, so the drawer wins. */
@media (max-width: 767.98px) {
  :is(.shell:not(.is-expanded), .shell.is-collapsed) :is(.sidebar-label, .nav-text, .workspace-name, .nav-group-text, .nav-group-chev) { display: block; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) :is(.brand-text, .user-text) { display: flex; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) :is(.nav-badge, .nav-ext, .workspace-meta) { display: initial; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) .sidebar-orgs { display: flex; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) :is(.nav-item, .nav-group > summary, .workspace > summary, .workspace-static) { justify-content: flex-start; padding-inline: 12px; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) .nav-item.nav-sub { padding-inline-start: 40px; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) :is(.user-chip > summary, .user-chip-static) { justify-content: flex-start; padding-inline: 10px; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) .brand-lockup { height: 40px; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed) .brand-row-lockup .brand-hall { display: inline; }
}

/* ── gh-821 TAIKO N1: the bell (left of the language selector), its dropdown and the pop-ups ─────────────────────────
   Figma: TAIKO page, frames named gh-821 (UI/Bell · UI/NotificationItem · UI/NotificationsMenu · UI/Toast · Outlook).
   Logical properties only, so Arabic / Farsi mirror (the pop-ups sit at the inline END: bottom left in RTL, D6). */
.taiko-mount { display: inline-flex; flex: none; }
.taiko-mount[hidden] { display: none; }
.taiko-bell > .taiko-btn {
  position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control);
  background: var(--secondary); border: 1px solid var(--border); color: var(--foreground);
}
.taiko-bell > .taiko-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.taiko-bell[open] > .taiko-btn { background: var(--accent); border-color: var(--ring); }
.taiko-bell > .taiko-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.taiko-badge {
  position: absolute; top: -7px; inset-inline-end: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--primary); color: var(--primary-foreground);
  font: 600 10px/1 var(--font-sans); box-shadow: 0 0 0 2px var(--background);
}
.taiko-badge[hidden] { display: none; }
.taiko-menu.menu-list { width: 380px; max-width: calc(100vw - 32px); max-height: 480px; padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 10px; }
.taiko-head, .taiko-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.taiko-head { border-bottom: 1px solid var(--border); }
.taiko-foot { border-top: 1px solid var(--border); padding-block: 10px; flex-wrap: wrap; row-gap: 6px; }   /* gh-832: wraps for two switches */
.taiko-title { font: 600 14px/20px var(--font-sans); color: var(--foreground); }
.taiko-new[hidden] { display: none; }
.taiko-spacer { flex: 1 1 auto; }
.menu-list .taiko-link, .taiko-link {
  display: inline; width: auto; padding: 0; background: none; border: 0; color: var(--link); font: 500 13px/18px var(--font-sans);
  cursor: pointer; text-decoration: none;
}
.menu-list .taiko-link:hover, .taiko-link:hover { background: none; text-decoration: underline; }
.taiko-link:disabled { color: var(--muted-foreground); cursor: default; text-decoration: none; }
.taiko-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.taiko-list[hidden] { display: none; }
.taiko-item { position: relative; border-top: 1px solid var(--border); }
.taiko-item:first-child { border-top: 0; }
.taiko-item.is-unread { background: var(--accent); }
.taiko-item.is-withdrawn { opacity: .55; }
.menu-list .taiko-row, .taiko-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 0; color: var(--foreground);
  text-decoration: none; justify-content: flex-start;
}
.menu-list .taiko-row:hover { background: color-mix(in srgb, var(--secondary) 70%, transparent); text-decoration: none; }
.taiko-av { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--muted); }
.taiko-av img { width: 32px; height: 32px; display: block; }
.taiko-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.taiko-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font: var(--text-caption); color: var(--muted-foreground); }
.taiko-sym { font: 600 13px/18px var(--font-sans); color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taiko-tf { white-space: nowrap; }
.taiko-bias { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.taiko-conf { color: var(--foreground); font-weight: 400; }
.taiko-lock { display: inline-flex; color: var(--muted-foreground); }
.taiko-lock svg, .taiko-lv svg, .taiko-thumb svg, .taiko-close svg, .taiko-mark svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.taiko-time { white-space: nowrap; }
.taiko-hl { font: var(--text-small); color: var(--card-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taiko-item.is-outcome .taiko-hl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* an update reads in full: two lines */
.taiko-lv { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-sans); color: var(--muted-foreground); }
.taiko-lv[hidden] { display: none; }
.taiko-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.taiko-item.is-unread .taiko-dot { background: var(--primary); }
.menu-list .taiko-mark {
  position: absolute; inset-inline-end: 36px; top: 10px; width: 26px; height: 26px; padding: 0; justify-content: center; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); opacity: 0;
}
.taiko-item:hover .taiko-mark, .taiko-mark:focus-visible { opacity: 1; }
.taiko-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 24px 28px; text-align: center; }
.taiko-empty[hidden] { display: none; }
.taiko-empty-art { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 4px; }
.taiko-empty-title { font: 600 15px/20px var(--font-sans); color: var(--foreground); }
.taiko-empty-body { font: var(--text-small); color: var(--muted-foreground); max-width: 280px; }
.taiko-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: var(--text-small); color: var(--foreground); }
.taiko-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.taiko-track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); flex: none; transition: background .15s ease; }
.taiko-track::after { content: ""; position: absolute; top: 1px; inset-inline-start: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted-foreground); transition: inset-inline-start .15s ease, background .15s ease; }
.taiko-switch input:checked + .taiko-track { background: var(--primary); border-color: var(--primary); }
.taiko-switch input:checked + .taiko-track::after { inset-inline-start: 15px; background: var(--primary-foreground); }
.taiko-switch input:focus-visible + .taiko-track { outline: 2px solid var(--ring); outline-offset: 2px; }
/* gh-832: Pop-ups · Sound side by side (Figma: 8 + 8 between the pairs); Sound depends on Pop-ups, so it dims (disabled,
   keeps its value) while pop-ups are off */
.taiko-switch + .taiko-switch { margin-inline-start: 8px; }
.taiko-switch.is-disabled { cursor: default; color: var(--muted-foreground); }
.taiko-switch.is-disabled .taiko-track { opacity: .5; }

.taiko-toasts {
  position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  width: 400px; max-width: calc(100vw - 32px); pointer-events: none;
}
.taiko-toasts > * { pointer-events: auto; }
.taiko-more { order: -1; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--foreground); font: 500 12px/16px var(--font-sans); cursor: pointer; box-shadow: var(--shadow-pop); }
.taiko-more[hidden] { display: none; }
.taiko-toast {
  position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-pop); color: var(--foreground); animation: taiko-in .2s ease-out;
}
.taiko-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
@keyframes taiko-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.taiko-toast-body { display: flex; gap: 12px; padding: 14px 14px 10px; }
.taiko-thumb { flex: none; width: 96px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--background); display: grid; place-items: center; color: var(--muted-foreground); }
.taiko-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.taiko-thumb.is-locked { background: var(--muted); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font: 500 9px/11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.taiko-toast-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.taiko-eyebrow { display: flex; align-items: center; gap: 6px; font: 500 10px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.taiko-close { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 6px; background: none; border: 0; color: var(--muted-foreground); cursor: pointer; }
.taiko-close:hover { color: var(--foreground); background: var(--secondary); }
.taiko-close:focus-visible { outline: 2px solid var(--ring); }
.taiko-toast-title .taiko-sym { font-size: 14px; }
.taiko-toast-hl { font: var(--text-small); color: var(--card-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taiko-toast-hl[hidden] { display: none; }
.taiko-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.taiko-timer { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%; background: var(--primary); transform-origin: left center;
  animation: taiko-timer linear forwards; animation-duration: 8s; }
[dir="rtl"] .taiko-timer { transform-origin: right center; }
.taiko-toast.is-paused .taiko-timer { animation-play-state: paused; }
@keyframes taiko-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 767.98px) {
  .taiko-menu.menu-list { position: fixed; inset-inline: 16px; top: 64px; width: auto; max-width: none; max-height: calc(100vh - 96px); }
  .taiko-toasts { inset-inline: 16px; bottom: 16px; width: auto; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .taiko-toast, .taiko-toast.is-leaving { animation: none; transition: none; transform: none; }
  .taiko-timer { animation: none; display: none; }
  .taiko-track, .taiko-track::after { transition: none; }
}

/* ── gh-842: the hall's art in the brand row (docs/design/ui-system.md § Service avatars on pages) ───────────────────
   `ClawBack` on top, `[emblem] HALL` under it; the hall's SENSEI avatar at the right end of the same row — on the auth
   card after the page's badge (.brand-end), in the sidebar inside the row's link (.has-avatar). Markup from
   torii_client.nav (brand_row · hall_avatar). Avatar 84 px on the card (72 below 768) — operator 2026-10-08: 150 % of the
   approved 56 / 48 on pages — and 48 px in the sidebar's menu header (100 %, the same day); emblem 20 px. The art never dims; logical properties, so RTL mirrors. */
.brand-hall-line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.brand-hall-line > .brand-hall { padding-inline-start: 0; }
.hall-emblem { display: block; flex: none; width: 20px; height: 20px; border-radius: 5px; }
.hall-avatar { display: block; flex: none; border-radius: 50%; object-fit: cover; outline: 1px solid var(--border); outline-offset: -1px; }
.hall-avatar-card { width: 84px; height: 84px; }
.hall-avatar-sidebar { width: 48px; height: 48px; }
.brand-end { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.auth-brand > .brand-row { min-width: 0; }
.auth-brand .brand-lockup, .brand-row-lockup.has-avatar .brand-lockup { max-width: 100%; }
/* the lockup is a logo, never mirrored: in an RTL page its SVG <text> inherited direction:rtl, anchored `ClawBack` at
   its right edge and drew it over the mark (Arabic · Farsi) */
.brand-lockup { direction: ltr; }
.brand-row-lockup.has-avatar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: 4px;
  align-items: center; justify-items: start;
}
.brand-row-lockup.has-avatar > .hall-avatar { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 767.98px) { .hall-avatar-card { width: 72px; height: 72px; } }
/* the icon rail (< 1024 unless expanded, or collapsed at any width): the hall line + the avatar hide with the hall name;
   the phone drawer (< 768) is the full sidebar again, so the full row shows when it opens */
.shell.is-collapsed .brand-row-lockup :is(.brand-hall-line, .hall-avatar) { display: none; }
@media (max-width: 1023.98px) { .shell:not(.is-expanded) .brand-row-lockup :is(.brand-hall-line, .hall-avatar) { display: none; } }
@media (max-width: 767.98px) {
  :is(.shell:not(.is-expanded), .shell.is-collapsed, .shell) .brand-row-lockup .brand-hall-line { display: inline-flex; }
  :is(.shell:not(.is-expanded), .shell.is-collapsed, .shell) .brand-row-lockup .hall-avatar { display: block; }
}

/* ── gh-852: the Help button (`?`, left of TAIKO's bell — left of the language selector where a page has no bell) and its
   panel. Markup: torii_client/help.py · behaviour: ui.js § 10 · Figma UI/HelpButton + UI/HelpPanel (frames gh-852) ·
   docs/design/ui-system.md § Contextual help. The button is the bell's box; logical properties only, so ar/fa mirror. */
.help { flex: none; }
.help > .help-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control);
  background: var(--secondary); border: 1px solid var(--border); color: var(--foreground);
}
.help > .help-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.help > .help-btn:hover { background: var(--muted); }
.help[open] > .help-btn { background: var(--accent); border-color: var(--ring); }
.help > .help-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.help-panel.menu-list { width: 360px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); padding: 0; overflow: auto;
  overscroll-behavior: contain; display: flex; flex-direction: column; border-radius: 10px; text-align: start; white-space: normal; }
.help-head { display: flex; align-items: flex-start; gap: 12px; padding-block-start: 16px; padding-inline: 16px 10px; }
.help-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.help-where { margin: 0; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); }
.help-panel[dir="rtl"] .help-where { letter-spacing: 0; }
.help-title { margin: 0; font: var(--text-h3); color: var(--foreground); overflow-wrap: anywhere; }
.help-title:focus, .help-title:focus-visible { outline: none; }   /* focused on open so a screen reader starts here; not a control */
.menu-list .help-x { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 6px;
  background: none; border: 0; color: var(--muted-foreground); cursor: pointer; }
.menu-list .help-x:hover { background: var(--secondary); color: var(--foreground); }
.menu-list .help-x:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.help-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.help-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 16px; }
.help-body p { margin: 0; font: var(--text-body); color: var(--card-foreground); }
.help-foot { padding: 12px 16px; border-top: 1px solid var(--border); }
.menu-list a.help-guide {
  display: inline-flex; width: auto; justify-content: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--secondary); color: var(--secondary-foreground); font: 500 13px/18px var(--font-sans); white-space: normal;
}
.menu-list a.help-guide:hover { background: var(--muted); }
.menu-list a.help-guide:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (max-width: 767.98px) {
  /* full width minus the 16 px gutters, just BELOW the `?` (ui.js § 10 sets --help-top from the button's rectangle) */
  .help-panel.menu-list { position: fixed; inset-inline: 16px; top: var(--help-top, 64px); width: auto; max-width: none;
    max-height: calc(100vh - var(--help-top, 64px) - 16px); }
  .menu-list .help-x { width: 44px; height: 44px; margin-block-start: -8px; margin-inline-end: -6px; }
}

/* ── gh-866: guide + legal prose and the guide's service art — moved here from the site's site.css so every surface that
   shows the guide shares ONE rule set (since gh-873 the Farsi edition is the site's own /fa/docs/ pages too). Unchanged
   rules; logical properties, so RTL mirrors. docs/design/site.md § 8d ─────────────────────────────────────────────────── */
.prose { font: var(--text-body); }
.prose h2 { font: var(--text-h3); margin: 0 0 var(--space-3); }
.prose h3 { font: var(--text-body-md); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.prose p { margin: 0 0 var(--space-3); }
.prose ul, .prose ol { margin: 0 0 var(--space-3); padding-inline-start: 22px; }
.prose li { margin-bottom: 6px; }
.prose > :last-child, .prose li:last-child, .prose blockquote > p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.prose em { color: var(--muted-foreground); font-style: normal; }
.prose blockquote { margin: 0 0 var(--space-3); padding: 14px 16px; border-radius: 10px; background: var(--accent); color: var(--accent-foreground); border-inline-start: 3px solid var(--primary); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); font: var(--text-small); }
.prose th, .prose td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-foreground); background: var(--secondary); }
.prose code { padding: 1px 6px; border-radius: 4px; background: var(--muted); font-size: 13px; }
.prose a { overflow-wrap: anywhere; }

/* ── The guide's service art (gh-863): the SENSEI avatar (60 px, UI/HallAvatar: circle + 1 px border ring, the art never
   dimmed) before a title, the emblem (no SENSEI, UI/HallEmblem: 25 % radius) right after it, one line-height tall. ── */
.avatar-guide { width: 60px; height: 60px; background: var(--muted); box-shadow: 0 0 0 1px var(--border); }
.guide-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.prose .guide-head h2 { margin: 0; min-width: 0; }
.guide-emblem { display: inline-block; width: 1.3em; height: 1.3em; width: 1lh; height: 1lh; margin-inline-start: 8px; vertical-align: top; border-radius: 25%; }
.guide-nowrap { white-space: nowrap; }             /* the title's last word + its emblem never part */
.page-header .avatar-guide { margin-inline-end: var(--space-2); }
.page-title .guide-emblem { margin-inline-start: 10px; }