/* prtner. tenant admin — Inbox
   Tokens verbatim from prtnerai/docs/design/FLAI_DS_REFERENCE.md (source: web/index.html landing) */

@font-face{font-family:'Chalet';font-weight:400;font-style:normal;
  src:url('../fonts/Chalet-LondonNineteenSixty.ttf') format('truetype');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;
  src:url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;
  src:url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:600;font-style:normal;
  src:url('../fonts/JetBrainsMono-SemiBold.ttf') format('truetype');font-display:swap}

:root{
  /* surfaces — warm near-black (FLAI dark) */
  --ink-900:#0A0908; --ink-800:#0E0D0C; --ink-700:#141312; --ink-600:#1C1A18; --ink-500:#26231F;
  --line:rgba(240,238,230,.10); --line-strong:rgba(240,238,230,.18);
  /* foreground — warm off-white */
  --fg-1:#F0EEE6; --fg-2:rgba(240,238,230,.75); --fg-3:rgba(240,238,230,.55); --fg-4:rgba(240,238,230,.32);
  /* accent — RIG warm-red (the single working accent) */
  --accent:#ED462D; --accent-hover:#F2583F; --accent-press:#D63A24;
  --accent-soft:rgba(237,70,45,.14); --accent-glow:rgba(237,70,45,.35); --accent-bright:#FF4D24;
  /* ink pair for text ON accent fills — cream on #ED462D is 3.28:1, fails AA
     for the 12px mono CTA labels; warm near-black passes at 5.1:1 */
  --accent-ink:#1A0A06;
  --signal:#D6FF3D;
  --font-display:'Chalet','Onest',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --font-sans:'Onest',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0.66 0.66 0.66 0 -0.16  0.66 0.66 0.66 0 -0.16  0.66 0.66 0.66 0 -0.16  0 0 0 0 1'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--ink-900);color:var(--fg-2);font-family:var(--font-sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--signal);color:var(--ink-900)}
a{color:inherit}
[hidden]{display:none !important}

/* ---------- Focus (keyboard) ----------
   One visible ring for every interactive — the DS previously had zero
   :focus-visible rules. Chamfered .btn gets an INSET ring because clip-path
   clips a normal outline. transition:none — focus rings appear instantly. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus-visible{outline:none;transition:none;box-shadow:inset 0 0 0 2px var(--fg-1)}
.btn-primary:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent);outline-offset:2px}

.grain{position:fixed;inset:0;pointer-events:none;background-image:var(--grain);background-size:240px 240px;opacity:.10;mix-blend-mode:overlay;z-index:100}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px;width:100%}

/* ---------- Chamfer buttons (DS §3, verbatim) ---------- */
.btn{position:relative;font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.10em;padding:15px 26px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;user-select:none;
  transition:background 220ms var(--ease),color 220ms var(--ease),transform 160ms var(--ease),box-shadow 240ms var(--ease);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))}
.btn .arrow{display:inline-block;transition:transform 240ms var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 22px var(--accent-glow)}
.btn-primary:active{background:var(--accent-press);transform:translateY(0)}
.btn-secondary{background:transparent;color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--line-strong);clip-path:none}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn .spinner{border-top-color:currentColor}
.btn-block{width:100%;justify-content:center}

/* ---------- Wordmark ---------- */
.wordmark{font-family:var(--font-mono);font-weight:500;font-size:21px;letter-spacing:.02em;color:var(--fg-1);user-select:none}
.wordmark-dot{color:var(--accent)}

/* ---------- Login ---------- */
.login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:min(400px,100%);background:var(--ink-800);border:1px solid var(--line);padding:48px 40px 40px}
.login-card .wordmark{margin-bottom:36px}
.field{display:block;margin-bottom:20px}
.field-label{display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);margin-bottom:8px}
.field input{width:100%;background:var(--ink-900);border:1px solid var(--line);color:var(--fg-1);
  font-family:var(--font-sans);font-size:14px;line-height:1.4;padding:12px 14px;
  transition:border-color 220ms var(--ease)}
.field input:focus{border-color:var(--line-strong)}
#login-form .btn{margin-top:8px}
.login-error{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--accent);font-size:13px}

/* ---------- Google auth (login alt path) ---------- */
a.btn{text-decoration:none}
.auth-alt{margin-top:24px}
.auth-divider{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-divider span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-4)}
.google-glyph{flex:none;color:var(--fg-1)}

/* ---------- Onboarding (name your workspace) ---------- */
.onboarding-title{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;
  letter-spacing:-.02em;color:var(--fg-1);margin-bottom:10px}
.onboarding-sub{color:var(--fg-3);font-size:13px;margin-bottom:28px}

/* ---------- Header ---------- */
.app-header{position:sticky;top:0;z-index:20;height:64px;backdrop-filter:blur(10px);
  background:rgba(10,9,8,.66);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.logout-link{background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);transition:color 220ms var(--ease)}
.logout-link:hover{color:var(--accent)}
.connect-link{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);text-decoration:none;transition:color 220ms var(--ease)}
.connect-link:hover{color:var(--accent)}
/* Language toggle (DS lang-toggle: mono, active inverted) */
.lang-toggle{display:flex;box-shadow:inset 0 0 0 1px var(--line-strong)}
.lang-opt{background:none;border:none;cursor:pointer;padding:4px 9px;position:relative;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);transition:color 160ms var(--ease),background 160ms var(--ease)}
/* invisible hit-area extension — visual stays 26px, tap target grows to ~48px
   vertically (touch-target audit). Horizontal bleed kept tiny: EN|RU are adjacent. */
