/* ============================================================================================================
   Staffroom "Graphite" theme (15 Nov 2026, replaces Dark glass). Loaded after app.css on every page. Flat and calm:
   graphite surfaces with hairline borders, white type and one warm amber accent for main actions, no glass or glows.
   Dark by default; Account → Appearance → Light gives a warm light version. Tokens first, then the core components.
   ============================================================================================================ */
:root { /* shared by both versions */
  --brand-fill: #f5b83d; --brand-fill-hover: #ffc75a;
  --grad: linear-gradient(var(--brand-fill), var(--brand-fill));
  --blur: none;
  --radius: 12px; --r-sm: 8px; --r-md: 10px;
}
:root:not([data-theme="light"]), :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212; --bg-2: #121212; --sidebar: #171717; --panel: #1c1c1c; --panel-solid: #1c1c1c;
  --soft: rgba(255, 255, 255, .05); --surface-hover: rgba(255, 255, 255, .06);
  --line: #2b2b2b; --line-subtle: #232323; --glass-edge: #2f2f2f;
  --ink: #f3f2ef; --muted: #a8a6a0; --faint: #74726c;
  --brand: #f5b83d; --brand-strong: #f5b83d; --brand-hover: #ffc75a; --brand-ink: #1c1400; --brand-soft: rgba(245, 184, 61, .13);
  --glow: 0 0 0 1px rgba(245, 184, 61, .55);
  --ok: #5fd08a; --ok-soft: rgba(95, 208, 138, .12); --warn: #f5b83d; --warn-soft: rgba(245, 184, 61, .13); --bad: #f27777; --bad-soft: rgba(242, 119, 119, .13);
  --shadow: none;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55);
  --focus: 0 0 0 3px rgba(245, 184, 61, .28);
  --orb-1: transparent; --orb-2: transparent; --orb-3: transparent;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f4f0; --bg-2: #f5f4f0; --sidebar: #eeece6; --panel: #ffffff; --panel-solid: #ffffff;
  --soft: rgba(28, 26, 20, .045); --surface-hover: rgba(28, 26, 20, .055);
  --line: #e3e0d8; --line-subtle: #ebe8e1; --glass-edge: #e3e0d8;
  --ink: #1c1b18; --muted: #5d5a52; --faint: #8f8b81;
  --brand: #9a6400; --brand-strong: #9a6400; --brand-hover: #7d5100; --brand-ink: #1c1400; --brand-soft: rgba(245, 184, 61, .18);
  --glow: 0 0 0 1px rgba(201, 138, 11, .5);
  --ok: #1f7a43; --ok-soft: rgba(31, 122, 67, .10); --warn: #9a6400; --warn-soft: rgba(245, 184, 61, .18); --bad: #b4232c; --bad-soft: rgba(180, 35, 44, .09);
  --shadow: 0 1px 2px rgba(28, 26, 20, .05);
  --shadow-pop: 0 16px 40px rgba(28, 26, 20, .14);
  --focus: 0 0 0 3px rgba(245, 184, 61, .35);
  --orb-1: transparent; --orb-2: transparent; --orb-3: transparent;
}

/* ---------- Canvas: deep background with slow glows ---------- */
html { background: var(--bg); }
body { background: transparent; color: var(--ink); font: 400 14px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.005em; }
body::before { content: ""; position: fixed; inset: -20vh -20vw; z-index: -1; pointer-events: none;
  background: radial-gradient(40vw 40vw at 18% 8%, var(--orb-1), transparent 60%), radial-gradient(36vw 36vw at 92% 88%, var(--orb-2), transparent 62%),
    radial-gradient(30vw 30vw at 70% 20%, var(--orb-3), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  animation: sr-drift 40s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px); background-size: 3px 3px; }
:root[data-theme="light"] body::after { opacity: .025; background-image: radial-gradient(rgba(0, 0, 0, .8) 1px, transparent 1px); }
@keyframes sr-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2vw, -2vh, 0) scale(1.06); } }
::selection { background: rgba(245, 184, 61, .4); color: var(--ink); }
* { scrollbar-color: rgba(255, 255, 255, .14) transparent; }
:root[data-theme="light"] * { scrollbar-color: rgba(0, 0, 0, .18) transparent; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Type ---------- */
h1, .page-head h1, .side-shell .page-head h1, .side-shell .dash-top h1, .dash-top h1 {
  font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -0.035em;
  background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 62%, var(--brand))); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: 19px; line-height: 26px; font-weight: 650; letter-spacing: -0.02em; }
h3 { font-size: 15px; line-height: 22px; font-weight: 650; letter-spacing: -0.015em; }
.muted { color: var(--muted); }
label { color: var(--muted); font-weight: 500; }
.eyebrow, .dash-date, .nav-label, .side-label { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 650; }

