/* Figma: 01 · Field Notes · Components
   One block per component set. Block name == Figma component name == the export
   in js/atoms.js or js/molecules.js. Variants are data- attributes on the root. */

/* Avatar ------------------------------------------------------------------ */
.Avatar { display: grid; place-items: center; border-radius: 999px; overflow: hidden; flex: none; background: var(--navy-100); }
.Avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.Avatar[data-size="XS"] { width: 20px; height: 20px; } .Avatar[data-size="XS"] .Avatar-initials { font-size: 7px; }
.Avatar[data-size="S"]  { width: 24px; height: 24px; } .Avatar[data-size="S"] .Avatar-initials { font-size: 9px; }
.Avatar[data-size="M"]  { width: 34px; height: 34px; } .Avatar[data-size="M"] .Avatar-initials { font-size: 12px; }
.Avatar[data-size="L"]  { width: 44px; height: 44px; } .Avatar[data-size="L"] .Avatar-initials { font-size: 16px; }
.Avatar[data-size="XL"] { width: 64px; height: 64px; } .Avatar[data-size="XL"] .Avatar-initials { font-size: 23px; }
.Avatar-initials { font-family: var(--display); font-weight: 900; letter-spacing: 0.02em; color: var(--navy); }

/* Pill -------------------------------------------------------------------- */
.Pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.Pill.has-icon { padding-left: 7px; }
.Pill[data-level="hot"]        { background-image: var(--grad); color: var(--paper); }
.Pill[data-level="warm"]       { background: var(--teal-100); color: var(--teal-700); }
.Pill[data-level="cold"]       { background: var(--fog); color: var(--navy-400); }
.Pill[data-level="unknown"]    { border: 1px dashed var(--navy-300); color: var(--navy-400); }
.Pill[data-level="review"],
.Pill[data-level="failed"],
.Pill[data-level="overdue"]    { background: var(--error-bg); color: var(--error); }
.Pill[data-level="done"]       { background: var(--green-100); color: var(--green-600); }
.Pill[data-level="note"]       { background: var(--mist); color: var(--navy); }
.Pill[data-level="processing"],
.Pill[data-level="waiting"]    { background: var(--mist); color: var(--navy-400); }
.Pill[data-level="open"]       { background: var(--teal-100); color: var(--teal-700); }
.Pill[data-level="due-soon"]   { background: var(--teal); color: var(--paper); }

/* Chip -------------------------------------------------------------------- */
.Chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid var(--navy-200); background: var(--paper); color: var(--navy); padding: 4px 10px 4px 9px; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease); }
.Chip:hover { border-color: var(--teal); color: var(--teal-700); }
.Chip[data-kind="filter"] { padding: 6px 12px; }
.Chip[data-kind="filter"][aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.Chip[data-kind="filter-rep"] { padding: 4px 12px 4px 4px; }
.Chip[data-kind="filter-rep"][aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.Chip[data-kind="ref"] { background: var(--teal-100); border-color: transparent; color: var(--teal-700); padding: 5px 11px 5px 9px; }
.Chip[data-kind="link"] { cursor: pointer; }
.Chip[data-kind="link"]:hover { border-color: var(--teal); }

/* Button ------------------------------------------------------------------ */
.Button { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.Button:hover { transform: translateY(-1px); }
.Button[data-variant="primary"] { padding: 12px 18px 12px 16px; background-image: var(--grad); color: var(--paper); }
.Button[data-variant="ghost"]   { padding: 11px 18px 11px 16px; background: none; border: 1px solid var(--navy-200); color: var(--navy); }
.Button[data-variant="ghost"]:hover { border-color: var(--teal); color: var(--teal-700); }
.Button[data-variant="navy"]    { padding: 12px 18px 12px 16px; background: var(--navy); color: var(--paper); }

/* NavTab ------------------------------------------------------------------ */
.NavTab { position: relative; display: inline-flex; flex-direction: column; gap: 8px; color: var(--deep); background: none; border: 0; padding: 0; cursor: pointer; }
.NavTab-underline { height: 1px; background-image: var(--grad); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform var(--base) var(--ease), opacity var(--base) var(--ease); }
.NavTab:hover .NavTab-underline, .NavTab[aria-current="page"] .NavTab-underline { transform: scaleX(1); opacity: 1; }
.NavTab:hover { color: var(--teal-700); }

/* Checkbox ---------------------------------------------------------------- */
.Checkbox { appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--navy-200); border-radius: 999px; background: var(--paper); display: grid; place-items: center; cursor: pointer; flex: none; position: relative; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.Checkbox:hover { border-color: var(--teal); }
.Checkbox:checked { border-color: transparent; background-image: var(--grad); }
.Checkbox:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--paper); border-width: 0 0 2.6px 2.6px; transform: rotate(-45deg) translate(1px, -1px); }

/* IconButton -------------------------------------------------------------- */
.IconButton { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--mist); display: grid; place-items: center; cursor: pointer; color: var(--deep); transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.IconButton:hover { background: var(--fog); }
.IconButton:active { transform: scale(0.94); }
.IconButton[data-tone="gradient"] { background-image: var(--grad); color: var(--paper); }
.IconButton[data-size="sm"] { width: 30px; height: 30px; }

/* Stat -------------------------------------------------------------------- */
.Stat { display: flex; flex-direction: column; gap: 4px; }

/* SectionHeader ----------------------------------------------------------- */
.SectionHeader { display: flex; align-items: baseline; gap: 12px; }
.SectionHeader-count { color: var(--navy-400); }
.SectionHeader[data-tone="dark"] .SectionHeader-title { color: var(--paper); }
.SectionHeader[data-tone="dark"] .SectionHeader-count { color: var(--teal-300); }

/* GroupLabel -------------------------------------------------------------- */
.GroupLabel { display: flex; align-items: center; gap: 10px; color: var(--navy-400); }
.GroupLabel::after { content: ""; flex: 1; height: 1px; background: var(--fog); }
.GroupLabel[data-tone="due"] { color: var(--teal-700); }
.GroupLabel[data-tone="late"] { color: var(--error); }
.GroupLabel[data-in-table="true"] { background: var(--mist); padding: 9px 8px; }
.GroupLabel[data-in-table="true"]::after { display: none; }

/* EmptyState -------------------------------------------------------------- */
.EmptyState { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px; border: 1px dashed var(--navy-200); border-radius: 8px; color: var(--navy-400); text-align: center; }
.EmptyState .icon { color: var(--navy-300); }

/* SearchField ------------------------------------------------------------- */
.SearchField { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--navy-200); border-radius: 6px; background: var(--paper); width: 300px; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.SearchField .icon { color: var(--navy-400); }
.SearchField input { flex: 1; min-width: 0; border: 0; background: none; outline: none; }
.SearchField input::placeholder { color: var(--navy-300); }
.SearchField:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }

