/* Nomven v2 design tokens — supersede v1's :root (Design→Build handoff §1).
   Existing var names are retuned onto the new palette; new tokens are added. */
:root {
  /* brand */
  --accent: #5847f0; --accent-bg: #f0eefe; --accent-tint: #fbfaff; --star: #5847f0;
  --accent-soft: #f0eefe; /* alias: v1 components use --accent-soft */
  /* ink + neutrals */
  --ink: #1b1830; --ink-2: #46435a; --mut: #6c6982; --faint: #9b98ab; --faint-2: #b9b6c7;
  --line: #ece9f5; --line2: #efedf6; --line-strong: #e6e3f2;
  --surface: #ffffff; --surface-2: #fcfbff; --surface-3: #faf9fe;
  --bg: #fcfbff; /* app background = surface-2 */
  /* dark ramp — reserve for finality (Decide/Done/set-aside/brief) */
  --ink-dark: #19153a; --ink-dark-2: #241f48;
  --on-dark: #ffffff; --on-dark-mut: #b9b4d6; --on-dark-accent: #9d93ff;
  /* verdicts — ink / bg / line triads */
  --green: #16a05a; --green-ink: #128a53; --green-bg: #e6f6ee; --green-line: #c6ead4; --green-soft: #e6f6ee;
  --amber: #e0a93a; --amber-ink: #b9740a; --amber-bg: #fbf0db; --amber-line: #f0dcae; --amber-soft: #fbf0db;
  --red: #d23f3f; --red-ink: #c0322f; --red-bg: #fbe9e9; --red-line: #f2cccc; --red-soft: #fbe9e9;
  /* member identity (stable per seat) */
  --m1: #5847f0; --m2: #e0863a; --m3: #2f9e6b;
  /* type */
  --font: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px;
  --fs-19: 19px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px; --fs-34: 34px; --fs-46: 46px;
  /* space (4-pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  /* radii */
  --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 999px;
  --radius: 12px; /* legacy alias */
  /* elevation */
  --e-card: 0 1px 3px rgba(0,0,0,.08);
  --e-raised: 0 1px 3px rgba(0,0,0,.08), 0 12px 40px rgba(27,24,48,.06);
  --e-pop: 0 18px 50px rgba(25,21,58,.20);
  --e-toast: 0 18px 50px rgba(25,21,58,.34);
  --e-modal: 0 30px 80px rgba(0,0,0,.30);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 12px 40px rgba(27,24,48,.06); /* alias: --e-raised */
  /* motion */
  --t-fast: 150ms; --t-base: 220ms; --t-slow: 600ms; --ease: cubic-bezier(.2,.7,.2,1);
  font-synthesis: none;
}
/* the only keyframes the new design needs (handoff §1) */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Text sizes are rem, so they follow the browser/OS font-size preference;
   --nv-font-scale is the in-app "Text size" multiplier on top (avatar menu). */
html { font-size: calc(100% * var(--nv-font-scale, 1)); }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; font-size: 0.9375rem;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 0.9375rem; }
.muted { color: var(--mut); }

/* ---------- auth ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.auth-card {
  position: relative; width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 30px;
}
.auth-card .authx { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 0.9375rem; color: var(--mut); }
.forgot { display: inline-block; margin-top: 12px; font-size: 0.84375rem; color: var(--accent); font-weight: 600; text-decoration: none; }
.forgot:hover { text-decoration: underline; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 750; font-size: 1.1875rem; letter-spacing: -.4px; }
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-card h1 { font-size: 1.125rem; margin: 18px 0 4px; letter-spacing: -.4px; }
.auth-tabs { display: flex; gap: 4px; background: var(--line2); padding: 4px; border-radius: 10px; margin: 18px 0; }
.auth-tabs button { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 7px;
  font-weight: 600; color: var(--mut); font-size: 0.875rem; }
.auth-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.apple-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; margin-bottom: 8px; border: 1px solid #000; border-radius: 9px; background: #000; font-weight: 600; font-size: 0.90625rem; color: #fff; cursor: pointer; }
.apple-btn:hover { background: #1a1a1a; }
.google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-weight: 600; font-size: 0.90625rem; color: var(--ink); cursor: pointer; }
.google-btn:hover { background: var(--line2); border-color: var(--mut); }
.auth-or { display: flex; align-items: center; text-align: center; color: var(--faint); font-size: 0.75rem; margin: 14px 0; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-or span { padding: 0 10px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--mut); margin-bottom: 5px; }
.field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* password field with show/hide eye toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.tos-row { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; font-size: 0.84375rem; color: var(--mut); line-height: 1.5; cursor: pointer; }
.tos-row input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.tos-row a { color: var(--accent); font-weight: 600; text-decoration: none; }
.tos-row a:hover { text-decoration: underline; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: none; border: none;
  cursor: pointer; font-size: 0.9375rem; line-height: 1; padding: 4px 6px; border-radius: 7px; opacity: .55; filter: grayscale(1); }
.pw-eye:hover { opacity: .9; background: var(--line2); }
.pw-eye.on { opacity: 1; filter: none; }
/* v2 buttons — radius 10, weight 700 (handoff §2.11) */
.btn { border: none; border-radius: 10px; padding: 10px 15px; font-weight: 700; font-size: 0.90625rem; transition: filter var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #fff; width: 100%; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.btn.dark { background: var(--ink-dark); color: var(--on-dark); width: 100%; } /* finality / claim */
.btn.dark:hover { background: var(--ink-dark-2); }
.err { color: var(--red); font-size: 0.84375rem; margin-top: 8px; min-height: 16px; }

/* ---------- app shell ---------- */
/* Fixed viewport-height row; min-height:0 on each column lets the inner scroll
   region (list / chat / tabs) scroll instead of growing the column and pushing
   the bottom controls (composer, sidebar footer) off-screen. */
.app { position: relative; display: grid; grid-template-columns: var(--w-sidebar, 248px) 5px minmax(320px, 1fr) 5px var(--w-chat, 440px); grid-template-rows: minmax(0, 1fr); height: 100vh; overflow: hidden; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* collapsible left column */
.sidebar .top .brandrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.side-collapse { background: none; border: none; color: var(--mut); font-size: 0.9375rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.side-collapse:hover { background: var(--line2); color: var(--ink); }
.sidebar-expand { display: none; position: absolute; top: 12px; left: 8px; z-index: 20; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); color: var(--mut); font-size: 1rem; box-shadow: var(--shadow); cursor: pointer; }
.sidebar-expand:hover { color: var(--accent); border-color: var(--accent); }
/* collapsed = a slim rail: hides the search list but keeps the avatar clickable.
   Keep ALL five grid items present (rsLeft just goes 0-width) so the work + chat
   columns stay aligned — removing an item shifts every pane one column left. */
#app.sidebar-collapsed { grid-template-columns: 58px 0 minmax(320px, 1fr) 5px var(--w-chat, 440px); }
#app.sidebar-collapsed #rsLeft { pointer-events: none; }
#app.sidebar-collapsed .sidebar .brand,
#app.sidebar-collapsed .sidebar .newwrap,
#app.sidebar-collapsed .sidebar .searchlist,
#app.sidebar-collapsed .sidebar .usage,
#app.sidebar-collapsed .acct-id,
#app.sidebar-collapsed .acct-kebab { display: none; }
#app.sidebar-collapsed .sidebar .top { padding: 12px 0; }
#app.sidebar-collapsed .brandrow { justify-content: center; margin-bottom: 0; }
#app.sidebar-collapsed .side-collapse { transform: scaleX(-1); }
/* searchlist (the flex:1 spacer) is hidden, so push the avatar back to the bottom */
#app.sidebar-collapsed .sidebar .foot { margin-top: auto; flex-direction: column; align-items: center; padding: 12px 0; }
#app.sidebar-collapsed .acct-menu { left: 54px; right: auto; bottom: 12px; width: 300px; z-index: 60; }
#app.sidebar-collapsed .sidebar-expand { display: none; }
.avatar { cursor: pointer; }
/* "+ New search" split button with an Import submenu */
.newwrap { position: relative; display: flex; margin-top: 14px; }
.newwrap .newbtn { margin-top: 0; flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.newcaret { width: 34px; background: var(--accent); color: #fff; border: none; border-left: 1px solid rgba(255,255,255,.28);
  border-radius: 0 9px 9px 0; font-size: 0.875rem; cursor: pointer; }
.newcaret:hover { filter: brightness(1.08); }
.new-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 5px; }
.new-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 9px;
  border-radius: 7px; font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.new-menu button:hover { background: var(--line2); }
/* shared-project banner above the workspace */
/* draggable vertical dividers between panels */
.resizer { background: var(--line); cursor: col-resize; position: relative; z-index: 5; }
.resizer::after { content: ''; position: absolute; inset: 0 -3px; }
.resizer:hover, .resizer.active { background: var(--accent); }
/* center work panel (project title + memory + tabs) */
.work { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.workhead { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.workhead #searchTitle { font-weight: 700; font-size: 0.9375rem; }
/* chat moved to the right pane */
.chatpane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); border-left: 1px solid var(--line); }
.chat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 700; }
.sidebar .top { padding: 16px; }
.newbtn { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px; font-weight: 650; }
.importbtn { width: 100%; margin-top: 7px; display: flex; align-items: center; gap: 6px; justify-content: center;
  background: none; color: var(--mut); border: 1px dashed var(--line); border-radius: 9px; padding: 7px; font-weight: 600; font-size: 0.84375rem; }
.importbtn:hover { border-color: var(--accent); color: var(--accent); }
.searchlist { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px; }
.s-item { padding: 9px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; }
.s-item:hover { background: var(--line2); }
.s-item.on { background: var(--accent-soft); }
.s-item .t { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-item .m { font-size: 0.75rem; color: var(--faint); margin-top: 2px; }
.sidebar .foot { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar .foot .email { font-size: 0.8125rem; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linklike { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 0.8125rem; }

/* usage meter */
.usage { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
/* usage meter lives in the ACCOUNT menu (account-level, not room-level) */
.acct-menu .acct-usage { padding: 9px 9px 10px; margin: 4px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); gap: 6px; }
.usage .urow { display: flex; flex-direction: column; gap: 3px; }
.usage .ulbl { display: flex; justify-content: space-between; font-size: 0.71875rem; color: var(--mut); font-weight: 600; }
.usage .ubar { height: 4px; background: var(--line2); border-radius: 3px; overflow: hidden; }
.usage .ubar > i { display: block; height: 100%; background: var(--accent); }
.usage .ubar > i.warn { background: var(--amber); }
.usage .ubar > i.full { background: var(--red); }
.usage .uhead { font-size: 0.75rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.usage .uhead .plan { font-size: 0.6875rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.acctbtn { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 8px; font-weight: 650; font-size: 0.84375rem; }
.acctbtn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

/* avatar menu */
.sidebar .foot { position: relative; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-weight: 800; font-size: 0.875rem; display: grid; place-items: center; flex: 0 0 auto; }
.avatar:hover { filter: brightness(1.08); }
.acct-id { font-size: 0.8125rem; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.acct-kebab { flex: 0 0 auto; background: none; border: none; color: var(--mut); font-size: 1.125rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.acct-kebab:hover { background: var(--line2); color: var(--ink); }
.acct-menu { position: absolute; bottom: 52px; left: 12px; right: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 5px; z-index: 40; }
.acct-menu .mhead { font-size: 0.84375rem; color: var(--faint); padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line2); margin-bottom: 4px; line-height: 1.5; }
.acct-menu .acct-name { display: flex; align-items: center; gap: 4px; padding: 2px 9px 8px; }
.acct-menu .acct-name .an-name { flex: 1; min-width: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); cursor: text; padding: 4px 6px; border-radius: var(--r-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu .acct-name .an-name:hover { background: var(--line2); }
.acct-menu .acct-name .an-add { color: var(--faint); font-weight: 500; font-style: italic; }
.acct-menu .acct-name .an-edit { width: auto; flex: 0 0 auto; background: none; border: none; color: var(--faint); font-size: 0.875rem; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); }
.acct-menu .acct-name .an-edit:hover { background: var(--line2); color: var(--accent); }
.acct-menu .acct-name input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--accent); border-radius: var(--r-sm); font-size: 0.84375rem; }
.acct-menu .acct-name input:focus { outline: none; }
.acct-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 12px; border-radius: 7px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.acct-menu button:hover { background: var(--line2); }
.acct-menu button.danger { color: var(--red); }
.acct-sep { height: 1px; background: var(--line2); margin: 5px 0; }
.acct-mlabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); padding: 4px 9px 2px; }
.acct-menu .ver-cur { font-size: 0.84375rem; font-weight: 600; color: var(--ink); padding: 7px 9px; }
/* trust & safety: flagged-messages entry + modal + lock banner (#103) */
.acct-menu .acct-flags { color: var(--amber); display: flex; align-items: center; gap: 6px; }
.flag-count { background: var(--amber); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 17px; min-width: 17px; text-align: center; }
/* pending invitations (someone invited me — badge + panel) */
.acct-menu .acct-invites { color: var(--accent); display: flex; align-items: center; gap: 6px; }
.invite-count { background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 17px; min-width: 17px; text-align: center; }
.invite-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.invite-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--surface); }
.invite-card .ic-info { flex: 1; min-width: 0; }
.invite-card .ic-title { font-weight: 650; }
.invite-card .ic-sub { font-size: 0.8125rem; color: var(--mut); }
.toast.clickable { cursor: pointer; }
.flags-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.fl-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--surface); }
.fl-top { display: flex; align-items: center; gap: 8px; font-size: 0.78125rem; color: var(--mut); margin-bottom: 6px; }
.fl-reason { flex: 1; font-weight: 600; color: var(--ink); }
.fl-ts { color: var(--faint); }
.fl-badge { font-size: 0.71875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; }
.fl-badge.open { background: var(--amber-soft); color: var(--amber); }
.fl-badge.contested { background: var(--accent-soft); color: var(--accent); }
.fl-badge.done { background: var(--line2); color: var(--mut); }
.fl-text { font-size: 0.875rem; color: var(--ink); background: var(--bg); border-radius: 7px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.fl-acts { display: flex; gap: 8px; margin-top: 9px; }
.fl-sep { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); margin: 4px 0 -2px; }
.lock-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--red); color: #fff; font-size: 0.875rem; font-weight: 600; text-align: center; padding: 9px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.lock-banner a { color: #fff; text-decoration: underline; }
.lock-banner .lb-link { background: rgba(255,255,255,.2); border: none; color: #fff; font-weight: 700; font-size: 0.84375rem; padding: 3px 10px; border-radius: 999px; cursor: pointer; margin-left: 6px; }
/* i18n: language switcher in the account menu (#102) */
.acct-menu .acct-lang { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-top: 1px solid var(--line2); margin-top: 4px; }
.acct-menu .acct-lang .al-label { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); }
.acct-menu .acct-lang .al-select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.84375rem; font-weight: 600; color: var(--ink); background: var(--surface); cursor: pointer; }
.acct-menu .acct-lang .al-select:focus { outline: none; border-color: var(--accent); }
.acct-menu .acct-lang-req { font-size: 0.8125rem; color: var(--accent); font-weight: 600; padding: 4px 9px 6px; }
/* text-size preference in the account menu (#290) */
.acct-menu .acct-size { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-top: 1px solid var(--line2); }
.acct-menu .acct-size .al-label { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); }
.acct-menu .acct-size .as-opts { flex: 1; display: flex; justify-content: flex-end; gap: 4px; }
.acct-menu .acct-size .as-b { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--mut); font-weight: 700; line-height: 1; }
.acct-menu .acct-size .as-b:hover { border-color: var(--accent); color: var(--accent); }
.acct-menu .acct-size .as-b.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* request-a-language modal (i18n PR2) */
.lr-search { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.90625rem; margin: 4px 0 10px; }
.lr-search:focus { outline: none; border-color: var(--accent); }
.lr-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.lr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line2); }
.lr-name { font-size: 0.90625rem; font-weight: 600; color: var(--ink); }
.lr-name .muted { font-weight: 500; }
.lr-have { color: var(--green); font-weight: 700; }
/* request-a-language: in-flight + failed states (#102 PR3) */
.lr-generating { background: var(--accent-soft); border-radius: 8px; }
.lr-failed { background: var(--red-soft); border-radius: 8px; }
.lr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--mut); }
.lr-timer { color: var(--faint); font-variant-numeric: tabular-nums; }
.lr-prog { color: var(--faint); font-variant-numeric: tabular-nums; }
.lr-status.lr-err { color: var(--red); flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.spinner { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: nv-spin .7s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }
/* uncertified (beta) language banner (#102 pt 8) */
.lang-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--amber-soft); color: var(--ink); border-bottom: 1px solid var(--amber); font-size: 0.875rem; font-weight: 500; padding: 0 16px; }
.lang-banner .lb-msg { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* When the banner is up, shift the whole app down so it never obscures the header. */
body.has-lang-banner #app.app { height: calc(100vh - 38px); margin-top: 38px; }
.acct-menu .acct-improve { color: var(--amber); font-weight: 600; }
.lang-banner .lb-act { background: var(--amber); color: #fff; border: none; font-weight: 700; font-size: 0.84375rem; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.lang-banner .lb-x { background: none; border: none; color: var(--mut); font-size: 0.9375rem; cursor: pointer; padding: 2px 6px; }
/* admin language certification queue (#102 pt 6) */
.lstat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.lstat.source { background: var(--accent-soft); color: var(--accent); }
.lstat.certified { background: var(--green-soft); color: var(--green); }
.lstat.provisional { background: var(--amber-soft); color: var(--amber); }
.lstat.pending_certification { background: var(--red-soft); color: var(--red); }
.lang-table .lfeed td { font-size: 0.78125rem; color: var(--mut); padding-top: 0; border-top: none; }

/* admin screen */
.admin { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.admin-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.admin-body { flex: 1; overflow-y: auto; padding: 0; max-width: 1180px; width: 100%; margin: 0 auto; }
/* grouped admin: left nav + content */
.admin-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100%; }
.admin-nav { border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; align-self: start; }
.admin-nav .anav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; background: none; border: none; border-radius: var(--r-md); padding: 9px 12px; font-size: 0.90625rem; font-weight: 650; color: var(--mut); cursor: pointer; }
.admin-nav .anav-item:hover { background: var(--surface-2); color: var(--ink); }
.admin-nav .anav-item.on { background: var(--accent-bg); color: var(--accent); }
.admin-nav .anav-item .pendcount { background: var(--red); color: #fff; }
.admin-content { padding: 22px 26px; min-width: 0; }
.admin-content > h2:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--line); position: static; }
}
/* Accounts/Special-Access segmented subtab (consolidation of the old Access nav item) */
.asub-nav { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.asub-item { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-radius: 8px; padding: 7px 14px; font-size: 0.875rem; font-weight: 650; color: var(--mut); cursor: pointer; }
.asub-item:hover { color: var(--ink); }
.asub-item.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.asub-item .pendcount { background: var(--red); color: #fff; }
.admin h2 { font-size: 0.9375rem; margin: 26px 0 12px; letter-spacing: -.2px; }
.admin h2:first-child { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card .k { font-size: 0.75rem; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.card .v { font-size: 1.375rem; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; }
.trend { display: flex; align-items: flex-end; gap: 3px; height: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; overflow-x: auto; }
.trend .tcol { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; flex: 0 0 14px; height: 100%; }
.trend .tcol i { width: 9px; background: var(--accent); border-radius: 2px 2px 0 0; display: block; }
.trend .tcol span { font-size: 0.5625rem; color: var(--faint); }
.trend-legend { font-size: 0.75rem; color: var(--mut); margin: 6px 0 0; }
.atable { width: 100%; border-collapse: collapse; font-size: 0.84375rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.atable th { text-align: left; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); padding: 9px 10px; border-bottom: 1px solid var(--line); }
.atable td { padding: 9px 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.atable tr:last-child td { border-bottom: none; }
.atable .kindtag { font-size: 0.6875rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.atable .kindtag.user { background: var(--accent-soft); color: var(--accent); }
.atable .kindtag.anon { background: var(--line2); color: var(--mut); }
.atable .grantbtn { background: var(--line2); border: none; border-radius: 6px; padding: 4px 9px; font-weight: 650; font-size: 0.78125rem; color: var(--ink); }
.atable .grantbtn:hover { background: var(--accent-soft); color: var(--accent); }
/* Accounts row: Grant + a single kebab that opens the "Manage account" modal (was a
   6-7 button wrapped row — Approve/Restrict/Block/Terminate/Delete never fit a cell) */
.atable .row-actions { display: flex; gap: 5px; align-items: center; justify-content: flex-end; }
.atable .row-actions .connbtn { padding: 4px 9px; font-size: 0.78125rem; }
/* Per-account request/special-access indicator icons, next to the email */
.acct-icon { border: none; background: none; padding: 0 0 0 6px; font-size: 0.8125rem; line-height: 1; cursor: pointer; opacity: .5; vertical-align: middle; }
.acct-icon:hover { opacity: 1; }
.acct-icon.pending, .acct-icon.active { opacity: 1; }
.acct-icon.denied, .acct-icon.revoked, .acct-icon.used { opacity: .35; }
/* "Manage account" / "Special access" modal bodies: a plain-language action list,
   reused for both the accounts-row kebab and the request/grant detail popups. */
.admlist { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.admlist-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 9px 10px; cursor: pointer; font-size: 0.90625rem; font-weight: 650; color: var(--ink); }
.admlist-item:hover { background: var(--surface-2); }
.admlist-item span { font-size: 0.78125rem; font-weight: 500; color: var(--mut); }
.admlist-item.danger { color: var(--red); }
.admlist-item.danger span { color: var(--red); opacity: .75; }
.admlist-sep { height: 1px; background: var(--line2); margin: 6px 2px; }
.admlist-h { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); margin: 14px 0 6px; }
.admlist-h:first-child { margin-top: 0; }
/* Paged admin lists (#265): search + filters + sortable headers + pager */
.alist-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.alist-controls input[type="search"] { flex: 1; min-width: 180px; max-width: 320px; padding: 0 10px; }
.alist-controls select { padding: 0 8px; }
.alist-controls input[type="search"], .alist-controls select { height: 34px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 0.84375rem; color: var(--ink); }
.alist-count { margin-left: auto; font-size: 0.78125rem; color: var(--faint); white-space: nowrap; }
/* Admin tables are nowrap and keep gaining columns; scroll them inside their own box
   so a wide row never clips the Actions column against the panel edge. */
.alist-body { overflow-x: auto; }
.atable th.sth { cursor: pointer; user-select: none; white-space: nowrap; }
.atable th.sth:hover { color: var(--ink); }
.atable th.sth.on { color: var(--accent); }
.actor-link { cursor: pointer; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--faint); }
.actor-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.alist-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; font-size: 0.8125rem; color: var(--mut); }
.alist-pager .connbtn[disabled] { opacity: .45; pointer-events: none; }
/* pending account approvals */
.pendcount { background: var(--amber); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 1px 8px; border-radius: 20px; vertical-align: middle; }
.pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.pending-row .pe { font-weight: 700; font-size: 0.875rem; }
.pending-row .connbtn { padding: 5px 10px; }
.wl-note { font-size: 0.78125rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-status { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 10px; background: var(--line2); color: var(--mut); }
.wl-status.pending { background: var(--amber-soft); color: var(--amber); }
.wl-status.accepted, .wl-status.active { background: var(--green-soft); color: var(--green); }
.wl-status.denied, .wl-status.revoked, .wl-status.used { background: var(--line2); color: var(--faint); }
.access-add { display: flex; gap: 8px; margin-bottom: 4px; }
.access-add input { flex: 1; max-width: 320px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.875rem; }
.access-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* maintenance kill-switch lever */
.kill-lever { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 18px; }
/* UI A/B rollout panel */
.ui-rollout { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; margin-bottom: 8px; }
.ui-rollout .ro-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ui-rollout .ro-toggle, .ui-rollout .ro-pin { font-size: 0.875rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.ui-rollout .ro-pin select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.875rem; }
.ui-rollout .ro-list { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.ui-rollout .ro-row { display: flex; flex-direction: column; gap: 8px; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: 0.875rem; }
.ui-rollout .ro-line1 { display: flex; align-items: center; gap: 14px; }
.ui-rollout .ro-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 7px; border-top: 1px solid var(--line2); }
.ui-rollout .ro-meta label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78125rem; color: var(--mut); }
.ui-rollout .ro-meta input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.84375rem; min-width: 140px; }
.ui-rollout .ro-meta .lnk { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 0.8125rem; cursor: pointer; }
.ui-rollout .ro-id { flex: 1; font-weight: 600; }
.ui-rollout .ro-w { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: 0.8125rem; }
.ui-rollout .ro-w input { width: 64px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.875rem; }
.ui-rollout .ro-stat { color: var(--faint); font-size: 0.8125rem; flex: 0 0 auto; }
.kill-lever.on { border-color: var(--red); background: var(--red-soft); }
.kill-lever .kl-info { flex: 1; min-width: 0; }
.kill-lever .kl-title { font-weight: 800; font-size: 0.9375rem; }
.kill-lever.on .kl-title { color: var(--red); }
.kill-lever .kl-sub { font-size: 0.8125rem; color: var(--mut); margin-top: 3px; line-height: 1.4; }
.kl-btn { flex: 0 0 auto; border: none; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 0.875rem; cursor: pointer; background: var(--red); color: #fff; }
.kl-btn:hover { filter: brightness(1.05); }
.kl-btn.on { background: var(--green); }
/* Overview banner shown when the access mode is non-default (#141). */
.mode-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: 10px; font-size: 0.875rem; margin-bottom: 16px; border: 1px solid; }
.mode-banner b { font-weight: 800; }
.mode-banner .lnk { margin-left: auto; background: none; border: none; font-weight: 700; font-size: 0.84375rem; cursor: pointer; color: inherit; text-decoration: underline; padding: 0; }
.mode-banner.m-open { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mode-banner.m-maintenance { background: var(--red-soft); border-color: var(--red); color: var(--red); }
/* Launch tab: access-mode radio cards (#141). */
.launch-modes { display: flex; flex-direction: column; gap: 10px; }
.launch-mode { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.launch-mode:hover { border-color: var(--accent); }
.launch-mode input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
.launch-mode .lm-icon { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.launch-mode .lm-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.launch-mode .lm-text b { font-size: 0.9375rem; font-weight: 800; color: var(--ink); }
.launch-mode .lm-text span { font-size: 0.84375rem; color: var(--mut); line-height: 1.45; }
.launch-mode.on { border-color: var(--accent); background: var(--accent-tint); }
.launch-mode.m-maintenance.on { border-color: var(--red); background: var(--red-soft); }
.launch-mode.m-maintenance.on .lm-text b { color: var(--red); }
.launch-msg { margin-top: 16px; }
.launch-msg label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--mut); margin-bottom: 5px; }
.launch-msg textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.875rem; font-family: inherit; resize: vertical; box-sizing: border-box; }
.launch-msg textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.setform { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.setform .frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.setform label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; font-weight: 700; color: var(--mut); }
.setform input { width: 110px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.875rem; }
.setform .plan-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line2); }
/* The reused per-search .dim-desc markup (see #dimModal) needs its own width — the
   generic .setform input (class+type, higher specificity) would otherwise win. */
