/* 7 Degrees — "Partner's Field Notebook" design system (v6.1).
   A heritage pocket notebook: dark charcoal chrome around a cream paper page,
   classic serif typography (Lora + Playfair Display; italic serif for
   annotations — no cursive), muted navy / sage / burgundy / gold inks.
   High-contrast dark-ink-on-cream for readability. Mobile-first. */
:root {
  color-scheme: light;
  /* Chrome — the notebook's dark cover (top/tab bars, page surround) */
  --chrome: #191815;
  --chrome-ink: #ece5d2;
  --chrome-muted: #a59d8a;
  --chrome-line: #34302a;
  /* Paper */
  --bg: #f4efe2;               /* the cream page */
  --card: #fbf7ec;             /* raised paper panels & inputs */
  --surface-2: #ece5d0;        /* pressed paper / control tracks */
  --surface-3: #e3dbc3;
  /* Inks */
  --primary: #2e4356;          /* fountain-pen navy (primary actions) */
  --primary-2: #3a5269;        /* lighter navy (hover, links) */
  --on-primary: #f6f1e4;
  --primary-glow: rgba(46, 67, 86, .18);
  --coral: #8c3b41;            /* burgundy ribbon / "you" / alerts */
  --coral-soft: #ecd9d6;
  --coral-ink: #5d2a30;
  --amber: #b08d3f;            /* brass-gold accents */
  --amber-soft: #efe5c6;
  --amber-ink: #6e5520;
  --mint: #7d8b60;             /* sage green / mesh health */
  --mint-soft: #dfe4cb;
  --mint-ink: #46522f;
  --ink: #2a2722;
  --muted: #6f6859;
  --line: #ded6c2;             /* hairline rules */
  --line-strong: #c6bda6;
  --error: #8c2f23;
  --error-soft: #f0d9d3;
  --error-ink: #6e251c;
  /* Type */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --display: "Playfair Display", "Lora", Georgia, serif;
  /* Shape */
  --r-sm: .25rem; --r: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 9999px;
  --maxw: 768px;
  --shadow: 0 8px 22px rgba(48, 38, 20, .16);
  --shadow-sm: 0 1px 3px rgba(48, 38, 20, .12);
  --space: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--serif);
  background: var(--chrome); color: var(--ink); -webkit-text-size-adjust: 100%;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)); line-height: 1.55;
  overflow-x: hidden;
}
/* No tab bar (auth screens) → no reserved space, so the page doesn't scroll. */
body:not(:has(.tabbar)) { padding-bottom: 0; }
h1, h2, h3, .btn, .label, .topbar-link, .tabbar a span {
  font-family: var(--serif);
}
h1 { font-family: var(--display); font-size: 26px; font-weight: 700;
  letter-spacing: -.01em; margin: 6px 0; }
h2 { font-size: 20px; font-weight: 600; }
a { color: var(--primary-2); }
::selection { background: rgba(176, 141, 63, .3); }
::placeholder { font-family: var(--serif); font-style: italic; font-size: 14.5px;
  color: #7c7261; opacity: 1; }
/* Keep long example placeholders on one line instead of clipping a wrap. */
textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Top bar — dark cover band above the page */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  gap: 12px; height: 56px; padding: 0 20px; background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
}
.brand { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1;
  color: #d9c89a; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--chrome-muted); font-family: var(--serif); font-weight: 600;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; vertical-align: 2px; }
.topbar-link { margin-left: auto; color: var(--chrome-muted); text-decoration: none;
  font-size: 13px; white-space: nowrap; }
.topbar-link + .topbar-link { margin-left: 12px; }
.topbar-link.bell { position: relative; font-size: 16px; }
.topbar-link.bell svg { vertical-align: -4px; }
.topbar-link.bell .dot {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--r-full); background: var(--coral); color: #f6ede4;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 59, 65, .45); }
  50% { box-shadow: 0 0 0 5px rgba(140, 59, 65, 0); }
}

/* Layout helpers — .content is the cream page inside the dark cover */
.content { max-width: var(--maxw); margin: 0 auto; background: var(--bg);
  min-height: calc(100vh - 56px - 76px); min-height: calc(100dvh - 56px - 76px); }
