/* ------------------------------------------------------------------
   COLOR TOKENS
   ------------------------------------------------------------------ */

:root {

  /* --- Legacy palette (pre-redesign screens) --- */
  --bg: #ffffff;
  --card: #f3f3ff;
  --sidebar-active-bg: #dadaff;
  --light-hover: #f3f3ff;
  --border: #f6f6fe;
  --text-blue: #483eff;
  --button-hover: hsl(244, 100%, 65%);
  --black: #4a4a4a;
  --muted: #6b7280;
  --accent: #EDF2FF;

  /* --- Semantic (state, not brand) --- */
  --danger: #dc2626;
  --danger-bg: #fdeef0;
  --danger-hover: #b91c1c;
  --success: #10b981;
  /* Added for the Done button's hover fill; --danger already had its pair. */
  --success-bg: #ecfdf5;
  --primary-dark: #4338ca;

  /* --- Neutral ramp --- */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;

  --border-standard: 0.50px solid var(--gray-200);

  /* --- Redesign palette (leaderboard onward) ---
     Near-black text on warm-gray surfaces. Replaces the lilac family
     (--black, --light-hover) in redesigned components. */
  --ink: #0a0a0a;
  --ink-soft: #26262c;
  --gray: #5f636b;
  --gray-2: #9aa0a8;
  --paper: #fafafa;
  --line: #ececee;
  --line-2: #e3e3e6;
  /* A card edge that has to hold its own on a white page (the analytics
     panel and filter bar): the two hairlines above all but vanish there. */
  --line-3: #d4d4d8;

  /* The one dark surface: the prompt a client pastes to an AI agent on the
     API page, drawn as a terminal so it reads as text to copy, not as UI.
     Four values: the surface, its hairline, the muted label and the text. */
  --terminal: #121217;
  --terminal-line: #23232a;
  --terminal-muted: #8a90a0;
  --terminal-text: #c4c9d4;
  /* Three accents inside it, so the key, the field names and the header
     line stand apart from the prose: amber, blue, green. */
  --terminal-key: #ffb03d;
  --terminal-field: #8ea6ff;
  --terminal-header: #5ce0a0;

  /* Section dots. One of only two places colour carries meaning: which of
     the four KPI sections a screen belongs to. Closer and setter are the
     hues nav.css already used, promoted to tokens; business reuses --gold and
     ads reuses --group-ads, rather than adding new hues. */
  --section-closer: #17b26a;
  --section-setter: #f5a524;
  --section-ads: var(--group-ads);

  /* The sidebar's group markers. Overview is neutral — it is not a team — so
     it borrows the brand violet rather than a section hue. */
  --dot-overview: #b85bff;
  --dot-setter: var(--section-setter);
  --dot-closer: var(--section-closer);

  /* KPI subsections. The third place colour carries meaning: which header
     of the KPI grid a card sits under. One hue per kind of header in
     KpiMetric::LAYOUT (a tab's own name for it reuses the hue: sales team
     and results share --group-sales). Two values per hue, from his palette:
     the ink is readable on white and goes on the header pill, the card
     border (tinted) and the network's lines; the glow is only ever drawn on
     the card's canvas (.kpi-card__fx), on the halos and the pulse. The
     palette's third value is its dark-mode ink and waits for a dark mode. */
  --group-leads: #1A5FA8;
  --group-leads-fx: #00FFFF;
  --group-calls: #B8156B;
  --group-calls-fx: #FF69B4;
  --group-rates: #9B1F8A;
  --group-rates-fx: #D400FF;
  --group-cash:  #157A62;
  --group-cash-fx: #1FCFA0;
  --group-ads:   #C4106E;
  --group-ads-fx: #FF1493;
  --group-sales: #6A0FC2;
  --group-sales-fx: #9B00FF;
  --group-payments: #0F6E9A;
  --group-payments-fx: #19B5E8;

  /* Rank 1 treatment — the other place colour carries meaning. */
  --gold: #b8860b;
  --gold-bg: #fdf6e3;
  --gold-line: #eadfc2;

  /* First place only. Second and third are plain — the redesign deliberately
     drops silver and bronze so gold stays the one colour that means something.
     --gold-tint backs the ranked-by column, --gold-wash the winner's card. */
  --gold-tint: #fdf9ee;
  --gold-wash: #fffdf6;
  --gold-deep: #8a6508;

  /* The animated podium (podium.css, 2026-09-16) brought medals back: a
     bright yellow for the winner's disc and crown — --gold is an ink-level
     text colour and reads muddy at 64px — plus a muted silver and bronze
     for second and third. Each medal has a disc gradient (colour → deep) and
     a step wash. The washes are pale enough that gold still reads as the
     one loud colour. Used nowhere else. */
  --gold-bright:      #f6c945;
  --gold-bright-deep: #c9862a;
  --gold-step:        #fae7a8;
  --silver:           #a8b0bc;
  --silver-deep:      #6f7885;
  --silver-step:      #e5e8ee;
  --bronze:           #d99a6c;
  --bronze-deep:      #a96a3b;
  --bronze-step:      #f3dcc7;

  /* The page-heading accent, and the only gradient in the design system.
     Pink to violet, flat 90deg — the wide four-stop gradient the old page
     files carried is retired. It touches the last word of a title, nothing
     else. */
  --grad-title: linear-gradient(90deg, #ff4f9a, #b85bff);

  /* The KPI trend line. One series, so it needs one hue rather than a scale,
     and it borrows the brand violet for the same reason --dot-overview does:
     the chart is not a team or a KPI group, so no section colour fits. */
  --chart-line: #b85bff;

  /* Compared lines on the same chart — one per member when two closers or
     setters are read against each other. A lead source draws in its own
     swatch colour instead, so these only cover the lines that have none.
     Six, because a comparison past six lines is unreadable anyway. */
  --series-1: #1f8a5b;
  --series-2: #4f7bff;
  --series-3: #ff7a3d;
  --series-4: #b85bff;
  --series-5: #ff4f9a;
  --series-6: #2bd4ff;

  /* The selected level of the ads table (source / account / campaign / ad
     set / ad). Violet rather than ink so the drill position reads apart
     from the display-mode tabs beside it, which select in ink. */
  --level-on:       #6d4aff;
  --level-on-bg:    #f7f4ff;
  --level-on-badge: #efe9ff;
  --level-on-line:  #d9d3ff; /* the same violet as a hairline: KPI card borders */
  --level-on-deep:  #5a3be6; /* the filled violet button's hover */

  /* On / off target, the analytics badges. The only place green and red
     carry meaning besides the destructive button. */
  --good:    #1f8a5b;
  --good-bg: #e9f5ef;
  --bad:     #c8102e;
  --bad-bg:  #fdecef;

  /* WhatsApp green, for the support card in the sidebar only. */
  --whatsapp-ink:        #128c4b;
  --whatsapp-bg:         #eafaf0;
  --whatsapp-line-hover: #b2e6c8;

  /* --- Shadows --- */
  --shadow-menu: 0 1px 2px rgba(10, 10, 10, .04), 0 24px 50px -24px rgba(10, 10, 10, .34);

  /* Resting card lift. Far lighter than --shadow-menu, which is for floating
     surfaces; a card sits on the page rather than above it. */
  --shadow-card: 0 2px 8px rgba(10, 10, 10, .06);
  --shadow-gold: 0 4px 10px -3px rgba(184, 134, 11, .4);
}
/* ------------------------------------------------------------------
   TYPE TOKENS
   ------------------------------------------------------------------ */


:root {

  /* --- Families --- */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Size scale ---
     Eight steps, chosen from what the app already leans on most:
     13px appears 120 times, 12px 62, 11px 60, 14px 57, 10px 38. */
  --text-xs:    10px;   /* dense table cells, badges          */
  --text-sm:    11px;   /* secondary labels                   */
  --text-md:    12px;   /* control labels, captions           */
  --text-base:  13px;   /* body default                       */
  --text-lg:    14px;   /* emphasised body, card names        */
  --text-xl:    16px;   /* section titles                     */
  --text-2xl:   20px;   /* page titles                        */
  --text-3xl:   26px;   /* hero figures (podium value)        */
  --text-4xl:   30px;   /* the winner's figure, one step above  */

  /* Mono uppercase micro-label used for column heads, eyebrows, keys.
     Deliberately below the scale — it is a different role, not a size. */
  --label-size: 9.5px;
  --label-tracking: .08em;

  /* --- Legacy fluid sizes (pre-redesign screens) ---
     Kept so existing components keep rendering. Do not use in new work. */
  --font-base: clamp(14px, 1.2vw, 16px);
  --font-sm: clamp(12px, 1vw, 12px);
  --font-lg: clamp(18px, 2vw, 24px);
}
/* ------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */
/* Element defaults and the tokens that are neither colour nor type.
   Colour lives in colors.css, typography in text.css. Nothing here is a
   component: the only class selectors permitted are the two global
   utilities at the bottom, and that list does not grow. */

:root {

  /* --- Spacing --- */
  --space-2: clamp(8px, 1vw, 12px);
  --space-3: clamp(12px, 1.2vw, 16px);

  /* --- Radii --- */
  --radius: 8px;        /* legacy */
  --radius-md: 10px;    /* controls, options */
  --radius-lg: 15px;    /* menus, panels     */
  --radius-xl: 16px;    /* cards             */

  /* --- Control height ---
     One height for every interactive control that can sit in a filter row —
     button, dropdown trigger, date-range picker — so a row of mixed controls
     lines up. Added because those three had drifted to 33/34/36px. */
  --control-h: 36px;

  /* --- Fixed widths --- */
  --auth-width: 285px;
  --field-width: 250px;
}

/* ------------------------------------------------------------------
   ELEMENT DEFAULTS
   ------------------------------------------------------------------ */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-blue);
  font-size: var(--font-base);
}

/* General page-heading font — matches the profile/settings H1 (Geist).
   Only sets the typeface, so each page keeps its own h1 size. */
h1 {
  font-family: "Geist", "Inter", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------
   GLOBAL UTILITIES — the only two in the app. Do not add a third.
   ------------------------------------------------------------------ */

/* Toggled by JS. The single permitted !important in the codebase: JS must
   only ever add or remove this class, never a styling one. */
.hidden {
  display: none !important;
}

.divider-vertical {
  width: 0;
  height: 20px;
  border-left: var(--border-standard);
  margin: 0 12px;
  display: inline-block;
  vertical-align: middle;
}
/* ------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------ */

.center-row {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* App-wide button component */

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: var(--border-standard);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-sm);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--text-blue, #483eff), #7c6cff);
  color: #fff;
  border: 0;
  padding: 5px 12px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.btn-primary:hover {
  color: #fff;
  filter: brightness(1.06);
}

.btn-danger {
  background: var(--danger);
  color: var(--bg);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 14px;
}

.btn-icon {
  min-width: 32px;
  padding: 6px 8px;
  text-align: center;
}

.btn-secondary {
  background: var(--bg);
  color: var(--gray-700);
  border: var(--border-standard);
}

.btn-secondary:hover {
  border: var(--border-standard);
  color: var(--gray-700);
  filter: brightness(1.05);
}

.btn-ghost {
  background: var(--bg);
  color: var(--primary-dark);
  border: 1px solid var(--text-blue);
}

.btn-ghost:hover {
  background: var(--gray-50);
}

/* ------------------------------------------------------------------
   NEW BUTTON COMPONENT — INCREMENTAL MIGRATION

   New views should use:
   .button
   .button--medium / .button--large
   .button--black / .button--white / .button--red

   Legacy button classes above remain unchanged while pages are
   migrated gradually.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   BASE BUTTON
   ------------------------------------------------------------------ */

/* The reset comes first and is the reason this block is tag-agnostic: the
   same classes land on <button>, <a>, and the <input type="submit"> that
   f.submit renders, and each of those arrives with different UA defaults
   for font, margin, background and border. Everything below the reset is
   the component proper. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* --- Reset --- */
  /* The app has no global border-box reset, and <a class="button"> would
     otherwise measure --control-h on top of its padding while <input
     type="submit"> (border-box in the UA sheet) measured it inclusive —
     which is what made Apply and Reset different heights. */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  appearance: none;

  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   BUTTON COLORS
   ------------------------------------------------------------------ */

.button--black {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.button--black:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

.button--white {
  background: #fff;
  border-color: var(--line-2);
  color: var(--ink);
}

.button--white:hover {
  background: var(--paper);
}

/* Destructive: white surface with red text, never a solid red fill.
   These three reds are the only values in this file with no token in
   base.css — nothing in :root is close. They stay literal until the
   destructive tokens are added there deliberately. */
.button--red {
  background: #fff;
  border-color: var(--line-2);
  color: #c8102e;
}

.button--red:hover {
  background: #fdeef0;
  border-color: #f2c9d0;
}

/* Affirmative: same white surface as --red, green text. Completing a reminder
   deletes the record, but it is the thing the reader wanted to do, so it is
   not dressed as a destructive action. */
.button--green {
  background: #fff;
  border-color: var(--line-2);
  color: var(--success);
}

.button--green:hover {
  background: var(--success-bg);
  border-color: var(--success);
}

/* Accent: white surface, violet text and border — the one action on a
   screen the reader is invited to take (Create subscription). Same violet
   as the ads levels, so it means "act here" everywhere it appears. */
.button--violet {
  background: #fff;
  border-color: var(--level-on);
  color: var(--level-on);
}

.button--violet:hover {
  background: var(--level-on-bg);
}

/* The same accent filled in: the one button on a screen the reader must
   press before leaving it (Copy prompt on the API page). */
.button--violet-fill {
  background: var(--level-on);
  border-color: var(--level-on);
  color: #fff;
}

.button--violet-fill:hover {
  background: var(--level-on-deep);
  border-color: var(--level-on-deep);
}

/* ------------------------------------------------------------------
   BUTTON SIZES
   ------------------------------------------------------------------ */

.button--medium {
  min-height: var(--control-h);
  padding: 9px 15px;
  font-size: 13px;
  border-radius: var(--radius-md);
}

/* Small: a secondary action inside a card header (Edit on an automation
   card), where a medium button outweighs the title beside it. */
.button--small {
  min-height: 28px;
  padding: 4px 10px;
  font-size: var(--text-md);
  border-radius: 8px;
}

/* 12px sits between --radius-md (10px) and --radius-lg (15px); there is no
   token for it, so it stays literal rather than being rounded to one that
   would change the shape. */
.button--large {
  padding: 12px 22px;
  font-size: 15px;
  border-radius: 12px;
}

/* Fills its container — a button stacked in a narrow panel rather than
   sitting in a row of them. */
.button--block {
  width: 100%;
}

/* ------------------------------------------------------------------
   BUTTON ICONS
   ------------------------------------------------------------------ */

.button__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Button group layout.

   button_to wraps its button in a <form>, so the form is a flex child
   here and has to be handled alongside the buttons themselves. That form
   carries .button-group__form, passed via button_to's form_class: — the
   wrapper is styled by class like every other part, not by tag.

   The doubled .button-group.button-group--stack-on-mobile selector is
   deliberate: buttons.css is required before subscriptions.css in the
   manifest, and .sub-card__footer already sets align-items and
   `form { display: inline }` at equal specificity. Without the extra
   class those later rules would win the tie and the mobile stack would
   silently not apply. */

.button-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-group__form {
  margin: 0;
}

@media (max-width: 600px) {
  .button-group.button-group--stack-on-mobile {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group.button-group--stack-on-mobile > .button,
  .button-group.button-group--stack-on-mobile > .button-group__form,
  .button-group.button-group--stack-on-mobile > .button-group__form > .button {
    width: 100%;
  }

  .button-group.button-group--stack-on-mobile > .button-group__form {
    display: block;
  }
}
/* ------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------ */

.form-grid {
  display: grid;
  gap: 8px;
  /* Reduced from 14px */
}

.form-grid label {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  /* Reduced from 5px */
  font-size: var(--font-sm);
}

.form-grid input:not([type="submit"]) {
  width: var(--field-width);
  max-width: 100%;
  padding: 10px 16px;
  border: var(--border-standard);
  border-radius: var(--radius);
  font-size: 14px;
}

.form-grid input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 6px 1px var(--border);
}

/* Horizontal form rows (used in modals/pages) */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.form-row--compact {
  gap: 50px;
  margin-bottom: 8px;
}

.form-field {
  flex: 1 1 0;
  min-width: 130px;
  max-width: 180px;
}

.form-row--compact .form-field {
  min-width: 140px;
}

.form-field--narrow {
  flex: 0 0 260px;
  max-width: 260px;
}

.form-field--auto {
  flex: 0 0 auto;
  min-width: auto;
}

.form-row--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 4px;
  /* Reduced from 8px */
  margin-bottom: 6px;
  /* Reduced from 12px */
}

@media (max-width: 768px) {
  .form-row--2 {
    grid-template-columns: 1fr;
  }
}

.form-field label {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
  /* Reduced from 4px */
}

.form-field--notes-wide {
  width: 100%;
  max-width: 100%;
}

.form-field--full {
  max-width: 100%;
  width: 100%;
}

.form-separator {
  border: none;
  border-top: var(--border-standard);
  margin: 12px 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 8px;
}

.input,
.select {
  width: 100%;
  padding: 8px 10px;
  border: var(--border-standard);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  /* Consistent line-height */
  height: 38px;
  /* Strict height matching */
  box-sizing: border-box;
}

input[type="datetime-local"].input {
  line-height: 1.5;
  height: 38px;
  padding: 8px 10px;
}

select.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.textarea {
  width: 100%;
  padding: 8px 10px;
  border: var(--border-standard);
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.textarea--notes-main {
  min-height: 80px;
  max-height: 50px;
}

.textarea--notes-modal {
  min-height: 120px;
  max-height: 300px;
}

/* Duration input (number + unit selector) */

.duration-input-row {
  display: flex;
  gap: 8px;
}

.duration-input-row__number {
  flex: 1;
}

.duration-input-row__unit {
  width: 110px;
  flex-shrink: 0;
}
/* ------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------ */

/* Every table in the app wears this. The redesign treatment: a hairline frame
   with a soft radius, mono micro-caps for the header, and no fill anywhere —
   the row content carries the page, the chrome stays quiet. */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  /* Deliberately NOT overflow: hidden. That would make the table its own
     clipping context, and the sticky identity columns below would stick to a
     box that never scrolls. The corner cells round themselves instead. */
}

/* Rounding the bottom cells so a hovered last row does not square off the
   frame's corners — the job overflow: hidden would otherwise do. */
.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-xl);
}

.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-xl);
}

/* The header is separated by its hairline, not by a fill. */
.table thead {
  background: transparent;
}

.table th {
  padding: 13px 14px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  text-align: left;
  color: var(--gray-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: 12px 14px;
  font-size: var(--text-base);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}

/* The first column breathes against the rounded corner. */
.table th:first-child,
.table td:first-child {
  padding-left: 20px;
}

.table tbody tr {
  transition: background 0.12s ease;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--paper);
}

/* A table that sits inside a panel which already draws the frame — the panel
   owns the border and the radius, the table just fills it. */
.table--flush {
  border: none;
  border-radius: 0;
}

.table-row--clickable {
  cursor: pointer;
}

/* --- Cell treatments --- */

/* Row numbers and dates: present but secondary, so the name carries the row.
   Dates stay in the sans face: small mono digits were the hardest thing to
   read on the calls table. */
.table__index,
.table__date {
  color: var(--gray-2);
}

.table__index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* --- Frozen identity columns --- */

/* Opt in on the <table>, not per cell: `.table .table--frozen` freezes the
   first column, `--frozen-2` the first two (a row number or checkbox followed
   by the name). Nothing is added to the rows, so a table gains the behaviour
   by gaining one class.

   Position is the meaning here — "the first column" is exactly what is being
   said — so :first-child is the honest selector, the same way data_table.css
   already writes it. */

.table--frozen th:first-child,
.table--frozen td:first-child,
.table--frozen-2 th:first-child,
.table--frozen-2 td:first-child,
.table--frozen-2 th:nth-child(2),
.table--frozen-2 td:nth-child(2) {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

/* The lead column of a --frozen-2 pair is a counter or a checkbox, so it gets
   a pinned width — `width` alone is only a minimum to the browser, which will
   stretch the column to share out spare table width, and the second column
   would then land short of it and let the scrolling cells show through the
   gap. Override --frozen-lead on the table if that column is not 56px. */
.table--frozen-2 {
  --frozen-lead: 56px;
}

.table--frozen-2 th:first-child,
.table--frozen-2 td:first-child {
  box-sizing: border-box;
  width: var(--frozen-lead);
  min-width: var(--frozen-lead);
  max-width: var(--frozen-lead);
}

.table--frozen-2 th:nth-child(2),
.table--frozen-2 td:nth-child(2) {
  left: var(--frozen-lead);
}

/* The hairline that says "the table continues under here" — without it the
   join between the frozen columns and the scrolling ones is invisible. */
.table--frozen th:first-child,
.table--frozen td:first-child,
.table--frozen-2 th:nth-child(2),
.table--frozen-2 td:nth-child(2) {
  box-shadow: 1px 0 0 var(--line);
}

/* Frozen cells are opaque, so they need the row's hover applied to them
   directly or they stay white while the rest of the row tints. */
.table--frozen tbody tr:hover td:first-child,
.table--frozen-2 tbody tr:hover td:first-child,
.table--frozen-2 tbody tr:hover td:nth-child(2) {
  background: var(--paper);
}


.table__date {
  font-size: var(--text-md);
  color: var(--gray);
}

/* A person who is not the subject of the row — the rep on a call, not the
   contact. Plain text, one step down from the name beside it. */
.table__who {
  color: var(--gray);
}

/* A name column that must not push the table wider than it has to be. */
.table__name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An address is the longest thing in any row and the least often read in
   full — it truncates, and the copy button beside it still carries the whole
   value. Inline-block so the ellipsis works next to that button. */
.table__email {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.table-link-editable {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  text-underline-offset: 2px;
  transition: color 0.12s ease;
}

.table-link-editable:hover {
  color: var(--text-blue);
  text-decoration: underline;
}

.actions-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.table-empty {
  padding: 12px;
  text-align: center;
  color: var(--muted);
}

/* ------------------------------------------------------------------
   INLINE NOTES (Generic table inline notes)
   ------------------------------------------------------------------ */

.notes-cell {
  position: relative;
}

.lead-notes-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.notes-preview {
  display: inline-block;
  cursor: pointer;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  font-size: 13px;
  color: var(--muted);
}

.notes-preview--empty {
  font-style: italic;
  color: var(--gray-400);
}

.notes-popup {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  width: 320px;
  padding: 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.notes-popup textarea {
  width: 100%;
  min-height: 110px;
  padding: 8px 10px;
  border: 1px solid var(--text-blue);
  border-radius: 6px;
  resize: vertical;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
}

.notes-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.notes-popup-cancel {
  padding: 6px 12px;
  border: 1px solid var(--gray-300);
  background: var(--bg);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-sm);
}

.notes-popup-save {
  padding: 6px 12px;
  border: none;
  background: var(--text-blue);
  color: var(--bg);
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-sm);
}
/* ------------------------------------------------------------------
   KPI INFO — the "i" mark on a KPI and its tooltip
   ------------------------------------------------------------------ */
/* Shared by the KPI cards and the Customize KPIs list; the markup is
   kpis/_info_tip.html.erb. Ported from the "KPI info tooltip" mockup:
   the metric's name, a plain description, then how it is calculated in a
   formula box. Hover or focus opens it; nothing else does. */

.kpi-info {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: none;
}

.kpi-info__mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-2);
  cursor: help;
  transition: color .12s ease, border-color .12s ease;
}

.kpi-info:hover .kpi-info__mark,
.kpi-info__mark:focus-visible {
  outline: none;
  color: var(--ink);
  border-color: var(--ink);
}

/* Fixed, so a card's overflow: hidden and a scrolling list leave it alone.
   kpi_info_controller sets top/left to the mark's corner on open (with no
   offsets the box stays where the mark was before the list scrolled). The
   transform then hangs it under the mark, its right edge a little past the
   mark's. */
.kpi-info__tip {
  display: none;
  position: fixed;
  z-index: 300;
  width: 320px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px -8px rgba(10, 10, 10, .22), 0 2px 6px rgba(10, 10, 10, .06);
  transform: translate(calc(-100% + 24px), 28px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.011em;
  text-align: left;
  text-transform: none;
  white-space: normal;
  color: var(--ink);
  cursor: default;
  pointer-events: none;
}

/* The arrow, under the mark. */
.kpi-info__tip::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 11px;
  height: 11px;
  border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
  background: #fff;
  transform: rotate(45deg);
}

.kpi-info:hover .kpi-info__tip,
.kpi-info:focus-within .kpi-info__tip {
  display: block;
  animation: kpi-info-pop .14s ease-out;
}

@keyframes kpi-info-pop {
  from { opacity: 0; transform: translate(calc(-100% + 24px), 24px); }
  to   { opacity: 1; transform: translate(calc(-100% + 24px), 28px); }
}

.kpi-info__title {
  display: block;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lg);
  font-weight: 600;
}

.kpi-info__text {
  display: block;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray);
  text-wrap: pretty;
}

/* The question the formula answers, then the formula itself. */
.kpi-info__how {
  display: block;
  margin-top: 11px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-2);
}

.kpi-info__formula {
  display: block;
  margin-top: 6px;
  padding: 9px 11px;
  /* The brand violet, the same the drill levels use, so the formula reads
     as the app's own voice rather than a link. */
  border: 1px solid var(--level-on-line);
  border-radius: 8px;
  background: var(--level-on-bg);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--level-on);
}
/* ------------------------------------------------------------------
   KPI CARDS
   ------------------------------------------------------------------ */

.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 0 24px;
}

.kpi-card {
  flex: 1 1 190px;
  max-width: 240px;
  padding: 14px 16px;
  border-radius: 10px;
  border: var(--border-standard);
  background: var(--bg);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi-card-label,
.kpi-card-value {
  color: var(--black);
}

.kpi-card-label {
  margin-right: 8px;
  font-size: 13px;
  text-transform: lowercase;
  color: var(--text-blue);
}

.kpi-card-value {
  font-size: 14px;
  font-weight: 400;
}

.kpi-toolbar {
  display: flex;
  justify-content: flex-start;
  padding: 0 24px;
  margin-top: 8px;
}

.kpi-grid-empty {
  padding: 16px 0;
  color: var(--text-muted, #888);
  font-size: 13px;
}

/* ------------------------------------------------------------------
   KPI TREND CHART
   ------------------------------------------------------------------ */

/* Framed like the breakdown table below it and the calls table elsewhere: a
   hairline box inset 24px, rather than a band running edge to edge. */
.chart-card {
  margin: 20px 24px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
}

.chart-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: none;
}

.chart-card-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

.chart-card-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.chart-card-form__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-card-form__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

/* Compare toggle */

.compare-toggle__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-blue);
  white-space: nowrap;
}

.filter-field--chart {
  max-width: 180px;
}

.filter-input--inline {
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
  border-radius: 6px;
}

.chart-card-body {
  padding: 20px;
  height: 240px;
  position: relative;
}

.chart-card-body--donut {
  height: 260px;
}

/* ------------------------------------------------------------------
   CHART PLOT (server-rendered SVG trend line)
   ------------------------------------------------------------------ */
/* The SVG alternative to the Chart.js canvas. Geometry comes from
   LineChartHelper in viewBox units; everything visual is decided here.
   preserveAspectRatio="none" stretches the box to the card width, so every
   stroke declares vector-effect or it would stretch with it, and text and
   dots are HTML laid over the box, since they cannot be protected. */

/* The hover markers are positioned as a percentage of this box, so it must be
   exactly the box the SVG stretches into — no padding of its own. */
.chart-plot-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart-plot {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-plot__grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-plot__grid--baseline {
  stroke: var(--line-2);
}

.chart-plot__axis {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-2);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Right-aligned in the 64-unit gutter left of the plot, centred on its line. */
.chart-plot__axis--y {
  right: calc(100% - 56 / 940 * 100%);
  transform: translateY(-50%);
}

/* Centred under its point, in the row below the zero line. */
.chart-plot__axis--x {
  top: calc(220 / 230 * 100%);
  transform: translate(-50%, -50%);
}

/* The area fill: the line's colour fading to nothing at the zero line. */
.chart-plot__stop {
  stop-color: var(--chart-line);
}

.chart-plot__stop--top {
  stop-opacity: 0.14;
}

/* --series-color is set inline on a compared line; alone, a line is the
   brand violet. */
.chart-plot__line {
  fill: none;
  stroke: var(--series-color, var(--chart-line));
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chart-plot__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1.6px solid var(--series-color, var(--chart-line));
}

/* --- Hover marker + tooltip --- */

/* An invisible disc over each dot, big enough to aim at with a mouse. */
.chart-plot__marker {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
}

.chart-plot__tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  background: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  transition: opacity 0.12s ease;
}

.chart-plot__marker:hover .chart-plot__tip {
  opacity: 1;
}

.chart-plot__tip-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.chart-plot__tip-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* The dot the tooltip belongs to, filled in while it is open. */
.chart-plot__marker:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--series-color, var(--chart-line));
}

/* --- Legend, only when lines are compared --- */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0 0 0 64px;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chart-legend__swatch {
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--series-color, var(--chart-line));
}

/* ------------------------------------------------------------------
   PRODUCTS LAYOUT (list left, donut right)
   ------------------------------------------------------------------ */

.products-layout {
  display: flex;
  align-items: stretch;
}

.products-layout__left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  border-right: var(--border-standard);
  min-width: 0;
}

.products-layout__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}

.products-layout__right {
  flex: 1 1 0;
  position: relative;
  padding: 20px;
  min-height: 280px;
}

/* Donut legend (ranked list) */

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.donut-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: var(--border-standard);
}

.donut-legend__item:last-child {
  border-bottom: none;
}

.donut-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend__label {
  color: var(--black);
  font-weight: 500;
}

.donut-legend__value {
  color: var(--text-blue);
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}


@media (max-width: 640px) {
  /* Matches .data-table--card, so the chart and the table stay aligned. */
  .chart-card {
    margin-inline: 16px;
  }

  .products-layout {
    flex-direction: column-reverse;
  }

  .products-layout__left {
    border-right: none;
    border-top: var(--border-standard);
  }

  .products-layout__right {
    flex: 0 0 220px;
  }
}

.view-toggle--small {
  margin-left: auto;
}

.view-toggle--small .view-toggle__btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* ------------------------------------------------------------------
   KPI TABLE (Monthly Breakdown)
   ------------------------------------------------------------------ */

.kpi-table {
  border: none;
  border-radius: 0;
}

.kpi-table thead {
  background: var(--gray-50);
}

.kpi-table th,
.kpi-table td {
  border-right: var(--border-standard);
}

.kpi-table th:last-child,
.kpi-table td:last-child {
  border-right: none;
}

.kpi-table th {
  color: var(--gray-400);
  border-bottom: var(--border-standard);
  white-space: nowrap;
}

.kpi-table__current {
  background-color: transparent;
}

.chart-card:has(.kpi-table) {
  overflow-x: auto;
  margin: 20px 0 40px;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* ------------------------------------------------------------------
   KPI TREND TABLE (Period Comparison)
   ------------------------------------------------------------------ */

.trend-card {
  margin: 20px 24px 0;
  border: var(--border-standard);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

.trend-card__header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: var(--border-standard);
}

.trend-card__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
}

.trend-card .table {
  border: none;
  border-radius: 0;
}

.trend-cell--muted {
  color: var(--gray-400);
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.trend-badge--up {
  color: #059669;
  background: #ecfdf5;
}

.trend-badge--down {
  color: var(--danger);
  background: #fef2f2;
}

.trend-badge--flat {
  color: var(--gray-400);
  background: var(--gray-50);
}

/* ------------------------------------------------------------------
   VIEW TOGGLE (Basic / Advanced)
   ------------------------------------------------------------------ */

.view-toggle-row {
  padding: 0 24px;
  margin-top: 16px;
}

.view-toggle {
  display: inline-flex;
  gap: 0;
  border: var(--border-standard);
  border-radius: 8px;
  overflow: hidden;
}

.view-toggle__btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #888);
  text-decoration: none;
  background: var(--bg);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-toggle__btn:hover {
  background: var(--light-hover, #f3f3ff);
  text-decoration: none;
}

.view-toggle__btn--active {
  background: var(--text-blue);
  color: #fff;
}

.view-toggle__btn--active:hover {
  background: var(--text-blue);
  color: #fff;
}

/* ------------------------------------------------------------------
   KPI SECTION HEADERS
   ------------------------------------------------------------------ */

/* Section header — dot + title + hairline + card count.
   The ONLY colored structural element; cards stay neutral. */
.kpi-section-header {
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin-top: 38px;
  margin-bottom: 14px;
}

.kpi-section-header:first-child {
  margin-top: 16px;
}

.kpi-section-header__left {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}

.kpi-section-header__left::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ececee;
  margin-left: 4px;
}

.kpi-section-count {
  margin-left: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #9aa0a8;
  text-transform: none;
  flex: none;
}

.kpi-section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kpi-section-dot--calls {
  background: #4f7bff;
}

.kpi-section-dot--rates {
  background: #b85bff;
}

.kpi-section-dot--cash {
  background: #ff2d95;
}

.kpi-section-dot--attr {
  background: #b45309;
}

.kpi-section-dot--leads {
  background: #1f8a5b;
}

.kpi-section-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a0a0a;
}

.kpi-section-desc {
  font-size: 12px;
  color: #8a85a8;
}

/* ------------------------------------------------------------------
   BASIC KPI GRID (design-handoff card style)
   ------------------------------------------------------------------ */

/* The columns cap at 320px instead of splitting the panel four ways: past
   that width the cards only got emptier. Leftover space stays to the right. */
/* Trial of the mockup's card: fluid columns from 260px, a wider gap, a
   larger name and figure, and a soft shadow on hover. */
.kpi-grid--basic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 16px;
  padding: 0 24px;
}

@media (max-width: 480px) {
  .kpi-grid--basic {
    grid-template-columns: 1fr;
  }
}

/* Neutral card — no accent bar, no badge behind the label; the section
   header carries the color instead. Overflow stays visible: a drillable
   card lifts on hover (a transform), which makes it the containing block
   of the info tooltip, and a clip here would cut the tooltip at the card's
   edge. Nothing on the card needs clipping. */
.kpi-grid--basic .kpi-card {
  position: relative;
  overflow: visible;
  flex: none;
  max-width: none;
  aspect-ratio: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  border-radius: 12px;
  /* The edge is the group's ink at 28% on white (60% on hover). A grid with
     no hue keeps the plain hairline. */
  border: 1px solid color-mix(in srgb, var(--card-hue, var(--level-on-line)) 28%, #fff);
  padding: 20px 22px;
  background: #fff;
  cursor: default;
  /* Its own stacking context, so the canvas can sit at z-index -1: behind
     the label and value, but still above the card's white background. */
  isolation: isolate;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.kpi-grid--basic .kpi-card:hover {
  /* Above its siblings and the sidebar (z-index 10, nav.css): this makes
     the card a stacking context, so the tooltip it holds can only ever be
     as high as the card itself. */
  z-index: 20;
  /* kpi_drilldown.css paints its own border on a drillable card's hover;
     this rule is more specific and keeps the ink tint instead. */
  border-color: color-mix(in srgb, var(--card-hue, var(--level-on-line)) 60%, #fff);
  box-shadow: 0 10px 30px -20px rgba(10, 10, 10, 0.3);
}

/* The effect layer: the right 62% of the card, clipped to the card's
   corners (the card itself keeps overflow visible for the tooltip), and
   faded in from the left so it only ever fills the white space beside the
   value. kpi_fx_controller draws the swaying network on the canvas in the
   grid's --card-hue and --card-fx colours. */
.kpi-card__fx {
  position: absolute;
  inset: 0;
  left: 38%;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.85) 65%, #000);
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.85) 65%, #000);
}

.kpi-card__fx-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Which hue a grid's cards carry: the same key-to-hue map as the header
   pills (.kpi-group__pill--*). --card-hue tints the border; the canvas
   reads both. */
.kpi-grid--leads,
.kpi-grid--volume,
.kpi-grid--setter_team { --card-hue: var(--group-leads); --card-fx: var(--group-leads-fx); }
.kpi-grid--calls       { --card-hue: var(--group-calls); --card-fx: var(--group-calls-fx); }
.kpi-grid--rates,
.kpi-grid--ad_rates,
.kpi-grid--all_time    { --card-hue: var(--group-rates); --card-fx: var(--group-rates-fx); }
.kpi-grid--ads,
.kpi-grid--costs       { --card-hue: var(--group-ads); --card-fx: var(--group-ads-fx); }
.kpi-grid--closer_team { --card-hue: var(--group-sales); --card-fx: var(--group-sales-fx); }
.kpi-grid--cash,
.kpi-grid--purchases   { --card-hue: var(--group-cash); --card-fx: var(--group-cash-fx); }
.kpi-grid--payments    { --card-hue: var(--group-payments); --card-fx: var(--group-payments-fx); }

/* The card carries no colour of its own: the group header's dot is the only
   hue. Reading order is name, then value, then status — so the label is ink
   and the figure steps back to gray. */

/* The same type as the breakdown table's column header (.analytics__th),
   set in capitals so the name is the first thing read on the card. */
/* The name row, from the mockup: sans 13px semibold ink, the same type as
   a table's name cell, with the on/off pill at the row's far end. */
.kpi-grid--basic .kpi-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-right: 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--ink);
}

/* The card is capped at 320px, so a long name wraps rather than ending in an
   ellipsis — the card is a column and just gets taller. */
.kpi-card-label__text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* The value row: mono 22px semibold ink, the goal quieter beside it. */
.kpi-grid--basic .kpi-card-value {
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

/* Ads section dot */
.kpi-section-dot--ads {
  background: #ff7a3d;
}

/* "Coming soon" badge next to section label */
.kpi-section-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
}

/* Coming-soon card styling */
.kpi-card--coming-soon {
  opacity: 0.55;
  pointer-events: none;
}

.kpi-card-value--muted {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #8a85a8 !important;
  letter-spacing: 0 !important;
}

/* ------------------------------------------------------------------
   Projection footer (when KPI has an active target)
   ------------------------------------------------------------------ */

.kpi-card--with-projection {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.kpi-card--with-projection .kpi-card-label,
.kpi-card--with-projection .kpi-card-value {
  display: flex;
  align-items: center;
}

/* The foot under the value: a hairline, then the way into the records. */
.kpi-card__foot {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 8px;
  border-top: var(--border-standard);
}

/* The provider mark and the "i", at the foot's far right. */
.kpi-card__marks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* "/ target" shown inline next to the current value (mirrors member overview) */
.kpi-card-target {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 6px;
  font-feature-settings: "tnum";
}

.kpi-card-target__slash {
  font-weight: 300;
  color: var(--gray-2);
}

.kpi-card-target__val {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray-2);
}

