/* ============================================================
   TRP THEME — the one design system for the tracker
   Admin, Command Center, showcase, auth and the client portal
   all read their colours, type, spacing and components from here.
   Aesthetic: warm cream / navy / gold (therare-private.com).

   Rules (see docs/DESIGN.md):
     - a page never declares its own palette; it uses the tokens below
     - a component that appears on two pages lives here, not in a <style>
     - showcase rules are written mobile-first (390px), then widened
   ============================================================ */

/* ============================================================
   0. FONTS — Inter, served from this app (static/vendor/README.txt)
   Google Fonts' own Inter files, one variable file (wght axis) per
   subset; the browser fetches latin-ext only for a page that has one
   of its characters. Scripts with no face here (Arabic, Cyrillic...)
   fall back to the system font through --trp-font-family.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(vendor/inter-4.001/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(vendor/inter-4.001/inter-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;
}

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Surfaces */
  --trp-bg:               #f6ede0;   /* warm cream — page background */
  --trp-bg-alt:           #faf5ec;   /* lighter cream — sunken panels, table heads */
  --trp-surface:          #ffffff;   /* cards, sheets */
  --trp-surface-hover:    #fcf9f4;

  /* Ink */
  --trp-text-primary:     #1a1a2e;   /* navy ink */
  --trp-text-secondary:   #5f5a52;   /* warm grey */
  --trp-text-muted:       #8f877b;

  /* Gold */
  --trp-accent:           #c49b6c;
  --trp-accent-hover:     #b08552;
  --trp-accent-dark:      #8a653a;   /* gold that passes contrast as text on cream/white */
  --trp-accent-light:     rgba(196, 155, 108, 0.14);

  /* Navy */
  --trp-dark:             #1a1a2e;
  --trp-dark-hover:       #26264a;
  --trp-dark-text:        #a9a39a;
  --trp-dark-text-hover:  #f6ede0;

  /* Status — muted so they sit inside the palette */
  --trp-success:          #2f7d5b;
  --trp-success-light:    #e7f2ec;
  --trp-success-dark:     #1f5c41;
  --trp-warning:          #b7791f;
  --trp-warning-light:    #fbf1dc;
  --trp-warning-dark:     #7a4f0d;
  --trp-danger:           #b4443c;
  --trp-danger-light:     #f9e9e6;
  --trp-danger-dark:      #7f2a24;
  --trp-info:             #3d4f7c;
  --trp-info-light:       #e9ecf4;
  --trp-info-dark:        #2a3760;
  --trp-neutral:          #6b6459;
  --trp-neutral-light:    #f1ebe1;
  --trp-neutral-dark:     #4a453d;

  /* Borders */
  --trp-border-light:     #e8dfd1;
  --trp-border-medium:    #d9cdbb;
  --trp-border-dark-subtle: rgba(255, 255, 255, 0.08);

  /* Shadows */
  --trp-shadow-xs:        0 1px 2px rgba(26, 26, 46, 0.04);
  --trp-shadow-sm:        0 1px 3px rgba(26, 26, 46, 0.06);
  --trp-shadow-md:        0 6px 18px rgba(26, 26, 46, 0.08);
  --trp-shadow-lg:        0 12px 36px rgba(26, 26, 46, 0.12);
  --trp-shadow-xl:        0 20px 56px rgba(26, 26, 46, 0.16);

  /* Radii */
  --trp-radius-sm:        8px;
  --trp-radius-md:        12px;
  --trp-radius-lg:        16px;
  --trp-radius-xl:        20px;
  --trp-radius-full:      9999px;

  /* Spacing (4px scale) */
  --trp-space-xs:         4px;
  --trp-space-sm:         8px;
  --trp-space-md:         12px;
  --trp-space-lg:         16px;
  --trp-space-xl:         20px;
  --trp-space-2xl:        24px;
  --trp-space-3xl:        32px;
  --trp-space-4xl:        48px;

  /* Type */
  --trp-font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --trp-font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --trp-font-size-xs:     0.72rem;
  --trp-font-size-sm:     0.8125rem;
  --trp-font-size-base:   0.9rem;
  --trp-font-size-md:     1rem;
  --trp-font-size-lg:     1.125rem;
  --trp-font-size-xl:     1.3rem;
  --trp-font-size-2xl:    1.55rem;
  --trp-font-size-3xl:    1.9rem;
  --trp-font-weight-light:    300;
  --trp-font-weight-normal:   400;
  --trp-font-weight-medium:   500;
  --trp-font-weight-semibold: 600;
  --trp-font-weight-bold:     700;
  --trp-line-height:      1.55;

  /* Motion */
  --trp-transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --trp-transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --trp-transition-slow:  280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --trp-sidebar-width:    248px;
  --trp-topbar-height:    56px;
  --trp-content-max-width: 1320px;
  --trp-touch:            44px;      /* minimum touch target */

  /* Pipeline stages — one hue family per meaning, all inside the palette */
  --stage-lead:           #8f877b;
  --stage-discovered:     #8f877b;
  --stage-outreach_sent:  #3d4f7c;
  --stage-followup_sent:  #6c7aa0;
  --stage-responded:      #c49b6c;
  --stage-meeting_booked: #b08552;
  --stage-proposal_sent:  #5a8f7b;
  --stage-negotiation:    #2f7d5b;
  --stage-won:            #1f5c41;
  --stage-closed_lost:    #b4443c;
  --stage-lost:           #b4443c;
  --stage-declined:       #b4443c;
  --stage-dead_end:       #6b6459;
  --stage-nurture:        #a8926f;
  --stage-bounced:        #c26b5a;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* `clip`, not `hidden`: a page must never scroll sideways, and `hidden`
     would turn html into a scroll container and break position: sticky. */
  overflow-x: clip;
}

body {
  font-family: var(--trp-font-family);
  font-size: var(--trp-font-size-base);
  line-height: var(--trp-line-height);
  color: var(--trp-text-primary);
  background-color: var(--trp-bg);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: var(--trp-font-weight-semibold); color: var(--trp-text-primary); }
h1 { font-size: var(--trp-font-size-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--trp-font-size-xl); letter-spacing: -0.015em; }
h3 { font-size: var(--trp-font-size-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--trp-font-size-md); }
h5 { font-size: var(--trp-font-size-base); }
h6 { font-size: var(--trp-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--trp-text-secondary); }

a { color: var(--trp-accent-dark); text-decoration: none; transition: color var(--trp-transition-fast); }
a:hover { color: var(--trp-text-primary); }

small { font-size: var(--trp-font-size-sm); color: var(--trp-text-muted); }
::selection { background-color: var(--trp-accent-light); color: var(--trp-text-primary); }
:focus-visible { outline: 2px solid var(--trp-accent); outline-offset: 2px; }

.trp-mono { font-family: var(--trp-font-mono); font-size: 0.92em; }
.trp-muted { color: var(--trp-text-muted); }
.trp-eyebrow {
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--trp-accent-dark);
}
.trp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   3. PAGE HEADER
   ============================================================ */
.trp-page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--trp-space-md) var(--trp-space-lg); margin-bottom: var(--trp-space-xl);
}
.trp-page-title { font-size: var(--trp-font-size-2xl); font-weight: var(--trp-font-weight-semibold); letter-spacing: -0.02em; }
.trp-page-subtitle { color: var(--trp-text-secondary); font-size: var(--trp-font-size-base); margin-top: 2px; }
.trp-page-actions { display: flex; flex-wrap: wrap; gap: var(--trp-space-sm); align-items: center; }
.trp-section-title {
  display: flex; align-items: center; gap: var(--trp-space-sm);
  font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold);
  margin: var(--trp-space-2xl) 0 var(--trp-space-md);
}
.trp-section-title i { color: var(--trp-accent); font-size: 0.95em; }

/* ============================================================
   4. BUTTONS — one pill shape, five roles
   ============================================================ */
/* Any element whose class mentions "btn" gets the shape; :where() keeps this at
   zero specificity so a role class (or a page rule) always wins. */
:where(button, a, input, label, span)[class*="btn"],
:where(.trp-admin .content-area) :where(button:not([class]), input[type="submit"]:not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--trp-space-sm);
  min-height: 40px; padding: 9px 20px;
  font-family: var(--trp-font-family); font-size: var(--trp-font-size-base);
  font-weight: var(--trp-font-weight-semibold); line-height: 1.2; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: var(--trp-radius-full);
  background-color: var(--trp-dark); color: var(--trp-bg);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--trp-transition-base), color var(--trp-transition-base),
              border-color var(--trp-transition-base), box-shadow var(--trp-transition-base);
}
:where(button, a, input, label, span)[class*="btn"]:hover,
:where(.trp-admin .content-area) :where(button:not([class]), input[type="submit"]:not([class])):hover {
  background-color: var(--trp-dark-hover); color: var(--trp-bg); box-shadow: var(--trp-shadow-sm);
}

.trp-btn-primary { background-color: var(--trp-dark); color: var(--trp-bg); }
.trp-btn-primary:hover { background-color: var(--trp-dark-hover); color: var(--trp-bg); }

.trp-btn-secondary {
  background-color: transparent; color: var(--trp-text-primary); border-color: var(--trp-border-medium);
}
.trp-btn-secondary:hover {
  background-color: var(--trp-surface); color: var(--trp-text-primary); border-color: var(--trp-text-primary);
}

.trp-btn-accent { background-color: var(--trp-accent); color: var(--trp-dark); }
.trp-btn-accent:hover { background-color: var(--trp-accent-hover); color: var(--trp-dark); }

.trp-btn-ghost { background-color: transparent; color: var(--trp-text-secondary); }
.trp-btn-ghost:hover { background-color: var(--trp-neutral-light); color: var(--trp-text-primary); box-shadow: none; }

.trp-btn-danger, .btn-delete, .btn-del { background-color: var(--trp-danger); color: #fff; }
.trp-btn-danger:hover, .btn-delete:hover, .btn-del:hover { background-color: var(--trp-danger-dark); color: #fff; }

.trp-btn-sm { min-height: 32px; padding: 5px 14px; font-size: var(--trp-font-size-sm); }
.trp-btn-lg { min-height: 48px; padding: 12px 28px; font-size: var(--trp-font-size-md); }
.trp-btn-block { display: flex; width: 100%; }
.trp-btn-icon { min-height: 40px; width: 40px; padding: 0; }

:where(button, input)[class*="btn"]:disabled, button:disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none; box-shadow: none;
}

/* Destructive actions that sit next to content: quiet until hovered */

.btn-del, .btn-delete, .btn-delete-contact, .delete-campaign-btn {
  background-color: transparent; color: var(--trp-danger); border-color: var(--trp-danger-light);
  min-height: 32px; padding: 5px 14px; font-size: var(--trp-font-size-sm);
}
.btn-del:hover, .btn-delete:hover, .btn-delete-contact:hover, .delete-campaign-btn:hover {
  background-color: var(--trp-danger-light); color: var(--trp-danger-dark); box-shadow: none;
}
.back-link {
  min-height: var(--trp-touch); padding: 0; background: none; border: none; border-radius: 0;
  display: inline-flex; align-items: center; gap: var(--trp-space-sm);
  color: var(--trp-text-secondary); font-weight: var(--trp-font-weight-medium);
}
.back-link:hover { background: none; color: var(--trp-text-primary); box-shadow: none; }

/* Dashed "add a row" affordance */
.add-row-btn {
  min-height: 32px; padding: 4px 12px; background: none; color: var(--trp-text-muted);
  border: 1.5px dashed var(--trp-border-medium); border-radius: var(--trp-radius-sm);
  font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-medium);
}
.add-row-btn:hover { background: none; border-color: var(--trp-accent); color: var(--trp-accent-dark); box-shadow: none; }

/* Touch screens: every button is a 44px target */
@media (pointer: coarse) {
  :where(button, a, input, label, span)[class*="btn"]:not(.trp-btn-sm) { min-height: var(--trp-touch); }
}

/* ============================================================
   5. FORMS
   ============================================================ */
.trp-field { margin-bottom: var(--trp-space-lg); }
.trp-label, .trp-field > label {
  display: block; margin-bottom: 6px;
  font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold); color: var(--trp-text-primary);
}
.trp-hint, .trp-input-hint { font-size: var(--trp-font-size-sm); color: var(--trp-text-muted); margin-top: 4px; }