/* KVRow ------------------------------------------------------------------- */
.KVRow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
.KVRow-label { color: var(--navy-400); padding-top: 2px; }
.KVRow-list { display: flex; flex-direction: column; gap: 6px; }
.KVRow-item { display: flex; gap: 8px; align-items: flex-start; }
.KVRow-item .icon { color: var(--teal); margin-top: 2px; }

/* AudioPlayer ------------------------------------------------------------- */
.AudioPlayer { display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--mist); }
.AudioPlayer-wave { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.AudioPlayer-bar { width: 3px; border-radius: 2px; background: var(--navy-200); transition: background var(--fast) linear, height var(--slow) var(--ease); }
.AudioPlayer-bar[data-played="true"] { background: var(--teal); }
.AudioPlayer-time { color: var(--navy); white-space: nowrap; }
.AudioPlayer .icon.volume { color: var(--navy-400); }

/* NextStep ---------------------------------------------------------------- */
.NextStep { display: flex; background: var(--mist); }
.NextStep-edge { width: 3px; background: var(--teal); flex: none; }
.NextStep[data-tone="error"] .NextStep-edge { background: var(--error); }
.NextStep-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; flex: 1; min-width: 0; }
.NextStep-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--navy-400); }
.NextStep[data-tone="error"] .NextStep-eyebrow { color: var(--error); }
.NextStep-when { color: var(--teal-700); }
.NextStep-done { display: flex; align-items: center; gap: 10px; padding-top: 8px; cursor: pointer; }

/* StageStepper ------------------------------------------------------------ */
.StageStepper { display: inline-flex; align-items: center; gap: 10px; }
.StageStepper-dots { display: flex; align-items: center; }
.StageStepper-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--navy-200); transition: background var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.StageStepper-dot[data-state="done"] { background: var(--teal); }
.StageStepper-dot[data-state="current"] { background-image: var(--grad); box-shadow: 0 0 0 3px var(--teal-200); }
.StageStepper-link { width: 16px; height: 2px; background: var(--navy-200); }
.StageStepper-link[data-on="true"] { background: var(--teal); }
.StageStepper-label { color: var(--navy); }
.StageStepper[data-stage="Closed"] .StageStepper-label { color: var(--green-600); }

/* ViewToggle -------------------------------------------------------------- */
.ViewToggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--fog); }
.ViewToggle-seg { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 6px; background: none; color: var(--navy-400); cursor: pointer; transition: background var(--base) var(--ease), color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.ViewToggle-seg[aria-pressed="true"] { background: var(--paper); color: var(--navy); box-shadow: 0 1px 2px rgba(10, 38, 52, 0.12); }

/* TableHeader -------------------------------------------------------------
   The column track for each table lives in one custom property, used by both the
   header and its rows, so the two can never drift apart. */
:root {
  --cols-VisitTableRow: 3px 80px 120px 240px minmax(0, 1fr) 80px 220px 15px;
  --cols-TaskTableRow: 20px minmax(0, 1fr) 130px 120px 30px 210px 100px 15px;
  --cols-ContactTableRow: 22px 190px 196px 150px minmax(0, 1fr) 130px 78px 54px 92px 15px;
  --cols-MediaRow: 76px 190px minmax(0, 1fr) 250px 15px;
}
.TableHeader { display: grid; gap: 16px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--navy-200); color: var(--navy-400); }
.TableHeader[data-for="VisitTableRow"] { grid-template-columns: var(--cols-VisitTableRow); }
.TableHeader[data-for="TaskTableRow"] { grid-template-columns: var(--cols-TaskTableRow); }
.TableHeader[data-for="ContactTableRow"] { grid-template-columns: var(--cols-ContactTableRow); }
.TableHeader[data-for="MediaRow"] { grid-template-columns: var(--cols-MediaRow); }
.TableHeader > span { overflow: hidden; }
.TableHeader .right { text-align: right; }

/* MetricTile -------------------------------------------------------------- */
.MetricTile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--fog); border-radius: 8px; background: var(--paper); text-align: left; cursor: pointer; flex: 1; transition: border-color var(--base) var(--ease), background var(--base) var(--ease), transform var(--base) var(--ease); }
.MetricTile:hover { border-color: var(--navy-200); transform: translateY(-1px); }
.MetricTile[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-100); }
.MetricTile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.MetricTile-top .icon { color: var(--navy-300); }
.MetricTile[data-tone="error"] .MetricTile-value { color: var(--error); }
.MetricTile[data-tone="error"] .MetricTile-top .icon { color: var(--error); }
.MetricTile-note { color: var(--navy-400); }

/* BriefingHeader ---------------------------------------------------------- */
.BriefingHeader { display: flex; flex-direction: column; }
.BriefingHeader-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 24px 0 12px; }
.BriefingHeader-date { display: flex; align-items: center; gap: 8px; color: var(--teal-700); }
.BriefingHeader-meta { display: flex; align-items: center; gap: 14px; }
.BriefingHeader-tiles { display: flex; gap: 16px; padding-bottom: 18px; }

