/* Applitor — visual system per UI/BRAND-STYLE.md.
   Calm, premium, quietly powerful. One purple gradient for anything
   primary; success green only ever appears as status. */

:root {
  --bg: #ebe7f7;
  --surface: #ffffff;
  --canvas: radial-gradient(120% 90% at 50% 0%, #ffffff, #f7f3ff 42%, #efe8ff 100%);

  --primary: #7c5cf5;
  --primary-light: #9b7bff;
  --primary-deep: #5b3fd6;
  --primary-gradient: linear-gradient(120deg, #7c5cf5, #9b7bff);
  --tint: #f5f2ff;
  --tint-2: #f4f1fe;

  --border: #ece6ff;
  --border-strong: #e6dfff;
  --hairline: rgba(124, 92, 245, 0.1);

  --text: #191534;
  --text-2: #4c4767;
  --text-muted: #8b87a3;
  --text-faint: #a49fbd;

  /* The assistant bubble: a tinted surface, clearly not the user's purple. */
  --ai-bubble: #ffffff;
  --ai-bubble-border: #ece6ff;
  --ai-bubble-text: #2b2650;

  /* Frosted panels that sit on the canvas gradient. */
  --surface-soft: rgba(255, 255, 255, .75);
  --surface-softer: rgba(255, 255, 255, .55);
  --mono-bg: #f4f1ff;
  --row-hover: #f7f5ff;
  --dashed: #c9b8ff;

  --success: #3ec98a;
  --success-text: #1f9c67;
  --warning: #f0b437;
  --alert: #f0503c;

  --shadow-panel: 0 30px 70px -40px rgba(45, 26, 120, 0.45);
  --shadow-card: 0 16px 34px -30px rgba(45, 26, 120, 0.9);
  --shadow-soft: 0 10px 26px -22px rgba(45, 26, 120, 0.5);

  --r-panel: 22px;
  --r-card: 15px;
  --r-control: 11px;

  color-scheme: light;
}

/**
 * Dark theme. The purple gradient is the constant across both — it is the
 * brand — while surfaces move to a deep violet-black rather than neutral
 * grey, so the palette stays the same family.
 *
 * `data-theme` on <html> is set by the toggle and wins over the media
 * query, so an explicit choice survives a change in OS setting.
 */
:root[data-theme='dark'] {
  --bg: #100d1c;
  --surface: #191527;
  --canvas: radial-gradient(120% 90% at 50% 0%, #221c39, #1a1529 46%, #15111f 100%);

  --primary: #8f72ff;
  --primary-light: #a88fff;
  --primary-deep: #c3b0ff;
  --primary-gradient: linear-gradient(120deg, #7c5cf5, #9b7bff);
  --tint: #221c38;
  --tint-2: #1f1a33;

  --border: #2b2444;
  --border-strong: #342b52;
  --hairline: rgba(155, 123, 255, 0.16);

  --text: #f2effc;
  --text-2: #bdb6d6;
  --text-muted: #8e87a8;
  --text-faint: #6f6889;

  --ai-bubble: #211b36;
  --ai-bubble-border: #2f2750;
  --ai-bubble-text: #e6e1f6;

  --surface-soft: rgba(40, 33, 66, .62);
  --surface-softer: rgba(40, 33, 66, .42);
  --mono-bg: #2b2447;
  --row-hover: #221c38;
  --dashed: #5c4b96;

  --success: #3ec98a;
  --success-text: #4ddba0;
  --warning: #f0b437;
  --alert: #ff6a56;

  --shadow-panel: 0 30px 70px -40px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 16px 34px -28px rgba(0, 0, 0, 0.9);
  --shadow-soft: 0 10px 26px -20px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

/* Theme-dependent surfaces cross-fade instead of snapping. */
.sidebar, .panel, .modal, .stat-pill, .status-pill, .card, .plan,
.composer, .steps, .result, .msg-ai .msg-text, .icon-btn, .menu {
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}

a { color: var(--primary-deep); text-decoration: none; }
a:hover { color: var(--primary); }

button, input, textarea, select { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(109, 77, 246, 0.22); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Animation ─────────────────────────────────────────────────────── */

@keyframes orbFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.03); } }
@keyframes orbGlow  { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.18); } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dotBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes countPulse { 0% { transform: translateY(3px); opacity: .4; } 100% { transform: translateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Shell ─────────────────────────────────────────────────────────── */

.shell {
  display: flex;
  gap: 16px;
  height: 100vh;
  min-height: 640px;
  padding: 18px;
}

.sidebar {
  width: 244px;
  flex: 0 0 244px;
  background: var(--surface);
  border-radius: 20px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 18px 40px -28px rgba(45, 26, 120, 0.35);
  /* The column itself never scrolls; only the board list does, so the plan
     CTA at the bottom stays visible no matter how many boards we add. */
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
}

/* The mark is a four-pointed star with a lot of transparent margin, so it
   is set slightly larger than the cap height to read at the same weight as
   the wordmark beside it. */
.brand img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }

.nav { display: flex; flex-direction: column; gap: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: var(--r-control);
  cursor: pointer;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: background .18s, color .18s;
}
.nav-item:hover { background: var(--tint-2); color: var(--text); }

.nav-item svg { flex: 0 0 auto; }
.nav-item > span:not(.soon-tag) { white-space: nowrap; }

.nav-item.is-active {
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 22px -12px rgba(124, 92, 245, 0.9);
}

.nav-item.is-soon { opacity: .55; cursor: default; }
.nav-item.is-soon:hover { background: transparent; color: var(--text-2); }

.soon-tag {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow {
  padding: 0 12px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Scrolls independently so the sidebar footer is never pushed off. */
.boards {
  min-height: 0;
  overflow-y: auto;
  margin-right: -6px;
  padding-right: 6px;
}
.boards .eyebrow { position: sticky; top: 0; background: var(--surface); z-index: 1; }

.board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--r-control);
  transition: background .18s;
}
.board-row:hover { background: var(--row-hover); }

.board-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-2);
  font-weight: 500;
}

.board-mono {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--mono-bg);
  color: var(--primary-deep);
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * Board / extension status. Two states only, and they mean exactly one
 * thing: green is connected and working, red is not. An amber "pending"
 * reads as "probably fine" — which is the wrong signal for a board that
 * silently cannot be applied to.
 */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}
.dot-ready {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(62, 201, 138, .18);
}
.dot-pending {
  background: var(--alert);
  box-shadow: 0 0 0 3px rgba(240, 80, 60, .18);
}

/* A connected board pulses once when it flips, so the change is noticed. */
@keyframes dotFlip {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(62, 201, 138, .5); }
  60%  { transform: scale(1.25); box-shadow: 0 0 0 7px rgba(62, 201, 138, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(62, 201, 138, .18); }
}
.dot-ready.is-new { animation: dotFlip .7s ease-out; }

/* ── Board marks ────────────────────────────────────────────────────── */

/**
 * Real board logos, served from /assets/img/boards. The monogram stays as
 * the fallback for any board without an asset, so adding a platform never
 * depends on having artwork ready.
 */
.board-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
}

:root[data-theme='dark'] .board-icon {
  /* Marks are drawn for light backgrounds; a white chip keeps them legible
     without inverting the brand colours. */
  background: #f6f4ff;
}

.breakdown-row .board-icon,
.step-row .board-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  padding: 4px;
}

.sidebar-foot { margin-top: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }

.upsell {
  background: var(--tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: 16px;
}
.upsell-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px -8px rgba(124, 92, 245, .7);
}
.upsell p { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin: 0 0 13px; }
.upsell strong { color: var(--text); }

/* ── Main column ───────────────────────────────────────────────────── */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.stat-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stat-pill {
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 15px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.stat-pill b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-pill b.is-bumped { animation: countPulse .35s ease-out; }
.stat-pill span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px 7px 11px;
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── Account area (theme, notifications, account) ───────────────────── */

.account-area {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  position: relative;
}

.icon-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform .18s, color .18s;
}
.icon-btn:hover { transform: translateY(-1px); color: var(--text); }
.icon-btn[aria-expanded='true'] { color: var(--primary-deep); }

.icon-btn .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--alert);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 9px 17px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(93, 60, 220, 1);
  transition: transform .18s, filter .18s;
  white-space: nowrap;
}
.signin-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 13px 5px 5px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .18s;
}
.avatar-btn:hover { transform: translateY(-1px); }

.avatar-chip {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar-chip img { width: 100%; height: 100%; object-fit: cover; }

.avatar-btn .who {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown shared by the bell and the account button. */
.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 268px;
  max-width: 330px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
  padding: 8px;
  z-index: 40;
  animation: riseIn .2s ease-out;
}
.menu[hidden] { display: none; }

.menu-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.menu-head b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.menu-head span {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .16s, color .16s;
}
.menu-item:hover { background: var(--tint-2); color: var(--text); }
.menu-item .spacer { flex: 1; }
.menu-item .hint { font-size: 11px; color: var(--text-faint); font-weight: 600; }

.notif-list { max-height: 320px; overflow-y: auto; }

.notif {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  transition: background .16s;
}
.notif:hover { background: var(--tint-2); }
.notif.is-unread { background: var(--tint); }

.notif-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.notif span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.notif time { display: block; font-size: 10.5px; color: var(--text-faint); font-weight: 600; margin-top: 4px; }

.menu-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.panel {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--canvas);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hairline);
}
.panel-title { font-size: 17px; font-weight: 700; }
.panel-meta { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.ghost-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(45, 26, 120, .7); }