/* ---------- Glass surfaces ---------- */
.card, .dash-card, .act, .card.tool, .need, .stat, .wcard, .ecard, .setup-strip, .onboard, .modal, .pop-menu, .menu, .toast, .call-card,
.composer .input-row, .emp-bar, .acct-row, .video-panel, .books-form, .dtable, .side-person.on, .msg-card, .info-row, .empty {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.card { padding: 22px; }
.card:has(> h3:first-child) > h3:first-child, .dash-head h2 { letter-spacing: -0.02em; }
a.card:hover, a.act:hover, .card.tool:hover, .need:hover, a.wcard:hover, a.info-row:hover {
  background: color-mix(in srgb, var(--panel) 100%, rgba(255, 255, 255, .03)); border-color: var(--glass-edge); transform: translateY(-1px); text-decoration: none; }
a.card, a.act, .card.tool, .need, a.wcard, a.info-row { transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.empty { color: var(--muted); text-align: center; padding: 28px; }
hr { border: 0; border-top: 1px solid var(--line-subtle); }

/* ---------- Layout: floating glass sidebar ---------- */
.shell.side-shell { grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { margin: 12px 0 12px 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); top: 12px; border-radius: 22px;
  background: var(--sidebar); border: 1px solid var(--line); box-shadow: var(--shadow-pop); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 14px 12px 12px; }
.sidebar .biz-switch > summary { border-radius: 14px; }
.sidebar .biz-switch > summary strong { font-weight: 700; }
.side-search input { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-subtle); border-radius: 12px; height: 38px; }
:root[data-theme="light"] .side-search input { background: rgba(255, 255, 255, .7); }
.side-search input:focus { border-color: var(--brand); box-shadow: var(--focus); }
.side-link { border-radius: 11px; color: var(--muted); height: 38px; }
.side-link:hover { background: var(--surface-hover); color: var(--ink); }
.side-link.on { color: var(--ink); background: linear-gradient(90deg, rgba(245, 184, 61, .22), rgba(245, 184, 61, .08)); box-shadow: inset 0 0 0 1px rgba(245, 184, 61, .22); }
.side-link.on svg { color: var(--brand); filter: drop-shadow(0 0 6px rgba(245, 184, 61, .6)); }
.side-count { background: var(--grad); color: var(--brand-ink); box-shadow: 0 0 12px rgba(245, 184, 61, .55); }
.side-person { border-radius: 12px; }
.side-person:hover { background: var(--surface-hover); }
.side-person.on { background: linear-gradient(90deg, rgba(245, 184, 61, .20), rgba(245, 184, 61, .06)); box-shadow: inset 0 0 0 1px rgba(245, 184, 61, .2); border: 0; }
.side-person .av.sm, .room-mark { border-radius: 11px; }
.side-foot { border-top: 1px solid var(--line-subtle); }
.sidebar .account > summary:hover { background: var(--surface-hover); }
.side-shell .page { padding: 44px 44px 64px; }
.mobile-top { background: var(--sidebar); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }
.side-scrim { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 900px) { .sidebar { margin: 0; height: 100vh; height: 100dvh; top: 0; border-radius: 0 22px 22px 0; } }

/* ---------- Avatars ---------- */
.av { box-shadow: 0 0 0 1px var(--glass-edge), 0 6px 16px rgba(0, 0, 0, .35); }
:root[data-theme="light"] .av { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 12px rgba(30, 30, 80, .12); }

/* ---------- Buttons ---------- */
.btn { height: 38px; padding: 0 16px; border-radius: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }
:root[data-theme="light"] .btn:not(.primary) { background: rgba(255, 255, 255, .75); }
.btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--glass-edge); color: var(--ink); text-decoration: none; }
.btn.small { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.btn.big { height: 46px; padding: 0 22px; border-radius: 14px; font-size: 15px; }
.btn.primary, button.primary, .act-link.primary, .tool-go, .composer .send {
  background: var(--grad); color: var(--brand-ink); border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 20px rgba(245, 184, 61, .38); }
.btn.primary:hover, .composer .send:hover { background: var(--brand-fill-hover); filter: none; box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn.danger, .btn.ghost.danger { color: var(--bad); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; filter: grayscale(.4); box-shadow: none; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=search], input[type=tel], select, textarea {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
:root[data-theme="light"] :is(input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], select, textarea) { background: rgba(255, 255, 255, .8); }
input:hover, select:hover, textarea:hover { border-color: var(--glass-edge); }
input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select option { background: var(--panel-solid); color: var(--ink); }
input[type=checkbox] { border-radius: 6px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .05); }
input[type=checkbox]:checked { background-color: var(--brand-strong); border-color: var(--brand-strong); box-shadow: 0 0 10px rgba(245, 184, 61, .5); }
.field-error, .error { color: var(--bad); }

/* ---------- Tabs ---------- */
.tabs, .emp-tabs, .subtabs { border-bottom: 1px solid var(--line-subtle); }
.tabs a, .emp-tabs a, .subtabs button { color: var(--muted); }
.tabs a:hover, .emp-tabs a:hover, .subtabs button:hover { color: var(--ink); }
.tabs a.on, .emp-tabs a.on, .subtabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); text-shadow: 0 0 18px rgba(245, 184, 61, .55); }
.emp-bar { border-radius: 18px; padding: 10px 14px; margin-top: 4px; }
.emp-more summary { color: var(--muted); }

