/* ------------------------------------------------------------------
   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;

  /* 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 display groups. The third place colour carries meaning: which group
     of the KPI grid a card belongs to. One hue per KpiMetric::GROUPS entry,
     spent only on a 7px dot in the group header and a 2px hairline along the
     card's bottom edge — the card itself stays black and white. */
  --group-leads: #4f7bff;
  --group-calls: #ff4f9a;
  --group-rates: #b85bff;
  --group-cash:  #1f8a5b;
  --group-ads:   #ff7a3d;

  /* 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 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;

  /* --- 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);
}

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

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

/* 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 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-card-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  color: var(--gray-400);
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
}

.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;
}

.chart-plot__line {
  fill: none;
  stroke: 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(--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(--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)
   ------------------------------------------------------------------ */

.kpi-grid--basic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  padding: 0 24px;
}

@media (max-width: 1280px) {
  .kpi-grid--basic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .kpi-grid--basic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@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. */
.kpi-grid--basic .kpi-card {
  position: relative;
  overflow: hidden;
  flex: none;
  max-width: none;
  aspect-ratio: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  padding: 17px 20px 16px;
  background: #fff;
  cursor: default;
  transition: background 0.15s ease;
}

.kpi-grid--basic .kpi-card:hover {
  background: var(--paper);
}

/* The group hairline: a 2px line inset along the card's bottom edge. It is
   the whole of the card's colour, and it is --line-2 until a group modifier
   names a hue. */
.kpi-grid--basic .kpi-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--line-2);
}

/* Doubled up as .kpi-card.kpi-card--x to match the specificity of the
   .kpi-grid--basic .kpi-card base rule above; a single modifier class loses
   that tie and every hairline comes out gray. */
.kpi-card.kpi-card--leads::before { background: var(--group-leads); }
.kpi-card.kpi-card--calls::before { background: var(--group-calls); }
.kpi-card.kpi-card--rates::before { background: var(--group-rates); }
.kpi-card.kpi-card--cash::before  { background: var(--group-cash); }
.kpi-card.kpi-card--ads::before   { background: var(--group-ads); }

/* A step up from --label-size: the card title has to be readable at a glance,
   not just findable, so it sits on the type scale rather than at micro-label size. */
.kpi-grid--basic .kpi-card-label {
  margin-right: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  line-height: 1.5;
  color: var(--gray-2);
}

/* Mono, and a step down the scale from the 30px it used to be: the figure
   still leads the card, it just stops shouting. */
.kpi-grid--basic .kpi-card-value {
  font-family: var(--font-mono);
  /* Deliberately between --text-2xl (20) and --text-3xl (26): 26 makes the
     figure shout again, 20 reads small once the label grew. */
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  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;
}

.kpi-card__projection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 8px;
  border-top: var(--border-standard);
}

/* "/ 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: 500;
  color: #9aa0a8;
}

.kpi-card-target__val {
  font-size: 15px;
  font-weight: 500;
  color: #9aa0a8;
}

/* No target yet: the card offers the way to set one instead of an empty foot.
   Ink, like every other action in the redesign — the palette keeps colour for
   gold, red and green. */