.lang-opt::before{content:'';position:absolute;inset:-12px -2px}
.lang-opt+.lang-opt{box-shadow:inset 1px 0 0 var(--line-strong)}
.lang-opt:hover{color:var(--fg-1)}
.lang-opt.is-active{background:var(--fg-1);color:var(--ink-900)}

/* ---------- Context switcher (unified-console ux-switcher-spec §2.2-2.3, §3) ----------
   Token mapping vs the spec skeleton: --panel→--ink-800, --panel-hover→--ink-700,
   --hairline→--line/--line-strong, --muted→--fg-3, --mono→--font-mono.
   Corners stay square — the FLAI DS has no border-radius anywhere. */
a.wordmark{text-decoration:none}
.ctx-slash{font-family:var(--font-mono);font-size:14px;color:var(--fg-4);user-select:none;
  margin:0 -8px} /* pulls wordmark / slash / ctx into one visual unit inside the 18px header gap */
.ctx{position:relative;display:flex;align-items:center;min-width:0}
/* static label (no rights) and switcher name share the old .org-name typography */
.ctx-static,.ctx-switch-name{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-switch{display:flex;align-items:center;gap:6px;background:none;border:0;min-width:0;
  padding:4px 6px;cursor:pointer;transition:background 160ms var(--ease)}
.ctx-switch:hover,.ctx-switch[aria-expanded="true"]{background:var(--ink-700)}
.ctx-switch:hover .ctx-switch-name,.ctx-switch[aria-expanded="true"] .ctx-switch-name{color:var(--fg-1)}
.ctx-switch:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.ctx-switch-caret{opacity:.5;display:inline-flex;color:var(--fg-2);flex:none}
.ctx-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:240px;z-index:60;
  background:var(--ink-800);border:1px solid var(--line-strong);padding:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.45)}
.ctx-menu-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);padding:6px 10px 4px}
.ctx-item{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;width:100%;
  text-align:left;background:none;border:0;padding:8px 10px;min-height:44px;cursor:pointer;
  color:var(--fg-1);font-family:var(--font-sans);font-size:14px;line-height:1.4}
.ctx-item:hover,.ctx-item:focus-visible{background:var(--ink-700);outline:none}
.ctx-item-name{grid-column:1}
.ctx-item-sub{grid-column:1;font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.ctx-item-check{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--accent);
  visibility:hidden;padding-left:12px}
.ctx-item[aria-selected="true"] .ctx-item-check{visibility:visible}
.ctx-sep{height:1px;margin:6px 4px;background:var(--line)}
.ctx-menu-id{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);
  padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:6px;overflow-wrap:anywhere}
/* platform-режим (spec §3, три сигнала): admin.html вешает body.platform-page
   и модификатор .ctx--platform на #ctx — переиспользует этот же файл */
.ctx--platform .ctx-switch-name,
.ctx--platform .ctx-switch:hover .ctx-switch-name,
.ctx--platform .ctx-switch[aria-expanded="true"] .ctx-switch-name{font-family:var(--font-mono);
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.platform-page .app-header{box-shadow:inset 0 2px 0 var(--accent)} /* staff stripe */
/* mobile backdrop for the open menu — exists in DOM on both pages, visible <780px only */
.ctx-scrim{display:none;position:fixed;inset:0;background:rgba(10,9,8,.55);z-index:15}
@media (max-width:780px){
  .ctx-menu{position:fixed;top:72px;left:12px;right:12px;min-width:0} /* header 64px + 8 */
  .ctx-scrim:not([hidden]){display:block}
  .ctx-static,.ctx-switch-name{max-width:96px}
}

/* ---------- Layout ---------- */
.inbox-layout{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:start;padding-top:40px;padding-bottom:80px}
.content-pane{min-width:0}

/* ---------- Account rail (left panel of account tabs) ---------- */
.acct-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:104px}
.acct-tab{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;
  cursor:pointer;text-align:left;padding:9px 12px;color:var(--fg-3);
  transition:color 220ms var(--ease),background 220ms var(--ease)}
.acct-tab:hover{color:var(--fg-1)}
.acct-tab.is-active{color:var(--fg-1);background:var(--ink-700);box-shadow:inset 2px 0 0 var(--accent)}
.acct-dash-label{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;padding:8px 0}
.acct-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink-700);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
  font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--fg-2)}