/* ---------- Pills and badges ---------- */
.pill { border-radius: 999px; background: var(--soft); color: var(--muted); border: 1px solid var(--line-subtle); font-weight: 600; }
.pill.review { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.approved, .pill.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.bad, .pill.error { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.ai-tag { border-color: rgba(245, 184, 61, .35); color: var(--brand); }

/* ---------- Home ---------- */
.dash-top { margin-bottom: 8px; }
.act { padding: 22px; }
.act-label { color: var(--muted); }
.act-value { font-size: 40px; line-height: 46px; font-weight: 750; letter-spacing: -0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.act.warn .act-value { background: linear-gradient(135deg, #fbbf24, #fb7185); -webkit-background-clip: text; background-clip: text; }
.act-ico, .info-ico, .dash-ico, .tool-ico { background: var(--brand-soft); color: var(--brand); border-radius: 11px; }
.act-list li, .dash-list li, .agenda li { border-color: var(--line-subtle); }
.agenda time { color: var(--brand); font-weight: 650; }
.card.tool { padding: 20px; }
.card.tool .tool-title { font-weight: 650; }
.face { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--glass-edge); }

/* ---------- Lists and tables ---------- */
.list li { border-color: var(--line-subtle); }
.list li:hover { background: var(--surface-hover); }
.dtable { border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; }
.dtable th { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; background: rgba(255, 255, 255, .025); border-bottom: 1px solid var(--line-subtle); }
.dtable td { border-bottom: 1px solid var(--line-subtle); }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover td { background: rgba(255, 255, 255, .03); }

/* ---------- Chat ---------- */
.chat-page .msgs, .msgs-inner { background: transparent; }
.msg .md, .msg .text { color: var(--ink); }
.msg.me .md, .msg.user .md { color: var(--ink); }
.composer .input-row { border-radius: 18px; padding: 6px 6px 6px 10px; }
.composer .input-row:focus-within { border-color: rgba(245, 184, 61, .55); box-shadow: var(--shadow), 0 0 0 4px rgba(245, 184, 61, .14), 0 0 40px rgba(245, 184, 61, .18); }
.composer .send { border-radius: 13px; }
.chips button, .chips-more { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.chips button:hover { color: var(--ink); border-color: rgba(245, 184, 61, .45); background: var(--brand-soft); }
.wcard { border-radius: 16px; }
.wcard-kind { color: var(--brand); }
.ecard { border-radius: 16px; }
.day-sep, .date-sep { color: var(--faint); }

/* ---------- Toasts, menus, overlays ---------- */
.toast { color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-pop); }
.toast.bad { border-color: rgba(251, 113, 133, .45); }
.pop-menu, .menu { box-shadow: var(--shadow-pop); background: color-mix(in srgb, var(--panel-solid) 88%, transparent); }
.call-overlay { background: rgba(4, 5, 10, .6); }
.call-card { background: color-mix(in srgb, var(--panel-solid) 80%, transparent); border-radius: 26px; }
.call-face.talking { animation: sr-pulse 1.2s ease-in-out infinite; }
@keyframes sr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 61, .55); } 50% { box-shadow: 0 0 0 14px rgba(245, 184, 61, 0), 0 0 40px rgba(245, 184, 61, .45); } }
.skeleton-page *, .skeleton { background: rgba(255, 255, 255, .05); }

/* ---------- Books, videos, calls ---------- */
.books .stat .stat-num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.books .stat.bad .stat-num { background: linear-gradient(135deg, #fb7185, #f97316); -webkit-background-clip: text; background-clip: text; }
.acct-row.on { border-color: rgba(245, 184, 61, .5); box-shadow: var(--glow); }
.doc-video video { border-radius: 18px; box-shadow: var(--shadow-pop); }
.wcard-video { color: var(--brand); }

/* ---------- Signed-out pages ---------- */
.public, .auth { background: transparent; }
.pub-nav { background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line-subtle); }
.hero h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.045em; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead, .section > .lead { color: var(--muted); }
.steps .num, .feature-ico { background: var(--brand-soft); color: var(--brand); }
.auth .card { box-shadow: var(--shadow-pop); }

/* Reduced motion and no-glass fallbacks */
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } a.card:hover, a.act:hover, .card.tool:hover { transform: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --panel: #12141e; --sidebar: #0e1018; }
  :root[data-theme="light"] { --panel: #ffffff; --sidebar: #f7f8fc; }
}
@media print { body::before, body::after { display: none; } html { background: #fff; } }

/* ============================================================================================================
   Layout (14 Nov 2026): icon rail + team column + page. The rail is always there (pages, more, search, you);
   the team column shows on Home, chats and rooms and can be folded away; other pages get the full width.
   ============================================================================================================ */
.shell.rail-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
.nav-pane { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; gap: 10px; padding: 12px 0 12px 12px; z-index: 40; }
.rail-shell .main-col { min-width: 0; }
.rail-shell .main { min-width: 0; padding-bottom: 0; }
.rail-shell .page { max-width: 1120px; padding: 40px 40px 64px; }
.rail-shell .chat-page, .rail-shell .doc-page { height: 100vh; height: 100dvh; padding: 12px 16px 0; max-width: 1040px; }
.rail-shell .mobile-top, .rail-shell .side-scrim { display: none; }

/* Rail */
.rail2 { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-radius: 22px;
  background: var(--sidebar); border: 1px solid var(--line); box-shadow: var(--shadow-pop); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.rail-top, .rail-mid, .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-top { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-subtle); }
.rail-mid { flex: 1; }
.rail-btn, .rail2 details.pop > summary { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: var(--faint); background: none; border: 0; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s; }
.rail-btn:hover, .rail2 details.pop > summary:hover { color: var(--ink); background: var(--surface-hover); text-decoration: none; }
.rail-btn.on, .rail-more.on > summary { color: var(--ink); background: var(--surface-hover); box-shadow: inset 2px 0 0 var(--brand-fill); }
:root[data-theme="light"] .rail-btn.on { color: var(--ink); }
.rail-badge { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-size: 10px; font-weight: 700; line-height: 17px;
  text-align: center; color: #fff; background: #f43f5e; box-shadow: 0 0 0 2px var(--panel-solid), 0 0 10px rgba(244, 63, 94, .6); }
.rail-btn.on .rail-badge { background: var(--brand-fill); color: var(--brand-ink); }
.biz-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--brand-ink); background: var(--grad); box-shadow: 0 6px 16px rgba(245, 184, 61, .35); }
.biz-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.rail2 .biz-switch > summary { width: 48px; height: 48px; }
.rail2 .account > summary .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--brand-ink); background: var(--grad); }
.rail2 .pop-menu { left: calc(100% + 14px); top: 0; right: auto; bottom: auto; }
.rail2 .account .pop-menu, .rail2 .rail-more .pop-menu { top: auto; bottom: 0; }
.rail2 .rail-more .pop-menu { bottom: auto; top: -8px; }
/* Tooltips on the rail (no JS) */
.rail2 [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line);
  box-shadow: var(--shadow-pop); opacity: 0; transition: opacity .12s, transform .12s; z-index: 70; }