.kpi-card__set-target {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.kpi-card__set-target:hover {
  color: var(--gray);
}

.kpi-card__pace-status {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
}

.kpi-card__pace-status--on-target,
.kpi-card__pace-status--on-pace          { color: #047857; background: #ecfdf5; }
.kpi-card__pace-status--off-target,
.kpi-card__pace-status--off-pace         { color: var(--danger); background: #fef2f2; }
.kpi-card__pace-status--not-started      { color: var(--gray-500); background: var(--gray-100); }

.kpi-card__pace-detail {
  margin-left: 4px;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.kpi-card__set-projection-link {
  font-size: 12.5px;
  font-weight: 500;
  color: #6d4aff;
  text-decoration: none;
  padding-top: 6px;
  border-top: var(--border-standard);
  margin-top: 2px;
}

.kpi-card__set-projection-link:hover {
  color: var(--button-hover);
  text-decoration: underline;
}


/* ------------------------------------------------------------------
   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::GROUPS entry that has active cards: a coloured dot,
   the group name in mono, and a hairline running out to the right edge. */

.kpi-group {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 32px 0 0;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

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

.kpi-group__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--line-2);
}

.kpi-group__dot--leads { background: var(--group-leads); }
.kpi-group__dot--calls { background: var(--group-calls); }
.kpi-group__dot--rates { background: var(--group-rates); }
.kpi-group__dot--cash  { background: var(--group-cash); }
.kpi-group__dot--ads   { background: var(--group-ads); }

/* 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);
}
/* ------------------------------------------------------------------
   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;
}

.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;
}

.tk-line {
  display: grid;
  grid-template-columns: 1fr 120px 24px 130px 108px;
  align-items: center;
}

.tk-lines__head {
  padding: 14px 20px 10px;
  text-align: center;
  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;
}

/* One vertical rule, between the KPI name and its numbers: "current / target"
   is a single reading and the status belongs to it, so nothing splits them.

   The rule runs the full height of the row — hence the negative block margin,
   which cancels the row's own vertical padding before the cell puts it back. */
.tk-line__cur {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.tk-line__cur {
  margin-block: -15px;
  padding-block: 15px;
}

.tk-line {
  padding: 15px 20px;
  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. */
.tk-line__label {
  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__sep {
  color: var(--line-2);
  font-family: var(--font-mono);
  font-size: 15px;
  text-align: center;
}

.tk-line__target {
  justify-self: start;
  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: 1px;
}

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

.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;
}

.tk-line__input::placeholder {
  color: var(--gray-2);
}

.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 {
  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: #d9d3ff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -20px rgba(10, 10, 10, 0.35);
}

/* Reserve the chip's width and clamp long names at 2 lines (full name in title) */
.kpi-card--link .kpi-card-label {
  padding-right: 112px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
  line-height: 1.5;
}

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

/* Keep the projection footer's own link clickable above the overlay */
.kpi-card--link .kpi-card__set-projection-link,
.kpi-card--link .kpi-card__projection {
  position: relative;
  z-index: 2;
}

/* ── "View sources" chip ── */

.kpi-card__view-sources {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--kd-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kd-gray-2);
  background: var(--kd-paper);
  border: 1px solid transparent;
  transition: 0.15s;
}

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

.kpi-card__view-sources-dots i {
  width: 5px;
  height: 5px;
  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; }

/* Dots keep their colors — never turn white */
.kpi-card--link:hover .kpi-card__view-sources {
  color: var(--kd-purple);
  background: #fff;
  border-color: #d9d3ff;
}

/* ── 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-cell {
  position: relative;
}

.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%;
}

.kpi-drilldown__rowbar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  border-radius: 0 99px 99px 0;
}

.kpi-drilldown__percent {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* --- 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--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);
}
/* ------------------------------------------------------------------
   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
   ------------------------------------------------------------------ */
/* The picker that activates a section's KPIs, opened from /kpis/:section
   and rendered into the shared #modal turbo frame. It sits inside
   .modal-backdrop and replaces .modal-panel, so it owns its own surface.

   No JS drives the ticks: each row is a <label> around a hidden checkbox
   and :has(input:checked) paints the checked state, so the form posts on
   its own. The one Stimulus controller in the markup only keeps the
   "N active" counter in the footer honest.

   All values are base.css tokens — no local hex, radius or shadow. */

/* --- Root --- */
/* box-sizing is set per rule: the app has no global border-box reset, and
   the body's legacy colour and typeface are overridden here, since every
   part below inherits from this element. */
.kpi-modal {
  box-sizing: border-box;
  width: 500px;
  max-width: calc(100vw - 32px);
  max-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: -.011em;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-menu);
}

/* The form is the real column: without it the body has no bounded height to
   scroll inside and the footer falls out of the panel. */
.kpi-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* --- Parts: header --- */
.kpi-modal__header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px 0;
}

.kpi-modal__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.03em;
}

.kpi-modal__section {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.kpi-modal__section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.kpi-modal__section-dot--closer   { background: var(--section-closer); }
.kpi-modal__section-dot--setter   { background: var(--section-setter); }
.kpi-modal__section-dot--business { background: var(--gold); }
.kpi-modal__section-dot--ads      { background: var(--section-ads); }

.kpi-modal__close {
  border: none;
  background: none;
  color: var(--gray-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  transition: background .15s ease, color .15s ease;
}

.kpi-modal__close:hover {
  background: var(--paper);
  color: var(--ink);
}

/* --- Parts: body / list --- */
.kpi-modal__body {
  flex: 1;
  min-height: 0;
  padding: 8px 24px 10px;
  overflow-y: auto;
}

.kpi-modal__body::-webkit-scrollbar { width: 8px; }

.kpi-modal__body::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}

.kpi-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kpi-modal__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background .12s ease;
}

.kpi-modal__row:hover { background: var(--paper); }

/* Everything except the info button toggles the tick, so the info icon can
   be a real button without JS having to cancel the row's click. */
.kpi-modal__toggle {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* 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__check {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line-2);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .12s ease, border-color .12s ease;
}

.kpi-modal__check svg { opacity: 0; }

.kpi-modal__row:has(input:checked) .kpi-modal__check {
  background: var(--ink);
  border-color: var(--ink);
}

.kpi-modal__row:has(input:checked) .kpi-modal__check svg { opacity: 1; }

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

.kpi-modal__label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
}