.trp-input, .trp-select, .trp-textarea,
.trp-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .trp-field select, .trp-field textarea {
  width: 100%; min-height: 42px; padding: 9px 14px;
  background-color: var(--trp-surface); color: var(--trp-text-primary);
  border: 1.5px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  font-family: var(--trp-font-family); font-size: var(--trp-font-size-base);
  transition: border-color var(--trp-transition-fast), box-shadow var(--trp-transition-fast);
}
.trp-input:hover, .trp-select:hover, .trp-textarea:hover,
.trp-field input:hover, .trp-field select:hover, .trp-field textarea:hover { border-color: var(--trp-border-medium); }
.trp-input:focus, .trp-select:focus, .trp-textarea:focus,
.trp-field input:focus, .trp-field select:focus, .trp-field textarea:focus {
  outline: none; border-color: var(--trp-accent); box-shadow: 0 0 0 3px var(--trp-accent-light);
}
.trp-input::placeholder, .trp-textarea::placeholder, .trp-field input::placeholder { color: var(--trp-text-muted); }
.trp-textarea, .trp-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.trp-select, .trp-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235f5a52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.trp-input:disabled, .trp-select:disabled {
  opacity: 0.55; cursor: not-allowed; background-color: var(--trp-bg-alt);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--trp-accent-dark); }

.trp-checkbox-label {
  display: flex; align-items: center; gap: var(--trp-space-sm); min-height: 36px;
  padding: 4px var(--trp-space-sm); border-radius: var(--trp-radius-sm);
  font-size: var(--trp-font-size-base); cursor: pointer;
}
.trp-checkbox-label:hover { background-color: var(--trp-bg-alt); }
.trp-checkbox-label input { width: 18px; height: 18px; }

/* Bare form controls inside admin pages get the shared look at zero specificity,
   so a page that styles its own inputs still wins and one that does not is not left with browser defaults. */
:where(.trp-admin .content-area) :where(input[type="text"], input[type="email"], input[type="url"], input[type="number"],
  input[type="date"], input[type="search"], input[type="password"], input[type="tel"], select, textarea) {
  min-height: 38px; padding: 7px 12px; max-width: 100%;
  background-color: var(--trp-surface); color: var(--trp-text-primary);
  border: 1.5px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  font-family: var(--trp-font-family); font-size: var(--trp-font-size-base);
}
:where(.trp-admin .content-area) :where(input, select, textarea):focus {
  outline: none; border-color: var(--trp-accent); box-shadow: 0 0 0 3px var(--trp-accent-light);
}

/* Search field with a leading icon */
.trp-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; }
.trp-search > i { position: absolute; left: 14px; color: var(--trp-text-muted); font-size: 0.85rem; pointer-events: none; }
.trp-search > input { padding-left: 38px; }

/* Phones: 16px inputs so iOS does not zoom the page on focus; 44px targets */
@media (max-width: 768px) {
  .trp-input, .trp-select, .trp-textarea, .trp-field input, .trp-field select, .trp-field textarea {
    font-size: 16px; min-height: var(--trp-touch);
  }
}

/* A row of fields that stacks on phones (create forms above a list) */
.trp-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--trp-space-md); }
.trp-form-row .trp-field { margin-bottom: 0; flex: 0 1 200px; }
.trp-form-row .trp-field.trp-grow { flex: 1 1 260px; }
/* A read-only value with a Copy button */
.trp-copy { display: flex; gap: var(--trp-space-sm); align-items: center; }
.trp-copy .trp-input { flex: 1 1 auto; min-width: 0; }
.trp-invite-new { border-color: var(--trp-accent); }
@media (max-width: 639px) {
  .trp-form-row .trp-field, .trp-form-row .trp-field.trp-grow { flex: 1 1 100%; }
  .trp-form-row .trp-btn { width: 100%; }
  .trp-copy { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   6. BADGES, CHIPS, TAGS
   ============================================================ */
.trp-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--trp-radius-full); border: 1px solid transparent;
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold);
  line-height: 1.4; white-space: nowrap;
  background-color: var(--trp-neutral-light); color: var(--trp-neutral-dark);
}
.trp-badge-success { background-color: var(--trp-success-light); color: var(--trp-success-dark); }
.trp-badge-warning { background-color: var(--trp-warning-light); color: var(--trp-warning-dark); }
.trp-badge-danger { background-color: var(--trp-danger-light); color: var(--trp-danger-dark); }
.trp-badge-info { background-color: var(--trp-info-light); color: var(--trp-info-dark); }
.trp-badge-neutral { background-color: var(--trp-neutral-light); color: var(--trp-neutral-dark); }
.trp-badge-accent { background-color: var(--trp-accent-light); color: var(--trp-accent-dark); }
.trp-badge-dark { background-color: var(--trp-dark); color: var(--trp-bg); }
.trp-badge-outline { background-color: transparent; border-color: var(--trp-border-medium); color: var(--trp-text-secondary); }
.trp-badge-caps { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }

.trp-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--trp-radius-full); background-color: var(--trp-accent-light); color: var(--trp-accent-dark);
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-bold);
}
.trp-count-alert { background-color: var(--trp-danger-light); color: var(--trp-danger-dark); }

/* Chips: a selectable or removable token (filters) */
.trp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; max-width: 100%;
  background-color: var(--trp-surface); color: var(--trp-text-secondary);
  border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-full);
  font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-medium); text-decoration: none;
  transition: border-color var(--trp-transition-fast), color var(--trp-transition-fast), background-color var(--trp-transition-fast);
}
button.trp-chip { cursor: pointer; }
.trp-chip:hover { border-color: var(--trp-accent); color: var(--trp-text-primary); }
.trp-chip.is-on, .trp-chip[aria-pressed="true"], .trp-chip[aria-current="true"] {
  background-color: var(--trp-accent-light); border-color: var(--trp-accent); color: var(--trp-text-primary);
}
.trp-chip b { font-weight: var(--trp-font-weight-semibold); color: var(--trp-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trp-chip i { font-size: 0.7rem; color: var(--trp-text-muted); }
.trp-chip-clear { color: var(--trp-danger-dark); border-color: transparent; background-color: transparent; }
@media (pointer: coarse) { .trp-chip { min-height: 40px; padding: 6px 14px; } }

/* Pipeline stage tag: the colour comes from the --stage-* tokens */
.trp-stage {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--trp-radius-full); background-color: var(--trp-neutral-light);
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold);
  color: var(--trp-neutral-dark); white-space: nowrap;
}
.trp-stage::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background-color: var(--stage, var(--trp-text-muted)); }

/* Pipeline flow: one pill per stage, the colour from the --stage-* tokens */
.trp-flow { display: flex; flex-wrap: wrap; gap: var(--trp-space-sm); margin-bottom: var(--trp-space-lg); }
.trp-flow-step {
  display: inline-flex; align-items: center; gap: var(--trp-space-sm); padding: 5px 12px 5px 6px;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-full);
  font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-medium);
}
.trp-flow-count {
  min-width: 28px; height: 24px; padding: 0 8px; border-radius: var(--trp-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--stage, var(--trp-text-muted)); color: #fff;
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-bold); font-variant-numeric: tabular-nums;
}
.trp-flow-step.is-empty { color: var(--trp-text-muted); }
.trp-flow-step.is-empty .trp-flow-count { background-color: var(--trp-neutral-light); color: var(--trp-text-muted); }

/* ============================================================
   7. CARDS, PANELS, STAT TILES
   ============================================================ */
.trp-card {
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-lg); box-shadow: var(--trp-shadow-xs);
  padding: var(--trp-space-xl); margin-bottom: var(--trp-space-lg);
}
.trp-card-flush { padding: 0; overflow: hidden; }
.trp-card-interactive { transition: border-color var(--trp-transition-base), box-shadow var(--trp-transition-base); }
.trp-card-interactive:hover { border-color: var(--trp-accent); box-shadow: var(--trp-shadow-md); }
.trp-card-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--trp-space-sm); margin-bottom: var(--trp-space-lg);
}
.trp-card-title {
  display: flex; align-items: center; gap: var(--trp-space-sm);
  font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold);
}
.trp-card-title i { color: var(--trp-accent); }

/* Stat tile: a number and what it counts. No gradients, one gold rule. */
.trp-stats, .stats-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--trp-space-md); margin-bottom: var(--trp-space-xl);
}
@media (min-width: 720px) { .trp-stats, .stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.trp-stat, .stat-card {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-lg); padding: var(--trp-space-lg); box-shadow: var(--trp-shadow-xs);
  color: var(--trp-text-primary); text-decoration: none;
}
a.trp-stat, button.trp-stat { cursor: pointer; text-align: left; transition: border-color var(--trp-transition-base), box-shadow var(--trp-transition-base); }
a.trp-stat:hover, button.trp-stat:hover { border-color: var(--trp-accent); box-shadow: var(--trp-shadow-md); color: var(--trp-text-primary); }
.trp-stat-value, .stat-value {
  font-size: 1.7rem; font-weight: var(--trp-font-weight-semibold); letter-spacing: -0.025em; line-height: 1.15;
  color: var(--trp-text-primary); font-variant-numeric: tabular-nums;
}
.trp-stat-label, .stat-label {
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--trp-text-secondary);
}
.trp-stat-icon, .stat-icon {
  width: 34px; height: 34px; border-radius: var(--trp-radius-md); margin-bottom: var(--trp-space-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--trp-accent-light); color: var(--trp-accent-dark); font-size: 0.95rem;
}
.trp-stat.is-accent .trp-stat-value { color: var(--trp-accent-dark); }
.trp-stat.is-success .trp-stat-value { color: var(--trp-success); }
.trp-stat.is-warning .trp-stat-value { color: var(--trp-warning); }
.trp-stat.is-danger .trp-stat-value { color: var(--trp-danger); }
.trp-stat.is-muted .trp-stat-value { color: var(--trp-text-secondary); }

/* Key/value list (detail panels, account details) */
.trp-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--trp-space-md) var(--trp-space-xl); }
.trp-kv > div { min-width: 0; }
.trp-kv dt, .trp-kv strong { display: block; font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--trp-text-muted); }
.trp-kv dd, .trp-kv span { display: block; overflow-wrap: anywhere; }

/* ============================================================
   8. TABLES
   ============================================================ */
.trp-table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-lg); box-shadow: var(--trp-shadow-xs);
}
.trp-table {
  width: 100%; border-collapse: collapse; font-size: var(--trp-font-size-sm);
}
.trp-table th {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  background-color: var(--trp-bg-alt); color: var(--trp-text-secondary);
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--trp-border-light);
}
.trp-table td {
  padding: 11px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--trp-border-light);
}
.trp-table tbody tr:last-child td { border-bottom: none; }
.trp-table tbody tr:hover { background-color: var(--trp-surface-hover); }
.trp-table a { color: var(--trp-text-primary); font-weight: var(--trp-font-weight-medium); }
.trp-table a:hover { color: var(--trp-accent-dark); }
.trp-table th[data-sort] { cursor: pointer; user-select: none; }
.trp-table th[data-sort]:hover { color: var(--trp-text-primary); }
.trp-table th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.trp-table th .trp-sort-arrow { color: var(--trp-accent-dark); font-size: 0.7em; }
.trp-table td.is-num, .trp-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.trp-table td.is-wrap { white-space: normal; }
.trp-table td.is-struck { text-decoration: line-through; color: var(--trp-text-muted); }
.trp-table-nowrap td { white-space: nowrap; }

/* ============================================================
   9. ALERTS (flash messages)
   ============================================================ */
.trp-alerts, .flash-messages { display: flex; flex-direction: column; gap: var(--trp-space-sm); margin-bottom: var(--trp-space-lg); }
.trp-alert, .flash-message-item {
  display: flex; align-items: flex-start; gap: var(--trp-space-sm);
  padding: 11px var(--trp-space-lg); border-radius: var(--trp-radius-md);
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-left: 3px solid var(--trp-accent);
  color: var(--trp-text-primary); font-size: var(--trp-font-size-base); font-weight: var(--trp-font-weight-medium);
}
.trp-alert-success { border-left-color: var(--trp-success); background-color: var(--trp-success-light); color: var(--trp-success-dark); }
.trp-alert-warning { border-left-color: var(--trp-warning); background-color: var(--trp-warning-light); color: var(--trp-warning-dark); }
.trp-alert-danger { border-left-color: var(--trp-danger); background-color: var(--trp-danger-light); color: var(--trp-danger-dark); }

/* ============================================================
   10. EMPTY AND LOADING STATES
   ============================================================ */
.trp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--trp-space-3xl) var(--trp-space-lg); text-align: center; color: var(--trp-text-secondary);
}
.trp-empty > i {
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: var(--trp-space-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--trp-accent-light); color: var(--trp-accent-dark); font-size: 1.1rem;
}
.trp-empty-title { font-weight: var(--trp-font-weight-semibold); color: var(--trp-text-primary); overflow-wrap: anywhere; }
.trp-empty p { color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); max-width: 44ch; }
.trp-empty-inline { padding: var(--trp-space-lg); color: var(--trp-text-muted); text-align: center; font-size: var(--trp-font-size-sm); }