/* PipelineBar ------------------------------------------------------------- */
.PipelineBar { display: flex; flex-direction: column; gap: 14px; }
.PipelineBar-bar { display: flex; gap: 2px; height: 14px; }
.PipelineBar-seg { border-radius: 3px; transition: flex-grow var(--slow) var(--ease); }
.PipelineBar-legend { display: flex; flex-direction: column; }
.PipelineBar-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border: 0; border-top: 1px solid var(--fog); background: none; width: 100%; text-align: left; cursor: pointer; color: inherit; transition: background var(--fast) var(--ease); }
.PipelineBar-row:hover { background: var(--mist); }
.PipelineBar-row:first-child { border-top: 0; }
.PipelineBar-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.PipelineBar-stage { width: 82px; flex: none; }
.PipelineBar-note { flex: 1; min-width: 0; color: var(--navy-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.PipelineBar-count { width: 22px; text-align: right; color: var(--navy-400); }

/* Row shells -------------------------------------------------------------- */
.Row { display: grid; align-items: center; gap: 16px; width: 100%; padding: 12px 8px; border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--fog); transition: background var(--fast) var(--ease); }
.Row:hover, .Row[data-hover="true"] { background: var(--mist); }
.Row .chev { color: var(--navy-300); }
.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* VisitTableRow ----------------------------------------------------------- */
.VisitTableRow { grid-template-columns: var(--cols-VisitTableRow); }
.VisitTableRow-stripe { width: 3px; height: 36px; border-radius: 2px; background: var(--fog); }
.VisitTableRow-stripe[data-interest="hot"] { background-image: var(--grad); }
.VisitTableRow-stripe[data-interest="warm"] { background: var(--teal); }
.VisitTableRow-stripe[data-interest="cold"] { background: var(--navy-200); }
.VisitTableRow-rep { display: flex; align-items: center; gap: 8px; }
.VisitTableRow-contact, .VisitTableRow-next { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.VisitTableRow-due[data-late="true"] { color: var(--error); }

/* TaskTableRow ------------------------------------------------------------ */
.TaskTableRow { grid-template-columns: var(--cols-TaskTableRow); }
.TaskTableRow-task { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.TaskTableRow-owner { display: flex; align-items: center; gap: 8px; }
.TaskTableRow[data-done="true"] .TaskTableRow-title { text-decoration: line-through; color: var(--navy-400); }
.TaskTableRow-due[data-tone="error"] { color: var(--error); }
.TaskTableRow-due[data-tone="soon"] { color: var(--teal-700); }
.TaskTableRow-due[data-tone="quiet"] { color: var(--navy-400); }

/* TaskRowCompact ---------------------------------------------------------- */
.TaskRowCompact { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 30px; gap: 12px; align-items: start; width: 100%; padding: 13px 8px; border: 0; border-bottom: 1px solid var(--fog); background: none; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease); }
.TaskRowCompact:hover { background: var(--mist); }
.TaskRowCompact-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.TaskRowCompact-meta { display: flex; align-items: center; gap: 8px; color: var(--navy-400); min-width: 0; }
.TaskRowCompact-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.TaskRowCompact[data-done="true"] .TaskRowCompact-title { text-decoration: line-through; color: var(--navy-400); }
.TaskRowCompact-due[data-tone="error"] { color: var(--error); }
.TaskRowCompact-due[data-tone="soon"] { color: var(--teal-700); }
.TaskRowCompact-due[data-tone="quiet"] { color: var(--navy-400); }

/* ContactTableRow --------------------------------------------------------- */
.ContactTableRow { grid-template-columns: var(--cols-ContactTableRow); height: 44px; padding: 0 8px; }
.ContactTableRow[aria-selected="true"] { background: var(--teal-100); }
.ContactTableRow-flag { display: grid; place-items: center; color: var(--navy-400); }
.ContactTableRow-flag[data-card="false"] { color: var(--navy-300); }
.ContactTableRow-email { color: var(--teal-700); }
.ContactTableRow-email[data-empty="true"], .ContactTableRow-phone[data-empty="true"] { color: var(--navy-300); }
.ContactTableRow .right { text-align: right; color: var(--navy-400); }

/* MediaRow ---------------------------------------------------------------- */
.MediaRow { grid-template-columns: var(--cols-MediaRow); }
.MediaRow-preview { width: 76px; height: 50px; border-radius: 4px; border: 1px solid var(--fog); background: var(--mist); overflow: hidden; display: grid; place-items: center; color: var(--navy-400); }
.MediaRow-preview img { width: 100%; height: 100%; object-fit: cover; }
.MediaRow-preview[data-failed="true"] { color: var(--error); }
.MediaRow-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.MediaRow-meta { display: flex; align-items: center; gap: 6px; color: var(--navy-400); }
.MediaRow-middle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.MediaRow-play { width: 32px; height: 32px; border: 0; border-radius: 999px; background: var(--mist); display: grid; place-items: center; cursor: pointer; flex: none; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.MediaRow-play:hover { background: var(--fog); }
.MediaRow-play:active { transform: scale(0.94); }
.MediaRow-play[data-playing="true"] { background-image: var(--grad); color: var(--paper); }
.MediaRow-wave { width: 260px; height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; flex: none; }
.MediaRow-wave .bar { width: 2px; border-radius: 1px; background: var(--navy-200); }
.MediaRow-wave .bar[data-played="true"] { background: var(--teal); }
.MediaRow-became { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--teal-700); }
.MediaRow-became[data-muted="true"] { color: var(--navy-400); }

/* MediaTile --------------------------------------------------------------- */
.MediaTile { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--fog); border-radius: 8px; overflow: hidden; background: var(--paper); cursor: pointer; text-align: left; padding: 0; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.MediaTile-play[data-playing="true"] { background-image: none; background: var(--navy); }
.MediaTile-wave { cursor: pointer; }
.MediaTile-wave .bar[data-played="true"] { background: var(--teal); }
.MediaTile:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(10, 38, 52, 0.5); }
.MediaTile-image { display: block; aspect-ratio: 14 / 9; background: var(--mist); overflow: hidden; }  /* a player keeps the same box, so a row of tiles lines up */
.MediaTile-image img { width: 100%; height: 100%; object-fit: cover; }
.MediaTile-player { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 14 / 9; padding: 22px 18px; background: var(--mist); }
.MediaTile-play { width: 40px; height: 40px; border-radius: 999px; background-image: var(--grad); color: var(--paper); display: grid; place-items: center; border: 0; cursor: pointer; }
.MediaTile-wave { width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.MediaTile-wave .bar { width: 2px; border-radius: 1px; background: var(--navy-200); }
.MediaTile-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; margin-top: auto; }
.MediaTile-who { display: flex; align-items: center; gap: 8px; color: var(--navy-400); }

/* JourneyTrail ------------------------------------------------------------ */
.JourneyTrail { display: flex; flex-direction: column; }
.JourneyTrail-step { display: flex; gap: 14px; align-items: flex-start; }
.JourneyTrail-rail { display: flex; flex-direction: column; align-items: center; width: 28px; flex: none; }
.JourneyTrail-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; }
.JourneyTrail-line { width: 2px; flex: 1; min-height: 26px; background: var(--teal-200); }
.JourneyTrail-body { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 18px; min-width: 0; }
.JourneyTrail-note { color: var(--navy-400); }
.JourneyTrail-step[data-state="failed"] .JourneyTrail-dot { background: var(--error-bg); color: var(--error); }
.JourneyTrail-step[data-state="failed"] .JourneyTrail-note { color: var(--error); }
.JourneyTrail-step[data-state="skip"] .JourneyTrail-dot { background: var(--mist); color: var(--navy-300); }
.JourneyTrail-step[data-state="skip"] .JourneyTrail-title { color: var(--navy-300); }
.JourneyTrail-step[data-state="skip"] .JourneyTrail-line, .JourneyTrail-step[data-state="failed"] .JourneyTrail-line { background: var(--fog); }