/* The on/off pill on the name row, never wrapping. */
.kpi-card__pace-status {
  flex: none;
  padding: 5px 9px;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kpi-card__pace-status--on-target,
.kpi-card__pace-status--on-pace          { color: var(--good); background: var(--good-bg); }
.kpi-card__pace-status--off-target,
.kpi-card__pace-status--off-pace         { color: var(--bad);  background: var(--bad-bg); }
.kpi-card__pace-status--not-started      { color: var(--gray); background: var(--paper); }


/* ------------------------------------------------------------------
   KPI SECTION HEAD
   ------------------------------------------------------------------ */
/* The row that introduces the KPI grid: a mono micro-label, a hairline
   that fills the gap, and the Customize control parked at the end of it.
   It replaces the button that used to sit in .page-header-actions — the
   control belongs next to the grid it edits, not next to the page name. */

.kpi-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  /* Same 24px inset as .kpi-grid, so the label and its rule start where the
     cards and the breakdown table start. */
  padding-inline: 24px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray-2);
}

.kpi-section-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.kpi-section-head__customize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.kpi-section-head__customize:hover {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--gray-2);
}

.kpi-section-head__customize:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

.kpi-section-head__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   KPI GROUP HEADER
   ------------------------------------------------------------------ */
/* One per KpiMetric::LAYOUT subsection that has active cards: a tinted
   pill carrying the group's dot and name in the group colour. The tint is the same 10% mix the
   customise menu heads use (.analytics__menu-head--*). */

.kpi-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0 24px;
}

.kpi-group__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
}

/* The dot takes the pill's text colour, so one modifier colours both. */
.kpi-group__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.kpi-group__pill--leads      { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.kpi-group__pill--calls      { color: var(--group-calls); background: color-mix(in srgb, var(--group-calls) 10%, #fff); }
.kpi-group__pill--rates      { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.kpi-group__pill--ad_rates      { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.kpi-group__pill--ads        { color: var(--group-ads); background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.kpi-group__pill--costs      { color: var(--group-ads); background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.kpi-group__pill--closer_team { color: var(--group-sales); background: color-mix(in srgb, var(--group-sales) 10%, #fff); }
.kpi-group__pill--volume     { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.kpi-group__pill--setter_team { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.kpi-group__pill--cash       { color: var(--group-cash); background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.kpi-group__pill--purchases  { color: var(--group-cash); background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.kpi-group__pill--payments   { color: var(--group-payments); background: color-mix(in srgb, var(--group-payments) 10%, #fff); }
.kpi-group__pill--all_time   { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }

/* The grid follows its own header, so it drops the standalone top margin. */
.kpi-group + .kpi-grid--basic {
  margin-top: 14px;
}

/* ------------------------------------------------------------------
   KPI BREAKDOWN
   ------------------------------------------------------------------ */
/* The row label in the breakdown table under the cards. The table itself is
   the shared .data-table component; this is only the first column's content,
   which carries a colour swatch when the dimension is lead sources. */

/* A source name stays on one line — "You Tube" wrapping to two made the row
   taller than every other row in the table. */
.kpi-breakdown__row-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.kpi-breakdown__swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

/* Unattributed records. Grey rather than a hue: it is the absence of a source,
   not another one, and colour in this app only ever carries meaning. */
.kpi-breakdown__swatch--none {
  background: var(--gray-2);
}

/* The page's own totals, so it reads as a summary rather than one more row. */
.kpi-breakdown__total .data-table__cell {
  font-weight: 600;
  border-top: 1px solid var(--line-2);
}

/* Ads filter row: a month stepper instead of a date range, since ad budget is
   stored per calendar month. Matches .filter-row-list's inset and rhythm. */
.kpi-filters--month {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 30px 24px;
}

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

/* Unattributed traffic has no source to bill spend against, so its budget
   cell is a dash rather than a field. */
.kpi-breakdown__no-budget {
  color: var(--gray-2);
}

/* The marks at the end of a card's name row: the provider's logo when the
   number is a provider's, and the "i" that carries the description. They
   never shrink; the name wraps instead. */
/* ------------------------------------------------------------------
   ANALYTICS
   ------------------------------------------------------------------ */
/* The manager's one-page analytics view (/kpis/:section): a title, one
   tab per section, and a panel holding the display-mode tabs, the filter
   toolbar, and whichever of table / cards / chart is showing.

   Ported from the "Manager Admin View" mockup. Every value is a token from
   colors.css / text.css / base.css; the only literals are the mockup's own
   geometry (paddings, radii it invented, the 4-column card grid).

   JS: display_mode_controller.js toggles `hidden` on the three bodies and
   sets aria-pressed on the mode tabs; source_filter_controller.js opens and
   closes the toolbar menus. Neither adds a styling class. */

/* --- Root --- */

.analytics {
  box-sizing: border-box;
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 24px 48px;
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: -.011em;
}

/* --- Title + section tabs --- */

.analytics__titlebar {
  display: flex;
  align-items: flex-end;
  gap: 34px;
}

.analytics__title {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.analytics__views {
  display: flex;
  gap: 26px;
  margin-top: 18px;
  border-bottom: 1px solid var(--line);
}

.analytics__vtab {
  position: relative;
  padding: 8px 2px 12px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray-2);
  text-decoration: none;
  cursor: pointer;
}

.analytics__vtab:hover {
  color: var(--ink);
  text-decoration: none;
}

.analytics__vtab--on {
  color: var(--ink);
  font-weight: 600;
}

.analytics__vtab--on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}

/* --- Panel --- */

/* No overflow: hidden here — the toolbar's picker menus open past the
   panel's bottom edge when the table is short. The scrolling table rounds
   its own bottom corners instead. */
/* No frame of its own: the cards, the table and the chart sit on the page. */
.analytics__panel {
  margin-top: 20px;
}

.analytics__panelbar,
.analytics__tbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

/* The panel's own bar (mode tabs, goals, customize) breathes a little more
   than the level strips below it. Its hairline sits above the bar, close
   to the tabs, with the filters open above it; the chart, the cards and
   the table follow it with no line of their own. */
.analytics__panelbar { padding-block: 18px; border-bottom: none; border-top: 1px solid var(--line); }

/* The ads table's level strip (traffic source, ad account, campaign…): a
   line above separates it from the panel bar, and the shared line below
   from the table. */
.analytics__tbar { padding: 18px 20px; border-top: 1px solid var(--line); }

/* The filter bar stands above the panel with no frame or line of its own;
   the panel bar's hairline under it is the divider. The ads table's level
   strip keeps the plain .analytics__tbar inside the panel. */
.analytics__tbar--filters {
  margin-top: 24px;
  padding: 14px 16px;
  border-top: none;
  border-bottom: none;
}

.analytics__sp { flex: 1; }

/* The Traffic sources tab's mark: the three fixed decoration colours of
   the Sources filter (source_picker.css), never data-driven. */
.analytics__tab-dots { flex: none; }
.analytics__tab-dots circle:nth-child(1) { fill: #4f7bff; }
.analytics__tab-dots circle:nth-child(2) { fill: #ff2d95; }
.analytics__tab-dots circle:nth-child(3) { fill: #b85bff; }

/* --- Small tabs (display mode, ads levels) --- */

.analytics__tabs {
  display: flex;
  gap: 6px;
}

.analytics__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.011em;
  color: var(--gray);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.analytics__tab:hover {
  color: var(--ink);
  text-decoration: none;
}

.analytics__tab[aria-pressed="true"],
.analytics__tab[aria-current="page"] {
  color: var(--ink);
  border-color: var(--ink);
}

/* The picked view (Cards, Table, Chart, Traffic sources) wears the same
   violet as the picked level below it: edge, tint, name and icon (the
   icons draw in currentColor; the traffic dots keep their own colours). */
.analytics__tab[aria-pressed="true"] {
  color: var(--level-on);
  border-color: var(--level-on);
  background: var(--level-on-bg);
}

.analytics__tab--disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* The ads-table levels: an icon before the label, and the current one in
   violet. Doubled with [aria-current] so it beats the ink rule above. */
.analytics__tab--level svg { color: var(--gray-2); flex: none; }

.analytics__tab--level[aria-current="page"] {
  color: var(--level-on);
  border-color: var(--level-on);
  background: var(--level-on-bg);
}

.analytics__tab--level[aria-current="page"] svg { color: var(--level-on); }

.analytics__tab--level[aria-current="page"] .analytics__tab-n {
  color: var(--level-on);
  background: var(--level-on-badge);
}

.analytics__tab-n {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gray-2);
}

/* The "New" mark on a tab that just landed (Traffic sources). Violet like
   the current ads level, so it reads as a highlight, not a count. */
.analytics__tab-new {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--level-on-badge);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--level-on);
}

/* --- Buttons --- */

.analytics__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.analytics__btn:hover {
  background: var(--paper);
  text-decoration: none;
}

.analytics__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .12);
}

.analytics__btn--black {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.analytics__btn--black:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

/* --- Toolbar menus --- */

.analytics__dd { position: relative; }

.analytics__f-input {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.011em;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease;
}

.analytics__f-input:hover { background: var(--paper); }

.analytics__f-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .12);
}

.analytics__f-icon { color: var(--gray); flex: none; }

.analytics__f-val { font-weight: 600; }

.analytics__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  box-sizing: border-box;
  width: 240px;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-menu);
}

.analytics__menu--wide { width: 300px; }

.analytics__menu-head {
  padding: 8px 10px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* A KPI group's head in the chart's KPI menu: a small band in the group's
   own colour, the one its dot carries on the cards, at a tenth of strength. */
.analytics__menu-head--group {
  margin: 6px 2px 3px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: var(--label-size);
  font-weight: 600;
}

.analytics__menu-head--leads      { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.analytics__menu-head--calls      { color: var(--group-calls); background: color-mix(in srgb, var(--group-calls) 10%, #fff); }
.analytics__menu-head--rates      { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.analytics__menu-head--ad_rates      { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.analytics__menu-head--ads        { color: var(--group-ads); background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.analytics__menu-head--costs      { color: var(--group-ads); background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.analytics__menu-head--closer_team { color: var(--group-sales); background: color-mix(in srgb, var(--group-sales) 10%, #fff); }
.analytics__menu-head--volume     { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.analytics__menu-head--setter_team { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.analytics__menu-head--cash       { color: var(--group-cash); background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.analytics__menu-head--purchases  { color: var(--group-cash); background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.analytics__menu-head--payments   { color: var(--group-payments); background: color-mix(in srgb, var(--group-payments) 10%, #fff); }
.analytics__menu-head--all_time   { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }

.analytics__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.analytics__menu-item:hover {
  background: var(--paper);
  text-decoration: none;
}

.analytics__menu-item input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ink);
}

/* A preset that is a link rather than a radio: the dot is drawn so the
   row reads like its radio neighbours. */
.analytics__menu-dot {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
}

.analytics__menu-item--on .analytics__menu-dot {
  border: 4px solid var(--ink);
}

/* --- Trend --- */

.analytics__trend {
  border-bottom: 1px solid var(--line);
}

/* The plot and, when lines are compared, their names in a column on the
   right; the plot takes the rest of the width. */
.analytics__trend-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 14px 18px 16px;
}

.analytics__chart {
  display: block;
  width: 100%;
  height: auto;
}

.analytics__grid { stroke: var(--line); stroke-width: 1; }

.analytics__axis {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--gray-2);
}

/* --series-color is set inline on a compared line; alone, a line is the
   brand violet. */
.analytics__area { fill: url(#analytics-fill); stroke: none; }

.analytics__stop { stop-color: var(--chart-line); }

.analytics__line {
  fill: none;
  stroke: var(--series-color, var(--chart-line));
  stroke-width: 2;
}

.analytics__dot {
  fill: #fff;
  stroke: var(--series-color, var(--chart-line));
  stroke-width: 1.6;
}

/* --- Hover value --- */

/* Capped and centred: the plot keeps its viewBox shape, so on a wide
   screen an uncapped one grows tall as well as wide. */
.analytics__plot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 1200px;
  margin-inline: auto;
}

/* An invisible disc over each dot, big enough to aim at. */
.analytics__marker {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
}

/* The dot it belongs to, filled in while the tip is open. */
.analytics__marker:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--series-color, var(--chart-line));
}

.analytics__tip {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: var(--radius-md);
  background: var(--ink);
  box-shadow: var(--shadow-menu);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.analytics__marker:hover .analytics__tip { opacity: 1; }

.analytics__tip-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.analytics__tip-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.analytics__legend {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  max-width: 220px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.analytics__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Under the panel's width the names go back beneath the plot. */
@media (max-width: 900px) {
  .analytics__trend-body { flex-direction: column; }
  .analytics__legend { flex-direction: row; flex-wrap: wrap; max-width: none; gap: 14px; }
}

.analytics__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--series-color, var(--chart-line));
}

.analytics__trend-empty {
  margin: 0;
  padding: 28px 18px;
  font-size: var(--text-base);
  color: var(--gray);
  text-align: center;
}

/* --- KPI cards --- */
/* The cards themselves are .kpi-group / .kpi-grid--basic / .kpi-card from
   kpis.css; this is only the body that the display mode shows or hides.
   The first group header carries a 32px top margin of its own, so the body
   pads the bottom only. */

.analytics__cards { padding-bottom: 24px; }

/* --- Table --- */

/* The table scrolls inside its own box, both ways, so the header row can
   stay pinned at the top while the rows go by (a sticky header only holds
   inside the element that scrolls, and this one must scroll sideways too).
   The cap leaves room for the top bar and the toolbar above the table. */
.analytics__tscroll {
  overflow: auto;
  max-height: calc(100vh - 220px);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.analytics__table {
  width: 100%;
  border-collapse: collapse;
}

.analytics__th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--gray);
  text-align: right;
  white-space: nowrap;
  user-select: none;
}

.analytics__th:last-child { border-right: none; }

/* A metric header a manager can drag to reorder the columns. Hovering
   lifts it a little; while a drag runs, every cell of that column is
   tinted (.analytics__lifted) and the pointer stays a fist. */
.analytics__th--draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: background .12s ease, box-shadow .12s ease;
}

.analytics__th--draggable:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.analytics__lifted { background: var(--level-on-bg); }

.analytics-dragging { cursor: grabbing; }

/* The copy of the header that rides under the pointer during a drag: a
   small card on the floating surface, never in the way of the pointer. */
.analytics__ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-menu);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}

/* The grip before a draggable header, the same mark the customize modal
   uses on its cards; faint until the header is hovered. */
.analytics__grip {
  display: inline-block;
  margin-right: 6px;
  color: var(--gray-2);
  font-size: var(--text-xl);
  line-height: 1;
  vertical-align: -2px;
  transition: color .12s ease;
}

.analytics__th--draggable:hover .analytics__grip { color: var(--ink); }

.analytics__td {
  height: 38px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
}

.analytics__td:last-child { border-right: none; }

/* The label column is sticky so a wide table keeps its names in view. */
.analytics__th--first,
.analytics__td--first {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid var(--line-2);
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

/* The corner cell is pinned both ways and sits above the row labels
   scrolling under it. Declared after .analytics__th to win the tie. */
.analytics__th.analytics__th--first {
  z-index: 4;
}

.analytics__td--first {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analytics__tr { transition: background .12s ease; }

.analytics__tr:hover,
.analytics__tr:hover .analytics__td--first { background: var(--paper); }

/* A ticked row in the Meta table stays tinted, so the selection that will
   narrow the next level can be read off the table without the checkboxes.
   Declared after hover so it wins the tie. */
.analytics__tr--picked .analytics__td,
.analytics__tr--picked .analytics__td--first { background: var(--line); }

/* A divider between the ads table's groups (ad networks, organic platforms,
   custom sources): the header's own type on the violet the level tabs use,
   no numbers. Not an .analytics__tr, so nothing that counts rows counts it. */
.analytics__group-label {
  padding: 7px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--level-on-bg);
  color: var(--level-on);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -.005em;
}

/* The divider cell spans every column, so it scrolls with them; its text
   is pinned to the left edge like the label column, so the group name
   stays in view however far the table is scrolled. */
.analytics__group-text {
  position: sticky;
  left: 20px;
  display: inline-block;
}

/* The totals row is pinned to the bottom of the scroll box, as the header
   is to its top, so the "All Selected" figures stay in view while the rows
   scroll. A collapsed border scrolls away from a sticky cell, so the line
   above the row is an inset shadow the cell carries with it. */
.analytics__tr--total .analytics__td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  font-weight: 600;
  background: var(--paper);
  border-bottom: none;
  box-shadow: inset 0 1px 0 var(--line-2);
}

/* The corner cell is pinned both ways, so it sits above both the row and
   the label column. */
.analytics__tr--total .analytics__td--first {
  z-index: 3;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
}

.analytics__td--empty {
  padding: 28px 20px;
  font-family: var(--font-sans);
  color: var(--gray);
  text-align: center;
}

.analytics__dim { color: var(--gray-2); }

.analytics__clk {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--gray-2);
  padding-bottom: 1px;
  cursor: pointer;
}

.analytics__clk:hover {
  color: var(--text-blue);
  border-color: var(--text-blue);
  text-decoration: none;
}

.analytics__selrow {
  width: 14px;
  height: 14px;
  margin: 0 11px 0 0;
  vertical-align: -2px;
  accent-color: var(--ink);
  cursor: pointer;
}

.analytics__chksp {
  display: inline-block;
  width: 25px;
}

.analytics__pdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 1px;
}

.analytics__pdot--none {
  box-sizing: border-box;
  border: 1px dashed var(--gray-2);
}

/* A platform's mark in the dot's place, in the platform's own colour. */
.analytics__pmark {
  flex: none;
  margin-right: 7px;
  vertical-align: -2px;
}

.analytics__hint {
  margin: 0;
  padding: 12px 20px 16px;
  font-size: var(--text-md);
  color: var(--gray);
}

/* --- Empty state --- */

.analytics__empty {
  margin: 0;
  padding: 40px 20px;
  font-size: var(--text-base);
  color: var(--gray);
  text-align: center;
}

/* --- Breakpoints --- */

@media (max-width: 900px) {
  .analytics__views { gap: 18px; overflow-x: auto; }
}

@media (max-width: 640px) {
  .analytics { padding-inline: 12px; }
}
/* ------------------------------------------------------------------
   KPI PROJECTIONS — setup page
   ------------------------------------------------------------------ */

.kpi-proj-page {
  padding-bottom: 96px;
}

/* Controls row: scope tabs + customize button */

.kpi-proj-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 24px 0;
}

.kpi-proj-scope-toggle {
  margin: 0;
}

.kpi-proj-controls .team-kpi-customize {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border: var(--border-standard);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.kpi-proj-controls .team-kpi-customize:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ── Summary header ───────────────────────────────────────────────── */

.kpi-proj-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: var(--border-standard);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 24px 18px;
}

.kpi-proj-summary__ring {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--text-blue) calc(var(--pct, 0) * 1%),
    var(--gray-200) 0
  );
  display: grid;
  place-items: center;
}

.kpi-proj-summary__ring::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
}

.kpi-proj-summary__ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 7.7px;
  font-weight: 700;
  color: var(--black);
  font-feature-settings: "tnum";
}

.kpi-proj-summary__body {
  flex: 1;
  min-width: 0;
}

.kpi-proj-summary__head {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--black);
}

.kpi-proj-summary__set,
.kpi-proj-summary__total,
.kpi-proj-summary__remaining {
  font-feature-settings: "tnum";
}

.kpi-proj-summary__sub {
  font-size: 11.5px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* Period nav inside summary */

.kpi-proj-summary__period-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-left: var(--border-standard);
}

.kpi-proj-summary__nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--gray-500);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.kpi-proj-summary__nav-arrow:hover {
  background: var(--light-hover);
  color: var(--text-blue);
  text-decoration: none;
}

.kpi-proj-summary__period-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--black);
  min-width: 110px;
  text-align: center;
}

.kpi-proj-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 16px;
  border-left: var(--border-standard);
  min-width: 100px;
  flex: 1;
  align-items: flex-end;
  text-align: right;
}

.kpi-proj-summary__stat-label {
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  white-space: nowrap;
}

.kpi-proj-summary__stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.15;
}


/* ── Section group ────────────────────────────────────────────────── */

.kpi-proj-section {
  margin-bottom: 24px;
}

.kpi-proj-section__count {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 500;
  margin-left: 6px;
}

.kpi-proj-section__count strong {
  color: var(--black);
  font-weight: 600;
  font-feature-settings: "tnum";
}

.kpi-proj-section__rows {
  margin: 8px 24px 0;
  border: var(--border-standard);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

/* ── List header ──────────────────────────────────────────────────── */

.kpi-proj-list-header {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr 1fr;
  gap: 14px;
  padding: 9px 18px;
  background: var(--gray-100, #f5f4f7);
  border-bottom: var(--border-standard);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}

/* ── KPI row ──────────────────────────────────────────────────────── */

.kpi-proj-row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: var(--border-standard);
  transition: background 0.15s;
}

.kpi-proj-row:last-child {
  border-bottom: none;
}

.kpi-proj-row:hover {
  background: var(--light-hover, #fafafe);
}

.kpi-proj-row--set {
  border-left: 3px solid var(--text-blue);
}

/* Label + badge */

.kpi-proj-row__label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kpi-proj-row__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black);
}

.kpi-proj-row__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.kpi-proj-row__badge--set {
  color: var(--text-blue);
  background: var(--accent-light, #eef1ff);
  border: 1px solid var(--border, #ddd8fb);
}

.kpi-proj-row__badge--toset {
  color: var(--gray-500);
  background: var(--gray-100, #f5f4f7);
  border: 1px solid var(--gray-200, #ececf3);
}

/* Data columns (prev month, avg, current) */

.kpi-proj-row__data {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kpi-proj-row__data-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  font-feature-settings: "tnum";
  line-height: 1.15;
}

.kpi-proj-row__data-sub {
  font-size: 10px;
  color: var(--gray-500);
  font-weight: 500;
  font-feature-settings: "tnum";
}

/* ── Input (with optional $/% affix) ─────────────────────────────── */

.kpi-proj-input {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--gray-200, #ececf3);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0 10px;
  height: 34px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kpi-proj-row--set .kpi-proj-input {
  border-color: var(--border, #cfc8f7);
  background: var(--accent-light, #f4f2ff);
}

.kpi-proj-input:focus-within {
  border-color: var(--accent, var(--text-blue));
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
  background: var(--bg);
}

.kpi-proj-input input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  font-feature-settings: "tnum";
  padding: 0;
}

.kpi-proj-input input::placeholder {
  color: var(--gray-400);
  font-weight: 500;
}

.kpi-proj-input input:disabled {
  color: var(--gray-400);
}

.kpi-proj-input input::-webkit-outer-spin-button,
.kpi-proj-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kpi-proj-input input[type="number"] {
  -moz-appearance: textfield;
}

.kpi-proj-input__affix {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400);
  flex-shrink: 0;
  font-feature-settings: "tnum";
}

/* ── Sticky save bar ──────────────────────────────────────────────── */

.kpi-proj-savebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--bg);
  border-top: var(--border-standard);
  box-shadow: 0 -4px 16px rgba(14, 11, 44, 0.06);
  z-index: 50;
}

.kpi-proj-savebar__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
}

.kpi-proj-savebar__count span {
  color: var(--black);
  font-weight: 700;
  font-feature-settings: "tnum";
}

.kpi-proj-savebar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kpi-proj-savebar__cancel {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.kpi-proj-savebar__cancel:hover {
  background: var(--light-hover);
  color: var(--black);
  text-decoration: none;
}

.kpi-proj-savebar__btn {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--text-blue);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease;
}

.kpi-proj-savebar__btn:hover {
  background: var(--button-hover);
}

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

@media (max-width: 900px) {
  .kpi-proj-list-header {
    display: none;
  }

  .kpi-proj-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label  label"
      "prev   cur"
      "input  input";
    row-gap: 8px;
  }

  .kpi-proj-row__label          { grid-area: label; }
  /* the label div is the 1st div in the row, so data columns are types 2-3 */
  .kpi-proj-row__data:nth-of-type(2) { grid-area: prev; }
  .kpi-proj-row__data:nth-of-type(3) { grid-area: cur; }
  .kpi-proj-input               { grid-area: input; }

  .kpi-proj-summary {
    flex-wrap: wrap;
    margin: 0 16px 14px;
  }

  .kpi-proj-summary__stat {
    border-left: none;
    padding: 0;
  }
}

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

.kpi-proj-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}

.kpi-proj-empty p {
  margin: 0 0 12px;
}

/* ── View toggle (Team overview / By member) ─────────────────────── */

/* ── Scope toggle (Variant A — icon segmented, all equal) ─────────── */

.tk-scope {
  display: inline-flex;
  background: var(--gray-100, #f1eff8);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}

.tk-scope__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: 9px;
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}

.tk-scope__btn:hover {
  color: var(--black);
  text-decoration: none;
}

.tk-scope__btn svg {
  opacity: 0.65;
  flex: none;
}

.tk-scope__btn--active,
.tk-scope__btn--active:hover {
  background: var(--bg);
  color: var(--text-blue);
  box-shadow: 0 1px 4px rgba(15, 18, 40, 0.13);
}

.tk-scope__btn--active svg {
  opacity: 1;
}

/* .tk-mode moved to segmented.css as .segmented. */
.kpi-proj__mode {
  margin: 14px 24px 18px;
}

/* ── Team grid ───────────────────────────────────────────────────── */

.tk-grid {
  background: var(--bg);
  border: var(--border-standard);
  border-radius: 14px;
  overflow-x: auto;
  margin: 0 24px 24px;
}

.tk-table {
  /* max-content sizes every column to its full (nowrap) content so cells never
     overlap; min-width:100% still fills the container, and the wrapper scrolls
     horizontally when the columns total more than the available width */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

.tk-table__h {
  padding: 11px 20px;
  text-align: left;
  background: var(--bg);
  border-bottom: var(--border-standard);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  white-space: nowrap;
}

.tk-table__h--member {
  min-width: 200px;
}

.tk-table__row {
  border-bottom: var(--border-standard);
}

.tk-table__row:last-child {
  border-bottom: none;
}

.tk-table__row:hover {
  background: var(--light-hover, #fafafe);
}

.tk-table__cell {
  padding: 13px 20px;
  vertical-align: middle;
  white-space: nowrap;
}

.tk-table__cell--member {
  min-width: 200px;
}

/* Team aggregate row */
.tk-table__row--team,
.tk-table__row--team:hover {
  background: var(--bg);
}

.tk-grid__teamicon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--text-blue), #6d62f0);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.tk-grid__person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tk-grid__name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.tk-grid__name--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.tk-grid__sub {
  font-size: 10.5px;
  color: var(--gray-500);
  font-weight: 600;
}

/* Cell: "current / target" with the status pill inline on the same line */
.tk-grid__line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  vertical-align: middle;
}

.tk-grid__cur {
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
}

.tk-grid__slash {
  font-size: 15px;
  color: var(--gray-300, #dcdaea);
  font-weight: 600;
}

.tk-grid__tgt {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray-500);
}

/* Pill sits inline, right after the value line (compact, not a full-width bar) */
.tk-table__cell .tk-status {
  margin-left: 8px;
  vertical-align: middle;
}

.tk-grid__val {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  font-feature-settings: "tnum";
}

.tk-grid__target {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 500;
  font-feature-settings: "tnum";
}

.tk-grid__target strong {
  color: var(--text-secondary);
}

.tk-grid__notset {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  font-style: italic;
}

/* ── Avatar ──────────────────────────────────────────────────────── */

.tk-avatar {
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  flex: none;
  line-height: 1;
}

/* ── Status pills (On target / Over by / Off by) ────────────────── */

/* Filled rounded pill — matches the KPI-card on/off-target status badge */
.tk-status {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.tk-status__dot {
  display: none;
}

.tk-status--on,
.tk-status--over {
  color: #047857;
  background: #ecfdf5;
}

.tk-status--off {
  color: var(--danger, #b06a6a);
  background: #fef2f2;
}

/* Unset target: plain blue "Set target" text, no pill background */
.tk-status--set {
  color: var(--text-blue);
  background: transparent;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* ── By-member: member picker + targets detail table ─────────────── */

.mono {
  font-feature-settings: "tnum";
}

.tk-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 24px 16px;
}

/* Inside the Set goals modal the body already pads the sides. */
.tk-picker--modal { margin: 0 0 14px; }

.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: var(--border-standard);
  background: var(--bg);
  border-radius: 999px;
  padding: 5px 13px 5px 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-500);
  text-decoration: none;
}

.tk-chip:hover {
  color: var(--black);
}

.tk-chip--on,
.tk-chip--on:hover {
  background: var(--text-blue);
  border-color: var(--text-blue);
  color: #fff;
}

.tk-detail {
  background: var(--bg);
  border: var(--border-standard);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 24px 24px;
}

.tk-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: var(--border-standard);
  background: var(--gray-100, #f5f4f7);
}

.tk-detail__bizicon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--text-blue), #6d62f0);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.tk-detail__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--black);
}

.tk-detail__role {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* By-member spreadsheet table: metrics across the top, one row of editable
   "current / target" cells. Reuses the team-overview .tk-table styles. */
.tk-detail__grid {
  overflow-x: auto;
}

/* Vertical divider between columns (both team overview and by-member) */
.tk-table th:not(:last-child),
.tk-table td:not(:last-child) {
  border-right: var(--border-standard);
}

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

@media (max-width: 900px) {
  .tk-grid,
  .tk-detail {
    margin: 0 16px 24px;
  }

  .kpi-proj__mode,
  .tk-picker {
    margin: 0 16px 18px;
  }
}

/* ------------------------------------------------------------------
   TARGET LINES
   ------------------------------------------------------------------ */
/* The by-member list: one row per KPI, read as a single fraction —
   "41.3% / 45%" — with the status at the end. Hairlines only, no cards: the
   rows are a list, and boxing each one would imply they are separate things.
   The header shares the row's grid so the columns line up exactly. */

.tk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 24px;
  margin-bottom: 18px;
}

/* Capped rather than full width: the label column is the flexible one, so on a
   wide screen the KPI name and the number it is judged against drifted to
   opposite edges of the screen with nothing in between. */
.tk-lines {
  max-width: 620px;
  margin: 0 24px;
  /* The same hairline frame the team grid wears (.data-table--card), so one
     person's targets and the whole team's read as the same object. Rounding
     is safe here: nothing inside is sticky, so the box may clip. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* A four-column table: KPI | Current | Goal | Status. The head and every
   row share one grid, and every cell after the first carries the vertical
   rule, so the columns read as columns. */
.tk-line,
.tk-lines__head {
  display: grid;
  grid-template-columns: 1fr 130px 150px 124px;
  align-items: stretch;
}

/* Inside the Set goals modal the body already pads the sides. After
   .tk-lines, so it wins the tie on max-width and margin. */
.tk-lines--modal {
  max-width: none;
  margin: 0;
}

.tk-lines__head {
  border-bottom: 1px solid var(--line);
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tk-lines__th {
  padding: 11px 14px 9px;
  border-left: 1px solid var(--line);
}

.tk-lines__th:first-child {
  padding-left: 20px;
  border-left: none;
}

/* The current value is right-aligned in its column, so its head is too. */
.tk-lines__th--num { text-align: right; }

.tk-line__label,
.tk-line__cur,
.tk-line__target,
.tk-line__cell {
  display: flex;
  align-items: center;
  padding: 13px 14px;
  border-left: 1px solid var(--line);
}

.tk-line__label {
  padding-left: 20px;
  border-left: none;
}

.tk-line__cur { justify-content: flex-end; }

.tk-line {
  border-top: 1px solid var(--line);
}

.tk-lines__head + .tk-line {
  border-top: none;
}

.tk-line:first-of-type {
  border-top: none;
}

.tk-line:hover {
  background: var(--paper);
}

/* --gray rather than --gray-2: at 10px uppercase the lighter token lands near
   2.6:1 on white, under the 4.5:1 minimum, and it is the only thing naming
   the row. Still quieter than the number beside it, which is the point. */
/* One line per name: the row is wide enough for the longest label, and a
   name that still does not fit is cut with an ellipsis rather than wrapped. */
.tk-line__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The number being judged, so it is the loudest thing in the row. */
.tk-line__cur {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: right;
}

.tk-line__target {
  min-width: 0;
}

/* The field is styled as the value, not as a control: no box, no background,
   just a dashed underline saying it can be typed in. Nothing changes size or
   colour on focus except the underline going solid, so clicking it does not
   make the row jump. */
.tk-line__form {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.tk-line__affix {
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
}

/* No goal yet: the field shows "+ set" alone, so the currency sign or %
   only appears once there is a number for it to belong to. */
.tk-line__form:has(.tk-line__input:placeholder-shown) .tk-line__affix {
  display: none;
}

.tk-line__input {
  width: 7ch;
  padding: 2px 2px 3px;
  border: none;
  border-bottom: 1px dashed var(--line-2);
  border-radius: 0;
  background: none;
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

/* Spinners would put a control back on a field that is pretending not to be
   one; the value is still numeric for validation and mobile keyboards. */
.tk-line__input::-webkit-outer-spin-button,
.tk-line__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.tk-line__input {
  appearance: textfield;
}

/* "+ set", in the app's action violet, so it reads as something to do. */
.tk-line__input::placeholder {
  color: var(--level-on);
}

.tk-line__input:hover {
  color: var(--ink);
  border-bottom-color: var(--gray-2);
}

.tk-line__input:focus {
  outline: none;
  color: var(--ink);
  border-bottom-style: solid;
  border-bottom-color: var(--ink);
}

.tk-line__status {
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* In the team grid the pill sits after a number in a narrow column, so it
   loses its padding and keeps only its colour. */
.tk-line__status--compact {
  padding: 2px 6px;
  font-size: 9px;
}

.tk-line__status--on {
  color: var(--group-cash);
  background: #e7f4ee;
}

.tk-line__status--off {
  color: #c8102e;
  background: #fdeef0;
}

.tk-line__status--none {
  color: var(--gray-2);
  background: var(--paper);
}

/* --- Team table --- */

.tk-team__name {
  color: var(--ink);
  text-decoration: none;
}

.tk-team__name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* One line, and the same line in every row: the status sits in a slot of its
   own width whether or not there is a status to show, so the numbers above and
   below each other stay under their column heading instead of shifting left
   when a neighbour has no pill. */
.tk-team__cell {
  white-space: nowrap;
}

.tk-team__row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.tk-team__status-slot {
  flex: none;
  width: 34px;
  text-align: right;
}

.tk-team__actual {
  color: var(--ink);
  font-weight: 600;
}

.tk-team__sep {
  color: var(--line-2);
  padding: 0 3px;
}

.tk-team__target {
  color: var(--gray);
}

@media (max-width: 640px) {
  .tk-lines,
  .tk-toolbar {
    margin-inline: 0;
    padding-inline: 16px;
  }

  .tk-line {
    grid-template-columns: 1fr 90px 16px 96px;
  }

  /* The status drops below the numbers rather than squeezing a fifth column. */
  .tk-line__status {
    grid-column: 2 / -1;
    margin-top: 8px;
  }
}
/* ------------------------------------------------------------------
   ADS DRILL
   ------------------------------------------------------------------ */
/* The platform half of the ads KPI table: a platform heading, the level tabs
   (Campaigns → Ad sets → Ads) and the table under them. The tabs and the
   names in the table are links, so there is no JavaScript — the CSS only
   says which level is current. The scope toggle above it is .segmented, and
   the table is .data-table; nothing here restyles either. */

/* --- Root --- */

/* The panel is a GET form. Same 24px inset as .kpi-grid and
   .data-table--inset, so it lines up with the cards above it. */
.ads-drill {
  margin: 0;
  padding-inline: 24px;
}

/* --- Head --- */

.ads-drill__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.ads-drill__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Meta's own blue — the one place a platform colour is meaningful, since it
   is the platform's identity rather than a status. */
.ads-drill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f7bff;
}

.ads-drill__account,
.ads-drill__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray-2);
}

/* --- Level tabs --- */

.ads-drill__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Submit buttons: font and cursor are set because a <button> does not
   inherit them. */
.ads-drill__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--gray);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ads-drill__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

.ads-drill__tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.ads-drill__tab--active {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

/* How many things are at this level — or, once some are ticked, how many are
   ticked: that is when the pill turns green. */
.ads-drill__pick {
  display: inline-flex;
  align-items: center;
  max-width: 150px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gray-2);
  white-space: nowrap;
}

.ads-drill__pick--picked {
  background: var(--success-bg);
  color: var(--success);
}

.ads-drill__sep {
  flex: none;
  color: var(--line-2);
}

/* --- Table --- */

/* .data-table sets its own 34px top margin for the KPI screens; here the tabs
   sit directly above it. Doubled to beat data_table.css by manifest order. */
.ads-drill__table.ads-drill__table {
  margin-top: 12px;
}

/* The checkbox and the name share a label, so clicking the name ticks the
   row — the mockup's click-to-select, with the box saying it is possible. */
.ads-drill__row-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Meta names are long ("Batch #97 - C26 | Broad & ADV+ | NL, GER, SWI |
   18-65+"), so the cell is sticky like the source name and the name stays on
   one line while the figures scroll beside it, rather than wrapping into a
   tall narrow cell. The whole name shows on hover in the same popup a call's
   notes use. */
.ads-drill__name {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--ink);
  font-weight: 500;
}

/* A count that opens the drawer of contacts behind it: the same dashed
   underline as the editable budget, so "you can act on this" reads alike. */
.ads-drill__drill {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
  transition: border-color 0.15s ease;
}

.ads-drill__drill:hover {
  border-bottom-color: var(--ink);
}

/* A figure the timeline cannot give yet: a dash, never a zero. */
.ads-drill__na,
.kpi-breakdown__synced-budget {
  color: var(--gray-2);
}

.ads-drill__hint {
  max-width: 78ch;
  margin: 12px 0 0;
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* ------------------------------------------------------------------
   ADS DRILL MODAL
   ------------------------------------------------------------------ */
/* The contacts behind one count: a .modal-panel--ledger holding a
   .data-table. This block only adds the count in the header, the chip that
   names the ad, and the scroll wrapper. */

.ads-drill-modal__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray-2);
}

.ads-drill-modal__scroll {
  overflow-x: auto;
  padding-bottom: 14px;
}

/* Overrides .data-table's page-level top margin: inside the dialog the table
   starts right under the header bar. Doubled to beat data_table.css by order. */
.ads-drill-modal__table.ads-drill-modal__table {
  margin-top: 0;
}

/* "Meta · UGC hook v3": which ad carried the touch. Same mono micro-label as
   the tab pills, on a hairline instead of a fill. */
.ads-drill-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}

.ads-drill-modal__chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ads-drill-modal__chip-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #4f7bff;
}

.ads-drill-modal__contact {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
  transition: border-color 0.15s ease;
}

.ads-drill-modal__contact:hover {
  border-bottom-color: var(--ink);
}

.ads-drill-modal__empty {
  margin: 0;
  padding: 28px 20px;
  font-size: var(--text-md);
  color: var(--gray-2);
}
/* ------------------------------------------------------------------
   KPI DRILLDOWN DRAWER
   Opens from a clickable KPI card into the shared modal turbo-frame
   (modal-panel--drawer).
   ------------------------------------------------------------------ */