.conversation {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 26px 8px;
  display: flex;
  flex-direction: column;
}

/* ── Empty state ───────────────────────────────────────────────────── */

.hero {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 20px 0 30px;
}

.orb-wrap { position: relative; width: 76px; height: 76px; }
.orb-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 245, .45), transparent 68%);
  animation: orbGlow 3.4s ease-in-out infinite;
}
.orb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 22px 44px -22px rgba(93, 60, 220, 1);
  animation: orbFloat 4.6s ease-in-out infinite;
}

.hero h1 {
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0;
  max-width: 620px;
  line-height: 1.22;
}
.hero p {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text-2);
  margin: 0;
  max-width: 520px;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin-top: 6px;
}

.suggestion {
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.suggestion:hover {
  transform: translateY(-3px);
  background: var(--surface);
  box-shadow: 0 20px 36px -26px rgba(45, 26, 120, .8);
}
.suggestion b { font-size: 13px; font-weight: 700; color: var(--text); }
.suggestion span { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* ── Messages ──────────────────────────────────────────────────────── */

.messages { display: flex; flex-direction: column; gap: 22px; }

.msg { animation: riseIn .35s ease-out; }

.msg-user-row { display: flex; justify-content: flex-end; }

.msg-user {
  max-width: 78%;
  background: var(--primary-gradient);
  color: #fff;
  border-radius: 16px 16px 5px 16px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
  box-shadow: 0 16px 30px -22px rgba(93, 60, 220, .9);
}

.msg-ai { display: flex; gap: 12px; align-items: flex-start; max-width: 88%; }

.avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 20px -14px rgba(93, 60, 220, 1);
}

.msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* The assistant's bubble. Mirrors the user bubble's squared corner to the
   opposite side so the two read as a conversation, and stays a surface
   colour so the filled purple always means "you said this". */
.msg-text {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--ai-bubble-text);
  white-space: pre-wrap;
  background: var(--ai-bubble);
  border: 1px solid var(--ai-bubble-border);
  border-radius: 16px 16px 16px 5px;
  padding: 13px 17px;
  box-shadow: var(--shadow-card);
  max-width: 100%;
}

/**
 * Word-by-word reveal.
 *
 * A per-character typewriter reads as a machine printing; revealing whole
 * words with a short blur-and-lift makes the sentence arrive the way a
 * thought does. Each word carries its own delay via --d, so the browser
 * animates the whole paragraph without JavaScript running a timer per
 * frame — one style write, then the compositor does the rest.
 */
.rv {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(4px);
  animation: revealWord .42s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--d, 0ms);
  will-change: opacity, filter, transform;
}

@keyframes revealWord {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Reduced motion: the text still appears, it just doesn't move. */
@media (prefers-reduced-motion: reduce) {
  .rv { animation: none; opacity: 1; filter: none; transform: none; }
}

.caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--primary);
  border-radius: 2px;
  animation: caretBlink 1s step-end infinite;
}

/* Message actions sit quiet until the message is hovered. */
.msg-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s, transform .18s;
  margin-top: -6px;
}
.msg-ai:hover .msg-actions,
.msg-actions:focus-within { opacity: 1; transform: translateY(0); }

.msg-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.msg-action:hover { background: var(--tint-2); color: var(--text-2); }
.msg-action.is-done { color: var(--success-text); }

.thinking {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--ai-bubble);
  border: 1px solid var(--ai-bubble-border);
  border-radius: 16px 16px 16px 5px;
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
}

/**
 * The boards being searched, cycling. Showing what it is doing beats a
 * spinner that only says that it is busy.
 */
.think-marks { display: flex; gap: 5px; align-items: center; }

.think-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #fff;
  padding: 1px;
  opacity: .25;
  animation: markPulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 260ms);
}

@keyframes markPulse {
  0%, 70%, 100% { opacity: .22; transform: scale(.9); }
  20%           { opacity: 1;   transform: scale(1.08); }
}

/* Jump-to-latest, shown only when the user has scrolled away. */
.jump-btn {
  position: absolute;
  right: 22px;
  bottom: 104px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transform: rotate(90deg);
  z-index: 5;
  animation: riseIn .2s ease-out;
}
.jump-btn[hidden] { display: none; }
.jump-btn:hover { color: var(--text); }

.breakdown-row.is-entering { animation: riseIn .34s ease-out backwards; }
.dots { display: flex; gap: 5px; }
.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  animation: dotBounce 1.3s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
.thinking-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }

/* Steps table used by prepared answers. */
.steps {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 4px 14px;
}
.step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.step-row:last-child { border-bottom: 0; }
.step-row .tick { color: var(--success-text); flex: 0 0 16px; }
.step-row .label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.step-row .value {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  text-align: right;
}

/* Job-count result — the funnel's centrepiece. */
.result {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.result-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.result-total b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.result-total span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }

.result-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0 0 14px;
}

.breakdown { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }

/* Two lines, so the bar runs the width of the row.
   On one line the name column pushed every track to start halfway across
   the card, which made the shortest bars unreadable and the whole set look
   like it began in the middle. */
.breakdown-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas: 'mark name count' 'mark bar bar';
  align-items: center; gap: 3px 11px;
}
.breakdown-row .board-icon,
.breakdown-row .board-mono { grid-area: mark; align-self: center; }
.breakdown-row .board-mono { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.breakdown-row .name {
  grid-area: name; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.breakdown-row .bar {
  grid-area: bar;
  height: 6px;
  border-radius: 999px;
  background: rgba(124, 92, 245, .12);
  overflow: hidden;
}
.breakdown-row .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary-gradient);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.breakdown-row .count {
  grid-area: count;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 12px;
  padding: 13px 22px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 30px -16px rgba(93, 60, 220, 1);
  transition: transform .18s, filter .18s;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cta:disabled { opacity: .55; cursor: default; transform: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text-2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, transform .18s, color .18s;
}
.chip:hover { background: var(--surface); transform: translateY(-1px); color: var(--text); }

/* ── Composer ──────────────────────────────────────────────────────── */

.composer-wrap { padding: 10px 26px 22px; }

.composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 20px 40px -34px rgba(45, 26, 120, .9);
  transition: box-shadow .2s, border-color .2s;
}
.composer:focus-within {
  border-color: #e2b96a;
  box-shadow: 0 0 0 3px rgba(226, 185, 106, .18), 0 20px 40px -34px rgba(45, 26, 120, .9);
}

.composer-row { display: flex; gap: 10px; align-items: flex-end; }

.composer textarea {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  min-height: 42px;
  max-height: 120px;
  padding: 6px 2px;
}

.send-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-gradient);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(93, 60, 220, 1);
  transition: transform .18s, filter .18s;
}
.send-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.send-btn:disabled { opacity: .45; cursor: default; transform: none; }

.composer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
}

/* ── Modal / funnel ────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 18, 66, .38);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
  animation: riseIn .25s ease-out;
}
.overlay[hidden] { display: none; }

.modal {
  background: var(--surface);
  border-radius: 22px;
  width: 100%;
  max-width: 460px;
  padding: 28px;
  box-shadow: 0 40px 90px -40px rgba(45, 26, 120, .8);
  max-height: 92vh;
  overflow-y: auto;
}

.modal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 8px;
}
.modal h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.5px;
  margin: 0 0 8px;
}
.modal p.lede {
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-2);
  margin: 0 0 20px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.field input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 245, .14);
}

.field-hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  line-height: 1.5;
}

/* Country picker: the flag sits inside the control, left of the name. */
.select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  transition: border-color .18s, box-shadow .18s;
}
.select-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 245, .14);
}

.select-flag {
  padding: 0 4px 0 12px;
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
  /* Emoji flags render from the OS font; no asset, no request. */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.select-wrap select {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 11px 32px 11px 8px;
  font-size: 13.5px;
  color: var(--text);
  appearance: none;
  cursor: pointer;
}

.select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.8px solid var(--text-faint);
  border-bottom: 1.8px solid var(--text-faint);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

/* Phone: dial code is a fixed prefix, driven by the country select. */
.phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.phone-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 245, .14);
}

.dial-code {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--tint);
  border-right: 1px solid var(--border-strong);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.phone-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--text);
}

.modal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 12px;
  transition: color .16s;
}
.modal-back:hover { color: var(--text); }

.oauth-row { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--r-control);
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.oauth-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.oauth-btn:disabled { opacity: .5; cursor: default; transform: none; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.modal .cta { width: 100%; justify-content: center; margin-top: 4px; }

.modal-error {
  background: rgba(240, 80, 60, .08);
  border: 1px solid rgba(240, 80, 60, .22);
  color: #b8342a;
  border-radius: var(--r-control);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}
.modal-error[hidden] { display: none; }

.modal-foot {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.6;
}

.choice-row { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 15px;
  cursor: pointer;
  text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--primary-light); }
.choice-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  background: var(--tint);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.choice span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