.acct-tab.is-active .acct-avatar{background:var(--ink-600);color:var(--fg-1)}
.acct-handle{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-plus{flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  font-family:var(--font-mono);font-size:20px;line-height:1}
.acct-add-label{color:var(--fg-3)}
.acct-tab-add:hover .acct-plus{box-shadow:inset 0 0 0 1px var(--accent)}

/* ---------- Status tabs (horizontal row above list) ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
  background:transparent;border:none;cursor:pointer;text-align:left;padding:14px;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);transition:color 220ms var(--ease)}
.tab:hover{color:var(--fg-1)}
.tab.is-active{color:var(--fg-1);box-shadow:inset 0 -2px 0 var(--accent)}
.badge{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.tab.is-active .badge{color:var(--accent)}

/* ---------- Dashboard (hairline-grid cards, DS §4) ---------- */
.dash-loading{display:flex;justify-content:center;padding:56px 0}
.dash-grid{border:1px solid var(--line);display:grid;grid-template-columns:1.55fr 1fr;
  gap:1px;background:var(--line)}
.dash-card{background:var(--ink-900);padding:22px 22px 24px;min-width:0}
.dash-head{display:flex;align-items:center;margin-bottom:20px}
.dash-label{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent)}
.preview-badge{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-4);border:1px solid var(--line);padding:2px 6px;margin-left:10px}
.dash-note{color:var(--fg-3);font-size:12.5px;margin-top:18px}
.dash-empty{color:var(--fg-3);font-size:13px;padding:24px 0}

/* chart — inline SVG; series colors ONLY --accent / --signal / --fg-2 / --fg-3 */
.chart-svg{display:block;width:100%;height:auto}
.chart-grid{stroke:var(--line)}
.chart-axis{fill:var(--fg-4);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em}
.chart-line{fill:none;stroke-width:1.5}
.chart-pt{stroke:none}
.ser0.chart-line{stroke:var(--accent)}
.ser1.chart-line{stroke:var(--signal)}
.ser2.chart-line{stroke:var(--fg-2)}
.ser3.chart-line{stroke:var(--fg-3)}
.ser0.chart-pt{fill:var(--accent)}
.ser1.chart-pt{fill:var(--signal)}
.ser2.chart-pt{fill:var(--fg-2)}
.ser3.chart-pt{fill:var(--fg-3)}
.chart-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.legend-item{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.04em;color:var(--fg-3)}
.legend-dot{flex:none;width:7px;height:7px;border-radius:50%}
.legend-dot.ser0{background:var(--accent)}
.legend-dot.ser1{background:var(--signal)}
.legend-dot.ser2{background:var(--fg-2)}
.legend-dot.ser3{background:var(--fg-3)}

/* DM segments — horizontal bars */
.seg{display:flex;align-items:center;gap:12px}
.seg + .seg{margin-top:14px}
.seg-label{flex:none;width:88px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--fg-3)}
.seg-track{flex:1;height:6px;background:var(--ink-700)}
.seg-fill{height:100%;background:var(--accent)}
.seg-count{flex:none;min-width:26px;text-align:right;font-family:var(--font-mono);font-size:11px;
  color:var(--fg-2);font-variant-numeric:tabular-nums}

/* ---------- "+ add new" pane ---------- */
.add-intro{color:var(--fg-3);font-size:14px;max-width:480px;margin-bottom:24px}

/* ---------- List (hairline grid, DS §4) ---------- */
.list{border:1px solid var(--line);display:flex;flex-direction:column;gap:1px;background:var(--line)}
.list:empty{display:none}
.row{background:var(--ink-900)}
.row.busy{pointer-events:none;opacity:.65}
.row-head{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;
  transition:background 220ms var(--ease)}