:root {
  --kd-ink: #0a0a0a;
  --kd-paper: #fafafa;
  --kd-gray: #5f636b;
  --kd-gray-2: #9aa0a8;
  --kd-line: #ececee;
  --kd-line-2: #e3e3e6;
  --kd-pink: #ff2d95;
  --kd-purple: #6d4aff;
  --kd-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --kd-grad: linear-gradient(90deg, #ff4f9a, #b85bff);
}

/* ── Clickable KPI cards ── */

/* Drillable cards always stack label over value so the "view sources"
   chip has a fixed top-right slot (plain cards are a horizontal row). */
.kpi-card--link {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.kpi-card--link:hover {
  border-color: var(--level-on);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -20px rgba(10, 10, 10, 0.35);
}

.kpi-card__drilldown-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

/* ── "View sources" chip, in the card's foot ── */

.kpi-card__view-sources {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--kd-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.15s ease;
}

.kpi-card__view-sources-dots {
  display: inline-flex;
  gap: 3px;
}

.kpi-card__view-sources-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Fixed decorative dots — same on every card, never data-driven */
.kpi-card__view-sources-dots i:nth-child(1) { background: #4f7bff; }
.kpi-card__view-sources-dots i:nth-child(2) { background: #ff2d95; }
.kpi-card__view-sources-dots i:nth-child(3) { background: #b85bff; }

.kpi-card--link:hover .kpi-card__view-sources {
  color: var(--level-on);
}

/* ── Report ── */
/* The drilldown as a centred report: the metric as a heading, the figure
   under it, the period, then two .data-table cards — the split by source
   with a bar under each name, and the records. */

.kpi-drilldown__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-right: 32px; /* room for the close button */
}

.kpi-drilldown__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.kpi-drilldown__value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.kpi-drilldown__range {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-2);
}

/* --- Section heads --- */

.kpi-drilldown__sec {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 30px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.kpi-drilldown__sec-count {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gray-2);
}

/* .data-table sets a 34px top margin for the KPI screens; inside the report
   the head sits right above. Doubled to beat data_table.css by order. */
.kpi-drilldown__table.kpi-drilldown__table {
  margin-top: 10px;
}

/* The records scroll inside their card, header pinned, so a month of calls
   is one list rather than a page of it. Sideways only if a table is wider
   than the panel, which .data-table already allows. */
.kpi-drilldown__table--scroll {
  max-height: 460px;
  overflow-y: auto;
}

.kpi-drilldown__table--scroll .data-table__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

/* --- By source --- */

/* The name cell carries a thin bar along its bottom edge, its width the
   source's share, so the table reads as a chart without a chart. */
.kpi-drilldown__source-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.kpi-drilldown__swatch {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* The share column: a short track with the source's colour filling it,
   the percent of the total beside it. */
.kpi-drilldown__share {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.kpi-drilldown__bar {
  display: inline-block;
  width: 128px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}

.kpi-drilldown__bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.kpi-drilldown__percent {
  min-width: 34px;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
  text-align: right;
}

/* --- Records --- */

/* The row number: mono, grey, as narrow as the count needs. */
.kpi-drilldown__n {
  width: 40px;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
}

.kpi-drilldown__date {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray);
  white-space: nowrap;
}

/* A cell that opens the record it names. */
.kpi-drilldown__link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
  transition: border-color 0.15s ease;
}

.kpi-drilldown__link:hover {
  border-bottom-color: var(--ink);
}

.kpi-drilldown__person {
  white-space: nowrap;
}

/* The source on a record: dot and name, mono micro-label. */
.kpi-drilldown__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}

.kpi-drilldown__money {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
}

/* ── Status pill (calls ledger, right-aligned last column) ── */

.kpi-drilldown__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--kd-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  justify-self: end;
}

.kpi-drilldown__status i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.kpi-drilldown__status--booked      { color: #4f7bff; background: rgba(79, 123, 255, 0.08); }
.kpi-drilldown__status--closed      { color: #1f8a5b; background: rgba(31, 138, 91, 0.08); }
.kpi-drilldown__status--no-show     { color: #b45309; background: rgba(180, 83, 9, 0.08); }
.kpi-drilldown__status--canceled    { color: #d6336c; background: rgba(214, 51, 108, 0.08); }
.kpi-drilldown__status--lost        { color: #b02a37; background: rgba(176, 42, 55, 0.08); }
.kpi-drilldown__status--pipeline    { color: #b85bff; background: rgba(184, 91, 255, 0.08); }
.kpi-drilldown__status--follow-up   { color: #a16207; background: rgba(161, 98, 7, 0.08); }
.kpi-drilldown__status--rescheduled { color: #5f636b; background: rgba(95, 99, 107, 0.08); }
.kpi-drilldown__status--unqualified { color: #9aa0a8; background: rgba(154, 160, 168, 0.08); }

/* ── Misc ── */

.kpi-drilldown__truncated,
.kpi-drilldown__empty {
  margin: 10px 0 0;
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* A divider between the by-source groups (ad networks, organic platforms,
   custom sources), the same violet label as the ads table's dividers. */
.kpi-drilldown__group-label {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--level-on-bg);
  color: var(--level-on);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -.005em;
}
/* ------------------------------------------------------------------
   FLASH / ALERT BOXES
   ------------------------------------------------------------------ */

.error-box {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
}

.error-box ul {
  margin: 0;
  padding-left: clamp(12px, 2.5vw, 18px);
}

.notice-box {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
}
/* ------------------------------------------------------------------
   MODALS (Turbo frame overlays)
   ------------------------------------------------------------------ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-panel {
  background: var(--bg);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}

.modal-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.modal-header__subtitle {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted, #8a85a8);
  line-height: 1.45;
  font-weight: 400;
}

.modal-close {
  text-decoration: none;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--danger);
}

/* The notes pad: a focused writing surface, not a form. Narrower than the old
   788px sheet — a note is a paragraph, and a wide measure makes it read like a
   document. The panel owns no padding; each of the three bands sets its own. */
.modal-panel--notes {
  padding: 0;
  max-width: 560px;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

/* The reminder card owns no padding — each of its three bands (head, body,
   foot) sets its own, exactly as the notes pad does.

   overflow is visible, beating .modal-panel's overflow-y: auto: the card is
   short enough never to need scrolling, and `auto` on one axis forces the
   other to `auto` too, which is what put a horizontal scrollbar under the
   footer. It also lets the flatpickr calendar hang outside the card. */
.modal-panel--reminder {
  padding: 0;
  position: relative;
  overflow: visible;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.12);
}

/* Unlike the reminder card, this one keeps its own padding — the product form
   is one continuous column of fields, not three banded sections. */
.modal-panel--product {
  max-width: 480px;
  padding: 26px 28px 28px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.12);
}

.modal-panel__close {
  position: absolute;
  top: 12px;
  right: 14px;
  text-decoration: none;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
  z-index: 1;
}

.modal-panel__close:hover {
  color: var(--danger);
}

.reminder-modal__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--ink, #1e1e2f);
}

.reminder-modal__title {
  font-size: 15px;
  font-weight: 600;
}

.reminder-modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reminder-modal__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.reminder-modal__date {
  width: 100%;
}

.reminder-modal__note {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  font-family: inherit;
  line-height: 1.4;
}

.reminder-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.reminder-modal__delete-row {
  margin-top: 8px;
  text-align: right;
}

.reminder-modal__delete {
  color: var(--danger, #ef4444);
}

.reminder-modal__notes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: var(--border-standard);
}

.reminder-modal__notes-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500);
}

.reminder-modal__notes-text {
  font-size: 13px;
  color: var(--gray-700);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   MODAL FORM
   ------------------------------------------------------------------ */
/* A short form inside a modal: two columns, mono micro-labels, fields that
   are borders rather than boxes. Used by the new contact modal; any modal
   with a handful of fields should use it rather than growing its own. */

/* The panel it sits in: narrower than the default modal, and it owns its own
   padding so the head, the grid and the actions share one inset. */
.modal-panel--form {
  max-width: 460px;
  padding: 26px 28px 28px;
}

/* Sits above the title — what this modal belongs to, not what it does. */
.modal-header__kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

/* An email or a phone number reads badly in half a modal. */
.modal-form__field--full {
  grid-column: 1 / -1;
}

.modal-form__label {
  display: block;
  margin-bottom: 9px;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.modal-form__input {
  /* No global border-box reset: without this the padding is added to the
     100% and the field overflows its column. */
  box-sizing: border-box;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  outline: none;
  transition: border-color 0.15s ease;
}

.modal-form__input::placeholder {
  color: var(--gray-2);
}

.modal-form__input:focus {
  border-color: var(--ink);
}

/* Values that are read digit by digit — a number, an address. */
.modal-form__input--mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.modal-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 26px;
}

@media (max-width: 640px) {
  .modal-form {
    grid-template-columns: 1fr;
  }
}

/* --- Notes pad --- */

.notes-pad__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 0;
}

.notes-pad__titles {
  flex: 1;
  min-width: 0;
}

.notes-pad__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.notes-pad__close {
  padding: 5px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--gray-2);
  line-height: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.notes-pad__close:hover {
  color: var(--ink);
  background: var(--paper);
}

.notes-pad__date-field {
  padding: 16px 24px 0;
}

.notes-pad__date-field .form-field {
  max-width: 200px;
}

.notes-pad {
  display: flex;
  flex-direction: column;
}

.notes-pad__body {
  padding: 18px 24px 22px;
}

/* A bordered field rather than an edge-to-edge sheet: it reads as something
   you fill in, and it grows only if the writer drags it. border-box is
   required: this app has no global reset, so a 100%-wide field would add its
   padding and border on top and hang off the right edge of the panel. */
.notes-pad__textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 260px;
  resize: vertical;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  outline: none;
  background: #fff;
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.notes-pad__textarea::placeholder {
  color: var(--gray-2);
}

.notes-pad__textarea:focus {
  border-color: var(--ink);
}

/* Buttons sit right, on a tinted band divided by a hairline. */
.notes-pad__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.modal-panel--wide {
  max-width: 680px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-panel--wide .modal-header {
  flex-shrink: 0;
}

.modal-header--product {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #ececf3);
  margin-bottom: 0;
}

.modal-header--product h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header__icon {
  color: var(--primary, #4f46e5);
  flex-shrink: 0;
}

/* Drawer variant — slides in from the right */

.modal-backdrop--drawer {
  align-items: stretch;
  justify-content: flex-end;
}

.modal-panel--drawer {
  max-width: 560px;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow-y: auto;
  padding: 24px 28px;
  animation: drawer-slide-in 0.25s ease-out;
}

.modal-panel--drawer .form-field {
  margin-bottom: 10px;
}

.modal-panel--drawer .input,
.modal-panel--drawer .select {
  height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.modal-panel--drawer .form-row--2 {
  gap: 12px;
}

.modal-panel--drawer .sub-form__field-full {
  margin-bottom: 10px;
}

.modal-panel--drawer .sub-form .form-row--2 {
  margin-bottom: 10px;
}

.modal-panel--drawer .sub-form .form-actions {
  margin-top: 10px;
  padding-top: 10px;
}

.modal-panel--drawer .sub-form__section-title {
  margin: 4px 0 2px;
  padding-bottom: 2px;
  border-bottom: none;
}

.modal-panel--drawer .sub-form .form-field label,
.modal-panel--drawer .sub-form .sub-form__field-full label {
  margin-bottom: 3px;
}

.modal-panel--drawer .date-range-split__row {
  height: 34px;
  font-size: 13px;
}

.modal-panel--drawer .modal-header {
  margin-bottom: 12px;
  padding: 0;
}

.modal-panel .form-actions {
  justify-content: flex-start;
}

@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ------------------------------------------------------------------
   KPI CUSTOMIZE MODAL
   ------------------------------------------------------------------ */

.kpi-customize-section {
  margin-bottom: 20px;
}

.kpi-customize-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
  margin: 0 0 8px;
}

.kpi-customize-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kpi-customize-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: var(--border-standard);
  background: var(--bg);
  font-size: 13px;
}

.kpi-customize-item--active {
  background: var(--light-hover, #f1f5f9);
}

.kpi-customize-label {
  font-size: 13px;
  color: var(--black);
}

.kpi-customize-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 12px;
  padding: 0;
  line-height: 1;
}

.kpi-customize-remove:hover {
  color: var(--danger);
}

/* ------------------------------------------------------------------
   RECORDING POPOVER (unified modal)
   ------------------------------------------------------------------ */

.recording-popover {
  background: #fff;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}

.recording-popover__header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 9px;
}

.recording-popover__header-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eeecff;
  color: #4f46e5;
  display: grid;
  place-items: center;
  flex: none;
}

.recording-popover__header-body {
  flex: 1;
  min-width: 0;
}

.recording-popover__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 7px;
}

.recording-popover__count {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--gray-50);
  color: var(--gray-500);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
}

.recording-popover__subtitle {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-top: 1px;
  font-weight: 500;
}

.recording-popover__close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--gray-400);
  cursor: pointer;
  border: 0;
  background: transparent;
}

.recording-popover__close:hover {
  background: #f2f0fb;
  color: var(--black);
}

/* Recording list */

.recording-popover__list {
  padding: 4px 0;
  max-height: 340px;
  overflow-y: auto;
}

.recording-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.15s;
}

.recording-popover__item:last-child {
  border-bottom: 0;
}

.recording-popover__item:hover {
  background: var(--gray-50);
}

.recording-popover__item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  background: linear-gradient(135deg, #eeecff, #fff);
  color: #4f46e5;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-200);
}

.recording-popover__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recording-popover__item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black);
}

.recording-popover__item-meta {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
}

.recording-popover__item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.recording-popover__open-btn {
  background: #fff;
  border: 1px solid var(--gray-200);
  color: #4f46e5;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: all 0.15s;
}

.recording-popover__open-btn:hover {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
  box-shadow: 0 4px 10px -4px rgba(79, 70, 229, 0.5);
}

/* Empty state */

.recording-popover__empty {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.recording-popover__empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #eeecff;
  color: #4f46e5;
  display: grid;
  place-items: center;
}

.recording-popover__empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  margin-top: 3px;
}

.recording-popover__empty-desc {
  font-size: 11.5px;
  color: var(--gray-400);
  line-height: 1.45;
  max-width: 300px;
}

/* Add row */

.recording-popover__add {
  padding: 11px 16px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.recording-popover__add-form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.recording-popover__add-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 6px 10px;
  transition: all 0.15s;
  color: var(--gray-400);
}

.recording-popover__add-input-wrap:focus-within {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}

.recording-popover__add-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--black);
  min-width: 0;
}

.recording-popover__add-input::placeholder {
  color: var(--gray-400);
}

.recording-popover__add-btn {
  background: #4f46e5;
  color: #fff;
  border: 0;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 10px -3px rgba(79, 70, 229, 0.5);
  cursor: pointer;
  font-family: inherit;
}

.recording-popover__add-btn:hover {
  background: #3d33d6;
}

.recording-popover__delete-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--gray-400);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.recording-popover__delete-btn:hover {
  background: #fee2e2;
  color: #991b1b;
}

/* Drawer variant for KPI customize */

.kpi-customize-list--drawer {
  flex-direction: column;
  gap: 0;
}

.kpi-customize-item--row:last-child {
  border-bottom: none;
}

.kpi-customize-add {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-blue);
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}

/* Drag handle */

.kpi-customize-handle {
  cursor: grab;
  color: var(--text-muted, #9ca3af);
  font-size: 16px;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
  letter-spacing: 2px;
}

.kpi-customize-handle:active {
  cursor: grabbing;
}

/* Drag states */

.kpi-customize-item.dragging {
  opacity: 0.4;
  background: var(--light-hover, #f1f5f9);
}

.kpi-customize-item.drag-over {
  border-top: 2px solid var(--text-blue, #3b82f6);
}

/* Toggle switch (CSS-only) */

.kpi-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.kpi-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.kpi-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 20px;
  transition: background 0.2s;
}

.kpi-toggle__slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--bg);
  border-radius: 50%;
  transition: transform 0.2s;
}

.kpi-toggle input:checked + .kpi-toggle__slider {
  background: var(--text-blue, #3b82f6);
}

.kpi-toggle input:checked + .kpi-toggle__slider::before {
  transform: translateX(16px);
}

/* Tabs inside KPI modal */

.kpi-customize-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-standard);
  margin-bottom: 16px;
  padding: 0 4px;
}

.kpi-customize-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #888);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.kpi-customize-tab:hover {
  color: var(--black);
}

.kpi-customize-tab--active {
  color: var(--black);
  border-bottom-color: var(--text-blue, #3b82f6);
}

/* Row layout with handle + label + toggle */

.kpi-customize-item--row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  border: none;
  border-bottom: var(--border-standard);
  padding: 10px 4px;
}

.kpi-customize-item--row .kpi-customize-label {
  flex: 1;
}

/* ============================================================================
   REMINDER MODAL  (.rmd — create, show, contact picker)
   ============================================================================
   The two reminder modals rendered into the "modal" Turbo frame. The panel is
   a plain white card: the contact moved into the header as a quiet mono line,
   so the tinted banner, the purple gradient icon and the numbered
   "1 WHEN / 2 NOTE" steps are gone. Date and time are the same bordered mono
   controls the filters use; colour appears only on the DUE pill and on the
   red outline Delete button.

   Flatpickr drives the date field (reminder_form_controller sets
   altInputClass to .rmd__inp-field so the generated input inherits the
   control styling and this file needs no element selectors). */

/* --- Head --- */
.rmd__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 22px 26px 0;
}

.rmd__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.rmd__for {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-2);
}

.rmd__for-name {
  color: var(--ink);
  font-weight: 500;
}

.rmd__x {
  display: grid;
  place-items: center;
  margin-left: auto;
  align-self: flex-start;
  padding: 4px;
  border-radius: var(--radius-md);
  color: var(--gray-2);
  text-decoration: none;
  transition: background 0.15s ease;
}

.rmd__x:hover {
  background: var(--paper);
  color: var(--ink);
}

/* --- Body --- */
.rmd__body {
  padding: 20px 26px 24px;
}

.rmd__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
  margin-bottom: 8px;
}

/* A second label further down the body needs air above it. */
.rmd__label--spaced {
  margin-top: 18px;
}

/* Destructive red — the same literal buttons.css carries, until the
   destructive tokens are added to colors.css deliberately. */
.rmd__req {
  color: #c8102e;
}

/* --- Fields --- */
/* minmax(0, …) rather than a bare fr: an fr track floors at the item's
   min-content width, and an <input>'s intrinsic width is wide enough to push
   both tracks past the card — which is what made the two controls touch and
   put a scrollbar under the footer. The min-width below is the same guard one
   level down, on the grid item itself. */
.rmd__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}

.rmd__field {
  min-width: 0;
}

.rmd__inp {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  /* The app has no global border-box reset, so width: 100% would measure the
     26px of padding and 2px of border on top of the column and spill over the
     control next to it. */
  box-sizing: border-box;
  min-height: var(--control-h);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.rmd__inp:hover {
  border-color: var(--gray-2);
}

.rmd__inp:focus-within {
  border-color: var(--ink);
}

.rmd__inp-ic {
  color: var(--gray);
  flex-shrink: 0;
}

.rmd__inp-field {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  font-feature-settings: "tnum";
  line-height: normal;
  color: var(--ink);
  cursor: pointer;
}

.rmd__inp-field::placeholder {
  color: var(--gray-2);
}

.rmd__note {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.rmd__note::placeholder {
  color: var(--gray-2);
}

.rmd__note:focus {
  border-color: var(--ink);
}

/* --- Show modal --- */
.rmd__when {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rmd__when-ic {
  color: var(--gray);
  flex-shrink: 0;
}

.rmd__due {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: #c8102e;
  background: #fdeef0;
  border-radius: 999px;
  padding: 4px 9px;
}

.rmd__due--upcoming {
  color: var(--gray);
  background: var(--paper);
}

.rmd__divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}

.rmd__text {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--gray);
  margin: 8px 0 0;
}

.rmd__text--empty {
  color: var(--gray-2);
  font-style: italic;
}

/* The empty row inside the contact list, which has no other content. */
.rmd__text--center {
  text-align: center;
  margin: 0;
  padding: 16px 0;
}

/* --- Foot --- */
.rmd__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 26px 22px;
}

/* --- Contact picker --- */
.rmd__search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  min-height: var(--control-h);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s ease;
}

.rmd__search:focus {
  border-color: var(--ink);
}

.rmd__list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.rmd__list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}

.rmd__list-row:last-child {
  border-bottom: 0;
}

.rmd__list-row:hover {
  background: var(--paper);
}

.rmd__list-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
}

.rmd__list-email {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
}

@media (max-width: 640px) {
  .rmd__row {
    grid-template-columns: 1fr;
  }
}

/* ── Reminders Index page ───────────────────────────── */

.rmi-bar { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.rmi-bar__filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.rmi-pill__count {
  font-size: 11px; font-weight: 700; min-width: 16px; height: 16px;
  padding: 0 5px; border-radius: 8px; background: rgba(0,0,0,.06); color: inherit;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.rmi-pill__count--danger { background: #fee2e2; color: #991b1b; }

/* ── Status pill inside the customize modal rows ── */

.lsrow__pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:7px;
  font-size:13px; font-weight:600; line-height:1; }
.lsrow__ic{ display:grid; place-items:center; }
.lsrow__ic svg{ width:13px; height:13px; }

/* ── Projection KPI selection modal ──────────────────────────────── */

.modal-panel--projection {
  position: relative;
  max-width: 440px;
  padding: 20px 0;
}

.modal-panel--projection .recording-popover__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 30px;
  height: 30px;
}

.modal-panel--projection .modal-header {
  padding: 0 20px;
}

.modal-panel--projection .modal-footer {
  padding: 12px 20px 0;
  display: flex;
  justify-content: flex-end;
}

.proj-modal-scope-toggle {
  margin: 0 20px 14px;
}

.proj-modal-sections {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 20px;
}

.proj-modal-section {
  margin-bottom: 16px;
}

.proj-modal-section:last-child {
  margin-bottom: 0;
}

.proj-modal-section__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  margin-bottom: 2px;
}

.proj-modal-section__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #8a85a8);
}

.proj-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  margin-bottom: 2px;
}

.proj-modal-row:hover {
  background: var(--card, #f8f8fb);
}

.proj-modal-row--active,
.proj-modal-row:has(input:checked) {
  background: var(--accent, #eef0ff);
  border-color: var(--text-blue, #3b82f6);
}

.proj-modal-row__check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.proj-modal-row__dot {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--gray-300, #d1d5db);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, background 0.15s;
}

.proj-modal-row__dot::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
  margin-top: -2px;
  transition: border-color 0.15s;
}

.proj-modal-row:has(input:checked) .proj-modal-row__dot {
  border-color: var(--text-blue, #3b82f6);
  background: var(--text-blue, #3b82f6);
}

.proj-modal-row:has(input:checked) .proj-modal-row__dot::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

.proj-modal-row__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-700, #374151);
}

/* --- Ledger dialog --- */
/* A centred table of records (the Meta ads drilldown): wider than a form,
   no inner padding so the table runs edge to edge, and a header bar on the
   inset surface instead of a heading above the content. */
.modal-panel--ledger {
  max-width: 760px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.modal-header--bar {
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-wrap: nowrap;
}

.modal-header--bar h2 {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-header--bar .modal-close {
  margin-left: auto;
}

/* --- Report dialog --- */
/* A centred report (the KPI drilldown): wide, generous padding, its close
   button in the corner. The panel grows with its tables and the BACKDROP
   scrolls, so the report sits 7vh from the top with air around it instead
   of being clamped to the viewport and scrolling inside itself. */
.modal-backdrop--scroll {
  align-items: flex-start;
  padding: 7vh 24px;
  overflow-y: auto;
}

.modal-panel--report {
  position: relative;
  max-width: 740px;
  max-height: none;
  padding: 30px 32px 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: visible;
}

.modal-panel--report .modal-panel__close {
  top: 22px;
  right: 24px;
  color: var(--gray-2);
}

.modal-panel--report .modal-panel__close:hover {
  color: var(--ink);
}
/* ------------------------------------------------------------------
   KPI MODAL
   ------------------------------------------------------------------ */
/* Customize KPIs, opened from the analytics page into the shared #modal
   turbo frame. It sits inside .modal-backdrop and replaces .modal-panel, so
   it owns its own surface. Ported from the "Manager Admin View" mockup.

   No JS drives the switches: each card is a <label> around a hidden checkbox
   and :has(input:checked) paints the switch. sortable_list_controller.js
   reorders the cards and rewrites the hidden position fields. */

/* --- Root --- */
.kpi-modal {
  box-sizing: border-box;
  width: 420px;
  max-width: 92vw;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: -.011em;
  border-radius: 18px;
  box-shadow: var(--shadow-menu);
}

.kpi-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Set goals: a target row is label · value / target · status, wider than
   the switch list; a whole team is a table, wider still. */
/* The Set goals sheet: wide, and taller than the picker. */
.kpi-modal--sheet { width: 1000px; max-height: 86vh; }

/* A scrolling body for content that is not the switch list. */
.kpi-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px;
}

/* --- Parts: head --- */
.kpi-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.kpi-modal__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -.02em;
}

.kpi-modal__x {
  margin-left: auto;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: var(--text-xl);
  color: var(--gray);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.kpi-modal__x:hover {
  background: var(--paper);
  color: var(--ink);
}

/* --- Parts: list --- */
.kpi-modal__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px 22px;
  list-style: none;
}

/* Each metric is a card: a click flips it, click-and-hold drags it. */
.kpi-modal__row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: background .12s ease, border-color .12s ease;
}

.kpi-modal__row:hover { background: var(--paper); }
.kpi-modal__row:active { cursor: grabbing; }
.kpi-modal__row.dragging { opacity: .35; }
.kpi-modal__row.drag-over { border-color: var(--ink); }

/* A row that is switched off reads dimmed, as in the mockup. */
.kpi-modal__row:not(:has(input:checked)) { color: var(--gray-2); }

.kpi-modal__grip {
  flex: none;
  margin-right: 3px;
  color: var(--gray-2);
  font-size: var(--text-xl);
  line-height: 1;
}

/* The label fills the card, so the card's whole face is the switch's hit
   area; the cursor stays the card's grab hand. */
.kpi-modal__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 16px;
  cursor: inherit;
}

/* Not flex: 1 — the name keeps its own width so the info mark sits right
   after it; the switch is pushed to the edge by its own margin. */
.kpi-modal__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The real control, kept off screen so the whole row is the hit area. */
.kpi-modal__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.kpi-modal__sw {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: var(--line-2);
  transition: background .15s ease;
}

.kpi-modal__sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: left .15s ease;
}

.kpi-modal__row:has(input:checked) .kpi-modal__sw { background: var(--ink); }
.kpi-modal__row:has(input:checked) .kpi-modal__sw::after { left: 14px; }

.kpi-modal__row:has(input:focus-visible) .kpi-modal__sw {
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .12);
}

/* --- Parts: foot --- */
.kpi-modal__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}

/* --- Modifier: the picker (Customize KPIs by category) --- */
/* Wider than the switch list: a rail of the groups on the left, the cards on
   the right. The head and foot stay as they are; the body between them is
   the two-column wrap, and each column scrolls on its own. */
.kpi-modal--picker {
  width: 760px;
  height: min(640px, 92vh);
  max-height: 92vh;
}

.kpi-modal__wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  /* The rail is wide enough for a header name on one line; the list
     gives up the room, it had more than its cards use. */
  grid-template-columns: 250px minmax(0, 1fr);
}

.kpi-modal__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

/* One group per row: a card like the KPI rows on the right, with the grip
   inside its border, the group's name as a tag in the group's own colour
   on white, and the on/total count at the far end. The picked card has an
   ink border. */
.kpi-modal__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  color: var(--gray);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.kpi-modal__cat:hover { background: var(--paper); }

.kpi-modal__cat--on { border-color: var(--ink); }

/* The name, as a small tinted tag: the group's colour at a tenth of
   strength, the same as its head in the chart's KPI menu; "All KPIs" is
   the neutral one. */
.kpi-modal__tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;
}