@keyframes trpSpin { to { transform: rotate(360deg); } }
@keyframes trpShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.trp-spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--trp-accent-light); border-top-color: var(--trp-accent-dark);
  animation: trpSpin 0.7s linear infinite; vertical-align: -3px;
}
.trp-skeleton {
  background: linear-gradient(90deg, var(--trp-bg-alt) 25%, var(--trp-neutral-light) 50%, var(--trp-bg-alt) 75%);
  background-size: 200% 100%; animation: trpShimmer 1.4s ease-in-out infinite; border-radius: var(--trp-radius-sm);
}
/* A form or list that is waiting on the server */
.is-loading { position: relative; pointer-events: none; opacity: 0.6; transition: opacity var(--trp-transition-base); }

/* ============================================================
   11. PAGINATION
   ============================================================ */
.trp-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--trp-space-md); margin: var(--trp-space-xl) 0 var(--trp-space-sm);
}
.trp-pager-info { color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.trp-pager-info strong { color: var(--trp-text-primary); font-variant-numeric: tabular-nums; }
.trp-pager-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.trp-pager-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; min-height: 40px; padding: 0 12px;
  background-color: var(--trp-surface); color: var(--trp-text-primary);
  border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-full);
  font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: border-color var(--trp-transition-fast), background-color var(--trp-transition-fast);
}
a.trp-pager-link:hover { border-color: var(--trp-accent); color: var(--trp-text-primary); }
.trp-pager-link.is-current { background-color: var(--trp-dark); border-color: var(--trp-dark); color: var(--trp-bg); }
.trp-pager-link.is-disabled { opacity: 0.4; pointer-events: none; }
.trp-pager-gap { color: var(--trp-text-muted); padding: 0 2px; }
.trp-pager-num { display: none; }
.trp-pager-pos { font-size: var(--trp-font-size-sm); color: var(--trp-text-secondary); padding: 0 6px; white-space: nowrap; }
@media (pointer: coarse) { .trp-pager-link { min-width: var(--trp-touch); min-height: var(--trp-touch); } }
@media (max-width: 639px) {
  /* phones: Previous / "Page 2 of 17" / Next, full width, thumb-sized */
  .trp-pager { flex-direction: column; align-items: stretch; }
  .trp-pager-info { text-align: center; }
  .trp-pager-nav { margin-left: 0; justify-content: space-between; }
  .trp-pager-step { flex: 1 1 0; }
}
@media (min-width: 640px) {
  .trp-pager-num { display: inline-flex; }
  .trp-pager-pos { display: none; }
}

/* ============================================================
   12. TABS
   ============================================================ */
.trp-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--trp-border-light); margin-bottom: var(--trp-space-lg);
}
.trp-tabs::-webkit-scrollbar { display: none; }
.trp-tab {
  display: inline-flex; align-items: center; gap: var(--trp-space-sm); flex: 0 0 auto;
  min-height: var(--trp-touch); padding: 0 14px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-base); font-weight: var(--trp-font-weight-semibold);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--trp-transition-fast), border-color var(--trp-transition-fast);
}
.trp-tab:hover { color: var(--trp-text-primary); }
.trp-tab.is-active, .trp-tab[aria-selected="true"] { color: var(--trp-text-primary); border-bottom-color: var(--trp-accent); }

/* ============================================================
   13. SHEET (bottom sheet on phones, panel on desktop) + OVERLAY
   ============================================================ */
.trp-overlay {
  position: fixed; inset: 0; z-index: 190; background-color: rgba(26, 26, 46, 0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--trp-transition-slow);
}
.trp-overlay.is-open { opacity: 1; pointer-events: auto; }
body.trp-no-scroll { overflow: hidden; }

.trp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--trp-space-md); }
.trp-sheet-title { font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold); }
.trp-sheet-close {
  width: var(--trp-touch); height: var(--trp-touch); margin-right: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; color: var(--trp-text-secondary); font-size: 1.05rem;
}
.trp-sheet-close:hover { background-color: var(--trp-neutral-light); color: var(--trp-text-primary); }

/* ============================================================
   14. BRAND MARK — the same wordmark on every surface
   ============================================================ */
.trp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; white-space: nowrap; }
.trp-brand:hover { color: inherit; }
.trp-brand-logo { display: block; height: 16px; width: auto; }
.trp-brand-word { font-size: 1.02rem; font-weight: var(--trp-font-weight-light); letter-spacing: 0.24em; text-transform: uppercase; }
.trp-brand-hash { color: var(--trp-accent); font-weight: var(--trp-font-weight-bold); font-size: 1.15rem; margin-left: -4px; }
.trp-brand-context {
  padding-left: 10px; border-left: 1px solid currentColor; border-color: rgba(128, 128, 128, 0.35);
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold);
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72;
}
.trp-on-dark { color: #fff; }

/* ============================================================
   15. ADMIN SHELL — navy sidebar, cream canvas
   ============================================================ */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: var(--trp-sidebar-width);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  background-color: var(--trp-dark); color: var(--trp-dark-text);
  transition: transform var(--trp-transition-slow);
}
.sidebar-header {
  display: flex; align-items: center; min-height: var(--trp-topbar-height); flex-shrink: 0;
  padding: 0 var(--trp-space-xl); border-bottom: 1px solid var(--trp-border-dark-subtle);
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; padding: var(--trp-space-md) 0; }
.nav-section-label {
  padding: 16px var(--trp-space-xl) 6px; font-size: 0.66rem; font-weight: var(--trp-font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(246, 237, 224, 0.38);
}
.sidebar .nav { list-style: none; }
.sidebar .nav li { margin: 1px var(--trp-space-md); }
.sidebar .nav a {
  display: flex; align-items: center; gap: var(--trp-space-md); min-height: 38px; padding: 0 var(--trp-space-md);
  border-radius: var(--trp-radius-sm); color: var(--trp-dark-text);
  font-size: var(--trp-font-size-base); font-weight: var(--trp-font-weight-medium); white-space: nowrap;
  transition: background-color var(--trp-transition-fast), color var(--trp-transition-fast);
}
.sidebar .nav a i { width: 18px; text-align: center; font-size: 0.9rem; opacity: 0.75; flex-shrink: 0; }
.sidebar .nav a:hover { background-color: var(--trp-dark-hover); color: var(--trp-dark-text-hover); }
.sidebar .nav a.active { background-color: rgba(196, 155, 108, 0.16); color: var(--trp-accent); }
.sidebar .nav a.active i { opacity: 1; }
.nav-divider { height: 1px; margin: var(--trp-space-md) var(--trp-space-xl); background-color: var(--trp-border-dark-subtle); flex-shrink: 0; }
.nav-bottom { margin-top: auto; padding-bottom: var(--trp-space-sm); }

.sidebar-overlay {
  position: fixed; inset: 0; z-index: 199; background-color: rgba(26, 26, 46, 0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--trp-transition-slow);
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

.main-content {
  flex: 1; min-width: 0; margin-left: var(--trp-sidebar-width);
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left var(--trp-transition-slow);
}
.sidebar.collapsed { transform: translateX(-100%); }
.main-content.expanded { margin-left: 0; }

.top-bar {
  position: sticky; top: 0; z-index: 50; flex-shrink: 0; height: var(--trp-topbar-height);
  display: flex; align-items: center; justify-content: space-between; gap: var(--trp-space-md);
  padding: 0 var(--trp-space-2xl);
  background-color: rgba(246, 237, 224, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trp-border-light);
}
.top-bar-left { display: flex; align-items: center; gap: var(--trp-space-md); min-width: 0; }
.top-bar-brand { display: none; }
.sidebar-toggle {
  width: 40px; height: 40px; margin-left: -8px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--trp-radius-md);
  color: var(--trp-text-secondary); font-size: 1.05rem;
}
.sidebar-toggle:hover { background-color: var(--trp-surface); color: var(--trp-text-primary); }
.top-bar-right { display: flex; align-items: center; gap: var(--trp-space-sm); }
.user-badge {
  display: inline-flex; align-items: center; gap: var(--trp-space-sm); padding: 5px 12px;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-full);
  font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-medium); color: var(--trp-text-secondary);
}
.user-badge i { font-size: 0.75rem; color: var(--trp-accent-dark); }

.content-area { flex: 1; padding: var(--trp-space-2xl); }
.container { width: 100%; max-width: var(--trp-content-max-width); margin: 0 auto; }

@media (max-width: 1024px) {
  /* Tablet and phone: the sidebar is a drawer */
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--trp-shadow-xl); }
  .sidebar .nav a { min-height: var(--trp-touch); }
  .main-content, .main-content.expanded { margin-left: 0; }
  .top-bar { padding: 0 var(--trp-space-lg); }
  .top-bar-brand { display: inline-flex; }
  .content-area { padding: var(--trp-space-lg); }
  .sidebar-toggle { width: var(--trp-touch); height: var(--trp-touch); }
}
@media (max-width: 640px) {
  .content-area { padding: var(--trp-space-md); }
  .user-badge span { display: none; }
}

/* ============================================================
   16. PUBLIC SHELL — showcase and client portal
   ============================================================ */
.trp-header {
  position: sticky; top: 0; z-index: 100;
  background-color: var(--trp-dark); color: #fff;
  padding-top: env(safe-area-inset-top, 0);
}
.trp-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--trp-space-lg);
  max-width: var(--trp-content-max-width); margin: 0 auto;
  min-height: var(--trp-topbar-height); padding: 0 var(--trp-space-lg);
}
.trp-header-meta { font-size: var(--trp-font-size-sm); color: var(--trp-dark-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phones first: the menu is a sheet that drops from the header */
.trp-topnav {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
  display: none; flex-direction: column; padding: var(--trp-space-sm) var(--trp-space-md) var(--trp-space-md);
  background-color: var(--trp-dark); border-top: 1px solid var(--trp-border-dark-subtle);
  box-shadow: var(--trp-shadow-lg);
}
.trp-topnav.is-open { display: flex; }
.trp-topnav a {
  display: flex; align-items: center; gap: var(--trp-space-md); min-height: 48px; padding: 0 var(--trp-space-md);
  border-radius: var(--trp-radius-sm); color: var(--trp-dark-text);
  font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-medium);
}
.trp-topnav a i { width: 18px; text-align: center; font-size: 0.9rem; opacity: 0.75; }
.trp-topnav a:hover { color: var(--trp-dark-text-hover); background-color: var(--trp-dark-hover); }
.trp-topnav a.active { color: var(--trp-accent); }
.trp-topnav-sep { height: 1px; margin: 6px var(--trp-space-md); background-color: var(--trp-border-dark-subtle); }
.trp-nav-toggle {
  width: var(--trp-touch); height: var(--trp-touch); margin-right: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--trp-radius-md); color: #fff; font-size: 1.1rem;
}
.trp-nav-toggle:hover { background-color: var(--trp-dark-hover); }

@media (min-width: 860px) {
  .trp-header-inner { padding: 0 var(--trp-space-2xl); }
  .trp-nav-toggle { display: none; }
  .trp-topnav {
    position: static; display: flex; flex-direction: row; align-items: center; gap: 2px;
    padding: 0; border: none; box-shadow: none; background: none;
  }
  .trp-topnav a { min-height: 36px; padding: 0 12px; font-size: var(--trp-font-size-base); border-radius: var(--trp-radius-full); }
  .trp-topnav a.active { background-color: rgba(196, 155, 108, 0.16); }
  .trp-topnav-sep { width: 1px; height: 18px; margin: 0 8px; }
}

.trp-main {
  width: 100%; max-width: var(--trp-content-max-width); margin: 0 auto;
  padding: var(--trp-space-lg) var(--trp-space-md) var(--trp-space-3xl);
}
@media (min-width: 860px) { .trp-main { padding: var(--trp-space-2xl) var(--trp-space-2xl) var(--trp-space-4xl); } }

.trp-footer {
  padding: var(--trp-space-xl) var(--trp-space-lg) calc(var(--trp-space-xl) + env(safe-area-inset-bottom, 0));
  text-align: center; color: var(--trp-text-muted); font-size: var(--trp-font-size-sm);
  border-top: 1px solid var(--trp-border-light);
}

/* ============================================================
   17. AUTH SHELL — login, register, change password
   ============================================================ */