.row-head:hover{background:var(--ink-800)}
.dot{flex:none;width:7px;height:7px;border-radius:50%}
.dot-draft{background:var(--accent)}
.dot-escalated{background:var(--signal)}
.dot-sent{background:var(--fg-4)}
.dot-rejected{background:var(--fg-4)}
.author{flex:none;color:var(--fg-1);font-size:14px}
.excerpt{flex:1;min-width:0;color:var(--fg-3);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.rejected .author,.row.rejected .excerpt{text-decoration:line-through;color:var(--fg-4)}
.chip{flex:none;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-4);border:1px solid var(--line);padding:3px 7px}
.age{flex:none;color:var(--fg-3);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---------- Card detail (inline accordion) ---------- */
.row-detail{border-top:1px solid var(--line);padding:22px 18px 24px}
.detail-block + .detail-block{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}
.block-label{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
.comment-author{color:var(--fg-1);font-size:14px;margin-bottom:6px}
.comment-text{color:var(--fg-2);font-size:14px;margin-bottom:10px;white-space:pre-wrap}
.comment-link{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--fg-3);text-decoration:none;transition:color 220ms var(--ease)}
.comment-link:hover{color:var(--accent)}
.media-caption{color:var(--fg-4);font-size:12.5px;margin-top:10px;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.draft-textarea{width:100%;min-height:96px;background:var(--ink-800);border:1px solid var(--line);
  color:var(--fg-1);font-family:var(--font-sans);font-size:14px;line-height:1.6;padding:12px 14px;
  resize:vertical;transition:border-color 220ms var(--ease)}
.draft-textarea:focus{border-color:var(--line-strong)}
.draft-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-4);margin-top:8px}
.readonly-body{color:var(--fg-2);font-size:14px;white-space:pre-wrap}
.row.rejected .readonly-body{color:var(--fg-4)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.escalated-banner{border:1px solid var(--line-strong);border-left:2px solid var(--signal);
  padding:11px 14px;font-size:13px;color:var(--fg-2);margin-bottom:16px}
.reason-row{display:flex;gap:12px;margin-top:14px;align-items:stretch}
.reason-row input{flex:1;min-width:0;background:var(--ink-800);border:1px solid var(--line);
  color:var(--fg-1);font-family:var(--font-sans);font-size:13.5px;padding:10px 14px;
  transition:border-color 220ms var(--ease)}
.reason-row input:focus{border-color:var(--line-strong)}

/* ---------- Spinner (DS §5) ---------- */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(240,238,230,.22);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.list-loading{display:flex;justify-content:center;padding:56px 0}

/* ---------- Empty state ---------- */
.empty{border:1px solid var(--line);padding:72px 32px;text-align:center}
.empty p{color:var(--fg-3);font-size:14px}
.empty .btn{margin-top:22px}

/* ---------- Inbox load-error (honest error state, admin.js showError pattern):
   persistent inline plate + Retry instead of a 3s toast over a blank pane ---------- */
.pane-error{border:1px solid var(--line);border-left:2px solid var(--accent);
  background:var(--ink-800);padding:32px 24px;text-align:center}
.pane-error p{color:var(--fg-2);font-size:14px;margin-bottom:20px}

/* ---------- Gated state (Awaiting Advanced Access, spec §4c.1) ---------- */
.gated{border:1px solid var(--line);padding:64px 32px;text-align:center}
.gated-label{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.gated p{color:var(--fg-3);font-size:14px;max-width:480px;margin:0 auto}

/* ---------- Connect CTA (empty org, spec §4c.3) ---------- */
.connect-cta{border:1px solid var(--line);padding:72px 32px;text-align:center}
.connect-cta h2{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;
  letter-spacing:-.02em;color:var(--fg-1);margin-bottom:12px}
.connect-cta p{color:var(--fg-3);font-size:14px;margin-bottom:28px}

/* ---------- Modal (action errors + connect return, spec §4c.2) ----------
   Native <dialog>.showModal(): Escape, ::backdrop, focus containment and
   focus-return come from the platform — the old div overlay faked aria-modal
   without delivering any of them. */
dialog.modal-card{width:min(440px,calc(100vw - 48px));background:var(--ink-700);
  border:1px solid var(--line);border-left:3px solid var(--accent);color:inherit;
  padding:28px 28px 26px;animation:toast-in 240ms var(--ease)}
dialog.modal-card::backdrop{background:rgba(10,9,8,.72)}
.modal-title{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-1);margin-bottom:12px}
.modal-text{color:var(--fg-2);font-size:14px;line-height:1.6;margin-bottom:24px}

/* ---------- Toasts (bottom-left, ink-700, 3s) ---------- */
.toast-stack{position:fixed;left:24px;bottom:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink-700);border:1px solid var(--line);color:var(--fg-1);font-size:13px;
  padding:12px 16px;max-width:340px;animation:toast-in 240ms var(--ease)}
.toast.error{border-left:2px solid var(--accent)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   Character panel (persona settings) — spec 2026-07-03-persona-settings §6.
   Reuses DS tokens verbatim. Warm-red accent for labels/CTAs, signal-green
   reserved for the "would auto-send" success badge only.
   ========================================================================== */

/* account sub-nav (Inbox | Character) — shown only for a selected client */
.subnav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:24px}
.subtab{flex:none;display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:none;cursor:pointer;padding:14px 16px;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);transition:color 220ms var(--ease)}
.subtab-ico{flex:none;display:block}
.subtab:hover{color:var(--fg-1)}
.subtab.is-active{color:var(--fg-1);box-shadow:inset 0 -2px 0 var(--accent)}

.char-loading{display:flex;justify-content:center;padding:56px 0}
.char-form{display:flex;flex-direction:column;padding-bottom:96px}

/* section wrapper */
.char-section{padding:26px 0}
.char-section + .char-section{border-top:1px solid var(--line)}
.char-section-label{font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.char-section-hint{color:var(--fg-3);font-size:12.5px;margin-bottom:20px;max-width:560px}

/* preset cards */
.preset-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.preset-card{background:var(--ink-900);border:none;cursor:pointer;text-align:left;
  padding:16px 16px 18px;color:var(--fg-2);transition:background 220ms var(--ease);
  display:flex;flex-direction:column;gap:6px}
.preset-card:hover{background:var(--ink-800)}
.preset-card.is-active{background:var(--ink-800);box-shadow:inset 0 0 0 1px var(--accent)}
.preset-name{font-family:var(--font-mono);font-weight:500;font-size:12px;text-transform:uppercase;
  letter-spacing:.10em;color:var(--fg-1)}
.preset-card.is-active .preset-name{color:var(--accent)}
.preset-desc{font-size:12px;line-height:1.5;color:var(--fg-3)}

/* generic labelled field */
.char-field{margin-bottom:20px}
.char-field:last-child{margin-bottom:0}
.char-field-label{display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);margin-bottom:8px}
.char-textarea{width:100%;min-height:80px;background:var(--ink-800);border:1px solid var(--line);
  color:var(--fg-1);font-family:var(--font-sans);font-size:14px;line-height:1.6;padding:12px 14px;
  resize:vertical;transition:border-color 220ms var(--ease)}