.setform .dim-desc { width: 100%; }
.grant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.grant-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; font-weight: 700; color: var(--mut); }
.grant-grid input, .grant-grid select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.875rem; background: var(--surface); color: var(--ink); }
.grant-admin { display: flex; align-items: center; gap: 8px; font-size: 0.84375rem; color: var(--ink); margin-top: 10px; padding: 8px 10px; background: var(--amber-soft); border: 1px solid #f0d9a8; border-radius: 9px; }

/* plan cards */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
/* one-time naming-credit packs */
.packs-head { font-size: 0.8125rem; font-weight: 700; color: var(--mut); margin: 18px 0 8px; text-align: center; }
.packs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pack-card { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 8px 16px; background: var(--surface); cursor: pointer; font: inherit; }
.pack-card:hover { border-color: var(--accent); }
.pack-card .pack-n { font-weight: 700; font-size: 0.875rem; color: var(--ink); }
.pack-card .pack-p { font-weight: 800; font-size: 0.875rem; color: var(--accent); }
.packs-note { font-size: 0.84375rem; color: var(--mut); text-align: center; margin: 16px 0 4px; padding: 10px; background: var(--surface-2); border-radius: var(--r-md); }
.plan-card.dim { opacity: .55; }
.urow.credits .ulbl { color: var(--accent); font-weight: 600; }
.pos { color: var(--green); } .neg { color: var(--red); }
.atable td.pos, .atable td.neg { font-weight: 700; }
.plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.plan-card.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.plan-card h3 { font-size: 0.9375rem; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.plan-card .price { font-size: 1.375rem; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-card .price span { font-size: 0.8125rem; font-weight: 600; color: var(--faint); }
.plan-card .price .anchor { font-size: 0.9375rem; font-weight: 600; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--red); }
.plan-card .price .save-badge { font-size: 0.6875rem; font-weight: 800; letter-spacing: .2px; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 2px 8px; }
.plan-card .price.contact-price { font-size: 1rem; font-weight: 700; color: var(--mut); }
.plan-card .plan-tagline { font-size: 0.78125rem; color: var(--mut); margin: 2px 0 4px; }
.plan-card .plan-period { font-size: 0.78125rem; color: var(--mut); margin-top: -2px; }
.plan-contact { margin-top: auto; }
.plan-contact .btn-contact { width: 100%; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 9px; font-weight: 650; font-size: 0.84375rem; }
.contact-form { display: flex; flex-direction: column; gap: 6px; }
.contact-form input, .contact-form textarea { font: inherit; font-size: 0.84375rem; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); resize: vertical; }
.contact-form textarea { min-height: 60px; }
.contact-form button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px; font-weight: 650; font-size: 0.84375rem; }
.contact-form button:disabled { opacity: .5; }
.plan-contact .contact-sent { font-size: 0.8125rem; color: var(--green); font-weight: 600; }
.money-back { margin-top: 16px; text-align: center; font-size: 0.84375rem; color: var(--green); background: var(--green-soft); border-radius: 10px; padding: 10px 12px; }
.money-back b { color: var(--green); }
.landing-guarantee { margin-top: 12px; font-size: 0.8125rem; font-weight: 600; color: var(--green); }
.plan-card.best { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); position: relative; }
.plan-card .best-badge { position: absolute; top: -10px; right: 12px; background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
/* billing / invoices */
.bill-plan { font-size: 0.9375rem; margin-bottom: 2px; }
.bill-table { width: 100%; border-collapse: collapse; font-size: 0.84375rem; margin-top: 4px; }
.bill-table th { text-align: left; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); padding: 7px 8px; border-bottom: 1px solid var(--line); }
.bill-table td { padding: 9px 8px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.bill-table td.bill-amt { text-align: right; font-weight: 700; white-space: nowrap; }
.bill-type { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: var(--line2); color: var(--mut); }
.bill-type.payment { background: var(--green-soft); color: var(--green); }
.bill-type.refund { background: var(--red-soft); color: var(--red); }
.bill-type.adjustment { background: var(--amber-soft); color: var(--amber); }
.bill-total { text-align: right; font-size: 0.875rem; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* admin activity feed */
.act-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.act-wrap .atable { border: none; border-radius: 0; }
.act-ts { white-space: nowrap; color: var(--mut); font-size: 0.78125rem; }
.act-type { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.plan-card ul { list-style: none; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 4px; }
.plan-card li { font-size: 0.8125rem; color: var(--mut); }
.plan-card li b { color: var(--ink); }
.plan-card button { margin-top: auto; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px; font-weight: 650; font-size: 0.84375rem; }
.plan-card.cur button { background: var(--line2); color: var(--mut); }
.plan-card button:disabled { opacity: .5; }

/* feedback on assistant messages */
.fb { display: inline-flex; gap: 4px; margin-top: 8px; }
.fb button { background: none; border: 1px solid var(--line); border-radius: 7px; padding: 2px 7px; font-size: 0.8125rem; color: var(--mut); }
.fb button:hover { border-color: var(--accent); }
.fb button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* center / chat */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface); }
#searchTitle { font-weight: 700; font-size: 0.9375rem; letter-spacing: -.3px; outline: none; border-radius: 6px; padding: 2px 4px; min-width: 40px; }
#searchTitle:focus { background: var(--line2); }
.spacer { flex: 1; }
.chat { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 22px 20px 8px; }
.msgs { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; min-width: 0; }
.msg .av { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 800; }
/* AI turn → name cards in the thread (handoff §2.5) */
.ai-mark { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--mut); margin: 2px 0 8px; }
.ai-mark .ai-spark { color: var(--accent); font-size: 0.9375rem; }
/* "Thinking" state — animated dots + a rotating status line while Nomven works. */
.thinking { display: inline-flex; align-items: center; gap: 9px; }
.thinking .tdots { display: inline-flex; gap: 4px; }
.thinking .tdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: tbounce 1.2s infinite ease-in-out both; }
.thinking .tdots i:nth-child(2) { animation-delay: .16s; }
.thinking .tdots i:nth-child(3) { animation-delay: .32s; }
.thinking .tstatus { color: var(--mut); font-size: 0.875rem; transition: opacity .18s ease; }
@keyframes tbounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .thinking .tdots i { animation: tpulse 1.4s infinite ease-in-out both; } @keyframes tpulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } }
.ai-note { font-size: 0.875rem; color: var(--mut); margin-top: 8px; line-height: 1.5; }
.tcards { display: flex; flex-direction: column; gap: 8px; }
.tcard { border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 11px 9px 13px; background: var(--surface); cursor: pointer; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); animation: rise var(--t-base) var(--ease) both; }
.tcard:hover { box-shadow: var(--e-card); }
.tcard.v-clear { box-shadow: inset 3px 0 0 var(--green); }
.tcard.v-catch { box-shadow: inset 3px 0 0 var(--amber); }
.tcard.v-caution { box-shadow: inset 3px 0 0 var(--amber); }
.tcard.v-gone { box-shadow: inset 3px 0 0 var(--red); }
.tcard.v-conflict { box-shadow: inset 3px 0 0 var(--red); }
.tcard.v-unknown { box-shadow: inset 3px 0 0 var(--line-strong); }
.tcard.shortlist { border-color: var(--accent); border-width: 1.5px; background: var(--accent-tint); }
.tcard .tc-top { display: flex; align-items: center; gap: 8px; }
.tcard .tc-nm { font-weight: 800; font-size: 1rem; letter-spacing: -.3px; color: var(--ink); }
.tcard .tc-star { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 0.9375rem; line-height: 1; color: var(--faint); opacity: .6; padding: 2px 4px; }
.tcard .tc-star.on { color: var(--star); opacity: 1; }
.tcard .tc-star:hover { opacity: 1; }
.tcard .tc-mean { font-size: 0.84375rem; color: var(--mut); margin: 3px 0 6px; line-height: 1.4; }
.tcard .tc-foot { display: flex; align-items: center; gap: 8px; }
/* Proposed names (#142): each name has its own [+]; names aren't auto-added. */
.proposals { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; background: var(--surface); }
.prow { display: flex; align-items: center; gap: 9px; padding: 6px 7px 6px 9px; border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease); }
.prow:hover { background: var(--accent-soft); }
.prow .prow-nm { font-weight: 800; font-size: 0.9375rem; letter-spacing: -.2px; color: var(--ink); flex: 0 0 auto; }
.prow .prow-mean { font-size: 0.8125rem; color: var(--mut); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .vchip { flex: 0 0 auto; margin-left: auto; }
.prow .prow-add { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: var(--accent-soft); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.prow .prow-add svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; }
.prow .prow-add:hover { background: var(--accent); color: #fff; }
.prow .prow-add:disabled { opacity: .5; cursor: default; }
.prow .prow-add:disabled:hover { background: var(--accent-soft); color: var(--accent); }
.prow .vchip + .prow-add { margin-left: 4px; }
/* Added rows are UNCHANGED except the [+] is gone (#142 pt2) — no dimming; still
   clickable to open the full detail. Attribution lives in the thread's log line. */
.prow.added { cursor: pointer; }
.pfoot { display: flex; align-items: center; gap: 8px; }
.pfoot:not(:empty) { margin-top: 8px; }
.pfoot .pbtn { font: 700 0.875rem/1 var(--font); padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; transition: opacity var(--t-fast) var(--ease); }
.pfoot .pbtn:hover { opacity: .88; }
.pfoot .pbtn:disabled { opacity: .5; cursor: default; }
.pfoot .pdone { font: 700 0.875rem/1 var(--font); color: var(--green); }
.prow-hint { margin-top: 6px; font-size: 0.75rem; color: var(--faint); }
.msg.user .av { background: var(--ink); color: #fff; }
.msg.assistant .av { background: var(--accent-soft); color: var(--accent); }
/* min-width: 0 + overflow-wrap: the body is a flex item, so an unbreakable token
   (a long URL, a domain string, an inline code run) would otherwise set its
   min-content width and push the whole thread wider than the phone screen (#303). */
.msg .body { padding-top: 3px; line-height: 1.55; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* markdown inside assistant messages */
.msg .body p { margin: 0 0 8px; }
.msg .body p:last-child { margin-bottom: 0; }
.msg .body ul, .msg .body ol { margin: 4px 0 8px; padding-left: 20px; }
.msg .body li { margin: 2px 0; }
.msg .body .md-h { font-weight: 750; margin: 10px 0 5px; letter-spacing: -.2px; }
.msg .body .md-h1 { font-size: 1.0625rem; }
.msg .body .md-h2 { font-size: 0.9375rem; }
.msg .body .md-h3, .msg .body .md-h4, .msg .body .md-h5, .msg .body .md-h6 { font-size: 0.9375rem; }
.msg .body code { background: var(--line2); border-radius: 4px; padding: 1px 5px; font-size: 0.84375rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.msg .body pre { background: var(--line2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 6px 0 8px; }
.msg .body pre code { background: none; padding: 0; font-size: 0.8125rem; line-height: 1.45; }
.msg .body table { display: block; max-width: 100%; overflow-x: auto; }  /* wide tables scroll inside their own box */
.msg .body img { max-width: 100%; height: auto; }
.msg .body blockquote { margin: 6px 0; padding: 2px 0 2px 11px; border-left: 3px solid var(--line); color: var(--mut); }
.msg .body a { color: var(--accent); }
.msg .body strong { font-weight: 700; }
.msg .who { font-size: 0.75rem; color: var(--faint); font-weight: 600; margin-bottom: 2px; }
.prov-note { font-size: 0.78125rem; color: var(--amber); background: var(--amber-soft); border-radius: 7px; padding: 5px 8px; margin-top: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chip { font-size: 0.8125rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 4px 11px; color: var(--ink); }
.chip.new { background: var(--accent-soft); border-color: #d9dcfb; color: var(--accent); }
.chip.pivot { cursor: pointer; border-style: dashed; }
.chip.pivot:hover { border-color: var(--accent); color: var(--accent); }
.composer { max-width: 720px; margin: 0 auto; width: 100%; padding: 10px 0 18px; }
/* next-best-action chips now trail the conversation inside the scroll area */
.pivots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.composer .box { display: flex; flex-direction: column; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 10px; box-shadow: var(--shadow); }
.composer .box.drag { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer .box-input { display: flex; gap: 8px; align-items: flex-start; }
.composer .box-controls { display: flex; gap: 8px; align-items: center; }
.composer textarea { flex: 1; border: none; resize: none; outline: none; min-height: 24px; max-height: 140px; padding: 6px 0; line-height: 1.5; background: transparent; }
.composer .attach { display: flex; align-items: center; justify-content: center; background: var(--line2); color: var(--mut); border: none; border-radius: 10px; width: 34px; height: 34px; padding: 0; flex: 0 0 auto; }
.composer .attach:hover { background: var(--accent-soft); color: var(--accent); }
.composer .send { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border: none; border-radius: 10px; width: 38px; height: 38px; padding: 0; font-size: 1rem; flex: 0 0 auto; }
.composer .send:disabled { opacity: .45; }
/* Voice input — hidden by default, shown via JS only when SpeechRecognition is
   actually supported (progressive enhancement; e.g. Firefox has no support). */
.composer .mic { display: flex; align-items: center; justify-content: center; background: var(--line2); color: var(--mut); border: none; border-radius: 10px; width: 34px; height: 34px; padding: 0; font-size: 1.0625rem; flex: 0 0 auto; }
.composer .mic:hover { background: var(--accent-soft); color: var(--accent); }
.composer .mic.recording { background: var(--red); color: #fff; animation: micpulse 1.4s infinite ease-in-out; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,50,50,.4); } 50% { box-shadow: 0 0 0 6px rgba(220,50,50,0); } }

/* attachment chips (composer + message bubbles) */
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.att { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; max-width: 240px; }
.att .ic { font-size: 0.875rem; }
.att .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .rm { background: none; border: none; color: var(--faint); font-weight: 700; padding: 0 2px; line-height: 1; }
.att .rm:hover { color: var(--red); }
.att img { width: 22px; height: 22px; object-fit: cover; border-radius: 5px; }
.msg .att { background: var(--bg); }
/* larger image thumbnails in the message thread (vs. the small chip above) —
   click opens the original full-size in a new tab. */
.msg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.att-thumb { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.att-thumb img { width: 140px; height: 140px; object-fit: cover; display: block; transition: opacity .15s; }
.att-thumb:hover img { opacity: .85; }

/* connections button + badge */
.connbtn { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-weight: 600; font-size: 0.84375rem; color: var(--mut); }
.connbtn:hover { border-color: var(--accent); color: var(--accent); }
.connbtn.danger:hover { border-color: var(--red); color: var(--red); }
.connbtn.icon { padding: 7px; width: 32px; display: grid; place-items: center; font-size: 0.9375rem; }

/* delete confirmation */
.del-list { list-style: none; margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.del-list li { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; padding: 8px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.del-list li .n { font-weight: 800; color: var(--ink); }
.del-list li.none { color: var(--faint); }
.del-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.del-actions .spacer { flex: 1; }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { filter: brightness(1.05); }
.btn.danger:disabled { opacity: .5; }
.btn.ghost { font-size: 0.875rem; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(16,23,41,.4); display: grid; place-items: center; padding: 20px; z-index: 600; }
.modal-card { width: 100%; max-width: 520px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 0 22px 22px; max-height: 88vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
/* document viewer (renders shared .md/text) */
.doc-view-card { max-width: 760px; }
.doc-view-acts { display: flex; align-items: center; gap: 14px; }
.doc-view-acts .lnk { color: var(--accent); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.doc-view-acts .lnk:hover { text-decoration: underline; }
.doc-view-body { margin-top: 12px; max-height: 70vh; overflow: auto; }
.doc-view-body .doc-raw { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84375rem; line-height: 1.5; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 0; }
.md-body { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); }
.md-body .md-h { font-weight: 750; margin: 14px 0 6px; letter-spacing: -.2px; }
.md-body .md-h1 { font-size: 1.25rem; }
.md-body .md-h2 { font-size: 1.0625rem; }
.md-body .md-h3, .md-body .md-h4, .md-body .md-h5, .md-body .md-h6 { font-size: 0.9375rem; }
.md-body p { margin: 8px 0; }
.md-body ul, .md-body ol { margin: 8px 0; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body code { background: var(--line2); border-radius: 4px; padding: 1px 5px; font-size: 0.84375rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.md-body pre { background: var(--line2); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; }
.md-body pre code { background: none; padding: 0; font-size: 0.84375rem; line-height: 1.45; }
.md-body blockquote { margin: 8px 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--line); color: var(--mut); }
.md-body a { color: var(--accent); }
.modal-head h2 { font-size: 1.0625rem; letter-spacing: -.3px; }
.modal-head .x { background: none; border: none; font-size: 0.9375rem; color: var(--mut); }
/* Busy modals scroll the whole .modal-card, which would carry the title + ✕ out
   of view. Pin the head to the top of the scroll. The card drops its top padding
   (above) so the head sits flush; the head restores that spacing and bleeds over
   the side padding so scrolled content passes cleanly underneath. */
.modal-card > .modal-head {
  position: sticky; top: 0; z-index: 5;
  margin: 0 -22px 12px; padding: 18px 22px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line2);
  border-radius: 16px 16px 0 0;
}
.conn-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.conn-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.conn-row .top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.conn-row .pl { font-weight: 700; font-size: 0.90625rem; }
.conn-row .dot2 { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.conn-row .dot2.on { background: var(--green); }
.conn-row .st { font-size: 0.78125rem; font-weight: 600; color: var(--faint); margin-left: auto; }
.conn-row .st.on { color: var(--green); }
.conn-row .row2 { display: flex; gap: 8px; }
.conn-row input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 0.875rem; }
.conn-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.conn-row .sbtn { border: none; border-radius: 8px; padding: 8px 12px; font-weight: 650; font-size: 0.84375rem; }
.conn-row .sbtn.test { background: var(--line2); color: var(--ink); }
.conn-row .sbtn.save { background: var(--accent); color: #fff; }
.conn-row .sbtn:disabled { opacity: .5; }
.conn-row .msg2 { font-size: 0.8125rem; margin-top: 7px; min-height: 15px; }
.conn-row .msg2.ok { color: var(--green); }
.conn-row .msg2.bad { color: var(--red); }
.conn-row .envnote { font-size: 0.75rem; color: var(--faint); margin-top: 6px; }
.conn-row .conn-help { font-size: 0.75rem; color: var(--mut); margin-top: 7px; line-height: 1.4; }
.conn-row .conn-getkey { font-size: 0.78125rem; margin-top: 7px; }
.conn-row .conn-getkey a { color: var(--accent); font-weight: 650; }
.conn-row .conn-oauth { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conn-row .oauth-btn { background: #000; color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-weight: 650; font-size: 0.84375rem; }
.conn-row .oauth-btn:hover { filter: brightness(1.15); }
.conn-group-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 700; margin-top: 6px; }
.conn-group-h:not(:first-child) { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.conn-group-note { font-size: 0.8125rem; color: var(--mut); line-height: 1.45; margin: 2px 0 2px; }

/* right panel */
.panel { background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

/* project memory (goal / dimensions / domains) */
/* Brief spine (handoff §2.4) — always-on alignment bar of live criteria chips */
.brief-spine { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.brief-spine .brief-label { font-size: 0.6875rem; font-weight: 800; letter-spacing: .8px; color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.brief-spine .mem-goal { display: inline-block; min-width: 120px; max-width: 46%; font-size: 0.875rem; font-weight: 600; color: var(--ink); outline: none; border-radius: var(--r-sm); padding: 3px 7px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-spine .mem-goal:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); white-space: normal; max-width: none; }
.brief-spine .mem-goal:empty::before { content: attr(data-placeholder); color: var(--faint); font-weight: 500; }
.brief-crit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.brief-sep { width: 1px; height: 16px; background: var(--line-strong); flex: 0 0 auto; margin: 0 1px; }
.bchip { display: inline-flex; align-items: center; gap: 4px; font: 600 0.8125rem/1 var(--font); padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease); }
.bchip.agreed { color: var(--accent); background: var(--accent-bg); }
.bchip.agreed:hover { background: var(--accent-soft); }
.bchip.dom { color: var(--mut); background: var(--surface-3); border-color: var(--line); }
.bchip.tension { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); font-weight: 700; }
.bchip.add { color: var(--mut); background: none; border: 1px dashed var(--line-strong); }
.bchip.add:hover { color: var(--accent); border-color: var(--accent); }
/* tension-resolve popover (#tension-resolve) */
.tension-pop { position: fixed; z-index: 700; width: 348px; max-width: calc(100vw - 24px); max-height: 74vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-pop); padding: 14px; font-size: 0.875rem; }
.tension-pop .tp-head { font-weight: 800; font-size: 0.875rem; }
.tension-pop .tp-head.warn { color: var(--amber-ink); }
.tension-pop .tp-head.ok { color: var(--green); }
.tp-diverge { margin: 6px 0 8px; color: var(--ink); line-height: 1.45; }
.tp-parties { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tp-party { font-size: 0.8125rem; color: var(--mut); display: flex; align-items: baseline; gap: 6px; }
.tp-party .tp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; align-self: center; }
.tp-agree { font-size: 0.78125rem; color: var(--green-ink); margin-bottom: 4px; }
.tp-sec { font-size: 0.71875rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin: 13px 0 6px; }
.tp-path { border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 10px; margin-bottom: 6px; background: var(--surface-2); }
.tp-path-h { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tp-kind { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--line2); color: var(--mut); flex: 0 0 auto; }
.tp-kind.dimension { background: var(--accent-bg); color: var(--accent); }
.tp-kind.call { background: var(--green-bg); color: var(--green); }
.tp-kind.explore { background: var(--amber-bg); color: var(--amber-ink); }
.tp-path-d { font-size: 0.8125rem; color: var(--mut); line-height: 1.4; margin: 3px 0 7px; }
.tp-do { background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); padding: 5px 11px; font-size: 0.78125rem; font-weight: 700; cursor: pointer; }
.tp-do:hover { filter: brightness(1.06); }
.tp-call { width: 100%; resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 7px 9px; font: inherit; font-size: 0.84375rem; background: var(--surface-2); }
.tp-call:focus { outline: none; border-color: var(--accent); }
.tp-callfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 8px; }
.tp-hint { font-size: 0.71875rem; color: var(--accent); font-weight: 600; }
.tp-record { background: var(--ink); color: #fff; border: none; border-radius: var(--r-sm); padding: 6px 13px; font-size: 0.8125rem; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.tp-decision { margin: 7px 0 4px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.tp-by { font-size: 0.75rem; color: var(--faint); }
.tp-link { background: none; border: none; color: var(--accent); font-size: 0.78125rem; font-weight: 600; cursor: pointer; padding: 8px 0 0; }
.tp-do.wide { display: block; width: 100%; text-align: center; padding: 8px; }
/* stance poll */
.tp-poll { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tp-pole { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface-2); cursor: pointer; }
.tp-pole:hover { border-color: var(--accent); }
.tp-pole.on { border-color: var(--accent); background: var(--accent-bg); }
.tp-pole-l { font-size: 0.8125rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.tp-pole-avs { display: inline-flex; min-height: 18px; }
.tp-sav { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 0.59375rem; font-weight: 800; border: 2px solid var(--surface-2); margin-left: -5px; }
.tp-sav:first-child { margin-left: 0; }
/* "bridges the split" badge on a compromise name card */
.tc-bridge { font-size: 0.65625rem; font-weight: 800; letter-spacing: .3px; color: var(--accent); background: var(--accent-bg); border-radius: var(--r-pill); padding: 1px 7px; }
.bchip .bchip-x { background: none; border: none; color: var(--faint); font-size: 0.6875rem; line-height: 1; padding: 0; cursor: pointer; }
.bchip .bchip-x:hover { color: var(--red); }
.memory { padding: 7px 14px 9px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; background: var(--bg); }
.mem-row { display: flex; gap: 8px; align-items: flex-start; position: relative; }
.mem-label { flex: 0 0 84px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.71875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); padding: 3px 0; background: none; border: none; cursor: pointer; text-align: left; }
.mem-label:hover { color: var(--mut); }
.mem-label .chev::before { content: '▾'; font-size: 0.5625rem; display: inline-block; width: 9px; }
.mem-row.collapsed .mem-label .chev::before { content: '▸'; }
.mem-content { flex: 1; min-width: 0; }
.mem-goal { display: block; font-size: 0.84375rem; line-height: 1.4; color: var(--ink); outline: none; border-radius: 6px; padding: 2px 5px; min-height: 18px; }
.mem-goal:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.mem-goal:empty::before { content: attr(data-placeholder); color: var(--faint); }
.mem-dims, .mem-tlds, .mem-hist { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
/* collapsed sections: show a one-line peek; full content pops on hover */
.mem-peek { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px; display: none; cursor: default; }
.mem-row.collapsed .mem-content { display: none; }
.mem-row.collapsed .mem-peek { display: block; }
.mem-row.collapsed:hover .mem-content { display: block; position: absolute; left: 84px; right: 0; top: 100%; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; }
.mem-hist .none { font-size: 0.78125rem; color: var(--faint); }
.mem-hist .wt { font-size: 0.8125rem; }
.mem-hist .wt b { font-weight: 700; }
/* alignment: agree vs. diverge observations */
.mem-align { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mem-align .none { font-size: 0.78125rem; color: var(--faint); }
.mem-align .al-row { display: flex; gap: 7px; font-size: 0.8125rem; line-height: 1.4; }
.mem-align .al-k { flex: 0 0 58px; font-weight: 700; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: .3px; padding-top: 1px; }
.mem-align .al-row.agree .al-k { color: var(--green); }
.mem-align .al-row.diverge .al-k { color: var(--amber); }
.mem-align .al-v { flex: 1; min-width: 0; color: var(--ink); }
.mem-align .al-add { margin-top: 4px; }
.mem-align .al-adddim { font-size: 0.75rem; font-weight: 650; color: var(--accent); background: var(--accent-soft); border: none; border-radius: 6px; padding: 3px 8px; }
.mem-align .al-adddim:hover { filter: brightness(.97); }
.mem-hist .edit { background: none; border: 1px dashed var(--line); border-radius: 14px; padding: 2px 8px; font-size: 0.75rem; font-weight: 700; color: var(--mut); }
.mem-hist .edit:hover { border-color: var(--accent); color: var(--accent); }

/* name-history editor */
.hist-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hist-item { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.hist-item .r1 { display: flex; gap: 8px; align-items: center; }
.hist-item .r1 input.nm { flex: 1; font-weight: 700; }
.hist-item .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hist-item input, .hist-item textarea { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.84375rem; font-family: inherit; }
.hist-item input:focus, .hist-item textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.hist-item textarea { resize: vertical; min-height: 36px; }
.hist-item .cur-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--mut); font-weight: 600; }
.hist-item .rm { background: none; border: none; color: var(--faint); font-weight: 700; padding: 0 4px; }
.hist-item .rm:hover { color: var(--red); }
.mem-dims .tag { font-size: 0.71875rem; }
.mem-dims .none { font-size: 0.78125rem; color: var(--faint); }
.tld-chip { font-size: 0.75rem; font-weight: 700; padding: 2px 4px 2px 8px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }
.tld-chip button { background: none; border: none; color: var(--accent); opacity: .6; font-weight: 700; padding: 0 2px; line-height: 1; }
.tld-chip button:hover { opacity: 1; }
.tld-add { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 14px; background: var(--line2); color: var(--mut); border: 1px dashed var(--line); }
.tld-add:hover { border-color: var(--accent); color: var(--accent); }
/* Fixed + above .modal (600): the picker opens from inside the dimensions modal
   too, and its coords come from getBoundingClientRect (viewport space). (#205) */
.tld-pop { position: fixed; z-index: 700; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.tld-pop .tld-form { display: flex; gap: 4px; width: 100%; margin-top: 2px; }
.tld-pop .tld-form input { flex: 1; min-width: 0; font-size: 0.75rem; padding: 3px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.tld-pop .tld-form input.invalid { border-color: var(--red); }
.tld-pop .tld-form button { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; background: var(--accent); border: none; color: #fff; }
.tld-pop button { font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 12px; background: var(--line2); border: none; color: var(--ink); }
.tld-pop button:hover { background: var(--accent-soft); color: var(--accent); }

/* sidebar kebab menu */
.s-item { position: relative; }
.s-item .kebab { position: absolute; top: 7px; right: 6px; background: none; border: none; color: var(--faint); font-size: 0.9375rem; line-height: 1; padding: 2px 5px; border-radius: 6px; opacity: 0; }
.s-item:hover .kebab, .s-item .kebab.open { opacity: 1; }
.s-item .kebab:hover { background: var(--line); color: var(--ink); }
.s-item .t { padding-right: 22px; }
.s-menu { position: absolute; top: 28px; right: 6px; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; min-width: 130px; }
.s-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 7px; font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.s-menu button:hover { background: var(--line2); }
.s-menu button.danger { color: var(--red); }
.s-menu button.danger:hover { background: var(--red-soft); }

.rename-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.9375rem; margin: 14px 0 4px; }
.rename-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* presence + sharing */
.presence { display: inline-flex; align-items: center; }
.presence .pres-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.6875rem; font-weight: 800; letter-spacing: .2px; border: 2px solid var(--surface); margin-left: -7px; box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: default; }
.presence .pres-av:first-child { margin-left: 0; }
.presence .pres-av.me { box-shadow: 0 0 0 2px var(--accent-soft), 0 1px 2px rgba(0,0,0,.12); }

/* toast notifications */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 1000; pointer-events: none; }
.toast { background: var(--ink); color: #fff; font-size: 0.875rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.22); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; max-width: 80vw; }
.toast.in { opacity: 1; transform: translateY(0); }
.toast.join { background: var(--green); }

/* ---------- marketing landing ---------- */
.landing { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(1100px 560px at 72% -12%, var(--accent-soft), transparent 60%), linear-gradient(180deg, #fff, var(--bg)); }
.landing-orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; }
.landing-orb.orb1 { width: 440px; height: 440px; background: var(--accent); top: -130px; right: -70px; opacity: .16; }
.landing-orb.orb2 { width: 380px; height: 380px; background: #16a34a; bottom: -150px; left: -90px; opacity: .12; }
.landing-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; position: relative; z-index: 1; }
.landing-top .brand { font-size: 1.125rem; font-weight: 800; }
.landing-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 24px 56px; position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }
.landing .pill { font-size: 0.8125rem; font-weight: 700; letter-spacing: .4px; color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: 999px; margin-bottom: 24px; }
.landing h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.04; letter-spacing: -1.6px; font-weight: 800; color: var(--ink); margin: 0 0 18px; }
.landing h1 em { font-style: normal; background: linear-gradient(90deg, var(--accent), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing .lede { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.6; color: var(--mut); max-width: 640px; margin: 0 auto 30px; }
.landing-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lbtn { border: none; border-radius: 12px; padding: 14px 26px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s, color .12s; }
.lbtn.primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px var(--accent-soft); }
.lbtn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(79, 70, 229, .32); }
.lbtn.ghost { background: rgba(255, 255, 255, .7); color: var(--ink); border: 1px solid var(--line); }
.lbtn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.landing-teaser { margin-top: 26px; max-width: 560px; font-size: 0.9375rem; line-height: 1.55; color: var(--mut); background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; }
.landing-teaser b { color: var(--ink); }
.landing-note { margin-top: 18px; font-size: 0.84375rem; color: var(--faint); }
.landing-note b { color: var(--mut); }
.landing-fineprint { max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; font-size: 0.75rem; line-height: 1.5; color: var(--faint); position: relative; z-index: 1; }
.landing-fineprint b { color: var(--mut); }
.landing-foot { text-align: center; padding: 14px 18px 18px; font-size: 0.8125rem; color: var(--faint); position: relative; z-index: 1; }
.wait-ok { margin-top: 14px; padding: 12px 14px; background: var(--green-soft); color: var(--green); border-radius: 10px; font-size: 0.875rem; font-weight: 600; text-align: center; }

/* session compaction divider */
.compact-divider { margin: 14px auto; max-width: 680px; }
.compact-divider.anim { animation: compactIn .5s ease; }
@keyframes compactIn { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: scaleY(1); } }
.compact-toggle { display: block; width: 100%; background: var(--line2); border: 1px dashed var(--line); color: var(--mut); border-radius: 8px; padding: 7px 12px; font-size: 0.8125rem; font-weight: 650; text-align: center; }
.compact-toggle:hover { border-color: var(--accent); color: var(--accent); }
.compact-syn { margin-top: 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 0.84375rem; color: var(--mut); white-space: pre-wrap; line-height: 1.5; }
.share-add { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.share-add input { flex: 1 1 160px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.90625rem; }
.share-add select, .share-add button { flex-shrink: 0; }
.share-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.share-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.share-seats { font-size: 0.78125rem; color: var(--mut); margin-bottom: 4px; }
.share-member { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; padding: 8px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.share-member .role { font-size: 0.71875rem; font-weight: 700; color: var(--faint); margin-left: auto; }
.share-member .rm { background: none; border: none; color: var(--faint); font-weight: 700; padding: 0 4px; }
.share-member .rm:hover { color: var(--red); }
.share-member.pending { border-style: dashed; }
.share-member .acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.share-member .lnk { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 0.78125rem; }
.share-member .lnk:hover { text-decoration: underline; }
.share-member .connbtn { padding: 5px 9px; font-size: 0.78125rem; white-space: nowrap; }
.share-member .pend { font-size: 0.71875rem; font-weight: 700; color: var(--amber); }
.share-member.accepted .pend { color: var(--green); }
.share-member.denied .pend { color: var(--red); }
/* collaborator "ask to share" form */
.share-ask { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.share-ask input, .share-ask textarea { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.90625rem; font-family: inherit; resize: vertical; }
.share-ask input:focus, .share-ask textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* owner's incoming share requests */
.share-reqhead { font-size: 0.75rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); margin: 10px 0 2px; }
.share-req { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.share-req .rq-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.share-req .rq-email { font-weight: 700; font-size: 0.875rem; }
.share-req .rq-by { font-size: 0.75rem; color: var(--mut); }
.share-req .rq-why { font-size: 0.84375rem; color: var(--ink); font-style: italic; line-height: 1.45; }
.share-req .rq-acts { display: flex; gap: 8px; margin-top: 2px; }
.btn.sm { width: auto; padding: 6px 12px; font-size: 0.84375rem; }
.toast.warn { background: var(--amber); }
.toast.sticky { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; border-radius: 12px; padding: 10px 10px 10px 16px; max-width: 420px; line-height: 1.35; }
.toast-x { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.toast-x:hover { background: rgba(255,255,255,.4); }
.invite-banner { background: var(--accent-soft); border: 1px solid #d9dcfb; color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 0.84375rem; line-height: 1.45; margin: 14px 0 4px; }
.field input[readonly] { background: var(--line2); color: var(--mut); cursor: not-allowed; }
.tabs { display: flex; padding: 10px 12px 0; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: none; background: none; padding: 9px 9px; font-weight: 650; color: var(--mut); font-size: 0.84375rem; border-bottom: 2px solid transparent; white-space: nowrap; flex: 0 0 auto; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabwrap { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
/* shared documents tab */
.docs { display: flex; flex-direction: column; gap: 6px; }
.docs-empty { font-size: 0.875rem; line-height: 1.5; padding: 6px 0; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.doc-ic { font-size: 1rem; flex: 0 0 auto; }
.doc-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 0.75rem; color: var(--faint); }
.doc-acts { display: flex; gap: 10px; flex: 0 0 auto; }
.doc-acts .lnk { color: var(--accent); font-weight: 600; font-size: 0.8125rem; text-decoration: none; }
.doc-acts .lnk:hover { text-decoration: underline; }
.work h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); margin-bottom: 10px; }
.work h3.section-gap { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Fixed-height, relatively-positioned wrapper so the responsive radar can't
   feed back into its own container height (endless-growth / scroll bug). */
.radarwrap { position: relative; height: 240px; width: 100%; }
.radarwrap.tall { height: 300px; }
.radarwrap canvas { position: absolute; inset: 0; }

/* compare tab */
.cmp-controls { display: flex; gap: 6px; margin-bottom: 10px; }
.cmp-controls .mini { background: var(--line2); border: none; border-radius: 7px; padding: 5px 10px; font-weight: 650; font-size: 0.8125rem; color: var(--mut); }
.cmp-controls .mini:hover { background: var(--accent-soft); color: var(--accent); }
.compare-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip.cmp { cursor: pointer; }
.chip.cmp.on { border-width: 1.5px; font-weight: 700; }
.compare-chips .empty2 { color: var(--faint); font-size: 0.84375rem; }
.cov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* Dimension-averages bars on the Coverage tab — same bipolar language as the modal */
.cov-chips .urow { display: flex; flex-direction: column; gap: 3px; }
.cov-chips .ulbl { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--mut); font-weight: 600; }
.cov-chips .ubar { position: relative; height: 5px; background: var(--line2); border-radius: 3px; }
.cov-chips .ubar.bipolar::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
.cov-chips .ubar.bipolar > i { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.cov-chips .ubar.bipolar > i.r { left: 50%; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cov-chips .ubar.bipolar > i.l { right: 50%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cov-chips .ubar.bipolar > i.pos { background: var(--green); }
.cov-chips .ubar.bipolar > i.mid { background: var(--amber); }
.cov-chips .ubar.bipolar > i.neg { background: var(--red); }
.cov-chips .ubar.bipolar.na { background: repeating-linear-gradient(45deg, var(--line2) 0 4px, transparent 4px 8px); }
.h3edit { background: none; border: 1px dashed var(--line); border-radius: 12px; padding: 1px 8px; font-size: 0.71875rem; font-weight: 700; color: var(--mut); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.h3edit:hover { border-color: var(--accent); color: var(--accent); }

/* dimensions editor */
.dim-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.dim-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dim-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dim-head .dlabel { flex: 1; font-weight: 700; font-size: 0.875rem; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; }
.dim-head .dlabel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dim-head .rm { background: none; border: none; color: var(--faint); font-weight: 700; padding: 0 4px; }
.dim-head .rm:hover { color: var(--red); }
.dim-vals { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dim-vals .tag { display: inline-flex; align-items: center; gap: 4px; }
.dim-vals .tag button { background: none; border: none; color: var(--accent); opacity: .55; font-weight: 700; padding: 0 1px; }
.dim-vals .tag button:hover { opacity: 1; color: var(--red); }
.dim-desc { width: 100%; margin-top: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.8125rem; font-family: inherit; }
.dim-desc:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dim-weight { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 0.75rem; font-weight: 700; color: var(--mut); }
.dim-weight input[type=range] { flex: 1; accent-color: var(--accent); }
.dim-weight .wlbl { flex: 0 0 34px; text-align: right; color: var(--ink); }
.dimscore-head { font-size: 0.84375rem; color: var(--mut); margin-top: 12px; }
.dimscore-head b { font-size: 0.9375rem; color: var(--accent); }
.dim-add { display: flex; gap: 8px; }
.dim-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.875rem; }
/* domains dimension's nested stack-rank sub-editor (tracked extensions, ranked) */
.dim-domranks { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dim-sec { font-size: 0.71875rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.dim-domrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line2); }
.dim-domrow:last-of-type { border-bottom: none; }
.dom-name { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.dom-toprank { font-size: 0.6875rem; font-weight: 700; color: var(--accent); }
.dom-rank-acts { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dom-rank-acts .rm { background: none; border: none; color: var(--faint); font-weight: 700; padding: 2px 5px; border-radius: 6px; }
.dom-rank-acts .rm:hover:not(:disabled) { color: var(--ink); background: var(--line2); }
.dom-rank-acts .rm:disabled { opacity: .3; cursor: default; }
.cov-group { margin-bottom: 10px; }
.cov-group .lbl { font-size: 0.75rem; font-weight: 700; color: var(--mut); margin-bottom: 4px; }
.tag { font-size: 0.75rem; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tag.off { background: var(--line2); color: var(--faint); }

/* names table */
.names { display: flex; flex-direction: column; gap: 8px; }
/* Names tab header with the Finder-style depth selector */
.names-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.names-head h3 { margin: 0; }
.view-switch { display: inline-flex; background: var(--line2); border-radius: 8px; padding: 2px; gap: 2px; }
.view-switch button { border: none; background: none; cursor: pointer; width: 28px; height: 24px; border-radius: 6px; font-size: 0.9375rem; line-height: 1; color: var(--mut); display: grid; place-items: center; }
.view-switch button:hover { color: var(--ink); }
.view-switch button.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hidden-slot:empty { display: none; }
.hidden-slot { margin: 4px 0 8px; }
.hidden-toggle { font-size: 0.78125rem; color: var(--faint); margin-bottom: 2px; }
.hidden-toggle a { color: var(--accent); font-weight: 600; cursor: pointer; }
.hidden-toggle a:hover { text-decoration: underline; }
/* resurface prompt under an assistant message */
.resurface { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.resurf { display: flex; align-items: center; gap: 8px; font-size: 0.84375rem; background: var(--amber-soft); border: 1px solid #f0d9a8; border-radius: 9px; padding: 6px 10px; }
.resurf > span { flex: 1; }
.resurf button { border: none; border-radius: 7px; padding: 3px 10px; font-weight: 650; font-size: 0.78125rem; }
.resurf .ok { background: var(--accent); color: #fff; }
.resurf .no { background: var(--surface); border: 1px solid var(--line); color: var(--mut); }
/* --- verdict states (handoff §2.1): dot + chip replace the 0–100 score ---
   clear/catch = something's claimable (green/amber, pair with .vclaim); gone = clean
   name but every checked domain is taken (red, same severity as conflict but a
   different reason — don't reuse the "conflict" state for it). */
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.dot.clear { background: var(--green); }
.dot.catch { background: var(--amber); }
.dot.caution { background: var(--amber); }
.dot.gone { background: var(--red); }
.dot.conflict { background: var(--red); }
.dot.unknown { background: transparent; border: 2px solid var(--faint-2); }
.vchip { display: inline-flex; gap: 5px; align-items: center; font: 700 0.8125rem/1 var(--font); border-radius: var(--r-pill); padding: 4px 9px; border: 1px solid transparent; white-space: nowrap; }
.vchip.clear { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-line); }
.vchip.catch { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }
.vchip.caution { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }
.vchip.gone { color: var(--red-ink); background: var(--red-bg); border-color: var(--red-line); }
.vchip.conflict { color: var(--red-ink); background: var(--red-bg); border-color: var(--red-line); }
.vchip.unknown { color: var(--mut); background: var(--surface-3); border-color: var(--line); }
/* the action a "clear"/"domain snag" verdict should provoke: go claim the open domain */
.vclaim { flex: 0 0 auto; font: 700 0.78125rem/1 var(--font); color: var(--accent); text-decoration: none; white-space: nowrap; }
.vclaim:hover { text-decoration: underline; }
/* left accent border = verdict hue (redundant w/ dot for color-blind safety) */
.ncard.v-clear { box-shadow: inset 3px 0 0 var(--green); }
.ncard.v-catch { box-shadow: inset 3px 0 0 var(--amber); }
.ncard.v-caution { box-shadow: inset 3px 0 0 var(--amber); }
.ncard.v-gone { box-shadow: inset 3px 0 0 var(--red); }
.ncard.v-conflict { box-shadow: inset 3px 0 0 var(--red); }
.ncard.v-unknown { box-shadow: inset 3px 0 0 var(--line-strong); }
.ncard .nc-grow { flex: 1; }
.ncard { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px 11px 14px; display: flex; gap: 10px; align-items: flex-start; }
.ncard .nc-body { flex: 1; min-width: 0; }
.ncard .nc-spider { flex: 0 0 auto; line-height: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ncard .nc-spider .nc-ov { font-size: 0.75rem; font-weight: 800; color: var(--mut); line-height: 1; }
.ncard .nc-spider:hover { opacity: .8; }
.ncard.shortlist { border-color: var(--accent); border-width: 1.5px; background: var(--accent-tint); }
.ncard.shortlist .st.star { opacity: 1; color: var(--star); }
.ncard.rejected { opacity: .5; }
.ncard .row1 { display: flex; align-items: center; gap: 8px; }
.ncard .nm { font-weight: 750; font-size: 0.9375rem; letter-spacing: -.3px; }
.ncard .sc { margin-left: auto; font-weight: 800; font-size: 0.875rem; color: var(--accent); }
.ncard .st { background: none; border: none; font-size: 0.875rem; padding: 1px 3px; border-radius: 5px; line-height: 1; opacity: .4; display: inline-flex; align-items: center; color: var(--mut); cursor: pointer; }
.ncard .st:hover { opacity: 1; background: var(--line2); }
.ncard .st.aside.on { opacity: 1; color: var(--accent); }
/* set-aside "why?" toast — dark, soft, optional (handoff §2.9) */
.why-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 700;
  width: min(360px, calc(100vw - 32px)); background: var(--ink-dark); color: var(--on-dark);
  border-radius: var(--r-xl); box-shadow: var(--e-toast); padding: 14px 16px; opacity: 0;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.why-toast.in { opacity: 1; transform: translate(-50%, 0); }
.why-toast .wt-head { font-size: 0.9375rem; font-weight: 700; }
.why-toast .wt-head b { color: var(--on-dark-accent); }
.why-toast .wt-sub { font-size: 0.8125rem; color: var(--on-dark-mut); margin: 3px 0 10px; }
.why-toast .wt-reasons { display: flex; gap: 8px; flex-wrap: wrap; }
.why-toast .wt-reasons button { background: rgba(255,255,255,.1); color: var(--on-dark); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); padding: 6px 12px; font: 600 0.84375rem var(--font); cursor: pointer; }
.why-toast .wt-reasons button:hover { background: rgba(255,255,255,.18); }
.why-toast .wt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.why-toast .wt-foot .muted { color: var(--on-dark-mut); font-size: 0.75rem; }
.why-toast .wt-undo { background: none; border: none; color: var(--on-dark-accent); font-weight: 700; font-size: 0.84375rem; cursor: pointer; padding: 0; }
.ncard .st.on { opacity: 1; }
.ncard .st.star.on { color: var(--accent); }
.ncard .st.rej.on { color: var(--red); }
.ncard .mean { font-size: 0.8125rem; color: var(--mut); margin: 5px 0 8px; }
.verdict { font-size: 0.71875rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.verdict.clean { background: var(--green-soft); color: var(--green); }
.verdict.contaminated { background: var(--amber-soft); color: var(--amber); }
.verdict.blocked { background: var(--red-soft); color: var(--red); }
.doms { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.dom { border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; }
.dom .tld { font-weight: 700; font-size: 0.8125rem; }
.dom .av { font-size: 0.6875rem; font-weight: 700; padding: 1px 5px; border-radius: 10px; margin-left: 5px; }
.dom .av.y { background: var(--green-soft); color: var(--green); }
.dom .av.n { background: var(--red-soft); color: var(--red); }
.dom .pr { font-size: 0.75rem; color: var(--mut); margin-top: 3px; line-height: 1.4; }
.dom .pr b { color: var(--ink); }
.est-tag { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: var(--line2); color: var(--faint); padding: 0 4px; border-radius: 4px; }
/* on-demand domain check button */
.dom-check { background: var(--accent-soft); color: var(--accent); border: none; border-radius: 8px; padding: 5px 10px; font-size: 0.78125rem; font-weight: 700; }
.dom-check:hover { filter: brightness(.97); }
.dom-check:disabled { opacity: .6; }
/* trademark search link (opens official registries via TMview) */
.tm-check { background: var(--accent-bg); color: var(--accent); border: none; border-radius: var(--r-sm); padding: 5px 10px; font-size: 0.78125rem; font-weight: 700; cursor: pointer; }
.tm-check:hover { background: var(--accent-soft); }
.tm-check:disabled { opacity: .6; }
.tm-recheck { background: none; border: none; color: var(--accent); font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0 2px; }
.tm-recheck:hover { text-decoration: underline; }
.dtl-prov { font-size: 0.75rem; color: var(--green-ink); margin: 3px 0 5px; }
.handle-links { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
/* handle availability chips (#87): real taken / available / unknown verdicts */
.hd-chip { display: inline-flex; align-items: baseline; gap: 4px; font-size: 0.71875rem; font-weight: 650; text-decoration: none; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); }
.hd-chip b { font-weight: 800; }
.hd-chip.y { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.hd-chip.n { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.hd-chip.u { background: var(--surface-2); color: var(--mut); }
.hd-chip:hover { filter: brightness(0.97); }
.tm-link { display: inline-block; margin-top: 6px; color: var(--accent); font-size: 0.75rem; font-weight: 650; text-decoration: none; }
.tm-link:hover { text-decoration: underline; }
.tm-links { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tm-links .tm-link { margin-top: 0; }
.tm-links .tm-note { font-size: 0.71875rem; }
#spiderBody .dom-check { padding: 3px 9px; }

/* name leaderboard */
.nl { display: flex; flex-direction: column; gap: 7px; }
.nl-row { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; cursor: pointer; }
.nl-row:hover { border-color: var(--accent); }
.nl-row.top { background: var(--accent-soft); border-color: #d9dcfb; }
.nl-row.shortlist { box-shadow: inset 3px 0 0 var(--accent); }
.nl-row.rejected { opacity: .5; }
.nl-rank { font-weight: 800; font-size: 0.8125rem; color: var(--faint); width: 16px; text-align: center; flex: 0 0 auto; }
.nl-spider { flex: 0 0 auto; line-height: 0; }
.nl-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nl-nm { font-weight: 750; font-size: 0.9375rem; letter-spacing: -.2px; }
.nl-sub { font-size: 0.75rem; color: var(--mut); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.nl-score { margin-left: auto; font-weight: 800; font-size: 0.9375rem; color: var(--accent); flex: 0 0 auto; }
#spiderBody .axes { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
#spiderBody .axrow { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; cursor: help; }
#spiderBody .axrow .lbl { flex: 0 0 96px; color: var(--mut); }
#spiderBody .axrow .bar { flex: 1; height: 6px; background: var(--line2); border-radius: 4px; overflow: hidden; }
#spiderBody .axrow .bar > i { display: block; height: 100%; background: var(--accent); }
#spiderBody .axrow .v { flex: 0 0 28px; text-align: right; font-weight: 700; }
/* ⓘ affordance: each dimension explains *why* it scored what it did (req #3) */
#spiderBody .axrow .ax-i { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--faint); font: 700 0.625rem/0.875rem var(--font); text-align: center; cursor: pointer; }
#spiderBody .axrow:hover .ax-i { border-color: var(--accent); color: var(--accent); }
/* custom info tooltip (#118 follow-up): instant on hover, pins on click/tap */
.info-tip { position: fixed; z-index: 1100; max-width: 260px; background: var(--ink); color: #fff; font-size: 0.8125rem; line-height: 1.45; font-weight: 500; padding: 8px 11px; border-radius: 9px; box-shadow: 0 6px 22px rgba(16,23,41,.28); pointer-events: none; }
.info-tip.hidden { display: none; }
.info-tip::after { content: ''; position: absolute; top: 100%; left: var(--tip-cx, 50%); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.info-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
#spiderBody .dtl-head { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 700; }
#spiderBody .dtl { display: flex; flex-direction: column; gap: 6px; }
#spiderBody .dtl-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.8125rem; }
#spiderBody .dtl-row .dtl-k { flex: 0 0 96px; color: var(--mut); font-weight: 600; }
#spiderBody .dtl-row .dtl-v { flex: 1; min-width: 0; }
#spiderBody .dtl-row .av { font-size: 0.6875rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
#spiderBody .dtl-row .av.y { background: var(--green-soft); color: var(--green); }
#spiderBody .dtl-row .av.n { background: var(--red-soft); color: var(--red); }
#spiderBody .dtl-row .av.own { background: var(--accent-bg); color: var(--accent); } /* #86 owned */
/* "I own this" domain toggle (#86) */
.dom-own { background: none; border: 1px solid var(--line-strong); color: var(--mut); border-radius: var(--r-pill); padding: 2px 9px; font-size: 0.71875rem; font-weight: 700; cursor: pointer; margin-left: 6px; }
.dom-own:hover { border-color: var(--accent); color: var(--accent); }
.dom-own.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
/* wide two-column name detail popup */
.namepop-card { width: 92vw; }
.namepop { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.namepop .np-left { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.namepop .np-spider { line-height: 0; }
.namepop .np-overall { font-size: 0.875rem; }
.namepop .np-overall b { font-size: 1rem; color: var(--accent); }
.namepop .np-meta { width: 100%; display: flex; flex-direction: column; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.namepop .np-mrow { display: flex; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 0.84375rem; }
.namepop .np-mrow dt { flex: 0 0 96px; color: var(--mut); font-weight: 600; margin: 0; text-transform: capitalize; }
.namepop .np-mrow dd { flex: 1; min-width: 0; margin: 0; }
.namepop .np-right { min-width: 0; }
.namepop .np-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 700; margin-bottom: 10px; }
.dim-refresh { text-transform: none; letter-spacing: normal; background: var(--accent-soft); color: var(--accent); border: none; border-radius: 8px; padding: 4px 9px; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.dim-refresh:hover { filter: brightness(.97); }
.dim-refresh:disabled { opacity: .6; cursor: default; }
#spiderBody .axrow .bar > i.warn { background: var(--amber); }
#spiderBody .axrow .bar > i.low { background: var(--red); }
/* Bipolar −100…+100 dimension bars (#194): center tick = 0; a negative score pulls
   left (red), positive pulls right (green), near-zero is amber either way; a hatched
   track with no fill = not evaluated yet — distinct from "evaluated: no". */
#spiderBody .axrow .bar.bipolar { position: relative; overflow: visible; }
#spiderBody .axrow .bar.bipolar::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); }
#spiderBody .axrow .bar.bipolar > i { position: absolute; top: 0; height: 100%; border-radius: 4px; }
#spiderBody .axrow .bar.bipolar > i.r { left: 50%; border-top-left-radius: 0; border-bottom-left-radius: 0; }
#spiderBody .axrow .bar.bipolar > i.l { right: 50%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#spiderBody .axrow .bar.bipolar > i.pos { background: var(--green); }
#spiderBody .axrow .bar.bipolar > i.mid { background: var(--amber); }
#spiderBody .axrow .bar.bipolar > i.neg { background: var(--red); }
#spiderBody .axrow .bar.bipolar.na { background: repeating-linear-gradient(45deg, var(--line2) 0 4px, transparent 4px 8px); }
#spiderBody .axrow .v { min-width: 34px; }
#spiderBody .axrow .v.na { color: var(--faint); font-weight: 600; }
#spiderBody .axrow .v.pos { color: var(--green-ink); }
#spiderBody .axrow .v.mid { color: var(--amber-ink); }
#spiderBody .axrow .v.neg { color: var(--red-ink); }
/* Implicit human axes (Team ♥ / Reviewers ♥) — visually part of the profile, tinted */
#spiderBody .axrow.implicit .lbl { color: var(--accent); font-weight: 700; }
@media (max-width: 620px) { .namepop { grid-template-columns: 1fr; gap: 16px; } }

/* phones: marketing + modals */
@media (max-width: 560px) {
  .landing-top { padding: 16px 18px; }
  .landing-hero { padding: 14px 18px 36px; }
  .landing-cta { width: 100%; }
  .lbtn { flex: 1; min-width: 140px; padding: 13px 18px; }
  .landing-teaser { font-size: 0.875rem; padding: 11px 14px; }
  .modal { padding: 12px; align-items: flex-start; }
  .modal-card, .auth-card { width: 100% !important; max-width: 100% !important; max-height: 92vh; overflow-y: auto; }
  .plans { grid-template-columns: 1fr; }
  .admin-body { padding: 14px; }
  .atable { font-size: 0.78125rem; }
}
.np-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.np-del { background: none; border: 1px solid var(--line); color: var(--red); border-radius: 8px; padding: 6px 12px; font-size: 0.8125rem; font-weight: 650; }
.np-del:hover { border-color: var(--red); background: var(--red-soft); }
/* per-name reviews */
.np-reviews { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-like { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.rv-like .rv-lk { font-size: 0.84375rem; color: var(--mut); flex: 0 0 auto; }
/* Bipolar like scale (#194): the track itself is the legend — red (dislike) through
   amber (torn, 0) to green (love). The thumb grays out until the user actually rates. */
.rv-like input[type=range] { flex: 1; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--red) 0%, var(--amber) 42%, var(--amber) 58%, var(--green) 100%); outline: none; }
.rv-like input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer; }
.rv-like input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer; }
.rv-like input[type=range][data-rated=""]::-webkit-slider-thumb { border-color: var(--faint); }
.rv-like input[type=range][data-rated=""]::-moz-range-thumb { border-color: var(--faint); }
.rv-like b { min-width: 58px; text-align: right; font-size: 0.875rem; }
.rv-clear { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 0.8125rem; padding: 2px 5px; border-radius: 5px; }
.rv-clear:hover { background: var(--line2); color: var(--ink); }
.rv-ta { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 0.875rem; line-height: 1.45; resize: vertical; min-height: 46px; font-family: inherit; margin-bottom: 8px; background: #fff; }
.rv-ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rv-note-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; color: var(--mut); margin: 2px 0 6px; }
.rv-share { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 0.78125rem; color: var(--mut); cursor: pointer; }
.rv-save { display: flex; align-items: center; gap: 10px; }
.rv-msg { font-size: 0.8125rem; color: var(--mut); }
.rv-others { display: flex; flex-direction: column; gap: 9px; }
.rv-other { display: flex; gap: 9px; align-items: flex-start; }
.rv-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.6875rem; font-weight: 800; flex: 0 0 auto; }
.rv-ob { flex: 1; min-width: 0; }
.rv-oh { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.rv-likebadge { font-size: 0.71875rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 10px; }
.rv-text { font-size: 0.84375rem; color: var(--ink); margin-top: 2px; }
.rv-text.rv-note { color: var(--mut); font-style: italic; }
/* "ask about this name" — a compact Q&A thread scoped to one candidate */
.np-namechat { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.nc-thread { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; margin: 8px 0 10px; }
.nc-thread .msg .body { font-size: 0.84375rem; }
.nc-empty { font-size: 0.8125rem; padding: 4px 0; }
.nc-input { display: flex; gap: 8px; }
.nc-input input { flex: 1; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 0.875rem; font-family: inherit; background: #fff; }
.nc-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nl-like { color: var(--accent); font-weight: 700; }
.nl-like.loved { color: var(--green-ink); }
/* Overall (−100…+100) column on leaderboard rows; "—" = not evaluated yet */
.nl-ov { flex: 0 0 auto; min-width: 34px; text-align: right; font-size: 0.78125rem; font-weight: 800; color: var(--mut); }
/* Human-love chip on name cards (#194) — the room's endorsement pops even when the
   measured verdict is lukewarm */
.lovechip { display: inline-flex; align-items: center; gap: 3px; font: 700 0.75rem/1 var(--font); color: var(--green-ink); background: var(--green-bg); border: 1px solid var(--green-line); border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; }

/* direction map (mindmap) */
.mapwrap { display: flex; flex-direction: column; gap: 2px; }
.map-node { display: flex; align-items: center; gap: 7px; padding: 4px 0; cursor: default; }
.map-node .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.map-node.branch { cursor: pointer; }
.map-node.branch:hover .lbl { color: var(--accent); }
.map-node .twist { width: 12px; text-align: center; color: var(--faint); font-size: 0.6875rem; flex: 0 0 auto; }
.map-node .lbl { font-size: 0.875rem; }
.map-node.root .lbl { font-weight: 800; }
.map-node.branch .lbl { font-weight: 650; }
.map-node.leaf .lbl { font-size: 0.84375rem; }
.map-node .ct { font-size: 0.71875rem; color: var(--faint); margin-left: 4px; }
.map-leaf-verdict { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
/* radial mindmap (#32) */
.mindmap-svg { display: block; width: 100%; height: auto; max-height: 64vh; }
.mindmap-svg .mm-leaf, .mindmap-svg .mm-dir { cursor: pointer; }
.mindmap-svg .mm-leaf text { transition: fill .12s ease; }
.mindmap-svg .mm-leaf:hover text { fill: var(--accent); font-weight: 700; }
.mindmap-svg .mm-leaf:hover circle { stroke: var(--accent); }
.mindmap-svg .mm-dir:hover circle { stroke: #fff; stroke-width: 2.5; }

/* leaderboard (models) */
.lb { display: flex; flex-direction: column; gap: 10px; }
.lb-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lb-row .h { display: flex; align-items: center; gap: 8px; }
.lb-row .rank { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; }
.lb-row.top .rank { background: var(--accent); }
.lb-row .ml { font-weight: 700; font-size: 0.90625rem; }
.lb-row .q { margin-left: auto; font-weight: 800; color: var(--accent); }
.bar { height: 6px; background: var(--line2); border-radius: 4px; margin: 8px 0 6px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.lb-row .stats { display: flex; gap: 14px; font-size: 0.75rem; color: var(--mut); }
.empty { color: var(--faint); font-size: 0.875rem; text-align: center; padding: 30px 10px; line-height: 1.5; }
.est { font-size: 0.71875rem; color: var(--faint); margin-top: 10px; }

@media (max-width: 1100px) { .app { grid-template-columns: 200px minmax(0, 1fr) 340px; } .resizer { display: none; } }

/* mobile bar / drawer — hidden on desktop */
.mobilebar, .drawer-backdrop { display: none; }

/* ---------- phones: one pane at a time + drawer sidebar ---------- */
@media (max-width: 800px) {
  .app { display: block; height: 100vh; height: 100dvh; }
  .mobilebar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px;
    border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 30; }
  .mb-btn { background: none; border: none; font-size: 1.3125rem; color: var(--ink); padding: 4px 10px; line-height: 1; }
  .mb-seg { display: flex; gap: 4px; background: var(--line2); padding: 3px; border-radius: 9px; margin-left: auto; }
  .mb-tab { border: none; background: none; padding: 7px 16px; border-radius: 7px; font-weight: 650; font-size: 0.875rem; color: var(--mut); }
  .mb-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

  .resizer, .sidebar-expand { display: none !important; }

  /* sidebar → off-canvas drawer */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 84vw; max-width: 320px; border-right: 1px solid var(--line);
    transform: translateX(-100%); transition: transform .25s ease; z-index: 410; }
  #app.drawer-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 405; }
  #app:not(.drawer-open) .drawer-backdrop { display: none; }
  #app.drawer-open .drawer-backdrop { display: block; }
  .side-collapse { display: none; }

  /* work + chat fill the area below the bar; show one at a time */
  .work, .chatpane { position: fixed; top: 50px; left: 0; right: 0; bottom: 0; border: none; }
  #app:not(.mv-work) .work { display: none; }
  #app.mv-work .chatpane { display: none; }
  .workhead { padding: 12px 16px; }
  .composer { max-width: none; padding: 8px 12px 14px; }
  .tabwrap { padding: 14px; }
}
/* --- convergence stepper → duel → dark Done (handoff §2.7–2.8) --- */
.converge { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.converge .cv-label { font-size: 0.6875rem; font-weight: 800; letter-spacing: .8px; color: var(--accent); flex: 0 0 auto; }
.converge .cv-funnel { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--mut); }
.converge .cv-step b { color: var(--ink); font-weight: 800; }
.converge .cv-arrow { color: var(--faint-2); }
.converge .cv-grow { flex: 1; }
.converge .cv-hint { font-size: 0.78125rem; color: var(--faint); }
.converge .cv-decide { width: auto; padding: 7px 16px; }
/* duel modal */
.duel-card { width: 100%; max-width: 620px; background: var(--surface); border-radius: var(--r-2xl); box-shadow: var(--e-modal); padding: 22px; }
.duel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.duel-head h2 { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.3px; }
.duel-head .x { background: none; border: none; font-size: 1.125rem; color: var(--faint); cursor: pointer; }
.duel-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; margin: 14px 0; }
.duel-vs { align-self: center; font-size: 0.8125rem; font-weight: 800; color: var(--faint); text-transform: uppercase; }
.duel-pick { text-align: left; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: 16px; cursor: pointer; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.duel-pick:hover { transform: translateY(-2px); box-shadow: var(--e-card); }
.duel-pick.mine { border-color: var(--accent); background: var(--accent-tint); }
.duel-pick.v-clear { box-shadow: inset 3px 0 0 var(--green); }
.duel-pick.v-catch { box-shadow: inset 3px 0 0 var(--amber); }
.duel-pick.v-caution { box-shadow: inset 3px 0 0 var(--amber); }
.duel-pick.v-gone { box-shadow: inset 3px 0 0 var(--red); }
.duel-pick.v-conflict { box-shadow: inset 3px 0 0 var(--red); }
.duel-pick .dp-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.duel-pick .dp-mean { font-size: 0.875rem; color: var(--mut); margin: 5px 0 12px; line-height: 1.45; }
.duel-pick .dp-foot { display: flex; align-items: center; justify-content: space-between; }
.duel-pick .dp-votes { display: inline-flex; align-items: center; gap: 4px; }
.duel-av { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.6875rem; font-weight: 800; display: grid; place-items: center; margin-left: -6px; border: 2px solid var(--surface); }
.duel-pick .dp-count { font-weight: 800; font-size: 0.875rem; color: var(--ink); margin-left: 4px; }
.duel-resolve { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 24px; }
.duel-status { font-size: 0.84375rem; color: var(--mut); }
.duel-won { font-size: 1.25rem; font-weight: 800; letter-spacing: -.3px; animation: pop var(--t-base) var(--ease) both; }
.duel-won b { color: var(--accent); }
.duel-resolve .btn.dark { width: auto; padding: 10px 22px; }
/* Done — the dark, singular finish */
.done-card { width: 100%; max-width: 460px; background: var(--ink-dark); color: var(--on-dark); border-radius: var(--r-2xl); box-shadow: var(--e-modal); padding: 34px 30px; text-align: center; animation: pop var(--t-base) var(--ease) both; }
.done-badge { font-size: 0.8125rem; font-weight: 700; letter-spacing: .5px; color: var(--on-dark-accent); text-transform: uppercase; }
.done-name { font-size: 2.875rem; font-weight: 800; letter-spacing: -1.5px; margin: 8px 0 14px; line-height: 1; }
.done-dom { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.875rem; }
.done-dom .done-tld { font-weight: 700; }
.done-dom .done-price { color: var(--on-dark-mut); }
.done-claim { width: 100%; background: var(--accent); color: #fff; }
.done-claim:hover { filter: brightness(1.08); }
.done-close { background: none; border: none; color: var(--on-dark-mut); font-size: 0.84375rem; cursor: pointer; margin-top: 12px; }
.done-close:hover { color: var(--on-dark); }

/* ============================================================
   v2 ROOM SHELL — top bar · thread (main) · shared-list rail
   (the mockup layout; supersedes the 3-pane grid for v2)
   ============================================================ */
#app.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
#app.hidden { display: none !important; }
/* mobile bottom dock — hidden on desktop (both panes show side-by-side there) */
.mdock { display: none; }
/* brief "✦ Brief" chip — phones only (opens the brief sheet) */
.brief-chip { display: none; }
/* top room bar */
.roombar { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; position: relative; z-index: 30; }
.rb-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 1rem; flex: 0 0 auto; }
.rb-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
/* Multi-brand front doors (#201): an admin-set logo replaces the dot in wordmarks,
   and rooms living under another brand get a labelled group in the room selector. */
.brand-logo { height: 18px; width: auto; max-width: 90px; border-radius: 4px; vertical-align: -4px; }
.brand-logo.sm { height: 13px; margin-right: 5px; vertical-align: -2px; }
.s-brand-h { font-size: 0.71875rem; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; padding: 12px 10px 4px; border-top: 1px solid var(--line); margin-top: 8px; }
/* #227: tiny app mock in the Brands admin — previews a brand palette via the
   same derived tokens the real front door gets (inline style on .brand-mini). */
.brand-mini { display: inline-flex; flex-direction: column; gap: 6px; width: 190px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); font-size: 0.71875rem; color: var(--ink); }
.brand-mini .bm-top { display: flex; align-items: center; gap: 5px; font-weight: 800; }
.brand-mini .bm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.brand-mini .bm-msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 7px; }
.brand-mini .bm-msg b { color: var(--accent); display: block; font-size: 0.65625rem; }
.brand-mini .bm-row { display: flex; gap: 6px; align-items: center; }
.brand-mini .bm-chip { background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); padding: 2px 8px; font-weight: 700; }
.brand-mini .bm-btn { background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 3px 10px; font-weight: 700; }
/* #243: brands list as a card grid + roomy modal forms */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; margin-top: 12px; }
.brand-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.brand-card:hover { border-color: var(--accent); box-shadow: 0 2px 14px rgba(0, 0, 0, .06); }
.bc-head { display: flex; gap: 14px; align-items: flex-start; }
.bc-idkit { flex: 1; min-width: 0; }
.bc-name { font-weight: 800; font-size: 0.96875rem; display: flex; align-items: center; gap: 8px; }
.bc-name img { height: 18px; width: 18px; border-radius: 4px; }
.bc-id { font-weight: 600; font-size: 0.71875rem; color: var(--mut); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; }
.bc-domain { font-size: 0.84375rem; color: var(--mut); margin-top: 3px; }
.bc-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-fact { font-size: 0.75rem; font-weight: 600; color: var(--mut); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.bc-fact.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.bc-actions { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; font-size: 0.84375rem; }
.bc-remove { color: var(--red-ink); }
.brand-card.bc-add { border-style: dashed; align-items: center; justify-content: center; gap: 8px; cursor: default; min-height: 150px; }
.brand-card.bc-add:hover { box-shadow: none; }
.bc-add-title { font-weight: 800; color: var(--mut); }
.brand-card.bc-add input { width: 80%; }
#brandModalBody { min-height: 460px; display: flex; flex-direction: column; }
#brandModalBody > .bfm, #brandModalBody > div:last-child { flex: 0 0 auto; }
.bfm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 8px; }
.bfm label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--mut); }
.bfm input, .bfm select, .bfm textarea { width: 100%; font-size: 0.90625rem; }
.bfm textarea { resize: vertical; }
.bfm .bfm-hero { font-size: 1.0625rem; font-weight: 700; }
.bfm-wide { grid-column: 1 / -1; }
.bfm label.bfm-chk { flex-direction: row; align-items: center; gap: 8px; }
.bfm label.bfm-chk input { width: auto; }
/* #246: rooms whose brand runs no checks get NO verdict chip at all */
.vchip.none, .dot.none, .ncard.v-none .vclaim { display: none; }
/* #241: the wide brand modal — category tabs + the paywall in edit mode */
.brand-tabs { display: flex; gap: 2px; margin: 4px 0 14px; border-bottom: 1px solid var(--line); }
.brand-tab { padding: 7px 13px; font-weight: 700; font-size: 0.84375rem; color: var(--mut); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.brand-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.brand-tab:hover { color: var(--ink); }
/* Launch checklist (#259) — numbered go-live steps with live-check pills */
.launch-step { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; background: var(--surface); }
.launch-step-h { display: flex; align-items: center; gap: 9px; font-size: 0.90625rem; }
.launch-step-h code { font-size: 0.84375rem; }
.launch-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.78125rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.launch-step-b { margin-top: 6px; padding-left: 29px; display: flex; flex-direction: column; gap: 6px; }
.launch-step-b .muted { font-size: 0.84375rem; line-height: 1.55; }
.launch-cmd { display: flex; align-items: center; gap: 10px; }
.launch-cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-size: 0.8125rem; }
.lpill { flex: 0 0 auto; margin-left: auto; font-size: 0.71875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.launch-step-h .lpill { margin-left: 6px; }
.lpill.ok { color: var(--green-ink); background: var(--green-bg); border: 1px solid var(--green-line); }
.lpill.warn { color: var(--amber-ink); background: var(--amber-bg); border: 1px solid var(--amber-line); }
.lpill.bad { color: var(--red-ink); background: var(--red-bg); border: 1px solid var(--red-line); }
.lpill.off { color: var(--mut); background: var(--bg); border: 1px solid var(--line); }
.bb-edit .bb-in { border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface); padding: 2px 6px; font: inherit; color: inherit; min-width: 0; }
.bb-edit .bb-in:focus { border-style: solid; border-color: var(--accent); outline: none; }
.bb-edit h3 .bb-in { font-weight: 800; width: 100%; }
.bb-edit .plan-tagline .bb-in { width: 100%; font-size: 0.8125rem; }
.bb-edit .price .bb-num { font-size: 1.125rem; font-weight: 800; width: 74px; }
.bb-edit .plan-period .bb-in { font-size: 0.8125rem; width: 100%; }
.bb-facts { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--mut); }
.bb-facts li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bb-facts .bb-num, .bb-facts .bb-in { width: 76px; text-align: right; }
.bb-actions { display: flex; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.plan-card.bb-add { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--mut); font-weight: 700; cursor: pointer; min-height: 120px; }
.plan-card.bb-add:hover, .pack-card.bb-add:hover { border-color: var(--accent); color: var(--accent); }
.pack-card.bb-add { border-style: dashed; cursor: pointer; }
.bb-pack { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-pack .bb-num { width: 54px; text-align: right; }
/* #231: a branded front door's chat avatar renders the brand icon */
.av.av-brand { padding: 0; overflow: hidden; }
.av.av-brand img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.room-switch { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; max-width: 340px; }
.room-switch:hover { border-color: var(--accent); }
.room-switch .rs-name { font-weight: 700; font-size: 0.90625rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-switch .rs-meta { font-size: 0.75rem; color: var(--mut); display: inline-flex; align-items: center; }
.room-switch .rs-avs { display: inline-flex; align-items: center; }
.room-switch .rs-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 0.625rem; font-weight: 800; border: 2px solid var(--surface-2); margin-left: -6px; }
.room-switch .rs-av:first-child { margin-left: 0; }
.room-switch .rs-av.feedback { box-shadow: 0 0 0 1.5px var(--amber) inset; }
.room-switch .rs-av.more { background: var(--line-strong); color: var(--mut); }
.room-switch .rs-caret { color: var(--faint); font-size: 0.6875rem; }
.room-menu { position: absolute; top: 52px; left: 130px; width: 320px; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-pop); padding: 8px; z-index: 40; }
.room-menu .rm-newbtn { display: block; width: 100%; background: var(--accent); color: #fff; border: none; border-radius: var(--r-md); padding: 10px; font-weight: 700; font-size: 0.90625rem; cursor: pointer; }
.room-menu .rm-newbtn:hover { filter: brightness(1.06); }
.room-menu .rm-import { display: block; width: 100%; background: none; border: none; color: var(--mut); font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 7px; margin-top: 2px; border-radius: var(--r-sm); }
.room-menu .rm-import:hover { background: var(--surface-2); color: var(--accent); }
.room-menu .searchlist { flex: none; overflow: visible; padding: 6px 0 2px; border-top: 1px solid var(--line2); margin-top: 6px; }
.room-menu .s-item { position: static; padding: 9px 11px; }
.room-menu .s-row { display: flex; align-items: center; gap: 7px; }
.room-menu .s-item .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.room-menu .s-item .rs-avs { display: inline-flex; align-items: center; flex: 0 0 auto; }
.room-menu .s-item .rs-av { width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 0.5625rem; font-weight: 800; border: 1.5px solid var(--surface); margin-left: -5px; }
.room-menu .s-item .rs-av:first-child { margin-left: 0; }
.room-menu .s-item .rs-av.feedback { box-shadow: 0 0 0 1px var(--amber) inset; }
.room-menu .s-item .rs-av.pending { opacity: .55; border-style: dashed; }
.room-menu .s-item .rs-av.more { background: var(--line-strong); color: var(--mut); }
.room-menu .s-cur { font-size: 0.6875rem; font-weight: 700; color: var(--accent); background: var(--accent-bg); border-radius: var(--r-pill); padding: 2px 7px; flex: 0 0 auto; }
.room-menu .s-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.room-menu .s-actions button { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 9px; font-size: 0.78125rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.room-menu .s-actions button:hover { border-color: var(--accent); color: var(--accent); }
.room-menu .s-actions button.danger { color: var(--red); }
.room-menu .s-actions button.danger:hover { border-color: var(--red); }
.room-menu .usage { margin-top: 8px; border-top: 1px solid var(--line2); padding-top: 8px; }
.rb-grow { flex: 1; }
.rb-converge { font-size: 0.84375rem; color: var(--mut); white-space: nowrap; flex: 0 0 auto; }
.rb-converge b { color: var(--ink); font-weight: 800; }
.roombar .rb-decide { width: auto; padding: 7px 16px; flex: 0 0 auto; }
/* Model indicator/picker — lives in the composer's own control row now, next to
   the attach button (moved out of the roombar so it's reachable on mobile too,
   and reads more like "what's answering me" than a top-bar setting). Only one
   child shows per mode (App.renderModelUi). flex:1 so it eats the space between
   the attach button and the send button, pushing send to the right edge. */
.composer-model { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 0.8125rem; }
.composer-model #cmEdit, .composer-model .cm-ro, .composer-model .cm-connect, .composer-model .cm-builtin { display: none; }
.composer-model.mode-edit #cmEdit { display: inline-flex; align-items: center; gap: 8px; }
.composer-model.mode-readonly .cm-ro { display: inline-flex; }
.composer-model.mode-connect .cm-connect { display: inline-flex; }
.composer-model.mode-builtin .cm-builtin { display: inline-flex; }
.composer-model #modelSelect { max-width: 170px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 0.8125rem; background: var(--surface); color: var(--ink); }
.cm-more { background: none; border: none; color: var(--mut); font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0; }
.cm-more:hover { color: var(--accent); text-decoration: underline; }
.cm-ro { align-items: center; gap: 6px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.cm-ro .mro-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.cm-connect { align-items: center; background: none; border: none; color: var(--accent); font-weight: 700; font-size: 0.8125rem; cursor: pointer; padding: 0; }
.cm-connect:hover { text-decoration: underline; }
.cm-builtin { color: var(--faint); font-weight: 600; }
/* presence folded into the switcher: a green ring on members who are here now */
.room-switch .rs-av.live { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3.5px var(--green); }
.rb-acct { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.roombar .foot { border: none; padding: 0; }
.roombar .acct-id, .roombar .acct-kebab { display: none; }
.roombar .acct-menu { top: 44px; right: 0; left: auto; bottom: auto; width: 300px; }
/* body: thread (main) + shared-list rail */
.room-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w, 360px); }
.thread-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-2); }
.thread-main .chat { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.thread-main .msgs { max-width: 760px; margin: 0 auto; }
.thread-main .composer { max-width: 760px; margin: 0 auto; width: 100%; padding: 6px 22px 14px; }
.composer-hint { font-size: 0.78125rem; color: var(--faint); text-align: center; margin-top: 7px; }
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
/* import-reconcile modal */
.import-src { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.import-src label { font-size: 0.8125rem; font-weight: 700; color: var(--mut); }
.import-src select { padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font: inherit; }
.import-ta { width: 100%; resize: vertical; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); font: inherit; font-size: 0.875rem; line-height: 1.5; }
.import-ta:focus { outline: none; border-color: var(--accent); }
.list-rail { position: relative; border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
/* drag handle on the rail's left edge to resize it */
.rail-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 20; }
.rail-resizer::after { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background .12s; }
.rail-resizer:hover::after, .rail-resizer.active::after { background: var(--accent); }
.lr-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
.lr-depth { background: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; font-size: 0.71875rem; color: var(--mut); cursor: pointer; }
.lr-depth:hover { border-color: var(--accent); color: var(--accent); }
.lr-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 16px; }
.lr-section { margin-bottom: 16px; }
.lr-title { font-size: 0.9375rem; font-weight: 800; color: var(--ink); margin: 8px 2px; display: flex; align-items: center; gap: 7px; }
.lr-title .lr-count { font-size: 0.8125rem; font-weight: 700; color: var(--faint); }
.lr-toggle-link { font-size: 0.8125rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.lr-toggle-link:hover { text-decoration: underline; }
.lr-empty { font-size: 0.84375rem; color: var(--faint); line-height: 1.5; border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 14px; }
.lr-empty.lr-filtered { border-color: var(--accent); color: var(--mut); }
.lr-filter { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; }
.lr-filter-inputwrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.lr-filter-icon { position: absolute; left: 10px; color: var(--mut); pointer-events: none; }
.lr-filter-input { flex: 1; min-width: 0; font-size: 0.84375rem; padding: 6px 26px 6px 30px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); }
.lr-filter-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lr-filter-clear { position: absolute; right: 6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--mut); cursor: pointer; padding: 0; }
.lr-filter-clear:hover { background: var(--line); color: var(--ink); }
.lr-filter-clear.hidden { display: none; }
.lr-filter-badge { font-size: 0.6875rem; font-weight: 800; letter-spacing: .4px; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: 3px 7px; flex: 0 0 auto; white-space: nowrap; }
.lr-filter-badge.hidden { display: none; }
.lr-filter-add { display: block; width: calc(100% - 28px); margin: -4px 14px 10px; font-size: 0.8125rem; font-weight: 600; text-align: left; padding: 6px 10px; border: 1px dashed var(--accent); border-radius: var(--r-pill); background: var(--accent-bg); color: var(--accent); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-filter-add:hover { background: var(--accent-soft); }
.lr-filter-add:disabled { opacity: .6; cursor: default; }
.lr-filter-add.hidden { display: none; }
.lr-row { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 7px; cursor: pointer; background: var(--surface); transition: box-shadow var(--t-fast) var(--ease); animation: rise var(--t-base) var(--ease) both; }
.lr-row:hover { box-shadow: var(--e-card); }
.lr-row.v-clear { box-shadow: inset 3px 0 0 var(--green); }
.lr-row.v-catch { box-shadow: inset 3px 0 0 var(--amber); }
.lr-row.v-caution { box-shadow: inset 3px 0 0 var(--amber); }
.lr-row.v-gone { box-shadow: inset 3px 0 0 var(--red); }
.lr-row.v-conflict { box-shadow: inset 3px 0 0 var(--red); }
.lr-row.v-unknown { box-shadow: inset 3px 0 0 var(--line-strong); }
.lr-row.fresh { background: var(--accent-bg); border-color: var(--accent-soft); }
/* Modal-tracking highlight: marks the row whose name the spider modal is showing,
   so arrow-key nav visibly moves through the list. Outline (not box-shadow) so the
   verdict color bar survives; scoped to "modal open" so it vanishes on ANY close
   path (✕, backdrop, Esc) with no per-path JS cleanup. */
body:has(#spiderModal:not(.hidden)) .lr-row.kb-live { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--accent-bg); }
.lr-new { font-size: 0.625rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-pill); padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
/* Faint signed Overall on name cards (#245): fit at a glance — deliberately
   muted so the model's opinion never competes with the fact-first verdict dot. */
.ov-faint { font-size: 0.71875rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; margin-left: 5px; white-space: nowrap; }
.lr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lr-nm { font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.lr-mean { font-size: 0.78125rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-acts { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lr-aside, .lr-star { background: none; border: none; cursor: pointer; color: var(--faint); padding: 3px; display: inline-flex; border-radius: 6px; }
.lr-aside:hover, .lr-star:hover { color: var(--mut); background: var(--line2); }
.lr-star.on { color: var(--star); }
.brief-note { margin-left: auto; font-size: 0.75rem; color: var(--faint); flex: 0 0 auto; }
/* feedback-only shell (#60) — survey surface shown instead of the room */
.feedback-shell { display: none; }
#app.feedback-mode .room-body, #app.feedback-mode .brief-spine { display: none; }
#app.feedback-mode .feedback-shell { display: block; flex: 1; min-height: 0; overflow-y: auto; background: var(--surface-2); }
#app.feedback-mode .composer-model, #app.feedback-mode .rb-decide, #app.feedback-mode .rb-converge { display: none; }
.fb-card { max-width: 640px; margin: 0 auto; padding: 26px 22px 44px; }
.fb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb-head h2 { font-size: 1.1875rem; margin: 0; }
.fb-role { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); background: var(--accent-bg); padding: 3px 9px; border-radius: var(--r-pill); }
.fb-intro { font-size: 0.875rem; color: var(--mut); margin: 8px 0 18px; line-height: 1.5; }
.fb-rows { display: flex; flex-direction: column; gap: 8px; }
.fb-row { display: grid; grid-template-columns: 1fr auto minmax(0, 200px); gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.fb-row.is-new { border-color: var(--accent); }
.fb-nm { font-weight: 700; font-size: 0.9375rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-new { font-size: 0.65625rem; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--accent); border-radius: var(--r-pill); padding: 2px 6px; }
.fb-mean { font-size: 0.78125rem; font-weight: 500; color: var(--faint); }
.fb-votes { display: flex; gap: 6px; }
.fb-v { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 5px 10px; font-size: 0.9375rem; cursor: pointer; line-height: 1; filter: grayscale(.5); opacity: .7; }
.fb-v:hover { filter: none; opacity: 1; }
.fb-v.on { opacity: 1; filter: none; }
.fb-v.like.on { border-color: var(--green); background: var(--green-bg); }
.fb-v.dislike.on { border-color: var(--red); background: var(--red-bg); }
.fb-why { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; font: inherit; font-size: 0.84375rem; background: var(--surface-2); }
.fb-why:focus { outline: none; border-color: var(--accent); }
.fb-empty { color: var(--faint); font-size: 0.875rem; padding: 20px; text-align: center; }
.fb-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.fb-count { font-size: 0.8125rem; color: var(--mut); }
@media (max-width: 560px) { .fb-row { grid-template-columns: 1fr auto; } .fb-why { grid-column: 1 / -1; } }
/* feedback signal in the dossier + share-modal role chip */
.fb-tally { font-size: 0.84375rem; font-weight: 700; }
.fb-notes { margin: 2px 0 6px; padding-left: 10px; border-left: 2px solid var(--line-strong); display: flex; flex-direction: column; gap: 3px; }
.fb-note { font-size: 0.78125rem; color: var(--mut); }
.fb-note-v.like { filter: none; } .fb-note-v.dislike { filter: none; }
.share-member .role.feedback { background: var(--amber-bg); color: var(--amber-ink); }
.share-add select { border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0 8px; background: var(--surface); font: inherit; font-size: 0.875rem; }
/* depth overlay */
.depth-panel { position: fixed; inset: 0; background: rgba(16,23,41,.4); display: grid; place-items: center; padding: 24px; z-index: 600; }
.depth-card { width: 100%; max-width: 760px; height: 86vh; max-height: 86vh; background: var(--surface); border-radius: var(--r-2xl); box-shadow: var(--e-modal); display: flex; flex-direction: column; overflow: hidden; }
.depth-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-right: 12px; }
.depth-head .tabs { border-bottom: none; }
.depth-head .x { background: none; border: none; font-size: 1.125rem; color: var(--faint); cursor: pointer; flex: 0 0 auto; }
.depth-card .tabwrap { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
@media (max-width: 860px) {
  .room-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .list-rail { border-left: none; border-top: 1px solid var(--line); max-height: 42vh; }
  .brief-note { display: none; }
}

/* ============================================================
   v2 PR10 — motion (reduced-motion gate) · responsive · a11y
   ============================================================ */
/* Respect prefers-reduced-motion: instant state, static live dot (handoff §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pres-av.live::after, .live-dot { animation: none !important; opacity: 1 !important; }
}
/* visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tcard:focus-visible, .lr-row:focus-visible, .duel-pick:focus-visible { outline-offset: -2px; }
/* responsive: the duel + top bar on small screens */
@media (max-width: 620px) {
  .duel-body { grid-template-columns: 1fr; }
  .duel-vs { transform: rotate(0); }
  .roombar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .room-switch { max-width: 60vw; }
  .brief-spine { overflow-x: auto; flex-wrap: nowrap; }
  .brief-note { display: none; }
  .done-name { font-size: 2.375rem; }
}
/* ============================================================
   v2 PHONES (≤760px) — the room becomes ONE pane at a time:
   the thread (chat + pinned composer) OR the shared list, switched
   by the bottom dock. Mirrors v1's Chat⇄Workspace toggle so the
   chat input stays pinned and the names list gets a full screen.
   ============================================================ */
@media (max-width: 760px) {
  /* --- single-pane body: thread and rail each fill the room, toggled by .mv-names --- */
  .room-body { display: block; position: relative; }
  .thread-main, .list-rail { position: absolute; inset: 0; }
  .list-rail { display: none; border-left: none; max-height: none; }
  #app.mv-names .thread-main { display: none; }
  #app.mv-names .list-rail { display: flex; }
  .rail-resizer { display: none; }
  .thread-main .chat { padding: 12px 14px 4px; }
  /* trim the composer: it ate 106px — give that height back to the conversation */
  .thread-main .composer { padding: 6px 10px 8px; }
  .composer .box { padding: 5px 5px 5px 10px; border-radius: 12px; }
  .composer textarea { font-size: 1rem; }    /* ≥16px stops iOS auto-zoom on focus */
  .composer-hint { display: none; }           /* import lives in the room menu; reclaim chat height */

  /* --- bottom dock (the pane switcher) --- */
  /* Floating capsule tab bar (#293), Apple-tab-bar style: detached from the edges,
     translucent + blurred, icon over label, active tab wears a soft accent pill.
     It's a fixed OVERLAY (#297): it takes no layout space, so hide/show is a pure
     fade/slide with zero reflow. In chat mode it floats above the composer
     (--composer-h is kept fresh by a ResizeObserver); in names mode the list
     scrolls underneath it. The scrollers carry internal bottom padding so the
     last row/message clears the capsule at rest. */
  .mdock { position: fixed; left: 0; right: 0; display: flex; justify-content: center;
    bottom: calc(env(safe-area-inset-bottom, 0) + var(--composer-h, 64px) + 12px);
    background: transparent; padding: 0 14px; z-index: 35; pointer-events: none;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1), opacity .2s ease; }
  #app.mv-names ~ .mdock, #app.mv-names .mdock { bottom: calc(env(safe-area-inset-bottom, 0) + 12px); }
  .mdock.mdock-hide { transform: translateY(14px) scale(.96); opacity: 0; }
  .mdock.mdock-hide .mdock-bar { pointer-events: none; }
  .mdock-bar { pointer-events: auto; }
  /* minimized (#301): while moving through history the capsule condenses to an
     icon-only pill — still visible, still tappable, never gone. Labels collapse
     and paddings tighten so the shrink animates as one motion. */
  .mdock-tab > span:not(.mdock-i):not(.mdock-count) { max-height: 16px; opacity: 1;
    overflow: hidden; transition: max-height .22s ease, opacity .16s ease; }
  .mdock.mdock-mini .mdock-tab > span:not(.mdock-i):not(.mdock-count) { max-height: 0; opacity: 0; }
  .mdock.mdock-mini .mdock-tab { min-width: 0; min-height: 36px; padding: 6px 16px; }
  .mdock.mdock-mini .mdock-i { font-size: 1.05rem; }
  .mdock.mdock-mini .mdock-count { top: 0; right: 5px; transform: scale(.85); }
  .thread-main .chat { padding-bottom: 104px; }  /* scroll clearance under the floating capsule */
  .list-rail .lr-scroll { padding-bottom: 104px; }
  .mdock-bar { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08); }
  .mdock-tab { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 108px; min-height: 54px; padding: 7px 20px; border-radius: 999px; background: none; border: none;
    font-size: 0.75rem; font-weight: 700; color: var(--mut);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
      min-width .22s ease, min-height .22s ease, padding .22s ease; }
  .mdock-tab.on { color: var(--accent); background: var(--accent-soft); }
  .mdock-i { font-size: 1.25rem; line-height: 1; transition: font-size .22s ease; }
  .mdock-count { position: absolute; top: 4px; right: 16px; font-size: 0.6875rem; font-weight: 800; min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 9px; background: var(--accent); color: #fff; display: inline-grid; place-items: center; }
  #app.feedback-mode .mdock { display: none; }

  /* --- brief lifts OFF the bar entirely: no persistent band. It opens as a
         dropdown sheet from the roombar "✦ Brief" chip, clawing back the whole
         strip for the conversation. --- */
  .brief-spine { display: none; }
  .brief-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 6px 10px; font-size: 0.78125rem; font-weight: 700; color: var(--mut); white-space: nowrap; }
  .brief-chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
  /* the sheet: pinned under the bar, overlays the chat (doesn't push it), chips wrap freely */
  #app.brief-open .brief-spine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    position: fixed; top: 52px; left: 0; right: 0; z-index: 28; max-height: 56vh; overflow-y: auto;
    padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--e-pop); }
  #app.brief-open .brief-spine .mem-goal { flex: 1 1 100%; max-width: none; white-space: normal; }
  #app.brief-open .brief-crit { display: inline-flex; flex-wrap: wrap; }
  #app.brief-open .brief-crit > *, #app.brief-open .bchip { flex: 0 0 auto; }
  .brief-note { display: none; }

  /* --- roombar: ONE slim row. Drop the wordmark + the "N alive" counter (the dock
         shows the count); the model picker lives in the composer now. Decide moves to Names. --- */
  .roombar { flex-wrap: nowrap; gap: 8px; padding: 7px 12px; }
  .rb-brand { display: none; }
  .rb-converge { display: none; }
  .room-switch { max-width: 64vw; }
  /* Decide is hidden while chatting; it appears in the Names pane, where you decide.
     Shrink the room title there so Decide + avatar never clip off the edge. */
  #app:not(.mv-names) .roombar .rb-decide { display: none; }
  #app.mv-names .roombar .rb-decide:not(.hidden) { display: inline-flex; }
  #app.mv-names .room-switch { max-width: 42vw; }
  .roombar .rb-decide { padding: 7px 14px; }
  /* room menu was 320px wide @ left:130px — it ran off-screen. Pin to the viewport edges. */
  .room-menu { top: calc(100% + 6px); left: 8px; right: 8px; width: auto; max-width: none; max-height: 64vh; }

  /* --- bigger touch targets (WCAG 2.5.5) --- */
  .bchip { padding: 8px 12px; }
  .bchip .bchip-x { font-size: 0.9375rem; padding: 4px 2px; margin: -2px -2px -2px 2px; }
  .lr-row { padding: 13px 12px; }
  .lr-aside, .lr-star { padding: 9px; }
  .lr-depth { padding: 8px 14px; }

  /* toasts sit above the dock instead of behind it */
  .toasts { bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

  /* --- depth overlay goes full-screen (the desktop modal is too tall/cramped) --- */
  .depth-panel { padding: 0; }
  .depth-card { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .depth-head .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .depth-card .tabwrap { padding: 14px 12px; }
}

/* regenerate error row in the admin Languages table (#102) */
.lang-table .lerr td { font-size: 0.8125rem; padding-top: 0; border-top: none; }
.lang-table .lerr .lr-err { color: var(--red); margin-right: 8px; }
.lang-table .lok td { font-size: 0.8125rem; padding-top: 0; border-top: none; }
.lang-table .lok .lr-ok { color: var(--green); margin-right: 8px; }