.trp-auth {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--trp-space-xl); padding: var(--trp-space-xl) var(--trp-space-lg);
}
.trp-auth-card {
  width: 100%; max-width: 400px; overflow: hidden;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-xl); box-shadow: var(--trp-shadow-md);
}
.trp-auth-brand { display: flex; justify-content: center; padding: var(--trp-space-xl); background-color: var(--trp-dark); }
.trp-auth-body { padding: var(--trp-space-2xl) var(--trp-space-xl) var(--trp-space-xl); }
@media (min-width: 480px) { .trp-auth-body { padding: var(--trp-space-3xl) var(--trp-space-3xl) var(--trp-space-2xl); } }
.trp-auth-title { font-size: var(--trp-font-size-xl); margin-bottom: 4px; }
.trp-auth-subtitle { color: var(--trp-text-secondary); margin-bottom: var(--trp-space-xl); }
.trp-auth-foot { margin-top: var(--trp-space-lg); text-align: center; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.trp-auth-foot a { font-weight: var(--trp-font-weight-semibold); }
.trp-auth-note { max-width: 400px; text-align: center; color: var(--trp-text-muted); font-size: var(--trp-font-size-sm); }

/* ============================================================
   18. TOOLBAR (search + filters above a list)
   ============================================================ */
.trp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); margin-bottom: var(--trp-space-md); }
.trp-toolbar .trp-select, .trp-toolbar .trp-input { width: auto; flex: 0 1 auto; }
.trp-toolbar .trp-search { flex: 1 1 240px; max-width: 420px; }
.trp-toolbar .trp-search .trp-input { width: 100%; }
.trp-result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); margin-bottom: var(--trp-space-md); }
.trp-result-line strong { color: var(--trp-text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .trp-toolbar .trp-search { flex-basis: 100%; max-width: none; }
  .trp-toolbar .trp-select { flex: 1 1 0; min-width: 0; }
}

/* ============================================================
   19. SHOWCASE — written for a 390px phone first, widened below
   ============================================================ */

/* ---- Directory: sticky control bar (keyword search + Filters), then sort and count ---- */
/* The wrapper makes no box below 960px: a sticky bar only travels inside its parent, and a
   parent that is just as tall as the bar leaves it nowhere to stick (it never did until Oct 2026). */
.sc-controls { display: contents; }
.sc-bar {
  position: sticky; top: calc(var(--trp-topbar-height) + env(safe-area-inset-top, 0px)); z-index: 60;
  display: flex; align-items: center; gap: var(--trp-space-sm);
  margin: 0 calc(-1 * var(--trp-space-md)) var(--trp-space-md); padding: var(--trp-space-sm) var(--trp-space-md);
  background-color: rgba(246, 237, 224, 0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trp-border-light);
}
.sc-bar .trp-btn { flex: 0 0 auto; min-height: var(--trp-touch); padding: 0 16px; }
.sc-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); margin-bottom: var(--trp-space-md); }
.sc-bar-count { flex: 1 1 100%; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.sc-bar-count strong { color: var(--trp-text-primary); font-variant-numeric: tabular-nums; }
.sc-bar-sort { flex: 1 1 100%; min-width: 0; }
.sc-bar-sort .trp-select { min-height: var(--trp-touch); }

/* ---- Directory: keyword search box ---- */
.sc-search { flex: 1 1 0; }
.sc-search > input { min-height: var(--trp-touch); padding-right: var(--trp-touch); text-overflow: ellipsis; }
.sc-search > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sc-search-clear {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--trp-touch);
  display: flex; align-items: center; justify-content: center;
  color: var(--trp-text-muted); border-radius: var(--trp-radius-md);
}
.sc-search-clear:hover { color: var(--trp-text-primary); }
.sc-bar-count { overflow-wrap: anywhere; }

/* ---- Directory: filters. A bottom sheet on phones, a panel from 960px ---- */
.sc-filters {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh;
  background-color: var(--trp-surface); border-radius: var(--trp-radius-xl) var(--trp-radius-xl) 0 0;
  box-shadow: var(--trp-shadow-xl);
  transform: translateY(105%); visibility: hidden;
  transition: transform var(--trp-transition-slow), visibility 0s linear 280ms;
}
.sc-filters.is-open { transform: translateY(0); visibility: visible; transition: transform var(--trp-transition-slow); }
.sc-filters .trp-sheet-head { padding: var(--trp-space-md) var(--trp-space-lg) var(--trp-space-sm); border-bottom: 1px solid var(--trp-border-light); }
.sc-filters-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--trp-space-md);
  padding: var(--trp-space-lg);
}
.sc-filters-body .trp-field { margin-bottom: 0; min-width: 0; }
.sc-filters-body .is-wide { grid-column: 1 / -1; }
.sc-filters-foot {
  display: flex; gap: var(--trp-space-sm);
  padding: var(--trp-space-md) var(--trp-space-lg) calc(var(--trp-space-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--trp-border-light); background-color: var(--trp-surface);
}
.sc-filters-foot .trp-btn { flex: 1 1 0; min-height: 48px; }

.sc-active { margin-bottom: var(--trp-space-md); }

/* ---- Directory: creator cards (one column on phones) ---- */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--trp-space-sm); }
.sc-card {
  position: relative; display: flex; gap: var(--trp-space-md); min-width: 0;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-lg); padding: var(--trp-space-md);
  overflow-wrap: anywhere;
  transition: border-color var(--trp-transition-base), box-shadow var(--trp-transition-base);
}
.sc-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background-color: var(--trp-neutral-light); border: 1px solid var(--trp-border-light);
}
.sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--trp-space-sm); min-width: 0; }
.sc-name {
  min-width: 0; color: var(--trp-text-primary); font-size: var(--trp-font-size-md);
  font-weight: var(--trp-font-weight-semibold); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the name is the link; its hit area is the whole card */
.sc-name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.sc-name:hover { color: var(--trp-text-primary); }
.sc-sub {
  display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: -3px;
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm);
}
.sc-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sub img { flex-shrink: 0; border-radius: 2px; }
.sc-meta > span:first-of-type { flex: 0 1 auto; max-width: 70%; }
.sc-meta > span:last-of-type:not(:first-of-type) { flex: 1 1 0; }
.sc-sub .sc-sep { flex-shrink: 0; color: var(--trp-border-medium); }
.sc-found { color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.sc-stats { display: flex; flex-wrap: wrap; gap: 2px var(--trp-space-lg); }
.sc-stat { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.sc-stat b { font-size: var(--trp-font-size-base); font-weight: var(--trp-font-weight-semibold); font-variant-numeric: tabular-nums; }
.sc-stat span { font-size: 0.68rem; font-weight: var(--trp-font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--trp-text-muted); }
.sc-stat.is-power b { color: var(--trp-accent-dark); }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--trp-space-sm); min-width: 0; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sc-tags .trp-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sc-socials { position: relative; z-index: 1; display: flex; flex: 0 0 auto; margin: -6px -8px -6px 0; }
.sc-socials a {
  width: var(--trp-touch); height: var(--trp-touch); display: inline-flex; align-items: center; justify-content: center;
  color: var(--trp-text-secondary); font-size: 1rem; border-radius: 50%;
}
.sc-socials a:hover { color: var(--trp-text-primary); background-color: var(--trp-bg-alt); }
/* phones: three icons at most, so the row stays on one line */
.sc-socials a:nth-child(n+4):not(.sc-edit) { display: none; }
.sc-audience { display: none; }

/* ---- Channels + rates (docs/CHANNELS_RATES.md) ---- */
/* list card: the largest channel, total reach, one icon per channel (not links) */
.sc-reach { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-headline { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.sc-headline i { align-self: center; color: var(--trp-text-secondary); font-size: 0.95rem; }
.sc-headline b { font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold); font-variant-numeric: tabular-nums; }
.sc-headline span { overflow: hidden; text-overflow: ellipsis; font-size: 0.68rem; font-weight: var(--trp-font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--trp-text-muted); }
.sc-reach-line { color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); font-variant-numeric: tabular-nums; }
.sc-chips { display: flex; flex-wrap: nowrap; gap: 4px var(--trp-space-sm); min-width: 0; overflow: hidden; list-style: none; margin: 2px 0 0; padding: 0; }
.sc-chips li { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-chips i { font-size: 0.85rem; }
.sc-chip-more { color: var(--trp-text-muted); }

/* card itself: every channel */
.ch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--trp-space-md);
  padding: var(--trp-space-sm) 0; border-bottom: 1px solid var(--trp-border-light); }
.ch-row:last-child { border-bottom: none; }
.ch-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%; background-color: var(--trp-bg-alt); color: var(--trp-text-primary); }
.ch-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--trp-space-sm); min-width: 0; }
.ch-main a { min-width: 0; overflow-wrap: anywhere; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.ch-count { text-align: right; font-size: var(--trp-font-size-sm); color: var(--trp-text-secondary); white-space: nowrap; }
.ch-count b { color: var(--trp-text-primary); font-variant-numeric: tabular-nums; }
.ch-count small { display: block; color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.ch-row.is-link .ch-icon { color: var(--trp-text-muted); }
.ch-total { margin-top: var(--trp-space-sm); color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.ch-edit { width: 100%; border-collapse: collapse; font-size: var(--trp-font-size-sm); }
.ch-edit th { text-align: left; font-size: var(--trp-font-size-xs); color: var(--trp-text-muted); font-weight: var(--trp-font-weight-semibold); padding: 4px var(--trp-space-sm); }
.ch-edit td { padding: 6px var(--trp-space-sm); border-top: 1px solid var(--trp-border-light); vertical-align: middle; }
.ch-edit .ch-icon { width: 26px; height: 26px; margin-right: 4px; }
.ch-actions { white-space: nowrap; text-align: right; }
.ch-edit-row td { background-color: var(--trp-bg-alt); }
.ch-form { flex-wrap: wrap; align-items: flex-end; }

/* rates: grouped by platform, packages last, the creator's currency first */
.rt-wrap { overflow-x: auto; }
.rt-table { width: 100%; border-collapse: collapse; font-size: var(--trp-font-size-sm); }
.rt-group th { padding: var(--trp-space-md) 0 var(--trp-space-xs); text-align: left; font-size: var(--trp-font-size-xs);
  font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--trp-text-secondary); }
.rt-group i { margin-right: 4px; color: var(--trp-text-primary); }
.rt-table tbody:first-child .rt-group th { padding-top: 0; }
.rt-table tr:not(.rt-group) > * { padding: var(--trp-space-sm) var(--trp-space-sm) var(--trp-space-sm) 0; border-top: 1px solid var(--trp-border-light); vertical-align: top; }
.rt-table th[scope="row"] { text-align: left; font-weight: var(--trp-font-weight-medium); width: 100%; }
.rt-title { color: var(--trp-text-primary); }
.rt-format { color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.rt-meta { display: block; margin-top: 2px; color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-normal); overflow-wrap: anywhere; }
.rt-amount { white-space: nowrap; text-align: right; font-weight: var(--trp-font-weight-semibold); font-variant-numeric: tabular-nums; }
.rt-usd { white-space: nowrap; text-align: right; color: var(--trp-text-muted); font-variant-numeric: tabular-nums; }
.rt-admin { white-space: nowrap; text-align: right; }
.rt-admin > span { display: block; }
.rt-foot { margin-top: var(--trp-space-sm); color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.rt-currency { text-transform: uppercase; }
.link-input-row .ch-count, .link-input-row .rt-amount { flex: 0 0 110px; text-align: left; font-weight: var(--trp-font-weight-normal); }
.link-input-row.rt-input-row { flex-wrap: wrap; }
.link-input-row .rt-currency { flex: 0 0 64px; }

/* ---- Dashboard ---- */
.sc-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--trp-space-sm); }
.sc-cat {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--trp-space-sm) var(--trp-space-md); min-width: 0;
  padding: var(--trp-space-md); border-radius: var(--trp-radius-md);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); color: var(--trp-text-primary);
  transition: border-color var(--trp-transition-base);
}
.sc-cat:hover { border-color: var(--trp-accent); color: var(--trp-text-primary); }
.sc-cat-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--trp-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--trp-surface); color: var(--trp-accent-dark); border: 1px solid var(--trp-border-light);
}
.sc-cat-name { grid-column: 1 / -1; grid-row: 2; min-width: 0; font-weight: var(--trp-font-weight-medium); overflow-wrap: anywhere; }
.sc-cat-count { justify-self: end; font-size: var(--trp-font-size-xl); font-weight: var(--trp-font-weight-semibold); font-variant-numeric: tabular-nums; }
.sc-partners { display: flex; flex-direction: column; gap: var(--trp-space-sm); }
.sc-partner, .pf-brand {
  display: flex; align-items: center; gap: var(--trp-space-md); min-width: 0; padding: var(--trp-space-md);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
}
.sc-monogram {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--trp-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--trp-dark); color: var(--trp-accent); font-weight: var(--trp-font-weight-semibold);
}
.sc-partner-name, .brand-card-name { font-weight: var(--trp-font-weight-semibold); overflow-wrap: anywhere; }
.sc-partner-meta { color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); overflow-wrap: anywhere; }
.sc-quick { display: flex; flex-direction: column; gap: var(--trp-space-sm); }