/* --- Parts: info icon + tooltip --- */
/* Tooltip text comes from the catalogue through data-info; CSS renders
   it, no JS involved. */
.kpi-modal__info {
  position: relative;
  border: none;
  background: none;
  color: var(--gray-2);
  cursor: help;
  padding: 2px;
  flex: none;
  display: flex;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}

.kpi-modal__info:hover {
  color: var(--ink);
  background: #fff;
}

.kpi-modal__info::after {
  content: attr(data-info);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 230px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.5;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}

.kpi-modal__info:hover::after,
.kpi-modal__info:focus-visible::after {
  opacity: 1;
  transform: none;
}

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

/* --- Parts: footer --- */
.kpi-modal__footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 20px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.kpi-modal__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-2);
}

.kpi-modal__footer .button--black { margin-left: auto; }
/* ------------------------------------------------------------------
   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);
}

.back-link__arrow {
  flex: none;
}

.page-header h2 {
  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;
}

/* 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;
}

.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;
}

/* 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__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-2, #9aa0a8);
}

.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 — confined to sidebar width (sidebar clips overflow-x) */
.org-switcher__menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  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;
}

.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;
}

.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 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 — faint holo tint, bold, gradient label + icon */
.settings-nav__link--active,
.settings-nav__link--active:hover {
  background: linear-gradient(110deg, rgba(255,122,61,.12), rgba(255,79,154,.12) 48%, rgba(79,123,255,.12));
  color: #4a4e56;
  font-weight: 500;
  box-shadow: none;
}
.settings-nav__link--active .lbl {
  background: linear-gradient(110deg, #ff7a3d, #ff4f9a 42%, #b85bff 70%, #4f7bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.settings-nav__link--active svg {
  stroke: url(#gs);
}

.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, demo_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--demo_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;
}

/* --- 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;
}

/* ------------------------------------------------------------------
   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;
}

/* Deal assign closer */
.deal-assign-form {
  display: inline-block;
}

.deal-assign-form .select {
  width: auto;
  min-width: 150px;
  font-size: 0.85rem;
  padding: 6px 10px;
}

.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;
}

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

/* 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;
}

/* --- 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";
}

/* --- 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;
}

/* --- Check icon ------------------------------------------------------- */

.dropdown__check {
  flex: none;
  margin-left: auto;
  color: var(--ink);
  opacity: 0;
}

.dropdown__option--active .dropdown__check {
  opacity: 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);
}

/* --- 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;
  }
}
/* ------------------------------------------------------------------
   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; }

.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; }
.source-picker__dot-i.off { opacity: 0.28; }

/* 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; }

.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);
}

.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); }

/* "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;
}
/* ------------------------------------------------------------------
   MONTH STEPPER
   ------------------------------------------------------------------ */
/* ‹ August 2026 › — for screens whose period is a calendar month rather than
   an arbitrary range, which is anything reading or writing a monthly row.
   Deliberately not a date picker: offering a range would imply targets can be
   set for one, and they cannot.

   Shares the padding-3 border-1 shape with .segmented so the two sit together
   in a header row as one family. The label has a fixed min-width so stepping
   through months does not shift the arrows. */

.month-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: var(--control-h);
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: #fff;
}