/* ── Plan picker (inside the chat, never a redirect) ────────────────── */

.modal.is-wide { max-width: 560px; }

/* Gap clears the badge, which is pulled above its card's top edge. */
.plan-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 4px; }

.plan-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 15px 16px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.plan-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--primary-light);
}
.plan-option.is-featured { border-color: var(--primary); }
.plan-option.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 245, .16), var(--shadow-card);
}

.plan-option .term { flex: 1; min-width: 0; }
.plan-option .term b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.plan-option .term span {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 600;
}

/* Per-day is the headline; the term total sits under it, never hidden. */
.plan-option .rate { text-align: right; flex: 0 0 auto; }
.plan-option .rate b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.plan-option .rate i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 2px;
}
.plan-option .rate span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 5px;
}

.plan-flag {
  position: absolute;
  top: -9px;
  left: 15px;
  background: var(--primary-gradient);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.plan-includes {
  background: var(--tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin: 14px 0 4px;
}
.plan-includes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-includes li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.plan-includes li svg { flex: 0 0 15px; color: var(--success-text); margin-top: 2px; }

/* Progress theatre — preparing / building states. */
.progress-stage { text-align: center; padding: 8px 0 4px; }
.progress-stage .orb-wrap { margin: 0 auto 20px; }

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(124, 92, 245, .12);
  overflow: hidden;
  margin: 18px 0 12px;
}
.progress-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--primary-gradient);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}

.progress-step {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  min-height: 20px;
}

.progress-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(62, 201, 138, .12);
  color: var(--success-text);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 4px;
}

.file-drop {
  border: 1.5px dashed var(--dashed);
  border-radius: var(--r-card);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-softer);
  transition: background .18s, border-color .18s;
}
.file-drop:hover { background: var(--tint); border-color: var(--primary); }
.file-drop b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.file-drop span { font-size: 11.5px; color: var(--text-muted); }
.file-drop input { display: none; }

/* ── Standalone pages (pricing, install) ───────────────────────────── */

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 24px 64px;
}

.page-head { text-align: center; margin-bottom: 34px; }
.page-head .eyebrow { padding: 0 0 10px; }
.page-head h1 {
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 10px;
}
.page-head p {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text-2);
  margin: 0 auto;
  max-width: 560px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
  align-items: start;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-panel); }
.plan.is-featured { border-color: var(--primary-light); }

.plan-badge {
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--primary-gradient);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plan h3 { font-size: 15px; font-weight: 700; margin: 0; }
.plan-price { display: flex; align-items: baseline; gap: 5px; }
.plan-price b { font-size: 34px; font-weight: 800; letter-spacing: -1.4px; }
.plan-price span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plan li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.plan li svg { flex: 0 0 15px; color: var(--success-text); margin-top: 2px; }

.notice {
  background: var(--tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 26px auto 0;
  max-width: 620px;
  text-align: center;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.card p { font-size: 12.5px; line-height: 1.62; color: var(--text-2); margin: 0 0 16px; }

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

.connect-list { display: flex; flex-direction: column; gap: 8px; }
.connect-row {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 11px 13px;
}
.connect-row .name { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.connect-row .spacer { flex: 1; }
.connect-row a {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-deep);
}

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.error-page h1 { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; margin: 0; }
.error-page p { font-size: 13.5px; color: var(--text-2); margin: 0; max-width: 440px; line-height: 1.7; }

/* ── Responsive ────────────────────────────────────────────────────── */

/**
 * The sidebar becomes an off-canvas drawer below 900px rather than being
 * hidden — the board list and the plan CTA are part of the pitch, and
 * dropping them on mobile drops the pitch.
 */

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 14px;
  z-index: 45;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 18, 66, .42);
  backdrop-filter: blur(3px);
  z-index: 44;
}

@media (max-width: 1180px) {
  /* The least load-bearing stat goes first when space gets tight. */
  .stat-pill.is-optional { display: none; }
  .avatar-btn .who { display: none; }
  .avatar-btn { padding: 5px; }
}

@media (max-width: 980px) {
  #extension-status span:last-child { display: none; }
  #extension-status { padding: 9px; }
}

@media (max-width: 900px) {
  .shell { padding: 0; gap: 0; height: 100dvh; min-height: 0; }

  .sidebar-toggle { display: flex; }
  body.sidebar-open .sidebar-scrim { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 310px;
    flex: none;
    border-radius: 0 20px 20px 0;
    z-index: 46;
    transform: translateX(-104%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    padding-top: 20px;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  .main { padding: 0; gap: 10px; }

  .topbar {
    padding: 12px 14px 0 62px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }

  .stat-strip { flex-wrap: nowrap; }
  .stat-pill { padding: 7px 12px; }
  .stat-pill span { display: none; }
  .stat-pill::after {
    content: attr(data-short);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
  }

  .panel {
    border-radius: 20px 20px 0 0;
    margin: 0;
    min-height: 0;
    flex: 1;
  }

  .panel-head { padding: 13px 16px; }
  .panel-title { font-size: 15px; }
  .panel-meta { font-size: 11px; }
  #new-chat span { display: none; }

  .conversation { padding: 18px 14px 4px; }
  .composer-wrap { padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
  .composer { border-radius: 16px; padding: 10px 12px; }
  .composer-hint { display: none; }

  /* 16px keeps iOS from zooming the viewport on focus. */
  .composer textarea { font-size: 16px; min-height: 36px; }

  .hero { gap: 13px; padding: 10px 0 20px; }
  .hero h1 { font-size: 25px; letter-spacing: -.6px; }
  .hero p { font-size: 13px; }
  .orb-wrap, .orb { width: 62px; height: 62px; }

  .suggestions { grid-template-columns: 1fr; gap: 8px; }

  .msg-user { max-width: 90%; }
  .msg-ai { max-width: 96%; }

  /* Touch has no hover, so message actions are always visible. */
  .msg-actions { opacity: 1; transform: none; }

  .result { padding: 15px; }
  .result-total b { font-size: 26px; }
  .breakdown-row .count { min-width: 0; }

  .jump-btn { right: 16px; bottom: 92px; }

  .modal { padding: 22px 18px; border-radius: 20px; max-height: 88dvh; }
  .modal h2 { font-size: 19px; }

  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    animation: sheetUp .3s cubic-bezier(.4, 0, .2, 1);
  }

  .page { padding: 28px 16px 48px; }
  .page-head h1 { font-size: 26px; }
  .plan-grid, .setup-grid { grid-template-columns: 1fr; }

  .plan-option { padding: 14px; gap: 10px; }
  .plan-option .rate b { font-size: 19px; }
}

/* Modals become bottom sheets on phones — the reachable part of the screen. */
@keyframes sheetUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 560px) {
  /* The icon alone still reads as "account" once space runs out. */
  .signin-btn span { display: none; }
  .signin-btn { padding: 9px 12px; }

  .hero h1 { font-size: 22px; }
  .stat-pill b { font-size: 12px; }
  .plan-option .term b { font-size: 13px; }
  .plan-option .term span { font-size: 10.5px; }
  .chips { gap: 6px; }
  .chip { padding: 7px 11px; font-size: 11.5px; }
}

/* Landscape phones: the composer must stay reachable. */
@media (max-height: 520px) and (max-width: 900px) {
  .hero { padding: 6px 0 12px; }
  .orb-wrap, .orb { width: 46px; height: 46px; }
  .hero h1 { font-size: 19px; }
  .hero p, .suggestions { display: none; }
}

/* Body scroll lock while a modal or the drawer is open. */
body.has-modal, body.sidebar-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   Job-search structure: position picker, typeahead, filter sheet,
   app cards. Shares the tokens above — nothing here introduces a colour.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Typeahead ──────────────────────────────────────────────────────── */

.ta { position: relative; }

.ta-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); display: flex; pointer-events: none;
}

.ta-input {
  width: 100%; padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--border-strong); border-radius: 13px;
  background: var(--surface); color: var(--text);
  font-size: 14.5px; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.ta-input::placeholder { color: var(--text-faint); }
.ta-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--hairline); }
.ta-input:disabled { opacity: .5; }

.ta-list {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 288px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
  padding: 5px;
  animation: riseIn .16s ease-out;
}

.ta-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
}
.ta-row b { font-weight: 600; font-size: 13.5px; }
.ta-row span { font-size: 11.5px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.ta-row.is-active { background: var(--tint); }
.ta-row.is-active b { color: var(--primary-deep); }

.ta-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Pills: chosen titles and suggestions ───────────────────────────── */

.chosen, .suggest-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chosen:not(:empty) { margin-top: 12px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: border-color .13s, background .13s, color .13s;
}
.pill:hover { border-color: var(--primary); background: var(--tint); color: var(--primary-deep); }

/* Chosen reads as a state, not a button — so it is filled, and the only
   interactive part of it is the cross. */
.pill.is-on {
  border-color: var(--primary); background: var(--tint);
  color: var(--primary-deep); cursor: default; padding-right: 8px;
}
.pill.is-on:hover { background: var(--tint); }
.pill.is-on button {
  display: flex; border: 0; background: none; padding: 0;
  color: inherit; cursor: pointer; opacity: .6;
}
.pill.is-on button:hover { opacity: 1; }
.pill.is-all { border-style: dashed; }

/* ── Position picker ────────────────────────────────────────────────── */

.picker {
  margin-top: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-soft);
}
.picker.is-done { opacity: .62; pointer-events: none; }
.picker.is-done .cta { background: var(--tint); color: var(--primary-deep); box-shadow: none; }