/* ActivityItem ------------------------------------------------------------ */
.ActivityItem { display: grid; grid-template-columns: 62px 26px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px 6px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px; transition: background var(--fast) var(--ease); }
.ActivityItem:hover { background: var(--mist); }
.ActivityItem-time { color: var(--navy-400); padding-top: 4px; white-space: nowrap; }  /* "10:00 AM" is one thing, not two lines */
.ActivityItem-mark { width: 26px; height: 26px; border-radius: 999px; background: var(--mist); color: var(--navy-400); display: grid; place-items: center; }
.ActivityItem[data-state="failed"] .ActivityItem-mark { background: var(--error-bg); color: var(--error); }
.ActivityItem-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* One sentence that wraps like a sentence, with the company on its own line.
   As flex items the name and the company wrapped independently, which left a
   middot alone at the start of a line. */
.ActivityItem-line { display: block; line-height: 1.45; overflow-wrap: anywhere; }
.ActivityItem-line b { white-space: nowrap; }  /* a name is one word, not two lines */
.ActivityItem-line .Pill { vertical-align: middle; margin-left: 4px; }
.ActivityItem-error { color: var(--error); }

/* TeamCard ---------------------------------------------------------------- */
.TeamCard { display: flex; border: 1px solid var(--fog); border-radius: 8px; overflow: hidden; background: var(--paper); text-align: left; padding: 0; cursor: pointer; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.TeamCard:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(10, 38, 52, 0.45); }
.TeamCard-photo { width: 148px; flex: none; background: var(--mist); }
.TeamCard-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.TeamCard-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 18px 22px; flex: 1; min-width: 0; }
.TeamCard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.TeamCard-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.TeamCard-phone { display: flex; align-items: center; gap: 6px; color: var(--navy-400); white-space: nowrap; }
.TeamCard-stats { display: flex; align-items: baseline; gap: 20px; }
.TeamCard-stat { display: flex; align-items: baseline; gap: 5px; }
.TeamCard-stat span:last-child { color: var(--navy-400); }
.TeamCard[data-quiet="true"] .TeamCard-stat span:first-child { color: var(--navy-300); }
.TeamCard-last { display: flex; align-items: center; gap: 8px; color: var(--navy-400); }
.TeamCard-link { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-700); }

/* ChatMessage ------------------------------------------------------------- */
.ChatMessage[data-role="user"] { display: flex; justify-content: flex-end; }
.ChatMessage-bubble { max-width: 500px; padding: 12px 16px; background: var(--mist); border-radius: 14px 14px 4px 14px; }
.ChatMessage[data-role="assistant"], .ChatMessage[data-role="thinking"], .ChatMessage[data-role="error"] { display: flex; gap: 14px; align-items: flex-start; }
.ChatMessage[data-role="thinking"] { align-items: center; }  /* one short line, so it sits on the mark's centre line */
.ChatMessage-mark { width: 28px; height: 28px; border-radius: 999px; background-image: var(--grad); color: var(--paper); display: grid; place-items: center; flex: none; }
.ChatMessage[data-role="error"] .ChatMessage-mark { background: var(--error-bg); background-image: none; color: var(--error); }
.ChatMessage-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.ChatMessage-body p { margin: 0; }
.ChatMessage-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ChatMessage-item { display: flex; gap: 10px; align-items: baseline; }
.ChatMessage-marker { color: var(--teal); min-width: 12px; flex: none; }
.ChatMessage-body b { font-family: var(--display); font-weight: 900; }
.ChatMessage-marker { color: var(--teal); }  /* the bullet, not the name */
.ChatMessage-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.ChatMessage-dots { display: inline-flex; gap: 5px; align-items: center; }
.ChatMessage-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--teal); animation: dot 1.1s ease-in-out infinite; }
.ChatMessage-dots i:nth-child(2) { animation-delay: 0.14s; }
.ChatMessage-dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* AnswerActions ----------------------------------------------------------- */
.AnswerActions { display: flex; gap: 4px; align-items: center; }
.AnswerActions button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--navy-400); display: grid; place-items: center; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.AnswerActions button:hover { background: var(--mist); color: var(--navy); }

/* Composer ---------------------------------------------------------------- */
.Composer { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.Composer-box { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 12px 10px 16px; border: 1px solid var(--navy-200); border-radius: 14px; background: var(--paper); box-shadow: 0 2px 6px -2px rgba(10, 38, 52, 0.1); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.Composer-box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.Composer textarea { border: 0; resize: none; outline: none; background: none; max-height: 160px; }
.Composer textarea::placeholder { color: var(--navy-300); }
.Composer-bar { display: flex; align-items: center; justify-content: space-between; }
.Composer-scope { display: flex; align-items: center; gap: 6px; color: var(--navy-400); }
.Composer-note { color: var(--navy-300); }

/* ChatRailItem ------------------------------------------------------------ */
.ChatRailItem { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--navy-400); width: 100%; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.ChatRailItem:hover { background: rgba(255, 255, 255, 0.6); color: var(--navy); }
.ChatRailItem[aria-current="true"] { background: var(--paper); color: var(--navy); }
.ChatRailItem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* StarterCard ------------------------------------------------------------- */
.StarterCard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--fog); border-radius: 12px; background: var(--paper); cursor: pointer; text-align: center; align-items: center; flex: 1; transition: transform var(--base) var(--ease), border-color var(--base) var(--ease); }
.StarterCard:hover { transform: translateY(-2px); border-color: var(--teal-300); }
.StarterCard .icon { color: var(--teal-700); }