/* Auth screens float a paper card on the dark cover instead of a full page. */
.content:has(> .auth-card) { background: transparent; }
.page-pad { padding: 16px 20px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
/* Section headers are italic serif margin notes over a hairline rule. */
.section-h { display: flex; align-items: center; gap: 12px; margin: 26px 0 8px;
  font-family: var(--serif); font-style: italic; font-size: 17px; font-weight: 600;
  text-transform: none; letter-spacing: .01em; color: #4a4435; }
.section-h::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
summary.section-h { cursor: pointer; }
.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }

/* Inputs & buttons */
input, textarea, select {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r); padding: 12px 14px; width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
}
textarea { resize: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  padding: 11px 16px; border-radius: var(--r); text-decoration: none; font-size: 14px;
  font-weight: 600; min-height: 44px; transition: transform .06s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary);
  box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--primary-2); border-color: var(--primary-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--primary); }
.btn.small { padding: 6px 12px; font-size: 12.5px; min-height: 0; }
.btn.danger { background: var(--error-soft); border-color: #cfa49a; color: var(--error-ink); }
.btn.pill { border-radius: var(--r-full); width: 100%; padding: 15px 20px; font-size: 16px; }
/* A pill inside a heading row sizes to its label instead of stretching. */
.row-between > .btn.pill { width: auto; padding: 11px 18px; font-size: 14px; }

/* Flash & banners — paper slips tucked under the cover */
.flash { max-width: var(--maxw); margin: 12px auto 0; padding: 12px 20px;
  background: var(--amber-soft); color: var(--amber-ink); border-radius: var(--r-md);
  border: 1px solid #d8c889; box-shadow: var(--shadow-sm); }
.banner { padding: 11px 16px; border-radius: var(--r-md); margin: 12px 20px; font-size: 13px; }
.banner.warn { background: var(--amber-soft); color: var(--amber-ink);
  border: 1px solid #d8c889; }
.banner.info { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }

/* QR scanner overlay (camera + manual-paste fallback). */
.qr-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(15, 13, 10, .82);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-overlay[hidden] { display: none; }
.qr-modal { background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: 16px;
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.qr-modal video { width: 100%; aspect-ratio: 1; object-fit: cover; background: #000;
  border-radius: var(--r-md); }
.qr-manual { display: flex; gap: 8px; }
.qr-manual input { flex: 1; }
.banner code, .muted code { background: rgba(42, 39, 34, .08); padding: 1px 5px;
  border-radius: var(--r-sm); font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: .9em; }

/* Auth — a cream notebook card on the dark cover, with a bookmark ribbon */
.auth-card { position: relative; max-width: 380px; margin: 10vh auto; background: var(--bg);
  padding: 32px 52px 32px 28px; border-radius: var(--r-lg); border: 1px solid #3d382f;
  box-shadow: var(--shadow); }
.auth-card::after { content: ""; position: absolute; top: -6px; bottom: -6px; right: 22px;
  width: 9px; border-radius: 4px; background: var(--coral);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); pointer-events: none; }
.auth-card h1 { font-family: var(--display); font-weight: 700; font-size: 34px;
  color: var(--ink); margin-top: 0; margin-bottom: 2px; }

/* Bottom tab bar — thumb-zone navigation on the dark cover */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; max-width: var(--maxw); margin: 0 auto;
  display: flex; background: var(--chrome);
  border-top: 1px solid var(--chrome-line); padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar a {
  flex: 1; text-align: center; padding: 9px 0 7px; text-decoration: none;
  color: var(--chrome-muted); display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tabbar a svg { width: 23px; height: 23px; stroke-width: 1.7; }
.tabbar a span { font-size: 10.5px; font-weight: 600; }
.tabbar a:active { color: #d9c89a; }
.tabbar a.on { color: #d9c89a; }
/* Raised primary "Capture" action — a navy seal ringed in paper. The lift and
   gap are tuned so its label sits on the same baseline as the other tabs. */
.tabbar a.fab { gap: 0; }
.tabbar a.fab .fab-btn {
  width: 54px; height: 54px; margin-top: -28px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); display: grid; place-items: center;
  box-shadow: var(--shadow); border: 4px solid var(--bg);
}
.tabbar a.fab .fab-btn svg { width: 26px; height: 26px; stroke-width: 2.2; }
.tabbar a.fab:active .fab-btn { background: var(--primary-2); transform: translateY(1px); }

/* Capture / chat */
.capture { display: flex; flex-direction: column;
  height: calc(100vh - 57px - 76px); height: calc(100dvh - 57px - 76px); }
.chat { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 86%; padding: 12px 14px; border-radius: var(--r-lg); line-height: 1.5;
  font-size: 14.5px; white-space: pre-wrap; box-shadow: var(--shadow-sm); }
/* Agent notes: clean paper panel with a hairline border. */
.bubble.agent { background: var(--card); border: 1px solid var(--line);
  align-self: flex-start; border-bottom-left-radius: var(--r-sm); }
/* Your words: fountain-pen navy ink. */
.bubble.user { background: var(--primary); color: var(--on-primary); align-self: flex-end;
  border-bottom-right-radius: var(--r-sm); }
.bubble.error { background: var(--error-soft); color: var(--error-ink); align-self: flex-start; }
.bubble.typing { color: var(--muted); }
/* Animated "agent is working" indicator: three dots bouncing in sequence. */
.typing-dots { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  display: inline-block; animation: typing-bounce 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: typing-fade 1.2s ease-in-out infinite; }
  @keyframes typing-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
}
/* Live status under the dots: a pencilled margin note of what the agent is
   doing right now ("Searching memory…"), so long runs never look frozen. */
.typing-status { margin-top: 5px; font-size: 12.5px; font-style: italic;
  color: var(--muted); }
.actions { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; max-width: 86%; }
/* Tool notes: small-caps slips pinned beside the conversation. */
.action { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: var(--surface-2); color: #4a4435; border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 4px 8px; text-decoration: none; }

.composer { border-top: 1px solid var(--line); background: var(--card); padding: 12px 16px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -6px 18px rgba(48, 38, 20, .08); }
.composer-tools { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-full); padding: 8px 14px;
  background: var(--bg); color: var(--ink); font-weight: 600; }
.chip.recording { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-ink); }
/* Inline chip popover (Photo → Camera | Gallery), floating above the composer. */
.chip-menu { position: relative; display: inline-flex; }
.chip-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 4px;
  min-width: 168px; }
.chip-pop[hidden] { display: none; }
.chip-pop-item { display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 600;
  color: var(--ink); border: 0; background: transparent; font-family: inherit;
  width: 100%; text-align: left; }
.chip-pop-item:hover, .chip-pop-item:active { background: var(--surface-2); }
.chip-pop-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-row textarea { flex: 1; max-height: 140px; border-radius: var(--r-lg); }
.send { white-space: nowrap; }

/* Lists, badges, tags */
.list { list-style: none; padding: 0; margin: 12px 0; }
.list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.list a { color: var(--ink); text-decoration: none; }
.list.done .strike, .strike { text-decoration: line-through; color: var(--muted); }
/* Badges are small-caps archival labels in the notebook's muted inks. */
.badge { display: inline-block; font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-sm); text-transform: uppercase;
  background: var(--mint-soft); border: 0; color: var(--mint-ink);
  margin-right: 6px; letter-spacing: .08em; }
.badge.person { background: var(--primary); color: var(--on-primary); }
.badge.org { background: var(--mint-soft); color: var(--mint-ink); }
.badge.project { background: var(--amber-soft); color: var(--amber-ink); }
.badge.note { background: var(--surface-2); color: var(--muted); }
.badge.you { background: var(--coral); color: #f6ede4; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* Interest tags: muted sage chips, like the mockup's "Tax / Advisory". */
.tag { font-family: var(--serif); font-size: 12.5px; line-height: 1.2;
  background: var(--mint-soft); color: var(--mint-ink); border: 0;
  border-radius: var(--r-sm); padding: 4px 10px; text-decoration: none; }
.rel { font-size: 10px; font-weight: 600; color: var(--muted); margin-right: 8px;
  text-transform: uppercase; letter-spacing: .07em; }

.subtabs { display: flex; gap: 18px; margin: 12px 0; border-bottom: 1px solid var(--line-strong); }
.subtabs a { padding: 8px 2px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent;
  font-weight: 600; margin-bottom: -1px; }
.subtabs a.on { color: var(--primary); border-color: var(--primary); }

/* Segmented control (e.g. directory scope: Mine | Everyone). Works with either
   links (directory/graph, which navigate) or buttons (Ask, which toggles in JS). */
.segmented { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-full); margin: 0 0 12px; }
.segmented a, .segmented button { padding: 6px 16px; border-radius: var(--r-full);
  text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600;
  border: 0; background: transparent; cursor: pointer; font-family: inherit; line-height: 1.2; }
.segmented a.on, .segmented button.on { background: var(--primary); color: var(--on-primary); }
.segmented a:focus-visible, .segmented button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Ask screen scope row (Everyone | Mine + a one-line hint). */
.ask-scope { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px 0; }
.ask-scope .segmented { margin: 0; }

.search-bar { display: flex; gap: 8px; margin-bottom: 6px; }
.search-bar input { flex: 1; }
.search-bar select { width: auto; }

/* Page detail */
.page-head { display: flex; gap: 14px; align-items: center; }
.page-actions { display: flex; gap: 8px; align-items: center; }
.page-hero { display: flex; gap: 16px; align-items: center; margin: 6px 0 8px; }
.page-hero .hero-body { flex: 1; min-width: 0; }
.page-hero h1 { margin: 4px 0 2px; }
.page-hero .mesh { margin-left: auto; }
.action-bar form { display: flex; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0; }
.details dt { color: var(--muted); font-style: italic; font-size: 13px;
  text-transform: capitalize; }
.details dd { margin: 0; }
/* The wiki body is a clean paper panel. overflow-wrap is the no-JS fallback
   so an unbreakable string (long URL, token) can never stretch the page. */
.wiki { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; line-height: 1.6; box-shadow: var(--shadow-sm);
  overflow-wrap: anywhere; }
.wiki h1, .wiki h2, .wiki h3 { font-size: 16px; font-family: var(--serif); }

/* Avatars / portraits */
.avatar-wrap { position: relative; flex: none; }
.avatar { width: 72px; height: 72px; border-radius: var(--r-full); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.avatar-empty { background: var(--primary); color: var(--on-primary);
  font-family: var(--display); font-weight: 600; font-size: 30px; border: 0; }
.avatar-edit { position: absolute; bottom: -4px; right: -4px; width: 28px; height: 28px;
  border-radius: var(--r-full); background: var(--card); border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
  box-shadow: var(--shadow-sm); }
.avatar-sm { width: 38px; height: 38px; font-size: 17px; box-shadow: none; }
.dir-row { display: flex; gap: 12px; align-items: center; }

/* Timeline — dotted down the spine, like the mockup's relationship lines */
.timeline { list-style: none; padding: 0; margin: 8px 0; border-left: 2px dotted var(--line-strong); }
.timeline li { position: relative; padding: 4px 0 16px 18px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 11px;
  height: 11px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg); }
.tl-meta { display: flex; gap: 8px; align-items: center; }
.tl-body { margin-top: 4px; }
/* Photos get a thin paper frame, like a print mounted on the page. */
.tl-photo { margin-top: 8px; max-width: 220px; width: 100%; border-radius: 3px;
  border: 4px solid #fff; outline: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm); background: #fff; }

/* Graph */
#cy { width: 100%; height: calc(100vh - 57px - 76px - 64px);
  height: calc(100dvh - 57px - 76px - 64px);
  background: var(--card);
  border-radius: var(--r-lg); border: 1px solid var(--line-strong); }
.graph-wrap { display: flex; flex-direction: column; padding: 0 20px; }

/* Intro / onboarding */
.intro { display: flex; flex-direction: column;
  min-height: calc(100vh - 57px - 76px); min-height: calc(100dvh - 57px - 76px); }
.intro-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; flex: 1;
  scrollbar-width: none; }