.picker-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.picker-head b { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.picker-cat {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--tint); color: var(--primary-deep);
}
.picker-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; line-height: 1.5; }

.suggest { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.suggest-head { margin-bottom: 9px; }
.suggest-head b { display: block; font-size: 12.5px; font-weight: 700; }
.suggest-head span { font-size: 11.5px; color: var(--text-faint); }

.picker-foot { margin-top: 16px; }
.picker-foot .cta { width: 100%; justify-content: center; }

/* ── Result: the basis line ─────────────────────────────────────────── */

.result-terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }

.term {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--tint-2); color: var(--text-2);
  font-size: 11.5px; font-weight: 600;
}
.term.is-action {
  border: 1px solid var(--border-strong); background: var(--surface);
  cursor: pointer; transition: border-color .13s, color .13s;
}
.term.is-action:hover { border-color: var(--primary); color: var(--primary-deep); }

.result-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.result-actions .cta { flex: 1; min-width: 190px; }

/* ── Filter sheet ───────────────────────────────────────────────────── */

.sheet {
  display: grid; gap: 22px; padding: 2px 2px 4px;
  max-height: min(64vh, 560px); overflow-y: auto;
  /* A fade at the bottom edge, so a sheet with more below it does not look
     like a sheet that ends there. Pinned to the scroll container, so it
     disappears once you reach the end. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}
.sheet:not(:hover) { scrollbar-width: thin; }
.sheet section { display: grid; gap: 9px; }
.sheet h3 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: -.1px; }
.sheet-help { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; margin: -2px 0 0; }

.opts { display: grid; gap: 7px; }
.opts.is-tight { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.opt {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 11px 13px; border-radius: 13px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  cursor: pointer; transition: border-color .13s, background .13s;
  text-align: left; font: inherit; color: inherit;
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt b { font-size: 13px; font-weight: 600; }
.opt span { font-size: 11.5px; color: var(--text-faint); }
.opt:hover { border-color: var(--primary); }
.opt.is-on { border-color: var(--primary); background: var(--tint); }
.opt.is-on b { color: var(--primary-deep); }

.field-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 13px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); cursor: pointer; font: inherit; text-align: left;
}
.field-btn:hover { border-color: var(--primary); }
.field-btn span { flex: 1; font-size: 13.5px; font-weight: 600; }
.field-btn i {
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--primary-deep);
}

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--tint-2); border-radius: 11px; }
.seg button {
  padding: 7px 14px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.seg button.is-on { background: var(--surface); color: var(--primary-deep); box-shadow: var(--shadow-soft); }

.money { display: flex; align-items: center; gap: 10px; }
.money span {
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  padding: 12px 0 12px 14px;
}

/* The currency is a control, not a label, so it has to look pressable
   without becoming a second field competing with the number. */
.money select {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); padding: 12px 4px 12px 13px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
}
.money select:focus-visible { color: var(--primary-deep); }
.money input {
  flex: 1; padding: 12px 14px 12px 4px;
  border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); outline: none;
}
.money { border: 1.5px solid var(--border-strong); border-radius: 13px; background: var(--surface); }
.money:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--hairline); }

.sheet-foot { display: flex; gap: 9px; align-items: center; margin-top: 18px; }
.sheet-foot .cta { flex: 1; justify-content: center; }
.sheet-note { font-size: 12px; color: var(--alert); margin-top: 8px; text-align: center; }

.link-btn {
  border: 0; background: none; padding: 0; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--alert); }

/* ── The picker's header row ────────────────────────────────────────── */

