/* Launch Email Assistant. Styled to the Launch design system (claude.ai/artifact/KHRnGsvUms1K15h1ECt2MB), the toned-down 28 Oct 2026 version:
   white and mist grounds, ink for the one dark surface, slate text, rule hairlines. Violet is the single accent and appears only on the
   primary action, the "needs you" state, selection and focus. Green appears once, as stat figures on ink. Radius is zero; no shadows. */
@font-face { font-family: "Launch Sans"; src: url("/static/fonts/LaunchSans-Condensed.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/static/fonts/AlbertSans-Variable.ttf") format("truetype"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  /* Launch tokens */
  --ink: #16152b; --slate: #45475e; --slate-muted: #666880; --ink-muted: #b4b6cb; --mist: #f5f6f9; --white: #ffffff; --rule: #e3e5ec;
  --violet: #6900ff; --violet-light: #a585ff; --violet-soft: #efe9ff; --green: #aaf40b;
  /* semantic, kept neutral */
  --text: var(--ink); --body: var(--slate); --muted: var(--slate-muted); --paper: var(--mist); --card: var(--white); --line: var(--rule); --line-2: #cfd1dc;
  --accent: var(--violet); --accent-soft: var(--violet-soft);
  --ok: #1f6b45; --ok-soft: #e6f3ec; --warn: #7a5a00; --warn-soft: #fbf3d6; --err: #9a2f2a; --err-soft: #f9e8e6;
  --ev: var(--violet-soft); --ev-text: var(--ink); --ev-bar: var(--violet); --ev-sel: var(--ink);
  --ink-2: #2a2947; /* hover on ink */
  --font-heading: "Launch Sans", "Gill Sans Condensed", "Gill Sans", Impact, sans-serif;
  --font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r: 0; --side: 272px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-body); font-weight: 400; font-size: 14.5px; letter-spacing: .2px; line-height: 1.5; color: var(--body); background: var(--paper); }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--text); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 0; }