.kpi-modal__tag--all { color: var(--gray); background: var(--paper); }
.kpi-modal__tag--leads      { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.kpi-modal__tag--calls      { color: var(--group-calls); background: color-mix(in srgb, var(--group-calls) 10%, #fff); }
.kpi-modal__tag--rates      { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.kpi-modal__tag--ad_rates      { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.kpi-modal__tag--ads        { color: var(--group-ads); background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.kpi-modal__tag--costs      { color: var(--group-ads); background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.kpi-modal__tag--closer_team { color: var(--group-sales); background: color-mix(in srgb, var(--group-sales) 10%, #fff); }
.kpi-modal__tag--volume     { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.kpi-modal__tag--setter_team { color: var(--group-leads); background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.kpi-modal__tag--cash       { color: var(--group-cash); background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.kpi-modal__tag--purchases  { color: var(--group-cash); background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.kpi-modal__tag--payments   { color: var(--group-payments); background: color-mix(in srgb, var(--group-payments) 10%, #fff); }
.kpi-modal__tag--all_time   { color: var(--group-rates); background: color-mix(in srgb, var(--group-rates) 10%, #fff); }

/* The first rail row is "All KPIs"; a little air separates it from the groups. */
.kpi-modal__cat:first-child { margin-bottom: 6px; }

/* The groups under it: one row each, draggable as a whole. */
.kpi-modal__cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kpi-modal__cat-row { cursor: grab; }
.kpi-modal__cat-row:active { cursor: grabbing; }

/* The dragged row fades; the row it passes over is left alone, since the
   rows swapping places already says where it will land. */
.kpi-modal__cat-row.dragging { opacity: .35; }

.kpi-modal__n {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-2);
}

.kpi-modal__cat--on .kpi-modal__n { color: inherit; }

/* The group's dot, the same hue as its header on the KPI grid. */
.kpi-modal__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.kpi-modal__dot--leads      { background: var(--group-leads); }
.kpi-modal__dot--calls      { background: var(--group-calls); }
.kpi-modal__dot--rates      { background: var(--group-rates); }
.kpi-modal__dot--ad_rates      { background: var(--group-rates); }
.kpi-modal__dot--ads        { background: var(--group-ads); }
.kpi-modal__dot--costs      { background: var(--group-ads); }
.kpi-modal__dot--closer_team { background: var(--group-sales); }
.kpi-modal__dot--volume     { background: var(--group-leads); }
.kpi-modal__dot--setter_team { background: var(--group-leads); }
.kpi-modal__dot--cash       { background: var(--group-cash); }
.kpi-modal__dot--purchases  { background: var(--group-cash); }
.kpi-modal__dot--payments   { background: var(--group-payments); }
.kpi-modal__dot--all_time   { background: var(--group-rates); }

/* In the picker the list is the right column: the search box, then one
   section per group. It overrides the plain list's flex rules. */
.kpi-modal--picker .kpi-modal__list {
  display: block;
  padding: 14px 20px 20px;
}

.kpi-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--gray-2);
}

.kpi-modal__q {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
}

.kpi-modal__q::placeholder { color: var(--gray-2); }

.kpi-modal__sec { margin-bottom: 18px; }

/* The header sticks to the top of the scrolling column while its cards
   pass under it; the negative top matches the column's padding. */
.kpi-modal__sech {
  position: sticky;
  top: -14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 8px;
  background: #fff;
}

.kpi-modal__sech .kpi-modal__dot { width: 8px; height: 8px; }

.kpi-modal__sect {
  flex: 1;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.kpi-modal__tog {
  padding: 0 4px;
  border: none;
  background: none;
  font-size: var(--text-md);
  color: var(--gray-2);
  cursor: pointer;
  transition: transform .15s ease;
}

.kpi-modal__sec--closed .kpi-modal__tog { transform: rotate(-90deg); }
.kpi-modal__sec--closed .kpi-modal__items { display: none; }

.kpi-modal__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kpi-modal__empty {
  padding: 40px;
  margin: 0;
  text-align: center;
  font-size: var(--text-base);
  color: var(--gray-2);
}
/* ------------------------------------------------------------------
   GOALS
   ------------------------------------------------------------------ */
/* The Set goals sheet inside the KPI modal (kpi_modal.css gives the frame,
   head and foot): a rail of the tabs on the left, and on the right a bar
   with the month and the owner, then one card per header with the KPIs as
   rows. No JavaScript of its own: the rail, the month and the owner are
   links, the fields are a plain form. Colours are the header and section
   tokens from colors.css, nothing of its own. */

/* --- Root --- */
.goals {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

/* --- Rail --- */
.goals__rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.goals__section {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}

.goals__section:hover { background: var(--paper); }
.goals__section--on   { border-color: var(--ink); }

/* The tab's tag: plain ink, no tint. The section hues fought the
   group colours on the KPI cards, so the rail carries none. */
.goals__section-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink);
}

/* The small round mark a tag, a band or a status badge opens with. */
.goals__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Main --- */
.goals__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Whose goals: under the bar, above the tables it switches. */
.goals__owner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 24px 0;
}

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

.goals__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}

/* The month stepper: arrow, name, arrow, as one bordered control. */
.goals__month {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  overflow: hidden;
}

.goals__month-btn {
  display: flex;
  padding: 6px 9px;
  color: var(--gray);
  transition: background .12s ease;
}

.goals__month-btn:hover { background: var(--paper); }

.goals__month-label {
  padding: 6px 10px;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  font-size: var(--text-md);
  font-weight: 500;
}

/* Whole team / Per member: one bordered control split in two, an icon
   before each word, the chosen half filled ink. */
.goals__scope {
  display: inline-flex;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: 600;
}

.goals__scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--gray);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}

.goals__scope-btn + .goals__scope-btn { border-left: 1px solid var(--line-2); }
.goals__scope-btn:hover { background: var(--paper); }

.goals__scope-btn--on,
.goals__scope-btn--on:hover {
  background: var(--ink);
  color: #fff;
}

.goals__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 24px 20px;
}

/* --- Group card --- */
.goals__group {
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
}

/* The header's band, in its colour at a tenth of strength: the same hue
   its header carries on the KPI grid. */
.goals__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 16px;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.goals__group-head--leads       { color: var(--group-leads);    background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.goals__group-head--calls       { color: var(--group-calls);    background: color-mix(in srgb, var(--group-calls) 10%, #fff); }
.goals__group-head--rates       { color: var(--group-rates);    background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.goals__group-head--ad_rates       { color: var(--group-rates);    background: color-mix(in srgb, var(--group-rates) 10%, #fff); }
.goals__group-head--ads         { color: var(--group-ads);      background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.goals__group-head--costs       { color: var(--group-ads);      background: color-mix(in srgb, var(--group-ads) 10%, #fff); }
.goals__group-head--closer_team { color: var(--group-sales);    background: color-mix(in srgb, var(--group-sales) 10%, #fff); }
.goals__group-head--volume      { color: var(--group-leads);    background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.goals__group-head--setter_team { color: var(--group-leads);    background: color-mix(in srgb, var(--group-leads) 10%, #fff); }
.goals__group-head--cash        { color: var(--group-cash);     background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.goals__group-head--purchases   { color: var(--group-cash);     background: color-mix(in srgb, var(--group-cash) 10%, #fff); }
.goals__group-head--payments    { color: var(--group-payments); background: color-mix(in srgb, var(--group-payments) 10%, #fff); }
.goals__group-head--all_time    { color: var(--group-rates);    background: color-mix(in srgb, var(--group-rates) 10%, #fff); }

/* The column heads and the rows share one grid: name, current, goal, pace. */
.goals__cols,
.goals__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px 120px;
  gap: 0 16px;
  align-items: center;
  padding: 7px 16px;
}

.goals__cols {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--gray-2);
}

.goals__row { border-bottom: 1px solid var(--line); }
.goals__row:last-child { border-bottom: none; }
.goals__row:hover { background: var(--paper); }

.goals__num { text-align: right; }
.goals__num--tip { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; }

.goals__label {
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
  font-weight: 500;
}

.goals__current {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  text-align: right;
}

.goals__goal { display: flex; justify-content: flex-end; }

/* The team's sheet adds a Computed column between Goal and Status. */
.goals__group--computed .goals__cols,
.goals__group--computed .goals__row {
  grid-template-columns: minmax(0, 1fr) 90px 130px 150px 120px;
}

.goals__computed {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--gray);
  white-space: nowrap;
}

/* The goal field: affix, number, affix inside one bordered box. */
.goals__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  min-width: 118px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.goals__field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .12);
}

.goals__affix {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--gray-2);
}

.goals__input {
  width: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}

.goals__input::-webkit-outer-spin-button,
.goals__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.goals__input::placeholder { color: var(--gray-2); }

/* --- Status --- */
.goals__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.goals__status--on   { color: var(--target-on-fg,  var(--group-cash));  background: var(--target-on-bg,  #e7f4ee); }
.goals__status--off  { color: var(--target-off-fg, #c8102e);            background: var(--target-off-bg, #fdeef0); }
.goals__status--none { color: var(--gray-2); background: var(--paper); }

@media (max-width: 900px) {
  .goals { grid-template-columns: 1fr; }
  .goals__rail { flex-direction: row; border-right: none; border-bottom: 1px solid var(--line); }
  .goals__cols, .goals__row { grid-template-columns: minmax(0, 1fr) 80px 120px 100px; gap: 0 8px; }
}
/* ------------------------------------------------------------------
   AUTH LAYOUT
   ------------------------------------------------------------------ */

.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  width: var(--auth-width);
  max-width: 100%;
  padding: 32px;
  border: var(--border-standard);
  border-radius: var(--radius);
  background: var(--bg);
}

/* ------------------------------------------------------------------
   AUTH FOOTER (bottom paragraph shared across all auth pages)
   ------------------------------------------------------------------ */

.auth-footer {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
/* ------------------------------------------------------------------
   APP LAYOUT
   ------------------------------------------------------------------ */

.app-shell {
  min-height: 100vh;
  background: var(--bg);
}

.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ---------------------------------------------
   MAIN AREA
   --------------------------------------------- */

.app-main {
  flex: 1;
  padding: 0 0 24px;
  min-width: 0;
  background: var(--bg);
  margin-left: 184px; /* reserve the fixed .sidebar width */
  transition: margin-left .24s cubic-bezier(.32,.72,0,1);
}

/* Below the drawer breakpoint the rail is off-canvas, so the main column
   takes the full width. */
@media (max-width: 900px) {
  .app-main {
    margin-left: 0;
    /* Clear the fixed app bar. */
    padding-top: 63px;
  }
}


/* ------------------------------------------------------------------
   PAGE SHELL & HEADERS
   ------------------------------------------------------------------ */

.page-shell {
  /* This app has no global border-box reset, so a shell with horizontal
     padding would be 100% + padding wide and scroll the whole page. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* 40px top and bottom, matching the account-settings page (.profile-page),
     which is the reference for page framing. Was 16px top / 0 bottom. */
  padding-top: 40px;
  padding-bottom: 40px;
}

/* A reading-width column, centred. For screens that are one piece of content
   rather than a dashboard of panels — a leaderboard, a report. Content wider
   than this scrolls inside its own component, not on the page. */
.page-shell--narrow {
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: 40px;
}

/* Inside a narrow shell the frame is owned by the shell, so the header drops
   its own inset and lines up with the content below it. */
.page-header--flush {
  padding-inline: 0;
}

.page-card {
  background: var(--bg);
  border-radius: 0;
  border: none;
  padding: 0;
  box-shadow: none;
  min-width: 0;
  overflow-x: clip;
}

/* The 24px page gutter, matching .page-header / .nav-tabs / .search-bar above
   it — a table wrapped in this lines up with the rest of its page instead of
   running edge to edge. border-box is required, not tidiness: this app has no
   global reset, so without it the padding is added outside a 100%-wide block
   and the whole page scrolls sideways instead of the table. */
/* Margin, not padding, and that is load-bearing: a sticky cell pins to the
   scrollport's padding edge, but padding does not clip, so scrolling cells
   would slide through a 24px strip to the left of the frozen columns. The
   gutter has to sit outside the scroll container. */
.table-scroll {
  overflow-x: auto;
  margin: 0 24px 24px;
}

.page-card--scroll {
  overflow-x: auto;
}

/* ---------------------------------------------
   PAGE HEADER (title + top buttons)
   --------------------------------------------- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 0 24px;
}


.page-subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

.page-subtitle--inline {
  font-weight: 400;
  color: var(--black);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Back link — small text with arrow */

/* A quiet way out: grey text with a chevron, ink on hover. Same 24px gutter
   as the page header it sits above. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  font-size: var(--text-base);
  color: var(--gray);
  text-decoration: none;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--ink);
}

/* In a page's own top row, flush with the cards below it. */
.back-link--flush {
  padding-inline: 0;
}

.back-link__arrow {
  flex: none;
}

.page-header h1 {
  margin: 0;
}

/* The one page heading in the app — every screen's h1 wears this class, so
   size and weight are decided here and nowhere else. The whole title carries
   the gradient now; there is no black half any more.
   width: fit-content is load-bearing: background-clip paints across the
   element's box, so a block-level h1 would stretch the gradient over the full
   column and the text would only ever show its leftmost slice. */
.page-title {
  margin: 0;
  width: fit-content;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  /* Not 1: the gradient is clipped to the text's own box, so a line box tight
     to the cap height cuts the descenders off "Targets" and "Settings". */
  line-height: 1.15;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Kept so the existing two-part markup ("Your <span>account settings</span>")
   still renders: the span inherits the transparent colour and lets the
   parent's single gradient run through it, instead of restarting its own. */
.page-title__accent {
  color: inherit;
}

/* Plain ink at the Analytics title's size (.analytics__title): the Settings
   pages' headings, so they read like the app's main screens. */
.page-title--plain {
  font-size: var(--text-4xl);
  line-height: 1;
  background: none;
  color: var(--ink);
}

/* Sits under a mono kicker rather than alone in a header row. */
.page-title--stacked {
  margin-top: 8px;
}

/* Stands directly above its content with no header row to space it — the auth
   and onboarding cards. 24px matches the gap .page-header/.phead leave. */
.page-title--spaced {
  margin-bottom: 24px;
}

.section-title {
  margin: 16px 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.table th,
.table td {
  border-right: var(--border-standard);
}

.table th:last-child,
.table td:last-child {
  border-right: none;
}

.pipeline-reminder--set {
  background: #f0fdf4;
}

.pipeline-reminder--due {
  background: #fef2f2;
}

/* ------------------------------------------------------------------
   TEXT LINK (generic inline link, reusable app-wide)
   ------------------------------------------------------------------ */

.text-link {
  color: var(--text-blue);
  text-decoration: none;
  cursor: pointer;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A person's name in a table or a card: blue and underlined at rest, so it
   is plainly the way into their record. */
.text-link--name {
  font-weight: 500;
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}

.text-link--name:hover {
  text-decoration: underline solid;
}

.text-link--btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.text-link--danger {
  color: var(--red, #e53e3e);
}

.text-link--danger:hover {
  color: var(--red-dark, #c53030);
}
/* --- Phone: the narrow shell --- */

@media (max-width: 640px) {
  .page-shell--narrow {
    padding-inline: 16px;
  }

  .page-title {
    font-size: var(--text-2xl);
  }
}
/* ------------------------------------------------------------------
   STEP INDICATOR (onboarding flow)
   ------------------------------------------------------------------ */

.step-indicator {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--gray-200);
  color: var(--gray-400);
  background: var(--bg);
  box-sizing: border-box;
}

.step-label {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.step-line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin: 11px 4px 0;
}

.step--active .step-dot {
  border-color: var(--text-blue);
  color: var(--text-blue);
  background: var(--card);
}

.step--active .step-label {
  color: var(--text-blue);
  font-weight: 600;
}

.step--done .step-dot {
  border-color: var(--text-blue);
  background: var(--text-blue);
  color: var(--bg);
}

.step--done .step-label {
  color: var(--text-blue);
}

.step--pending .step-dot {
  border-color: var(--gray-200);
  color: var(--gray-400);
}

.step--pending .step-label {
  color: var(--muted);
}
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/* ------------------------------------------------------------------
   Flatpickr (date range picker) – match HTS UI
   ------------------------------------------------------------------ */

.flatpickr-calendar {
  font-family: inherit !important;
  border-radius: 10px !important;
  border: var(--border-standard) !important;
  box-shadow: none !important;
}

.flatpickr-months {
  position: relative;
}

.flatpickr-months .flatpickr-month {
  font-size: 13px;
}

.flatpickr-weekday {
  font-size: 11px;
  color: #9ca3af;
}

.flatpickr-day {
  border-radius: 6px;
  background: transparent !important;
}

/* Padding days from the neighbouring month. Flatpickr marks them with the
   class "hidden" and relies on visibility:hidden so they keep their slot in
   the row; base.css .hidden is display:none !important, which drops them and
   slides the 1st into the Monday column. Restoring it needs the same weight. */
.flatpickr-calendar .flatpickr-day.hidden {
  display: block !important;
  visibility: hidden;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
  background: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--text-blue) !important;
  border-color: var(--text-blue) !important;
  color: #ffffff !important;
}

.flatpickr-day.inRange {
  background: #eeedff !important;
  border-color: #eeedff !important;
  box-shadow: -5px 0 0 #eeedff, 5px 0 0 #eeedff !important;
  border-radius: 0 !important;
  color: var(--text-blue) !important;
}

.flatpickr-day.startRange {
  box-shadow: 5px 0 0 #eeedff !important;
}

.flatpickr-day.endRange {
  box-shadow: -5px 0 0 #eeedff !important;
}

.flatpickr-day.today {
  border-color: var(--text-blue) !important;
}

.flatpickr-day:hover {
  background: rgba(72, 62, 255, 0.15) !important;
  border-color: rgba(72, 62, 255, 0.15) !important;
}

/* Flatpickr range calendar with embedded shortcuts (filter bar) */
.flatpickr-calendar:has(.ds__shortcuts) {
  width: auto !important;
}

.flatpickr-calendar:has(.ds__shortcuts) .dayContainer {
  justify-content: flex-start;
}

.flatpickr-calendar:has(.ds__shortcuts) .flatpickr-day {
  max-width: none;
  text-align: center;
}

/* ------------------------------------------------------------------
   Date-shortcut popover (calendar + quick-pick side panel)
   ------------------------------------------------------------------ */

.ds__popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 60;
  display: flex;
  background: var(--bg);
  border: var(--border-standard);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  margin-bottom: 4px;
}

.ds__calendar {
  flex: 0 0 auto;
}

.ds__calendar .flatpickr-calendar {
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px 0 0 10px !important;
}

.ds__cal-body {
  flex-shrink: 0;
}

.ds__shortcuts {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-left: var(--border-standard);
  min-width: 110px;
  justify-content: center;
  gap: 2px;
}

.ds__shortcut-link {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  color: var(--gray-600);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.ds__shortcut-link:hover {
  color: var(--text-blue);
}

.ds__custom-wrapper {
  margin-top: 4px;
  padding-top: 4px;
  border-top: var(--border-standard);
}

.ds__custom-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ds__custom-number {
  width: 44px;
  padding: 3px 6px;
  border: var(--border-standard);
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.ds__custom-number:focus {
  outline: none;
  border-color: var(--text-blue);
}

.ds__custom-label {
  font-size: 12px;
  color: var(--gray-500);
}
/* ------------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------------ */
/* The sidebar is one component serving both breakpoints: a fixed rail above
   900px, the same element as an off-canvas drawer at or below it. The app bar
   and backdrop exist only in the drawer state. JS toggles exactly two classes
   — .sidebar--open and .sidebar-backdrop--visible — and aria-expanded. */

/* ------------------------------------------------------------------
   SIDEBAR (root + panel)
   ------------------------------------------------------------------ */

/* The shell exists only to give the Stimulus controller one element wrapping
   the burger, the backdrop and the panel. `display: contents` keeps it out of
   .app-layout's flex row — otherwise it becomes a column sized by the app bar
   and pushes the main content sideways. All three children are position:fixed
   (or display:none) at every width, so none of them claim row space. */
.sidebar-shell {
  display: contents;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 184px;
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  overflow: hidden;
  z-index: 10;
}

.sidebar__panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 10px;
  overflow-y: auto;
}

/* --- Settings sub-panel ---
   A second panel beside the first, inside the drawer's overflow: hidden.
   .sidebar--settings slides both left, so Settings arrives without leaving the
   drawer. It exists only below 900px — on desktop the gear is a plain link to
   the settings screen, so the panel is never rendered. */

.sidebar__sub {
  display: none;
}

.sidebar__sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.sidebar__sub-back {
  display: flex;
  padding: 7px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.sidebar__sub-back:hover {
  background: var(--paper);
}

.sidebar__sub-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

.sidebar__sub-title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  /* Both panels are a fixed 308px so neither shrinks to share the drawer. */
  .sidebar__panel,
  .sidebar__sub {
    width: 308px;
    flex: none;
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .sidebar__sub {
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    overflow-y: auto;
  }

  .sidebar--settings .sidebar__panel,
  .sidebar--settings .sidebar__sub {
    transform: translateX(-100%);
  }
}

@media (max-width: 900px) {
  .sidebar {
    top: 63px;
    width: 308px;
    transform: translateX(-104%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 60px rgba(10, 10, 10, 0.18);
    border-right: none;
  }

  .sidebar--open {
    transform: none;
  }
}


/* ------------------------------------------------------------------

.sidebar-header {
  padding: 16px 18px;
}

/* The workspace block at the top of the drawer. Its hairline mirrors the
   one above the account block at the bottom, so the menu sits between two
   rules. */
.sidebar-head {
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

/* Org switcher (sidebar header row) */
.org-switcher {
  position: relative;
  flex: 1;
  min-width: 0;
}

.org-switcher__trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
  text-align: left;
}

.org-switcher__trigger:hover {
  background: #fafafa;
}

.org-switcher__trigger--open {
  background: #fafafa;
}

.org-switcher__trigger--single {
  cursor: default;
}

.org-switcher__trigger--single:hover {
  background: transparent;
}

.org-switcher__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--text-blue, #5b4dff), #a78bfa);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.org-switcher__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.org-switcher__current {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-switcher__chevron {
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.org-switcher__trigger--open .org-switcher__chevron {
  transform: rotate(180deg);
}

/* Dropdown menu. The sidebar clips anything wider than itself, so the menu
   is fixed to the viewport, placed under the trigger by the controller, and
   wide enough for a full organization name. */
.org-switcher__menu {
  display: none;
  position: fixed;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 4px;
  z-index: 1000;
}

.org-switcher__menu--open {
  display: block;
}

/* The search row at the top of the menu: an icon and a bare field. */
.org-switcher__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-400);
}

.org-switcher__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--black);
}

.org-switcher__search-input::placeholder {
  color: var(--gray-400);
}

.org-switcher__list {
  max-height: 300px;
  overflow: auto;
}

.org-switcher__empty {
  margin: 0;
  padding: 14px 9px;
  font-size: 12.5px;
  color: var(--gray-400);
}

.org-switcher__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s ease;
  text-align: left;
}

.org-switcher__option:hover {
  background: var(--gray-50);
}

.org-switcher__option--active {
  background: var(--gray-50);
}

.org-switcher__option-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.org-switcher__option--active .org-switcher__option-initial {
  background: var(--text-blue);
  color: #fff;
}

.org-switcher__option-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher__check {
  color: var(--text-blue);
  flex-shrink: 0;
  margin-left: auto;
}

/* Nav links */

/* ------------------------------------------------------------------
   SIDEBAR NAV / SIDEBAR LINK
   ------------------------------------------------------------------ */

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-nav__group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav__group-label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
  padding: 18px 10px 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* A rep's sidebar: the groups stay in the markup, the headings do not show,
   so the links read as one list. */
.sidebar-nav--flat .sidebar-nav__group-label { display: none; }

.sidebar-nav__group-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-nav__group-label--muted::before { background: var(--gray-2); }
.sidebar-nav__group-label--overview::before { background: var(--dot-overview); }
.sidebar-nav__group-label--setter::before { background: var(--dot-setter); }
.sidebar-nav__group-label--closer::before { background: var(--dot-closer); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gray);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-link:hover {
  background: var(--paper);
  color: var(--ink);
}

.sidebar-link--active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}

.sidebar-link svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.sidebar-link__badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  color: var(--gray-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

@media (max-width: 900px) {
  .sidebar-link {
    gap: 12px;
    padding: 12px 10px;
    font-size: var(--text-xl);
    letter-spacing: -0.015em;
  }

  .sidebar-link svg {
    width: 17px;
    height: 17px;
  }
}


/* ------------------------------------------------------------------

/* ------------------------------------------------------------------
   SIDEBAR SUPPORT
   A WhatsApp link pinned above the account row: white card, hairline
   border, the logo in a pale green tile, two lines of text, an arrow.
   ------------------------------------------------------------------ */

.sidebar-support {
  margin-top: auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 7px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sidebar-support:hover {
  background: var(--paper);
  border-color: var(--whatsapp-line-hover);
  color: var(--ink);
}

/* The logo sits in a pale green tile. */
.sidebar-support__tile {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--whatsapp-bg);
}

.sidebar-support__logo {
  width: 15px;
  height: 15px;
}

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

/* "Need help?" is the bold line; "WhatsApp support" the small green one under it. */
.sidebar-support__sub {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sidebar-support__title {
  font-size: var(--text-xs);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--whatsapp-ink);
}

.sidebar-support__arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--gray-2);
}

/* The card takes over margin-top: auto, so the account row sits right under it. */
.sidebar-support + .sidebar-account {
  margin-top: 0;
}

/* ------------------------------------------------------------------
   SIDEBAR ACCOUNT
   Pinned footer: avatar + name (opens the Profile / Sign out
   popover) with the Settings gear beside it. Same on both
   breakpoints — this is where Sign out lives on desktop too.
   ------------------------------------------------------------------ */

.sidebar-account {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar-account__me {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.sidebar-account__me:hover {
  background: var(--paper);
}

.sidebar-account__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3d, #ff4f9a);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-account__name {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sidebar-account__gear {
  border: none;
  background: none;
  padding: 7px;
  border-radius: var(--radius-md);
  display: flex;
  cursor: pointer;
  color: var(--gray-2);
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-account__gear:hover {
  background: var(--paper);
  color: var(--ink);
}

.sidebar-account__menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 24px 50px -24px rgba(10, 10, 10, 0.34);
  padding: 5px;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 20;
}

.sidebar-account--open .sidebar-account__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sidebar-account__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 10px 11px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s ease;
}

.sidebar-account__menu-item:hover {
  background: var(--paper);
}

.sidebar-account__menu-item svg {
  flex-shrink: 0;
  color: var(--gray);
}

.sidebar-account__menu-item--danger {
  color: var(--danger);
}

.sidebar-account__menu-item--danger svg {
  color: var(--danger);
}

.sidebar-account__menu-item--danger:hover {
  background: var(--danger-bg);
}

.sidebar-account__menu-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}


/* ------------------------------------------------------------------

/* ------------------------------------------------------------------
   SIDEBAR BACKDROP
   Mobile-only. Shown via .sidebar-backdrop--visible (JS), never via
   sibling selectors.
   ------------------------------------------------------------------ */

.sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 8;
  }

  .sidebar-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* --------------------------------------------------
   SETTINGS LAYOUT (secondary sidebar)
   -------------------------------------------------- */

/* Below the drawer breakpoint the settings rail is redundant — the drawer's
   own settings panel carries the same links — and at 400px it would take half
   the screen from the page it is meant to navigate. */
@media (max-width: 900px) {
  .settings-sidebar {
    display: none;
  }

  .settings-layout {
    display: block;
  }
}

.settings-layout {
  display: flex;
  min-height: 100vh;
}

.settings-sidebar {
  width: 176px;
  min-width: 176px;
  background: #fff;
  padding: 16px 10px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}

.settings-nav {
  display: flex;
  flex-direction: column;
}

.settings-nav__group + .settings-nav__group {
  margin-top: 20px;
}

.settings-nav__group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
  padding: 0 14px;
  margin-bottom: 6px;
}

.settings-nav__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--gray, #5f636b);
  font-weight: 400;
  text-decoration: none;
  transition: 0.12s;
}

.settings-nav__link svg {
  color: var(--gray-2, #9aa0a8);
  flex: none;
  transition: color .15s;
}

/* HOVER — soft paper bg, ink text */
.settings-nav__link:hover {
  background: #fafafa;
  color: #4a4e56;
  box-shadow: none;
}
.settings-nav__link:hover svg {
  color: #4a4e56;
}

/* SELECTED / ACTIVE — the main sidebar's (.sidebar-link--active): paper
   background, ink text and icon, bold. */
.settings-nav__link--active,
.settings-nav__link--active:hover {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
.settings-nav__link--active svg {
  color: var(--ink);
}

.settings-content {
  flex: 1;
  overflow-x: auto;
  border-left: var(--border-standard);
}

/* ------------------------------------------------------------------
   TOP BAR (user info)
   ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 14px;
  height: 48px;
  box-sizing: border-box; /* total height stays 48px so the content offset below lines up */
  border-bottom: var(--border-standard);
  background: var(--bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.topbar-left {
  display: flex;
  align-items: center;
  padding-left: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-user {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--black);
  font-size: 13px;
}

.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-blue);
  margin-right: 8px;
}

.topbar-user-name {
  font-weight: 500;
  font-size: 13px;
}

.topbar-signout {
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  color: var(--gray-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.topbar-signout:hover {
  color: var(--danger);
}

/* --------------------------------------------------
   ACCOUNT FOOTER (profile + kebab popover)
   -------------------------------------------------- */


/* ------------------------------------------------------------------
   PAGE TABS (call type switcher on dashboard etc.)
   ------------------------------------------------------------------ */

.nav-tabs {
  display: flex;
  gap: 16px;
  padding: 8px 24px 0;
}

.nav-tab {
  padding: 12px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #888);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tab:hover {
  color: var(--black);
}

.nav-tab--active {
  color: var(--black);
  border-bottom-color: var(--text-blue);
}

.nav-tabs__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.nav-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fee2e2;
  border: 1px solid #fee2e2;
  color: #991b1b;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  line-height: 1;
}

/* Success badge variant (green) */
.nav-tab__badge--success {
  background: #e7f9ee;
  border-color: #e7f9ee;
  color: #166534;
}

/* Neutral badge variant (purple) */
.nav-tab__badge--neutral {
  background: #ede9fe;
  border-color: #ede9fe;
  color: #5b21b6;
}

/* Muted badge variant (gray) */
.nav-tab__badge--muted {
  background: #f3f4f6;
  border-color: #f3f4f6;
  color: #6b7280;
}
/* ------------------------------------------------------------------
   APP BAR
   Mobile-only top bar. Does not exist on desktop.
   ------------------------------------------------------------------ */

.app-bar {
  display: none;
}

@media (max-width: 900px) {
  .app-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    /* Fixed, so it never joins .app-layout's flex row. The drawer and backdrop
       below it start at 63px to match this bar's height. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 14;
  }

  .app-bar__burger {
    border: 1px solid var(--line-2);
    background: #fff;
    border-radius: var(--radius-md);
    padding: 8px;
    display: flex;
    cursor: pointer;
    color: var(--ink);
  }

  .app-bar__burger-close {
    display: none;
  }

  .app-bar__burger[aria-expanded="true"] .app-bar__burger-open {
    display: none;
  }

  .app-bar__burger[aria-expanded="true"] .app-bar__burger-close {
    display: block;
  }

  .app-bar__title {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
}


/* ------------------------------------------------------------------
/* ------------------------------------------------------------------
   STATUS BADGE (read-only pill — shared base)
   ------------------------------------------------------------------ */

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: capitalize;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   STATUS SELECT (interactive dropdown — shared base)
   ------------------------------------------------------------------ */

.status-select {
  width: auto;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;

  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

.status-select::-ms-expand { display: none; }
.status-select:focus,
.status-select:focus-visible { outline: none; box-shadow: none; }

.status-form-cell form {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ------------------------------------------------------------------
   COLORS — shared across badge + select
   Green family   → positive (closed, paid, active, sales_call_booked)
   Yellow family  → warning  (pending, paused, pipeline, followup)
   Red family     → negative (lost, failed, no_show, unqualified, cancelled)
   Purple family  → neutral  (rescheduled)
   Gray family    → muted    (completed, refunded, inactive, removed)
   Blue family    → info     (booked, invited)
   ------------------------------------------------------------------ */

/* --- Green --- */
.status--closed,
.status--paid,
.status--active,
.status--sales_call_booked {
  background-color: #e7f9ee;
  border: var(--border-standard);
  color: #166534;
}

/* --- Yellow --- */
.status--pending,
.status--paused,
.status--pipeline,
.status--followup,
.status--follow_up,
.status--no_product,
.status--no_answer,
.status--trial,
.status--past_due {
  background-color: #fef9c3;
  border: var(--border-standard);
  color: #92400e;
}

/* --- Red --- */
.status--lost,
.status--failed,
.status--no_show,
.status--unqualified,
.status--cancelled,
.status--canceled,
.status--overdue {
  background-color: #fee2e2;
  border: var(--border-standard);
  color: #991b1b;
}

/* --- Purple --- */
.status--rescheduled {
  background-color: #f5ecff;
  border: var(--border-standard);
  color: #6b21a8;
}

/* --- Blue --- */
.status--booked,
.status--invited,
.status--to_contact {
  background-color: #f3f3ff;
  border: var(--border-standard);
  color: var(--text-blue);
}

/* --- Gray --- */
.status--completed,
.status--refunded,
.status--inactive,
.status--removed,
.status--suspended,
.status--canceled_by_lead {
  background-color: #f3f4f6;
  border: var(--border-standard);
  color: #6b7280;
}

.status--refunded {
  text-decoration: line-through;
}

/* --- Roles (team) --- */
.status--owner {
  background-color: #f3f3ff;
  border: var(--border-standard);
  color: var(--text-blue);
}

.status--admin {
  background-color: #f5ecff;
  border: var(--border-standard);
  color: #6b21a8;
}

.status--sales {
  background-color: #e7f9ee;
  border: var(--border-standard);
  color: #166534;
}

.status--setter {
  background-color: #fef9c3;
  border: var(--border-standard);
  color: #92400e;
}

.status--csm {
  background-color: #dbeafe;
  border: var(--border-standard);
  color: #1e40af;
}

/* --- Call types --- */
/* A sales call wears the sales role's green above; the qualification call
   the same blue as the csm role, the one family no call status uses. */
.status--qualification {
  background-color: #dbeafe;
  border: var(--border-standard);
  color: #1e40af;
}

/* --- Payment integrations --- */
.status--stripe {
  background-color: #f3f3ff;
  border: var(--border-standard);
  color: var(--text-blue);
}

.status--plug_and_pay {
  background-color: #e7f9ee;
  border: var(--border-standard);
  color: #166534;
}

.status--manual {
  background-color: #f3f4f6;
  border: var(--border-standard);
  color: #6b7280;
}

.lead-or {
  align-self: center;
  color: var(--muted);
  font-size: var(--font-sm);
  margin: 0 6px;
}

/* ------------------------------------------------------------------
   STATUS DROPDOWN (custom dropdown replacing native select)
   ------------------------------------------------------------------ */

.sd {
  position: relative;
  display: inline-block;
}

.sd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: var(--border-standard);
  font-family: inherit;
}

.sd__chevron {
  opacity: 0.5;
  flex-shrink: 0;
}

/* Menu */
.sd__menu {
  display: none;
  position: fixed;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 4px;
  z-index: 1000;
}

.sd__menu--open {
  display: block;
}

/* Option */
.sd__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s ease;
  text-align: left;
}

.sd__option:last-child {
  border-bottom: none;
}

.sd__option:hover {
  background: var(--gray-50);
}

.sd__option--active {
  background: #f3f3ff;
}

.sd__option-badge {
  pointer-events: none;
}

/* Info icon + tooltip */
.sd__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--gray-400);
  cursor: help;
  margin-left: auto;
  flex-shrink: 0;
}

.sd__info:hover {
  color: var(--gray-600);
}

.sd__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900, #1f2937);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: normal;
  width: 180px;
  text-align: center;
  pointer-events: none;
  z-index: 1001;
}

.sd__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gray-900, #1f2937);
}

.sd__tooltip--visible {
  display: block;
}

/* --- Lead status color picker --- */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch {
  cursor: pointer;
  line-height: 0;
}

/* Hide the native radio; the dot is the control */
.color-swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.color-swatch__dot {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  box-sizing: border-box;
  transition: outline 0.1s ease;
}

.color-swatch input[type="radio"]:checked + .color-swatch__dot {
  outline: 2px solid var(--text-blue);
  outline-offset: 2px;
}

.color-swatch input[type="radio"]:focus-visible + .color-swatch__dot {
  outline: 2px solid var(--text-blue);
  outline-offset: 2px;
}

/* Small status color indicator (customize list, etc.) */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid transparent;
}

/* ------------------------------------------------------------------
   LEAD STATUS — customize list rows (badge + pencil; edit opens a modal)
   ------------------------------------------------------------------ */

.lsrow { border-bottom: var(--border-standard); }
.lsrow:last-child { border-bottom: none; }

/* drag feedback */
.lsrow.dragging { opacity: .4; }
.lsrow.drag-over { border-top: 2px solid var(--text-blue); }
.lsrow__main[draggable="true"] { -webkit-user-drag: element; }

/* "New lead status" — sits at the bottom of the modal */
.ls-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px dashed var(--gray-300);
  border-radius: 9px;
  color: var(--text-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ls-new:hover { background: #fafaff; border-color: var(--text-blue); }

.lsrow__main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-radius: 8px;
}
.lsrow:hover .lsrow__main { background: #fafaff; }

.lsrow__grip {
  color: var(--gray-300);
  cursor: grab;
  flex: none;
  line-height: 1;
  font-size: 15px;
  user-select: none;
}
.lsrow__grip:active { cursor: grabbing; }
.lsrow__spacer { flex: 1; }

/* Row shows the status as its actual badge */
.lsrow__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.lsrow__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; opacity: .9; }
.lsrow__name { color: inherit; }

.lsrow__actions { display: flex; align-items: center; gap: 2px; }

.iconbtn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.iconbtn:hover { background: var(--gray-100); color: var(--gray-700); }
.iconbtn--danger:hover { background: #fee2e2; color: #b91c1c; }

/* ------------------------------------------------------------------
   STATUS FILTER BAR  (color-badge tabs on /leads — replaces .nav-tabs there)
   Same logic as the submenu: the active item gets an underline near the
   baseline, in the status's own color. No hover/border state.
   ------------------------------------------------------------------ */

.statusbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 24px 10px;
}
.statusbar__spacer  { flex: 1 1 0; min-width: 8px; }
.statusbar__divider { width: 1px; height: 20px; background: var(--gray-200); margin: 0 2px; }

.spill {
  --st-bg: #f1f5f9;
  --st-text: #334155;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: var(--st-bg);
  color: var(--st-text);
  border: 1px solid color-mix(in srgb, var(--st-text) 12%, transparent);
}

/* Selected = an underline at the baseline, in the status's color. */
.spill.is-active { font-weight: 700; }
.spill.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -7px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--st-text);
}

.spill__label { letter-spacing: -.005em; }
.spill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--st-text) 14%, transparent);
  color: var(--st-text);
}

/* Utility filters (not statuses) keep a fixed neutral identity, same size. */
.spill--util      { --st-bg: #f1f5f9; --st-text: #334155; }
.spill--reminders { --st-bg: #fee2e2; --st-text: #991b1b; }
.spill--plain     { --st-bg: #ffffff; --st-text: #334155; border-color: var(--gray-200, #e2e8f0); }

.spill__count--danger {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------
   MONEY
   ------------------------------------------------------------------ */
/* A money figure as the KPIs count it: the net amount, with the gross the
   provider charged in small quiet text beside it. Rendered by the
   format_money helper; CSS only sets the second figure's size and tone. */

/* --- Parts --- */
.money__gross {
  font-size: var(--text-sm);
  color: var(--gray-2);
  white-space: nowrap;
}
/* ------------------------------------------------------------------
   READ OPERATIONS & QUERY UI (Filters)
   ------------------------------------------------------------------ */

.filters-block {
    padding-top: 30px;
    padding-bottom: 30px;
}

.filter-row-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 0px;
    padding: 0 24px;
}

.filter-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 0px;
    padding: 0;
}

.filter-field {
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 130px;
}

.filter-field--wide {
    min-width: 182px;
    max-width: 252px;
}

.filter-input--date-range,
.filter-input--date-range + .flatpickr-input.active + input.form-control {
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--black);
    letter-spacing: 0.01em;
}

/* Flatpickr creates an altInput — style it too */
input.flatpickr-input + input {
    font-size: 11px !important;
}

.filter-label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 500;
}

.filter-section-wrapper {
    padding: 0;
    border: none;
    background: transparent;
}

.filter-input {
    width: 100%;
    padding: 6px 10px;
    border: var(--border-standard);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    height: 34px;
    box-sizing: border-box;
    background-color: var(--bg);
}

/* The date-range picker sits in a filter row next to buttons and dropdown
   triggers, so it takes their height, border and radius rather than the 34px
   and 0.5px --border-standard hairline the base .filter-input uses for inline
   table fields. Declared after .filter-input because both are single-class
   selectors — order is the only tie-breaker, and the base rule sets a fixed
   `height` and its own border. */
.filter-input--date-range,
.filter-input--date-range + .flatpickr-input.active + input.form-control {
    height: auto;
    min-height: var(--control-h);
    padding: 9px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background-color: #fff;
    color: var(--ink);
}

.filter-input:focus {
    border-color: var(--primary-dark);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

select.filter-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 30px;
    cursor: pointer;
    color: var(--ink, #1e1e2f);
    font-weight: 500;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Search bar ---------- */

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
}
.search-bar--wrap {
  flex-wrap: wrap;
}
.search-bar__input--full {
  width: 100%;
  flex: none;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px 6px 30px;
  border: var(--border-standard);
  border-radius: 6px;
  font-size: 13px;
  height: 34px;
  box-sizing: border-box;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

.search-bar__input:focus {
  border-color: var(--primary-dark);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ---------- Filter group (label + input) ---------- */

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group--grow {
  flex: 1;
  min-width: 0;
}

.filter-group__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* ------------------------------------------------------------------
   PAYMENTS — Utility classes used in payment views
   ------------------------------------------------------------------ */

.text-success {
  color: var(--success);
  font-weight: 500;
}

.text-danger {
  color: var(--danger);
  font-weight: 500;
}
/* components.css*/

.label-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.label-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label-list__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.empty-state-text {
  font-size: 13px;
  color: var(--text-muted, #888);
  padding: 8px 0;
}

.label-list__form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-list__input {
  padding: 6px 8px;
  border: var(--border-standard);
  border-radius: 6px;
  font-size: 13px;
  height: 32px;
  box-sizing: border-box;
  width: 160px;
}

/* Call type badge */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge--sales {
  background-color: #f0f0ff;
  color: var(--text-blue);
}

.badge--qualification {
  background-color: #fff8eb;
  color: #92600a;
}

/* Provider variants */
.badge--pnp {
  background-color: #e8f0fe;
  color: #1a56db;
}

.badge--stripe {
  background-color: #ede9fe;
  color: #6d28d9;
}

.badge--call {
  background-color: #f3f4f6;
  color: #374151;
}

/* Attribution variants */
.badge--attributed {
  background-color: #d1fae5;
  color: #065f46;
}

.badge--unattributed {
  background-color: #fee2e2;
  color: #991b1b;
}

/* ------------------------------------------------------------------
   CONTACT SHOW — Top layout (card + products side by side)
   ------------------------------------------------------------------ */

.contact-show__top {
  display: flex;
  gap: 16px;
  padding: 0 24px;
  margin-bottom: 0;
}

.contact-show__products {
  width: 320px;
  flex-shrink: 0;
}

.contact-show__products--wide {
  width: auto;
  flex: 1;
  min-width: 0;
}

.contact-show__panel-footer {
  padding: 12px 0 0;
}

@media (max-width: 768px) {
  .contact-show__top {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------
   CONTACT CARD — Compact info card (left column)
   ------------------------------------------------------------------ */

.contact-card {
  width: 260px;
  flex-shrink: 0;
  background: var(--gray-50);
  border: var(--border-standard);
  border-radius: var(--radius);
  padding: 20px;
}

.contact-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.contact-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text-blue);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.contact-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.contact-card__input--name {
  max-width: 120px;
  font-size: 15px;
  font-weight: 600;
}

.contact-card__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-card__field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
}

.contact-card__icon {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-400);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.contact-card__icon-svg {
  color: var(--gray-400);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.contact-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
}

.contact-card__value {
  color: var(--black);
  font-size: 13px;
}

.contact-card__value--muted {
  color: var(--gray-500);
}

.contact-card__notes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: var(--border-standard);
}

.contact-card__notes-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.contact-card__notes-text {
  font-size: 13px;
  color: var(--gray-700);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Inline edit inputs (hidden by default) */

.contact-card__input {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  font-size: 13px;
  border: var(--border-standard);
  border-radius: 4px;
  background: var(--bg);
  font-family: inherit;
}

.contact-card__input:focus {
  outline: none;
  border-color: var(--text-blue);
}

.contact-card__textarea {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  font-size: 13px;
  border: var(--border-standard);
  border-radius: 4px;
  background: var(--bg);
  font-family: inherit;
  resize: vertical;
  margin-top: 4px;
}

.contact-card__textarea:focus {
  outline: none;
  border-color: var(--text-blue);
}

/* Footer — Edit left, Delete right */

.contact-card__footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: var(--border-standard);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-card__footer-link {
  font-size: 12px;
  color: var(--text-blue);
  text-decoration: none;
  transition: color 0.15s;
}

.contact-card__footer-link:hover {
  text-decoration: underline;
  color: var(--text-blue);
}

.contact-card__footer-link--save {
  color: var(--text-blue);
}

.contact-card__footer-link--save:hover {
  color: var(--text-blue);
}

.contact-card__footer-link--danger {
  color: var(--danger);
}

.contact-card__footer-link--danger:hover {
  color: var(--danger);
}

/* Contact show — calls section (full width below top row) */

.contact-show__calls {
  margin-top: 16px;
  padding: 0 24px;
}

/* Section header inside contact show cards — no extra top margin */

.contact-show__section-header {
  margin-bottom: 12px;
}

.contact-show__section-header .detail-view__section-title {
  margin: 0;
}

/* Contact show panel — bordered card for tables */

.contact-show__panel {
  border: var(--border-standard);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--gray-50);
}

.contact-show__panel .table {
  border: var(--border-standard);
  border-radius: var(--radius);
  background: var(--bg);
}

.contact-show__panel .table thead {
  background: var(--bg);
}

.contact-show__panel .table th {
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--border-standard);
}

.contact-show__panel .table td {
  border-bottom: var(--border-standard);
}

.contact-show__panel .table tbody tr:last-child td {
  border-bottom: none;
}

/* Reminder badge (calls table) */

.reminder-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--card);
  border: var(--border-standard);
  color: var(--text-blue);
  cursor: default;
  white-space: nowrap;
}

.reminder-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg, #f8f8fa);
  border: 1px solid var(--line, #e0dfe6);
  color: var(--text-muted, #888);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.reminder-btn:hover {
  background: rgba(91, 77, 255, .06);
  border-color: rgba(91, 77, 255, .20);
  color: var(--text-blue, #5b4dff);
}

.reminder-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.reminder-btn--active {
  color: var(--text-blue, #5b4dff);
  background: rgba(91, 77, 255, .06);
  border-color: rgba(91, 77, 255, .18);
}

.reminder-btn--overdue {
  color: var(--red, #ef4444);
  background: rgba(239, 68, 68, .06);
  border-color: rgba(239, 68, 68, .18);
}

/* A row-level "add this" affordance. Quiet on purpose: a table of 50 calls
   repeats it three times per row, and as a filled button the empty state
   shouted louder than the data. Dashed underline, mono, gray — it reads as an
   invitation, not a control. */
.recording-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 1px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--line-2);
  color: var(--gray-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}

.recording-btn:hover {
  color: var(--ink);
  border-color: var(--gray-2);
}

/* The plus stays on the "add" state, next to the label. Once something is
   there the label alone is enough, so the pencil and microphone are hidden. */
.recording-btn--active svg,
.notes-btn--active svg {
  display: none;
}

/* Something is already there, so it is content rather than an invitation. */
.recording-btn--active {
  color: var(--ink);
  border-bottom-color: transparent;
}

/* Sized to the label's line so the badge never pushes the text off the
   baseline the notes button next to it sits on. */
.recording-btn__count {
  background: rgba(91, 77, 255, .12);
  color: var(--text-blue, #5b4dff);
  padding: 0 6px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
}

/* Same treatment as .recording-btn — see the note there. */
.notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 1px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--line-2);
  color: var(--gray-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}

.notes-btn:hover {
  color: var(--ink);
  border-color: var(--gray-2);
}

.notes-btn--active {
  color: var(--ink);
  border-bottom-color: transparent;
}

.notes-btn--danger {
  color: #991b1b;
  background: rgba(239, 68, 68, .06);
  border-color: rgba(239, 68, 68, .18);
}

.notes-btn--danger:hover {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .3);
}

.notes-hover-wrapper {
  position: relative;
  display: inline-block;
}

.notes-hover-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 200px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e0dfe6);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #0e0b2c);
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
}

.notes-hover-wrapper:hover .notes-hover-tooltip {
  display: block;
}

.reminder-note-preview {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 3px;
  line-height: 1.3;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card__swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
/* Bulk header controls (select all / clear / bulk actions button in table header) */

.bulk-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bulk-header__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bulk-header__controls[hidden] { display: none; }

.bulk-header__link {
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-blue, #483eff);
  font-weight: 600;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
}
.bulk-header__link:hover { background: rgba(72, 62, 255, .06); }
.bulk-header__link--mute { color: var(--text-muted, #8a85a8); font-weight: 500; }
.bulk-header__link--mute:hover { color: var(--text, #0e0b2c); }

.bulk-header__pipe {
  color: var(--text-muted, #8a85a8);
  font-size: 12px;
  user-select: none;
}

/* Bulk modal */

.bulk-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 44, .35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bulkFadeIn .15s ease-out;
}
.bulk-modal-backdrop[hidden] { display: none; }

@keyframes bulkFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bulk-modal {
  background: var(--bg, #fff);
  border-radius: 14px;
  width: 380px;
  max-height: 80vh;
  box-shadow: 0 20px 60px -12px rgba(14, 11, 44, .3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: bulkSlideIn .18s ease-out;
}

@keyframes bulkSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bulk-modal__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-color, #eceaf4);
}

.bulk-modal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #0e0b2c);
  margin: 0;
  flex: 1;
}

.bulk-modal__back {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted, #8a85a8);
}
.bulk-modal__back:hover { background: #f4f2fb; color: var(--text, #0e0b2c); }

.bulk-modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted, #8a85a8);
  padding: 4px 8px;
  border-radius: 6px;
}
.bulk-modal__close:hover { background: #f4f2fb; color: var(--text, #0e0b2c); }

.bulk-modal__selection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(72, 62, 255, .04);
  border-bottom: 1px solid var(--border-color, #eceaf4);
  font-size: 13px;
}

.bulk-modal__sel-link {
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-blue, #483eff);
  font-weight: 600;
  font-family: inherit;
  padding: 2px 4px;
  border-radius: 4px;
}
.bulk-modal__sel-link:hover { background: rgba(72, 62, 255, .08); }
.bulk-modal__sel-link--mute { color: var(--text-muted, #8a85a8); font-weight: 500; }
.bulk-modal__sel-link--mute:hover { color: var(--text, #0e0b2c); }

.bulk-modal__sel-pipe {
  color: var(--text-muted, #8a85a8);
  font-size: 12px;
  user-select: none;
}

.bulk-modal__body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
}

/* Page 1: action options */
.bulk-modal__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--border-color, #eceaf4);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0e0b2c);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.bulk-modal__option svg { color: var(--text-muted, #8a85a8); flex: none; }
.bulk-modal__option span { flex: 1; text-align: left; }
.bulk-modal__chevron { color: var(--text-muted, #8a85a8) !important; }
.bulk-modal__option:hover {
  border-color: var(--text-blue, #483eff);
  background: rgba(72, 62, 255, .04);
}
.bulk-modal__option:hover svg { color: var(--text-blue, #483eff); }

/* Page 2/3: choice list */
.bulk-modal__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--border-color, #eceaf4);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text, #0e0b2c);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  text-align: left;
}
.bulk-modal__choice:hover {
  border-color: var(--text-blue, #483eff);
  background: rgba(72, 62, 255, .04);
}
.bulk-modal__choice.is-selected {
  border-color: var(--text-blue, #483eff);
  background: linear-gradient(135deg, rgba(72, 62, 255, .08), rgba(211, 107, 255, .04));
  color: var(--text-blue, #483eff);
  font-weight: 600;
}

.bulk-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--text-muted, #8a85a8);
}

/* Footer with count + save */
.bulk-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-color, #eceaf4);
}

.bulk-modal__count {
  font-size: 13px;
  color: var(--text-muted, #8a85a8);
  font-weight: 500;
}

.bulk-modal__save {
  background: linear-gradient(135deg, var(--text-blue, #483eff), #7c6cff);
  color: #fff;
  border: 0;
  padding: 9px 20px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
}
.bulk-modal__save:hover { filter: brightness(1.06); }
.bulk-modal__save:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}
/* ------------------------------------------------------------------
   DETAIL VIEW — Generic show-page component
   Usage: .detail-view > .detail-view__grid > .detail-view__item
   ------------------------------------------------------------------ */

.detail-view {
  padding: 20px 24px;
}

.detail-view__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}

@media (max-width: 768px) {
  .detail-view__grid {
    grid-template-columns: 1fr;
  }
}

.detail-view__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-view__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.detail-view__value {
  font-size: 14px;
  color: var(--black);
}

.detail-view__section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: var(--border-standard);
}

.detail-view__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-view__section-header .detail-view__section-title {
  margin-bottom: 0;
}

.detail-view__section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0 0 16px;
}

.detail-view__actions {
  display: flex;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: var(--border-standard);
}
/* ------------------------------------------------------------------
   COMBOBOX (autocomplete search select)
   ------------------------------------------------------------------ */

.combobox {
  position: relative;
}

.combobox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg);
  border: var(--border-standard);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.combobox__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
}

.combobox__option:hover,
.combobox__option--active {
  background: var(--light-hover);
}

.combobox__option-text {
  font-weight: 500;
  color: var(--gray-800);
}

.combobox__option-sub {
  color: var(--gray-400);
  font-size: 12px;
}

.combobox__empty {
  padding: 10px;
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
}
/* ------------------------------------------------------------------
   COPY BUTTON
   ------------------------------------------------------------------ */
/* The small icon beside a value that can be copied — a phone number, an
   email. copy_controller.js writes the value to the clipboard and then swaps
   the button's contents for a tick and the word "Copied" for a moment,
   adding .copy--done while it does.

   It is its own block rather than a .notes-btn because that block hides any
   svg inside it, which left this button rendering as an empty rectangle. */

/* --- Root --- */

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.copy-btn:hover {
  color: var(--ink);
  background: var(--paper);
}

/* The controller replaces the button's markup with its own svg on success, so
   the icon cannot be reached by a class — this is the one place a bare
   element selector is the only hook there is. */
.copy-btn svg {
  flex: none;
}

/* --- Done --- */

/* Set by copy_controller.js for ~1.2s after a successful copy. */
.copy--done {
  color: var(--success);
}

/* Reusable dropdown: a trigger button plus a menu positioned under it.
   Opening and closing is handled by dropdown_controller.js, which toggles
   the `hidden` class on the menu, or by select_dropdown_controller.js, which
   toggles the `hidden` attribute instead — the open-state selectors below
   accept either. Positioning is pure CSS — the root is the containing block,
   the menu is taken out of flow so it overlays the page. */

/* --- Root ------------------------------------------------------------- */

.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* --- Trigger ---------------------------------------------------------- */

.dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  /* Sized to its label, not to the menu. The menu is absolute and 248px wide,
     so it stays readable however narrow the closed trigger gets; a long label
     (a KPI name on the leaderboard) truncates at 240px rather than setting the
     width for every short one ("All Sources"). */
  min-width: 0;
  max-width: 240px;
  min-height: var(--control-h);
  padding: 9px 12px 9px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* See-through: the surface behind it carries the colour (a status tint on
   the subscription page), and the label takes that surface's ink. */
.dropdown__trigger--tinted {
  background: transparent;
  border-color: transparent;
  color: inherit;
}

.dropdown__trigger:hover {
  background: var(--paper);
}

/* Doubled to beat the hover above: a tinted trigger keeps its surface. */
.dropdown__trigger--tinted.dropdown__trigger--tinted:hover {
  background: transparent;
}

/* Open state — the menu is the trigger's next sibling, so no extra class
   has to be put on the trigger itself. Open means neither the `hidden`
   class nor the `hidden` attribute is present. */
.dropdown__trigger:has(+ .dropdown__menu:not(.hidden):not([hidden])) {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

/* min-width: 0 is what lets the label shrink below its own text width — a
   flex child refuses to otherwise, and the ellipsis never appears. */
.dropdown__label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown__chevron {
  flex: none;
  margin-left: auto;
  color: var(--gray);
  transition: transform 0.18s;
}

.dropdown__trigger:has(+ .dropdown__menu:not(.hidden):not([hidden])) .dropdown__chevron {
  transform: rotate(180deg);
}

/* --- Menu ------------------------------------------------------------- */

/* Placed directly below the trigger, right edges aligned. `absolute` takes
   the menu out of flow, so it overlays what follows instead of pushing it. */
.dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  width: 248px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-menu);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Long lists scroll instead of running off the screen */
.dropdown__menu--scroll {
  max-height: 300px;
}

/* Room for a label and a count on the same line. The menu clips its overflow
   (it scrolls vertically), so a narrow menu eats the numbers rather than
   widening for them. */
.dropdown__menu--wide {
  width: 304px;
}

/* Hangs from the trigger's left edge, for a menu that opens under a control
   sitting at the start of a row rather than at the end of one. */
.dropdown__menu--start {
  left: 0;
  right: auto;
}

/* Floats above the page instead of inside the trigger's container, for a
   dropdown that sits in a scroll box (a card table): an absolute menu there
   is clipped by the box's edge. select_dropdown_controller.js sets top and
   left from the trigger's screen position when it opens. */
.dropdown__menu--fixed {
  position: fixed;
  right: auto;
}

/* --- Options ---------------------------------------------------------- */

.dropdown__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* No global border-box reset in this app: without this the option measures
     100% of the menu PLUS its own padding and its right end — the count — is
     clipped by the menu's overflow. */
  box-sizing: border-box;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s;
  /* The block is tag-agnostic: as an <a> it would otherwise inherit the
     global link underline and colour. */
  text-decoration: none;
}

.dropdown__option:hover,
.dropdown__option--active {
  background: var(--paper);
}

.dropdown__option--divider {
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* Still selectable, but reads as secondary — an inactive member, a lead
   source that is no longer tracked */
.dropdown__option--muted {
  color: var(--gray);
}

/* A menu of links needs no text-decoration and no visited colour. */
.dropdown__option:hover {
  color: var(--ink);
  text-decoration: none;
}

/* --- Count ------------------------------------------------------------ */

/* How many rows the option leads to. Pushed to the far edge so the numbers
   line up down the menu, and quiet enough not to compete with the label. */
.dropdown__count {
  margin-left: auto;
  padding-left: 12px;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  font-feature-settings: "tnum";
}

/* A short word after the label, pushed to the right: a member's role next
   to their name. The same quiet mono as the group heading, so it reads as
   a note on the option, not a second label. */
.dropdown__hint {
  flex: 0 0 auto;
  min-width: 112px;
  margin-left: auto;
  padding-left: 12px;
  text-align: left;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Dot -------------------------------------------------------------- */

/* The status swatch in front of an option's label. Colour is set inline from
   the status record, or by a modifier for the fixed call statuses. */
.dropdown__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--line-2);
}

.dropdown__option--active .dropdown__dot {
  background: var(--ink);
}

.dropdown__dot--booked {
  background: var(--success);
}

.dropdown__dot--rescheduled {
  background: var(--gold);
}

.dropdown__dot--no-show {
  background: var(--danger);
}

.dropdown__dot--canceled {
  background: var(--gray-2);
}

.dropdown__dot--closed {
  background: var(--ink);
}

/* --- Groups ----------------------------------------------------------- */

/* Optional heading group inside the menu. Options sit inside it unchanged;
   the group only adds the label and the separating hairline. */
.dropdown__group {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.dropdown__group-label {
  display: block;
  padding: 4px 10px 6px;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* Member groups: the same green and red as the member filter's headings
   (.source-picker__group-label--active / --removed). */
.dropdown__group-label--active {
  color: var(--success);
}

.dropdown__group-label--removed {
  color: var(--danger);
}

/* Source groups (ad platforms / organic / custom): the violet the ads
   table's group dividers use (.analytics__group-label). */
.dropdown__group-label--paid,
.dropdown__group-label--organic,
.dropdown__group-label--custom {
  color: var(--level-on);
}

/* --- Check icon ------------------------------------------------------- */

.dropdown__check {
  flex: none;
  margin-left: auto;
  color: var(--ink);
  opacity: 0;
}

.dropdown__option--active .dropdown__check {
  opacity: 1;
}
/* ------------------------------------------------------------------
   BUSY FRAME
   ------------------------------------------------------------------ */
/* A Turbo frame that shows the app mark while it fetches. Turbo sets the
   `busy` attribute on a frame for the length of the request and removes it
   when the new content lands, so this is CSS only: the loader sits inside
   the frame, hidden until the frame is busy, then covers the stale content
   with a white veil and a pulsing mark. No JavaScript. */

/* --- Root --- */
.busy-frame {
  display: block;
  position: relative;
}

/* --- Parts --- */
.busy-frame__loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  /* Translucent white: the surface colour with the content showing through,
     no token exists for a veil. */
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-xl);
}

.busy-frame__mark {
  width: 44px;
  height: 44px;
  animation: busyFramePulse 1.1s ease-in-out infinite;
}

/* --- State --- */
.busy-frame[busy] .busy-frame__loader {
  display: flex;
}

@keyframes busyFramePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1); }
}
/* ------------------------------------------------------------------
   DATA TABLE
   ------------------------------------------------------------------ */
/* A dense table of numbers: hairline rules between rows, no outer border, no
   card. Headers are mono uppercase micro-labels; figures are mono and
   right-aligned so digits line up down the column. Text columns opt out with
   the --left modifier.

   Distinct from `.table` in tables.css, which is the older bordered-card
   treatment still used by most screens. Both exist on purpose: the redesign
   migrates one screen at a time. No JavaScript. */

/* --- Root --- */

/* Every column keeps its padding, edges included: the table scrolls inside
   this box when there are more KPIs than fit, and zeroing the outer cells
   would leave the last column flush against the edge mid-scroll. */
.data-table {
  margin-top: 34px;
  overflow-x: auto;
}

/* --- Card --- */
/* The same hairline frame the calls and customers tables wear (.table in
   tables.css).

   No overflow: hidden — this box is the scroll container for the sticky
   identity column, so the corner cells round themselves, exactly as .table
   does. */
.data-table--card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

/* The last row is a tfoot totals row where there is one (KPI breakdown) and
   the last body row where there is not (leaderboard); both round so a hover
   fill never squares off the frame. */
.data-table--card tfoot .data-table__cell:first-child,
.data-table--card tbody tr:last-child .data-table__cell:first-child {
  border-bottom-left-radius: var(--radius-xl);
}

.data-table--card tfoot .data-table__cell:last-child,
.data-table--card tbody tr:last-child .data-table__cell:last-child {
  border-bottom-right-radius: var(--radius-xl);
}

/* --- Flush --- */
/* Inside a card that draws its own frame and header bar (the contact page's
   sections): no top margin, and the head row on the inset surface with a
   hairline under it, so the columns read as the card's own. The bottom
   corners round with the card. */
.data-table--flush {
  margin-top: 0;
}

.data-table--flush .data-table__head {
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.data-table--flush .data-table__cell {
  padding: 13px 14px;
}

.data-table--flush .data-table__head:first-child,
.data-table--flush .data-table__cell:first-child {
  padding-left: 22px;
}

.data-table--flush tbody tr:first-child .data-table__cell {
  border-top: none;
}

.data-table--flush tbody tr:last-child .data-table__cell:first-child {
  border-bottom-left-radius: var(--radius-xl);
}

.data-table--flush tbody tr:last-child .data-table__cell:last-child {
  border-bottom-right-radius: var(--radius-xl);
}

/* --- Ruled --- */
/* A hairline between columns, for a grid where each column is a separate
   measure rather than one series read across — without it the eye runs from
   one KPI's number into the next KPI's. */
.data-table--ruled .data-table__head:not(:last-child),
.data-table--ruled .data-table__cell:not(:last-child) {
  border-right: 1px solid var(--line);
}

/* --- Inset --- */
/* Only for pages that do not already inset their own content the way
   .leaderboard-body does. 24px matches .kpi-grid, so the frame lines up with
   the cards above it. */
.data-table--inset {
  margin-inline: 24px;
}

@media (max-width: 900px) {
  .data-table--inset {
    margin-inline: 16px;
  }
}

.data-table__table {
  width: 100%;
  border-collapse: collapse;
}

/* --- Head --- */

.data-table__head {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
  text-align: right;
  /* Generous horizontal room: these are long KPI names sitting next to each
     other, and they need air to read as separate columns. */
  padding: 14px 20px 9px;
  white-space: nowrap;
}

/* --- Rows and cells --- */

.data-table__row {
  transition: background 0.12s ease;
}

.data-table__row:hover {
  background: var(--paper);
}

.data-table__cell {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  /* body sets --text-blue as the default ink; opt out. */
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: right;
}

/* --- Modifiers --- */

/* Text columns — names, labels, anything not a figure. */
.data-table__head--left,
.data-table__cell--left {
  text-align: left;
}

/* A heading over a column whose cells are a composed row rather than a single
   right-aligned figure — it sits over the whole column, not at its edge. */
.data-table__head--center {
  text-align: center;
}

/* Figures: mono so columns of digits align, and one step back from the ink so
   the row reads as data rather than as a wall of headlines. */
.data-table__cell--numeric {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--gray);
}

/* The position number. Fixed width so the column does not jump between 9 and
   10 rows. */
.data-table__cell--rank {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
  text-align: left;
  width: 48px;
}

/* First place carries the same gold as the podium. */
.data-table__row--top .data-table__cell--rank {
  color: var(--gold);
  font-weight: 600;
}

/* A zero or a missing value is still information — recede it rather than
   hiding it, so the column keeps its shape. */
.data-table__blank {
  color: var(--gray-2);
  font-weight: 400;
}

/* --- Empty state --- */

.data-table__empty {
  padding: 32px 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--gray-2);
  font-size: var(--text-base);
}

/* --- Sticky identity columns --- */

/* Rank and name stay put while the KPI columns scroll, so a row is never
   anonymous mid-scroll. They need an opaque background or the scrolling cells
   show through, and they have to follow the row's hover with it. */
.data-table__head--sticky,
.data-table__cell--sticky {
  position: sticky;
  background: #fff;
  z-index: 1;
}

.data-table__head--sticky:first-child,
.data-table__cell--sticky:first-child {
  left: 0;
}

.data-table__head--sticky:nth-child(2),
.data-table__cell--sticky:nth-child(2) {
  left: 48px;
}

/* A sticky cell is its own stacking layer, so a popup opened inside one (the
   Meta name tooltip) would be painted under the rows below it. The hovered
   row's cell steps above its neighbours for as long as the popup can be open. */
.data-table__row:hover .data-table__cell--sticky {
  background: var(--paper);
  z-index: 2;
}

/* A row the reader has ticked (the Meta campaign picker). The same tint as
   hover, held; the sticky cell paints its own background so it needs it too. */
.data-table__row--picked,
.data-table__row--picked .data-table__cell--sticky {
  background: var(--paper);
}

/* --- Phone --- */

@media (max-width: 640px) {
  .data-table {
    margin-top: 20px;
  }

  .data-table__head,
  .data-table__cell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .data-table__head--sticky:nth-child(2),
  .data-table__cell--sticky:nth-child(2) {
    left: 40px;
  }

  .data-table__cell--rank {
    width: 40px;
  }
}
/* ------------------------------------------------------------------
   SECTION CARD
   ------------------------------------------------------------------ */
/* A framed card with a header bar: the title, an optional count pill and
   the section's one action at the far edge, then the section's own body.
   The record pages (contact, subscription) are built from these. A table
   inside is .data-table--flush; anything else sits in .csec__body. No JS. */

.csec {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
}

.csec__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}

.csec__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.csec__count {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--gray);
}

.csec__action {
  margin-left: auto;
}

/* Cards inside the section keep the bar's inset. */
.csec__body {
  padding: 18px 22px 22px;
}

/* One quiet line, not a hero: the section is empty, and that is all. */
.csec__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--gray);
}

.csec__empty-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  color: var(--gray-2);
}


/* ------------------------------------------------------------------
   PLAN — a subscription's plan in words (subscriptions/_plan)
   ------------------------------------------------------------------ */
/* Rendered inside a card row or the hero; only the "· 5 × monthly" tail
   needs a style, receding behind the billing type. */

.plan__dim {
  color: var(--gray-2);
  font-weight: 400;
}
/* ------------------------------------------------------------------
   REMINDER CELL — calls/_reminder_cell
   ------------------------------------------------------------------ */
/* The reminder column in the calls, leads and customers tables. The chip
   opens the show modal, Done completes the reminder, and Add only appears
   while its row is hovered — an empty cell should read as empty. */

/* --- Root --- */

.reminder-cell {
  white-space: nowrap;
}

/* --- Chip --- */

.reminder-cell__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;

  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  padding: 6px 11px;

  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.reminder-cell__ic {
  color: var(--gray-2);
  flex-shrink: 0;
}

.reminder-cell__chip:hover {
  border-color: var(--gray-2);
  background: var(--paper);
}

.reminder-cell__time {
  color: var(--gray-2);
}

/* --- Due state --- */
/* Soft red border at rest, full red on hover. */

.reminder-cell__chip--due {
  border-color: #f3c2cb;
}

.reminder-cell__chip--due:hover {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.reminder-cell__due {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 999px;
  padding: 3px 8px;
}

/* --- Done --- */
/* Always visible next to the chip. */

.reminder-cell__done {
  display: inline-flex;
  align-items: center;

  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;

  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 11px;
  margin-left: 10px;

  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.reminder-cell__done:hover {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-bg);
}

/* --- Add --- */
/* Always visible: an empty reminder column is where the next reminder gets
   made, so the affordance is not hidden behind a hover. */

.reminder-cell__add {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-2);
  text-decoration: none;

  background: none;
  border: none;
  padding: 6px 0;

  cursor: pointer;
  transition: color 0.15s ease;
}

.reminder-cell__add:hover {
  color: var(--ink);
}
/* ------------------------------------------------------------------
   SOURCE PICKER
   ------------------------------------------------------------------ */
/* A multi-select list of lead sources behind a summary trigger: coloured
   dots for the whole set, a count, and one checkbox per source. Driven by a
   Stimulus controller that only opens/closes the menu and keeps the label
   in step — what a selection MEANS is the form it sits in. Today that is the
   lead-source filter on the KPI pages, which persists nothing.

   Extracted from the retired Ad Spend page and rewritten onto the global
   tokens, since the locals it used were scoped to that page. */

.source-picker { position: relative; }

/* A picker that stands alone on the page (the Setter links page's setter)
   is an inline control, so its menu hangs under the trigger, not at the
   far edge of the row. */
.source-picker--inline { display: inline-block; }
.source-picker--inline .source-picker__menu { left: 0; right: auto; }

.source-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 8px 12px 8px 13px;
  min-height: var(--control-h);
  cursor: pointer;
  transition: 0.15s;
}

.source-picker__trigger:hover { background: var(--paper); }
.source-picker--open .source-picker__trigger {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.source-picker__dots { display: flex; align-items: center; }
.source-picker__dot-i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid #fff;
  margin-left: -4px;
}
.source-picker__dot-i:first-child { margin-left: 0; }

/* Fixed decoration, never data-driven — the same three as the KPI cards'
   "view sources" chip. */
.source-picker__dot-i:nth-child(1) { background: #4f7bff; }
.source-picker__dot-i:nth-child(2) { background: #ff2d95; }
.source-picker__dot-i:nth-child(3) { background: #b85bff; }

/* One line — "Sources 6/6". The kicker used to sit stacked above the value,
   which doubled the control's height; it is now the word in front of it. */
.source-picker__lbl { display: flex; align-items: baseline; gap: 6px; line-height: 1.15; text-align: left; }
.source-picker__k { font-size: 13.5px; font-weight: 500; color: var(--gray); }
.source-picker__v { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
/* The value is a count on the filters (mono); when it is a person's name
   (the goals sheet's picker) it reads in the app's type like the cards. */
.source-picker__v--name { font-family: var(--font-sans); }

.source-picker__chev { margin-left: 2px; color: var(--gray); transition: transform 0.18s; }
.source-picker--open .source-picker__chev { transform: rotate(180deg); }

.source-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 308px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 24px 50px -24px rgba(10, 10, 10, 0.34);
  padding: 7px;
  z-index: 40;
}

.source-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px 9px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
}
.source-picker__t {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.source-picker__dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #ff7a3d, #b85bff); }
.source-picker__count { font-family: var(--font-mono); font-size: 10px; color: var(--gray-2); letter-spacing: 0.03em; }

/* A heading inside the option list — Active / Removed members. Colour alone
   says which half you are reading; no pill, no border of its own. */
.source-picker__group-label {
  padding: 10px 9px 5px;
  color: var(--gray-2);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* A hairline above every group after the first, separating it from the people
   listed under the one before. */
.source-picker__group-label ~ .source-picker__group-label {
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.source-picker__group-label--active {
  color: var(--success);
}

.source-picker__group-label--removed {
  color: var(--danger);
}

/* The traffic-source groups (ads, organic, custom): the same violet tint
   as the dividers on the ads table, as a small rounded band. */
.source-picker__group-label--tinted {
  margin: 6px 2px 3px;
  padding: 7px 10px;
  border-top: none;
  border-radius: 7px;
  background: var(--level-on-bg);
  color: var(--level-on);
  font-weight: 600;
}

.source-picker__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.source-picker__opt:hover { background: var(--paper); }

/* A row may be a label (ticks) or a link (a single pick, the goals sheet's
   member): either way it reads as a row, not as a link. */
.source-picker__opt { color: inherit; text-decoration: none; }

/* The chosen row of a single-pick list, in place of a ticked box. */
.source-picker__opt--on { background: var(--paper); font-weight: 600; }

/* "All closers": the first row, ruled off from the people under it. */
.source-picker__opt--all {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
}
.source-picker__swatch { width: 11px; height: 11px; border-radius: 3.5px; flex: none; }
.source-picker__meta { flex: 1; min-width: 0; }
.source-picker__name { color: var(--ink); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }

/* --- Checkbox --- */
/* The control itself is .checkbox (checkbox.css); this only keeps it from
   shrinking in the row. */
.source-picker__check { display: flex; flex: none; }


/* The "No source" option. Grey for the same reason as the table's swatch:
   absence of a source, not another one. */
.source-picker__swatch--none {
  background: var(--gray-2);
}
/* ------------------------------------------------------------------
   SEGMENTED
   ------------------------------------------------------------------ */
/* Two or three mutually exclusive views of the same thing, where the current
   one is shown as the selected half rather than hidden. Tag-agnostic: the
   segments are links when they navigate (KPI ⇄ Targets) and buttons when they
   only switch what is already on the page.

   Promoted out of kpi_projections.css, where it was .tk-mode, so the KPI pages
   can use it too. Rewritten onto the redesign tokens in the move — the old
   rules were on the lilac legacy set (--gray-100, --text-blue), which would
   have looked nothing like the controls beside it. The padding-3 border-1
   shape matches the month stepper deliberately: they are siblings in a header
   row and should read as one family. */

/* --- Root --- */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  min-height: var(--control-h);
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
}

/* --- Parts --- */

.segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 0 13px;
  min-height: 28px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--gray);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.segmented__icon {
  flex: none;
  opacity: 0.65;
}

/* --- State --- */

.segmented__btn:hover {
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.segmented__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* The current view. Filled rather than merely darker, so which half you are on
   survives a glance — this control is often the only thing telling you which
   of two near-identical pages you are looking at. */
.segmented__btn--active,
.segmented__btn--active:hover {
  background: var(--ink);
  color: #fff;
}

.segmented__btn--active .segmented__icon {
  opacity: 1;
}

/* A segment that exists but cannot be chosen yet — the platform half of the
   ads table before any spend has been synced. Shown, so the reader learns it
   is there, rather than hidden. */
.segmented__btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ------------------------------------------------------------------
   PODIUM
   ------------------------------------------------------------------ */
/* The top three of a leaderboard on three steps. The template renders an
   <ol> in true rank order — 1, 2, 3 — and this file places first place in
   the middle on the tallest step. Every spot is an avatar disc with initials,
   the name, the figure, and a step whose height is its rank. The winner
   wears a crown, a ring and three sparkles; second and third carry a small
   mascot on the disc. The entrance is CSS keyframes: the steps rise, then
   the people pop in, then the crown drops. The only JavaScript is
   podium_controller.js, which scatters confetti once the winner is in: it
   appends .podium__confetti spans and sets --x, --rz, --dur and --delay on
   each, and this file does the rest. The leaderboard page wraps the whole
   thing in its own card (.leaderboard-card, leaderboard.css). */

/* --- Root --- */

.podium {
  position: relative; /* the confetti's containing block */
  overflow: hidden;   /* and where it stops falling */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: end;
  max-width: 820px;
  margin: 0 auto;
  /* Headroom for the cat and mascots, which hang above the discs. It lives
     here rather than on the page so the clip above never cuts them. */
  padding: 88px 0 0;
  list-style: none;
}

/* --- Parts --- */

.podium__spot {
  /* All three share one row. Without this, placing first place in column 2
     and second place in column 1 makes grid wrap backwards onto a new row —
     auto-placement never moves left. */
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* body sets --text-blue as the default ink; opt out. */
  color: var(--ink);
}

/* Avatar, name and figure together, popping in after the step has risen. */
.podium__who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  opacity: 0;
  animation: podium-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.podium__avatar {
  position: relative; /* crown, ring, sparkles and mascot hang off it */
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
}

.podium__name {
  font-size: var(--text-lg);
  font-weight: 600;
}

.podium__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray);
  text-align: center; /* a long KPI label may wrap; keep it centred */
}

.podium__figure {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The step. Scales up from its base; the rank sits at its top. */
.podium__step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: 14px;
  border-radius: 12px 12px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: podium-rise 0.7s cubic-bezier(0.3, 1.2, 0.4, 1) forwards;
}

/* --- Winner decoration --- */
/* A cat sitting on the disc with a small crown tilted on its head. The
   container is the thing that drops in and bobs; the two pieces are placed
   inside it. */

.podium__crown {
  position: absolute;
  top: -84px;
  left: 50%;
  width: 70px;
  height: 84px;
  font-size: 0;
  opacity: 0;
  transform: translateX(-50%) rotate(-6deg);
  animation:
    podium-drop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 1.5s forwards,
    podium-bob 2.6s ease-in-out 2.3s infinite;
}

.podium__crown-cat {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 70px;
  height: 70px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 6px rgba(10, 10, 10, 0.2));
}

.podium__crown-hat {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
}

.podium__crown-hat svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(201, 162, 39, 0.45));
}

/* The winner's feast, tucked against the cat so it drops and bobs with it. */
.podium__food {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(10, 10, 10, 0.18));
}

.podium__food--burger { left: -44px;  top: 30px; width: 48px; transform: rotate(-22deg); }
.podium__food--fries  { right: -46px; top: 16px; width: 64px; transform: rotate(22deg); }
.podium__food--ice-cream { right: -2px; top: 32px; width: 44px; transform: rotate(62deg); }

.podium__ring {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  opacity: 0;
  animation: podium-ring 1s ease-out 1.55s 2;
}

.podium__spark {
  position: absolute;
  font-size: 0;
  opacity: 0;
  animation: podium-spark 1.4s ease-in-out infinite;
}

.podium__spark svg {
  width: 12px;
  height: 12px;
}

.podium__spark--1 { top: -10px;   left: -16px;  animation-delay: 2.2s; }
.podium__spark--2 { top: 2px;     right: -18px; animation-delay: 2.8s; }
.podium__spark--3 { bottom: -4px; left: -12px;  animation-delay: 3.4s; }

/* --- Runner-up decoration --- */
/* Second place: the sleepy bunny (inline SVG) with an ice cream beside it.
   Third place: the crying cat (image). Both sit in the same 58px box. */

.podium__mascot {
  position: absolute;
  top: -56px;
  left: 50%;
  width: 58px;
  height: 58px;
  font-size: 0;
  opacity: 0;
  transform: translateX(-50%) rotate(-8deg);
  animation:
    podium-drop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) forwards,
    podium-bob-soft 3s ease-in-out 2s infinite;
}

.podium__mascot svg,
.podium__mascot-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(10, 10, 10, 0.2));
}

.podium__treat {
  position: absolute;
  left: -20px;
  bottom: -12px;
  width: 52px;
  transform: rotate(-12deg);
  filter: drop-shadow(0 3px 5px rgba(10, 10, 10, 0.2));
}

/* --- Places --- */
/* Second and third keep their rank order in the markup; only their column
   changes, so the winner stands in the middle. Each place has its own delay
   so the podium builds bronze, silver, gold. */

.podium__spot--first  { grid-column: 2; }
.podium__spot--second { grid-column: 1; }
.podium__spot--third  { grid-column: 3; }

.podium__spot--first .podium__who  { animation-delay: 1.05s; }
.podium__spot--second .podium__who { animation-delay: 0.55s; }
.podium__spot--third .podium__who  { animation-delay: 0.3s; }

.podium__spot--first .podium__avatar {
  width: 64px;
  height: 64px;
  font-size: var(--text-2xl);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-bright-deep));
  box-shadow: 0 8px 20px -6px rgba(201, 162, 39, 0.55);
}

.podium__spot--second .podium__avatar {
  background: linear-gradient(135deg, var(--silver), var(--silver-deep));
}

.podium__spot--third .podium__avatar {
  background: linear-gradient(135deg, var(--bronze), var(--bronze-deep));
}

.podium__spot--second .podium__mascot { animation-delay: 1.15s, 2.2s; }
.podium__spot--third .podium__mascot  { animation-delay: 0.9s, 2.6s; }

.podium__spot--first .podium__step {
  height: 150px;
  background: linear-gradient(180deg, var(--gold-bg), var(--gold-step));
  color: var(--gold);
  font-size: var(--text-2xl);
  animation-delay: 0.85s;
}

.podium__spot--second .podium__step {
  height: 104px;
  background: linear-gradient(180deg, var(--paper), var(--silver-step));
  color: var(--silver-deep);
  animation-delay: 0.35s;
}

.podium__spot--third .podium__step {
  height: 76px;
  background: linear-gradient(180deg, #fff, var(--bronze-step));
  color: var(--bronze-deep);
  animation-delay: 0.1s;
}

/* --- Confetti --- */
/* One span per piece. The controller sets --x (left, in %), --rz (final
   spin), --dur and --delay; the colour is a modifier. */

.podium__confetti {
  position: absolute;
  top: -14px;
  left: var(--x);
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: podium-fall var(--dur) ease-in var(--delay) forwards;
}

.podium__confetti--1 { background: var(--gold-bright); }
.podium__confetti--2 { background: var(--group-leads); }
.podium__confetti--3 { background: var(--group-calls); }
.podium__confetti--4 { background: var(--good); }
.podium__confetti--5 { background: var(--group-rates); }
.podium__confetti--6 { background: var(--group-ads); }

/* --- Empty --- */

/* A slot with nobody in it, and a spot whose figure is zero. Both recede
   rather than disappear, so the podium keeps its shape on a quiet period. */
.podium__name--empty,
.podium__spot--zero .podium__figure {
  color: var(--gray-2);
}

.podium__spot--empty .podium__avatar {
  background: var(--line);
  color: var(--gray-2);
}

/* --- Keyframes --- */

@keyframes podium-rise {
  to { transform: scaleY(1); }
}

@keyframes podium-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.7); }
  100% { opacity: 1; transform: none; }
}

@keyframes podium-drop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-22px) rotate(18deg); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-8deg); }
}

@keyframes podium-bob {
  0%, 100% { transform: translateX(-50%) rotate(-6deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-2deg) translateY(-4px); }
}

@keyframes podium-bob-soft {
  0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-3deg) translateY(-3px); }
}

@keyframes podium-ring {
  0%   { opacity: 0.8; transform: scale(0.7); }
  100% { opacity: 0;   transform: scale(1.5); }
}

@keyframes podium-spark {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); }
  50%      { opacity: 1; transform: scale(1) rotate(40deg); }
}