.picker-filters {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.picker-filters:hover { border-color: var(--primary); color: var(--primary-deep); }

/* Title on the left, place on the right: a search is both, and the place
   was a popup away when it is half the question. */
.picker-row { display: flex; align-items: stretch; gap: 8px; }
.picker-row .ta { flex: 1; min-width: 0; }

.picker-place {
  flex: 0 0 auto; max-width: 210px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: border-color .15s;
}
.picker-place:hover { border-color: var(--primary); color: var(--primary-deep); }
.picker-place span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-place svg:first-child { color: var(--primary); flex: 0 0 auto; }
.picker-place svg:last-child { color: var(--text-faint); flex: 0 0 auto; }

/* ── Searching ──────────────────────────────────────────────────────── */

.picker-searching {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  animation: riseIn .25s ease-out both;
}
.picker-searching > span[data-searching-label] { flex: 0 0 auto; }

.picker-spin {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  border: 2px solid var(--tint-2); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.picker-progress {
  flex: 1; height: 5px; border-radius: 999px;
  background: var(--tint-2); overflow: hidden; min-width: 60px;
}
.picker-progress i {
  display: block; height: 100%; width: 12%; border-radius: 999px;
  background: var(--primary-gradient);
  transition: width .42s cubic-bezier(.4, 0, .2, 1);
}

.picker.is-searching .ta-input { pointer-events: none; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .picker-spin { animation-duration: 2.4s; }
}

@media (max-width: 620px) {
  .picker-row { flex-direction: column; }
  .picker-place { max-width: none; padding: 10px 12px; }
}

/* ── Connected Apps: sidebar ────────────────────────────────────────── */

.boards .eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eyebrow-count { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }

.board-list { display: flex; flex-direction: column; }

/* The sidebar list is scrollable, but the plan CTA below it must never be
   pushed off screen — which is what an unbounded list of 23 apps does. */
.boards { display: flex; flex-direction: column; min-height: 0; }
.board-list { overflow-y: auto; min-height: 0; }

.board-row {
  width: 100%; border: 0; background: none; font: inherit; text-align: left;
  cursor: pointer; border-radius: 9px; padding: 6px 8px;
  transition: background .12s, opacity .12s;
}
.board-row:hover { background: var(--tint); }
.board-row.is-off { opacity: .45; }
.board-row.is-off:hover { opacity: .8; }

.nav-count {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: var(--text-faint);
}

/* ── Connected Apps: the card in chat ───────────────────────────────── */

.appcard {
  margin-top: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-soft);
}
.appcard.is-on { border-color: var(--border-strong); }

.appcard-skeleton { height: 128px; border-radius: 12px; background: var(--tint-2); }
.appcard-error { font-size: 13px; color: var(--alert); }

.appcard-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.appcard-head .board-icon,
.appcard-head .board-mono { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; }
.appcard-title { flex: 1; display: grid; gap: 1px; }
.appcard-title b { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.appcard-title span { font-size: 11.5px; color: var(--text-faint); }

.appcard-count {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 13px; background: var(--tint); margin-bottom: 12px;
}
.appcard-count b {
  font-size: 24px; font-weight: 800; letter-spacing: -1px;
  background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.appcard-count span { font-size: 12px; color: var(--text-2); font-weight: 600; }

.appcard-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
  margin-bottom: 14px;
}
.appcard-stats div { display: grid; gap: 2px; }
.appcard-stats i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.appcard-stats b { font-size: 12.5px; font-weight: 600; }

.appcard-hint { font-size: 11.5px; color: var(--text-faint); margin: 8px 0 14px; line-height: 1.5; }

.appcard-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.appcard-actions .cta { flex: 1; min-width: 170px; }
.appcard-actions .ghost-btn { text-decoration: none; }

/* ── Connected Apps: the full list ──────────────────────────────────── */

.applist { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 7px; }

.approw {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 12px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  cursor: pointer; font: inherit; text-align: left;
  transition: border-color .13s, background .13s, opacity .13s;
  opacity: .55;
}
.approw:hover { border-color: var(--primary); opacity: .85; }
.approw.is-on { border-color: var(--primary); background: var(--tint); opacity: 1; }
.approw .board-icon, .approw .board-mono { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; }
.approw-name {
  flex: 1; font-size: 12.5px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.approw.is-on .approw-name { color: var(--primary-deep); }

.apps-loading { padding: 34px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .picker, .appcard { padding: 14px; border-radius: 15px; }
  .appcard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts.is-tight { grid-template-columns: minmax(0, 1fr); }
  .applist { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .result-actions .cta, .appcard-actions .cta { min-width: 0; width: 100%; }
  .sheet { max-height: 58vh; }
}

/* ══════════════════════════════════════════════════════════════════════
   Composer position, editable result chips, the location sheet, and the
   two states of an app card.
   ══════════════════════════════════════════════════════════════════════ */

/* ── An empty thread centres the composer ───────────────────────────── */

.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* With no conversation there is nothing to scroll past, so the input sits
   where the eye already is rather than at the bottom of an empty page. */
.panel.is-empty .panel-body { justify-content: center; }
/* A floor under the empty state, so opening the live panel cannot squeeze
   it to a sliver and clip the line under the headline. The page scrolls
   instead, which is the right thing to give up. */
.panel.is-empty .conversation { flex: 0 1 auto; min-height: 210px; overflow-y: auto; padding-bottom: 0; }
.panel.is-empty .hero { margin: 0 auto; padding-bottom: 18px; }
.panel.is-empty .composer-wrap { padding-bottom: 0; }

/* The layout switch itself cannot tween, so the composer plays a short
   settle downwards — the change reads as movement rather than a jump. */
@keyframes composerSettle {
  from { transform: translateY(-16px); opacity: .85; }
  to   { transform: none; opacity: 1; }
}
.panel.has-settled .composer-wrap { animation: composerSettle .34s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .panel.has-settled .composer-wrap { animation: none; }
}

/* ── Result chips are controls ──────────────────────────────────────── */

.term.is-action { cursor: pointer; }
.term.is-action svg { opacity: .55; flex: 0 0 auto; }
.term.is-action:hover svg { opacity: 1; }

/* Filters this search has not set: offered, but visibly not in play. */
.term.is-muted {
  background: none; border-style: dashed; color: var(--text-faint);
}
.term.is-muted:hover { color: var(--primary-deep); border-style: solid; }

/* ── The location sheet ─────────────────────────────────────────────── */

.locsheet { display: grid; gap: 14px; }
.locsheet-body { display: grid; gap: 12px; min-height: 262px; align-content: start; }
.locsheet-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
}
.locsheet-grid { display: flex; flex-wrap: wrap; gap: 7px; }

/* A row-shaped option: icon, then label and help stacked beside it. */
.opt.is-row {
  display: flex; align-items: center; gap: 12px;
}
.opt.is-row > span:last-child { display: grid; gap: 2px; }
.opt-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  background: var(--tint); color: var(--primary);
}
.opt.is-on .opt-icon { background: var(--primary-gradient); color: #fff; }

.ta-mark { display: flex; color: var(--text-faint); flex: 0 0 auto; }
.ta-row.is-active .ta-mark { color: var(--primary); }

/* A one-question sheet needs no scroll area or fade. */
.sheet.is-single { max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; }

/* ── App card ───────────────────────────────────────────────────────── */

/* Open the site / remove it again: necessary, rarely wanted, so they sit
   out of the way at the top instead of competing with the action. */
.appcard-top { display: flex; align-items: center; gap: 4px; margin-left: 4px; }

.icon-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 9px;
  border: 0; background: none; font: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; text-decoration: none;
  transition: background .13s, color .13s;
}
.icon-link:hover { background: var(--tint); color: var(--primary-deep); }
.icon-link.is-danger:hover { background: rgba(240, 80, 60, .1); color: var(--alert); }
.icon-link svg { flex: 0 0 auto; }

.appcard-head { flex-wrap: wrap; }
.appcard-head .dot { margin-left: auto; }

@media (max-width: 620px) {
  .appcard-top { margin-left: 0; width: 100%; justify-content: flex-start; }
  .appcard-top .icon-link span { display: inline; }
}

/* ── Empty state, tuned ─────────────────────────────────────────────── */

/* Everything above the composer is deliberately small: the input is what
   the empty state is for, so it gets the middle of the screen rather than
   being pushed into the lower third by a banner. */
.panel.is-empty .hero { padding: 0 0 26px; gap: 11px; }
.panel.is-empty .orb-wrap,
.panel.is-empty .orb { width: 54px; height: 54px; }
.panel.is-empty .orb svg { width: 22px; height: 22px; }
.panel.is-empty .hero h1 { font-size: 30px; }
.panel.is-empty .hero p { max-width: 46ch; }

/* The headline and sub reserve their height, so a longer line out of the
   rotation cannot shove the composer down the page on one load in fifty.
   The sub is two lines' worth and is clamped to two: a personalised line
   that runs to three would eat into the composer, and half a sentence
   sliding under the input is worse than an ellipsis. */
.hero h1 { min-height: 1.22em; }
.hero p {
  min-height: 3.4em; height: 3.4em; flex: 0 0 auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.hero { flex: 0 0 auto; }

/* Starters: quiet single-line rows under the input, with real space between
   them and it — they are options, not the point of the screen. */
.starters {
  display: grid; gap: 2px;
  width: 100%; max-width: 620px; margin: 0 auto;
  padding: 22px 26px 24px;
}
.panel:not(.is-empty) .starters { display: none; }

.starter {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 0; background: none;
  border-radius: 11px; cursor: pointer; text-align: left;
  font: inherit; font-size: 13.5px; color: var(--text-2);
  transition: background .14s, color .14s;
}
.starter:hover { background: var(--surface-soft); color: var(--text); }
.starter-icon { display: flex; color: var(--text-faint); flex: 0 0 auto; }
.starter:hover .starter-icon { color: var(--primary); }

@media (max-width: 700px) {
  .starters { padding: 16px 14px 18px; }
  .panel.is-empty .hero h1 { font-size: 24px; }
}

/* ── Composer width ─────────────────────────────────────────────────── */

/* Once there is a conversation the composer stops spanning the panel. A
   full-width input under a column of messages reads as a different, wider
   thing than the column it belongs to. */
.composer-wrap { max-width: 900px; margin: 0 auto; width: 100%; }
.panel.is-empty .composer-wrap { max-width: 820px; }

/* Messages share the same column so the input lines up with what it answers. */
.messages { max-width: 900px; margin: 0 auto; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   The live strip and the panel it opens.
   ══════════════════════════════════════════════════════════════════════ */

.stat-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px; border-radius: 999px;
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: border-color .16s, background .16s;
}
.stat-strip:hover { border-color: var(--border-strong); background: var(--surface); }
.stat-strip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Says what the strip is before anybody clicks it. Without this the numbers
   read as a readout and nobody discovers there is anything behind them. */
.live-badge {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  background: linear-gradient(120deg, #ef4444, #f0503c 55%, #7c5cf5);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  white-space: nowrap; text-transform: uppercase;
  box-shadow: 0 6px 16px -10px rgba(239, 68, 68, .9);
}

/* A sheen that crosses every few seconds — enough to catch the eye once,
   not enough to keep pulling at it. */
.live-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: liveSheen 4.5s ease-in-out infinite;
}
@keyframes liveSheen {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

.live-ping { background: #fff; }
.live-ping {
  width: 7px; height: 7px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
  animation: livePing 2s ease-out infinite;
}
@keyframes livePing {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.stat-pill { border: 0; font: inherit; cursor: pointer; }
.stat-pill b { transition: color .2s; }
.stat-pill b.is-live { color: var(--primary); }

.stat-chevron {
  display: flex; color: var(--text-faint); padding-right: 6px;
  transform: rotate(90deg); transition: transform .2s;
}
body.has-live .stat-chevron { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .live-ping, .live-badge::after { animation: none; }
}

/* ── The panel ──────────────────────────────────────────────────────── */

.live-panel {
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  animation: livePanelIn .26s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes livePanelIn {
  from { opacity: 0; transform: translateY(-10px); max-height: 0; }
  to   { opacity: 1; transform: none; max-height: 520px; }
}

.live-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.live-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.2px; }

.live-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--tint); color: var(--primary-deep);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.live-caption {
  font-size: 11.5px; color: var(--text-faint); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-head .icon-btn { margin-left: auto; flex: 0 0 auto; }

.live-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: background .13s, color .13s;
}
.live-tab:hover { background: var(--tint); color: var(--text); }
.live-tab.is-active { background: var(--primary-gradient); color: #fff; }
.live-tab svg { opacity: .8; }

.icon-btn.is-small { width: 30px; height: 30px; border-radius: 9px; }

.live-body { max-height: 300px; overflow-y: auto; padding: 12px 16px; }

/* ── One panel, three regions ───────────────────────────────────────── */

.live-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px; padding: 16px 18px;
}

.live-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.live-col h3 {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.live-col h3 svg { color: var(--primary); }
.live-col .live-list {
  max-height: 252px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent 100%);
  mask-image: linear-gradient(#000 78%, transparent 100%);
}

.live-map { display: grid; gap: 10px; min-width: 0; align-content: start; }

/* Applications per app. The bar is the shape; the number is the fact. */
.live-bars { display: grid; gap: 7px; }
.live-bar { display: grid; grid-template-columns: 18px 1fr 44px auto; align-items: center; gap: 8px; }
.live-bar img, .live-bar .board-mono { width: 18px; height: 18px; border-radius: 5px; }
.live-bar-name {
  font-size: 11.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.live-bar-track { height: 6px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.live-bar-track i {
  display: block; height: 100%; border-radius: 999px; background: var(--primary-gradient);
  animation: heatGrow .5s cubic-bezier(.22,.61,.36,1) both;
}
.live-bar b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.live-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 4px; }
.live-tile { padding: 9px 11px; border-radius: 11px; background: var(--surface-soft); display: grid; gap: 1px; }
.live-tile b { font-size: 16px; font-weight: 800; letter-spacing: -.5px; }
.live-tile span { font-size: 10px; color: var(--text-faint); font-weight: 600; }

/* ── Arcs ───────────────────────────────────────────────────────────── */

.worldarcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.worldarcs .arc {
  fill: none; stroke: var(--primary); stroke-width: .35; stroke-linecap: round;
  stroke-dasharray: 4 60; opacity: .75;
  animation: arcRun 5s linear infinite; animation-delay: var(--d);
}
@keyframes arcRun {
  from { stroke-dashoffset: 64; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .worldarcs .arc { animation: none; stroke-dasharray: none; opacity: .25; }
}

@media (max-width: 1180px) {
  .live-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .live-map { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 760px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-col .live-list { max-height: 190px; }
}
.live-loading, .live-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.live-empty b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 5px; }
.live-empty span { display: block; max-width: 42ch; margin: 0 auto; line-height: 1.55; }

.live-note { font-size: 11.5px; color: var(--text-faint); margin: 0 0 11px; }

/* ── Activity ───────────────────────────────────────────────────────── */

.live-list { display: grid; gap: 2px; }

.live-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 11px;
  animation: riseIn .3s ease-out backwards;
}
.live-row:hover { background: var(--surface-soft); }

.live-face {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  object-fit: cover; background: var(--tint);
}
.live-face.is-mono {
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: var(--primary-deep);
}

.live-row-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.live-row-body b { font-size: 12.5px; font-weight: 700; }
.live-row-body span {
  font-size: 11.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.live-mark { width: 18px; height: 18px; border-radius: 5px; flex: 0 0 18px; }
.live-mark.is-mono {
  display: grid; place-items: center; background: var(--tint);
  font-size: 8.5px; font-weight: 800; color: var(--text-muted);
}
.live-row time { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* ── Heat map ───────────────────────────────────────────────────────── */

.heat { display: grid; gap: 7px; }

.heat-row {
  display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px;
  padding: 7px 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; cursor: pointer; text-align: left;
  transition: background .13s;
}
.heat-row:hover { background: var(--surface-soft); }
.heat-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-track { height: 9px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.heat-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7c5cf5, #f0503c);
  animation: heatGrow .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heatGrow { from { transform: scaleX(.02); transform-origin: left; } to { transform: none; } }
.heat-num { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── App pulse ──────────────────────────────────────────────────────── */

.pulse { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 7px; }
.pulse-app {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 11px; background: var(--surface-soft);
}
.pulse-app img, .pulse-app .board-mono { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px; }
.pulse-app span { flex: 1; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-app b { font-size: 12.5px; font-weight: 800; color: var(--primary-deep); font-variant-numeric: tabular-nums; }

/* ── Foot ───────────────────────────────────────────────────────────── */

.live-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-soft);
}
.live-foot p { margin: 0; font-size: 11.5px; color: var(--text-faint); }
.live-foot .cta { padding: 10px 18px; font-size: 13px; flex: 0 0 auto; }

.menu-sep { height: 1px; background: var(--border); margin: 5px 0; }

@media (max-width: 900px) {
  .live-badge span { display: none; }
  .heat-row { grid-template-columns: 96px 1fr auto; }
  .live-foot { flex-direction: column; align-items: stretch; }
  .live-foot .cta { width: 100%; justify-content: center; }
  .live-body { max-height: 260px; }
}

/* ── Top bar fit ────────────────────────────────────────────────────── */

/* The strip grew a badge and a fourth pill, which pushed the account area
   onto a second row. It shrinks instead: the numbers can lose a pill before
   the sign-in button is allowed to move. */
.topbar { flex-wrap: nowrap; }
.stat-strip { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.account-area { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 1560px) { .stat-pill[data-short="apps"] { display: none; } }
@media (max-width: 1360px) { .stat-pill[data-short="live"] { display: none; } }
@media (max-width: 1180px) { .live-badge span, .stat-pill span { display: none; } }
@media (max-width: 1180px) { .live-badge { padding: 5px 8px; } }

/* ── Empty state with the panel open ────────────────────────────────── */

/* The panel takes height from the conversation, so the conversation has to
   be able to give some back — and a flex item only shrinks if it is allowed
   to go below its content size, which is what min-height:0 does. Without it
   the hero overflows its box and renders straight through the composer.
   The hero itself never shrinks: a text box squeezed past its content keeps
   drawing the text at zero height, and the headline lands on the line below. */
.panel.is-empty .hero { flex: 0 0 auto; }

/* Below a certain height the orb is the first thing to go — it is decoration,
   and the headline is not. */
@media (max-height: 780px) {
  .panel.is-empty .orb-wrap { display: none; }
  .panel.is-empty .hero { padding-bottom: 18px; }
}

/* With the live panel open the conversation is short enough that the sub-line
   gets clipped. The orb is the first thing to go — it is decoration, and the
   sentence explaining what to do is not. */
body.has-live .panel.is-empty .orb-wrap { display: none; }
body.has-live .panel.is-empty .hero { padding-bottom: 16px; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   Dashboard — a grid of tiles. Sections open as sheets rather than living
   expanded here: six sections of form fields on one page is a form, and
   nobody reads a form they did not come to fill in.
   ══════════════════════════════════════════════════════════════════════ */

.dash { display: grid; gap: 16px; padding-bottom: 26px; }

.dash-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none;
}
.dash-back:hover { border-color: var(--primary); color: var(--primary-deep); }

.dash-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.dash-head h1 { font-size: 25px; font-weight: 800; letter-spacing: -.9px; margin: 0; }
.dash-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* The numbers live in the header rather than in a row of cards of their
   own. Five figures do not need five boxes, and the boxes were most of the
   empty space on the page. */
.dash-head-stats {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 10px 18px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.dash-stat { display: grid; gap: 1px; }
.dash-stat b { font-size: 20px; font-weight: 800; letter-spacing: -.7px; line-height: 1.1; }
.dash-stat span { font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.dash-stat.is-accent b {
  background: var(--primary-gradient); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Grid ───────────────────────────────────────────────────────────── */

/* Two columns, each a stack of its own. Placing every card on one grid
   made the short column end early and left a hole; two stacks simply run
   to their own lengths. */
.dash-grid {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
}
.dash-main { display: grid; gap: 14px; align-content: start; }

/* The rail is shorter than the log beside it and always will be — it holds
   who you are, which is finite, next to what you have done, which is not.
   Sticking it keeps the profile in view while the list scrolls past instead
   of leaving a column of empty page under it. */
.dash-rail {
  display: grid; gap: 14px; align-content: start;
  position: sticky; top: 14px;
}
.dash-charts { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; }

@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
  .dash-head-stats { gap: 16px; padding: 10px 14px; }
}

.dash .card { background: var(--surface); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
.dash .card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.dash .card h2 { font-size: 14px; font-weight: 700; margin: 0; }
.dash .card .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

.dash .btn-row { display: flex; gap: 8px; margin-top: 12px; }
.dash .btn-row > * { flex: 1; justify-content: center; }
.dash-wide { width: 100%; justify-content: center; margin-top: 12px; }

.dash-empty { padding: 24px 10px; text-align: center; color: var(--text-muted); font-size: 13px; }
.dash-empty.is-tight { padding: 14px 6px; }
.dash-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.dash-empty span { display: block; max-width: 40ch; margin: 0 auto; line-height: 1.55; }

/* ── Profile card ───────────────────────────────────────────────────── */

.dash-profile { display: grid; gap: 14px; }

.dash-me { display: flex; align-items: center; gap: 13px; }

.dash-photo { position: relative; width: 62px; height: 62px; flex: 0 0 62px; }
.dash-photo img, .dash-photo > span {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: grid;
  place-items: center; background: var(--primary-gradient); color: #fff;
  font-size: 23px; font-weight: 800;
}
.dash-photo-edit {
  position: absolute; right: -3px; bottom: -3px;
  width: 25px; height: 25px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--surface-soft);
  color: var(--text-2); cursor: pointer; display: grid; place-items: center;
}
.dash-photo-edit:hover { background: var(--primary); color: #fff; }

.dash-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dash-who b { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; }
.dash-who span {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dash-score { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; }
.dash-score b { display: block; font-size: 13px; font-weight: 700; }
.dash-score span { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }

/* A ring, because a percentage that is also a shape is read at a glance. */
.dash-ring {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  display: grid; place-items: center;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--tint) 0);
  position: relative;
}
.dash-ring::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface);
}
.dash-ring b { position: relative; z-index: 1; font-size: 15px; font-weight: 800; }
.dash-ring i { font-style: normal; font-size: 9px; font-weight: 700; opacity: .6; }

/* ── Section rows ───────────────────────────────────────────────────── */

.sec-list { display: grid; gap: 3px; }

.sec-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 12px; background: none;
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  transition: background .13s;
}
.sec-row:hover { background: var(--surface-soft); }

.sec-tick {
  display: grid; place-items: center; flex: 0 0 26px;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--tint-2); color: var(--text-faint);
}
.sec-row.is-done .sec-tick { background: var(--success-bg); color: var(--success-text); }

.sec-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sec-body b { font-size: 13px; font-weight: 600; }
.sec-body span {
  font-size: 11.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sec-count { font-size: 11.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sec-count i { font-style: normal; font-weight: 500; color: var(--text-faint); }
.sec-row > svg { color: var(--text-faint); flex: 0 0 auto; }
.sec-row:hover > svg { color: var(--primary); }

/* ── The week, as bars ──────────────────────────────────────────────── */

.dash-week { display: grid; align-content: space-between; }

.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.bars .bar { display: grid; gap: 5px; justify-items: center; }
.bar-val {
  font-size: 10.5px; font-weight: 800; color: var(--text-2);
  font-variant-numeric: tabular-nums; min-height: 13px;
}
.bar-track {
  width: 100%; max-width: 26px; height: 96px; border-radius: 8px;
  background: var(--tint-2); display: flex; align-items: flex-end; overflow: hidden;
}
.bar-track i {
  display: block; width: 100%; border-radius: 8px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 100%);
  animation: barGrow .45s cubic-bezier(.22,.61,.36,1) both;
}
.bars .bar.is-today .bar-track { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--primary); }
.bar-day { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.bars .bar.is-today .bar-day { color: var(--primary-deep); }

@keyframes barGrow { from { height: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  .bar-track i { animation: none; }
}

/* ── Time tracker ───────────────────────────────────────────────────── */

.dash-tracker { display: grid; align-content: space-between; justify-items: center; }

.tracker {
  width: 130px; height: 130px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--tint-2) 0);
}
.tracker::before {
  /* The ticks, so it reads as a dial rather than a pie. */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(var(--surface) 0deg 1.4deg, transparent 1.4deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
  mask: radial-gradient(circle, transparent 56%, #000 57%);
}
.tracker::after {
  content: ''; position: absolute; inset: 13px; border-radius: 50%; background: var(--surface);
}
.tracker-face { position: relative; z-index: 1; display: grid; gap: 1px; justify-items: center; }
.tracker-face b { font-size: 25px; font-weight: 800; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.tracker-face span { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }

.tracker-foot { margin-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* ── Subscription ───────────────────────────────────────────────────── */

.plan-now { display: grid; gap: 2px; margin-bottom: 11px; }
.plan-now b { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.plan-now span { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.plan-use { display: grid; gap: 6px; }
.plan-use span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.plan-use.is-open {
  grid-auto-flow: column; justify-content: start; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 11px; background: var(--tint); color: var(--primary-deep);
}
.plan-use.is-open span { color: inherit; font-weight: 700; }
.plan-meter { height: 7px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.plan-meter i { display: block; height: 100%; border-radius: 999px; background: var(--primary-gradient); }

.plan-when {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.plan-when svg { color: var(--text-faint); }

/* The subscription, beside the primary action rather than in a card at the
   bottom of the rail. It has to catch the eye without competing with Start
   applying, so it is the same height and a quieter fill. */
.plan-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; font: inherit; text-align: left;
  background: linear-gradient(135deg, var(--tint) 0%, var(--tint-2) 100%);
  color: var(--primary-deep);
  transition: transform .16s, box-shadow .16s;
}
.plan-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.plan-btn svg { flex: 0 0 auto; }
.plan-btn span { display: grid; gap: 1px; }
.plan-btn b { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.plan-btn i { font-style: normal; font-size: 10px; font-weight: 600; opacity: .75; }

/* An active plan earns the solid treatment; an absent one stays an invitation. */
.plan-btn.is-on {
  background: var(--primary-gradient); color: #fff; border-color: transparent;
}
.plan-btn.is-on i { opacity: .85; }

.plan-pane { margin-top: 14px; }

/* Tabs, for the subscription sheet. */
.tabs {
  display: flex; gap: 3px; padding: 4px;
  border-radius: 12px; background: var(--tint-2);
}
.tab {
  flex: 1; padding: 8px 12px; border: 0; border-radius: 9px;
  background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s;
}
.tab:hover { color: var(--text); }
.tab.is-on {
  background: var(--surface); color: var(--primary-deep); font-weight: 700;
  box-shadow: 0 2px 8px -4px rgba(45, 26, 120, .45);
}

/* ── Plan picker sheet ──────────────────────────────────────────────── */

.plan-pick { display: grid; gap: 9px; }
.plan-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--border); background: var(--surface); font: inherit;
}
.plan-opt:hover { border-color: var(--primary); }
.plan-opt.is-current { border-color: var(--primary); background: var(--tint); }
.plan-opt-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.plan-opt-body b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.plan-opt-body b .pill { font-style: normal; }
.plan-opt-body span { font-size: 11.5px; color: var(--text-muted); }
.plan-opt-price { text-align: right; display: grid; gap: 1px; }
.plan-opt-price b { font-size: 16px; font-weight: 800; letter-spacing: -.5px; }
.plan-opt-price span { font-size: 10.5px; color: var(--text-faint); }

.bill-list { display: grid; gap: 1px; }
.bill-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px; font-size: 13px;
}
.bill-row + .bill-row { border-top: 1px solid var(--border); }
.bill-row span { color: var(--text-muted); }
.bill-row b { font-weight: 700; }
.bill-note {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-soft); font-size: 12px; color: var(--text-muted); line-height: 1.55;
}

/* ── Activity calendar ──────────────────────────────────────────────── */

.cal {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px);
  grid-auto-columns: 11px; justify-content: space-between;
  gap: 3px; overflow-x: auto; padding-bottom: 4px;
}
.cal-cell {
  width: 11px; height: 11px; border-radius: 3px; background: var(--tint-2);
}
.cal-cell.is-pad { visibility: hidden; }
.cal-cell[data-level="1"] { background: rgba(124, 92, 245, .3); }
.cal-cell[data-level="2"] { background: rgba(124, 92, 245, .5); }
.cal-cell[data-level="3"] { background: rgba(124, 92, 245, .74); }
.cal-cell[data-level="4"] { background: var(--primary); }

.cal-foot {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}

/* One card holds both: the calendar is the summary, the list is the detail,
   and a rule between them is cheaper than a second card. */
.cal-wrap { padding-bottom: 13px; margin-bottom: 11px; border-bottom: 1px solid var(--border); }

.dash-log { display: grid; align-content: start; }

/* The list scrolls inside the card. Sixty rows unrolled made the page three
   screens tall and left the rail's column ending a long way up the page,
   which is the white space this layout exists to remove. */
.dash-log .app-list { max-height: 38vh; min-height: 240px; }

/* ── CV rows ────────────────────────────────────────────────────────── */

.cv-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 12px; background: var(--surface-soft); margin-bottom: 9px;
}
.cv-icon {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 10px; background: var(--tint); color: var(--primary);
}
.cv-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cv-body b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-body span { font-size: 11.5px; color: var(--text-muted); }

/* ── Application history ────────────────────────────────────────────── */

.app-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }

.app-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px;
}
.app-row:hover { background: var(--surface-soft); }

.app-mark { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px; }
.app-mark.is-mono {
  display: grid; place-items: center; background: var(--tint);
  font-size: 9.5px; font-weight: 800; color: var(--primary-deep);
}
.app-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.app-body b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body span { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row time { font-size: 11px; color: var(--text-faint); min-width: 32px; text-align: right; }
.app-open { display: flex; color: var(--text-faint); padding: 4px; }
.app-open:hover { color: var(--primary); }

.nav-lock { margin-left: auto; display: flex; color: var(--text-faint); }

/* ══════════════════════════════════════════════════════════════════════
   The wizard.
   ══════════════════════════════════════════════════════════════════════ */

.wz-progress { height: 3px; border-radius: 999px; background: var(--tint-2); margin-bottom: 16px; overflow: hidden; }
.wz-progress i { display: block; height: 100%; border-radius: 999px; background: var(--primary-gradient); transition: width .3s; }

.wz-step { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.wz-body { max-height: min(58vh, 480px); overflow-y: auto; padding: 2px; }
.wz-foot { display: flex; gap: 9px; align-items: center; margin-top: 18px; }
.wz-foot .cta { flex: 1; justify-content: center; }

/* ── Path chooser ───────────────────────────────────────────────────── */

.wz-paths { display: grid; gap: 10px; }

.wz-path {
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px;
  padding: 15px 16px; border-radius: 15px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  cursor: pointer; text-align: left; font: inherit;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.wz-path:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.wz-path-icon {
  grid-row: span 2; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--tint); color: var(--primary);
}
.wz-path b { font-size: 14px; font-weight: 700; }
.wz-path > span:last-child { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ── Drop zone ──────────────────────────────────────────────────────── */

.wz-drop {
  display: grid; justify-items: center; gap: 9px;
  padding: 42px 20px; border-radius: 17px;
  border: 2px dashed var(--border-strong); background: var(--surface-soft);
  cursor: pointer; text-align: center;
  transition: border-color .14s, background .14s;
}
.wz-drop:hover, .wz-drop.is-over { border-color: var(--primary); background: var(--tint); }
.wz-drop-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tint); color: var(--primary); }
.wz-drop b { font-size: 15px; font-weight: 700; }
.wz-drop-cta { font-size: 12.5px; font-weight: 700; color: var(--primary-deep); }

/* ── Reading ────────────────────────────────────────────────────────── */

.wz-reading { display: grid; justify-items: center; gap: 20px; padding: 30px 10px; }
.wz-reading p { font-size: 13px; color: var(--text-muted); }

.wz-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--tint); border-top-color: var(--primary);
  animation: wzSpin .8s linear infinite;
}
@keyframes wzSpin { to { transform: rotate(360deg); } }

.wz-reading-steps { display: grid; gap: 9px; }
.wz-reading-step {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--text-muted);
  animation: wzStep .4s ease-out both; animation-delay: var(--d);
}
.wz-reading-step svg { color: var(--success-text); }
@keyframes wzStep { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ── Score ──────────────────────────────────────────────────────────── */

.wz-score { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }

.wz-gauge {
  width: 92px; height: 92px; border-radius: 50%; flex: 0 0 92px;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--tint) 0);
}
.wz-gauge::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.wz-gauge b { position: relative; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.wz-gauge span { position: relative; font-size: 11px; color: var(--text-faint); font-weight: 700; }
.wz-gauge.is-big { width: 116px; height: 116px; flex-basis: 116px; }
.wz-gauge.is-big b { font-size: 34px; }

.wz-checks { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.wz-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--alert-text);
}
.wz-check.is-ok { color: var(--text-muted); }
.wz-check svg { flex: 0 0 auto; }
.wz-check.is-ok svg { color: var(--success-text); }

.wz-found { border-top: 1px solid var(--border); padding-top: 15px; }
.wz-found > b { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }
.wz-found-rows { display: grid; gap: 7px; }
.wz-found-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.wz-found-row span { color: var(--text-muted); flex: 0 0 auto; }
.wz-found-row b { text-align: right; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-found-row b.is-empty { color: var(--text-faint); font-weight: 400; }

/* ── Repeating rows ─────────────────────────────────────────────────── */

.wz-rows { display: grid; gap: 12px; }
.wz-row { position: relative; padding: 14px; border-radius: 14px; background: var(--surface-soft); }
.wz-row .field { margin-bottom: 11px; }
.wz-row-x {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 7px; border: 0;
  background: none; color: var(--text-faint); cursor: pointer;
  display: grid; place-items: center;
}
.wz-row-x:hover { background: var(--alert-bg); color: var(--alert); }

.wz-add {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  padding: 10px 13px; border-radius: 11px; width: 100%;
  border: 1.5px dashed var(--border-strong); background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; justify-content: center;
}
.wz-add:hover { border-color: var(--primary); color: var(--primary-deep); }

/* ── Screening questions ────────────────────────────────────────────── */

.wz-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--hairline);
}
.wz-q:last-child { border-bottom: 0; }
.wz-q > span { font-size: 13px; font-weight: 500; flex: 1; }
.wz-q.is-wide { flex-direction: column; align-items: flex-start; gap: 10px; }
.seg.is-wrap { flex-wrap: wrap; }

.wz-done { display: grid; justify-items: center; gap: 16px; padding: 12px 0; }
.wz-done-gap { font-size: 12.5px; color: var(--text-muted); text-align: center; max-width: 44ch; line-height: 1.55; }

@media (max-width: 700px) {
  .dash-head h1 { font-size: 22px; }
  .wz-path { grid-template-columns: 38px 1fr; }
  .wz-path-icon { width: 38px; height: 38px; }
  .wz-score { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   Global view — a world map with pins, callouts and a running log.
   ══════════════════════════════════════════════════════════════════════ */

.worldmap {
  /* A true 2:1 box, capped by width rather than height. Letting the height
     cap it stretches the projection horizontally and the pins stop landing
     on the countries they name. */
  position: relative; width: 100%; aspect-ratio: 2 / 1;
  margin: 0;
  border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, var(--surface) 0%, var(--surface-soft) 55%, var(--tint) 100%);
}

/* The continents, as a dot grid.
   Generated from a rasterised public-domain world map: one dot per land
   cell. A dot map reads at a glance, scales without going ragged, and is
   immune to the path-winding problems a traced outline brings. Masked
   rather than <img>, so it takes the theme's colour. */
.worldmap-art {
  position: absolute; inset: 0;
  background: var(--primary); opacity: .3;
  -webkit-mask: url('/assets/img/world.svg') no-repeat center / 100% 100%;
  mask: url('/assets/img/world.svg') no-repeat center / 100% 100%;
}

:root[data-theme='dark'] .worldmap-art { opacity: .3; }

/* A zero-size anchor sitting exactly on the coordinate. Centring the whole
   button instead would push the dot half a card's width off the country it
   is meant to be marking. */
.pin {
  position: absolute; width: 0; height: 0;
  border: 0; background: none; padding: 0; cursor: pointer;
  animation: pinIn .4s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--d);
  z-index: 1;
}
.pin:hover, .pin:focus-visible { z-index: 3; }

@keyframes pinIn { from { opacity: 0; } }

.pin-dot {
  position: absolute; left: -6px; top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--surface);
}
.pin-dot i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--primary); opacity: 0;
}
.pin.is-ping .pin-dot i { animation: pinPing 1.1s ease-out; }
@keyframes pinPing {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0; transform: scale(3.4); }
}

/* The label rides beside its dot: a name and a number, no card.
   Five white boxes sitting on the map covered the thing the map is for. */
.pin-tag {
  position: absolute; left: 13px; top: -9px;
  display: flex; align-items: baseline; gap: 6px;
  padding: 2px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(3px);
  white-space: nowrap; text-align: left;
  transition: background .16s, box-shadow .16s;
}
.pin-tag b { font-size: 10.5px; font-weight: 700; letter-spacing: -.1px; }
.pin-tag i {
  font-style: normal; font-size: 10px; font-weight: 700; color: var(--primary-deep);
  font-variant-numeric: tabular-nums;
}
.pin:hover .pin-tag, .pin:focus-visible .pin-tag {
  background: var(--surface); box-shadow: var(--shadow-soft);
}

/* Right-hand pins put their label on the left so it never runs off. */
.pin.is-left .pin-tag { left: auto; right: 13px; flex-direction: row-reverse; }

/* Above or below the dot, set per market. Two labels on one line is what
   makes neighbours like the UK and Germany collide. */
.pin.is-up   .pin-tag { top: -22px; }
.pin.is-down .pin-tag { top: 8px; }

/* ── Collapsing the map ─────────────────────────────────────────────── */

.live-toggle {
  margin-left: auto; flex: 0 0 auto;
  padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: transform .18s, border-color .18s;
}
.live-toggle:hover { transform: translateY(-1px); border-color: var(--primary); color: var(--primary-deep); }

/* The height animates, so the map slides rather than blinking out. The
   grid area keeps its width either way — collapsing the map must not
   reshuffle the two columns beside it. */
.live-map .worldmap {
  height: auto; max-height: 340px;
  transition: max-height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s;
}
.live-map.is-closed .worldmap {
  max-height: 0; opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .live-map .worldmap { transition: none; }
}

/* ── Social rows ────────────────────────────────────────────────────── */

.live-face.is-logo {
  display: grid; place-items: center;
  background: var(--primary-gradient); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
}

.live-row.is-opening .live-row-body b { font-weight: 600; }

.live-tag {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--success-bg); color: var(--success-text); white-space: nowrap;
}
.live-tag.is-quiet { background: var(--tint-2); color: var(--text-muted); }