.rail2 [data-tip]:hover::after, .rail2 [data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.rail2 details[open] > summary[data-tip]::after { display: none; }

/* Team column */
.teamcol { width: 316px; display: none; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--sidebar); border: 1px solid var(--line); box-shadow: var(--shadow-pop); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.rail-shell.list-on .teamcol { display: flex; }
.tc-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
.tc-head strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-head small { color: var(--muted); font-size: 12px; }
.tc-add, .tc-label a { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, .04); position: relative; }
.tc-add:hover, .tc-label a:hover { color: var(--ink); border-color: var(--glass-edge); }
.tc-label a { width: 22px; height: 22px; border-radius: 7px; margin-left: auto; }
.tc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.tc-label { display: flex; align-items: center; gap: 6px; padding: 12px 8px 6px; color: var(--faint); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.tc-label span { color: var(--faint); font-weight: 600; }
.tc-list { display: grid; gap: 2px; }
.tc-person { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.tc-person:hover { background: var(--surface-hover); text-decoration: none; }
.tc-person.on { background: linear-gradient(90deg, rgba(245, 184, 61, .22), rgba(245, 184, 61, .07)); border-color: rgba(245, 184, 61, .28); }
.tc-face { position: relative; flex: none; }
.tc-face .av { width: 46px; height: 46px; border-radius: 15px; }
.tc-face .room-mark { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); }
.tc-dot { position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand-fill); box-shadow: 0 0 0 2px var(--panel-solid); }
.tc-text { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tc-top { display: flex; align-items: baseline; gap: 8px; }
.tc-top strong { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-top time { flex: none; color: var(--faint); font-size: 11.5px; }
.tc-last { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-last b { color: color-mix(in srgb, var(--ink) 80%, var(--muted)); font-weight: 600; }
.tc-person.unread .tc-top strong, .tc-person.unread .tc-last { color: var(--ink); }
.tc-count { flex: none; align-self: flex-end; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; color: var(--brand-ink); background: var(--grad); box-shadow: 0 0 12px rgba(245, 184, 61, .55); }
.tc-empty { display: block; padding: 6px 10px 10px; color: var(--faint); font-size: 13px; text-decoration: none; }
.tc-empty:hover { color: var(--brand); }
.tc-saved { position: relative; display: block; margin: 8px; padding: 14px 16px 0; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, rgba(245, 184, 61, .16), rgba(245, 184, 61, .05)); border: 1px solid rgba(245, 184, 61, .22); }
.tc-saved:hover { border-color: rgba(245, 184, 61, .45); text-decoration: none; }
.tc-saved-text strong { display: block; font-size: 24px; line-height: 28px; font-weight: 750; letter-spacing: -0.03em; }
.tc-saved-text small { color: var(--muted); font-size: 12px; }
.saved-chart { display: block; width: calc(100% + 32px); height: 64px; margin: 6px -16px 0; }

/* Chat: floating glass header, centred column, floating composer */
.rail-shell .emp-bar { position: relative; z-index: 6; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 7px 8px 7px 10px; gap: 10px; min-height: 0;
  border-radius: 20px; background: color-mix(in srgb, var(--panel-solid) 72%, transparent); box-shadow: var(--shadow-pop); }
.rail-shell .emp-bar .emp-tabs { border: 0; display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, .04); }
.rail-shell .emp-bar .emp-tabs a { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 10px; box-shadow: none; text-shadow: none; }
.rail-shell .emp-bar .emp-tabs a.on { color: var(--ink); background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--line); }
.rail-shell .emp-bar .call-start { margin-left: 6px; border-radius: 12px; }
.rail-shell .msgs-inner { max-width: 780px; margin: 0 auto; }
.rail-shell .composer-inner { max-width: 820px; margin: 0 auto; }