.intro-track::-webkit-scrollbar { display: none; }
.intro-slide { scroll-snap-align: center; flex: 0 0 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 40px 32px; gap: 12px; }
.intro-art { font-size: 64px; line-height: 1; color: var(--amber);
  filter: drop-shadow(0 8px 20px rgba(176, 141, 63, .35)); }
.intro-slide h1 { color: var(--ink); margin: 8px 0 0; }
.intro-slide h2 { font-family: var(--serif); font-style: italic; font-size: 26px;
  font-weight: 600; color: var(--primary); margin: 8px 0 0; }
.intro-slide p { color: var(--muted); max-width: 32ch; }
.intro-dots { display: flex; gap: 8px; justify-content: center; padding: 8px 0; }
.intro-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line-strong); transition: all .2s; }
.intro-dot.on { background: var(--amber); width: 22px; }
.intro-cta { padding: 16px 20px 28px; }

/* Claim your node */
.claim-search { margin-bottom: 4px; }
.claim-list { max-height: 46vh; overflow-y: auto; margin: 0 0 6px; }
.claim-option label { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 15px; }
.claim-option input { width: auto; }
.claim-new { background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: var(--r-md); padding: 14px 16px; }

@media (min-width: 720px) {
  .tabbar a span { font-size: 11px; }
  h1 { font-size: 32px; line-height: 40px; letter-spacing: -.02em; }
}