.char-textarea:focus{border-color:var(--line-strong)}
.char-select{width:100%;max-width:320px;background:var(--ink-800);border:1px solid var(--line);
  color:var(--fg-1);font-family:var(--font-sans);font-size:14px;padding:11px 14px;
  transition:border-color 220ms var(--ease);appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23F0EEE6' stroke-width='1.4' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.char-select:focus{border-color:var(--line-strong)}
.char-err{color:var(--accent);font-size:12px;margin-top:6px;min-height:0}
.char-err:empty{display:none}

/* chips (emoji policy, banned words) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{background:transparent;border:none;cursor:pointer;font-family:var(--font-mono);
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);
  padding:8px 14px;box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:color 220ms var(--ease),box-shadow 220ms var(--ease),background 220ms var(--ease)}
.chip-btn:hover{color:var(--fg-1)}
.chip-btn.is-active{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.chip-word{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.04em;color:var(--fg-1);padding:7px 10px 7px 12px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.chip-x{background:none;border:none;cursor:pointer;color:var(--fg-4);font-size:14px;line-height:1;padding:0;
  position:relative;transition:color 220ms var(--ease)}
/* touch target: 14px glyph → ~44px invisible hit-area (chip text isn't clickable,
   the leftward bleed is safe; chips sit 8px apart, ±12px horizontal is bounded) */
.chip-x::before{content:'';position:absolute;inset:-15px -12px}
.chip-x:hover{color:var(--accent)}

/* reply-length slider (3 stops) + confidence slider */
.slider{width:100%;max-width:360px;accent-color:var(--accent);cursor:pointer}
.slider-ticks{display:flex;justify-content:space-between;max-width:360px;margin-top:6px}
.slider-tick{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-4)}
.slider-tick.is-active{color:var(--accent)}
.slider-row{display:flex;align-items:center;gap:16px}
.slider-value{font-family:var(--font-mono);font-size:13px;color:var(--fg-1);min-width:48px;
  font-variant-numeric:tabular-nums}

/* editable do / don't lists */
.edit-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.edit-list-item{display:flex;align-items:center;gap:10px;background:var(--ink-800);
  box-shadow:inset 0 0 0 1px var(--line);padding:9px 10px 9px 14px}
.edit-list-text{flex:1;min-width:0;color:var(--fg-1);font-size:13.5px;overflow-wrap:anywhere}
.add-row{display:flex;gap:10px;align-items:stretch;max-width:520px}
.add-input{flex:1;min-width:0;background:var(--ink-800);border:1px solid var(--line);color:var(--fg-1);
  font-family:var(--font-sans);font-size:13.5px;padding:9px 14px;
  transition:border-color 220ms var(--ease)}
.add-input:focus{border-color:var(--line-strong)}
.rules-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}

/* switch (auto-send toggle) */
.switch-row{display:flex;align-items:center;gap:14px}
.switch{position:relative;display:inline-flex;flex:none;width:44px;height:24px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-track{position:absolute;inset:0;background:var(--ink-600);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background 220ms var(--ease),box-shadow 220ms var(--ease)}
.switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--fg-3);
  transition:transform 220ms var(--ease),background 220ms var(--ease)}
.switch input:checked + .switch-track{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.switch input:checked + .switch-track .switch-knob{transform:translateX(20px);background:var(--accent)}
.switch input:disabled{cursor:not-allowed}
.switch.is-disabled{opacity:.5}
.switch-label{font-size:14px;color:var(--fg-1)}
.autosend-warning{border:1px solid var(--line-strong);border-left:2px solid var(--accent);
  padding:12px 14px;font-size:13px;line-height:1.55;color:var(--fg-2);margin-top:16px;max-width:600px}
.autosend-role-hint{color:var(--fg-4);font-size:12.5px;margin-top:12px}
.confidence-field{margin-top:22px}
.confidence-field.is-off{opacity:.45;pointer-events:none}

/* live preview */
.preview-run{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.preview-box{border:1px solid var(--line);background:var(--ink-800);padding:18px;margin-top:18px}
.preview-box-empty{color:var(--fg-4);font-size:13px}
.preview-reply{color:var(--fg-1);font-size:14px;line-height:1.6;white-space:pre-wrap;margin-bottom:16px}
.preview-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
.preview-conf{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3)}
.preview-conf b{color:var(--fg-1);font-weight:500}
.preview-model{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-4);margin-left:auto}

/* sample tabs + per-sample generation limit */
.sample-tabs{margin-bottom:12px}
.preview-limit-hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--fg-4);align-self:center}

/* preview debug drawer */
.preview-debug-toggle{background:none;border:none;cursor:pointer;font-family:var(--font-mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-4);padding:0;
  margin-left:auto;transition:color 220ms var(--ease)}
.preview-model+.preview-debug-toggle{margin-left:0}
.preview-debug-toggle:hover,.preview-debug-toggle.is-open{color:var(--fg-1)}
.preview-debug{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.debug-row{display:flex;gap:12px;padding:3px 0}
.debug-key{flex:none;width:180px;color:var(--fg-4)}
.debug-val{color:var(--fg-2);word-break:break-word}
.debug-row-factors{align-items:flex-start}
.debug-factor{color:var(--fg-2);padding:1px 0}
.debug-raw-label{width:auto;margin-top:12px;margin-bottom:6px}
.debug-pre{overflow-x:auto;font-family:var(--font-mono);font-size:11px;line-height:1.5;
  color:var(--fg-2);background:var(--ink-900);border:1px solid var(--line);padding:12px;margin:0}
.badge-auto{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.10em;
  padding:4px 9px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--fg-3)}