@keyframes podium-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(360px) rotate(var(--rz)); }
}

@media (prefers-reduced-motion: reduce) {
  .podium__who,
  .podium__step,
  .podium__crown,
  .podium__mascot {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }

  .podium__ring,
  .podium__spark,
  .podium__confetti {
    display: none;
  }
}

/* --- Phone --- */

/* Three columns still fit — the discs and steps just shrink, and the
   mascots and the cat would collide with the names beside them, so they go. */
@media (max-width: 640px) {
  .podium {
    gap: 12px;
    padding-top: 16px;
  }

  .podium__avatar,
  .podium__spot--first .podium__avatar {
    width: 44px;
    height: 44px;
    font-size: var(--text-lg);
  }

  .podium__mascot,
  .podium__crown {
    display: none;
  }

  .podium__spot--first .podium__step  { height: 110px; }
  .podium__spot--second .podium__step { height: 78px; }
  .podium__spot--third .podium__step  { height: 58px; }
}
/* ------------------------------------------------------------------
   CREATE CALL MODAL — redesigned form
   Reuses .tracking-modal__* + .tracking-form__input (attribution_links.css)
   for the chrome + inputs; adds the section headers, 2-col grid and the
   inline new-contact card that the mockup introduces.
   ------------------------------------------------------------------ */

.call-modal {
  overflow: hidden; /* head / body / foot manage their own scroll */
}

.call-form {
  padding: 16px 22px 20px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* section header: pink dot + mono label + optional right-aligned hint */
.call-form__sec {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 20px 0 12px;
}

.call-form__sec:first-child {
  margin-top: 4px;
}

.call-form__sec i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2d95;
  flex: none;
}

.call-form__sec > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-700, #374151);
}

.call-form__hint {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: var(--gray-400, #9aa0a8);
}

/* two-column field grid */
.call-form__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.call-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.call-form__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400, #9aa0a8);
}

.call-form__label b {
  color: #ff2d95;
  font-weight: 600;
}

.call-form__field--full {
  grid-column: 1 / -1;
}

/* native <select> sitting inside a .tracking-form__input shell */
.call-form .tracking-form__input select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--gray-800, #1f2937);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.call-form__chev {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--gray-400, #9aa0a8);
  pointer-events: none;
}

.call-form__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* modal subtitle under the title */
.call-form__modal-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400, #9aa0a8);
  margin-top: 3px;
}

/* footer "* required" hint (leads form) */
.call-form__req-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--gray-400, #9aa0a8);
}

.call-form__req-hint b {
  color: #ff2d95;
  font-weight: 600;
}

/* the shared .tracking-form__input svg rule sets colour but not size — the
   inline icons here carry no width/height attribute, so pin them down. */
.call-form .tracking-form__input svg {
  width: 15px;
  height: 15px;
}

/* combobox dropdown restyled to sit under the rounded tracking input */
.call-form .combobox__list {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 11px;
  margin-top: 5px;
  box-shadow: 0 24px 60px -26px rgba(10, 10, 10, 0.28);
  overflow-y: auto;
}

/* "create new contact" action row inside the search dropdown —
   pinned to the bottom so it stays visible even with a long contact list */