/* AppHeader --------------------------------------------------------------- */
.AppHeader { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--fog); }
.AppHeader-inner { display: flex; align-items: center; gap: 24px; height: 68px; padding: 0 var(--gutter); }  /* same gutters as .Page-body, so the logo lines up with the content */
.AppHeader-logo img { width: 100px; height: auto; }  /* the mark keeps its own ratio: 1290 x 408 */
.AppHeader-nav { display: flex; align-items: center; justify-content: center; gap: 26px; flex: 1; }
.AppHeader-fresh { display: flex; align-items: center; gap: 14px; color: var(--navy-400); white-space: nowrap; }
.AppHeader-refresh { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--teal-700); cursor: pointer; }
.AppHeader-refresh[data-busy="true"] .icon { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* CaptureCard -------------------------------------------------------------- */
.CaptureCard { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 8px; background: var(--navy); color: var(--paper); }
.CaptureCard[data-layout="bar"] { min-height: var(--bar-h); }
.CaptureCard-go { display: none; }  /* the phone's tap affordance; see the phone block in pages.css */
.CaptureCard-head { display: flex; flex-direction: column; gap: 4px; }
.CaptureCard-eyebrow { color: var(--teal-300); }
.CaptureCard-number { font: 900 24px/1.1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--paper); text-decoration: none; }
.CaptureCard-number:hover { text-decoration: underline; text-underline-offset: 3px; }
.CaptureCard-ways { display: flex; flex-direction: column; gap: 12px; }
.CaptureCard-way { display: flex; gap: 12px; align-items: flex-start; color: inherit; text-decoration: none; border-radius: 6px; transition: opacity var(--fast) var(--ease); }
a.CaptureCard-way:hover { opacity: 0.82; }
.CaptureCard-way-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.CaptureCard-way-text span { color: rgba(255, 255, 255, 0.72); }
.CaptureCard-num { width: 24px; height: 24px; border-radius: 999px; background-image: var(--grad); display: grid; place-items: center; flex: none; }

/* The bar: the number on the left, the three ways across, nothing wrapping
   unevenly because each way is its own column. */
.CaptureCard[data-layout="bar"] { flex-direction: row; align-items: center; gap: 36px; padding: 20px 28px; }
.CaptureCard[data-layout="bar"] .CaptureCard-head { flex: none; padding-right: 36px; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.CaptureCard[data-layout="bar"] .CaptureCard-number { font-size: 22px; }
.CaptureCard[data-layout="bar"] .CaptureCard-ways { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.CaptureCard[data-layout="bar"] .CaptureCard-way { align-items: center; }

/* FilterBar, FilterMenu, FilterTag ----------------------------------------- */
.FilterBar { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.FilterBar-row { display: flex; align-items: center; gap: 10px; }
.FilterBar-row .SearchField { flex: 1; min-width: 180px; width: auto; }
.FilterBar-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.FilterBar-clear { border: 0; background: none; color: var(--teal-700); cursor: pointer; }
.FilterBar-clear:hover { color: var(--navy); }

.FilterMenu { position: relative; }
.FilterMenu-scrim, .FilterMenu-grabber { display: none; }  /* both are phone furniture; see the phone block in pages.css */
.FilterMenu-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--navy-200); border-radius: 8px; background: var(--paper); color: var(--navy-400); cursor: pointer; white-space: nowrap; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease); }
.FilterMenu-button:hover { border-color: var(--teal); }
.FilterMenu-button[data-on="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.FilterMenu-button[data-on="true"] b { color: var(--paper); }
.FilterMenu[data-open="true"] .FilterMenu-button .icon { transform: rotate(180deg); }
.FilterMenu-button .icon { transition: transform var(--base) var(--ease); }
.FilterMenu-list { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; min-width: 210px; display: flex; flex-direction: column; padding: 6px; background: var(--paper); border: 1px solid var(--fog); border-radius: 10px; box-shadow: 0 18px 40px -20px rgba(10, 38, 52, 0.35); animation: menuIn var(--fast) var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
.FilterMenu-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--navy); cursor: pointer; text-align: left; }
.FilterMenu-option > span:not(.Avatar) { flex: 1; min-width: 0; }  /* the avatar keeps its own 20px box */
.FilterMenu-option:hover { background: var(--mist); }
.FilterMenu-option[aria-checked="true"] { color: var(--teal-700); }
.FilterMenu-option .icon { color: var(--teal); }

.FilterTag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border: 0; border-radius: 999px; background: var(--navy-100); color: var(--navy); cursor: pointer; }
.FilterTag[data-tone="teal"] { background: var(--teal-100); color: var(--teal-700); }
.FilterTag:hover { background: var(--fog); }

/* Drawer shell (VisitDrawer, ContactPanel, MediaDrawer) -------------------- */
.Scrim { position: fixed; inset: 0; background: rgba(0, 15, 29, 0.35); z-index: 30; opacity: 0; transition: opacity var(--base) var(--ease); }
.Scrim[data-open="true"] { opacity: 1; }
.Drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--paper); z-index: 31; display: flex; flex-direction: column; box-shadow: -18px 0 44px -20px rgba(10, 38, 52, 0.2); transform: translateX(16px); opacity: 0; transition: transform var(--slow) var(--ease), opacity var(--base) var(--ease); }
.Drawer[data-open="true"] { transform: none; opacity: 1; }
.Drawer[data-wide="true"] { width: min(620px, 100vw); }
.Drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--fog); flex: none; }
.Drawer-bar .left, .Drawer-bar .right { display: flex; align-items: center; gap: 8px; }
.Drawer-position { color: var(--navy-400); }
.Drawer-body { overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 22px 26px 40px; }
/* The body scrolls, so nothing inside it may be squashed to make room: a card
   photo shrank to two thirds of its height before this. */
.Drawer-body > * { flex: none; }
.Drawer-head { display: flex; gap: 14px; align-items: flex-start; }
.Drawer-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.Drawer-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--navy-400); }
.Drawer-link { display: inline-flex; align-items: center; gap: 5px; color: var(--teal-700); border: 0; background: none; cursor: pointer; padding: 0; }
.Drawer-card { border: 1px solid var(--fog); border-radius: 6px; overflow: hidden; display: block; padding: 0; background: none; cursor: zoom-in; width: 100%; }
.Drawer-card img { width: 100%; height: auto; display: block; }
.Drawer-details { display: flex; flex-direction: column; gap: 12px; }
.Drawer-disclosure { border-top: 1px solid var(--fog); padding-top: 12px; }
.Drawer-disclosure summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--navy-400); list-style: none; }
.Drawer-disclosure summary::-webkit-details-marker { display: none; }
.Drawer-disclosure .icon { transition: transform var(--base) var(--ease); }
.Drawer-disclosure[open] summary .icon { transform: rotate(90deg); }
.Drawer-transcript { white-space: pre-wrap; color: var(--graphite); padding-top: 10px; }
.Drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.Drawer-actions .Button { white-space: nowrap; }
.Drawer-block { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 6px; background: var(--mist); }