.badge-auto.is-on{color:var(--ink-900);background:var(--signal);box-shadow:none}

/* sticky save bar */
.save-bar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:16px;
  margin-top:8px;padding:16px 0;background:linear-gradient(to top,var(--ink-900) 70%,transparent);
  border-top:1px solid var(--line)}
.save-meta{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-4)}
.save-bar .btn{margin-left:auto}

/* ==========================================================================
   Settings panel (connection lifecycle) — spec 2026-07-03-architect-agent-settings §4.
   DS tokens verbatim: ink surfaces, hairline var(--line) borders, mono for
   statuses/dates. Danger zone gets a reddish hairline (accent at low alpha).
   ========================================================================== */

.settings-loading{display:flex;justify-content:center;padding:56px 0}
.settings-form{display:flex;flex-direction:column;padding-bottom:40px}

/* connection card */
.conn-card{border:1px solid var(--line);background:var(--ink-800);padding:18px}
.conn-status-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.conn-status{font-family:var(--font-mono);font-weight:500;font-size:12px;text-transform:uppercase;
  letter-spacing:.10em;color:var(--fg-1)}
.conn-handle{margin-left:auto;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn-meta{display:flex;flex-direction:column;gap:7px}
.conn-meta-row{display:flex;gap:14px;align-items:baseline}
.conn-meta-label{flex:none;min-width:132px;font-family:var(--font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.10em;color:var(--fg-4)}
.conn-meta-value{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;
  color:var(--fg-2);font-variant-numeric:tabular-nums}
.conn-poll-error{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  color:var(--accent);margin-top:12px;overflow-wrap:anywhere}
.conn-actions{margin-top:18px}

/* status dots — inbox .dot base reused, connection palette:
   healthy = signal (lime, like escalated), needs action = accent, dead = fg-4 */
.dot-conn-connected{background:var(--signal)}
.dot-conn-expiring_soon,.dot-conn-expired{background:var(--accent)}
.dot-conn-disconnected,.dot-conn-demo{background:var(--fg-4)}

/* demo plate (replaces connection card on demo clients) */
.settings-demo{border:1px solid var(--line);background:var(--ink-800);padding:20px 22px}
.settings-demo-tag{display:inline-block;font-family:var(--font-mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);
  border:1px solid var(--line-strong);padding:3px 8px;margin-bottom:12px}
.settings-demo-note{color:var(--fg-3);font-size:13.5px;max-width:520px}

/* preview escalation state — signal (lime) family, distinct from accent-red actions */
.preview-escalated{display:flex;flex-direction:column;gap:8px;padding:4px 0 8px}
.preview-escalated-badge{align-self:flex-start;font-family:var(--font-mono);font-size:10px;
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--signal);
  border:1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  background:color-mix(in srgb, var(--signal) 8%, transparent);padding:4px 10px}
.preview-escalated-note{color:var(--fg-3);font-size:13.5px;max-width:560px}

/* settings load-error (endpoint down / network) — honest inline state, not a blank pane */
.settings-error{font-family:var(--font-mono);font-size:12px;color:var(--fg-3);
  border:1px solid var(--line);background:var(--ink-800);padding:16px 18px}

/* escalation channel (read-only) */
.esc-row{display:flex;align-items:center;gap:10px}
.esc-text{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fg-2)}

/* danger zone — reddish hairline, ink surface. Accent alphas derive from the
   token (rebrand-safe), same discipline as --accent-soft/--accent-glow. */
.danger-zone{border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background:var(--ink-800);padding:18px}
.danger-warning{color:var(--fg-3);font-size:13px;line-height:1.6;margin-bottom:16px;max-width:620px}
.btn-danger{background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);clip-path:none}
.btn-danger:hover{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)}
.unlink-confirm{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px solid color-mix(in srgb, var(--accent) 18%, transparent)}
.unlink-target{flex:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fg-1)}
.unlink-confirm input{flex:1;min-width:180px;background:var(--ink-900);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);color:var(--fg-1);
  font-family:var(--font-mono);font-size:13px;padding:10px 14px;
  transition:border-color 220ms var(--ease)}
.unlink-confirm input:focus{border-color:var(--accent)}

/* ==========================================================================
   Threads MVP (uiux spec §A.1) — platform source glyphs, per-platform connect
   chooser, Threads 500-char counter. One DS: the glyph marks the source,
   no platform color-coding of cards. Tokens verbatim.
   ========================================================================== */

/* source glyph — IG camera outline (SVG) / Threads "@" (mono) */
.pglyph{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--fg-4)}
.pglyph-svg{display:block;width:100%;height:100%}
.pglyph-threads{font-family:var(--font-mono);font-weight:600;line-height:1}

/* collapsed inbox row: 12px source glyph left of @author (dot = status, glyph = source) */
.pglyph-row{width:12px;height:12px;font-size:11px}

/* rail avatar: corner platform badge (~10px glyph on the avatar edge) */
.acct-avatar{position:relative}
.pglyph-avatar{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--ink-900);box-shadow:0 0 0 1px var(--line);padding:2.5px;font-size:9px;color:var(--fg-3)}
.pglyph-avatar.pglyph-threads{padding:0}
.acct-tab.is-active .pglyph-avatar{color:var(--fg-1)}