.error { color: var(--err); background: var(--err-soft); padding: 10px 12px; margin-top: 10px; border-left: 3px solid var(--err); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* condensed display face: headings, buttons, stat figures, labels */
.display, .h-big, .btn, .stat-n, .kpi .n, .card-title, .mood-big, .summary-subject, .detail-h h2, .cal-day, .side-h, .topbar-title, .h-sec, .eyebrow, .progress-h, .tab, .card-stat, .file-list .grp, .pill {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; word-spacing: -0.12em; letter-spacing: .02em; }

/* shell */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { background: var(--ink); color: var(--white); padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.wordmark { display: block; position: relative; color: var(--green); width: 132px; height: 28px; transition: color 300ms ease; }
.wordmark-img { display: block; width: 132px; height: 28px; background: currentColor; -webkit-mask: url("/static/img/launch-wordmark.svg") no-repeat left center / contain; mask: url("/static/img/launch-wordmark.svg") no-repeat left center / contain; }
.wordmark:hover { color: var(--white); }
/* Launch wordmark goes back to the Rocket.Launch shelf; a small tag slides out on hover to say so */
.wm-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--ink); background: var(--green); padding: 3px 6px 2px; transition: all 250ms ease; }
.wm-tip::before { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-right-color: var(--green); }
.wordmark:hover .wm-tip, .wordmark:focus-visible .wm-tip { opacity: 1; transform: translate(0, -50%); }
/* "Email assistant" under the wordmark is the way to this app's start page: a quiet label that becomes a button on hover */
a.product { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; width: fit-content; }
.product { color: var(--ink-muted); font-size: 13px; margin: 8px 0 0 -9px; padding: 5px 9px 4px; letter-spacing: .4px; border: 1px solid transparent; transition: all 250ms ease; }
.product .bolt { transition: transform 300ms ease; }
.product-go { display: inline-block; width: 0; opacity: 0; overflow: hidden; transform: translateX(-4px); transition: all 250ms ease; color: var(--green); }
a.product:hover, a.product:focus-visible { color: var(--white); background: var(--ink-2); border-color: var(--violet-light); }
a.product:hover .bolt { transform: rotate(-12deg) scale(1.15); }
a.product:hover .product-go, a.product:focus-visible .product-go { width: 12px; opacity: 1; transform: none; }
.bolt { display: inline-block; width: 12px; height: 12px; background: var(--violet-light); -webkit-mask: url("/static/img/bolt.svg") no-repeat center / contain; mask: url("/static/img/bolt.svg") no-repeat center / contain; }
.search { width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.side .search { background: var(--ink-2); border-color: var(--ink-2); color: var(--white); }
.side .search::placeholder { color: var(--ink-muted); }
.side-h { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { padding: 7px 0 7px 12px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.3; }
.side-list li.needs_you { border-left-color: var(--violet-light); }
.side-list li.draft, .side-list li.in_drafts { border-left-color: #4a4968; }
.side-list a { color: var(--white); text-decoration: none; }
.side-list a:hover { color: var(--violet-light); }
.side-list li { display: flex; align-items: baseline; gap: 6px; }
.side-list li a { flex: 1; min-width: 0; }
.side-list .del { opacity: 0; background: transparent; border: 0; color: var(--ink-muted); font: inherit; font-size: 15px; line-height: 1; padding: 0 4px; cursor: pointer; }
.side-list li:hover .del, .side-list .del:focus-visible { opacity: 1; }
.side-list .del:hover { color: var(--white); }
.side-account { margin-top: auto; display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--ink-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--ink); font-family: var(--font-heading); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.acct-name { font-size: 13.5px; font-weight: 500; color: var(--white); }
.acct-select { margin-top: 3px; background: transparent; color: var(--ink-muted); border: 0; font: inherit; font-size: 12px; max-width: 190px; }
.acct-select option { color: var(--text); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 36px 0; }
.topbar-left { display: flex; align-items: baseline; gap: 22px; }
.topbar-title { font-size: 15px; color: var(--muted); }
.topbar-title a { color: inherit; text-decoration: none; }
.topbar-title a:hover { color: var(--text); }
.stepper { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.stepper span, .stepper a { padding-bottom: 4px; border-bottom: 2px solid transparent; color: inherit; text-decoration: none; }
.stepper a:hover { color: var(--text); }
.stepper .on { color: var(--text); border-color: var(--violet); }
.stepper .done { color: var(--ok); }
.content { padding: 28px 36px 40px; flex: 1; }
.foot { padding: 14px 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }

/* text */
.h-big { font-size: 34px; line-height: .95; }
.h-sec { font-size: 13px; color: var(--muted); margin: 34px 0 12px; }
.lede { color: var(--muted); margin: 8px 0 22px; }
.eyebrow { font-size: 12px; color: var(--muted); }

/* buttons, pills, forms */
.btn { font-size: 16px; line-height: 1; padding: 12px 16px 9px; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; transition: all 300ms ease; }
.btn:hover { background: var(--ink); color: var(--white); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--violet); border-color: var(--violet); color: var(--white); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.side .btn-primary { background: var(--white); border-color: var(--white); color: var(--ink); }
.side .btn-primary:hover { background: var(--violet-light); border-color: var(--violet-light); color: var(--ink); }
.btn-block { display: block; text-align: center; }
.btn-quiet { border-color: var(--line-2); color: var(--muted); margin-left: auto; }
.btn-quiet:hover { background: var(--err); border-color: var(--err); color: var(--white); }
.pill { display: inline-block; font-size: 12px; padding: 4px 8px 2px; background: var(--mist); color: var(--muted); border: 1px solid var(--line); }
.pill-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill-accent { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.pill-muted { background: var(--mist); color: var(--muted); }
input, textarea, select { font: inherit; color: var(--text); letter-spacing: inherit; }
textarea, .field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-bottom: 2px solid var(--line-2); background: var(--card); resize: vertical; line-height: 1.5; }
textarea:focus, input:focus { outline: none; border-bottom-color: var(--violet); }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.ask { display: flex; gap: 8px; margin-top: 26px; }
.ask input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-bottom: 2px solid var(--line-2); background: var(--card); }
.ask.inline { margin: 0; flex: 1; }
.bar { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.bar.center { justify-content: center; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--white); padding: 10px 16px; opacity: 0; transition: .25s; pointer-events: none; font-size: 13px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* cards and stats */
.card { background: var(--card); border: 1px solid var(--line); padding: 22px; }
.cards3, .stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-link { text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: border-color 300ms ease; }
.card-link:hover { border-color: var(--ink); }
.card-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-size: 13px; font-family: var(--font-heading); font-weight: 700; }
.card-title { font-size: 19px; color: var(--text); margin-top: 6px; }
.card p { margin: 0; color: var(--body); line-height: 1.45; flex: 1; }
.card-stat { font-size: 12.5px; color: var(--violet); margin-top: 8px; }
/* the one green moment: stat figures on ink */
.stats3 { margin-top: 16px; background: var(--ink); gap: 0; }
.stat { background: transparent; border: 0; border-left: 1px solid var(--ink-2); padding: 20px 22px; color: var(--ink-muted); }
.stat:first-child { border-left: 0; }
.stat-n { font-size: 40px; line-height: 1; color: var(--green); }
.stat-l { color: var(--ink-muted); font-size: 13px; margin-top: 6px; }
.stat-l .muted { color: var(--ink-muted); opacity: .7; }
.list { background: var(--card); border: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 110px 1fr 1fr 70px; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--mist); }
.row-title { font-weight: 500; color: var(--text); }
.row-sub, .row-time { color: var(--muted); font-size: 13px; }
.row-time { text-align: right; }
.list > .muted { padding: 16px 18px; }

/* split layouts */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.draft-split { grid-template-columns: 1.6fr 1fr; }
.narrow { max-width: 720px; }
.narrow-col { max-width: 320px; }
.bubble { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink); padding: 14px 16px; line-height: 1.5; margin-bottom: 10px; color: var(--text); }
.panel { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 14px; }
.panel dl { margin: 10px 0 0; display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13.5px; }
.panel dt { color: var(--muted); }
.panel dd { margin: 0; color: var(--text); }
.rules { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.mood-big { font-size: 28px; margin-top: 6px; }
.mood-warm { color: var(--ok); } .mood-steady { color: var(--muted); } .mood-tense { color: var(--err); }

/* progress (I read it) */
.progress { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; margin-top: 16px; }
.progress-h { font-size: 12px; color: var(--muted); }
.progress-sub { margin: 4px 0 10px; font-weight: 500; color: var(--text); }
.progress ul { list-style: none; margin: 0; padding: 0; }
.progress li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.progress li:first-child { border-top: 0; }
.progress .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); }
.progress .done .dot { background: var(--ok); border-color: var(--ok); }
.progress .running .dot { border-color: var(--violet); border-top-color: transparent; animation: spin .8s linear infinite; }
.progress .error .dot { background: var(--err); border-color: var(--err); }
.progress .res { color: var(--muted); font-size: 12.5px; text-align: right; }
@keyframes spin { to { transform: rotate(360deg); } }
.paste { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

/* calendar (Google Calendar day view, in Launch tokens) */
.cal { background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.cal-head { display: grid; grid-template-columns: 36px auto 1fr 36px; align-items: center; gap: 12px; padding: 12px 14px 6px; }
.cal-nav { border: 0; background: transparent; font-size: 22px; color: var(--muted); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; }
.cal-nav:hover { background: var(--mist); color: var(--text); }
.cal-dow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); text-align: center; font-weight: 600; }
.cal-day { width: 44px; height: 44px; border-radius: 50%; background: var(--violet); color: var(--white); display: grid; place-items: center; font-size: 24px; margin: 0 auto; padding-top: 2px; }
.cal-day.not-today { background: transparent; color: var(--text); }
.cal-month { font-size: 15px; font-weight: 500; color: var(--text); }
.cal-tz { font-size: 10px; color: var(--muted); padding: 0 0 0 14px; }
.cal-grid { position: relative; height: 616px; margin: 4px 14px 14px 56px; border-left: 1px solid var(--line); }
.cal-hour { position: absolute; left: -56px; right: 0; height: 56px; border-top: 1px solid var(--line); }
.cal-hour span { position: absolute; left: 0; top: -7px; width: 48px; font-size: 10.5px; color: var(--muted); text-align: right; padding-right: 8px; background: var(--card); }
.cal-ev { position: absolute; left: 6px; right: 6px; background: var(--ev); color: var(--ev-text); border-left: 3px solid var(--ev-bar); padding: 5px 8px; font-size: 12.5px; line-height: 1.3; cursor: pointer; overflow: hidden; transition: background 300ms ease; }
.cal-ev:hover { background: #e4dbff; }
.cal-ev .t { font-weight: 500; }
.cal-ev .s { font-size: 11px; color: var(--slate); }
.cal-ev.sel { background: var(--ev-sel); color: var(--white); border-left-color: var(--violet-light); }
.cal-ev.sel .s { color: var(--ink-muted); }
.cal-ev.none { background: var(--mist); color: var(--muted); border-left-color: var(--line-2); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(22,21,43,.04) 6px 12px); }
.cal-ev.none .s { color: var(--muted); }
.cal-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.cal-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cal-ev.short { display: flex; gap: 8px; align-items: baseline; overflow: hidden; white-space: nowrap; }
.cal-ev.short .t { overflow: hidden; text-overflow: ellipsis; }
.cal-ev.short .s { flex: none; }