.month-stepper__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--gray);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.month-stepper__arrow:hover {
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

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

.month-stepper__label {
  min-width: 130px;
  padding: 0 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}
/* ------------------------------------------------------------------
   PODIUM
   ------------------------------------------------------------------ */
/* The top three of a leaderboard, as three cards. The template renders an
   <ol> in true rank order — 1, 2, 3 — and this file places first place in the
   middle. Only the winner is decorated: second and third are plain cards, so
   gold stays the one colour on the page that means something. No JavaScript. */

/* --- Root --- */

.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  align-items: end;
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

/* --- 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;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 18px 18px 16px;
  text-align: center;
  /* body sets --text-blue as the default ink; opt out. */
  color: var(--ink);
  transition: background 0.15s ease;
}

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

.podium__rank {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  color: var(--gray-2);
}

.podium__name {
  margin-top: 8px;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.podium__value {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.podium__metric {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.podium__crown {
  margin-bottom: 8px;
  color: var(--gold);
}

/* --- First place --- */

.podium__spot--first {
  grid-column: 2;
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-wash), #fff);
  padding: 24px 18px 21px;
}

.podium__spot--first:hover {
  background: var(--gold-bg);
}

.podium__spot--first .podium__rank {
  color: var(--gold);
}

.podium__spot--first .podium__value {
  font-size: var(--text-3xl);
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Second and third keep their rank order in the markup; only their column
   changes, so the winner stands in the middle. */
.podium__spot--second { grid-column: 1; }
.podium__spot--third  { grid-column: 3; }

/* --- Empty --- */

/* A slot with nobody in it, and a card 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__value {
  color: var(--gray-2);
}

.podium__spot--zero .podium__value {
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* --- Phone --- */

/* Three cards side by side leave about 100px each. Stacking is better, and it
   is free: the markup is already in true rank order, so dropping the explicit
   placement puts 1, 2, 3 down the page. */
@media (max-width: 640px) {
  .podium {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .podium__spot,
  .podium__spot--first,
  .podium__spot--second,
  .podium__spot--third {
    grid-row: auto;
    grid-column: auto;
  }

  .podium__spot--first {
    padding: 18px 18px 16px;
  }
}
/* ------------------------------------------------------------------
   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 — one column: head, details grid, payments
   ------------------------------------------------------------------ */
/* The page is a record, not a dashboard, so it reads top to bottom in a
   reading-width column rather than as two side-by-side panels. */

.sub-show {
  max-width: 948px;   /* 900px of content inside the 24px gutter each side */
  margin: 0 auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* --- Head --- */

.sub-show__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
}

.sub-show__titles {
  flex: 1;
  min-width: 0;
}

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

.sub-show__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* --- Section rule --- */

/* A mono micro-label with a hairline running to the right edge. Cheaper than
   a card per section, and it keeps the whole page on one surface. */
.sub-show__section {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.sub-show__section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- Grouped cards --- */
/* Billing and Attribution, side by side. Each row is a key with an icon and
   the field itself: the selects are .status-select with autosave, the price
   is the targets field, the dates are inline-date, the note is the calls
   notes button. Nothing here is a value that turns into a field. */

.sub-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 34px;
}

.sub-group {
  padding: 4px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
}

.sub-group__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 49px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.sub-group__row:last-child {
  border-bottom: none;
}

.sub-group__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 120px;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gray);
}

.sub-group__icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gray-2);
}

/* The field sits right after its label, not at the far edge of the row. */
.sub-group__control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* The price field is wider than a target: money has more digits. */
.sub-group__price {
  width: 9ch;
  text-align: right;
}

.sub-group__date {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
}

.sub-group__dim {
  color: var(--gray-2);
  font-weight: 400;
}

.sub-group__value {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
}

.sub-group__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
  transition: border-color 0.15s ease;
}

.sub-group__link:hover {
  border-bottom-color: var(--ink);
}

.sub-group__mono {
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--gray);
}

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

/* --- Payments panel --- */
/* Head with count, total and the add button; a framed .table--flush of
   read-only rows whose actions appear on hover; a row in edit mode carries
   inputs in place. Turbo Streams swap rows, so no JS beyond dropping an
   unsaved new row. */

.sub-payments__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 32px;
}

.sub-payments__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sub-payments__add {
  margin-left: auto;
}

/* The last row: the total on the inset surface, so it reads as a summary
   rather than one more payment. */