/* ---- Profile ---- */
.pf-back {
  display: inline-flex; align-items: center; gap: var(--trp-space-sm); min-height: var(--trp-touch);
  color: var(--trp-text-secondary); font-weight: var(--trp-font-weight-medium);
}
.pf-layout { display: flex; flex-direction: column; gap: var(--trp-space-md); }
.pf-content { order: 1; min-width: 0; }
.pf-roster { order: 2; }
.pf-hero { display: flex; flex-direction: column; gap: var(--trp-space-md); }
.pf-hero-main { display: flex; align-items: center; gap: var(--trp-space-lg); min-width: 0; }
.profile-avatar-large {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background-color: var(--trp-neutral-light); border: 2px solid var(--trp-accent);
}
.pf-name { font-size: var(--trp-font-size-xl); overflow-wrap: anywhere; }
/* A creator's title never runs past two lines (docs/ROSTER.md §2: the title is a name, the
   handle has its own line). A safety net for an old packed title, not the fix. */
.pf-name, .cmp-creator-name, .cp-creator-name, .trp-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-creator-handle, .cp-creator-handle { color: var(--trp-text-secondary); font-weight: var(--trp-font-weight-normal); font-size: var(--trp-font-size-sm); }
.pf-channel { color: var(--trp-text-secondary); overflow-wrap: anywhere; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--trp-space-sm); }
.pf-hero-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); }
.pf-country {
  display: inline-flex; align-items: center; gap: var(--trp-space-sm); min-height: 40px; padding: 0 14px;
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-full);
  font-weight: var(--trp-font-weight-medium); min-width: 0;
}
.pf-country img { border-radius: 3px; flex-shrink: 0; }
.pf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--trp-space-sm); }
.pf-tile { min-width: 0; padding: var(--trp-space-md); background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md); }
.pf-tile b { display: block; font-size: var(--trp-font-size-lg); font-weight: var(--trp-font-weight-semibold); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pf-tile.is-power b { color: var(--trp-accent-dark); }
.pf-tile span { font-size: 0.68rem; font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--trp-text-muted); }
.pf-asof { margin-top: var(--trp-space-md); color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.pf-rates { display: flex; flex-direction: column; gap: var(--trp-space-sm); list-style: none; }
.pf-rates li { display: flex; align-items: flex-start; gap: var(--trp-space-md); line-height: 1.5; overflow-wrap: anywhere; }
.pf-rates li::before { content: ''; flex: 0 0 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background-color: var(--trp-accent); }
.pf-about { color: var(--trp-text-secondary); line-height: 1.65; overflow-wrap: anywhere; }
.pf-line { margin-top: var(--trp-space-md); color: var(--trp-text-secondary); overflow-wrap: anywhere; }
.pf-line strong { color: var(--trp-text-primary); font-weight: var(--trp-font-weight-semibold); }
.pf-list { display: flex; flex-direction: column; gap: var(--trp-space-sm); }
.pf-row {
  display: flex; align-items: center; gap: var(--trp-space-md); min-width: 0; min-height: 56px; padding: var(--trp-space-sm) var(--trp-space-md);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  color: var(--trp-text-primary); transition: border-color var(--trp-transition-base);
}
a.pf-row:hover { border-color: var(--trp-accent); color: var(--trp-text-primary); }
.pf-row-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light); color: var(--trp-text-primary);
}
.pf-row-text { flex: 1 1 auto; min-width: 0; }
.pf-row-text b { display: block; font-weight: var(--trp-font-weight-semibold); }
.pf-row-text span { display: block; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row > .fa-arrow-up-right-from-square { color: var(--trp-text-muted); font-size: 0.75rem; }
.pf-brand a { font-size: var(--trp-font-size-sm); }

/* roster: collapsed under the profile on phones, a sticky rail on desktop */
.pf-roster { padding: var(--trp-space-md); }
.pf-roster-head { display: flex; align-items: center; justify-content: space-between; gap: var(--trp-space-md); }
.pf-roster-title { font-weight: var(--trp-font-weight-semibold); }
.pf-roster-body { display: none; flex-direction: column; gap: var(--trp-space-sm); margin-top: var(--trp-space-md); min-height: 0; }
.pf-roster.is-open .pf-roster-body { display: flex; }
.influencer-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.influencer-item {
  display: flex; align-items: center; gap: var(--trp-space-md); min-height: 48px; padding: 4px var(--trp-space-sm);
  border-radius: var(--trp-radius-sm); color: var(--trp-text-primary);
}
.influencer-item:hover { background-color: var(--trp-bg-alt); color: var(--trp-text-primary); }
.influencer-item.active { background-color: var(--trp-accent-light); font-weight: var(--trp-font-weight-semibold); }
.influencer-item-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background-color: var(--trp-neutral-light); }
.influencer-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Tablet ---- */
@media (min-width: 640px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--trp-space-md); }
  .sc-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-quick { flex-direction: row; flex-wrap: wrap; }
  .sc-bar-count { order: 1; flex: 1 1 0; }
  .sc-bar-sort { order: 2; flex: 0 0 260px; }
  .pf-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pf-hero { flex-direction: row; align-items: center; justify-content: space-between; }
  .pf-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---- Desktop ---- */
@media (min-width: 960px) {
  /* the bar dissolves into the controls: search on top, the filter panel, then count and sort above the cards */
  .sc-controls { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--trp-space-sm); }
  .sc-bar, .sc-line { display: contents; }
  .sc-bar [data-sheet-open] { display: none; }
  .sc-search { order: 0; flex: 1 1 100%; margin-bottom: var(--trp-space-md); }
  .sc-controls .sc-filters { order: 1; flex: 1 1 100%; }
  .sc-bar-count { order: 2; margin-bottom: var(--trp-space-md); }
  .sc-bar-sort { order: 3; margin-bottom: var(--trp-space-md); }
  .sc-filters {
    position: static; max-height: none; transform: none; visibility: visible; transition: none;
    border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-lg); box-shadow: var(--trp-shadow-xs);
    margin-bottom: var(--trp-space-lg);
  }
  .sc-filters .trp-sheet-head { display: none; }
  .sc-filters-body { overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--trp-space-lg) var(--trp-space-lg) 0; }
  .sc-filters-body .is-wide { grid-column: span 2; }
  .sc-filters-foot { border-top: none; justify-content: flex-end; padding: var(--trp-space-md) var(--trp-space-lg) var(--trp-space-lg); }
  .sc-filters-foot .trp-btn { flex: 0 0 auto; min-height: 40px; }
  [data-sheet-overlay="filter-sheet"] { display: none; }

  .sc-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .sc-card { padding: var(--trp-space-lg); }
  .sc-card:hover { border-color: var(--trp-accent); box-shadow: var(--trp-shadow-md); }
  .sc-avatar { width: 56px; height: 56px; }
  .sc-socials a { width: 36px; height: 36px; }
  .sc-socials a:nth-child(n+4) { display: inline-flex; }
  .sc-socials a:nth-child(n+6):not(.sc-edit) { display: none; }
  .sc-audience { display: inline-flex; }
  .sc-grid .sc-reach { min-height: 4.1rem; }

  .trp-dash-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--trp-space-lg); align-items: start; }

  .pf-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--trp-space-xl); align-items: start; }
  .pf-content { order: 2; }
  .pf-roster {
    order: 1; position: sticky; top: calc(var(--trp-topbar-height) + var(--trp-space-lg));
    display: flex; flex-direction: column; max-height: calc(100vh - var(--trp-topbar-height) - 2 * var(--trp-space-lg));
  }
  .pf-roster-head .trp-btn { display: none; }
  .pf-roster-body { display: flex; flex: 1 1 auto; }
  .influencer-list { max-height: none; flex: 1 1 auto; }
  .influencer-item { min-height: 40px; }
  .profile-avatar-large { width: 88px; height: 88px; }
  .pf-name { font-size: var(--trp-font-size-2xl); }
}

/* ============================================================
   20. COMMAND CENTER
   ============================================================ */
.cc-live-dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--trp-success); }
.cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cc-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cc-kpis .trp-stat { font: inherit; }

.cc-view { display: none; }
.cc-view.is-active { display: block; }

.cc-section { margin-bottom: var(--trp-space-2xl); }
.cc-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); margin-bottom: var(--trp-space-md); }
.cc-sec-head h2 { font-size: var(--trp-font-size-md); }
.cc-sec-icon {
  width: 30px; height: 30px; border-radius: var(--trp-radius-sm); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
  background-color: var(--trp-accent-light); color: var(--trp-accent-dark);
}
.cc-section.is-hot .cc-sec-icon { background-color: var(--trp-danger-light); color: var(--trp-danger); }
.cc-section.is-call .cc-sec-icon { background-color: var(--trp-warning-light); color: var(--trp-warning); }
.cc-section.is-resend .cc-sec-icon { background-color: var(--trp-info-light); color: var(--trp-info); }
.cc-section.is-dead .cc-sec-icon { background-color: var(--trp-neutral-light); color: var(--trp-neutral); }
.cc-section.is-campaign .cc-sec-icon { background-color: var(--trp-accent-light); color: var(--trp-accent-dark); }
.cc-section.is-meeting .cc-sec-icon { background-color: var(--trp-info-light); color: var(--trp-info); }
.cc-section.is-wait .cc-sec-icon,
.cc-section.is-quiet .cc-sec-icon { background-color: var(--trp-neutral-light); color: var(--trp-neutral); }
/* Whose move (docs/COMMAND_CENTER.md): when the host job last checked, the reason, the next step */
.cc-checked {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm);
  margin: 0 0 var(--trp-space-lg); color: var(--trp-text-muted); font-size: var(--trp-font-size-xs);
}
.cc-move { color: var(--trp-text-primary); font-size: var(--trp-font-size-sm); line-height: 1.45; overflow-wrap: anywhere; }
.cc-next { color: var(--trp-accent-dark); font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold); overflow-wrap: anywhere; }
.cc-next i { font-size: 0.75em; margin-inline-end: 2px; }
.cc-card-compact { gap: 4px; }
.cc-wait { gap: var(--trp-space-md); }
.cc-wait-line { min-width: 0; overflow-wrap: anywhere; }
.cc-wait .trp-badge { flex-shrink: 0; }
.cc-lead-move {
  max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--trp-text-secondary);
}
.cc-sec-link { margin-left: auto; font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold); }
/* Campaign work: up to three groups side by side, one under the other on a phone */
.cc-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--trp-space-md); }
.cc-work-group {
  min-width: 0; background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-md); padding: var(--trp-space-md) var(--trp-space-lg);
}
.cc-work-group h3 { display: flex; align-items: center; gap: var(--trp-space-sm); font-size: var(--trp-font-size-base); margin-bottom: var(--trp-space-xs); }
.cc-work-group .trp-rows > * > :first-child { display: flex; flex-direction: column; gap: 2px; }
.cc-work-group .trp-badge { flex-shrink: 0; }
.cc-work-more { display: block; padding-top: var(--trp-space-sm); font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold); }
.cc-work-empty { padding: var(--trp-space-md) 0; text-align: left; }
.cc-hint { color: var(--trp-text-muted); font-size: var(--trp-font-size-sm); }

.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--trp-space-md); }
.cc-card, .cc-kcard {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-md); padding: var(--trp-space-md) 14px;
  transition: border-color var(--trp-transition-fast);
}
.cc-card:hover, .cc-kcard:hover { border-color: var(--trp-accent); }
.cc-row { display: flex; align-items: center; gap: var(--trp-space-sm); min-width: 0; }
.cc-num { flex-shrink: 0; font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); color: var(--trp-text-muted); font-variant-numeric: tabular-nums; }
.cc-co { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--trp-text-primary); font-weight: var(--trp-font-weight-semibold); }
.cc-co:hover { color: var(--trp-accent-dark); }
.cc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-tag {
  display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: var(--trp-radius-full);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light);
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-mail { color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-note {
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-note[data-note] { cursor: pointer; }
.cc-note.is-open { display: block; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--trp-text-primary); }
.cc-due { align-self: flex-end; color: var(--trp-warning); font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); }
.cc-due.is-old { color: var(--trp-danger); }

details.cc-bucket {
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light);
  border-radius: var(--trp-radius-md); margin-bottom: var(--trp-space-sm); overflow: hidden;
}
details.cc-bucket summary {
  list-style: none; display: flex; align-items: center; gap: var(--trp-space-sm); min-height: var(--trp-touch);
  padding: 0 var(--trp-space-lg); cursor: pointer; user-select: none;
  font-weight: var(--trp-font-weight-semibold); font-size: var(--trp-font-size-base);
}
details.cc-bucket summary::-webkit-details-marker { display: none; }
.cc-chev { color: var(--trp-text-muted); font-size: 0.7rem; transition: transform var(--trp-transition-fast); }
details.cc-bucket[open] .cc-chev { transform: rotate(90deg); }
.cc-bucket-count { margin-left: auto; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-medium); }
.cc-bucket-body { padding: var(--trp-space-md); border-top: 1px solid var(--trp-border-light); }
/* Under a section's cards: "Show more", the loading line or the error with its retry */
.cc-load-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--trp-space-sm);
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm);
}
.cc-load-row:not(:empty) { padding-top: var(--trp-space-md); }