/* ------------------------------------------------------------------ *
 * Mesh Score — circular, glanceable relationship-strength indicator.
 * --pct (0–100) fills a conic arc; state class sets the ring color and
 * the gold "cooling off" pulse.
 * ------------------------------------------------------------------ */
.mesh {
  --pct: 0; --ring: var(--primary);
  position: relative; flex: none; width: 46px; height: 46px; border-radius: var(--r-full);
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--surface-3) 0);
  display: grid; place-items: center; align-content: center;
}
.mesh::before { content: ""; position: absolute; inset: 4px; border-radius: var(--r-full);
  background: var(--card); }
.mesh-val { position: relative; font-family: var(--serif); font-weight: 700;
  color: var(--ink); line-height: 1; font-size: 14px; letter-spacing: -.02em; }
.mesh-cap { display: none; }
.mesh.strong  { --ring: var(--mint); }
.mesh.warm    { --ring: var(--primary); }
.mesh.cooling { --ring: var(--amber); }
.mesh.cold, .mesh.new { --ring: var(--line-strong); }
.mesh.cold .mesh-val, .mesh.new .mesh-val { color: var(--muted); }
.mesh.cooling::after { content: ""; position: absolute; inset: -1px; border-radius: var(--r-full);
  pointer-events: none; animation: mesh-pulse 2.6s ease-in-out infinite; }