/* Modal · Figma: Modal (variants Kind = confirm | reschedule | lightbox) ----
   A drawer is for reading a record; a modal is for a decision, so it sits in the
   middle, traps focus and closes on Escape. */
.ModalScrim { position: fixed; inset: 0; background: rgba(0, 15, 29, 0.45); z-index: 40; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity var(--base) var(--ease); }
.ModalScrim[data-open="true"] { opacity: 1; }
.Modal { width: 100%; max-width: 480px; background: var(--paper); border-radius: 10px; box-shadow: 0 30px 70px -30px rgba(10, 38, 52, 0.55); display: flex; flex-direction: column; transform: translateY(8px) scale(0.985); opacity: 0; transition: transform var(--slow) var(--ease), opacity var(--base) var(--ease); }
.ModalScrim[data-open="true"] .Modal { transform: none; opacity: 1; }
.Modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.Modal-titles { display: flex; flex-direction: column; gap: 4px; }
.Modal-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 22px 0; }
.Modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 22px 22px; }
.Modal-note { color: var(--navy-400); }
.Modal[data-kind="lightbox"] { max-width: min(1040px, 92vw); background: none; box-shadow: none; }
.Modal[data-kind="lightbox"] .Modal-image { border-radius: 8px; overflow: hidden; background: var(--paper); }
.Modal[data-kind="lightbox"] .Modal-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; color: rgba(255, 255, 255, 0.86); }
.Modal-dates { display: flex; flex-wrap: wrap; gap: 8px; }
.Modal-date { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--navy-200); border-radius: 8px; background: var(--paper); cursor: pointer; text-align: left; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.Modal-date:hover { border-color: var(--teal); }
.Modal-date[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-100); }
.Modal-date span:last-child { color: var(--navy-400); }
.Modal-field { display: flex; flex-direction: column; gap: 6px; }
.Modal-field input { padding: 9px 12px; border: 1px solid var(--navy-200); border-radius: 6px; background: var(--paper); }
.Modal-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }

/* DoneRow · Figma: Done Row. A closed task in the Done view. */
:root { --cols-DoneRow: 22px minmax(0, 1fr) 130px 120px 130px 90px; }
.TableHeader[data-for="DoneRow"] { grid-template-columns: var(--cols-DoneRow); }
.DoneRow { display: grid; grid-template-columns: var(--cols-DoneRow); gap: 16px; align-items: center; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--fog); background: none; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease); }
.DoneRow:hover { background: var(--mist); }
.DoneRow-check { width: 22px; height: 22px; border-radius: 999px; background: var(--green-100); color: var(--green-600); display: grid; place-items: center; }
.DoneRow-task { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.DoneRow-title { color: var(--navy-400); text-decoration: line-through; }
.DoneRow-owner { display: flex; align-items: center; gap: 8px; }
.DoneRow-when { color: var(--navy-400); }
.DoneRow-restore { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--navy-200); border-radius: 999px; background: var(--paper); color: var(--navy); cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.DoneRow-restore:hover { border-color: var(--teal); color: var(--teal-700); }

/* TabBar · Figma: Tab Bar. Phone only; the desktop keeps its nav in the header. */
.TabBar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; background: var(--paper); border-top: 1px solid var(--fog);
  padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px)); }
.TabBar-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0; color: var(--navy-400); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.TabBar-tab[data-active="true"] { color: var(--navy); }
.TabBar-tab[data-active="true"] .icon { color: var(--teal); }

/* Sheet · Figma: Sheet. Comes up from the bottom edge, where the thumb is. */
.SheetScrim { position: fixed; inset: 0; z-index: 34; background: rgba(0, 15, 29, 0.38); opacity: 0; transition: opacity var(--base) var(--ease); }
.SheetScrim[data-open="true"] { opacity: 1; }
.Sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; flex-direction: column;
  background: var(--paper); border-radius: 18px 18px 0 0; padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px -8px rgba(10, 38, 52, 0.22); transform: translateY(12px); opacity: 0;
  transition: transform var(--slow) var(--ease), opacity var(--base) var(--ease); }
.Sheet[data-open="true"] { transform: none; opacity: 1; }
.Sheet-grabber { width: 38px; height: 4px; border-radius: 2px; background: var(--navy-200); align-self: center; margin-bottom: 10px; }
.Sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 12px; }
.Sheet-body { display: flex; flex-direction: column; padding: 0 16px; }
.Sheet-option { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border: 0; border-bottom: 1px solid var(--fog); background: none; text-align: left; cursor: pointer; color: var(--navy); }
.Sheet-option:last-child { border-bottom: 0; }
.Sheet-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.Sheet-option .icon { color: var(--teal); }
.AppHeader-fresh-short { display: none; }
.AppHeader-more { display: none; border: 0; background: none; color: var(--navy); cursor: pointer; padding: 4px; }

/* Pull to refresh · phone only, drawn by app.js when a pull starts. */
#pull { position: fixed; top: 8px; left: 50%; z-index: 21; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--fog); box-shadow: 0 8px 20px -12px rgba(10, 38, 52, 0.5);
  transform: translate(-50%, 0); opacity: 0; pointer-events: none; transition: transform var(--base) var(--ease), opacity var(--base) var(--ease); }
#pull span { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--navy-200); border-top-color: var(--teal); transition: transform var(--base) var(--ease); }
#pull[data-ready="true"] span { transform: rotate(180deg); border-top-color: var(--green-600); }

/* ContactHead + ContactForm · fixing what the card said, in place. */
.ContactHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ContactHead .IconButton { flex: none; }
.ContactForm { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--fog); border-radius: 8px; background: var(--mist); }
.ContactForm-head { display: flex; align-items: center; justify-content: space-between; }
.ContactForm-field { display: flex; flex-direction: column; gap: 4px; }
.ContactForm-field input { padding: 9px 11px; border: 1px solid var(--navy-200); border-radius: 6px; background: var(--paper); color: var(--navy); font: 400 15px/1.4 var(--body); }
.ContactForm-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.ContactForm-actions { display: flex; gap: 8px; padding-top: 2px; }
.ContactForm-actions .Button { border-radius: 6px; }