/* Threads reply-length counter — mono 10px fg-4, warns (accent) from 480/500 */
.char-counter{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-4);
  margin-top:6px;text-align:right;font-variant-numeric:tabular-nums}
.char-counter.is-warn{color:var(--accent)}
.char-counter.is-over{color:var(--accent);font-weight:600}

/* "+ add" platform chooser — hairline grid of per-platform connect CTAs */
.connect-choice{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.connect-choice .connect-cta{border:none;background:var(--ink-900);padding:56px 32px}
.connect-plat{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}
.connect-plat .pglyph{width:14px;height:14px;font-size:12px;color:var(--fg-3)}
.connect-plat-name{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-3)}
.connect-cta.is-unavailable h2,.connect-cta.is-unavailable p,
.connect-cta.is-unavailable .connect-plat{opacity:.55}
.connect-unavail-hint{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-3);margin-top:14px}

@media (max-width:780px){
  .connect-choice{grid-template-columns:1fr}
  .connect-choice .connect-cta{padding:40px 24px}
  /* mobile rail avatars are 24px — shrink the corner badge to match */
  .pglyph-avatar{width:12px;height:12px;right:-2px;bottom:-2px;font-size:8px;padding:2px}
  .pglyph-avatar.pglyph-threads{padding:0}
}

@media (max-width:780px){
  .rules-cols{grid-template-columns:1fr;gap:20px}
  .preset-cards{grid-template-columns:1fr 1fr}
  /* settings pane on narrow screens */
  .conn-status-row{flex-wrap:wrap;row-gap:6px}
  .conn-handle{margin-left:0;flex-basis:100%}
  .conn-meta-label{min-width:110px}
  .unlink-confirm .btn{flex:1;justify-content:center}
}

/* ---------- Mobile (<780px, same breakpoint as landing) ---------- */
@media (max-width:780px){
  .wrap{padding:0 18px}
  .inbox-layout{grid-template-columns:1fr;gap:18px;padding-top:20px}
  /* account rail folds into a horizontal scroll bar of tabs */
  .acct-rail{position:static;flex-direction:row;overflow-x:auto;gap:2px;
    -webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line);padding-bottom:2px;
    scrollbar-width:none}
  .acct-rail::-webkit-scrollbar{display:none}
  .acct-tab{width:auto;flex:none;padding:8px 12px;gap:8px}
  .acct-tab.is-active{box-shadow:inset 0 -2px 0 var(--accent)}
  .acct-avatar,.acct-plus{width:24px;height:24px;font-size:10px}
  .acct-plus{font-size:16px}
  .acct-handle{max-width:120px}
  .dash-grid{grid-template-columns:1fr}
  .row-head{flex-wrap:wrap;row-gap:6px}
  .excerpt{flex-basis:100%;order:5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .age{margin-left:auto}
  .actions .btn{flex:1;justify-content:center}
  .toast-stack{left:12px;right:12px}
  .toast{max-width:none}
}

/* ── Voice scan block — spec docs/design/2026-07-04-voice-block-ui.md §2-§5 ── */
.voice-card{border:1px solid var(--line);background:var(--ink-800);padding:18px;position:relative}
.voice-src-check{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.voice-badge-applied{font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--signal);
  border:1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  background:color-mix(in srgb, var(--signal) 8%, transparent);padding:4px 10px}
.voice-variants{display:flex;flex-direction:column;gap:10px;margin:12px 0}
@media(min-width:900px){.voice-variants{flex-direction:row}.voice-variant{flex:1}}
.voice-variant{border:1px solid var(--line);background:var(--ink-800);padding:14px;cursor:pointer;text-align:left}
.voice-variant[data-active="1"]{border-color:var(--accent)}
.voice-variant-name{font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);display:block;margin-bottom:8px}
.voice-variant[data-active="1"] .voice-variant-name{color:var(--accent)}
.voice-variant-sample{font-size:14px;line-height:1.55;color:var(--fg-1);white-space:pre-wrap}
.voice-hl{background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:inherit;border-bottom:1px dotted var(--accent);cursor:pointer}
.voice-pop{position:absolute;z-index:30;max-width:340px;border:1px solid var(--line);
  background:var(--ink-900);padding:12px;box-shadow:0 8px 24px rgb(0 0 0 / .45)}
.voice-pop-tag{font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.voice-pop-rule{font-size:13px;color:var(--fg-1);margin-bottom:4px}
.voice-pop-logic{font-size:12px;color:var(--fg-3);margin-bottom:8px}
.voice-pop-quote{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);
  border-top:1px solid var(--line);padding:6px 0 0;margin-top:6px;white-space:pre-wrap}
.voice-pop-toggle{margin-top:10px;background:none;border:1px solid var(--line);
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);padding:4px 10px;cursor:pointer}
.voice-pop-toggle:hover{color:var(--accent);border-color:var(--accent)}
.voice-chip-off{color:var(--fg-4)!important;text-decoration:line-through}
.voice-instruction{margin-top:12px}
.voice-instruction .preview-reply{font-size:13px}
.voice-demo-note{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-4);margin-top:10px}

/* ── response-policy v14 (spec 2026-07-04-response-policy §5) ── */
.mode-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;
  font-weight:600;text-transform:uppercase;letter-spacing:.10em;padding:3px 8px;flex:none}