/* ── The empty-state prompt in the wizard ───────────────────────────── */

.wz-blank {
  display: grid; justify-items: center; gap: 7px;
  width: 100%; padding: 34px 20px; border-radius: 16px;
  border: 2px dashed var(--border-strong); background: var(--surface-soft);
  cursor: pointer; font: inherit; text-align: center;
  transition: border-color .14s, background .14s;
}
.wz-blank:hover { border-color: var(--primary); background: var(--tint); }
.wz-blank-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--tint); color: var(--primary);
}
.wz-blank b { font-size: 14.5px; font-weight: 700; }
.wz-blank > span:last-child { font-size: 12px; color: var(--text-muted); max-width: 34ch; line-height: 1.5; }

@media (max-width: 900px) {
  .live-map .worldmap { max-height: 210px; }
  .pin-tag { padding: 2px 6px; }
  .pin-tag b { font-size: 9.5px; }
  .pin-tag i { font-size: 9px; }
}

/* ── Wizard: the photo, beside the name rather than on its own screen ── */

.wz-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.wz-photo > div { display: grid; gap: 2px; }
.wz-photo b { font-size: 13px; font-weight: 700; }
.wz-photo span { font-size: 11.5px; color: var(--text-muted); }

.wz-photo-drop {
  position: relative; width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 50%; cursor: pointer; overflow: visible;
}
.wz-photo-drop img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block;
}
.wz-photo-empty {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--tint); color: var(--primary);
  border: 2px dashed var(--border-strong);
}
.wz-photo-drop:hover .wz-photo-empty { border-color: var(--primary); }
.wz-photo-badge {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--primary); color: #fff;
  border: 2px solid var(--surface);
}
.wz-photo-drop.is-busy { opacity: .5; pointer-events: none; }

/* ── Composer tools ─────────────────────────────────────────────────── */

.composer-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; align-self: flex-end; }

.composer-tool {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  border: 0; background: none; color: var(--text-faint);
  cursor: pointer; transition: background .13s, color .13s;
}
.composer-tool:hover { background: var(--tint); color: var(--primary); }
.composer-tool.is-busy { opacity: .5; pointer-events: none; }

@media (max-width: 620px) {
  .composer-tool { width: 28px; height: 28px; }
}

.wz-connected {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 13px;
  background: var(--success-bg); color: var(--success-text);
  font-size: 13px; font-weight: 600;
}
.wz-path.is-linkedin .wz-path-icon { background: #0a66c2; color: #fff; }