/* Import · Figma: Import cards. A stack of photographed cards, read one by one. */
.Contacts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.Contacts-add { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--navy); color: var(--paper); cursor: pointer; transition: transform var(--fast) var(--ease); }
.Contacts-add:hover { transform: translateY(-1px); }
.Import-progress { display: flex; flex-direction: column; gap: 6px; }
.Import-track { height: 6px; border-radius: 3px; background: var(--fog); overflow: hidden; }
.Import-track i { display: block; height: 100%; border-radius: 3px; background-image: var(--grad); transition: width var(--slow) var(--ease); }
.ImportRow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--fog); }
.ImportRow-thumb { width: 56px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--mist); }
.ImportRow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ImportRow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ImportRow-dots { display: inline-flex; gap: 4px; align-items: center; }
.ImportRow-dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--teal); animation: dot 1.1s ease-in-out infinite; }
.ImportRow-dots i:nth-child(2) { animation-delay: 0.14s; }
.ImportRow-dots i:nth-child(3) { animation-delay: 0.28s; }

/* NamePicker · Figma: Name Picker. Which of the people on file this recap meant. */
.NamePicker { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--error-bg); border-left: 3px solid rgba(179, 38, 30, 0.35); }
.NamePicker-head { display: flex; align-items: center; gap: 8px; color: var(--error); }
.NamePicker-list { display: flex; flex-direction: column; gap: 8px; }
.NamePicker-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid var(--fog); border-radius: 8px; background: var(--paper); text-align: left; cursor: pointer; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.NamePicker-option:hover { border-color: var(--teal); transform: translateY(-1px); }
.NamePicker-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.NamePicker-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; padding: 0; border: 0; background: none; color: var(--teal-700); cursor: pointer; }
.NamePicker-search .SearchField { width: 100%; }

/* EmailDraft · a letter ready to open in the rep's own mail app. */
.EmailDraft { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--fog); border-radius: 8px; background: var(--mist); }
.EmailDraft-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.EmailDraft-body { white-space: pre-wrap; color: var(--graphite); }
.EmailDraft-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.EmailDraft-actions .Button { border-radius: 6px; }
.EmailDraft-nudges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.EmailDraft-nudges .Chip { padding: 5px 11px; }
.EmailDraft-done { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; padding: 0; border: 0; background: none; color: var(--teal-700); cursor: pointer; }

/* The draft button on a task: quiet until the row is under the pointer, because
   the commitment matters more than the tool that answers it. */
.TaskTableRow-draft, .TaskRowCompact-draft { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: none; color: var(--navy-300); cursor: pointer; opacity: 0; transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease); }
.TaskTableRow:hover .TaskTableRow-draft, .TaskRowCompact:hover .TaskRowCompact-draft,
.TaskTableRow-draft:focus-visible, .TaskRowCompact-draft:focus-visible { opacity: 1; }
.TaskTableRow-draft:hover, .TaskRowCompact-draft:hover { background: var(--teal-100); color: var(--teal-700); }
@media (hover: none) { .TaskTableRow-draft, .TaskRowCompact-draft { opacity: 1; } }

.Drawer-sent { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--teal-700); }
.TaskRowCompact-sent { color: var(--teal-700); display: inline-grid; place-items: center; vertical-align: -2px; margin-right: 5px; }

/* PhotoTile ---------------------------------------------------------------- */
.PhotoTile { display:flex; flex-direction:column; text-align:left; width:100%; padding:0; border:1px solid var(--fog); border-radius:10px; background:var(--paper); overflow:hidden; cursor:pointer; transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.PhotoTile:hover { border-color:var(--navy-200); }
.PhotoTile[data-state="selected"] { border:2px solid var(--teal); }
.PhotoTile-image { display:block; aspect-ratio:16/10; background:var(--mist); }
.PhotoTile-image img { width:100%; height:100%; object-fit:cover; }
.PhotoTile-meta { display:flex; flex-direction:column; gap:7px; padding:12px 14px 14px; }
.PhotoTile[data-state="uncaptioned"] .PhotoTile-caption { color:var(--navy-300); }
.PhotoTile-line { display:flex; align-items:center; gap:8px; }
.PhotoTile-tags { display:flex; flex-wrap:wrap; gap:6px; }
.PhotoTile-tags .Chip { pointer-events:none; }

/* QuickLinkCard ------------------------------------------------------------ */
.QuickLinkCard { display:flex; gap:10px; align-items:center; padding:16px; border:1px solid var(--fog); border-radius:12px; background:var(--paper); color:inherit; text-decoration:none; transition:border-color var(--fast) var(--ease); }
.QuickLinkCard:hover { border-color:var(--teal-300); }
.QuickLinkCard[data-style="default"] { flex-direction:column; align-items:stretch; gap:10px; }
.QuickLinkCard[data-style="default"] > .icon:last-child { position:absolute; top:16px; right:16px; color:var(--navy-300); }
.QuickLinkCard[data-style="default"] { position:relative; }
.QuickLinkCard[data-style="compact"] { padding:12px 14px; background:var(--mist); border-color:transparent; }
.QuickLinkCard[data-style="compact"] > .icon:last-child { color:var(--navy-300); margin-left:auto; }
.QuickLinkCard-badge { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--teal-100); color:var(--teal-700); flex:none; }
.QuickLinkCard[data-style="compact"] .QuickLinkCard-badge { width:28px; height:28px; border-radius:8px; }
.QuickLinkCard-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.QuickLinkCard-title { color:var(--deep); }
.QuickLinkCard-host { color:var(--navy-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.LinkGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows:1fr; gap:20px; }

/* SettingsRow -------------------------------------------------------------- */
.SettingsRow { display:flex; align-items:center; gap:24px; padding:16px 0; }
.SettingsRow-label { display:flex; flex-direction:column; gap:3px; width:340px; max-width:60%; }
.SettingsRow-control { margin-left:auto; display:flex; align-items:center; gap:10px; }
.SettingsRow-number { display:inline-flex; align-items:center; gap:10px; }
.SettingsRow-actions { display:inline-flex; gap:10px; }
.Field { height:42px; padding:0 14px; border:1px solid var(--navy-200); border-radius:9px; background:var(--paper); color:var(--deep); }
.Field:focus-visible { border-color:var(--teal); outline:none; box-shadow:0 0 0 3px var(--teal-100); }
.Toggle { width:46px; height:26px; border-radius:999px; border:0; background:var(--navy-200); padding:3px; display:flex; cursor:pointer; transition:background var(--fast) var(--ease); }
.Toggle[aria-checked="true"] { background:var(--teal); justify-content:flex-end; }
.Toggle-knob { width:20px; height:20px; border-radius:999px; background:var(--paper); }
.Rule { border:0; border-top:1px solid var(--fog); margin:0; }

/* TowerCard ---------------------------------------------------------------- */
.TowerCard { display:flex; flex-direction:column; padding:0; text-align:left; border:1px solid var(--fog); border-radius:12px; background:var(--paper); overflow:hidden; cursor:pointer; }
.TowerCard[data-state="selected"] { border:2px solid var(--teal); }
.TowerCard-image { display:grid; place-items:center; height:158px; background:var(--paper); overflow:hidden; }
.TowerCard-image img { max-width:100%; max-height:100%; object-fit:contain; }
.TowerCard-body { display:flex; flex-direction:column; justify-content:space-between; gap:3px; flex:1; padding:12px 14px 14px; }
.TowerCard[data-state="selected"] .TowerCard-body { background:var(--teal-100); }
.TowerGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows:1fr; gap:16px; }

