/* ============================================================================
   HINT IT — v2 design system : COMPONENTS
   ----------------------------------------------------------------------------
   The starter component vocabulary for the first migrated pages: text roles,
   buttons, card, form field/input, pill, eyebrow. All scoped under `.hint-v2`,
   token-driven, no `!important`, no bare-element selectors, no inline styles.
   Mirrors the mobile component vocabulary (Button/Card/Input/Text/Pill) and the
   size-only `AppText` role discipline.
   ============================================================================ */

/* ---------- Text roles (size-only discipline; weight/family explicit) ---------- */
.hint-v2 .text-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hint-v2 .text-display-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-display-extrabold);
  font-size: var(--text-display-sm);
  line-height: 1.1;
}
.hint-v2 .text-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-extrabold);
  font-size: var(--text-title);
  line-height: var(--leading-tight);
}
.hint-v2 .text-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-heading);
  line-height: var(--leading-snug);
}
.hint-v2 .text-subhead {
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}
.hint-v2 .text-body { font-size: var(--text-body); }
.hint-v2 .text-body-strong { font-size: var(--text-body); font-weight: var(--fw-semibold); }
.hint-v2 .text-label { font-size: var(--text-label); color: var(--text-secondary); }
.hint-v2 .text-micro { font-size: var(--text-micro); color: var(--text-muted); }
.hint-v2 .text-muted { color: var(--text-muted); }
.hint-v2 .text-secondary { color: var(--text-secondary); }

.hint-v2 .eyebrow {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hint-v2 .prose > * + * { margin-top: var(--space-4); }
.hint-v2 .prose :where(h2, h3) { margin-top: var(--space-7); }
.hint-v2 .prose :where(p, li) { line-height: var(--leading-relaxed); color: var(--text-primary); }

/* ---------- Buttons ---------- */
.hint-v2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-body);
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  text-align: center;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.hint-v2 .btn:active { transform: translateY(1px); }

.hint-v2 .btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--purple-700);
  box-shadow: 0 3px 0 var(--purple-900);
}
.hint-v2 .btn-primary:hover { background: var(--primary-hover); }

.hint-v2 .btn-secondary {
  background: var(--bg-surface);
  color: var(--text-brand);
  border-color: var(--purple-600);
}
.hint-v2 .btn-secondary:hover { background: var(--bg-elevated); }

.hint-v2 .btn-ghost {
  background: transparent;
  color: var(--text-primary);
}
.hint-v2 .btn-ghost:hover { background: var(--bg-elevated); }

.hint-v2 .btn-danger {
  background: var(--danger);
  color: var(--text-on-primary);
  border-color: var(--danger-text);
}

.hint-v2 .btn-chip {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-label);
  border-radius: var(--radius-pill);
}
.hint-v2 .btn-block { width: 100%; }

/* ---------- Card ---------- */
.hint-v2 .card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.hint-v2 .card-quiet {
  border-color: var(--border);
  box-shadow: none;
}

/* ---------- Form field / input ----------
   MOVED to the dedicated shared `forms.css` (the master input system). Kept this
   note as a signpost: field/input/textarea/select/checkbox/radio/switch/otp/file
   all live in forms.css now. */

/* ---------- Pill / badge ---------- */
.hint-v2 .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.hint-v2 .pill-safe { background: var(--safe-bg); color: var(--safe-text); }
.hint-v2 .pill-danger { background: var(--danger-bg); color: var(--danger-text); }
.hint-v2 .pill-warning { background: var(--warning-bg); color: var(--warning-text); }
.hint-v2 .pill-info { background: var(--info-bg); color: var(--info-text); }

/* ---------- Section spacing helper for marketing pages ---------- */
.hint-v2 .section {
  padding-block: var(--space-section);
}

/* ---------- Steps (numbered "image + title + caption" flow for feature/how-it-works) ----------
   Shared by the feature pages (Reply Assistant, S&W Reports) and How-it-works sections.
   `.steps` is an auto-fit grid of `.step` cards; each step carries a `.step-num` badge, an
   optional `.step-media` image, a `.step-title`, and a `.step-caption`. Tokens only. */