.call-form .combobox__create {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-blue, #483eff);
  background: #fff;
  border-top: 1px solid var(--gray-100, #f1f1f4);
}

.call-form .combobox__create:hover {
  background: color-mix(in srgb, var(--text-blue, #483eff) 5%, #fff);
}

.call-form .combobox__create svg {
  flex: none;
}

/* "create new contact" reveal link */
.call-form__link {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-blue, #483eff);
  cursor: pointer;
  font-family: inherit;
}

.call-form__link:hover {
  filter: brightness(0.9);
}

/* inline new-contact card (dashed accent) */
.call-form__newcard {
  border: 1.5px dashed color-mix(in srgb, var(--text-blue, #483eff) 35%, #fff);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
  background: color-mix(in srgb, var(--text-blue, #483eff) 3%, #fff);
}

.call-form__newcard-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.call-form__tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--text-blue, #483eff), #7c6cff);
  border-radius: 6px;
  padding: 3px 9px;
}

.call-form__newcard-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
}

.call-form__newcard .tracking-form__input {
  background: #fff;
}

/* notes */
.call-form__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 11px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  min-height: 84px;
  resize: vertical;
  outline: 0;
  color: var(--gray-800, #1f2937);
}

.call-form__textarea:focus {
  border-color: var(--text-blue, #483eff);
  box-shadow: 0 0 0 3px rgba(72, 62, 255, 0.12);
}

.call-form__textarea::placeholder {
  color: var(--gray-400, #9aa0a8);
}
/* ------------------------------------------------------------------
   SUBSCRIPTIONS
   ------------------------------------------------------------------ */

/* ---------- Form (new / edit) ---------- */

.sub-form {
  padding: 20px 24px 24px;
  border: var(--border-standard);
  border-radius: var(--radius);
}

.page-card .sub-form {
  max-width: 500px;
  margin: 0 auto;
}

.modal-panel .sub-form,
.modal-panel--wide .sub-form {
  border: none;
  padding: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.sub-form__body {
  overflow-y: auto;
  padding: 4px 10px 0;
}

.sub-form__field-full {
  max-width: none;
  margin-bottom: 14px;
}

.sub-form .form-row--2 {
  margin-bottom: 14px;
  column-gap: 10px;
}

.sub-form .form-field,
.sub-form .form-field.combobox,
.sub-form .combobox {
  display: block;
  flex: none;
  max-width: none !important;
  width: 100%;
  min-width: 0;
  margin-bottom: 16px;
}

.sub-form .form-field label,
.sub-form .sub-form__field-full label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #8a85a8);
  margin-bottom: 4px;
  text-align: left;
}

.sub-form .input,
.sub-form .select {
  padding: 8px 10px;
  font-size: 14px;
  height: 36px;
  text-align: left;
  border-color: var(--text-blue);
}

.sub-form .input::placeholder {
  color: var(--gray-400);
  opacity: 1;
}

/* Section titles */
.sub-form__section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-700);
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: var(--border-standard);
  text-align: left;
}

/* Numbered section headers (matching product form) */
.sub-form__section {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--line, #ececf3);
}

.sub-form__section:first-child {
  padding-top: 10px;
}

.sub-form__section:last-of-type {
  border-bottom: 0;
}

.sub-form__section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sub-form__section-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--indigo-soft, #eeecff);
  color: var(--primary, #4f46e5);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-family: monospace;
}

.sub-form__section-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #4b4670);
  font-weight: 700;
}

.sub-form__section-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #8a85a8);
  font-weight: 500;
}

/* Footer actions */
.sub-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line, #ececf3);
  flex-shrink: 0;
}

.sub-form__actions .btn {
  padding: 6px 10px;
  font-size: 14px;
}

/* Labels (matching product form) */
.sub-form__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #8a85a8);
  margin-bottom: 4px;
}

/* ---------- Selection card (customer / product picked state) ---------- */

.sub-select-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line, #ececf3);
  border-radius: 10px;
  background: var(--gray-50, #f9fafb);
}

.sub-select-card__info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sub-select-card__initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--indigo-soft, #eeecff);
  color: var(--primary, #4f46e5);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.sub-select-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sub-select-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #15123a);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-select-card__sub {
  font-size: 12px;
  color: var(--text-muted, #8a85a8);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-select-card__change {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #4f46e5);
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.sub-select-card__change:hover {
  background: rgba(79, 70, 229, 0.08);
}

/* ---------- Member pill (sales team selected state) ---------- */

.sub-member-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid var(--line, #ececf3);
  border-radius: 10px;
  background: var(--gray-50, #f9fafb);
}

.sub-member-pill__initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary, #4f46e5);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.sub-member-pill__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sub-member-pill__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #15123a);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-member-pill__role {
  font-size: 11px;
  color: var(--text-muted, #8a85a8);
  line-height: 1.3;
}

.sub-member-pill__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--gray-400);
  padding: 0 2px;
  flex-shrink: 0;
}

.sub-member-pill__remove:hover {
  color: var(--danger, #ef4444);
}

.sub-select-card--product {
  margin-bottom: 14px;
}

/* Product variant — box icon instead of initials */
.sub-select-card__product-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--indigo-soft, #eeecff);
  color: var(--primary, #4f46e5);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sub-form .form-actions {
  margin-top: 20px;
  padding-top: 14px;
  border-top: var(--border-standard);
  justify-content: flex-end;
}

/* Date range split (two clickable dates with arrow) */

.date-range-split__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 10px;
  border: var(--border-standard);
  border-radius: 6px;
  font-size: 14px;
  height: 36px;
  box-sizing: border-box;
  background: var(--bg);
}

.date-range-split__date {
  cursor: pointer;
  color: var(--gray-800);
  font-weight: 500;
}

.date-range-split__date:hover {
  color: var(--text-blue);
}

.date-range-split__arrow {
  color: var(--gray-400);
  font-size: 14px;
}

/* ---------- Payment preview (one-off form) ---------- */

.payment-preview {
  margin-top: 8px;
  border: 1px solid var(--line, #ececf3);
  border-radius: 8px;
  overflow: hidden;
}

.payment-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--line, #ececf3);
}

.payment-preview__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.payment-preview__total {
  font-size: 13px;
  font-weight: 600;
  color: var(--black, #111);
}

.payment-preview__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.payment-preview__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  font-size: 13px;
}

.payment-preview__item:last-child {
  border-bottom: none;
}

.payment-preview__number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--indigo-soft, #eeecff);
  color: var(--primary, #4f46e5);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.payment-preview__date {
  flex: 1;
  color: var(--gray-700, #374151);
}

.payment-preview__amount {
  font-weight: 600;
  color: var(--black, #111);
}

.payment-preview__amount-input {
  width: 80px;
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  color: var(--black, #111);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  background: var(--bg, #fff);
}
.payment-preview__amount-input:focus {
  outline: none;
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}


/* ---------- Show page (compact table) ---------- */

.sub-show {
  padding: 20px 24px;
}

.sub-show__table-wrapper {
  border: var(--border-standard);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.sub-show__table {
  width: 100%;
  border-collapse: collapse;
}

.sub-show__table td {
  padding: 6px 0;
  vertical-align: middle;
  font-size: 14px;
}

/* Compact inputs for inline edit (dates, combobox, select) */
.sub-show__table .input,
.sub-show__table .select {
  max-width: 150px;
  height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

.sub-show__table .combobox .input {
  max-width: 150px;
  height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

.sub-show__table .input[readonly] {
  color: var(--black);
}

.sub-show__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  width: 90px;
  white-space: nowrap;
  padding-right: 8px;
}

.sub-show__value {
  color: var(--black);
  padding-right: 32px;
}

.sub-show__actions {
  display: flex;
  gap: 12px;
  padding: 4px 24px 12px;
  font-size: 13px;
}

/* Save/cancel inside the edit table — align with label column */
.sub-show__table-wrapper .sub-show__actions {
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: var(--border-standard);
}

.sub-show__actions .text-link--danger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  color: var(--danger);
  text-decoration: underline;
}

.sub-show__actions .text-link--danger:hover {
  color: var(--danger-hover);
}

.detail-view__section .sub-show__actions {
  padding: 0 0 8px;
}

.sub-show__notes {
  margin-top: 16px;
  padding-top: 12px;
  border-top: var(--border-standard);
}

.sub-show__notes-text {
  font-size: 14px;
  color: var(--gray-700);
  margin: 4px 0 0;
}

/* Payments section header */

.detail-view__section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payments-summary {
  font-size: 13px;
  color: var(--gray-600);
}

/* Inline edit input */

.inline-edit__input {
  font-size: 14px;
  padding: 2px 6px;
  border: 1px solid var(--text-blue);
  border-radius: 4px;
  width: 90px;
  outline: none;
}

/* Delete icon button */

.btn-icon-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
}

.btn-icon-delete:hover {
  color: var(--danger);
  background: #fef2f2;
}

/* ------------------------------------------------------------------
   SUBSCRIPTION SHOW — top row, the hero card, the payments card
   ------------------------------------------------------------------ */
/* The page is a record: capped and centred like the contact page, a top
   row with the back link and the delete button, then the hero (what was
   sold on the left, the fields that change on the right) and the payments
   in a section card (csec.css). The hero is one turbo frame swapped whole
   on every save; the payments rows swap over Turbo Streams. */

/* --- Frame --- */

.sub-show {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

.sub-show__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

/* The payments card capped short of the full page: five short columns
   read badly stretched across it, but a row in edit mode (two inputs, the
   status, save and cancel) needs about 1000px without scrolling. */
.sub-show__payments {
  max-width: 1080px;
}

@media (max-width: 900px) {
  .sub-show__payments {
    max-width: none;
  }
}

/* --- Hero --- */
/* The name across the top, then two equal columns: the deal on the left,
   the fields that change on the right. Every row the same height, keys a
   fixed width so the values line up on the left. No overflow: hidden: the
   setter and closer menus on the last rows open past the card's bottom
   edge, and no part has a background of its own to clip to the corners. */

.sub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
}

.sub-hero__top {
  grid-column: 1 / -1;
  padding: 24px 28px 22px;
  border-bottom: 1px solid var(--line);
}

.sub-hero__main {
  min-width: 0;
  padding: 0 28px;
}

.sub-hero__side {
  min-width: 0;
  padding: 0 6px;
  border-left: 1px solid var(--line);
}

.sub-hero__crumb {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-md);
  color: var(--gray-2);
}

.sub-hero__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.sub-hero__row,
.sub-hero__field {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lg);
}

.sub-hero__field {
  padding: 8px 22px;
}

.sub-hero__row:last-child,
.sub-hero__field:last-child {
  border-bottom: none;
}

.sub-hero__key {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  width: 150px;
  font-weight: 500;
  color: var(--gray);
}

.sub-hero__icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gray-2);
}

.sub-hero__val {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
  color: var(--ink);
}

.sub-hero__control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* The status control: the badge colours land on this wrapper. */
.sub-hero__control--status {
  border-radius: var(--radius-md);
}

.sub-hero__av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--level-on-bg);
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--level-on);
}

.sub-hero__dim {
  color: var(--gray-2);
  font-weight: 400;
}

.sub-hero__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* The price: gross in grey, the net under it in the accent, since the
   net is the figure every KPI counts. */
.sub-hero__row--gross .sub-hero__key,
.sub-hero__row--gross .sub-hero__val {
  color: var(--gray);
}

.sub-hero__row--net .sub-hero__key,
.sub-hero__row--net .sub-hero__val {
  color: var(--level-on);
  font-weight: 600;
}

/* The price field is wider than a target: money has more digits. */
.sub-hero__price {
  width: 9ch;
  text-align: right;
}

.sub-hero__date {
  font-weight: 500;
  color: var(--ink);
}

.sub-hero__date--empty {
  color: var(--gray-2);
  font-weight: 400;
}

@media (max-width: 900px) {
  .sub-hero {
    grid-template-columns: 1fr;
  }

  .sub-hero__side {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

/* --- Payments table --- */
/* The flush table inside the payments card, no column rules. The net
   column carries the accent, as the price does above; a pending row reads
   in grey; the foot is two summary rows on the inset surface. */

.sub-payments {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.sub-payments__date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sub-payments__date--dim {
  color: var(--gray-2);
}

.sub-payments__net {
  color: var(--level-on);
  font-weight: 600;
  background: var(--level-on-bg);
}

.sub-payments__row--pending .data-table__cell {
  color: var(--gray);
}

.sub-payments__cell--acts {
  text-align: right;
  white-space: nowrap;
}

/* The total under a heavier rule, so it reads as a summary rather than
   one more payment; its label set like the plan and provider rows above. */
.sub-payments__foot .data-table__cell {
  padding-top: 14px;
  padding-bottom: 14px;
  background: #fff;
  font-weight: 600;
}

.sub-payments__foot--collected .data-table__cell {
  border-top: 1px solid var(--line-2);
}

.sub-payments__foot-label {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray);
}

.sub-payments__foot .sub-payments__net {
  color: var(--level-on);
  background: var(--level-on-bg);
}

/* --- Row actions --- */

.sub-payments__acts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sub-payments__iact-form {
  display: inline-flex;
}

.sub-payments__iact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--gray);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sub-payments__iact:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.sub-payments__iact--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* --- Edit mode --- */

.sub-payments__row--edit {
  background: var(--paper);
}

.sub-payments__input {
  box-sizing: border-box;
  width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  outline: none;
  background: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.sub-payments__input:focus {
  border-color: var(--ink);
}

.sub-payments__error {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-md);
  color: var(--danger);
  white-space: normal;
}
/* ------------------------------------------------------------------
   RECORDING SHOW PAGE
   ------------------------------------------------------------------ */

/* Audio player */
.recording-player {
  width: 100%;
  margin-top: 8px;
  border-radius: var(--radius);
}

.recording-player audio {
  width: 100%;
  height: 40px;
  border-radius: var(--radius);
}
/* ------------------------------------------------------------------
   INTEGRATIONS
   ------------------------------------------------------------------ */

/* One card per provider: who it is and whether it is on, then what you can do
   about it. Buttons come from buttons.css — the card adds none of its own. */

/* 24px is the app's page gutter — the same inset .page-header, .nav-tabs and
   .search-bar carry. .page-shell sets no horizontal padding of its own, so a
   screen without a .page-card has to ask for it. */
.integrations__sub {
  margin: 6px 0 0;
  padding-inline: 24px;
  font-size: var(--text-lg);
  color: var(--gray);
}

.integration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
  padding-inline: 24px;
}

/* --- Card --- */

.integration-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  transition: background 0.15s ease;
}

.integration-card:hover {
  background: var(--paper);
}

.integration-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-card__id {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.integration-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}

.integration-card__name {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* A note beside the name ("Work in progress"): outlined, in the pill's
   micro-label type, so it reads as a remark rather than a state. */
.integration-card__tag {
  flex: none;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray);
}

/* The description is capped at roughly one line of reading width so six cards
   stay the same height whatever the copy does. */
.integration-card__desc {
  max-width: 34ch;
  margin: 6px 0 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray);
}

.integration-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .integration-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   CONNECTION PILL
   ------------------------------------------------------------------ */
/* Its own block, not part of the card: the index cards and each provider's
   settings page both answer "is this connected?" and must answer it alike. */

.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.conn-pill__dot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.conn-pill--on {
  background: var(--success-bg);
  color: var(--success);
}

.conn-pill--off {
  background: var(--paper);
  color: var(--gray-2);
}

/* ------------------------------------------------------------------
   INTEGRATION PAGE
   ------------------------------------------------------------------ */
/* One provider's settings screen. A narrow reading column: who it is, a
   walkthrough, the numbered steps, then the one field that connects it. */

/* Same 24px gutter as the index — box-sizing so the padding sits inside the
   reading column rather than widening it. */
.integration-page {
  box-sizing: border-box;
  max-width: 660px;
  padding-inline: 24px;
}

/* Screens that carry a table rather than a form get a wider column. */
.integration-page--wide {
  max-width: 960px;
}

.integration-page__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.integration-page__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.integration-page__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

/* Pushes the pill to the far edge, whatever the name's length. */
.integration-page__head .conn-pill {
  margin-left: auto;
}

.integration-page__sub {
  margin: 10px 0 0;
  font-size: var(--text-lg);
  color: var(--gray);
}

.integration-page__section {
  margin-top: 32px;
}

.integration-page__section-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Walkthrough --- */

.integration-page__video {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper);
}

.integration-page__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* --- Numbered steps --- */

.integration-page__steps {
  display: flex;
  flex-direction: column;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.integration-page__step {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
}

.integration-page__step:last-child {
  padding-bottom: 0;
}

/* The rail joining one number to the next. It starts below the circle and
   stops at the last step, so the list reads as a sequence. */
.integration-page__step::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}

.integration-page__step:last-child::before {
  display: none;
}

.integration-page__step-n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray);
}

.integration-page__step-text {
  padding-top: 2px;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--gray);
}

.integration-page__step-text b {
  font-weight: 600;
  color: var(--ink);
}

.integration-page__step-text code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink);
}

/* --- Key box --- */

.integration-page__box {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.integration-page__label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.integration-page__label--spaced {
  margin-top: 18px;
}

.integration-page__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink);
}

.integration-page__value--wrap {
  word-break: break-all;
}

/* A sentence, not a value — drops the mono face the block otherwise implies. */
.integration-page__value--prose {
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--gray);
}

/* One key connects a provider, so the field and its button share a row. Two
   keys do not fit that way — those stack as .integration-page__field instead. */
.integration-page__keyrow {
  display: flex;
  gap: 8px;
}

.integration-page__field + .integration-page__field {
  margin-top: 18px;
}

/* border-box: no global reset, so a flexed field would otherwise add its
   padding on top of its share of the row. */
.integration-page__input {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  outline: none;
  background: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.integration-page__input--block {
  display: block;
  width: 100%;
}

.integration-page__input::placeholder {
  color: var(--gray-2);
}

.integration-page__input:focus {
  border-color: var(--ink);
}

.integration-page__hint {
  margin: 10px 0 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--gray);
}

/* --- Webhook URL + copy --- */

.integration-page__urlrow {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* The URL is read-only reference, so it sits on the inset surface and stays on
   one line — it is copied, not read. */
.integration-page__url {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.integration-page__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.integration-page__copy:hover {
  border-color: var(--ink);
}

/* copy_controller.js adds this for ~1.2s after a successful copy. */
.integration-page__copy.copy--done {
  border-color: var(--success);
  color: var(--success);
}

/* --- Payload sample --- */

.integration-page__payload {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink);
}

/* --- Danger zone --- */

.integration-page__danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.integration-page__danger-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}

.integration-page__danger-desc {
  margin-top: 3px;
  font-size: var(--text-md);
  color: var(--gray);
}

@media (max-width: 640px) {
  .integration-page__danger {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Actions --- */

.integration-page__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.integration-page__disconnect {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
  transition: color 0.15s ease;
}

.integration-page__disconnect:hover {
  color: var(--danger);
}

/* -- Calendly settings page (legacy blocks; still used by meta/show) -- */

.integration-status-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integration-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.section-description {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* ------------------------------------------------------------------
   EVENT MAPPINGS
   ------------------------------------------------------------------ */
/* The Calendly event-type list: a heading with an active count, a two-column
   .data-table card (event name, state pill + toggle), and a hint underneath.
   The toggle is a check box in an autosave form — no JavaScript of its own. */

.event-mappings__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
}

.event-mappings__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.event-mappings__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray-2);
}

/* .data-table sets its own 34px top margin for the KPI screens; here the
   heading sits directly above it. Doubled to beat data_table.css by order. */
.event-mappings__table.event-mappings__table {
  margin-top: 12px;
}

.event-mappings__event {
  white-space: nowrap;
}

.event-mappings__event--off {
  opacity: 0.45;
}

/* The state pill and its toggle, right-aligned in the cell. */
.event-mappings__state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.event-mappings__hint {
  margin: 12px 0 0;
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* -- Webhook payload -- */

.webhook-payload {
  background-color: #1e1e2e;
  color: #cdd6f4;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-value--error {
  color: #991b1b;
}
/* ------------------------------------------------------------------
   API KEYS PAGE
   ------------------------------------------------------------------ */
/* The developer's API page. It borrows .integration-page for the reading
   column and its boxes; what is here is only the token, the code sample
   and the parameter list. */

/* --- Empty state --- */
/* A dashed card with one button: the first key needs no form. */
.api-keys__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 48px 32px;
  border: 1px dashed var(--line-3);
  border-radius: var(--radius-xl);
  text-align: center;
}

.api-keys__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--gray);
}

.api-keys__empty-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Created state --- */
/* The pill back link of the automations builder, in normal flow above the
   card rather than floated over it. */
.api-keys__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  margin-top: 16px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: var(--text-base);
  color: var(--gray);
  text-decoration: none;
  transition: border-color 0.12s ease;
}

.api-keys__back:hover {
  border-color: var(--line-3);
  color: var(--ink);
  text-decoration: none;
}

.api-keys__created-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-keys__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--section-closer);
  color: #fff;
}

.api-keys__created-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
}

/* --- Copy row --- */
/* The one action on the screen: the filled button, and beside it what to
   do with the text. */
.api-keys__copy {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--level-on-line);
  border-radius: var(--radius-lg);
  background: var(--level-on-bg);
}

.api-keys__copy-text {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
}

/* --- Prompt preview --- */
/* The message as a terminal: dark surface, mono text, the first lines only.
   It is a preview of what the button copies, so it is clipped and fades
   out rather than scrolling. */
.api-keys__prompt {
  position: relative;
  margin-top: 16px;
  padding: 18px 20px 20px;
  border-radius: var(--radius-xl);
  background: var(--terminal);
  max-height: 230px;
  overflow: hidden;
}

.api-keys__prompt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--terminal));
}

.api-keys__prompt-label {
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--terminal-line);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--terminal-muted);
}

.api-keys__code-key {
  color: var(--terminal-key);
}

.api-keys__code-field {
  color: var(--terminal-field);
}

.api-keys__code-header {
  color: var(--terminal-header);
}

/* --- List --- */
.api-keys__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.api-keys__list-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
}

/* --- Parts --- */
.api-keys__prefix {
  font-family: var(--font-mono);
  color: var(--gray);
}

.api-keys__hint {
  margin: 10px 0 0;
  font-size: var(--text-md);
  color: var(--gray-2);
}

.api-keys__code {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink);
}

.api-keys__params {
  border-collapse: collapse;
  font-size: var(--text-base);
  color: var(--gray);
}

.api-keys__params td {
  padding: 6px 18px 6px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.api-keys__params code {
  font-family: var(--font-mono);
  color: var(--ink);
}

/* --- Public docs page --- */
/* The same reading column as the settings page, standing alone, with the
   app's font and background since it renders outside the app layout. */
.api-docs {
  margin: 0;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--ink);
}

.api-docs__page {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.api-docs__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.api-docs__lead {
  margin: 12px 0 24px;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--gray);
}

/* The message inside the prompt box, wrapped so a long key never scrolls
   sideways. */
.api-keys__message {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--terminal-text);
}
/* ------------------------------------------------------------------
   ALERT BANNER
   ------------------------------------------------------------------ */

.alert-banner {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.alert-banner--danger {
  background: var(--danger, #dc3545);
  color: #fff;
}

.alert-banner__link {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 8px;
}

.alert-banner__link:hover {
  opacity: 0.85;
}

/* ------------------------------------------------------------------
   BILLING / SETTINGS CARDS
   ------------------------------------------------------------------ */

.billing-content {
  max-width: 560px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.billing-card {
  border: var(--border-standard);
  border-radius: var(--radius);
  padding: 20px 24px;
  background: var(--bg);
}

.billing-card__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.billing-card__description {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Status rows */

.billing-status {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.billing-status__row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.billing-status__label {
  font-weight: 600;
  min-width: 140px;
  color: var(--muted);
  font-size: 14px;
}

.billing-status__value {
  color: var(--gray-800);
  font-size: 14px;
}

/* Left-align buttons inside cards */

.billing-card .form-actions {
  margin-top: 16px;
  padding: 0;
  justify-content: flex-start;
}

/* Tier grid */

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

.billing-tier-card {
  border: var(--border-standard);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  position: relative;
}

.billing-tier-card--recommended {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.billing-tier-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.billing-tier-card__name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.billing-tier-card__price {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-800);
}

.billing-tier-card__interval {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.billing-tier-card__seats {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}

.billing-tier-card .btn {
  width: 100%;
}

/* ------------------------------------------------------------------
   BILLING REDESIGN — trial banner + plan cards
   Scoped under .billing-page so generic names don't hit globals.
   ------------------------------------------------------------------ */
.billing-page {
  --bp-ink: #0a0a0a;
  --bp-paper: #fafafa;
  --bp-white: #ffffff;
  --bp-gray: #5f636b;
  --bp-gray-2: #9aa0a8;
  --bp-line: #ececee;
  --bp-line-2: #e3e3e6;
  --bp-green: #1f8a5b;
  --bp-green-bg: #e7f4ee;
  --bp-amber: #c98a12;
  --bp-amber-bg: #fbf1dd;
  --bp-mono: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--bp-ink);
  padding: 40px 32px;
  max-width: 960px;
  margin: 0 auto;
}

/* current plan / trial banner */
.billing-page .trial {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 2px;
}
.billing-page .trial .ring {
  --pct: 60;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--bp-amber) calc(var(--pct) * 1%), #f0e7d2 0);
  display: grid;
  place-items: center;
}
.billing-page .trial .ring .inner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bp-white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--bp-amber);
  font-family: var(--bp-mono);
}
.billing-page .trial .info {
  flex: 1;
  min-width: 0;
}
.billing-page .trial .info .lab {
  font-family: var(--bp-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-gray-2);
}
.billing-page .trial .info h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.billing-page .trial .info h3 .chip {
  font-family: var(--bp-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-amber);
  background: var(--bp-amber-bg);
  padding: 3px 9px;
  border-radius: 6px;
}
.billing-page .trial .info h3 .chip--green {
  color: var(--bp-green);
  background: var(--bp-green-bg);
}
.billing-page .trial .info p {
  font-size: 13px;
  color: var(--bp-gray);
  margin-top: 6px;
  line-height: 1.45;
  max-width: 52ch;
}
.billing-page .trial .cta {
  flex: none;
}
.billing-page .btn-dark {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 11px;
  padding: 12px 20px;
  cursor: pointer;
  border: 1px solid var(--bp-ink);
  background: var(--bp-ink);
  color: #fff;
  transition: 0.15s;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.billing-page .btn-dark:hover {
  background: #000;
}

/* section header */
.billing-page .sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 30px 0 4px;
}
.billing-page .sec .st {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.billing-page .sec .st .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a3d, #b85bff);
  flex: none;
}

/* plans grid */
.billing-page .plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}
.billing-page .plan {
  background: var(--bp-white);
  border: 1px solid var(--bp-line);
  border-radius: 16px;
  padding: 22px 22px 24px;
  position: relative;
  transition: 0.16s;
  display: flex;
  flex-direction: column;
}
.billing-page .plan:hover {
  border-color: var(--bp-line-2);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 24px 50px -40px rgba(10, 10, 10, 0.5);
}
.billing-page .plan.pop {
  border-color: transparent;
  box-shadow: 0 0 0 2px #0a0a0a, 0 30px 60px -40px rgba(10, 10, 10, 0.55);
}
.billing-page .plan .ribbon {
  position: absolute;
  top: -11px;
  left: 22px;
  font-family: var(--bp-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(110deg, #ff7a3d, #b85bff);
  padding: 4px 11px;
  border-radius: 6px;
}
.billing-page .plan .pn {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.billing-page .plan .pn .pdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.billing-page .plan .price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 16px;
}
.billing-page .plan .price .cur {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.billing-page .plan .price .amt {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.billing-page .plan .price .per {
  font-size: 13px;
  color: var(--bp-gray-2);
  font-family: var(--bp-mono);
}
.billing-page .plan .seats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--bp-gray);
  letter-spacing: -0.01em;
}
.billing-page .plan .seats .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bp-paper);
  border: 1px solid var(--bp-line);
  border-radius: 7px;
  padding: 4px 9px;
  font-family: var(--bp-mono);
  font-size: 11px;
  color: var(--bp-ink);
}
.billing-page .plan .feats {
  list-style: none;
  margin: 18px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.billing-page .plan .feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--bp-gray);
  line-height: 1.4;
}
.billing-page .plan .feats li svg {
  color: var(--bp-green);
  flex: none;
  margin-top: 1px;
}
.billing-page .plan .feats li b {
  color: var(--bp-ink);
  font-weight: 600;
}
.billing-page .plan form.button_to {
  margin-top: auto;
  width: 100%;
}
.billing-page .plan .sub-btn {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 11px;
  padding: 12px;
  cursor: pointer;
  transition: 0.15s;
  letter-spacing: -0.01em;
  border: 1px solid var(--bp-line-2);
  background: var(--bp-white);
  color: var(--bp-ink);
}
.billing-page .plan .sub-btn:hover {
  border-color: var(--bp-gray-2);
  background: var(--bp-paper);
}
.billing-page .plan.pop .sub-btn {
  background: var(--bp-ink);
  color: #fff;
  border-color: var(--bp-ink);
}
.billing-page .plan.pop .sub-btn:hover {
  background: #000;
}
.billing-page .plan .sub-btn form {
  margin: 0;
}
.billing-page .plan .perseat {
  font-family: var(--bp-mono);
  font-size: 10px;
  color: var(--bp-gray-2);
  margin-top: 9px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* assurance row */
.billing-page .assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bp-line);
}
.billing-page .assurance .a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--bp-gray);
}
.billing-page .assurance .a svg {
  color: var(--bp-gray-2);
  flex: none;
}
.billing-page .assurance .a b {
  color: var(--bp-ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .billing-page .plans {
    grid-template-columns: 1fr;
  }
}

/* active-plan variant of the ring */
.billing-page .trial--active .ring {
  background: conic-gradient(var(--bp-green) calc(var(--pct) * 1%), var(--bp-green-bg) 0);
}
.billing-page .trial--active .ring .inner {
  color: var(--bp-green);
}

.billing-page .phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.billing-page .phead .who {
  display: flex;
  align-items: center;
  gap: 11px;
}
.billing-page .phead .who .meta {
  text-align: right;
}
.billing-page .phead .who .nm {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.billing-page .phead .who .rl {
  font-family: var(--bp-mono);
  font-size: 9.5px;
  color: var(--bp-gray-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.billing-page .phead .who .av {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ff7a3d, #b85bff);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
}

/* ------------------------------------------------------------------
   LEADERBOARD
   ------------------------------------------------------------------ */

/* The page sits in the plain .page-shell like every other screen, so the
   horizontal inset is owned per block. This carries it for the controls,
   podium and ranking table, which are shared components and must not grow a
   page-specific padding of their own. 24px matches .page-header. */
.leaderboard-body {
  padding: 0 24px;
}

/* One row: Ranked by, Period, Apply, at the top of the podium card. Aligned
   on their bottom edge so the controls line up regardless of whether a
   group carries a label above it. */
.leaderboard-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.leaderboard-team-select {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line, #e0dfe6);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  color: var(--ink, #1e1e2f);
  cursor: pointer;
}

.leaderboard-controls__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.leaderboard-controls__period-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A mono micro-label, the same one the table headers use. */
.leaderboard-controls__label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   The podium card
   ------------------------------------------------------------------ */
/* The white card the podium stands in, with the controls as its header when
   the reader may change the ranking. No overflow clip here: the Ranked by
   menu opens past the card's edge, and the podium clips its own confetti. */

.leaderboard-card {
  margin-top: 24px;
  padding: 24px 40px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------------
   The ranked-by column
   ------------------------------------------------------------------ */
/* The one column the board is sorted by, carrying the podium's gold so the
   two halves of the page speak the same language. These are the leaderboard's
   own classes sitting alongside .data-table's — the table component is not
   restyled from here. */

.leaderboard__ranked {
  background: var(--gold-tint);
}

th.leaderboard__ranked {
  color: var(--gold);
  border-radius: 8px 8px 0 0;
}

td.leaderboard__ranked {
  color: var(--ink);
  font-weight: 600;
}

.data-table__row:last-child td.leaderboard__ranked {
  border-radius: 0 0 8px 8px;
}

/* A dot rather than a heavier weight — the gold is already doing the work. */
.leaderboard__ranked-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 1px;
}

/* The reader's own row. A left rule rather than a fill, so it can sit under
   the tinted column without the two fighting. */
.leaderboard__you .data-table__cell:first-child {
  box-shadow: inset 3px 0 0 var(--ink);
}

.leaderboard__you .data-table__cell {
  font-weight: 600;
}

/* --- Phone --- */

/* The two groups already wrap; this just tightens the rhythm and lets each
   control use the full width rather than sitting at its 196px minimum. */
@media (max-width: 640px) {
  .leaderboard-controls {
    gap: 14px;
    margin-bottom: 20px;
  }

  .leaderboard-controls__group {
    width: 100%;
  }

  .leaderboard-controls__period-form {
    flex-wrap: wrap;
  }

  .leaderboard-card {
    margin-top: 20px;
    padding: 20px 16px 0;
  }
}
/* ------------------------------------------------------------------
   CSV IMPORT (full page layout)
   ------------------------------------------------------------------ */

/* Centered column that holds every step (step bar + panel) */

.csv-import__content {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

/* Action panel — separated block below the step bar */

.csv-import__panel {
  border: var(--border-standard);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 24px;
}

/* Upload step */

.csv-import__form-section {
  width: 100%;
}

.csv-import__field {
  margin-bottom: 16px;
}

.csv-import__hint {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-top: 4px;
}

.csv-import__template-link {
  margin-bottom: 16px;
}

/* Drag & drop upload zone */

.csv-dropzone {
  position: relative;
}

/* Visually hidden but still submittable / clickable via the controller */
.csv-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.csv-dropzone__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--card);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.csv-dropzone__zone:hover,
.csv-dropzone__zone--over {
  border-color: var(--text-blue);
  background: var(--accent);
}

.csv-dropzone__icon {
  display: block;
  margin: 0 auto 8px;
  color: var(--text-blue);
}

.csv-dropzone__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
}

.csv-dropzone__subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.csv-dropzone__file {
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--border-standard);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text-blue);
}

.csv-dropzone__file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
}

.csv-dropzone__file-size {
  font-size: 12px;
  color: var(--muted);
}

.csv-dropzone__remove {
  margin-left: auto;
  border: var(--border-standard);
  background: var(--bg);
  border-radius: var(--radius);
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
}

.csv-dropzone__remove:hover {
  color: var(--danger);
}

/* Actions bar (shared across steps) */

.csv-import__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--border-standard);
}

/* Results step */

.csv-import__results {
  margin-bottom: 16px;
}

.csv-import__summary {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.csv-import__stat {
  flex: 1;
  text-align: center;
  padding: 16px 12px;
  border-radius: var(--radius);
  border: var(--border-standard);
  max-width: 200px;
  background: var(--bg, #fff);
}

.csv-import__stat-number {
  display: block;
  font-size: 28px;
  font-weight: 700;
}

.csv-import__stat-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted, #888);
  margin-top: 4px;
}

.csv-import__stat--success {
  background: #f0fdf4;
}

.csv-import__stat--success .csv-import__stat-number {
  color: #16a34a;
}

.csv-import__stat--skipped {
  background: #fffbeb;
}

.csv-import__stat--skipped .csv-import__stat-number {
  color: #d97706;
}

.csv-import__stat--error {
  background: #fef2f2;
}

.csv-import__stat--error .csv-import__stat-number {
  color: var(--danger);
}

/* Error list */

.csv-import__error-list {
  max-height: 400px;
  overflow-y: auto;
  border: var(--border-standard);
  border-radius: var(--radius);
}

.csv-import__error-title {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  margin: 0;
  border-bottom: var(--border-standard);
}

.csv-import__error-list .table {
  font-size: 13px;
  margin: 0;
}

/* ------------------------------------------------------------------
   ADMIN LAYOUT
   ------------------------------------------------------------------ */

/* Topbar elements */
.admin-topbar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: 0.02em;
}

.admin-topbar__back {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-topbar__back:hover {
  color: var(--black);
}

/* ------------------------------------------------------------------
   ADMIN SIDEBAR
   ------------------------------------------------------------------ */

.admin-sidebar {
  width: 130px;
  background: #2d1b2e;
  border-right: 1px solid #3d2a3e;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
}

.admin-sidebar__nav {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-sidebar__link {
  display: block;
  width: 100%;
  padding: 8px 18px;
  text-decoration: none;
  font-size: 14px;
  color: #d7c8d8;
  border-radius: 0;
  transition: background 0.16s ease, color 0.16s ease;
  box-sizing: border-box;
}

.admin-sidebar__link:not(.admin-sidebar__link--active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.admin-sidebar__link--active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 500;
}

.admin-sidebar__link--active:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: default;
}

/* ------------------------------------------------------------------
   ADMIN MAIN CONTENT
   ------------------------------------------------------------------ */

.admin-main {
  flex: 1;
  padding: 0 0 24px;
  overflow-x: auto;
  background: var(--bg);
}

/* ------------------------------------------------------------------
   ADMIN STAT GRID & CARDS
   ------------------------------------------------------------------ */

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 24px;
}

.admin-stat-card {
  background: #f8f8f8;
  border: var(--border-standard);
  border-radius: 6px;
  padding: 20px;
}

.admin-stat-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.admin-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  line-height: 1.2;
}

/* ------------------------------------------------------------------
   IMPERSONATION STOP BUTTON (inside topbar)
   ------------------------------------------------------------------ */

.impersonation-banner__stop {
  display: inline-block;
  padding: 4px 12px;
  background: var(--danger);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.impersonation-banner__stop:hover {
  opacity: 0.9;
}

/* --- Organizations: trial edited in the row --- */
/* The end date opens the calendar; "+ days" is the targets-style field that
   sets the end date from today. */
.admin-trial {
  white-space: nowrap;
}

.admin-trial__date {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-md);
}

.admin-trial__days {
  display: inline-block;
  margin-left: 10px;
}

.admin-trial__input {
  width: 5ch;
}
.toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__track {
  display: block;
  width: 40px;
  height: 22px;
  background: #d1d5db;
  border-radius: 11px;
  transition: background 0.2s ease;
}

.toggle__thumb {
  display: block;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 9px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle__input:checked + .toggle__track {
  background: #22c55e;
}

.toggle__input:checked + .toggle__track .toggle__thumb {
  left: 20px;
}

.toggle__input:focus-visible + .toggle__track {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* --- Colors --- */

/* Redesign variant: ink when on, control-border grey when off. Focus is the
   design system's ring rather than the blue outline above. */
.toggle--ink .toggle__track {
  background: var(--line-2);
}

.toggle--ink .toggle__input:checked + .toggle__track {
  background: var(--ink);
}

.toggle--ink .toggle__input:focus-visible + .toggle__track {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* Stacked role on/off toggles in the team table (closer / setter / admin). */
.role-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.role-toggle__label {
  font-size: 12px;
  color: #374151;
}

.role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Checkbox rows in the invite form. */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
/* ------------------------------------------------------------------
   CHECKBOX
   ------------------------------------------------------------------ */
/* A native checkbox drawn over to match the redesign controls: hairline
   border when off, ink fill with a white tick when on, the standard focus
   ring. Goes on the <input> itself, so any label or cell can hold one. Used by
   the source and member filters and the Meta campaign picker. */

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* --- State --- */

.checkbox:hover {
  border-color: var(--gray-2);
}

.checkbox:checked {
  border-color: var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}
/* ── Team Members page ──────────────────────────────────────────────
   Visual design adapted from the standalone Team Page mockup.
   Shared components (.page-card/.nav-tab/.status-select) are scoped under
   .team-page so no other page is affected; team-only classes are free.   */

.team-page {
  --tm-mono: ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  --tm-purple: #7a4fd0;
  --tm-line: #ececee;
  --tm-line-2: #e3e3e6;
  --tm-paper: #fafafa;
  --tm-ink: #0a0a0a;
  --tm-gray: #5f636b;
  --tm-gray-2: #9aa0a8;
}

/* header */
.team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
/* Layout only — type and colour come from .page-title. */
.team-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.team-header__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, #ff7a3d, #b85bff);
}
.team-header__sub {
  font-size: 13px;
  color: var(--tm-gray-2);
  margin: 6px 0 0;
  max-width: 640px;
}

/* card wrapper — constrained + padded, table in a rounded bordered box
   (same pattern as the Lead sources page). */
.team-page .page-card {
  max-width: 960px;
  margin: 14px auto 0;
  padding: 26px 32px 32px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.team-page .team__tablewrap {
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  overflow-x: auto;
}

/* drop the generic .table border so it doesn't double up with the wrap's */
.team-page .team-table {
  border: 0;
  border-radius: 0;
}

/* table */
.team-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13.5px;
}

/* header cells → mono, uppercase, muted */
.team-table thead th {
  background: var(--tm-paper);
  border-bottom: 1px solid var(--tm-line);
  padding: 12px 16px;
  font-family: var(--tm-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-gray-2);
  white-space: nowrap;
}
.team-table th.col-role,
.team-table th.col-access { color: var(--tm-purple); }
.team-table th.col-attr   { color: var(--tm-gray); }
.team-table .col-center   { text-align: center; }
.team-table .col-sep      { box-shadow: inset 1px 0 0 var(--tm-line-2); border-left: 0; }

/* grouped banner row ("Role & Access" / "Billing & Status") */
.team-table thead tr.grp-row th {
  background: #fff;
  border-bottom: 0;
  padding: 9px 16px 5px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--tm-gray-2);
}
.team-table thead tr.grp-row th.grp-role { color: var(--tm-purple); }
.team-table thead tr.sub-row th { padding-top: 6px; }
/* tie the sub-row role headers into the purple band */
.team-table thead tr.sub-row th.col-role,
.team-table thead tr.sub-row th.col-access { background: #f6f3fc; }

/* Role & Access band (purple tint behind closer / setter / manager) */
.team-table td.col-role,
.team-table td.col-access { background: rgba(122, 79, 208, .045); }
.team-table tbody tr:hover td.col-role,
.team-table tbody tr:hover td.col-access { background: rgba(122, 79, 208, .07); }

/* body cells */
.team-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--tm-line);
  vertical-align: middle;
}
.team-table tbody tr:last-child td { border-bottom: 0; }
.team-table tbody tr:hover td { background: var(--tm-paper); }