/* Pipeline board: columns scroll sideways inside their own track, never the page */
.cc-kanban { display: flex; gap: var(--trp-space-md); overflow-x: auto; padding-bottom: var(--trp-space-md); align-items: flex-start; -webkit-overflow-scrolling: touch; }
.cc-col {
  flex: 0 0 248px; min-width: 0; display: flex; flex-direction: column; max-height: 74vh;
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
}
.cc-col-head { display: flex; align-items: center; gap: var(--trp-space-sm); padding: 11px 14px; border-bottom: 1px solid var(--trp-border-light); }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cc-col-name { font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; }
.cc-col-head .trp-count { margin-left: auto; }
.cc-col-body { display: flex; flex-direction: column; gap: 6px; padding: var(--trp-space-sm); overflow-y: auto; }
.cc-kcard { padding: 9px 11px; gap: 4px; border-radius: var(--trp-radius-sm); }
.cc-kcard .cc-co { font-size: var(--trp-font-size-sm); }
.cc-col-more { display: block; padding: 8px; text-align: center; font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold); }

.cc-leads-table td:nth-child(2), .cc-leads-table td:nth-child(3), .cc-leads-table td:nth-child(4) {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}

.cc-footnote { margin-top: var(--trp-space-3xl); color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); text-align: center; }

/* ============================================================
   21. BRANDS LIST
   ============================================================ */
.trp-chip-n { color: var(--trp-text-muted); font-weight: var(--trp-font-weight-medium); font-variant-numeric: tabular-nums; }
.brand-count { vertical-align: middle; margin-left: var(--trp-space-sm); letter-spacing: 0; }
.brands-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--trp-space-md); align-items: start; }
@media (min-width: 700px) { .brands-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.brand-group { display: flex; flex-direction: column; gap: var(--trp-space-sm); min-width: 0; }
/* One size for every card, at every width: each text line is a slot of fixed height (always
   rendered, even empty) that clamps its content, the body is as tall as a two-line name plus
   the three other lines (a one-line name leaves the spare line at the bottom), and the footer
   is a single row pinned to the bottom. Content can never change the card's height. */
.brand-card {
  --bc-line: 1.4;
  position: relative; display: flex; flex-direction: column; gap: var(--trp-space-md); min-width: 0;
  overflow: hidden;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light);
  border-left: 3px solid var(--stage, var(--trp-border-medium));
  border-radius: var(--trp-radius-lg); padding: var(--trp-space-lg);
  transition: border-color var(--trp-transition-base), box-shadow var(--trp-transition-base);
}
.brand-card:hover { box-shadow: var(--trp-shadow-md); }
.brand-card-top { display: flex; align-items: flex-start; gap: var(--trp-space-md); min-width: 0; }
.brand-card-body {
  flex: 1 1 auto; min-width: 0;
  height: calc(var(--bc-line) * (2 * var(--trp-font-size-base) + 2 * var(--trp-font-size-xs) + var(--trp-font-size-sm)));
}
.brand-card-head, .brand-card-meta, .brand-card-contact, .brand-card-email {
  line-height: var(--bc-line); height: calc(var(--bc-line) * 1em); overflow: hidden;
}
/* the name: one or two lines, the second ellipsised */
.brand-card-head {
  font-size: var(--trp-font-size-base); height: auto; max-height: calc(var(--bc-line) * 2em);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.brand-card-title { color: var(--trp-text-primary); font-weight: var(--trp-font-weight-semibold); }
/* the title is the link; its hit area is the whole card */
.brand-card-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.brand-card-title:hover { color: var(--trp-accent-dark); }
.brand-card-meta, .brand-card-contact, .brand-card-email {
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); text-overflow: ellipsis; white-space: nowrap;
}
.brand-card-meta { color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.brand-card-email { font-size: var(--trp-font-size-xs); }
.brand-card-verified { margin-inline-end: 4px; color: var(--trp-success); font-size: 0.8em; }
.brand-card-foot {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0;
  height: 24px; margin-top: auto; overflow: hidden;
}
.brand-card-foot > * { flex-shrink: 0; }
.brand-expand {
  position: relative; z-index: 1; flex: 0 0 auto; width: 32px; height: 40px; margin: 0 -6px 0 -8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--trp-radius-sm); color: var(--trp-text-muted); font-size: 0.75rem;
}
.brand-expand:hover { background-color: var(--trp-bg-alt); color: var(--trp-text-primary); }
.brand-expand i { transition: transform var(--trp-transition-fast); }
.brand-expand[aria-expanded="true"] i { transform: rotate(90deg); }
.brand-children { display: none; flex-direction: column; gap: var(--trp-space-sm); padding-left: var(--trp-space-xl); }
.brand-children.open { display: flex; }

/* ============================================================
   22. CLIENT PORTAL
   ============================================================ */
.cp-campaign { align-items: flex-start; }
.cp-campaign .pf-row-text span { white-space: normal; }
/* a campaign page: one block per creator, one row per deliverable (what it is, when, how far) */
.cp-creator { padding: var(--trp-space-lg) 0; border-top: 1px solid var(--trp-border-light); }
.cp-creator:first-of-type { border-top: none; padding-top: 0; }
.cp-creator:last-child { padding-bottom: 0; }
.cp-creator-name { font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold); overflow-wrap: anywhere; }
.cp-creator-name + span { display: block; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.cp-deliverable {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm) var(--trp-space-md);
  margin-top: var(--trp-space-md); padding: var(--trp-space-md) var(--trp-space-lg);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
}
.cp-deliverable-main { flex: 1 1 200px; min-width: 0; }
.cp-deliverable-main b { display: block; overflow-wrap: anywhere; }
.cp-deliverable-main span { display: block; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.cp-progress { display: flex; align-items: center; gap: var(--trp-space-md); color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.cp-progress .trp-progress { flex: 1 1 auto; }
.trp-kv .is-wide { grid-column: 1 / -1; }
/* Two columns at every width (short values in a dialog) */
.trp-kv.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================
   23. ADMIN: SHARED BLOCKS FOR DETAIL PAGES, FORMS AND TOOLS
   ============================================================ */
/* A page that reads as one column (a detail page, a form) */
.trp-narrow { max-width: 960px; margin-left: auto; margin-right: auto; }
.trp-admin .back-link { margin-bottom: var(--trp-space-xs); }
.trp-page-actions form { display: inline-flex; }
.trp-page-actions .btn-delete, .trp-page-actions .btn-del { min-height: 40px; padding: 9px 20px; font-size: var(--trp-font-size-base); }

/* Modal: a native <dialog>. A sheet from the bottom on phones, centred from 640px.
   The padding is on the body, so a click on the dialog itself is a click on the backdrop. */
dialog.trp-modal {
  width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 0; overflow-y: auto;
  background-color: var(--trp-surface); color: var(--trp-text-primary); border: none;
  border-radius: var(--trp-radius-xl) var(--trp-radius-xl) 0 0; box-shadow: var(--trp-shadow-xl);
}
dialog.trp-modal::backdrop { background-color: rgba(26, 26, 46, 0.45); }
dialog.trp-modal.is-wide { max-width: 720px; }
.trp-modal-body { padding: var(--trp-space-xl); padding-bottom: calc(var(--trp-space-xl) + env(safe-area-inset-bottom, 0px)); }
.trp-modal-actions { display: flex; flex-wrap: wrap; gap: var(--trp-space-sm); margin-top: var(--trp-space-lg); }
@media (min-width: 640px) {
  dialog.trp-modal { margin: auto; border-radius: var(--trp-radius-xl); }
  .trp-modal-body { padding: var(--trp-space-2xl); }
}
@media (max-width: 639px) { .trp-modal-actions > * { flex: 1 1 0; } }

/* Fields side by side from 640px (forms, editable detail panels) */
.trp-field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--trp-space-lg); }
.trp-field-grid > * { min-width: 0; }
@media (min-width: 640px) {
  .trp-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trp-field-grid > .is-wide { grid-column: 1 / -1; }
}

.trp-card > .trp-field:last-child, .trp-card > form > .trp-field:last-child { margin-bottom: 0; }
/* The Save / Cancel row under a form */
.trp-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--trp-space-sm); margin-top: var(--trp-space-sm); }
@media (max-width: 639px) { .trp-form-actions > * { flex: 1 1 0; } }
/* The remove button inside a chip */
.trp-chip-x {
  width: 22px; height: 22px; margin-right: -6px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; color: var(--trp-text-secondary);
}
.trp-chip-x:hover { background-color: var(--trp-danger-light); color: var(--trp-danger-dark); }
.link-input-row .link-platform { flex: 0 0 34%; }

/* A card divided into titled parts */
.trp-card-part { padding-top: var(--trp-space-lg); margin-top: var(--trp-space-lg); border-top: 1px solid var(--trp-border-light); }
.trp-card-part > .trp-eyebrow { margin-bottom: var(--trp-space-md); }
.trp-card-header + .trp-card-part { padding-top: 0; margin-top: 0; border-top: none; }

/* A chip that is a checkbox: the box is hidden, the chip shows the state */
.trp-chip-check { cursor: pointer; user-select: none; }
.trp-chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.trp-chip-check:has(input:checked) { background-color: var(--trp-dark); border-color: var(--trp-dark); color: var(--trp-bg); }
.trp-chip-check:has(input:focus-visible) { outline: 2px solid var(--trp-accent); outline-offset: 2px; }

/* Values that turn into fields (the Edit mode of a detail panel) */
.trp-kv dd :where(input, select) { width: 100%; }

/* ============================================================
   24. BRAND DETAIL
   ============================================================ */
.bd-identity { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Next move (docs/COMMAND_CENTER.md): one wrapping line above the identity fields */
.bd-next-move {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--trp-space-sm);
  margin-bottom: var(--trp-space-lg); padding: var(--trp-space-sm) var(--trp-space-md);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  font-size: var(--trp-font-size-sm);
}
.bd-next-move-label { font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--trp-text-muted); }
.bd-next-move-reason { min-width: 0; overflow-wrap: anywhere; }
.bd-next-move-step { color: var(--trp-accent-dark); font-weight: var(--trp-font-weight-semibold); }
.bd-next-move-step i { font-size: 0.75em; }
.bd-subbrands { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--trp-space-sm); }
.bd-subbrand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: var(--trp-space-md);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  color: var(--trp-text-primary); font-weight: var(--trp-font-weight-semibold);
  transition: border-color var(--trp-transition-fast);
}
.bd-subbrand:hover { border-color: var(--trp-accent); color: var(--trp-text-primary); }

.contacts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--trp-space-md); }
@media (min-width: 760px) { .contacts-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.contact-card {
  display: flex; flex-direction: column; gap: var(--trp-space-sm); min-width: 0; padding: var(--trp-space-lg);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
}
.contact-card[data-is-primary="1"] { border-color: var(--trp-accent); }
.contact-primary-badge { align-self: flex-start; }
.contact-field-group { display: flex; align-items: flex-start; gap: var(--trp-space-sm); min-width: 0; }
.contact-field-label {
  flex: 0 0 84px; padding-top: 3px; color: var(--trp-text-muted); white-space: nowrap;
  font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em;
}
.contact-field {
  flex: 1 1 auto; min-width: 0; min-height: 28px; padding: 2px 6px; margin: -2px -6px;
  border-radius: var(--trp-radius-sm); overflow-wrap: anywhere; cursor: pointer;
  transition: background-color var(--trp-transition-fast);
}
.contact-field:hover { background-color: var(--trp-surface); }
.contact-field-name { font-weight: var(--trp-font-weight-semibold); }
.contact-edit-input { min-height: 34px; padding: 4px 10px; }
.contact-card-actions {
  display: flex; flex-wrap: wrap; gap: var(--trp-space-sm); margin-top: auto; padding-top: var(--trp-space-md);
  border-top: 1px solid var(--trp-border-light);
}
.contact-card-actions .btn-delete-contact { margin-left: auto; }
/* a card with nothing to offer (the only contact, and primary) shows no empty action row */
.contact-card-actions:not(:has(button:not([hidden]))) { display: none; }

.bd-portal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); }
.bd-portal-url {
  flex: 0 1 auto; min-width: 0; padding: 7px 12px; overflow-wrap: anywhere;
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
}

/* ============================================================
   25. CREATOR DETAIL (admin) — the hero, tiles and rows are the showcase profile's (pf-*)
   ============================================================ */