/* draft page */
.draft-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.gaps, .actions { margin-top: 14px; background: var(--card); border: 1px solid var(--line); padding: 14px 16px; }
.gaps { background: var(--violet-soft); border-color: transparent; border-left: 3px solid var(--violet); color: var(--ink); }
.gaps .eyebrow { color: var(--violet); }
.gaps ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }
.actions table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.actions td { padding: 7px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--text); }
.actions td.o { color: var(--muted); width: 160px; }
.actions td.d { color: var(--muted); width: 120px; text-align: right; }
mark.gap { background: var(--violet-soft); color: var(--violet); padding: 0 2px; }

/* saved page */
.saved { max-width: 640px; margin: 20px auto; text-align: center; }
.plane { color: var(--violet); animation: fly 1s ease-out; display: inline-block; }
@keyframes fly { 0% { transform: translate(-80px, 40px) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.summary { text-align: left; margin-top: 28px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; }
.summary-subject { font-size: 22px; line-height: 1.05; margin: 14px 0; color: var(--text); }
.summary dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.summary dt { color: var(--muted); } .summary dd { margin: 0; color: var(--text); }

/* respond cards */
.cards { display: grid; gap: 10px; margin-top: 14px; }
.ecard { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; transition: border-color 300ms ease; }
.ecard:hover { border-color: var(--ink); }
.ecard.sel { border-color: var(--violet); box-shadow: inset 3px 0 0 var(--violet); }
.ecard .from { font-weight: 500; color: var(--text); } .ecard .date { color: var(--muted); font-size: 12.5px; text-align: right; }
.ecard .subj { grid-column: 1 / -1; color: var(--text); } .ecard .snip { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }

/* admin */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab { padding: 8px 0 10px; font-size: 15px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.tab.on { color: var(--text); border-color: var(--violet); }
.client-list, .file-list { list-style: none; margin: 10px 0; padding: 0; }
.client-list li, .file-list li { padding: 10px 12px; border: 1px solid var(--line); margin-bottom: 6px; background: var(--card); cursor: pointer; color: var(--text); }
.client-list li.sel, .file-list li.sel { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.client-list .sub, .file-list .sub { color: var(--muted); font-size: 12px; }
.file-list .grp { font-size: 12px; color: var(--muted); margin: 14px 0 6px; cursor: default; border: 0; background: none; padding: 0; }
.detail-h { display: flex; justify-content: space-between; align-items: baseline; }
.detail-h h2 { font-size: 30px; line-height: 1; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.kpi { background: var(--card); border: 1px solid var(--line); padding: 14px; }
.kpi .n { font-size: 30px; line-height: 1; color: var(--text); } .kpi .l { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
table.people, .rules-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; }
table.people th, .rules-table th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
table.people td, .rules-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.promises { margin-top: 16px; }
.promises li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); color: var(--text); }
.rule-add { display: flex; gap: 8px; margin-top: 14px; }
.rule-add input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-bottom: 2px solid var(--line-2); }
.rule-add select { padding: 10px; border: 1px solid var(--line); background: var(--card); }
.x { color: var(--err); cursor: pointer; background: none; border: 0; font-size: 16px; }

/* All screens index */
.screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.screens section { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; }
.screens .side-list li { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); line-height: 1.4; border-left: 0; }
.screens .side-list li:last-child { border-bottom: 0; }
.screens .side-list a { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.screens .side-list a:hover { color: var(--violet); }
.screens .side-list .muted { font-size: 12.5px; display: block; }

@media (max-width: 1100px) { .split, .draft-split { grid-template-columns: 1fr; } .cards3, .stats3 { grid-template-columns: 1fr; } .stat { border-left: 0; border-top: 1px solid var(--ink-2); } }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; } .topbar, .content, .foot { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .btn, .card-link, .cal-ev, .ecard, .plane, .progress .running .dot { transition: none !important; animation: none !important; } }

/* Basecamp panel under the actions table */
.actions-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-small { font-size: 13px; padding: 8px 12px 6px; display: inline-flex; align-items: center; gap: 8px; }
.bc-mark { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; border-top-color: transparent; transform: rotate(-45deg); }
.bc-link { font-size: 12px; color: var(--violet); text-decoration: none; margin-left: 6px; white-space: nowrap; }
.bc { margin-top: 12px; border: 1px solid var(--line); border-left: 3px solid var(--violet); background: var(--card); padding: 14px 16px; }
.bc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13.5px; color: var(--text); }
.bc-row label { width: 64px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bc-row a, .bc .note a, .bc-foot a { color: var(--violet); }
.bc select, .bc input { font: inherit; font-size: 13px; border: 1px solid var(--line-2); background: var(--white); color: var(--text); padding: 6px 8px; border-radius: 0; }
.bc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.bc-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 6px 6px 0; }
.bc-table td { border-top: 1px solid var(--line); padding: 7px 6px 7px 0; vertical-align: middle; }
.bc-table td:first-child { width: 26px; }
.bc-table .bc-title { width: 100%; min-width: 0; }
.bc-table .bc-who { width: 140px; }
.bc-table .bc-due { width: 132px; }
.actions.bc-open #actions-table { display: none; }
.bc-row > span { flex: 1; min-width: 200px; }
.bc-table .note { font-size: 12px; line-height: 1.35; margin-top: 4px; }
.bc-table tr.done td { color: var(--muted); }
.bc-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