.hint-v2 .steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--steps-min, 240px), 100%), 1fr));
}
.hint-v2 .step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hint-v2 .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-brand);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-label);
}
.hint-v2 .step-media {
  width: 100%;
  border-radius: var(--radius-card);
  display: block;
}
.hint-v2 .step-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-medium);
  font-size: var(--text-subhead);
  color: var(--brand);
  margin: 0;
}
.hint-v2 .step-caption {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---------- Brand hero band (shared base for marketing/legal page heroes) ----------
   The brand-background hero band shared by the article/legal hero (.v2-article-hero),
   the pricing hero (.fb-hero), and learn-more (.lm-hero). Carries only the universal
   base; page-specific layout (grids, headlines, bullets) + the h1/p text treatment
   stay in each page's CSS. */
.hint-v2 .hero-brand {
  background: var(--bg-brand);
  color: var(--text-on-brand);
  padding-block: var(--space-9);
}
.hint-v2 .hero-brand .eyebrow { color: var(--text-on-brand-muted); }

/* ============================================================================
   ADMIN / APP VOCABULARY (table, stat card, toolbar, page header, tabs, empty)
   ----------------------------------------------------------------------------
   The admin portal is table/form/dashboard-heavy; these are the shared building
   blocks promoted out of page-scoped CSS so every admin page (and any future
   app screen) draws from one set. Still scoped under `.hint-v2`, token-driven.
   ============================================================================ */

/* ---------- Icon base (promoted from settings.css so it ships in the shared
   body-linked set — admin pages don't load settings.css) ---------- */
.hint-v2 .v2-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* ---------- Pills (promoted from settings.css; extend the .pill set above) ---------- */
.hint-v2 .pill-purple { background: var(--purple-100); color: var(--purple-700); }
.hint-v2 .pill-neutral { background: var(--bg-elevated); color: var(--text-secondary); }

/* ---------- Page header (title block + actions row) ---------- */
.hint-v2 .page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hint-v2 .page-head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ---------- Toolbar / filter bar (reuses .input/.select/.btn) ---------- */
.hint-v2 .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.hint-v2 .toolbar-spacer { margin-left: auto; }

/* ---------- Stat / KPI card + grid ---------- */
.hint-v2 .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}
.hint-v2 .stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.hint-v2 .stat-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.hint-v2 .stat-value {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-metric);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}
.hint-v2 .stat-sub { font-size: var(--text-micro); color: var(--text-muted); }

/* ============================================================================
   DATA-VIZ : distribution bar · meter · semantic fills · legend dot
   ----------------------------------------------------------------------------
   Promoted out of seven page CSS files (analyze/hints/system/giveaways/
   locations/dashboard each rolled its own bar) per the CSS graduation rule.
   Library-free, tokens only. Two primitives:
     • .distbar  — a stacked, segmented distribution strip (status / sentiment /
                   throughput). Each segment's width is a one-off --seg custom
                   property the markup sets (the sanctioned inline exception).
     • .meter    — a single-value fill bar (progress / ratio). Horizontal by
                   default; add .meter--vert for a bottom-anchored vertical fill
                   (e.g. a day column). Value via the one-off --meter property.
   Colour comes from the shared .fill-* classes below. A .distbar-seg / .legend-dot
   that also carries a pale .pill-* class renders that hue SOLID — the table pills
   stay pale, but in a bar we want readable separation between segments.
   ============================================================================ */

/* ---- Distribution bar (segmented) ---- */
.hint-v2 .distbar {
  display: flex;
  width: 100%;
  height: var(--distbar-h, var(--space-3));
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-elevated);
}
.hint-v2 .distbar-seg { height: 100%; width: var(--seg, 0%); }

/* ---- Meter (single fill) ---- */
.hint-v2 .meter {
  width: 100%;
  height: var(--meter-track-h, var(--space-3));
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.hint-v2 .meter-fill {
  width: var(--meter, 0%);
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width var(--dur-base) var(--ease-out);
}
/* Vertical: the track is a fixed-height column; the fill grows from the bottom. */
.hint-v2 .meter--vert {
  display: flex;
  align-items: flex-end;
  height: var(--meter-track-h, 52px);
  border-radius: var(--radius-xs);
}
.hint-v2 .meter--vert .meter-fill {
  width: 100%;
  height: var(--meter, 0%);
  min-height: 3px;          /* a hairline baseline so a zero value still reads as a column */
  border-radius: var(--radius-xs);
  transition: height var(--dur-base) var(--ease-out);
}

/* ---- Legend dot (the key beside a distbar / chart) ---- */
.hint-v2 .legend-dot {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: var(--radius-full);
  flex: 0 0 auto;
}

/* ---- Semantic solid fills (distbar segments, legend dots, meter fills) ----
   One rule per colour lists every way to request it: the standalone .fill-* class,
   plus the .pill-*-in-a-bar/dot solid override. Single source of truth per hue. */
.hint-v2 .fill-safe,
.hint-v2 .distbar-seg.pill-safe,
.hint-v2 .legend-dot.pill-safe       { background: var(--safe); }
.hint-v2 .fill-danger,
.hint-v2 .distbar-seg.pill-danger,
.hint-v2 .legend-dot.pill-danger     { background: var(--danger); }
.hint-v2 .fill-warning,
.hint-v2 .distbar-seg.pill-warning,
.hint-v2 .legend-dot.pill-warning    { background: var(--warning); }
.hint-v2 .fill-info,
.hint-v2 .distbar-seg.pill-info,
.hint-v2 .legend-dot.pill-info       { background: var(--info); }
.hint-v2 .fill-muted,
.hint-v2 .distbar-seg.pill-neutral,
.hint-v2 .legend-dot.pill-neutral    { background: var(--text-muted); }
.hint-v2 .fill-primary { background: var(--primary); }
.hint-v2 .fill-faint   { background: var(--border); }

/* ---------- Data table (scoped element selectors under .table — not bare) ---------- */
.hint-v2 .table-wrap {
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.hint-v2 .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
}
.hint-v2 .table th,
.hint-v2 .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.hint-v2 .table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-micro);
}
.hint-v2 .table tbody tr:hover { background: var(--bg-page); }
.hint-v2 .table tbody tr:last-child td { border-bottom: 0; }
.hint-v2 .table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Sortable header: a button that inherits the th's type so it reads as a header. */
.hint-v2 .table thead th .th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.hint-v2 .table thead th .th-sort:hover { color: var(--text-primary); }
.hint-v2 .table thead th .th-sort .th-sort-icon { width: 14px; height: 14px; }
.hint-v2 .table .num .th-sort { flex-direction: row-reverse; }