.cd-meta { display: flex; flex-wrap: wrap; gap: 2px var(--trp-space-lg); margin-top: 4px; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.cd-meta span { min-width: 0; overflow-wrap: anywhere; }
.cd-meta i { color: var(--trp-text-muted); margin-right: 2px; }
/* "Contact person may not be the creator" (docs/ROSTER.md §2): wraps on a phone, links to the field */
.cd-name-warning { margin-top: 6px; white-space: normal; text-decoration: none; }
.cd-name-warning:hover { text-decoration: underline; }
.cd-delete { margin-left: auto; }
.cd-rates { margin-top: var(--trp-space-sm); padding: var(--trp-space-sm) var(--trp-space-md); background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md); font-size: var(--trp-font-size-sm); color: var(--trp-text-secondary); }
.trp-field.is-overdue input { border-color: var(--trp-danger); }
.trp-admin .pf-row { min-height: 0; }
@media (max-width: 639px) { .cd-file { flex-wrap: wrap; } .cd-file > .trp-grow { flex-basis: 60%; } }

/* A block of free text exactly as it was typed (notes, remarks, a template preview) */
.trp-note {
  padding: var(--trp-space-md); white-space: pre-wrap; overflow-wrap: anywhere;
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); line-height: 1.6;
}
.trp-note.is-warning { background-color: var(--trp-warning-light); border-color: transparent; color: var(--trp-warning-dark); }

/* A creator's activity log (admin creator page): one line per entry, opened in place */
.act-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--trp-space-sm); margin-bottom: var(--trp-space-sm); }
.act-list { list-style: none; margin: 0 0 var(--trp-space-md); padding: 0; border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md); }
.act-list > li + li { border-top: 1px solid var(--trp-border-light); }
.act-item > summary {
  list-style: none; display: flex; align-items: center; gap: var(--trp-space-sm); min-height: var(--trp-touch);
  padding: 6px var(--trp-space-md); cursor: pointer; font-size: var(--trp-font-size-sm);
}
.act-item > summary::-webkit-details-marker { display: none; }
.act-item > summary:hover { background-color: var(--trp-bg-alt); }
.act-item > summary time { flex: 0 0 auto; color: var(--trp-text-secondary); font-variant-numeric: tabular-nums; }
.act-item > summary .trp-badge { flex: 0 0 auto; }
.act-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--trp-text-primary); }
.act-item[open] .act-title { white-space: normal; overflow-wrap: anywhere; }
.act-item > .trp-note { margin: 0 var(--trp-space-md); }
.act-source { padding: 4px var(--trp-space-md) var(--trp-space-sm); color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.act-archive { margin-top: var(--trp-space-sm); font-size: var(--trp-font-size-sm); color: var(--trp-text-secondary); }
.act-archive > summary { cursor: pointer; min-height: var(--trp-touch); display: flex; align-items: center; }
.act-add { margin-top: var(--trp-space-lg); padding-top: var(--trp-space-md); border-top: 1px dashed var(--trp-border-light); }
/* The creator picker (templates/ui/creator_picker.html): a search box and a list of matching
   creators, each with its action; a creator already on the campaign is shown, dimmed, with a link. */
.trp-picker-box { display: flex; gap: var(--trp-space-sm); }
.trp-picker-box .trp-input { flex: 1 1 auto; min-width: 0; }
.trp-picker-search label { display: block; margin-bottom: 6px; font-size: var(--trp-font-size-sm); font-weight: var(--trp-font-weight-semibold); color: var(--trp-text-secondary); }
.trp-picker-status { min-height: 1.2em; margin: 6px 0; color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
.trp-picker-status:empty { margin: 0; }
.trp-picker-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; border-radius: var(--trp-radius-md); }
.trp-picker-list:not(:empty) { border: 1px solid var(--trp-border-light); }
.trp-picker-row { display: flex; align-items: center; gap: var(--trp-space-sm); min-height: 52px; padding: 6px var(--trp-space-md); }
.trp-picker-row + .trp-picker-row { border-top: 1px solid var(--trp-border-light); }
.trp-picker-row:focus-within { background-color: var(--trp-bg-alt); }
.trp-picker-row.is-disabled { background-color: var(--trp-bg-alt); }
.trp-picker-row.is-disabled .trp-picker-avatar, .trp-picker-row.is-disabled .trp-picker-main { opacity: 0.6; }
.trp-picker-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background-color: var(--trp-neutral-light); }
.trp-picker-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.trp-picker-name, .trp-picker-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trp-picker-name { color: var(--trp-text-primary); font-weight: var(--trp-font-weight-semibold); }
.trp-picker-meta { color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); }
.trp-picker-row .trp-btn { flex: 0 0 auto; }
.trp-picker-note { flex: 0 1 auto; color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); text-align: right; }

/* A character count under a field; .is-over past the field's soft limit (the text is never cut) */
.trp-counter { margin-top: 4px; color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); font-variant-numeric: tabular-nums; }
.trp-counter.is-over { color: var(--trp-warning-dark); font-weight: var(--trp-font-weight-semibold); }

/* Drop zone / upload box */
.trp-drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--trp-space-sm); padding: var(--trp-space-lg);
  border: 2px dashed var(--trp-border-medium); border-radius: var(--trp-radius-md); background-color: var(--trp-bg-alt);
  color: var(--trp-text-secondary); text-align: center;
}
.trp-drop > .trp-form-row { width: 100%; justify-content: center; text-align: left; }
.trp-drop input[type="file"] { max-width: 100%; font-size: var(--trp-font-size-sm); }
button.trp-drop { width: 100%; cursor: pointer; padding: var(--trp-space-3xl) var(--trp-space-lg); transition: border-color var(--trp-transition-fast); }
button.trp-drop:hover, .trp-drop.drag { border-color: var(--trp-accent); }
.trp-drop > i { font-size: 1.8rem; color: var(--trp-accent); }

/* ============================================================
   26. CREATOR ROSTER (admin) — the showcase card (sc-*) with the pipeline on it
   ============================================================ */
.inf-card { border-left: 3px solid var(--stage, var(--trp-border-medium)); }
.inf-card:hover { box-shadow: var(--trp-shadow-md); }
.inf-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background-color: var(--trp-neutral-light); border: 1px solid var(--trp-border-light);
}
.inf-contact { min-width: 0; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the card is one link (the name); the address stays clickable above it */
.inf-contact a { position: relative; z-index: 1; }
.inf-due { flex: 0 0 auto; color: var(--trp-text-secondary); font-size: var(--trp-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inf-due.is-overdue { color: var(--trp-danger); font-weight: var(--trp-font-weight-semibold); }
@media (min-width: 1200px) { .inf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================
   27. ADMIN TOOL PAGES — scoring, vetting, corridor, analytics, reports,
       creator pipeline, campaigns, settings, import
   ============================================================ */
.trp-admin .trp-card > .trp-table-wrap:last-child, .trp-admin .trp-card > .trp-callout:last-child { margin-bottom: 0; }
.trp-lead { color: var(--trp-text-secondary); margin-bottom: var(--trp-space-md); max-width: 80ch; }
.trp-toolbar .trp-toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); }
@media (max-width: 639px) { .trp-toolbar .trp-toolbar-end { margin-left: 0; flex: 1 1 100%; } }

/* Callout: a titled message with a paragraph or a list under it (an alert is one line) */
.trp-callout {
  padding: var(--trp-space-md) var(--trp-space-lg); margin-bottom: var(--trp-space-sm); min-width: 0;
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-left: 3px solid var(--trp-accent);
  border-radius: var(--trp-radius-md); color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); overflow-wrap: anywhere;
}
.trp-callout > strong:first-child { display: block; color: var(--trp-text-primary); font-size: var(--trp-font-size-base); }
.trp-callout.is-success { background-color: var(--trp-success-light); border-color: transparent; border-left-color: var(--trp-success); }
.trp-callout.is-warning { background-color: var(--trp-warning-light); border-color: transparent; border-left-color: var(--trp-warning); }
.trp-callout.is-danger { background-color: var(--trp-danger-light); border-color: transparent; border-left-color: var(--trp-danger); }
.trp-callout.is-info { background-color: var(--trp-info-light); border-color: transparent; border-left-color: var(--trp-info); }
.trp-callout summary { margin-top: 6px; cursor: pointer; font-weight: var(--trp-font-weight-medium); }
.trp-callout .trp-chips { margin-top: 6px; }
.trp-callout .trp-badge { background-color: var(--trp-surface); }
.trp-list { padding-left: 20px; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.trp-list li { margin: 2px 0; overflow-wrap: anywhere; }

/* A list or a table that scrolls inside its own box */
.trp-scroll { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.trp-scroll.is-short { max-height: 150px; }
.trp-scroll.is-tall { max-height: 500px; }

/* A chart canvas: round charts stay small and centred, bar charts take the card */
.trp-chart { position: relative; width: 100%; }
.trp-chart.is-round { max-width: 350px; margin: 0 auto; }
.trp-chart canvas { max-width: 100%; }

/* Bars: a small distribution. The height of a bar is its --h */
.trp-bars { display: flex; align-items: stretch; gap: 6px; height: 104px; margin-bottom: var(--trp-space-xl); }
.trp-bar { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; text-align: center; }
.trp-bar b { font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); font-variant-numeric: tabular-nums; }
.trp-bar span { font-size: 0.68rem; color: var(--trp-text-secondary); white-space: nowrap; }
.trp-bar-track { display: flex; align-items: flex-end; }
.trp-bar-fill { width: 100%; height: var(--h, 0%); min-height: 2px; border-radius: 4px 4px 0 0; background-color: var(--trp-info); }

/* Progress: the filled share is --pct */
.trp-progress { height: 8px; min-width: 80px; border-radius: var(--trp-radius-full); background-color: var(--trp-neutral-light); overflow: hidden; }
.trp-progress > span { display: block; height: 100%; width: var(--pct, 0%); max-width: 100%; border-radius: inherit; background-color: var(--trp-success); }
.trp-progress.is-warning > span { background-color: var(--trp-warning); }
.trp-progress.is-danger > span { background-color: var(--trp-danger); }
.trp-progress.is-lg { height: 14px; }
.trp-progress-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--trp-space-md); margin: 4px 0; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }

/* Table cells: centred values, coverage heat, rows that need attention, an icon-only action */
.trp-table td.is-center, .trp-table th.is-center { text-align: center; }
.trp-table td.is-gap { background-color: var(--trp-danger-light); }
.trp-table td.is-covered { background-color: var(--trp-success-light); }
.trp-table tbody tr.is-danger, .trp-table tbody tr.is-danger:hover { background-color: var(--trp-danger-light); }
.trp-table tbody tr.is-warning, .trp-table tbody tr.is-warning:hover { background-color: var(--trp-warning-light); }
.trp-table .trp-list { padding-left: 16px; }
.vet-remarks { min-width: 200px; max-width: 320px; }
.cmp-deliverables { min-width: 280px; }
/* Campaigns: the list of campaign cards; on a campaign, one block per creator with the
   workflow strip (a step is done, the current one, or still to come) and a row per deliverable */