/* name cell */
.member-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
}
.member-name__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tm-ink);
}
.member-name__email {
  font-family: var(--tm-mono);
  font-size: 11px;
  color: var(--tm-gray-2);
  letter-spacing: 0.01em;
}

/* toggle colour variants (base .toggle lives in toggle.css) */
.toggle--access .toggle__input:checked + .toggle__track { background: #c98a12; }
.toggle--attr  .toggle__track { background: var(--tm-line-2); }
.toggle--attr  .toggle__input:checked + .toggle__track { background: #1f8a5b; }

/* attribution cell */
.attr-cell { display: inline-flex; align-items: center; gap: 10px; }
.attr-label {
  font-family: var(--tm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  width: 22px;
  text-align: left;
}
.attr-label--on  { color: #1f8a5b; }
.attr-label--off { color: var(--tm-gray-2); }

/* owner badge in the manager-access column */
.owner-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 22px; color: var(--tm-gray-2);
}
.owner-lock svg { width: 15px; height: 15px; }
.owner-tag {
  display: block;
  font-family: var(--tm-mono);
  font-size: 9px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tm-gray-2); margin-top: 3px;
}

/* status select — neutral, rounded (scoped so other pages keep theirs) */
.team-page .status-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--tm-ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235f636b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--tm-line-2);
  border-radius: 9px;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  transition: .13s;
}
.team-page .status-select:hover { border-color: var(--tm-gray-2); }
.team-page .status-select:focus {
  outline: none;
  border-color: var(--tm-ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .06);
}
.team-page .status-badge { font-family: var(--tm-mono); font-size: 11px; }