.sub-payments__total-row td {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* One cell across the row: the label and the figure sit side by side. */
.sub-payments__total-label {
  margin-right: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

/* The panel draws the frame; the table inside is .table--flush. Overflow is
   visible so a date picker opened from a row is not clipped. */
.sub-payments {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.sub-payments__date {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  white-space: nowrap;
}

.sub-payments__date--dim {
  color: var(--gray-2);
}

.sub-payments__amount {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sub-payments__cell--acts {
  text-align: right;
  white-space: nowrap;
}

/* --- 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);
}

/* 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;
}
/* ------------------------------------------------------------------
   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. 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;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--line);
}

.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 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;
    padding: 12px 0 18px;
  }

  .leaderboard-controls__group {
    width: 100%;
  }

  .leaderboard-controls__period-form {
    flex-wrap: wrap;
  }
}
/* ------------------------------------------------------------------
   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;
}

.csv-import__template-link .text-link {
  font-size: 13px;
}

/* 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);
}

/* Preview step */

.csv-import__row-count {
  font-size: 13px;
  color: var(--text-muted, #888);
  margin-bottom: 12px;
}

.csv-import__preview-wrapper {
  overflow-x: auto;
  margin-bottom: 16px;
  border: var(--border-standard);
  border-radius: var(--radius);
}

.csv-import__preview-table {
  min-width: 100%;
  font-size: 13px;
}

.csv-import__preview-table th {
  vertical-align: top;
  padding: 10px 8px;
  min-width: 160px;
}

.csv-import__preview-table td {
  font-size: 12px;
  color: var(--text-muted, #888);
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.csv-import__original-header {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-bottom: 4px;
  font-weight: 400;
}

.csv-import__mapping-select {
  font-size: 12px;
  height: 32px;
  padding: 4px 6px;
}

/* Status mapping */

.csv-import__status-mapping {
  margin-top: 20px;
  margin-bottom: 16px;
}

.csv-import__section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.csv-import__status-table {
  max-width: 500px;
  font-size: 13px;
}

.csv-import__status-value {
  font-weight: 500;
  margin-right: 8px;
}

.csv-import__status-badge--matched {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  background: #dcfce7;
  color: #16a34a;
}

.csv-import__status-badge--unmatched {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  background: #fef3c7;
  color: #d97706;
}

/* Warnings */

.csv-import__warnings {
  margin-bottom: 12px;
}

.csv-import__warning {
  font-size: 12px;
  color: var(--danger);
  padding: 4px 0;
}

/* 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;
}

.csv-import__export-failed {
  margin-top: 12px;
}

/* Dropdown (new button with import option) */

.csv-import__dropdown {
  position: relative;
  display: inline-block;
}

.csv-import__dropdown-caret {
  font-size: 10px;
  margin-left: 2px;
}

.csv-import__dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: var(--border-standard);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  z-index: 50;
  min-width: 160px;
  overflow: hidden;
}

.csv-import__dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}

.csv-import__dropdown-item:hover {
  background: var(--light-hover, #f1f5f9);
}
/* ------------------------------------------------------------------
   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; }
}
.lead-source__cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lead-source__swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

.lead-source__linkedit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-source__linkedit .tracking-form__input {
  flex: 1;
  min-width: 0;
}

/* Match the standalone mockup: solid near-black buttons + roomier table
   cells, scoped to this page so the rest of the app keeps its blue. */
.lead-sources-page .btn-primary,
.lead-sources-page .tracking-links__generate {
  background: #0a0a0a;
  box-shadow: none;
}

.lead-sources-page .btn-primary:hover,
.lead-sources-page .tracking-links__generate:hover {
  background: #000;
}

.lead-sources-page .table thead {
  background: #fafafa;
}

.lead-sources-page .table th {
  padding: 12px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9aa0a8;
}

.lead-sources-page .table td {
  padding: 14px 18px;
}

/* Match the profile page's outer padding so the h1 lines up. */
.page-shell.lead-sources-page {
  padding: 40px 20px;
}

/* Profile-page heading styling (gradient last word). */
.lead-sources-page .phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Padded card wrapping a rounded, bordered table — same pattern as the ads
   spend table it used to sit beside. Not full width. */
.lead-sources-page .page-card {
  max-width: 960px;
  margin: 0 auto;
  padding: 26px 32px 32px;
}

.lead-sources-page .lead-source__tablewrap {
  border: 1px solid #ececee;
  border-radius: 14px;
  overflow-x: auto;
}

.lead-sources-page .table {
  border: 0;
  border-radius: 0;
}

/* One-time tracking-script setup banner. */
.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;
}

.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. */
.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);
}

.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;
}

/* --- Personal-link modal form --- */
.booking-paste--modal {
  margin-top: 16px;
  min-width: 0;
}

/* --- 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,
.booking-step .booking-paste {
  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,
.booking-master__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
}

/* The hidden attribute must beat the display:flex above. */
.booking-master__display[hidden],
.booking-master__form[hidden] {
  display: none;
}

/* --- Paste form --- */
.booking-paste {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 280px;
  max-width: 560px;
}

.booking-paste__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-paste__input:focus-within {
  border-color: var(--bk-ink);
}

.booking-paste__input svg {
  color: var(--bk-gray-2);
  flex: none;
}

.booking-paste__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-paste__input input::placeholder {
  color: var(--bk-gray-2);
}

/* --- Source rows (toggle list and link list) --- */
.booking-list--plain {
  max-width: 900px;
}

.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,
  .booking-step .booking-paste {
    margin-left: 0;
  }

  .booking-paste {
    flex-direction: column;
  }

  .booking-source-row {
    flex-wrap: wrap;
  }

  .booking-source-row__url {
    flex-basis: 100%;
    order: 3;
  }
}
/* ------------------------------------------------------------------
   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 --- */
.journey {
  margin-top: 12px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
}

.journey__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--gray-2);
}