/* ROIField ----------------------------------------------------------------- */
.ROIField { display:flex; flex-direction:column; gap:10px; }
.ROIField-head { display:flex; align-items:center; gap:10px; }
.ROIField-head > :last-child { margin-left:auto; }
.ROIField-quicks { display:flex; gap:8px; }
.ROIQuick { flex:1; height:38px; border:1px solid var(--navy-200); border-radius:9px; background:var(--paper); color:var(--navy); cursor:pointer; }
.ROIQuick[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:var(--paper); }
.ROIField-stepper { display:flex; gap:10px; align-items:center; }
.ROIField-stepper .Field { flex:1; text-align:center; }
.ROIStep { width:44px; height:44px; border:1px solid var(--navy-200); border-radius:9px; background:var(--paper); color:var(--navy); display:grid; place-items:center; cursor:pointer; }

/* SignIn ------------------------------------------------------------------- */
.SignIn-wrap { display:flex; flex-direction:column; align-items:center; gap:26px; padding:120px 0 140px; }
.SignIn { display:flex; flex-direction:column; gap:0; width:440px; max-width:100%; padding:32px; border:1px solid var(--fog); border-radius:16px; background:var(--paper); }
.SignIn > * + * { margin-top:14px; }
.SignIn-badge { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:var(--teal-100); color:var(--teal-700); margin-bottom:6px; }
.SignIn-field { display:flex; flex-direction:column; gap:7px; }
.SignIn-field .Field { height:48px; }
.SignIn[data-state="wrong"] .SignIn-field:last-of-type .Field { border-color:var(--error); border-width:2px; }
.SignIn .Button { justify-content:center; }

/* VisitPicker -------------------------------------------------------------- */
.VisitPicker { border:1px solid var(--fog); border-radius:14px; overflow:hidden; }
.VisitPicker-head { display:flex; flex-direction:column; gap:5px; padding:16px 16px 12px; }
.VisitPicker-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px; border:0; border-top:1px solid var(--fog); background:var(--paper); text-align:left; cursor:pointer; }
.VisitPicker-row[aria-pressed="true"] { background:var(--teal-100); }
.VisitPicker-who { display:flex; flex-direction:column; gap:2px; min-width:0; }
.Radio { width:18px; height:18px; border-radius:999px; border:1px solid var(--navy-300); flex:none; display:grid; place-items:center; }
.Radio[data-on="true"] { border-color:var(--teal); background:var(--teal); }
.Radio[data-on="true"]::after { content:""; width:6px; height:6px; border-radius:999px; background:var(--paper); }

/* DigestRow ---------------------------------------------------------------- */
.DigestRow { display:flex; align-items:center; gap:14px; width:100%; padding:14px; border:0; background:none; text-align:left; cursor:pointer; color:inherit; }
.DigestRow:hover { background:var(--mist); }
.DigestRow[data-state="add"] { border:1px dashed var(--navy-200); border-radius:11px; }
.DigestRow[data-state="paused"] .DigestRow-line b, .DigestRow[data-state="paused"] .DigestRow-text > span:last-child { color:var(--navy-400); }
.DigestRow-badge { display:grid; place-items:center; width:36px; height:36px; border-radius:999px; background:var(--mist); color:var(--navy-400); flex:none; }
.DigestRow-text { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.DigestRow-line { display:flex; align-items:center; gap:8px; min-width:0; }
.DigestRow-email { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.DigestRow > .icon:last-child { color:var(--navy-300); flex:none; }

/* ToolStrip ---------------------------------------------------------------- */
/* The same height as the capture bar above it (79px on a desk, 66 on a phone),
   so the two read as one stack rather than two unrelated bars. */
/* No fixed height: the capture bar's own height is its padding plus its content,
   so a number here would drift the first time that content changed, and it did.
   The padding is the bar's (22px, 14px on a phone) minus this one's border, and
   the badge stands in for the content, so both boxes compute to the same number. */
.ToolStrip { display:flex; align-items:center; gap:16px; width:100%; height:var(--bar-h); padding:0 23px; border:1px solid var(--fog); border-radius:8px; background:var(--paper); color:inherit; text-align:left; cursor:pointer; transition:border-color var(--fast) var(--ease); }
.ToolStrip:hover { border-color:var(--teal-300); }
.ToolStrip-badge { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--teal-100); color:var(--teal-700); flex:none; }
.ToolStrip-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ToolStrip-title { color:var(--deep); }
.ToolStrip-sub { color:var(--navy-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ToolStrip-go { display:flex; align-items:center; gap:8px; color:var(--teal-700); flex:none; }
.OrderButton { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--navy-200); border-radius:8px; background:var(--paper); color:var(--navy); cursor:pointer; flex:none; }
.OrderButton:disabled { color:var(--navy-200); cursor:default; }
.OrderButton:not(:disabled):hover { border-color:var(--teal-300); color:var(--teal-700); }