/* tabs (Active / Removed) — underline style, scoped */
.team-page .nav-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.team-page .nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 4px;
  margin-right: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tm-gray);
  background: none;
  border: none;
  border-radius: 0;
  position: relative;
  letter-spacing: -0.01em;
}
.team-page .nav-tab:hover,
.team-page .nav-tab--active { color: var(--tm-ink); background: none; }
.team-page .nav-tab__label { position: relative; }
.team-page .nav-tab--active .nav-tab__label::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ff7a3d, #b85bff);
}
.team-page .nav-tab__badge {
  font-family: var(--tm-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  border: none;
  background: var(--tm-line);
  color: var(--tm-gray);
}
.team-page .nav-tab--active .nav-tab__badge { background: #eae3ff; color: var(--tm-purple); }

/* legend — explainer key under the page header (one item per line) */
.role-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 0 24px;
  margin: 10px 0 16px;
}
.role-legend__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--tm-gray-2); white-space: nowrap;
}
.role-legend__item b { color: var(--tm-gray); font-weight: 600; }
.role-legend__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.role-legend__swatch--green { background: #1f8a5b; }
.role-legend__swatch--amber { background: #c98a12; }
.role-legend__swatch--red   { background: #c0392b; }
/* ------------------------------------------------------------------
   LANDING PAGE
   All selectors scoped under .lp — this file compiles into the global
   application.css, so nothing here may leak into the app.
   ------------------------------------------------------------------ */

/* Geist variable fonts, self-hosted (CSP blocks external font hosts) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.lp, .lp *, .lp *::before, .lp *::after { box-sizing: border-box; margin: 0; padding: 0; }

html:has(.lp) { scroll-behavior: smooth; }

.lp {
  --white: #ffffff; --paper: #fafafa; --ink: #0a0a0a; --ink-2: #16161a;
  --gray: #5f636b; --gray-2: #9aa0a8; --line: #ececee; --line-2: #e3e3e6;
  --green: #1f8a5b; --red: #c0392b; --blue: #4f7bff;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  letter-spacing: -.011em;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
.lp .mono { font-family: 'Geist Mono', monospace; letter-spacing: 0; }
.lp a { color: inherit; text-decoration: none; }
.lp a:hover { color: var(--ink); }
.lp .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.lp .tnum { font-variant-numeric: tabular-nums; }

/* holographic spectrum */
.lp .holo { position: relative; overflow: hidden; background: #0a0a0a; isolation: isolate; }
.lp .holo::before { content: ""; position: absolute; inset: -30%; z-index: -1; background-color: #0a0a0a;
  background-image:
    radial-gradient(40% 60% at 20% 30%, #ffd24d 0%, transparent 60%),
    radial-gradient(45% 55% at 42% 20%, #ff7a3d 0%, transparent 60%),
    radial-gradient(50% 60% at 58% 65%, #ff4f9a 0%, transparent 60%),
    radial-gradient(45% 70% at 74% 38%, #b85bff 0%, transparent 62%),
    radial-gradient(55% 80% at 90% 70%, #4f7bff 0%, transparent 60%),
    radial-gradient(40% 60% at 64% 90%, #2bd4ff 0%, transparent 60%),
    linear-gradient(115deg, #ffe14d, #ff7a3d 22%, #ff4f9a 44%, #b85bff 62%, #4f7bff 82%, #2bd4ff);
  filter: blur(30px) saturate(1.12); }
.lp .grad-text { background: linear-gradient(110deg, #ff7a3d, #ff4f9a 38%, #b85bff 66%, #4f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* nav */
.lp header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.lp .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.lp .brand { display: flex; align-items: center; gap: 11px; }
.lp .brand .tile { width: 30px; height: 30px; border-radius: 8px; background: #0a0a0a; display: grid; place-items: center; }
.lp .brand .name { font-weight: 600; font-size: 19px; letter-spacing: -.03em; }
.lp .brand .name .io { color: var(--gray-2); }
.lp .nav-links { display: flex; align-items: center; gap: 30px; }
.lp .nav-links a { font-size: 14.5px; color: var(--gray); }
.lp .nav-cta { display: flex; align-items: center; gap: 10px; }
.lp .btn { font-family: inherit; font-size: 14.5px; font-weight: 500; border-radius: 10px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; transition: .15s; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.lp .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.lp .btn-ghost:hover { background: var(--paper); }
.lp .btn-dark { background: var(--ink); color: #fff; }
.lp .btn-dark:hover { background: #000; color: #fff; transform: translateY(-1px); }
.lp .btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.lp .btn-white { background: #fff; color: var(--ink); }
.lp .btn-white:hover { transform: translateY(-1px); }
.lp .btn-clear { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.lp .btn-clear:hover { background: rgba(255,255,255,.2); color: #fff; }

/* hero */
.lp .hero { padding: 80px 0 88px; position: relative; overflow: hidden; }
.lp .net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.lp .kicker { display: inline-flex; align-items: center; gap: 9px; font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--gray); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 13px; background: rgba(255,255,255,.6); }
.lp .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,138,91,.14); }
.lp h1 { font-weight: 600; font-size: 58px; line-height: 1.03; letter-spacing: -.04em; margin-top: 24px; max-width: 15ch; }
.lp h1 .light { font-weight: 300; }
.lp .sub { font-size: 19px; color: var(--gray); line-height: 1.55; margin-top: 24px; max-width: 520px; }
.lp .hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.lp .chips { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.lp .chip { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--gray); }
.lp .chip svg { color: var(--ink); }

/* centered hero */
.lp .hero-center { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.lp .hero-center h1 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.lp .hero-center .sub { margin: 24px auto 0; }
.lp .hero-center .hero-cta { justify-content: center; }
.lp .hero-center .chips { justify-content: center; }

/* metrics strip */
.lp .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.lp .strip-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.lp .stat { padding: 30px 24px; border-right: 1px solid var(--line); }
.lp .stat:last-child { border-right: 0; }
.lp .stat b { font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.lp .stat span { display: block; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--gray-2); text-transform: uppercase; margin-top: 6px; }

/* feature sections */
.lp section.block { padding: 96px 0; border-top: 1px solid var(--line); }
.lp .feat-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.lp .feat-row.rev .feat-copy { order: 2; }
.lp .feat-row--wide { grid-template-columns: 1fr 1.28fr; }
/* let the table cards shrink to the column so their overflow-x wrappers scroll
   instead of forcing the whole page wider on mobile */
.lp .feat-mock { min-width: 0; }
.lp .blacktbl { max-width: 100%; }
.lp .feat-num { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--gray-2); text-transform: uppercase; letter-spacing: .04em; }
.lp .feat-copy h2 { font-weight: 600; font-size: 40px; letter-spacing: -.035em; line-height: 1.06; margin-top: 16px; text-wrap: balance; }
.lp .feat-copy h2 .light { font-weight: 300; }
.lp .feat-copy p { font-size: 17px; color: var(--gray); line-height: 1.55; margin-top: 18px; max-width: 46ch; }
.lp .flist { list-style: none; margin: 26px 0 0; display: flex; flex-direction: column; gap: 13px; }
.lp .flist li { display: flex; gap: 11px; font-size: 15px; color: var(--gray); }
.lp .flist svg { color: var(--ink); flex: none; margin-top: 2px; }

/* dark ink band */
.lp .ink-band { background: var(--ink); color: #fff; }
.lp .ink-in { padding: 96px 0; }
.lp .ink-band .feat-num { color: #7d92ff; }
.lp .ink-band h2 { color: #fff; font-weight: 600; font-size: 40px; letter-spacing: -.035em; line-height: 1.06; margin-top: 16px; }
.lp .ink-band h2 .light { font-weight: 300; color: #b9bdc7; }
.lp .ink-band .feat-copy p { color: #9aa3b4; }
.lp .ink-band .flist li { color: #c4c9d4; }
.lp .ink-band .flist svg { color: #7d92ff; }
.lp .card-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.lp .darkcard { background: #121217; border: 1px solid #23232a; border-radius: 16px; overflow: hidden; }
.lp .darkcard .card-top { border-color: #23232a; }
.lp .darkcard .ld-dd { display: inline-flex; align-items: center; gap: 7px; font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #fff; border-radius: 999px; padding: 5px 11px; cursor: pointer; border: 1px solid transparent; background: linear-gradient(#121217, #121217) padding-box, linear-gradient(110deg, #ff7a3d, #ff4f9a 38%, #b85bff 66%, #4f7bff) border-box; transition: .15s; }
.lp .darkcard .ld-dd svg { color: #8a90a0; }
.lp .darkcard .ld-dd .cur { color: #fff; }
.lp .podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; align-items: end; }
.lp .pod { border: 1px solid #23232a; border-radius: 12px; padding: 16px 12px; text-align: center; background: #0f0f14; }
.lp .pod .rank { width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-family: 'Geist Mono', monospace; font-size: 11px; background: #23232a; color: #c4c9d4; }
.lp .pod.first { padding-top: 22px; border: 0; position: relative; }
.lp .pod.first .rank { background: #fff; color: #0a0a0a; }
.lp .pod .pn { font-size: 13px; font-weight: 600; color: #fff; }
.lp .pod .pv { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin-top: 8px; color: #fff; }
.lp .pod.first .pv { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.lp .trend { padding: 6px 20px 18px; }
.lp .trend .th { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lp .trend .th b { font-size: 13px; font-weight: 600; color: #e6e8ee; }
.lp .tlegend { display: flex; gap: 14px; font-family: 'Geist Mono', monospace; font-size: 10px; color: #8a90a0; }
.lp .tlegend span { display: inline-flex; align-items: center; gap: 6px; }
.lp .tlegend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lp .trend svg { width: 100%; height: auto; display: block; }

/* more grid */
.lp .sec-head { max-width: 680px; }
.lp .sec-head h2 { font-weight: 600; font-size: 40px; letter-spacing: -.035em; line-height: 1.05; margin-top: 16px; }
.lp .sec-head h2 .light { font-weight: 300; }
.lp .sec-head p { font-size: 18px; color: var(--gray); line-height: 1.55; margin-top: 16px; }
.lp .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.lp .feat { border: 1px solid var(--line-2); border-radius: 18px; padding: 26px; background: #fff; transition: .2s; }
.lp .feat:hover { border-color: #d3d3d7; box-shadow: 0 20px 44px -30px rgba(10,10,10,.3); transform: translateY(-2px); }
.lp .feat .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--paper); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); }
.lp .feat h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-top: 18px; }
.lp .feat p { font-size: 14.5px; color: var(--gray); line-height: 1.55; margin-top: 9px; }

/* CTA */
.lp .cta { padding: 96px 0 100px; }
.lp .cta-band { border-radius: 28px; padding: 72px 56px; color: #fff; position: relative; overflow: hidden; text-align: center; }
.lp .cta-band h2 { font-weight: 600; font-size: 46px; letter-spacing: -.04em; line-height: 1.04; position: relative; z-index: 1; }
.lp .cta-band h2 .light { font-weight: 300; }
.lp .cta-band p { font-size: 18px; color: rgba(255,255,255,.92); margin: 18px auto 0; position: relative; z-index: 1; max-width: 520px; line-height: 1.5; }
.lp .cta-band .row2 { display: flex; gap: 14px; margin-top: 34px; position: relative; z-index: 1; justify-content: center; }

/* footer */
.lp footer { border-top: 1px solid var(--line); padding: 48px 0 60px; }
.lp .foot { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; }
.lp .foot .col h5 { font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; color: var(--gray-2); margin-bottom: 14px; }
.lp .foot .col a { display: block; font-size: 14px; color: var(--gray); margin-bottom: 9px; }
.lp .foot-brand { max-width: 280px; }
.lp .foot-brand p { font-size: 13.5px; color: var(--gray-2); margin-top: 14px; line-height: 1.5; }
.lp .copyr { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--gray-2); margin-top: 40px; }

/* black data tables (funnel roas + targets) */
.lp .blacktbl { background: #121217; border: 1px solid #23232a; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.lp .blacktbl .card-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid #23232a; }
.lp .blacktbl .card-top b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.lp .blacktbl .frow-scroll { overflow-x: auto; }
.lp .blacktbl .frow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-bottom: 1px solid #23232a; min-width: 460px; }
.lp .blacktbl .fhead { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; padding: 13px 24px; border-bottom: 1px solid #23232a; min-width: 460px; }
.lp .blacktbl .fhead span { font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #8a90a0; }
.lp .blacktbl .fhead .col-2, .lp .blacktbl .fhead .col-3, .lp .blacktbl .frow .stat-cell { border-left: 1px solid #23232a; padding-left: 18px; }
.lp .blacktbl .src { display: flex; align-items: center; gap: 13px; min-width: 0; }
.lp .blacktbl .src .nm { font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1.15; color: #fff; }
.lp .blacktbl .logo { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.lp .blacktbl .logo.ig { background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5); }
.lp .blacktbl .logo.yt { background: #ff0000; }
.lp .blacktbl .logo.tt { background: #000; border: 1px solid #2a2a2a; }
.lp .blacktbl .logo.li { background: #2f6bd6; }
.lp .blacktbl .logo svg { display: block; }
.lp .blacktbl .stat-cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp .blacktbl .stat-cell .v { font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.lp .blacktbl .klabel.bubble { font-family: 'Geist Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; padding: 0; border: 0; background: linear-gradient(110deg, #ff7a3d, #ff4f9a 38%, #b85bff 66%, #4f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .blacktbl .roas-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #23232a; }
.lp .blacktbl .roas-foot .ft { padding: 20px 24px; border-right: 1px solid #23232a; text-align: center; }
.lp .blacktbl .roas-foot .ft:last-child { border-right: 0; }
.lp .blacktbl .roas-foot .ft .k { font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a90a0; }
.lp .blacktbl .roas-foot .ft .fv { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin-top: 7px; font-variant-numeric: tabular-nums; color: #fff; }
.lp .blacktbl .tgt-scroll { overflow-x: auto; }
.lp .blacktbl table.tgt { border-collapse: collapse; width: 100%; min-width: 520px; }
.lp .blacktbl table.tgt thead th { font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a90a0; font-weight: 500; text-align: left; padding: 14px 24px; border-bottom: 1px solid #23232a; white-space: nowrap; }
.lp .blacktbl table.tgt tbody td { padding: 18px 24px; border-bottom: 1px solid #23232a; vertical-align: middle; }
.lp .blacktbl table.tgt tbody tr:last-child td { border-bottom: 0; }
.lp .blacktbl table.tgt tbody tr.teamrow td { background: #0f0f14; }
.lp .blacktbl .who-cell { display: flex; align-items: center; gap: 12px; }
.lp .blacktbl .who-cell .ava { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 600; }
.lp .blacktbl .who-cell .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.lp .blacktbl .m-line { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.lp .blacktbl .m-vals { font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lp .blacktbl .m-vals .act { font-weight: 600; color: #fff; }
.lp .blacktbl .m-vals .tgt { color: #8a90a0; }
.lp .blacktbl .av-a { background-image: linear-gradient(135deg, #ffb03d, #ff5e7a); }
.lp .blacktbl .av-b { background-image: linear-gradient(135deg, #ff4f9a, #b85bff); }
.lp .blacktbl .av-c { background-image: linear-gradient(135deg, #5b8bff, #2bd4ff); }
.lp .blacktbl .av-d { background-image: linear-gradient(135deg, #12c2a8, #5ce0a0); }
.lp .blacktbl .av-e { background-image: linear-gradient(135deg, #b85bff, #4f7bff); }
.lp .pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; }
.lp .blacktbl .pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp .blacktbl .delta { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lp .blacktbl .delta.up { color: #5ce0a0; }
.lp .blacktbl .delta.down { color: #ff8f84; }
.lp .blacktbl .pill.on { color: #5ce0a0; background: rgba(31,138,91,.16); }
.lp .blacktbl .pill.off { color: #ff8f84; background: rgba(192,57,43,.18); }

/* black analytics card (module 01) */
.lp .blacktbl .chart-area { padding: 26px 26px 8px; }
.lp .blacktbl .chart-area svg { width: 100%; height: auto; display: block; }
.lp .chart-area .axis { font-family: 'Geist Mono', monospace; font-size: 11px; fill: var(--gray-2); }
.lp .chart-area .ylab { font-family: 'Geist Mono', monospace; font-size: 10px; fill: var(--gray-2); }
.lp .blacktbl .kcards { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid #23232a; }
.lp .blacktbl .kmini { padding: 22px 26px; border-right: 1px solid #23232a; text-align: center; }
.lp .blacktbl .kmini:last-child { border-right: 0; }
.lp .blacktbl .kmini .kl { font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; color: #8a90a0; letter-spacing: .05em; }
.lp .blacktbl .kmini .kv { font-size: 30px; font-weight: 600; letter-spacing: -.035em; margin-top: 10px; color: #fff; font-variant-numeric: tabular-nums; }
.lp .blacktbl .kmini .tstat { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.lp .blacktbl .kmini .tstat .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp .blacktbl .kmini .tstat.on { color: #5ce0a0; background: rgba(31,138,91,.16); }
.lp .blacktbl .kmini .tstat.off { color: #ff8f84; background: rgba(192,57,43,.18); }
.lp .blacktbl .kpi-dd { display: inline-flex; align-items: center; gap: 7px; font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #c4c9d4; border-radius: 999px; padding: 5px 11px; cursor: pointer; border: 1px solid transparent; background: linear-gradient(#121217, #121217) padding-box, linear-gradient(110deg, #ff7a3d, #ff4f9a 38%, #b85bff 66%, #4f7bff) border-box; transition: .15s; }
.lp .blacktbl .kpi-dd:hover { color: #fff; }
.lp .blacktbl .kpi-dd .cur { color: #fff; font-weight: 500; }
.lp .blacktbl .kpi-dd svg { color: #8a90a0; }
.lp .blacktbl .ctrl-lbl { font-family: 'Geist Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: #fff; }

@media (max-width: 680px) {
  .lp .blacktbl .stat-cell .v { font-size: 23px; }
}

.lp .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.lp .price-card { border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; background: var(--white); display: flex; flex-direction: column; align-items: flex-start; }
.lp .price-card--featured { border-color: var(--ink); box-shadow: 0 8px 30px rgba(10,10,10,.06); }
.lp .price-name { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--gray-2); text-transform: uppercase; letter-spacing: .04em; }
.lp .price-amt { font-size: 42px; font-weight: 600; letter-spacing: -.035em; margin-top: 14px; }
.lp .price-amt span { font-size: 16px; font-weight: 400; color: var(--gray-2); letter-spacing: 0; }
.lp .price-seats { font-size: 14.5px; color: var(--gray); margin-top: 6px; }
.lp .price-card .btn { margin-top: 24px; width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .lp .feat-row { grid-template-columns: 1fr; gap: 40px; }
  .lp .feat-row.rev .feat-copy { order: 0; }
  .lp h1 { font-size: 44px; }
  .lp .feat-copy h2, .lp .ink-band h2, .lp .sec-head h2 { font-size: 32px; }
  .lp .features { grid-template-columns: 1fr; }
  .lp .pricing { grid-template-columns: 1fr; }
  .lp .strip-in { grid-template-columns: 1fr 1fr; }
  .lp .stat:nth-child(2) { border-right: 0; }
  .lp .nav-links { display: none; }
  .lp .cta-band h2 { font-size: 34px; }
  .lp .wrap { padding: 0 24px; }
}
/* ------------------------------------------------------------------
   CUSTOM SOURCES TRACKING (lead_sources#index)
   ------------------------------------------------------------------ */
/* A grid of source cards: name with rename/delete, the source's funnel
   links, and the field that adds one. The modal that renames or creates a
   source opens inside this page, so its buttons are styled here too. */

.page-shell.lead-sources-page {
  padding: 40px 20px;
}

.lead-sources-page .phead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  max-width: 1040px;
  margin-bottom: 24px;
}

/* The modal's submit, near-black as on the rest of the redesign. */
.lead-sources-page .tracking-links__generate {
  background: var(--ink);
  box-shadow: none;
}

.lead-sources-page .tracking-links__generate:hover {
  background: #000;
}

/* --- Grid --- */
.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  max-width: 1040px;
}

/* --- Card --- */
.source-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.source-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-card);
}

.source-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 12px 16px;
  border-bottom: 1px solid var(--line);
}

.source-card__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.source-card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* Icon buttons: rename, edit a link, delete. */
.source-card__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gray-2);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background 0.12s ease;
}

.source-card__icon:hover {
  background: var(--paper);
  color: var(--ink);
}

.source-card__icon--delete:hover {
  background: var(--bad-bg);
  color: var(--bad);
}

.source-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 10px;
}

.source-card__link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 6px 6px 12px;
  border-radius: 9px;
  background: var(--paper);
}

.source-card__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--ink);
}

/* The code that credits the source. */
.source-card__code {
  color: var(--level-on);
}

.source-card__copy {
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}

.source-card__copy:hover {
  background: var(--paper);
}

.source-card__copy.copy--done {
  border-color: var(--good);
  color: var(--good);
}

.source-card__none {
  margin: 0;
  padding: 6px 4px 2px;
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* --- Add a link --- */
.source-card__add {
  border-top: 1px solid var(--line);
}

.source-card__add-toggle {
  padding: 11px 16px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--gray);
  cursor: pointer;
  list-style: none;
}

.source-card__add-toggle::-webkit-details-marker {
  display: none;
}

.source-card__add-toggle:hover {
  background: var(--paper);
  color: var(--ink);
}

.source-card__add-form {
  display: flex;
  gap: 6px;
  padding: 10px;
}

/* Under the toggle the field hangs from it, so no gap above. */
.source-card__add-toggle + .source-card__add-form {
  padding-top: 0;
}

.source-card__add-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  font: inherit;
  font-size: var(--text-md);
}

.source-card__add-input:focus {
  outline: none;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* --- New source --- */
.source-card--new {
  align-items: center;
  justify-content: center;
  min-height: 150px;
  border-style: dashed;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--gray);
  text-decoration: none;
}

.source-card--new:hover {
  background: var(--paper);
  color: var(--ink);
}
/* ------------------------------------------------------------------
   AUTOMATION RULES
   ------------------------------------------------------------------ */
/* The Automations settings page. The index reuses the source-card block
   (rule-card adds the when/then lines and the share list). The builder is
   the new/edit page: a dotted canvas with a floating back link and one
   centred column — the head row (name, switch, Save) and the chain
   Trigger → Action. Each step (builder-step) is an empty state or a card
   and owns a popover (builder-menu) of radio options plus the chosen one's
   settings; the setter split inside it is builder-shares with its Evenly |
   Custom pair (builder-seg). builder_step_controller.js and
   automation_builder_controller.js only toggle .hidden and write text; the
   chosen states below are drawn from the inputs with :has(). */

/* --- Card (index) --- */
.rule-card--off {
  opacity: 0.6;
}

/* Active or inactive, in the app's green and red so it reads from across
   the room; the only two colours the index uses. */
.rule-card__badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.rule-card__badge--on {
  background: var(--success-bg);
  color: var(--success);
}

.rule-card__badge--off {
  background: var(--danger-bg);
  color: var(--danger);
}

.rule-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
}

.rule-card__line {
  margin: 0;
  font-size: var(--text-base);
  color: var(--ink);
}

.rule-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 0;
}

.rule-card__line--runs {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
}

.rule-card__key {
  display: inline-block;
  min-width: 44px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* ------------------------------------------------------------------
   BUILDER — the page frame
   ------------------------------------------------------------------ */

/* --- Root --- */
.builder {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28px 24px 120px;
  background: var(--paper);
  background-image: radial-gradient(var(--line-3) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* --- Parts --- */

/* Floats over the canvas's top-left corner. Absolute, not fixed: the page
   sits beside the app sidebar, which a fixed link would cover. */
.builder__back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 12px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: var(--text-base);
  color: var(--gray);
  text-decoration: none;
  transition: border-color 0.12s ease;
}

.builder__back:hover {
  border-color: var(--line-3);
  color: var(--ink);
  text-decoration: none;
}

.builder__column {
  max-width: 460px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
}

.builder__head {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

/* Reads as a title until touched: the border appears on hover and the
   field turns white on focus. */
.builder__name {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.builder__name:hover {
  border-color: var(--line-2);
}

.builder__name:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}

.builder__corner {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.builder__active {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h);
  padding: 0 14px 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* The word beside the switch follows its state: Active when on, Paused
   when off. Both are in the page; the checkbox decides which one shows. */
.builder__active-label--off {
  display: none;
  color: var(--gray);
}

.builder__active-label--on {
  color: var(--success);
}

.builder__active:not(:has(.toggle__input:checked)) .builder__active-label--on {
  display: none;
}

.builder__active:not(:has(.toggle__input:checked)) .builder__active-label--off {
  display: inline;
}

.builder__chain {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The connector and the action step, shown once a trigger is chosen. */
.builder__after {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.builder__link {
  width: 1px;
  height: 26px;
  background: var(--line-3);
}

/* ------------------------------------------------------------------
   BUILDER STEP — empty state, card, and the popover's anchor
   ------------------------------------------------------------------ */

/* --- Root --- */
.builder-step {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The violet of the ads table's drill levels names the automation parts:
   the TRIGGER / ACTION pill on the card's top edge, the step icon and the
   card's border. The owner asked for the accent so the chain reads apart
   from the grey settings pages around it. */
.builder-step__badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 2px 9px;
  border: 1px solid var(--level-on-line);
  border-radius: 999px;
  background: var(--level-on-badge);
  color: var(--level-on);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Parts --- */

/* The trigger's empty state: a dashed, full-width invitation. */
.builder-step__add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  border: 1px dashed var(--level-on-line);
  border-radius: var(--radius-lg);
  background: #fff;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.builder-step__add:hover {
  border-color: var(--level-on);
  color: var(--ink);
}

/* The action's empty state: a round plus on the connector. */
.builder-step__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--gray);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.builder-step__plus:hover {
  border-color: var(--level-on);
  color: var(--level-on);
}

/* A step with a choice made: the open button fills the card and the
   remove cross sits at its end. */
.builder-step__card {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 10px;
  border: 1px solid var(--level-on-line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s ease;
}

.builder-step__card:hover {
  border-color: var(--level-on);
}

.builder-step__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.builder-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--level-on-bg);
  color: var(--level-on);
}

.builder-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

/* --- Colors --- */
/* The action step in the chart blue instead of violet, so the two halves
   of the chain tell apart at a glance. The tints are mixed from the one
   token rather than new hex values. */
.builder-step--action .builder-step__badge,
.builder-step--action .builder-step__icon {
  color: var(--series-2);
  background: color-mix(in srgb, var(--series-2) 9%, #fff);
  border-color: color-mix(in srgb, var(--series-2) 30%, #fff);
}

.builder-step--action .builder-step__card,
.builder-step--action .builder-step__plus {
  border-color: color-mix(in srgb, var(--series-2) 30%, #fff);
}

.builder-step--action .builder-step__card:hover,
.builder-step--action .builder-step__plus:hover {
  border-color: var(--series-2);
}

.builder-step--action .builder-step__plus:hover {
  color: var(--series-2);
}

.builder-step__summary {
  font-size: var(--text-md);
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-step__label {
  font-size: var(--text-lg);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-step__remove {
  display: flex;
  flex: none;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--gray-2);
  cursor: pointer;
  transition: background 0.12s ease;
}

.builder-step__remove:hover {
  background: var(--paper);
  color: var(--ink);
}

/* --- State --- */
.builder-step__add:focus-visible,
.builder-step__plus:focus-visible,
.builder-step__open:focus-visible,
.builder-step__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* ------------------------------------------------------------------
   BUILDER MENU — the step's popover
   ------------------------------------------------------------------ */
/* Same surface and offset as .dropdown__menu, anchored to the step. */

/* --- Root --- */
.builder-menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 20;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-menu);
}

/* --- Sizes --- */

/* Under the trigger: as wide as its card. */
.builder-menu--trigger {
  left: 0;
  right: 0;
}

/* Under the action: a fixed width, centred on the plus or the card. */
.builder-menu--action {
  left: 50%;
  width: 340px;
  transform: translateX(-50%);
}

/* --- Options --- */
.builder-menu__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s ease;
}

.builder-menu__option:hover {
  background: var(--paper);
}

/* The real input, kept for the form and for keyboards; the row is the control. */
.builder-menu__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.builder-menu__glyph {
  display: flex;
  flex: none;
  width: 16px;
  color: var(--gray);
}

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

.builder-menu__label {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
}

.builder-menu__hint {
  font-size: var(--text-md);
  color: var(--gray);
}

.builder-menu__check {
  flex: none;
  color: var(--ink);
  opacity: 0;
}

/* --- Panel: the chosen option's settings --- */
/* The only thing visible once a choice is made, so it fills the popover. */
.builder-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -6px;
  padding: 12px 16px 14px;
  border-radius: var(--radius-lg);
  background: var(--paper);
}

/* Holds a full-bleed block (the share list) instead of rows. */
.builder-menu__panel--flush {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.builder-menu__note {
  font-size: var(--text-md);
  color: var(--gray);
}

/* A key on the left, its control on the right. */
.builder-menu__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.builder-menu__key {
  font-size: var(--text-md);
  color: var(--gray);
}

.builder-menu__select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
}

.builder-menu__select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* The chosen step's panel: a white header strip with its name across the
   top of the grey panel, Cancel and Done at the end. The share list draws
   the same strip with .builder-shares__head. */
.builder-menu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -12px -16px 2px;
  padding: 11px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.builder-menu__title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.builder-menu__buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-self: flex-end;
}

/* --- State --- */
.builder-menu__option:has(.builder-menu__radio:checked) {
  background: var(--paper);
}

.builder-menu__option:has(.builder-menu__radio:checked) .builder-menu__check {
  opacity: 1;
}

.builder-menu__option:has(.builder-menu__radio:focus-visible) {
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* ------------------------------------------------------------------
   BUILDER SEG — the Evenly | Custom radio pair
   ------------------------------------------------------------------ */
/* The shape of .segmented, as radio inputs so the pair posts with the
   form and the chosen half is drawn from :checked. */

/* --- Root --- */
.builder-seg {
  display: inline-flex;
  box-sizing: border-box;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

/* --- Parts --- */
.builder-seg__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.12s ease;
}

.builder-seg__item + .builder-seg__item {
  border-left: 1px solid var(--line-2);
}

.builder-seg__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* --- State --- */
.builder-seg__item:hover {
  background: var(--paper);
}

.builder-seg__item:has(.builder-seg__radio:checked) {
  background: var(--ink);
  color: #fff;
}

.builder-seg__item:has(.builder-seg__radio:focus-visible) {
  box-shadow: inset 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* ------------------------------------------------------------------
   BUILDER SHARES — the setter split
   ------------------------------------------------------------------ */
/* One row per active setter: the tick (.checkbox), the initials disc and
   the name, then either the even share or the % field. Which of the two
   shows follows the Custom radio inside the block, no JavaScript needed. */

/* --- Root --- */
.builder-shares {
  display: flex;
  flex-direction: column;
}

/* --- Parts --- */
.builder-shares__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.builder-shares__caption {
  flex: 1;
  font-size: var(--text-md);
  color: var(--gray);
}

.builder-shares__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.builder-shares__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s ease;
}

.builder-shares__row:hover {
  background: #fff;
}

.builder-shares__who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.builder-shares__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 600;
}

.builder-shares__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-shares__even {
  min-width: 36px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
}

.builder-shares__input {
  display: none;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
  transition: box-shadow 0.12s ease;
}

.builder-shares__field {
  width: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink);
  -moz-appearance: textfield;
}

.builder-shares__field:focus {
  outline: none;
}

.builder-shares__unit {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
}

.builder-shares__empty {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-md);
  color: var(--gray);
}

.builder-shares__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 10px 16px;
}

.builder-shares__foot-custom {
  display: none;
  align-items: center;
  gap: 10px;
}

.builder-shares__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

/* The custom total while it is not 100: automation_builder_controller.js
   sets data-off, the only hook it writes besides text. */
.builder-shares__value[data-off] {
  color: var(--gray-2);
}

/* The footer's Done sits at the far end, after the caption and value. */
/* --- State --- */
.builder-shares__input:focus-within {
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}

/* An unticked setter fades, in both modes. */
.builder-shares__row:has(.checkbox:not(:checked)) .builder-shares__who {
  opacity: 0.5;
}

/* Custom: the % field replaces the even share, and the total replaces
   the setter count. */
.builder-shares:has(.builder-seg__radio--custom:checked) .builder-shares__even {
  display: none;
}

.builder-shares:has(.builder-seg__radio--custom:checked) .builder-shares__input {
  display: inline-flex;
}

.builder-shares:has(.builder-seg__radio--custom:checked) .builder-shares__foot-custom {
  display: flex;
}

/* ------------------------------------------------------------------
   BREAKPOINTS
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .builder {
    padding: 24px 16px 64px;
  }

  .builder__column {
    margin-top: 56px;
  }
}

@media (max-width: 640px) {
  .builder__head {
    flex-wrap: wrap;
  }

  .builder__name {
    flex-basis: 100%;
    margin-left: 0;
  }

  .builder-menu--action {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }

  .builder-menu__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
/* ------------------------------------------------------------------
   ADS TRACKING
   ------------------------------------------------------------------ */
/* The two one-time steps on the Ads Tracking page, each a banner: text on
   the left, a dark code block with its copy button on the right. */

.tracking-banner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--gray-200, #e3e3e6);
  border-radius: 16px;
  padding: 22px 26px 22px 30px;
  margin-bottom: 26px;
  background: #fff;
}

.tracking-banner__step {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ff2d95;
  font-weight: 600;
}

/* A step's heading, when the banner carries one (Ads Tracking). */
.tracking-banner__title {
  margin: 8px 0 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tracking-banner__text {
  font-size: 13.5px;
  color: var(--muted, #5f636b);
  line-height: 1.55;
  margin-top: 8px;
}

.tracking-banner__snippet {
  background: #121217;
  border-radius: 12px;
  padding: 16px 16px 14px;
  min-width: 0;
}

.tracking-banner__lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tracking-banner__lbl span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a90a0;
}

.tracking-banner__snippet code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: #c4c9d4;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-all;
}

.tracking-banner__tag { color: #8ea6ff; }
.tracking-banner__attr { color: #5ce0a0; }
.tracking-banner__str { color: #ffb03d; }

.tracking-banner__copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #7c5cff, #6d4aff);
  cursor: pointer;
}

.tracking-banner__copy:hover {
  filter: brightness(1.08);
}

.tracking-banner__copy.copy--done {
  background: #1f8a5b;
}

@media (max-width: 860px) {
  .tracking-banner {
    grid-template-columns: 1fr;
  }
}
/* ------------------------------------------------------------------
   LEADS
   ------------------------------------------------------------------ */
/* The leads page's own blocks. The list itself is .table, the view picker and
   the setter picker are both .dropdown — this file only frames them. */

/* --- Toolbar --- */

/* The row above the list: the view menu (All leads / a lead status / a call
   status) and, for managers, the setter picker. 24px matches .kpi-grid and
   .leaderboard-body, so it lines up with the card below it. */
.leads-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 24px 12px;
}

@media (max-width: 900px) {
  .leads-toolbar {
    margin-inline: 16px;
  }
}

/* The setter picker and its Apply, at the end of the toolbar. */
.leads-toolbar__filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* ------------------------------------------------------------------
   TRACKING LINK MODALS (My Links + New tracking link)
   ------------------------------------------------------------------ */

.modal-panel--flush {
  padding: 0;
}

.modal-panel--narrow {
  max-width: 440px;
}

/* modal chrome */
.tracking-modal__head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border, #f6f6fe);
  position: relative;
}

.tracking-modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tracking-modal__title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-800, #1f2937);
}

.tracking-modal__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--text-blue, #483eff), #7c6cff);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -6px rgba(72, 62, 255, 0.6);
  flex: none;
}

.tracking-modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--gray-400, #9ca3af);
  font-size: 20px;
  text-decoration: none;
  line-height: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
}

.tracking-modal__close:hover {
  color: var(--danger, #dc2626);
  background: var(--gray-50, #f9fafb);
}

.tracking-modal__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border, #f6f6fe);
  background: var(--gray-50, #f9fafb);
}

.tracking-modal__note {
  font-size: 12px;
  color: var(--muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}

.tracking-modal__note svg {
  flex: none;
  color: var(--gray-400, #9ca3af);
}

.tracking-modal__note b {
  color: var(--gray-700, #374151);
  font-weight: 700;
}

.tracking-modal__spacer {
  flex: 1;
}

/* my links list */
.tracking-links {
  padding: 6px 10px 10px;
}

.tracking-links__head {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 12px 12px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
}

.tracking-links__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border-radius: 10px;
  transition: background 0.12s;
}

.tracking-links__row:hover {
  background: var(--gray-50, #f9fafb);
}

.tracking-links__row + .tracking-links__row {
  border-top: 1px solid var(--border, #f6f6fe);
}

.tracking-links__info {
  flex: 1;
  min-width: 0;
}

.tracking-links__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800, #1f2937);
  letter-spacing: -0.01em;
}

.tracking-links__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.tracking-links__url-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 7px 8px 7px 11px;
  max-width: 210px;
}

.tracking-links__url-pill svg {
  color: var(--gray-400, #9ca3af);
  flex: none;
}

.tracking-links__url-pill code {
  font-size: 11.5px;
  color: var(--gray-700, #374151);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-links__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  color: var(--gray-700, #374151);
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  white-space: nowrap;
}

.tracking-links__copy:hover {
  border-color: var(--text-blue, #483eff);
  color: var(--text-blue, #483eff);
}

.copy--done {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #0f7a5b !important;
}

.tracking-links__generate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--text-blue, #483eff), #7c6cff);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 14px -7px rgba(72, 62, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

.tracking-links__generate:hover {
  filter: brightness(1.06);
}

.tracking-modal__done {
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  color: var(--gray-700, #374151);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.tracking-modal__done:hover {
  border-color: var(--gray-300, #d1d5db);
}

/* settings: attribution links card table */
.attribution-table {
  width: 100%;
}

.attribution-table__head {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  padding: 10px 14px;
  background: var(--gray-50, #f9fafb);
}

.attribution-table__head span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gray-400, #9ca3af);
  white-space: nowrap;
}

.attribution-table__row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  align-items: center;
  padding: 12px 14px;
}

.attribution-table__row + .attribution-table__row {
  border-top: 1px solid var(--border, #eef0f4);
}

.attribution-table__source {
  min-width: 0;
}

.attribution-table__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800, #1f2937);
  letter-spacing: -0.01em;
}

.attribution-table__setter {
  font-size: 11.5px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

.attribution-table__linkcell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.attribution-table__url-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e9eaef);
  border-radius: 9px;
  padding: 9px 12px;
  min-width: 0;
}

.attribution-table__url-pill svg {
  color: var(--gray-400, #9ca3af);
  flex: none;
}

.attribution-table__url-pill code {
  font-size: 12.5px;
  color: var(--gray-700, #374151);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribution-table__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border, #eef0f4);
  background: var(--gray-50, #f9fafb);
}

/* creation form */
.tracking-form {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tracking-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tracking-form__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
}

.tracking-form__select {
  height: 42px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 9px;
  padding: 0 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}

.tracking-form__select:hover {
  border-color: var(--gray-300, #d1d5db);
}

.tracking-form__input {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 9px;
  padding: 0 12px;
  background: #fff;
  transition: all 0.12s;
}

.tracking-form__input:focus-within {
  border-color: var(--text-blue, #483eff);
  box-shadow: 0 0 0 3px rgba(72, 62, 255, 0.12);
}

.tracking-form__input svg {
  color: var(--gray-400, #9ca3af);
  flex: none;
}

.tracking-form__input input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: var(--gray-800, #1f2937);
  min-width: 0;
  font-family: inherit;
}

.tracking-form__hint {
  font-size: 11.5px;
  color: var(--muted, #6b7280);
  line-height: 1.4;
}

/* URL pill doubles as the copy control. */
/* An icon-only pill beside the URL (edit): sized to its icon, not stretched. */
.attribution-table__url-pill--icon {
  flex: none;
}

.attribution-table__url-pill--copy {
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}

.attribution-table__url-pill--copy:hover {
  border-color: var(--gray-400, #9ca3af);
}

.attribution-table__url-pill--copy.copy--done {
  border-color: #1f8a5b;
  color: #1f8a5b;
}
/* ------------------------------------------------------------------
   BOOK CALLS — my booking links (setter attribution links)
   Head + table mirror the Ad Spend page.
   ------------------------------------------------------------------ */

.booking {
  --bk-ink: #0a0a0a;
  --bk-paper: #fafafa;
  --bk-white: #ffffff;
  --bk-gray: #5f636b;
  --bk-gray-2: #9aa0a8;
  --bk-line: #ececee;
  --bk-line-2: #e3e3e6;
  --bk-green: #1f8a5b;
  --bk-mono: ui-monospace, "SF Mono", Menlo, monospace;

  padding: 0;
  background: var(--bk-white);
  color: var(--bk-ink);
}

/* head */
.booking__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 32px 24px;
  border-bottom: 1px solid var(--bk-line);
}


.booking__subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--bk-ink);
}

.booking__desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bk-gray);
  max-width: 620px;
}

/* body + table */
.booking__body {
  padding: 26px 32px 32px;
}

.booking__wrap {
  overflow-x: auto;
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  max-width: 900px;
}

.booking__table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 360px;
  font-size: 13px;
}

.booking__table th,
.booking__table td {
  text-align: left;
  padding: 11px 16px;
}

.booking__link {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.booking__table thead th {
  font-family: var(--bk-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-gray-2);
  background: var(--bk-paper);
  border-bottom: 1px solid var(--bk-line);
}

.booking__table tbody td {
  border-bottom: 1px solid var(--bk-line);
}

.booking__table tbody tr:last-child td {
  border-bottom: 0;
}

.booking__table tbody tr:hover td {
  background: var(--bk-paper);
}

/* source cell */
.booking__src {
  display: flex;
  align-items: center;
  gap: 10px;
}

.booking__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.booking__name {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bk-ink);
}

/* link cell */
.booking__url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: var(--bk-paper);
  border: 1px solid var(--bk-line-2);
  border-radius: 9px;
  padding: 7px 11px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.12s, background 0.12s;
}

.booking__url:hover {
  border-color: var(--bk-gray-2);
  background: var(--bk-paper-2, var(--bk-paper));
}

.booking__url svg {
  color: var(--bk-gray-2);
  flex: none;
}

.booking__url code {
  font-family: var(--bk-mono);
  font-size: 12px;
  color: var(--bk-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking__empty {
  font-size: 12.5px;
  color: var(--bk-gray-2);
}

/* action cell */
.booking__actions {
  text-align: right;
  white-space: nowrap;
}

.booking__copy,
.booking__cal,
.booking__generate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  transition: 0.14s;
}

.booking__copy {
  color: #fff;
  background: var(--bk-ink);
  border: 1px solid var(--bk-ink);
}

.booking__copy:hover {
  background: #000;
}

.booking__copy.copy--done {
  background: var(--bk-green);
  border-color: var(--bk-green);
}

.booking__cal {
  color: var(--bk-ink);
  background: var(--bk-white);
  border: 1px solid var(--bk-line-2);
  text-decoration: none;
}

.booking__cal:hover {
  border-color: var(--bk-gray-2);
  background: var(--bk-paper);
}

.booking__generate {
  color: var(--bk-ink);
  background: var(--bk-white);
  border: 1px solid var(--bk-line-2);
}

.booking__generate:hover {
  border-color: var(--bk-gray-2);
  background: var(--bk-paper);
}

.booking__copy svg,
.booking__generate svg {
  flex: none;
}

/* Booking links row redesign: card list with create / live / edit states. */

.booking-list {
  border: 1px solid var(--bk-line-2);
  border-radius: 14px;
  background: var(--bk-white);
  overflow: hidden;
  max-width: 900px;
}

.booking-list__hd {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--bk-line);
  background: linear-gradient(180deg, #fff, #fcfcfd);
}

/* A group band inside a list (Ads / Organic / Custom sources): the same
   tint and ink as the analytics ads table's group rows (.analytics__group-label). */
.booking-list__group {
  padding: 7px 20px;
  border-bottom: 1px solid var(--bk-line);
  background: var(--level-on-bg);
  color: var(--level-on);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -.005em;
}

.booking-list__hd span {
  font-family: var(--bk-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bk-gray-2);
  font-weight: 500;
}

.booking-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--bk-line);
}

.booking-row:last-child {
  border-bottom: 0;
}

.booking-row:hover {
  background: #fcfcfd;
}

.booking-row__src {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.booking-row__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.booking-row__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-row__state {
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-gray-2);
  margin-top: 2px;
}

.booking-row__display,
.booking-row__gen {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* The hidden attribute must beat the display:flex above. */
.booking-row__display[hidden],
.booking-row__form[hidden] {
  display: none;
}

.booking-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--bk-white);
  color: var(--bk-ink);
  border: 1px solid var(--bk-line-2);
  white-space: nowrap;
  text-decoration: none;
}

.booking-row__btn:hover {
  background: var(--bk-paper);
}

.booking-row__btn svg {
  color: var(--bk-gray);
  flex: none;
}

.booking-row__btn--primary {
  background: var(--bk-ink);
  border-color: var(--bk-ink);
  color: #fff;
  font-weight: 600;
}

.booking-row__btn--primary svg {
  color: #fff;
}

.booking-row__btn--primary:hover {
  background: #000;
}

.booking-row__btn--primary.copy--done {
  background: #1f8a5b;
  border-color: #1f8a5b;
}

.booking-row__btn--icon {
  width: 44px;
  padding: 0;
  justify-content: center;
}

.booking-row__create {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: #6d4aff;
  background: var(--bk-white);
  border: 1.5px dashed color-mix(in srgb, #6d4aff 45%, #fff);
}

.booking-row__create:hover {
  border-color: #6d4aff;
  background: color-mix(in srgb, #6d4aff 5%, #fff);
}

.booking-row__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--bk-line-2);
  border-radius: 11px;
  padding: 0 14px;
  height: 44px;
  min-width: 0;
}

.booking-row__input:focus-within {
  border-color: #6d4aff;
  box-shadow: 0 0 0 3px color-mix(in srgb, #6d4aff 12%, #fff);
}

.booking-row__input svg {
  color: var(--bk-gray-2);
  flex: none;
}

.booking-row__input input {
  border: 0;
  outline: 0;
  flex: 1;
  font-family: var(--bk-mono);
  font-size: 13px;
  color: var(--bk-ink);
  min-width: 0;
  background: transparent;
}

.booking-row__input input::placeholder {
  color: var(--bk-gray-2);
}

.booking-row__generate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(90deg, #7c5cff, #6d4aff);
  white-space: nowrap;
}

.booking-row__generate:hover {
  filter: brightness(1.06);
}

.booking-row__generate:disabled {
  opacity: 0.45;
  cursor: default;
  filter: none;
}

.booking-row__cancel {
  height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  background: var(--bk-white);
  color: var(--bk-gray);
  border: 1px solid var(--bk-line-2);
}

.booking-row__cancel:hover {
  color: var(--bk-ink);
  background: var(--bk-paper);
}

/* ------------------------------------------------------------------
   Manager page + setter sections: setup steps, paste bar, source
   toggle rows, section heads. Same --bk-* palette as above.
   ------------------------------------------------------------------ */

/* --- Section head --- */
.booking-sect {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 12px;
}

.booking-sect--first {
  margin-top: 0;
}

.booking-sect__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bk-ink);
}

.booking-sect__desc {
  font-size: 12.5px;
  color: var(--bk-gray-2);
}

.booking-sect__action {
  margin-left: auto;
}

/* --- Setup step card --- */
.booking-step {
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 900px;
}

.booking-step + .booking-step {
  margin-top: 22px;
}

.booking-step__head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.booking-step__n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bk-ink);
  color: #fff;
  font-family: var(--bk-mono);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.booking-step__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.booking-step__desc {
  font-size: 12.5px;
  color: var(--bk-gray);
  margin: 8px 0 14px 33px;
  line-height: 1.55;
  max-width: 58ch;
}

.booking-step .booking-list {
  margin: 14px 0 0 33px;
}

/* --- Configured paste bar --- */
.booking-master {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  padding: 16px 20px;
  max-width: 900px;
  flex-wrap: wrap;
}

.booking-master__text {
  flex: none;
  min-width: 180px;
}

.booking-master__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.booking-master__desc {
  font-size: 12px;
  color: var(--bk-gray);
  margin-top: 4px;
  line-height: 1.5;
  max-width: 34ch;
}

.booking-master__display {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
}

/* --- Source rows (toggle list and link list) --- */
.booking-list--plain {
  max-width: 900px;
}

/* The list's own title row, as the calendars card has one (.calendars__head). */
.booking-list__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bk-line);
}

.booking-list__title {
  font-size: 14.5px;
  font-weight: 600;
}

/* A title row with arrows to the other calendars (Booking Links). */
.booking-list__head--nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.booking-list__head--nav .booking-list__title {
  flex: 1;
  min-width: 0;
}

.booking-list__count {
  margin-right: 6px;
  font-family: var(--bk-mono);
  font-size: 11px;
  color: var(--bk-gray-2);
}

.booking-list__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bk-line-2);
  border-radius: 8px;
  background: var(--bk-white);
  color: var(--bk-ink);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.12s ease;
}

.booking-list__arrow:hover {
  background: var(--bk-paper);
}

.booking-source-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bk-line);
}

.booking-source-row:last-child {
  border-bottom: 0;
}

.booking-source-row:hover {
  background: #fcfcfd;
}

.booking-source-row__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-source-row__url {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--bk-line-2);
  border-radius: 9px;
  padding: 7px 11px;
  min-width: 0;
}

.booking-source-row__url code {
  font-family: var(--bk-mono);
  font-size: 11.5px;
  color: var(--bk-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-source-row__toggle {
  margin-left: auto;
}

/* --- State pill --- */
.booking-state {
  font-family: var(--bk-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bk-green);
  background: #e9f6f0;
  border-radius: 999px;
  padding: 4px 10px;
  margin-left: auto;
  white-space: nowrap;
}

.booking-state--off {
  color: var(--bk-gray-2);
  background: var(--bk-paper);
  border: 1px solid var(--bk-line);
}

/* A state pill next to a trailing toggle keeps the toggle at the edge. */
.booking-source-row .booking-state + .booking-source-row__toggle {
  margin-left: 0;
}

.booking__empty--padded {
  padding: 18px 20px;
}

@media (max-width: 640px) {
  .booking-master {
    flex-direction: column;
    align-items: stretch;
  }

  .booking-master__text {
    min-width: 0;
  }

  .booking-step__desc,
  .booking-step .booking-list {
    margin-left: 0;
  }

  .booking-source-row {
    flex-wrap: wrap;
  }

  .booking-source-row__url {
    flex-basis: 100%;
    order: 3;
  }
}

/* The setter picker on Booking Links, left, above the list. */
.booking__picker {
  margin-bottom: 16px;
}

/* --- Tabs (the analytics tab strip, placed under the head) --- */
/* Same rhythm as the analytics title: 8px above, the tab strip's own
   18px margin below. */
.booking__head--tabs {
  border-bottom: 0;
  padding: 8px 32px 0;
}

.booking__tabs {
  margin: 18px 32px 0;
}

@media (max-width: 640px) {
  .booking__tabs {
    margin: 18px 12px 0;
  }

}

/* ------------------------------------------------------------------
   CALENDARS — the Calendar Links tab's one card: head with count and
   Add calendar, the add form it reveals, and a row per calendar with
   copy / edit / delete on hover. calendar_form_controller.js toggles
   `hidden` on the forms and disables the submit; it adds no styling
   class except --error on the URL field.
   ------------------------------------------------------------------ */

/* --- Root --- */
.calendars {
  max-width: 900px;
  border: 1px solid var(--bk-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bk-white);
}

/* --- Head --- */
.calendars__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bk-line);
}

.calendars__title {
  font-size: 14.5px;
  font-weight: 600;
}

/* "Add booking link", at the head's right end. */
.calendars__add {
  margin-left: auto;
}

.calendars__count,
.calendars__provider {
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-gray-2);
}

/* --- Rows --- */
.calendars__row {
  border-bottom: 1px solid var(--bk-line);
}

.calendars__row:last-child {
  border-bottom: 0;
}

.calendars__row-display {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
}

.calendars__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--bk-line-2);
  border-radius: 10px;
  background: var(--bk-paper);
  color: var(--bk-gray);
}

.calendars__meta {
  flex: 1;
  min-width: 0;
}

.calendars__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The link itself is the copy button: click to copy. */
.calendars__url {
  display: block;
  max-width: 420px;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--bk-mono);
  font-size: 11px;
  color: var(--bk-gray-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.calendars__url:hover,
.calendars__url.copy--done {
  color: var(--bk-ink);
}

.calendars__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* An imported calendar's origin, after its name. */
.calendars__provider {
  margin-left: 6px;
}

.calendars__action {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--bk-gray);
  cursor: pointer;
}

.calendars__action:hover {
  background: var(--bk-paper);
  color: var(--bk-ink);
}

.calendars__action--delete:hover {
  background: #fdeef0;
  color: #c8102e;
}

/* --- Empty --- */
.calendars__empty {
  padding: 44px 20px;
  text-align: center;
}

.calendars__empty-title {
  font-size: 14px;
  font-weight: 600;
}

.calendars__empty-desc {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--bk-gray);
}


/* ------------------------------------------------------------------
   PRODUCT FORM
   ------------------------------------------------------------------ */
/* The add/edit product modal. Drives two Stimulus controllers:
   product-billing-toggle (which billing card is selected, and whether the
   interval field shows) and duration-unit (number + unit → days). The CSS
   owns the card surface, the field chrome and the two composite inputs —
   the price affix and the duration unit picker. Buttons and the modal panel
   itself come from buttons.css and modals.css. */

/* --- Header --- */

.product-form__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.product-form__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-2);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
}

.product-form__title {
  margin: 7px 0 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.product-form__close {
  padding: 4px;
  margin: -4px -4px 0 0;
  border-radius: 8px;
  color: var(--gray-2);
  line-height: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.product-form__close:hover {
  color: var(--ink);
}

/* --- Fields --- */

.product-form__field {
  margin-top: 22px;
}

.product-form__label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* border-box: the app has no global reset, so a 100%-wide field would add
   its padding on top and overflow the panel. */
.product-form__input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  outline: none;
  background: #fff;
  font-family: inherit;
  font-size: var(--text-lg);
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.product-form__input::placeholder {
  color: var(--gray-2);
}

.product-form__input:focus {
  border-color: var(--ink);
}

.product-form__input--mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.product-form__input--affixed {
  padding-left: 30px;
}

.product-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* --- Billing type --- */

.product-form__billing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.product-form__bill {
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.product-form__bill:hover {
  background: var(--paper);
}

.product-form__bill:has(.product-form__bill-radio:checked) {
  border-color: var(--ink);
}

/* The radio still owns the state and posts the value; it is only hidden. */
.product-form__bill-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-form__bill-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.product-form__bill-ic {
  flex: none;
  color: var(--gray-2);
}

.product-form__bill:has(.product-form__bill-radio:checked) .product-form__bill-ic {
  color: var(--ink);
}

.product-form__bill-chk {
  margin-left: auto;
  visibility: hidden;
  color: var(--ink);
}

.product-form__bill:has(.product-form__bill-radio:checked) .product-form__bill-chk {
  visibility: visible;
}

.product-form__bill-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--gray);
}

/* --- Price affix --- */

.product-form__affix {
  position: relative;
}

.product-form__affix-sym {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--gray-2);
  pointer-events: none;
}

/* --- Duration: number + unit in one control --- */

/* The border lives on the wrapper so the pair reads as a single field; the
   input inside drops its own, and focus-within moves the focus ring out. */
.product-form__unit {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  overflow: hidden;
}

.product-form__unit:focus-within {
  border-color: var(--ink);
}

.product-form__unit .product-form__input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
}

/* appearance:none drops the native arrow, so the unit reads as static text.
   The stacked chevrons put back the "there are other options" cue. The colour
   is inlined rather than tokenised because a data URI cannot resolve a custom
   property — it is --gray-2. */
.product-form__unit-sel {
  padding: 0 26px 0 12px;
  border: none;
  border-left: 1px solid var(--line-2);
  outline: none;
  appearance: none;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none' stroke='%239aa0a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5 4 2l2.5 2.5'/%3E%3Cpath d='M1.5 7.5 4 10l2.5-2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
}

/* --- Switch row --- */

/* A setting, not a field: label on the left, switch on the right, and the
   whole row sits on the inset surface so it reads apart from the inputs. */
.product-form__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--paper);
}

.product-form__switch-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Names the one provider this setting applies to, so nobody flips it on a
   Stripe product and waits for something to happen. */
.product-form__switch-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.product-form__switch-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--gray);
}

/* --- Actions --- */

.product-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 26px;
}

@media (max-width: 640px) {
  .product-form__row,
  .product-form__billing {
    grid-template-columns: 1fr;
  }
}
/* Profile / account-settings page — scoped under .profile-page */
.profile-page {
  --pp-white:#ffffff;--pp-paper:#fafafa;--pp-ink:#0a0a0a;--pp-ink-2:#16161a;
  --pp-gray:#5f636b;--pp-gray-2:#9aa0a8;--pp-line:#ececee;--pp-line-2:#e3e3e6;
  --pp-green:#1f8a5b;--pp-green-bg:#e7f4ee;--pp-red:#c0392b;--pp-blue:#4f7bff;
  font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--pp-ink);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  padding:40px 20px;
}

.profile-page .pp-page{max-width:680px;margin:0 auto}

/* header */
.profile-page .phead{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.profile-page .phead .kicker{font-family:'Geist Mono',monospace;font-size:11px;color:var(--pp-gray-2);text-transform:uppercase;letter-spacing:.07em}
.profile-page .phead .who{display:flex;align-items:center;gap:11px}
.profile-page .phead .who .meta{text-align:right}
.profile-page .phead .who .nm{font-size:13.5px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.profile-page .phead .who .av{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#ff7a3d,#b85bff);color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px}

/* cards */
.profile-page .pp-card{background:#fff;border:1px solid var(--pp-line);border-radius:16px;padding:24px 26px;margin-bottom:18px;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.profile-page .card-head{margin-bottom:20px}
.profile-page .card-head .ct{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.profile-page .card-head .ct .dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#ff7a3d,#b85bff);flex:none}

/* form grid */
.profile-page .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.profile-page .field{display:flex;flex-direction:column;gap:7px}
.profile-page .field.full{grid-column:1 / -1}
.profile-page .field label{font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--pp-gray);display:flex;align-items:center;gap:8px}
.profile-page .field .ctl{position:relative;display:flex;align-items:center}
.profile-page input.inp,.profile-page select.inp{width:100%;font-family:'Geist',sans-serif;font-size:14px;color:var(--pp-ink);background:#fff;border:1px solid var(--pp-line-2);border-radius:11px;padding:12px 14px;transition:.13s;letter-spacing:-.01em}
.profile-page input.inp::placeholder{color:var(--pp-gray-2)}
.profile-page input.inp:hover,.profile-page select.inp:hover{border-color:var(--pp-gray-2)}
.profile-page input.inp:focus,.profile-page select.inp:focus{outline:none;border-color:var(--pp-ink);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.profile-page select.inp{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f636b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.profile-page .field .hicon{position:absolute;left:13px;color:var(--pp-gray-2);pointer-events:none;display:flex}
.profile-page .field .hicon ~ input{padding-left:38px}
.profile-page .verified{display:inline-flex;align-items:center;gap:5px;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--pp-green);background:var(--pp-green-bg);padding:3px 8px;border-radius:6px}


/* actions */
.profile-page .actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:4px}
.profile-page .btn{font-family:inherit;font-size:14px;font-weight:500;border-radius:11px;padding:12px 22px;cursor:pointer;border:1px solid transparent;transition:.15s;letter-spacing:-.01em}
.profile-page .btn-ghost{background:#fff;color:var(--pp-ink);border-color:var(--pp-line-2)}
.profile-page .btn-ghost:hover{border-color:var(--pp-gray-2)}
.profile-page .btn-primary{background:var(--pp-ink);color:#fff}
.profile-page .btn-primary:hover{background:#000}

@media (max-width:560px){
  .profile-page .formgrid{grid-template-columns:1fr}
}
/* ------------------------------------------------------------------
   WORKSPACE
   ------------------------------------------------------------------ */
/* The page a signed-in user sees when they belong to no active team: either
   waiting on an invite, or about to create their own business account. Two
   stacked cards, no navigation — there is nowhere else for them to go yet. */

/* --- Root --- */

.workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  padding: 0 24px;
}

/* --- Parts --- */

.workspace__lede {
  margin: 0 0 24px;
  padding: 0 24px;
  max-width: 560px;
  font-size: var(--text-lg);
  color: var(--gray);
}

.workspace__card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.workspace__card-title {
  margin: 0 0 8px;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
}

.workspace__card-body {
  margin: 0;
  font-size: var(--text-base);
  color: var(--gray);
}

.workspace__card-note {
  margin: 12px 0 0;
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* The create card's button needs room under its copy. */
.workspace__card-body + .button {
  margin-top: 20px;
}

.workspace__signout {
  margin: 28px 0 0;
  padding: 0 24px;
}

.workspace__signout-button {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-md);
  color: var(--gray-2);
  text-decoration: underline;
  cursor: pointer;
}

.workspace__signout-button:hover {
  color: var(--ink);
}

.workspace__signout-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
  border-radius: 4px;
}
/* Invite Team Member modal — scoped under .invite-modal (the card itself) */
.invite-modal{
  --im-white:#ffffff;--im-paper:#fafafa;--im-ink:#0a0a0a;
  --im-gray:#5f636b;--im-gray-2:#9aa0a8;--im-line:#ececee;--im-line-2:#e3e3e6;
  --im-green:#1f8a5b;--im-green-bg:#e7f4ee;--im-amber:#c98a12;--im-amber-bg:#fbf1dd;--im-blue:#4f7bff;
  width:440px;max-width:100%;background:#fff;border:1px solid var(--im-line);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,10,10,.05),0 50px 90px -40px rgba(10,10,10,.5);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--im-ink);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
}

/* head */
.invite-modal .m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 18px;border-bottom:1px solid var(--im-line)}
.invite-modal .m-head .eyebrow{font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--im-gray-2)}
.invite-modal .m-head h2{font-size:20px;font-weight:600;letter-spacing:-.03em;margin-top:6px;line-height:1.1;display:flex;align-items:center;gap:9px}
.invite-modal .m-head h2 .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#ff7a3d,#b85bff);flex:none}
.invite-modal .x{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--im-line);background:#fff;color:var(--im-gray);display:grid;place-items:center;cursor:pointer;transition:.15s;text-decoration:none}
.invite-modal .x:hover{background:var(--im-paper);color:var(--im-ink)}

/* body + fields */
.invite-modal .m-body{padding:20px 24px 4px}
.invite-modal .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.invite-modal .field label{font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--im-gray)}
.invite-modal .field .ctl{position:relative;display:flex;align-items:center}
.invite-modal .field .hicon{position:absolute;left:13px;color:var(--im-gray-2);pointer-events:none;display:flex}
.invite-modal input.inp{width:100%;font-family:'Geist',sans-serif;font-size:14px;color:var(--im-ink);background:#fff;border:1px solid var(--im-line-2);border-radius:11px;padding:12px 14px;transition:.13s;letter-spacing:-.01em}
.invite-modal input.inp.with-icon{padding-left:38px}
.invite-modal input.inp::placeholder{color:var(--im-gray-2)}
.invite-modal input.inp:hover{border-color:var(--im-gray-2)}
.invite-modal input.inp:focus{outline:none;border-color:var(--im-ink);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.invite-modal .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* section divider */
.invite-modal .sec{font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--im-gray);margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.invite-modal .sec::after{content:"";flex:1;height:1px;background:var(--im-line)}

/* selectable role cards */
.invite-modal .roles{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.invite-modal .role{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--im-line-2);border-radius:12px;cursor:pointer;transition:.14s;position:relative;background:#fff}
.invite-modal .role:hover{border-color:var(--im-gray-2);background:var(--im-paper)}
.invite-modal .role .ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--im-paper);color:var(--im-gray);transition:.14s}
.invite-modal .role .meta{flex:1;min-width:0;display:flex;flex-direction:column}
.invite-modal .role .nm{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.invite-modal .role .ds{display:block;font-size:11.5px;color:var(--im-gray);margin-top:2px;line-height:1.35}
.invite-modal .role .chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--im-line-2);flex:none;display:grid;place-items:center;color:#fff;transition:.14s}
.invite-modal .role .chk svg{opacity:0;transform:scale(.6);transition:.14s}
.invite-modal .role input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.invite-modal .role.closer input:checked ~ .chk{background:var(--im-green);border-color:var(--im-green)}
.invite-modal .role.setter input:checked ~ .chk{background:var(--im-amber);border-color:var(--im-amber)}
.invite-modal .role.admin  input:checked ~ .chk{background:var(--im-ink);border-color:var(--im-ink)}
.invite-modal .role input:checked ~ .chk svg{opacity:1;transform:none}
.invite-modal .role.closer input:checked ~ .ic{background:var(--im-green-bg);color:var(--im-green)}
.invite-modal .role.setter input:checked ~ .ic{background:var(--im-amber-bg);color:var(--im-amber)}
.invite-modal .role.admin  input:checked ~ .ic{background:#ecebf6;color:var(--im-ink)}
.invite-modal .role input:checked ~ .meta .nm{color:var(--im-ink)}
.invite-modal .role.closer:has(input:checked){border-color:rgba(31,138,91,.4)}
.invite-modal .role.setter:has(input:checked){border-color:rgba(201,138,18,.45)}
.invite-modal .role.admin:has(input:checked){border-color:rgba(10,10,10,.35)}
.invite-modal .role input:focus-visible ~ .chk{box-shadow:0 0 0 3px rgba(10,10,10,.12)}

/* footer */
.invite-modal .m-foot{display:flex;gap:10px;padding:18px 24px 22px;margin-top:6px}
.invite-modal .btn{flex:1;font-family:inherit;font-size:14px;font-weight:500;border-radius:12px;padding:13px 18px;cursor:pointer;border:1px solid transparent;transition:.15s;letter-spacing:-.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.invite-modal .btn-ghost{flex:none;padding-left:22px;padding-right:22px;background:#fff;color:var(--im-ink);border-color:var(--im-line-2)}
.invite-modal .btn-ghost:hover{border-color:var(--im-gray-2)}
.invite-modal .btn-primary{background:var(--im-ink);color:#fff}
.invite-modal .btn-primary:hover{background:#000}

.invite-modal .hint{font-size:11.5px;color:var(--im-gray-2);text-align:center;padding:0 24px 20px;margin-top:-6px;line-height:1.4}
.invite-modal .hint svg{vertical-align:-2px;margin-right:3px}

.invite-modal .im-errors{padding:0 24px 10px}
/* ------------------------------------------------------------------
   JOURNEY — the contact's attribution timeline on contacts#show.
   Summary strip (first/last touch, days to close, cash) above a
   vertical timeline of touches, calls and payments. No JS.
   ------------------------------------------------------------------ */

/* --- Root --- */
/* Inside the contact page's section card (.csec), which draws the frame
   and the header bar; this is only the inset. */
.journey {
  padding: 24px 22px 20px;
}

.journey__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--gray-2);
}


/* --- Timeline --- */
/* One step per row: the dot on a rail, the time in a fixed column, then
   the title, its detail lines and the chips. */
.journey__entry {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 34px;
}

.journey__entry:last-child {
  padding-bottom: 0;
}

.journey__entry::before {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 20px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}

.journey__entry:last-child::before {
  display: none;
}

.journey__dot {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border: 2px solid var(--gray-2);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.journey__entry--key .journey__dot {
  border-color: var(--ink);
  background: var(--ink);
}

.journey__entry--won .journey__dot {
  border-color: #1f8a5b;
  background: #1f8a5b;
}

.journey__when {
  flex: none;
  width: 104px;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gray-2);
  white-space: nowrap;
}

.journey__body {
  min-width: 0;
}

.journey__entry-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.journey__detail {
  margin: 6px 0 0;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--gray);
  overflow-wrap: anywhere;
}

.journey__detail + .journey__detail {
  margin-top: 3px;
}

.journey__detail--url {
  margin-top: 7px;
}

.journey__mono {
  font-family: var(--font-mono);
  color: var(--ink);
}

/* Campaign and ad on one line, trimmed; the popup carries the full names. */
.journey__campaign {
  display: block;
  max-width: 100%;
}

.journey__campaign-text {
  display: block;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The page URL line stays quieter than the main detail. */
.journey__detail--url .journey__mono {
  font-size: var(--text-sm);
  color: var(--gray-2);
}

/* --- Chip --- */
/* The source, beside the verb in the title. */

/* The campaign popup: three label/value rows, campaign, ad set, ad. */
.journey__pop {
  min-width: 280px;
  max-width: 420px;
}

.journey__pop-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.journey__pop-row:last-child {
  border-bottom: none;
}

.journey__pop-key {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
  padding-top: 2px;
}

.journey__pop-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
}

.journey__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 9px;
}

@media (max-width: 640px) {
  .journey__entry {
    flex-wrap: wrap;
  }

  .journey__when {
    width: auto;
  }
}
/* ------------------------------------------------------------------
   CONTACT SHOW
   ------------------------------------------------------------------ */
/* One person's page, capped and centred: a top row with the back link and
   the delete button, then two columns. The left column is the record's
   sections (subscriptions, calls, journey), each a section card (csec.css);
   the right column is the contact card, a rail that stays put while the
   sections scroll. The card is a turbo frame swapped between read and
   edit; the only JS is the shared copy button. */

/* --- Frame --- */

.contact-show {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* padding-inline: 0 beats the older .contact-show__top in components.css
   (0 24px), which the recordings page still relies on; here the back link
   must sit on the title's left edge. */
.contact-show__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-inline: 0;
  margin-bottom: 20px;
}

/* The page's name, plain ink like the hero titles, above the two columns. */
.contact-show__title {
  margin: 0 0 20px;
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.contact-show__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.contact-show__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.contact-show__rail {
  position: sticky;
  top: 24px;
}

/* ------------------------------------------------------------------
   CONTACT PANEL — the rail card
   ------------------------------------------------------------------ */

.cpanel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
}

/* --- Head: avatar, name, since, the pencil --- */

.cpanel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.cpanel__avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--level-on-bg);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--level-on);
}

.cpanel__who {
  min-width: 0;
}

.cpanel__name {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

/* The pencil that opens edit mode. */
.cpanel__iact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  color: var(--gray);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cpanel__iact:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* --- Rows: icon and label left, value right --- */

.cpanel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}

.cpanel__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray);
}

.cpanel__icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gray-2);
}

.cpanel__val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.cpanel__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  text-align: right;
  color: var(--ink);
}

.cpanel__value--dim {
  color: var(--gray-2);
  font-weight: 400;
}

.cpanel__link {
  color: var(--ink);
  text-decoration: none;
}

.cpanel__link:hover {
  text-decoration: underline;
}

/* "+ Add phone", "Add notes": a small mono call to action in the value's place. */
.cpanel__add {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--level-on);
  text-decoration: none;
  white-space: nowrap;
}

.cpanel__add:hover {
  text-decoration: underline;
}

/* --- Foot: the lifetime value on the inset surface --- */

.cpanel__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--paper);
}

.cpanel__foot-label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.cpanel__foot-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* In edit mode the foot holds Cancel and Save instead. */
.cpanel__foot--acts {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* --- Edit mode: the value becomes a field on a dashed underline --- */

.cpanel__input {
  flex: 1;
  min-width: 0;
  padding: 0 0 2px;
  border: none;
  border-bottom: 1px dashed var(--gray-2);
  border-radius: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  text-align: right;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.cpanel__input--name {
  font-weight: 600;
}

.cpanel__input:focus {
  border-bottom-color: var(--ink);
}

.cpanel__error {
  margin: 0;
  padding: 10px 22px 0;
  font-size: var(--text-md);
  color: var(--danger);
}

/* ------------------------------------------------------------------
   SUBSCRIPTION CARDS
   ------------------------------------------------------------------ */
/* One card per subscription, the whole card a link to it: the product in
   the head, then label:value rows for status, plan, provider, closer,
   setter and the net price in the accent. */

.sub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.sub-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sub-card:hover {
  border-color: var(--line-2);
  background: var(--paper);
}

.sub-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.sub-card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.sub-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sub-card:hover .sub-card__go {
  border-color: var(--ink);
  color: var(--ink);
}

.sub-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
}

.sub-card__row:last-child {
  border-bottom: none;
}

.sub-card__label {
  flex: none;
  width: 110px;
  color: var(--gray);
}

.sub-card__value {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 500;
  color: var(--ink);
}

.sub-card__value--net {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--level-on);
}

.sub-card__dim {
  color: var(--gray-2);
  font-weight: 400;
}

.sub-card__mono {
  font-family: var(--font-mono);
}

.sub-card__av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--level-on-bg);
  font-size: 8.5px;
  font-weight: 600;
  color: var(--level-on);
}

.sub-card__av--setter {
  background: var(--success-bg);
  color: var(--success);
}

/* Calls: the flush table sits right under the bar. */
.contact-calls.contact-calls {
  margin-top: 0;
}

.contact-calls__acts,
.contact-calls__date {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .contact-show__grid {
    grid-template-columns: 1fr;
  }

  /* The card first on a narrow screen, and no longer pinned. */
  .contact-show__rail {
    position: static;
    order: -1;
  }
}
/* ------------------------------------------------------------------
   LEGAL
   ------------------------------------------------------------------ */
/* The public privacy policy and data deletion pages. No JavaScript.
   Plain long-form prose on white, centred in a reading measure — the
   only screens in the app where a paragraph is the primary element.

   Every token carries a literal fallback, which the tier rules otherwise
   forbid: these two pages ship to production ahead of the redesign branch
   that introduces colors.css and text.css, so on main the tokens do not
   exist yet. Drop the fallbacks once the redesign is merged. */

/* --- Root --- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  font-family: var(--font-sans, 'Geist', 'Inter', system-ui, -apple-system, sans-serif);
  color: var(--ink, #0a0a0a);
}

/* --- Parts --- */
.legal__back {
  display: inline-block;
  margin-bottom: 32px;
  font-size: var(--text-md, 12px);
  color: var(--gray, #5f636b);
  text-decoration: none;
}

.legal__title {
  margin: 0;
  font-size: var(--text-2xl, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal__updated {
  margin: 8px 0 0;
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--label-size, 9.5px);
  letter-spacing: var(--label-tracking, .08em);
  text-transform: uppercase;
  color: var(--gray-2, #9aa0a8);
}

.legal__intro {
  margin: 24px 0 0;
  font-size: var(--text-lg, 14px);
  line-height: 1.7;
  color: var(--gray, #5f636b);
}

.legal__section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line, #ececee);
}

.legal__heading {
  margin: 0 0 12px;
  font-size: var(--text-xl, 16px);
  font-weight: 600;
}

.legal__text {
  margin: 0 0 12px;
  font-size: var(--text-base, 13px);
  line-height: 1.75;
  color: var(--gray, #5f636b);
}

.legal__list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: var(--text-base, 13px);
  line-height: 1.75;
  color: var(--gray, #5f636b);
}

.legal__item {
  margin-bottom: 6px;
}

.legal__term {
  font-weight: 600;
  color: var(--ink, #0a0a0a);
}

.legal__link {
  color: var(--ink, #0a0a0a);
}

/* --- State --- */
.legal__back:hover {
  color: var(--ink, #0a0a0a);
}

/* --- Breakpoints --- */
@media (max-width: 640px) {
  .legal {
    padding: 40px 20px 64px;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 */

/*
 * Order matters: specificity here is flat by design, so the manifest is the
 * only tie-breaker. Tokens first, then element defaults, then components,
 * then page files — a page file may add its own block, never restyle another
 * component's parts.
 *



































































 */