/* Network colors: fixed per ad platform, matching the sources table. */
.journey__swatch--meta   { background: #4f7bff; }
.journey__swatch--google { background: #34a853; }
.journey__swatch--tiktok { background: #0a0a0a; }

/* --- 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: lifetime value, the contact card (name, email, phone
   with copy buttons; the same card with inputs while editing), the
   subscriptions as cards, a read-only calls table, the journey. Sections
   are a heading with a count and an optional link at the right.
   The card is a turbo frame swapped between read and edit; the only JS is
   the shared copy button. */

/* --- Frame --- */

.contact-show {
  max-width: 1008px;
  margin: 0 auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

.contact-show__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.contact-show__head-main {
  flex: 1;
  min-width: 260px;
}

.contact-show__acts {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

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

.contact-section {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 38px;
}

.contact-section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.contact-section__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray-2);
}

/* A figure in the section head: mono, the number in ink. */
.contact-section__figure {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray);
}

.contact-section__figure b {
  margin-left: 6px;
  font-weight: 500;
  color: var(--ink);
}

.contact-section__link {
  margin-left: auto;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--line-2);
  transition: border-color 0.15s ease;
}

.contact-section__link:hover {
  border-bottom-color: var(--ink);
}

/* ------------------------------------------------------------------
   CONTACT PANEL — the card of label:value rows
   ------------------------------------------------------------------ */

.cpanel {
  max-width: 380px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.cpanel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
}

.cpanel__kicker {
  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__head-acts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* The pencil that opens edit mode, and the icon-sized buttons in general. */
.cpanel__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-2);
  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);
}

.cpanel__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}

.cpanel__row:last-child {
  border-bottom: none;
}

.cpanel__label {
  flex: none;
  width: 52px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.cpanel__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
}

.cpanel__value--name {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
}

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

/* The same row while editing: the value becomes a field on a dashed
   underline, so the card keeps its shape. */
.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-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.cpanel__input--name {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
}

.cpanel__input:focus {
  border-bottom-color: var(--ink);
}

.cpanel__error {
  padding: 8px 16px 0;
  font-size: var(--text-md);
  color: var(--danger);
}

/* ------------------------------------------------------------------
   SUBSCRIPTION CARDS
   ------------------------------------------------------------------ */

.sub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

/* A whole card is the link to the subscription. */
.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(--ink);
  background: var(--paper);
}

.sub-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.sub-card__name {
  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: 24px;
  height: 24px;
  margin-left: auto;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-2);
  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: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}

.sub-card__row:last-child {
  border-bottom: none;
}

.sub-card__label {
  flex: none;
  width: 52px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-2);
}

.sub-card__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray);
}

.sub-card__value--strong {
  color: var(--ink);
  font-weight: 500;
}

.sub-cards__empty {
  margin: 12px 0 0;
  font-size: var(--text-md);
  color: var(--gray-2);
}

/* Calls: .data-table--card; this only tightens the gap under the heading. */
.contact-calls.contact-calls {
  margin-top: 12px;
}

.contact-calls__acts {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cpanel {
    max-width: none;
  }
}
/* ------------------------------------------------------------------
   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.
 *



























































 */