.cmp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--trp-space-md); }
@media (min-width: 960px) { .cmp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-card { display: flex; flex-direction: column; gap: var(--trp-space-sm); margin-bottom: 0; min-width: 0; position: relative; }
.cmp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--trp-space-sm); }
.cmp-card-name { min-width: 0; color: var(--trp-text-primary); font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold); overflow-wrap: anywhere; }
/* the name is the link; its hit area is the whole card */
.cmp-card-name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cmp-meta { display: flex; flex-wrap: wrap; gap: 2px var(--trp-space-md); min-width: 0; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); }
.cmp-meta > span { min-width: 0; overflow-wrap: anywhere; }
.cmp-meta b { color: var(--trp-text-primary); font-weight: var(--trp-font-weight-semibold); font-variant-numeric: tabular-nums; }
.cmp-meta i { color: var(--trp-text-muted); font-size: 0.85em; }
.cmp-meta .is-overdue, .cmp-deliv .is-overdue { color: var(--trp-danger); font-weight: var(--trp-font-weight-semibold); }
.cmp-prose { white-space: pre-line; overflow-wrap: anywhere; }
.cmp-creator {
  padding: var(--trp-space-lg); margin-bottom: var(--trp-space-md); min-width: 0;
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-lg);
  scroll-margin-top: calc(var(--trp-topbar-height) + var(--trp-space-md));
}
.cmp-creator.is-out, .cmp-deliv.is-out { opacity: 0.7; }
.cmp-creator-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm); margin-bottom: 4px; }
.cmp-creator-name { flex: 1 1 auto; min-width: 0; color: var(--trp-text-primary); font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-semibold); overflow-wrap: anywhere; }
.cmp-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--trp-space-md) 0; list-style: none; }
.cmp-step {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  background-color: var(--trp-surface); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-full);
  color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); font-weight: var(--trp-font-weight-semibold); white-space: nowrap;
}
.cmp-step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--trp-border-medium); }
.cmp-step.is-done { background-color: var(--trp-success-light); border-color: transparent; color: var(--trp-success-dark); }
.cmp-step.is-done::before { background-color: var(--trp-success); border-color: var(--trp-success); }
.cmp-step.is-current { border-color: var(--trp-accent); color: var(--trp-text-primary); }
.cmp-step.is-current::before { border-color: var(--trp-accent-dark); background-color: var(--trp-accent-light); }
.cmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-deliv {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--trp-space-sm) var(--trp-space-md);
  padding: var(--trp-space-md) 0 0; margin-top: var(--trp-space-md); border-top: 1px solid var(--trp-border-light);
}
.cmp-deliv-main { flex: 1 1 220px; min-width: 0; }
.cmp-deliv-main > b { display: block; overflow-wrap: anywhere; }
.cmp-deliv-main > span { display: block; color: var(--trp-text-secondary); font-size: var(--trp-font-size-sm); overflow-wrap: anywhere; }
.cmp-deliv-main a { font-weight: var(--trp-font-weight-semibold); }
@media (pointer: coarse) { .cmp-actions .trp-btn-sm, .cmp-actions .add-row-btn { min-height: 40px; } }
.trp-btn-icon.trp-btn-sm { width: 36px; min-height: 36px; padding: 0; }
.trp-page-title .trp-badge { vertical-align: middle; letter-spacing: 0; }
.trp-table td.trp-score { font-size: var(--trp-font-size-md); font-weight: var(--trp-font-weight-bold); }
.trp-table-wrap.trp-scroll thead th { position: sticky; top: 0; z-index: 1; }
.trp-table-wrap + .trp-callout { margin-top: var(--trp-space-md); }
.trp-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: var(--trp-space-sm); }
.trp-inline-form :where(input) { flex: 1 1 110px; min-width: 0; min-height: 32px; padding: 4px 10px; font-size: var(--trp-font-size-sm); }

/* Rows of name + tag (recent activity lists) */
.trp-rows > * {
  display: flex; align-items: center; justify-content: space-between; gap: var(--trp-space-md); min-width: 0;
  padding: var(--trp-space-sm) 0; border-bottom: 1px solid var(--trp-border-light);
}
.trp-rows > :last-child { border-bottom: none; }
.trp-rows > * > :first-child { min-width: 0; overflow-wrap: anywhere; }

/* The pipeline board (cc-kanban) outside the Command Center: a card that opens something is a button */
button.cc-kcard { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cc-kcard.is-overdue { border-right: 3px solid var(--trp-danger); }
button.cc-kcard .cc-row { flex-wrap: wrap; gap: 4px var(--trp-space-sm); }
button.cc-kcard .cc-co { white-space: normal; overflow-wrap: anywhere; }
.cc-kline { color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-kline.is-overdue { color: var(--trp-danger); font-weight: var(--trp-font-weight-semibold); }
.cc-col-empty { padding: var(--trp-space-md); color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); text-align: center; }
/* The board's cards come in slices: the first ones with the page, the rest on "Show more" */
.cc-col-cards { display: flex; flex-direction: column; gap: 6px; }
button.cc-col-more {
  width: 100%; min-height: var(--trp-touch); border: 1px dashed var(--trp-border-medium); border-radius: var(--trp-radius-sm);
  background: none; color: var(--trp-accent-dark); font: inherit; font-size: var(--trp-font-size-sm);
  font-weight: var(--trp-font-weight-semibold); cursor: pointer;
}
button.cc-col-more:hover { border-color: var(--trp-accent); background-color: var(--trp-surface); }

/* Settings: a stage that can be switched on and off */
.trp-toggle-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--trp-space-lg); }
.trp-toggle-row {
  display: flex; align-items: center; gap: var(--trp-space-md); min-height: var(--trp-touch); padding: 4px var(--trp-space-md);
  background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-md);
  font-weight: var(--trp-font-weight-medium); cursor: pointer;
}
.trp-toggle-row input { width: 18px; height: 18px; flex-shrink: 0; }
.trp-toggle-row .trp-stage { background: none; padding: 0; font-size: var(--trp-font-size-base); color: var(--trp-text-primary); }
.trp-toggle-row code { margin-left: auto; color: var(--trp-text-muted); font-size: var(--trp-font-size-xs); }
textarea.trp-mono { font-family: var(--trp-font-mono); font-size: var(--trp-font-size-sm); }

/* Import: the picked files, and the result of a run */
.imp-file select { flex: 0 0 auto; width: auto; }
.imp-result .trp-kv { margin: var(--trp-space-md) 0; }

/* ============================================================
   90. SMALL ADMIN PIECES (link rows on add creator)
   ============================================================ */

.link-input-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.link-input-row select, .link-input-row input {
  padding: 6px 10px; border: 1px solid var(--trp-border-light); border-radius: var(--trp-radius-sm);
  font-size: var(--trp-font-size-sm); background-color: var(--trp-surface);
}
.link-input-row select { flex: 0 0 100px; }
.link-input-row input { flex: 1; min-width: 0; }

.actions-cell { text-align: center; }

/* Phones: a bare control never forces its container wider than the screen */
@media (max-width: 768px) {
  .trp-admin .content-area :where(input, select, textarea) { max-width: 100%; min-width: 0 !important; }
}

/* ============================================================
   95. UTILITIES
   ============================================================ */
.trp-hidden { display: none !important; }
.trp-flex { display: flex; }
.trp-flex-wrap { flex-wrap: wrap; }
.trp-items-center { align-items: center; }
.trp-justify-between { justify-content: space-between; }
.trp-gap-sm { gap: var(--trp-space-sm); }
.trp-gap-md { gap: var(--trp-space-md); }
.trp-gap-lg { gap: var(--trp-space-lg); }
.trp-grow { flex: 1 1 auto; min-width: 0; }
.trp-mt-0 { margin-top: 0; }
.trp-mt-md { margin-top: var(--trp-space-md); }
.trp-mt-lg { margin-top: var(--trp-space-lg); }
.trp-mt-xl { margin-top: var(--trp-space-xl); }
.trp-mb-0 { margin-bottom: 0; }
.trp-mb-md { margin-bottom: var(--trp-space-md); }
.trp-mb-lg { margin-bottom: var(--trp-space-lg); }
.trp-text-center { text-align: center; }
.trp-text-right { text-align: right; }
.trp-text-secondary { color: var(--trp-text-secondary); }
.trp-text-muted { color: var(--trp-text-muted); }
.trp-text-accent { color: var(--trp-accent-dark); }
.trp-text-success { color: var(--trp-success); }
.trp-text-warning { color: var(--trp-warning); }
.trp-text-danger { color: var(--trp-danger); }
.trp-text-info { color: var(--trp-info); }
.trp-text-sm { font-size: var(--trp-font-size-sm); }
.trp-text-xs { font-size: var(--trp-font-size-xs); }
.trp-font-semibold { font-weight: var(--trp-font-weight-semibold); }
.trp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trp-wrap-anywhere { overflow-wrap: anywhere; }
.trp-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--trp-space-lg); }
@media (min-width: 960px) { .trp-grid-2 { grid-template-columns: 1fr 1fr; } }
.trp-only-mobile { display: none; }
@media (max-width: 859px) { .trp-only-mobile { display: initial; } .trp-only-desktop { display: none !important; } }

/* ============================================================
   99. PRINT + REDUCED MOTION
   ============================================================ */
@media print {
  .sidebar, .sidebar-overlay, .top-bar, .trp-header, .trp-footer, .trp-pager, .trp-toolbar, .trp-no-print { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background-color: #fff; }
  .content-area, .trp-main { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (hover: none) {
  .trp-card-interactive:hover { border-color: var(--trp-border-light); box-shadow: var(--trp-shadow-xs); }
}

/* ── THERARE Score (docs/THERARE_SCORE.md): chip on cards, panel on profiles ── */
.ts-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: var(--trp-font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--trp-border-light); background-color: var(--trp-bg-alt); color: var(--trp-text-muted); white-space: nowrap; }
.ts-chip b { font-size: var(--trp-font-size-sm); color: var(--trp-text-primary); font-variant-numeric: tabular-nums; }
.ts-chip.ts-ok b { color: var(--trp-success-dark); }
.ts-chip.ts-watch b { color: var(--trp-warning-dark); }
.ts-chip.ts-red b { color: var(--trp-danger-dark); }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--trp-space-xs); }
.ts-panel { display: grid; gap: var(--trp-space-md); }
.ts-head { display: flex; align-items: center; gap: var(--trp-space-md); }
.ts-big { display: flex; align-items: baseline; gap: 4px; padding: var(--trp-space-sm) var(--trp-space-md); border-radius: var(--trp-radius-md); background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); }
.ts-big b { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ts-big span { font-size: var(--trp-font-size-sm); color: var(--trp-text-muted); }
.ts-big.ts-ok b { color: var(--trp-success-dark); }
.ts-big.ts-watch b { color: var(--trp-warning-dark); }
.ts-big.ts-red b { color: var(--trp-danger-dark); }
.ts-title { font-weight: var(--trp-font-weight-semibold); }
.ts-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--trp-font-size-sm); color: var(--trp-text-muted); }
.ts-label { padding: 1px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: var(--trp-font-weight-semibold); background-color: var(--trp-bg-alt); color: var(--trp-text-muted); }
.ts-label.ts-ok { background-color: var(--trp-success-light); color: var(--trp-success-dark); }
.ts-label.ts-watch { background-color: var(--trp-warning-light); color: var(--trp-warning-dark); }
.ts-label.ts-red { background-color: var(--trp-danger-light); color: var(--trp-danger-dark); }
.ts-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ts-bars li { display: grid; grid-template-columns: 7.5rem 1fr 4.5rem; align-items: center; gap: var(--trp-space-sm); font-size: var(--trp-font-size-sm); }
.ts-bar-track { height: 8px; border-radius: 9999px; background-color: var(--trp-bg-alt); overflow: hidden; }
.ts-bar-fill { display: block; height: 100%; width: var(--w); background-color: var(--trp-accent); }
.ts-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--trp-text-muted); }
.ts-plat { width: 100%; border-collapse: collapse; font-size: var(--trp-font-size-sm); }
.ts-plat th, .ts-plat td { padding: 4px 6px; border-bottom: 1px solid var(--trp-border-light); text-align: left; }
.ts-plat .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-flags { margin: 0; padding-left: 1.1rem; font-size: var(--trp-font-size-sm); display: grid; gap: 4px; }
.ts-flags li.ts-red { color: var(--trp-danger-dark); }
.ts-flags li.ts-watch { color: var(--trp-warning-dark); }
.ts-more { font-size: var(--trp-font-size-sm); color: var(--trp-text-muted); }
.ts-fits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--trp-space-sm); }
.ts-fit-tile { padding: var(--trp-space-sm); border-radius: var(--trp-radius-md); background-color: var(--trp-bg-alt); border: 1px solid var(--trp-border-light); }
.ts-fit-tile b { display: block; font-size: var(--trp-font-size-lg); font-variant-numeric: tabular-nums; }
.ts-fit-tile span { display: block; font-size: 0.68rem; font-weight: var(--trp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--trp-text-muted); }
.ts-fit-tile small { color: var(--trp-text-muted); }
.ts-none b { color: var(--trp-text-muted); }

/* THERARE: brand visibility control on the admin card */
.ts-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ts-vis-state { font-size: 13px; font-weight: 600; margin-right: auto; }
.ts-vis-state.ts-red { color: var(--trp-danger, #b42318); }
.ts-vis-state.ts-ok { color: var(--trp-text-secondary, #555); }
.ts-vis .trp-select { width: auto; min-width: 200px; }
.ts-hidden-mark { color: var(--trp-danger, #b42318); font-size: 12px; margin-left: 6px; white-space: nowrap; }

/* creator matching (services/matching.py) */
.mt-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mt-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mt-inline .trp-select { width: auto; }
.mt-shortlist { width: 100%; font-family: var(--trp-font-mono, monospace); font-size: 13px; margin: 8px 0; }
.mt-deal { border-top: 1px solid var(--trp-border-light); padding: 12px 0; }
.mt-deal:first-child { border-top: 0; }
.mt-deal-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.mt-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mt-pick { border: 1px solid var(--trp-border-light); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.mt-pick b { font-size: 15px; margin-right: 4px; }

/* client portal: THERARE Score of a booked creator (no flag) */
.cp-score { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--trp-font-size-sm); color: var(--trp-text-secondary); }
.cp-score b { color: var(--trp-text-primary); font-size: 15px; }

/* content niches on the admin card (services/content_niches.py) */
.ts-niches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.ts-niches .trp-hint { flex-basis: 100%; margin: 0; }