.mode-badge-dm{color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mode-badge-esc{color:var(--ink-900);background:var(--signal)}
.row-head .mode-badge{margin-right:2px}
.block-label .mode-badge{margin-left:10px;vertical-align:middle}
.recommendation{border:1px solid var(--line);border-left:2px solid var(--signal);
  background:var(--ink-800);padding:12px 14px;margin:12px 0 14px}
.recommendation-label{font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);margin-bottom:6px}
.recommendation-text{font-size:13.5px;line-height:1.55;color:var(--fg-1)}

/* ── persona: escalation floor chips + save diff (persona spec §6) ── */
.chip-floor{color:var(--fg-3);cursor:default}
.save-diff{border:1px solid var(--line);border-left:2px solid var(--accent);
  background:var(--ink-800);padding:14px 16px;margin:14px 0 0}
.save-diff-title{font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}
.save-diff-list{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px}
.save-diff-item{font-family:var(--font-mono);font-size:11px;color:var(--fg-2)}

/* ── voice: scan history (voice-learning spec §1.2-6, §5) ── */
.voice-hist{margin-top:16px}

/* ── login self-serve wording (workspace create/sign-in) ── */
.login-sub{color:var(--fg-3);font-size:13.5px;line-height:1.55;margin:-24px 0 28px}
.form-hint{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-3);margin-bottom:16px}
.auth-hint{color:var(--fg-3);font-size:12px;line-height:1.5;text-align:center;margin-top:12px}

/* ── Threads settings: Telegram bind flow ── */
.settings-note{color:var(--fg-3);font-size:13px;line-height:1.55;max-width:520px}
.bind-box{margin-top:14px}
.bind-code{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:22px;
  letter-spacing:.28em;color:var(--fg-1);background:var(--ink-800);
  box-shadow:inset 0 0 0 1px var(--line-strong);padding:12px 18px;margin-bottom:14px}
.bind-instr{font-size:13px;line-height:1.6;color:var(--fg-2);max-width:520px;margin-bottom:10px}
.bind-cmd{font-family:var(--font-mono);font-size:12px;color:var(--signal);
  background:var(--ink-800);box-shadow:inset 0 0 0 1px var(--line);padding:2px 7px}
.bind-timer{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-4);margin-bottom:12px}
.bind-timer.is-expired{color:var(--accent)}

/* ---------- Plan / billing pane (billing-rails 2026-07-10) ----------
   Reuses dash-grid/dash-card/dash-head/dash-label/dash-note wholesale; the
   mobile collapse comes from .dash-grid's own 780px media query. */
.plan-name{font-size:30px;font-weight:700;letter-spacing:.01em;margin:2px 0 4px}
.plan-upgrade{margin-top:18px}
.plan-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.plan-row:last-of-type{border-bottom:0}
.plan-row-label{color:var(--fg-2)}
.plan-row-sub .plan-row-label{color:var(--fg-3);padding-left:14px}
.plan-row-value{font-family:var(--font-mono);font-weight:600}

/* ---------- GWS permissions matrix + audit journal (spec-v2 §6) ----------
   Reuses dash-card/dash-head/dash-label/dash-empty/settings-error/
   unlink-confirm/unlink-target/btn wholesale — this block only adds the
   table shell + the audit result badge (no existing table component to
   reuse). Mobile: each table sits in its own horizontal-scroll wrapper
   instead of collapsing columns, since a 6/7-column table has nowhere
   sensible to fold on a narrow screen. */
.gws-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dash-grid .gws-span-2{grid-column:1/-1}
.gws-matrix,.gws-audit-table{width:100%;border-collapse:collapse;font-size:13px}
.gws-matrix{min-width:520px}
.gws-audit-table{min-width:620px}
.gws-matrix th,.gws-matrix td,.gws-audit-table th,.gws-audit-table td{
  padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.gws-matrix th,.gws-audit-table th{font-family:var(--font-mono);font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3)}
.gws-matrix tr:last-child td,.gws-audit-table tr:last-child td{border-bottom:0}
.gws-matrix-user{white-space:normal;color:var(--fg-1)}
.gws-matrix-roster-note{color:var(--fg-4);font-size:11px}
.gws-matrix-check input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.gws-matrix-check input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}
.gws-matrix-granted{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.gws-matrix-readonly-hint{color:var(--fg-3);font-size:12.5px;margin-bottom:14px}
.gws-matrix-confirm{white-space:normal}
.gws-audit-target{white-space:normal;color:var(--fg-1)}
.gws-audit-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--fg-2)}
.gws-audit-badge.is-danger{color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  background:var(--accent-soft)}
.gws-audit-badge.is-warn{color:color-mix(in srgb, var(--signal) 55%, var(--accent) 45%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--signal) 35%, var(--accent) 35%);
  background:color-mix(in srgb, var(--signal) 7%, var(--accent) 7%)}
.gws-audit-badge.is-ok{color:var(--ink-900);background:var(--signal);box-shadow:none}

@media (max-width:780px){
  .gws-matrix th,.gws-matrix td,.gws-audit-table th,.gws-audit-table td{padding:8px 10px}
}

/* ---------- Reduced motion (WCAG 2.3.3): kill spinner rotation + slides ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}