@keyframes mesh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 141, 63, .45); }
  50% { box-shadow: 0 0 0 7px rgba(176, 141, 63, 0); }
}
.mesh.lg { width: 104px; height: 104px; }
.mesh.lg::before { inset: 8px; }
.mesh.lg .mesh-val { font-size: 36px; letter-spacing: -.03em; }
.mesh.lg .mesh-cap { display: block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-top: 3px; }
.mesh-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.mesh-legend b { font-family: var(--serif); }

/* Paper cards — rounded panels, lead with relationship signal. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 12px; }
.card.elevated { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.card-link { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); }
.card-body { flex: 1; min-width: 0; }
.card-title { display: block; font-weight: 700;
  font-size: 16px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.card-sub .dot-sep { opacity: .5; }
.card .tags { margin: 8px 0 0; }
.card .tags .tag { padding: 3px 8px; font-size: 11.5px; }

/* Gold "warmth" affinity tag, alongside the default sage .tag. */
.tag.warm { background: var(--amber-soft); color: var(--amber-ink); }

/* Bottom-sheet overlay — inputs slide up into the thumb zone. */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(15, 13, 10, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease; }
.sheet-backdrop.open { opacity: 1; visibility: visible; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: var(--maxw); margin: 0 auto;
  background: var(--bg); border: 1px solid var(--line-strong); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 20px calc(22px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -10px 30px rgba(15, 13, 10, .45);
  transform: translateY(115%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.sheet.open { transform: translateY(0); }
.sheet-grip { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--line-strong);
  margin: 0 auto 12px; }
.sheet h2 { margin: 2px 0 12px; font-family: var(--serif); font-style: italic;
  font-size: 23px; font-weight: 600; color: var(--ink); }
.sheet .search-bar { margin: 0; }
/* Full destination shown in the link sheet before leaving the app. */
.link-full { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; word-break: break-all;
  max-height: 30vh; overflow-y: auto; -webkit-user-select: all; user-select: all; }

/* Primary CTA(s) anchored above the tab bar, in reach of the thumb. The bar
   reaches down to the tab bar so no sliver of content peeks through under it. */
.action-bar { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0));
  z-index: 18; max-width: var(--maxw); margin: 0 auto; padding: 8px 20px 14px; display: flex; gap: 10px;
  background: linear-gradient(to top, var(--bg) 70%, rgba(244, 239, 226, 0)); pointer-events: none; }