/* Phones and small tablets: rail + team column slide in together */
@media (max-width: 900px) {
  .shell.rail-shell { display: block; }
  .rail-shell .mobile-top { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 12px;
    background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line-subtle); }
  .rail-shell .mobile-top .nav-burger { display: grid; }
  .nav-pane { position: fixed; left: 0; top: 0; bottom: 0; padding: 10px; transform: translateX(-104%); transition: transform .24s ease; }
  html.side-open .nav-pane { transform: none; }
  html.side-open .rail-shell .side-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .rail-shell .teamcol { display: flex; width: min(300px, calc(100vw - 104px)); }
  .rail2 [data-tip]::after { display: none; }
  .rail-shell .page { padding: 24px 16px 40px; }
  .rail-shell .chat-page, .rail-shell .doc-page { height: calc(100dvh - 56px); padding: 8px 8px 0; }
  .rail-shell .emp-bar { width: 100%; border-radius: 16px; }
}
.rail2 .pop.account .pop-menu, .rail2 .pop.biz-switch .pop-menu, .rail2 .pop.rail-more .pop-menu { left: calc(100% + 14px); right: auto; }
.rail2 .pop.account .pop-menu { top: auto; bottom: 0; }
/* The rail's menus and hover labels open over the team column, never behind it */
.rail2 { position: relative; z-index: 3; }
.teamcol { position: relative; z-index: 1; }
/* Menus are solid (glass blur can't reach through the rail, so see-through menus showed the list behind) */
.pop-menu, .menu, .emp-more-menu, .profile > div { background: var(--panel-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Google Drive browser (Knowledge page) */
.drive { display: grid; gap: 12px; }
.drive-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 460px; overflow-y: auto; padding: 2px; }
.drive-tile { position: relative; display: grid; grid-template-rows: 96px auto; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.drive-tile:hover { border-color: var(--glass-edge); background: var(--surface-hover); }
.drive-tile img, .drive-ico { width: 100%; height: 96px; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, .04); }
.drive-ico { display: grid; place-items: center; color: var(--muted); }
.drive-tile.folder .drive-ico { color: var(--brand); }
.drive-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: transparent; border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .35); }
.drive-tile.on { border-color: rgba(245, 184, 61, .7); box-shadow: var(--glow); }
.drive-tile.on .drive-tick { color: var(--brand-ink); background: var(--grad); border-color: transparent; }
[hidden] { display: none !important; }
.drive-accounts { align-items: center; gap: 8px; flex-wrap: wrap; } .drive-accounts select { width: auto; max-width: 100%; }
.video-warn { padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.video-warn ul { margin: 6px 0 10px; padding-left: 18px; }

/* History: lines that open, and the AI use breakdown */
.list.history .hist-row { cursor: pointer; align-items: flex-start; }
.hist-row .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hist-row.open .title { white-space: normal; }
.hist-more { display: none; margin-top: 8px; }
.hist-row.open .hist-more { display: grid; gap: 6px; justify-items: start; }
.hist-more > p:first-child { display: none; }
.hist-chev { color: var(--faint); font-size: 20px; line-height: 1; transition: transform .15s; align-self: center; }
.hist-row.open .hist-chev, .usage-card[open] > summary .hist-chev { transform: rotate(90deg); }
.usage-card > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.usage-card > summary::-webkit-details-marker { display: none; }
.usage-card h3 { margin: 0 0 2px; }
.usage-meter { display: block; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; margin: 14px 0 6px; }
.usage-meter i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 14px; }
@media (max-width: 760px) { .usage-grid { grid-template-columns: 1fr; } }
.usage-head { color: var(--faint); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.usage-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.usage-bars li { display: grid; grid-template-columns: auto minmax(90px, 140px) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.usage-bars li:not(:has(.av, .thumb)) { grid-template-columns: minmax(110px, 170px) 1fr auto; }
.usage-bars .av, .usage-bars .thumb { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; }
.usage-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.usage-track { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.usage-fill { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
.usage-bars strong { font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.pop-note { margin: 6px 10px; font-size: 12px; color: var(--warn); }

/* ===== Homepage (landing.js) and pricing (pricing.js) ===== */
.lp { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.lp-nav { position: sticky; top: 12px; z-index: 20; margin: 12px 0 0; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.lp-links { display: flex; gap: 4px; margin-left: 12px; }
.lp-links a { color: var(--muted); padding: 6px 10px; border-radius: 10px; font-weight: 500; text-decoration: none; }
.lp-links a:hover { color: var(--ink); background: var(--surface-hover); }
.lp-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding: 72px 0 40px; }
.lp-hero h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; margin: 12px 0 18px; }
.lp-hero .lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 600px; }
.lp-cta { gap: 12px; margin: 26px 0 18px; flex-wrap: wrap; }
.lp-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 14px; }
.lp-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.lp-ticks svg { color: var(--ok); }
.lp-faces { display: flex; align-items: center; margin-top: 22px; }
.lp-faces .av { width: 34px; height: 34px; border-radius: 50%; margin-right: -8px; box-shadow: 0 0 0 2px var(--bg); }
.lp-faces .muted { margin-left: 18px; }
.lp-hero-demo { padding: 18px; border-radius: 24px; box-shadow: var(--shadow-pop), 0 0 80px rgba(245, 184, 61, .18); }
.lp-demo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lp-demo-head strong { flex: 1; }
.lp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.lp-hero-demo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-hero-demo li { display: flex; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-subtle); }
.lp-hero-demo li .av { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.lp-hero-demo p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; }
.lp-demo-who { display: flex; gap: 8px; align-items: baseline; }
.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 10px 0 30px; }
.lp-stat { display: grid; gap: 4px; padding: 20px; }
.lp-stat strong { font-size: 30px; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .section { padding: 56px 0 10px; }
.lp .section > h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; margin: 8px 0 12px; max-width: 820px; }
.lp .section > .lead { color: var(--muted); font-size: 17px; max-width: 720px; margin-bottom: 26px; }
.lp-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lp-person { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.lp-person .av.lg { width: 64px; height: 64px; border-radius: 18px; flex: none; }
.lp-person p { margin: 6px 0 0; }
.lp-role { color: var(--brand); font-size: 13px; font-weight: 600; }
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-feature { padding: 22px; }
.lp-feature-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.lp-feature-head .av { width: 34px; height: 34px; border-radius: 50%; }
.lp-feature h3 { font-size: 18px; margin: 0 0 6px; }
.lp-talk { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 22px 24px;
  background: linear-gradient(135deg, rgba(245, 184, 61, .18), rgba(245, 184, 61, .06)); border-color: rgba(245, 184, 61, .3); }
.lp-talk h3 { margin: 0 0 4px; font-size: 19px; }
.lp-maths-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: stretch; }
.lp-vs { display: grid; align-content: center; gap: 8px; text-align: center; justify-items: center; padding: 26px; }
.lp-vs > strong { font-size: 56px; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.lp-vs .lp-ticks { justify-content: center; margin: 8px 0 14px; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.lp-trust h3 { margin: 10px 0 4px; }
.lp-faq { display: grid; gap: 10px; max-width: 860px; }
.lp-faq details { padding: 0; }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 600; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq details[open] summary .hist-chev { transform: rotate(90deg); }
.lp-faq details p { margin: 0; padding: 0 20px 18px; }
.lp-final { text-align: center; margin-top: 30px; padding: 56px 24px !important; border-radius: 28px; border: 1px solid rgba(245, 184, 61, .3);
  background: radial-gradient(60% 120% at 50% 0%, rgba(245, 184, 61, .28), transparent 70%), var(--panel); }
.lp-final h2, .lp-final .lead { margin-left: auto; margin-right: auto; }
@media (max-width: 960px) {
  .lp-hero, .lp-maths-grid { grid-template-columns: 1fr; padding-top: 40px; }
  .lp-features, .lp-steps, .lp-trust { grid-template-columns: 1fr 1fr; }
  .lp-stats { grid-template-columns: 1fr 1fr; }
  .lp-links { display: none; }
}
@media (max-width: 620px) {
  .lp { padding: 0 14px 30px; }
  .lp-features, .lp-steps, .lp-trust, .lp-stats { grid-template-columns: 1fr; }
  .lp-talk { flex-direction: column; align-items: flex-start; }
  .lp-nav .btn.ghost { display: none; }
}
/* Pricing block */
.pricing { display: grid; gap: 18px; }
.billing-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); justify-self: start; flex-wrap: wrap; }
.billing-toggle button { border: 0; background: none; color: var(--muted); padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.billing-toggle button.on { background: var(--grad); color: var(--brand-ink); }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; }
.plan-card.popular { border-color: rgba(245, 184, 61, .6); box-shadow: var(--glow); }
.plan-card.current { border-color: var(--ok); }
.plan-badge { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--grad); }
.plan-hours strong { font-size: 34px; letter-spacing: -0.03em; }
.plan-price strong { font-size: 24px; }
.plan-perks { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.plan-perks li { display: flex; gap: 6px; align-items: flex-start; }
.plan-perks svg { color: var(--ok); flex: none; margin-top: 2px; }
.plan-card .btn, .plan-card .pill { justify-self: stretch; text-align: center; justify-content: center; }
.topups h3 { margin: 6px 0 2px; }
.topup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 700px) { .topup-grid { grid-template-columns: 1fr; } }
.topup-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; }
.hours-table > summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.hours-table table { margin-top: 10px; }
.plan-now .usage-meter { margin: 12px 0 8px; }
.lp-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Video script (agreed before a video is made) */
.video-prompt .pre { white-space: pre-wrap; }
.video-panel textarea.video-script { font-size: 14px; line-height: 1.5; min-height: 180px; }
.setup-site { margin: 8px 0 12px; }
.setup-site .setup-photos { margin-top: 8px; }
/* Colleague names in chat link to their chat */
.msg .md a.mention { color: var(--accent, inherit); font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Work cards in chat: approve and set up videos without leaving the chat */
.ccard { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; max-width: 560px; }
.ccard > .wcard { border: 0; border-radius: 0; background: transparent; }
.ccard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--line-subtle, var(--line)); }
.ccard-actions .btn.ghost { margin-left: auto; }
.ccard-video { padding: 10px; border-top: 1px solid var(--line-subtle, var(--line)); }
.ccard-video video { width: 100%; max-height: 420px; border-radius: 10px; background: #000; }
.ccard-video video.shape-9x16 { width: auto; max-width: 100%; height: 420px; display: block; margin: 0 auto; }
.vsetup { display: grid; gap: 8px; }
.vsetup-head { display: flex; align-items: center; justify-content: space-between; }
.vsetup-frames { display: flex; gap: 6px; overflow-x: auto; }
.vsetup-frames img { height: 150px; width: auto; border-radius: 8px; object-fit: cover; flex: none; }
.vsetup-frames img.shape-16x9 { height: 96px; }
.vsetup-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vsetup-row select { width: auto; min-width: 0; flex: 0 1 auto; }
.segs { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.segs .seg { font: inherit; font-size: 13px; padding: 6px 10px; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.segs .seg.on { background: var(--brand-fill); color: var(--brand-ink); }
.vsetup textarea { font-size: 13.5px; }
.vsetup-script summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.video-warn-line { color: var(--warn, #b45309); margin-top: 6px; }

/* Discord announcement channels (Apps page) */
.dc-box { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-subtle, var(--line)); }
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dc-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-list li .btn { margin-left: auto; }
.dc-add { display: grid; gap: 8px; }
.dc-add select[multiple] { min-height: 96px; }
/* Announcement cards in chat */
.ccard .wcard-channel { font-size: 12.5px; color: var(--muted); }
.dc-preview { padding: 10px; border-top: 1px solid var(--line-subtle, var(--line)); display: grid; gap: 6px; }
.dc-embed { border-left: 4px solid var(--brand, #7c5cff); background: var(--surface-hover, rgba(127,127,127,.08)); border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; max-width: 520px; }
.dc-embed p { margin: 0; white-space: pre-wrap; font-size: 14px; }
.dc-embed img { width: 100%; border-radius: 6px; }
.dc-btn { justify-self: start; font-size: 13px; padding: 5px 12px; border-radius: 6px; background: var(--line); }
/* Designs (logos, banners, promo graphics) in chat */
.design-preview { padding: 10px; border-top: 1px solid var(--line-subtle, var(--line)); display: grid; gap: 8px; }
.design-preview img { max-width: 100%; max-height: 420px; width: auto; border-radius: 10px; justify-self: start; background: repeating-conic-gradient(rgba(127,127,127,.12) 0% 25%, transparent 0% 50%) 50% / 16px 16px; }
.design-preview img.shape-square, .design-preview img.shape-portrait { max-height: 320px; }
.design-actions { flex-wrap: wrap; gap: 8px; }
/* "Please confirm your email" bar for new sign-ups */
.verify-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--panel, #1b1d2a); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 14px; max-width: calc(100vw - 32px); }


/* ============================================================================================================
   Graphite finishing (15 Nov 2026): flat surfaces, no glass, no glows, no gradient text.
   ============================================================================================================ */
body::before, body::after { display: none; }
body { background: var(--bg); }
h1, .page-head h1, .side-shell .page-head h1, .side-shell .dash-top h1, .dash-top h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); font-weight: 650; letter-spacing: -0.03em; }
.act-value, .books .stat .stat-num, .lp-stat strong, .lp-vs > strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.act.warn .act-value, .books .stat.bad .stat-num { background: none; color: var(--bad); }
.hero h1 em, .lp-hero h1 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--brand-fill); }
.card, .sidebar, .pop-menu, .menu, .rail2 .pop-menu, .mobile-top, .pub-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
.card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn.primary, button.primary, .act-link.primary, .tool-go, .composer .send { background: var(--brand-fill); color: var(--brand-ink); box-shadow: none; }
.side-count, .tc-count { background: var(--brand-fill); color: var(--brand-ink); box-shadow: none; }
.rail-badge { background: var(--brand-fill); color: var(--brand-ink); box-shadow: 0 0 0 2px var(--sidebar); }
.biz-mark, .rail2 .account > summary .av { box-shadow: none; }
.btn { box-shadow: none; }
.tabs a.on, .emp-tabs a.on, .subtabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand-fill); text-shadow: none; }
.pill.review { color: var(--brand); background: var(--brand-soft); }
/* Chips that can be switched on (Ruby's "Always find out") */
.chips.wrap-chips { flex-wrap: wrap; overflow: visible; }
.chips .chip.on { background: var(--brand-soft); border-color: var(--brand-fill); color: var(--ink); }
.chip-input { width: 160px; height: 30px; border-radius: 999px; padding: 0 12px; font-size: 13px; }
.call-missed { padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-soft); margin: 6px 0; font-size: 13px; }
.block { display: block; }
.row.wrap { flex-wrap: wrap; }
/* Area tabs at the top of grouped pages (Inbox: Emails · Approvals, Calendar: Calendar · Bookings · Jobs …) */
.hub-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.hub-tabs a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--soft); border: 1px solid var(--line-subtle); text-decoration: none; }
.hub-tabs a:hover { color: var(--ink); background: var(--surface-hover); }
.hub-tabs a.on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-ink); }
/* Apps: Marblism-style tiles; each opens a side panel with everything for that app */
.int-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.int-tile { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; min-height: 84px; }
.int-tile:hover, .int-tile.on { border-color: color-mix(in srgb, var(--brand-fill) 55%, var(--line)); background: var(--surface-hover); }
.int-tile .int-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.int-tile strong { font-size: 14px; }
.int-desc { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.int-tile .int-icon { width: 40px; height: 40px; flex: none; }
.int-state { flex: none; font-size: 12px; font-weight: 600; color: var(--faint); }
.int-state.ok { color: var(--ok); }
.int-state.bad { color: var(--bad); }
.pillbtn.on { background: var(--brand-fill); color: var(--brand-ink); border-color: var(--brand-fill); }
.drawer-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 80; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 81; background: var(--panel-solid); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head strong { display: block; font-size: 16px; }
.drawer-head small { color: var(--muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 14px; }
.drawer .int-card { background: none; border: 0; padding: 0; box-shadow: none; }
.drawer .int-about { margin: 0 0 10px; color: var(--muted); }
.drawer .int-meta { border-top: 1px solid var(--line-subtle); padding-top: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
html.drawer-open { overflow: hidden; }
.tc-saved { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.teamcol { background: var(--sidebar); }
.tc-person.on { background: var(--surface-hover); box-shadow: none; }
.chips .chip-input { width: 180px; flex: none; }
/* Chat header stays on one line: on narrower screens the call button is just its icon */
.emp-bar { flex-wrap: nowrap; }
.emp-bar .emp-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 1280px) { .emp-bar .call-start { font-size: 0; gap: 0; padding: 0 9px; } .emp-bar .call-start svg { width: 16px; height: 16px; } }
/* Blog post: scheduled / not published yet / live on the business's own website */
.publish-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: 8px 0; border-radius: var(--r-sm); background: var(--brand-soft); font-size: 13px; }
.publish-line span { flex: 1; min-width: 180px; }
.publish-line.warn { background: var(--warn-soft); }
.publish-line.ok { background: var(--ok-soft); }
.publish-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.schedule-pick { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.schedule-pick input[type=date], .schedule-pick input[type=time] { width: auto; height: 32px; padding: 0 8px; font-size: 13px; }
/* ---------- Calendar (week / day / month / list) ---------- */
.cal2 { --c-event: #f5b83d; --c-booking: #5fd08a; --c-work: #7aa7ff; --c-task: #b79cff; --c-external: #8d8b86; }
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-h { font-size: 22px !important; line-height: 28px !important; margin: 0 0 0 6px; }
.cal-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.cal-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cal-chip.off { opacity: .45; } .cal-chip.off i { background: transparent; border: 1px solid var(--c); }
.t-event { --c: var(--c-event); } .t-booking { --c: var(--c-booking); } .t-work { --c: var(--c-work); } .t-task { --c: var(--c-task); } .t-external { --c: var(--c-external); }
.cal-ev { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; padding: 3px 6px; margin: 0 0 3px; border: 0; border-left: 3px solid var(--c); border-radius: 5px; background: color-mix(in srgb, var(--c) 16%, var(--panel)); color: var(--ink); cursor: pointer; overflow: hidden; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 26%, var(--panel)); }
.cal-ev .av { width: 16px; height: 16px; flex: none; }
.cal-ev-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.abs { position: absolute; margin: 0; align-items: flex-start; }
.cal-ev.abs .cal-ev-t { white-space: normal; }
.cal-ev small { display: block; color: var(--muted); font-size: 11px; }
.cal-scroll { max-height: calc(100vh - 230px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.cal-grid { display: grid; grid-template-columns: 56px repeat(var(--n, 7), minmax(110px, 1fr)); position: relative; }
.cal-grid.cols-1 { --n: 1; } .cal-grid.cols-7 { --n: 7; }
.cg-corner, .cg-head { position: sticky; top: 0; z-index: 3; background: var(--panel-solid); border-bottom: 1px solid var(--line); }
.cg-head { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); cursor: pointer; }
.cg-head small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cg-head strong { font-size: 18px; }
.cg-head.today strong { background: var(--brand-fill); color: var(--brand-ink); border-radius: 999px; min-width: 30px; text-align: center; }
.cg-allday-l { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.cg-allday { padding: 4px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line-subtle); min-height: 30px; }
.cg-times { position: relative; }
.cg-hour-l { height: 44px; font-size: 11px; color: var(--faint); text-align: right; padding: 0 6px; transform: translateY(-7px); }
.cg-col { position: relative; border-left: 1px solid var(--line-subtle); background-image: repeating-linear-gradient(to bottom, var(--line-subtle) 0 1px, transparent 1px 44px); cursor: copy; }
.cg-col.today { background-color: color-mix(in srgb, var(--brand-fill) 4%, transparent); }
.cg-now { position: absolute; left: 0; right: 0; height: 2px; background: #f27777; z-index: 2; pointer-events: none; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cm-dow { padding: 8px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; }
.cm-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); cursor: copy; min-width: 0; }
.cm-day.out { opacity: .45; }
.cm-num { border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: 13px; padding: 2px 6px; border-radius: 999px; cursor: pointer; margin-bottom: 3px; }
.cm-day.today .cm-num { background: var(--brand-fill); color: var(--brand-ink); }
.cm-more { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font: inherit; font-size: 12px; }
.cal-list { display: flex; flex-direction: column; gap: 14px; }
.cl-day { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.cl-date { display: flex; flex-direction: column; padding-top: 8px; }
.cl-date.today strong { color: var(--brand); }
.cl-items { display: flex; flex-direction: column; gap: 6px; }
.cl-row { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--ink); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.cl-row:hover { background: var(--surface-hover); }
.cl-time { width: 104px; flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--c); }
@media (max-width: 760px) { .cl-day { grid-template-columns: 1fr; gap: 4px; } .cal-grid { grid-template-columns: 44px repeat(var(--n, 7), minmax(92px, 1fr)); } .cm-day { min-height: 74px; } .cal-h { font-size: 18px !important; } }
/* ---------- Quotes and invoices: filters, designs, AI estimate ---------- */
.inv-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.inv-bar .cal-filters { margin: 0; }
.inv-bar .spacer { min-width: 220px; }
.ask-sam-btns { display: flex; flex-direction: column; gap: 6px; }
.est-basis ul { margin: 6px 0; padding-left: 18px; }
.design-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.drawer.wide { width: min(880px, 100vw); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tpl-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.tpl-card.on { border-color: var(--brand-fill); box-shadow: var(--glow); }
.tpl-card p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-mini { width: 100%; max-width: 168px; aspect-ratio: 0.72; background: #fff; border-radius: 6px; padding: 0 0 8px; overflow: hidden; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.design-card .tpl-mini { width: 70px; }
.tpl-mini.plain { background: #fff; border-top: 10px solid #ddd; }
.tm-head { background: var(--hb); height: 24%; border-bottom: 3px solid var(--a); display: flex; align-items: center; justify-content: space-between; padding: 0 8%; }
.tm-head i { width: 18%; aspect-ratio: 1; border-radius: 3px; background: var(--ht); opacity: .7; } .tm-head b { width: 34%; height: 18%; background: var(--ht); border-radius: 2px; }
.tm-row { height: 5%; margin: 0 8%; background: #eceae6; border-radius: 2px; } .tm-row.th { background: var(--tb); } .tm-row.alt { background: var(--st); }
.tm-tot { margin: 6% 8% 0 auto; width: 40%; height: 9%; background: var(--a); border-radius: 2px; }