/* Client inbox: Gmail-like two panes */
.side-inbox { display: flex; justify-content: space-between; align-items: center; color: var(--ink-muted); text-decoration: none; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.side-inbox:hover, .side-inbox.on { color: var(--white); border-color: var(--violet-light); }
.side-count { font-size: 12px; color: var(--green); }
.mbx { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; border: 1px solid var(--line); background: var(--card); height: calc(100vh - 180px); min-height: 480px; }
.mbx-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.mbx-tools { padding: 12px; border-bottom: 1px solid var(--line); }
.mbx-search input { width: 100%; font: inherit; border: 1px solid var(--line-2); padding: 8px 10px; background: var(--mist); color: var(--text); }
.mbx-tabs { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mbx-tabs .tab { border: 1px solid var(--line-2); background: transparent; padding: 6px 10px 4px; font-size: 13px; cursor: pointer; color: var(--muted); }
.mbx-tabs .tab.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.mbx-tabs .muted { margin-left: auto; }
.mbx-threads { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.mbx-threads > li.muted, .mbx-threads > li.error { padding: 16px; }
.mbx-item { padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.mbx-item:hover { background: var(--mist); }
.mbx-item.sel { background: var(--violet-soft); border-left-color: var(--violet); }
.mbx-top { display: flex; justify-content: space-between; gap: 10px; }
.mbx-from { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-date { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.mbx-subj { color: var(--text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-snip { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-item.unread .mbx-from, .mbx-item.unread .mbx-subj { font-weight: 700; }
.mbx-tags { margin-top: 5px; display: flex; gap: 6px; }
.mbx-read { overflow: auto; padding: 20px 26px; min-height: 0; }
.mbx-empty { padding: 40px 0; text-align: center; }
.mbx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.mbx-head h2 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.mbx-acts { display: flex; gap: 8px; flex-shrink: 0; }
.mbx-msg { border-top: 1px solid var(--line); padding: 14px 0; }
.mbx-mh { display: flex; gap: 8px; align-items: baseline; color: var(--text); }
.mbx-body { white-space: pre-wrap; margin-top: 10px; color: var(--text); font-size: 14px; line-height: 1.55; }
.mbx-msg.older { cursor: pointer; }
.mbx-msg.older .mbx-body { max-height: 2.9em; overflow: hidden; color: var(--muted); }

/* account block: who is signed in, whose mailbox is on screen */
.acct-main { min-width: 0; flex: 1; }
.acct-who { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-out { color: var(--violet-light); text-decoration: none; }
.side-account { position: relative; }
.acct-toggle { margin-top: 4px; background: none; border: 0; padding: 0; color: var(--violet-light); font: inherit; font-size: 12px; cursor: pointer; }
.acct-toggle:hover { text-decoration: underline; }
.acct-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--card); color: var(--text); border: 2px solid var(--ink); padding: 10px 0; z-index: 30; }
.acct-menu-h { padding: 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.acct-menu-me { padding: 2px 14px 8px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.acct-menu a { display: flex; gap: 8px; align-items: center; padding: 7px 14px; font-size: 13px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a:hover { background: var(--violet-soft, #efe9ff); }
.avatar.sm { width: 22px; height: 22px; font-size: 11px; flex: none; }
/* sign-in page */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--ink); color: var(--ink-muted); }
.login { max-width: 400px; padding: 40px 32px; text-align: left; }
.login h1 { color: var(--white); font-size: 44px; margin: 18px 0 8px; }
.login p { line-height: 1.5; margin: 0 0 22px; }
.login .btn-primary { display: inline-block; margin-bottom: 18px; }
.login-mark { display: block; width: 132px; height: 28px; color: var(--green); }
.login-form { margin-bottom: 18px; }
.login-form .field label { color: var(--ink-muted); }
.login-form .field input { margin-bottom: 4px; }
.login-form .btn-block { width: 100%; margin-top: 8px; }
/* people tab */
.people-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card); border: 1px solid var(--line); }
.people-grid th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.people-grid td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--text); }
.people-grid td.n { text-align: right; font-variant-numeric: tabular-nums; }