.action-bar > * { pointer-events: auto; flex: 1; }
.with-cta { padding-bottom: 118px; }
.cards { list-style: none; padding: 0; margin: 14px 0; }
.avatar.org-av { background: var(--mint); color: #f6f3e8; border-radius: var(--r-md); border: 0; }
/* Projects: brass-gold square, matching the graph's project hexagons. */
.avatar.proj-av { background: var(--amber); color: #f6f3e8; border-radius: var(--r-md); border: 0; }
/* Gold "warmth / needs a nudge" accent for follow-ups & due prompts. */
.card.due { border-left: 3px solid var(--amber); }
.card.row-between { align-items: center; }

/* Suggested merges: a candidate duplicate pair + its merge actions. */
.dup-card { display: flex; flex-direction: column; gap: 8px; }
.dup-pair { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; }
.dup-pair a { color: var(--ink); text-decoration: none; }
.dup-pair a:hover { text-decoration: underline; }

/* Agent response feedback: thumbs under an agent bubble; thumbs-down opens a
   comment box. Quiet by default — ink only on hover/selection. */
.fb-row { display: flex; align-items: center; gap: 4px; margin: -4px 0 2px 6px;
  align-self: flex-start; }
.fb-btn { border: 0; background: transparent; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 4px 6px; border-radius: var(--r-full);
  filter: grayscale(1); opacity: .55; }
.fb-btn:hover { opacity: 1; background: var(--surface-2); }
.fb-btn.on { filter: none; opacity: 1; background: var(--surface-2);
  outline: 1px solid var(--line-strong); }
.fb-note { font-size: 12px; color: var(--muted); font-style: italic; }
.fb-box { display: flex; gap: 8px; align-items: flex-end; align-self: stretch;
  margin: 0 0 6px 6px; }
.fb-box textarea { flex: 1; min-height: 44px; }

/* Wiki-style revision history: unified diff + snapshot panel. */
.rev-diff { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.rev-diff .diff-add { color: var(--mint-ink); background: var(--mint-soft); display: block; }
.rev-diff .diff-del { color: var(--error-ink); background: var(--error-soft);
  display: block; text-decoration: line-through; }
.rev-diff .diff-hdr { color: var(--muted); display: block; margin-top: 6px; }
.rev-diff .diff-ctx { color: var(--muted); display: block; }
.rev-snapshot { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 4px 16px 12px; margin-bottom: 14px; }
/* display:flex above would defeat the [hidden] attribute the JS toggles. */
.fb-box[hidden] { display: none; }

/* Admin data tables (Traffic, AI usage & cost): quiet ledger lines on paper. */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin: 8px 0 18px; }
.data-table th, .data-table td { padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.num, .data-table th.num { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * Marketing pages (public landing + features tour) — the same
 * stationery language as the app: cream page, serif type, gold
 * typographic glyphs. Served logged-out, so no tab bar below.
 * ------------------------------------------------------------------ */
.mkt { padding: 0 20px 44px; }
.mkt-hero { text-align: center; padding: 52px 8px 30px; }
.mkt-kicker { font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber-ink); margin: 0; }
.mkt-hero h1 { font-size: 36px; line-height: 1.14; margin: 10px auto 0;
  max-width: 18ch; letter-spacing: -.015em; }
.mkt-lede { color: var(--muted); font-size: 16.5px; line-height: 1.6;
  max-width: 44ch; margin: 14px auto 0; }
.mkt-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 24px 0 12px; }
.mkt-cta .btn { min-width: 170px; }
.mkt-hero .muted.small, .mkt-foot { text-align: center; }
.mkt-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 10px 0 4px; }
.mkt-card { margin: 0; box-shadow: var(--shadow-sm); }
.mkt-card h3 { margin: 8px 0 4px; font-size: 17px; font-weight: 600; }
.mkt-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.mkt-art { font-size: 30px; line-height: 1; color: var(--amber);
  filter: drop-shadow(0 4px 10px rgba(176, 141, 63, .3)); }
.mkt-steps { list-style: none; counter-reset: step; padding: 0; margin: 14px 0 6px; }
.mkt-steps li { position: relative; counter-increment: step;
  padding: 5px 0 20px 46px; max-width: 56ch; }
.mkt-steps li::before { content: counter(step); position: absolute; left: 0; top: 3px;
  width: 30px; height: 30px; border-radius: var(--r-full); background: var(--primary);
  color: var(--on-primary); font-family: var(--display); font-weight: 700;
  font-size: 15px; display: grid; place-items: center; }
/* Pull quote: an italic margin note pinned by the burgundy ribbon. */
.mkt-quote { margin: 28px auto 6px; max-width: 46ch; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--coral); font-style: italic; font-size: 17px;
  line-height: 1.6; color: #4a4435; }
.mkt-foot { max-width: 52ch; margin: 6px auto 0; }
@media (min-width: 640px) { .mkt-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Offline status bar (js/offline.js) — a paper slip under the cover ---- */
.offline-bar { max-width: var(--maxw); margin: 10px auto 0; padding: 8px 16px;
  border-radius: var(--r-md); font-size: 13px; text-align: center;
  border: 1px solid var(--line); }
.offline-bar.off { background: var(--amber-soft); color: var(--amber-ink);
  border-color: var(--amber); }
.offline-bar.sync { background: var(--surface-2); color: var(--muted);
  border-style: dashed; }
.offline-bar.ok { background: var(--mint-soft); color: var(--mint-ink);
  border-color: var(--mint); }

/* ---- Notepad (templates/notepad.html + js/notepad.js) --------------------- */
.notepad { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 24px; }
.notepad #padInput { width: 100%; min-height: 38vh; margin-top: 10px;
  border-radius: var(--r-md); line-height: 1.65; font-size: 15px;
  background-image: repeating-linear-gradient(transparent, transparent
    calc(1.65em - 1px), rgba(48, 38, 20, .09) calc(1.65em - 1px),
    rgba(48, 38, 20, .09) 1.65em);
  background-attachment: local; }
.notepad-actions { margin-top: 10px; align-items: center; gap: 10px; }
.notepad-chat { margin-top: 18px; max-height: 48vh; border-top: 1px solid var(--line-strong);
  padding-top: 14px; }
.notepad .composer-row { margin-top: 10px; }

/* ---- Standing capture context bar (templates/capture.html) --------------- */
.context-bar { margin: 12px 20px 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; }
.context-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.context-ico { flex: 0 0 auto; }
.context-row input[type="text"], .context-row select { flex: 1; min-width: 0;
  font-size: 13px; padding: 6px 10px; }
.context-current { flex: 1; font-size: 13px; }

/* ---- Desk: the desktop management workspace (templates/desk.html) -------- */
/* The topbar Desk link only appears at desktop widths; the view itself still
   degrades to stacked columns if opened narrow. */
.topbar-link.desk-only { display: none; }
@media (min-width: 900px) { .topbar-link.desk-only { display: inline; } }

.content.desk { max-width: none; }
.desk-grid { display: grid; gap: 0; grid-template-columns: 1fr;
  min-height: calc(100vh - 57px); }
@media (min-width: 900px) {
  .desk-grid { grid-template-columns: 300px minmax(0, 1fr) 320px; }
  .desk-col { height: calc(100vh - 57px); overflow-y: auto; }
}
.desk-col { padding: 16px 20px; }
.desk-list { border-right: 1px solid var(--line-strong); background: var(--card); }
.desk-rail { border-left: 1px solid var(--line-strong); background: var(--card); }
.desk-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.desk-filters .row { display: flex; gap: 6px; }
.desk-filters select { min-width: 0; flex: 1; font-size: 13px; }
.desk-clients { list-style: none; margin: 0; padding: 0; }
.desk-clients li a { display: flex; align-items: center; gap: 8px; padding: 8px 6px;
  border-radius: var(--r); text-decoration: none; color: var(--ink); }
.desk-clients li a:hover { background: var(--surface-2); }
.desk-clients li.on a { background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--primary); }
.desk-client-name { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mesh-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong); }
.mesh-dot.strong { background: var(--mint); }
.mesh-dot.warm { background: var(--amber); }
.mesh-dot.cooling { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.mesh-dot.cold { background: var(--coral); }
.mesh-dot.new { background: var(--line-strong); }
.desk-head { display: flex; align-items: center; gap: 14px; }
.desk-head h1 { margin: 0; }
.desk-head-actions { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.desk-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line-strong); }
.desk-tags { margin: 10px 0 0; }
.desk-tags .badge { text-decoration: none; }
.desk-details { display: grid; grid-template-columns: max-content 1fr;
  gap: 2px 14px; margin: 12px 0; font-size: 14px; }
.desk-details dt { color: var(--muted); }
.desk-details dd { margin: 0; }
.graph-tag { max-width: 220px; font-size: 13px; }