/* ---------- Tabs / segmented control ---------- */
.hint-v2 .tabs {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
}
.hint-v2 .tab {
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
}
.hint-v2 .tab[aria-selected="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

/* ---------- Empty / loading state ---------- */
.hint-v2 .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  color: var(--text-secondary);
}

/* ---------- Pagination (prev/next + "X of Y") ---------- */
.hint-v2 .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.hint-v2 .pager-info {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

/* Generic disabled affordance for buttons (e.g. pager prev/next at boundaries) */
.hint-v2 .btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============================================================================
   PROMOTED VOCABULARY (was page-scoped in settings.css; now shared)
   list-row · avatar · icon-btn · sheet/modal. Scoped under `.hint-v2`, tokens.
   ============================================================================ */

/* ---------- List row (flat, divider-separated rows inside a card) ----------
   Distinct from the admin shell's `.admin-list-row` (a standalone selectable
   bordered button for master/detail). Use `.list-row` for lists of entities
   (members, subjects, link rows) within a `.card`. */
.hint-v2 .list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.hint-v2 .list-row:first-child { padding-top: 0; }
.hint-v2 .list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hint-v2 .list-row-body { flex: 1 1 auto; min-width: 0; }
.hint-v2 .list-row-name {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.hint-v2 .list-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.hint-v2 .list-row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

/* ---------- Avatar (icon/letter tile, color variants) ---------- */
.hint-v2 .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: var(--fw-bold);
  font-size: var(--text-body);
}
.hint-v2 .avatar .v2-icon { width: 16px; height: 16px; }
.hint-v2 .avatar-purple { background: var(--purple-100); color: var(--purple-500); }
.hint-v2 .avatar-safe { background: var(--safe-bg); color: var(--safe-text); }
.hint-v2 .avatar-warning { background: var(--warning-bg); color: var(--warning-text); }

/* ---------- Icon button (compact ghost button for row actions) ---------- */
.hint-v2 .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.hint-v2 .icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.hint-v2 .icon-btn .v2-icon { width: 16px; height: 16px; }

/* ---------- Sheet / modal (V2Sheet) — promoted so it works on every v2 page ---------- */
.hint-v2 .v2-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--purple-900) 55%, transparent);
  animation: v2-sheet-fade var(--dur-quick) var(--ease-out);
}
.hint-v2 .v2-sheet-panel {
  z-index: var(--z-modal-panel);
  width: 100%;
  max-width: 460px;
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: var(--bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  padding: var(--space-6);
  animation: v2-sheet-rise var(--dur-base) var(--ease-out);
}
.hint-v2 .v2-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.hint-v2 .v2-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.hint-v2 .v2-sheet-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.hint-v2 .v2-sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@keyframes v2-sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes v2-sheet-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Toast (transient feedback — V2ToastHost + V2ToastService) ---------- */
.hint-v2 .toast-host {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(92vw, 24rem);
  pointer-events: none;          /* let clicks through the gaps; toasts re-enable below */
}
.hint-v2 .toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  color: var(--text-primary);
  pointer-events: auto;
  animation: v2-toast-rise var(--dur-quick) var(--ease-out);
}
.hint-v2 .toast-icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.hint-v2 .toast-icon .v2-icon {
  width: 18px;
  height: 18px;
}
.hint-v2 .toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-label);
  line-height: 1.4;
}
.hint-v2 .toast-close {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.hint-v2 .toast-close:hover {
  color: var(--text-primary);
}
.hint-v2 .toast-close .v2-icon {
  width: 16px;
  height: 16px;
}
.hint-v2 .toast-success { border-left-color: var(--safe); }
.hint-v2 .toast-success .toast-icon { color: var(--safe); }
.hint-v2 .toast-error { border-left-color: var(--danger); }
.hint-v2 .toast-error .toast-icon { color: var(--danger); }
.hint-v2 .toast-warning { border-left-color: var(--warning); }
.hint-v2 .toast-warning .toast-icon { color: var(--warning); }
.hint-v2 .toast-info { border-left-color: var(--info); }
.hint-v2 .toast-info .toast-icon { color: var(--info); }
@keyframes v2-toast-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}