/* ============================================================
   brand.css — whitelabel: the brand as it lands on the shell, plus the
   Team · Brand page (editor + live preview + roster). Loaded last.
   Reuses the app's tokens and the adm-* card idiom; the tm-*/pv-* layer
   is this page's own. The brand accent is a runtime CSS var (--accent),
   so every existing accent use follows the agency's colour for free;
   --accent-text is the readable ink on a solid accent fill.
   ============================================================ */

/* ---- the brand on the shell ---- */
.app-wordmark--logo { height: 22px; max-width: 150px; width: auto; object-fit: contain; }
.app-wordmark-text { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.auth-logo .brand-mark img.brand-mark__logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }
.auth-logo .brand-mark:has(img) { filter: none; }
.powered-by { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); padding: 6px 10px 0; }
.powered-by b { font-weight: 500; color: var(--text-3); }
.brand-help { align-self: flex-start; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 4px 10px; border: 1px solid var(--hairline); border-radius: var(--r-pill); text-decoration: none; transition: color .15s var(--ease), border-color .15s var(--ease); }
.brand-help:hover { color: var(--text); border-color: var(--hairline-strong); }
@media (max-width: 820px) { .powered-by { display: none; } }

/* Ink on solid accent fills follows the accent's luminance (a pale agency colour
   must not carry white text). Only the rules that hardcoded #fff / var(--bg). */
.btn-send, .tp-ctrl.on, .tp-play, .tx-line.rep, .nb-source.src-live, .auth-seg-btn.is-active { color: var(--accent-text, var(--on-accent, #fff)); }
.auth-seg-thumb { box-shadow: 0 5px 18px -5px color-mix(in oklab, var(--accent) 60%, transparent); }

/* ---- page ---- */
.page-title em { font-style: italic; color: var(--accent); }
.brand-page { display: flex; flex-direction: column; gap: 22px; }
.brand-page .adm-stat { min-width: 0; }
.brand-page .adm-stat__v { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); }
@media (max-width: 480px) { .team .adm-stats { grid-template-columns: 1fr; } }
.tm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 18px; align-items: start; }
.tm-preview { position: sticky; top: 0; }
@media (max-width: 1080px) { .tm-grid { grid-template-columns: 1fr; } .tm-preview { position: static; } }

/* ---- editor ---- */
.tm-editor { display: flex; flex-direction: column; gap: 16px; }
.tm-gap { margin-top: 10px; }
.tm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .tm-row2 { grid-template-columns: 1fr; } }
.tm-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tm-field__l { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.tm-field__h { font-size: 0.76rem; color: var(--text-3); line-height: 1.4; }
.tm-editor .text-input { box-shadow: none; }
.tm-editor .text-input:focus { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.tm-editor .text-input:disabled { opacity: 0.55; cursor: not-allowed; }

.tm-accent { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); cursor: pointer; transition: transform .15s var(--ease), border-color .15s var(--ease); }
.tm-swatch:hover { transform: scale(1.12); }
.tm-swatch.is-on { border-color: var(--text); transform: scale(1.12); }
.tm-swatch:disabled { cursor: not-allowed; opacity: 0.5; }
.tm-swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tm-accent__free { display: inline-flex; align-items: center; gap: 8px; }
.tm-well { width: 36px; height: 36px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--card-solid); cursor: pointer; }
.tm-well::-webkit-color-swatch-wrapper { padding: 3px; }
.tm-well::-webkit-color-swatch { border: 0; border-radius: 6px; }
.tm-hex { width: 104px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: lowercase; }

.tm-logo { display: flex; align-items: center; gap: 16px; }
.tm-logo__thumb { width: 96px; height: 64px; display: grid; place-items: center; border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); background: repeating-conic-gradient(rgba(245,245,247,0.05) 0 25%, transparent 0 50%) 0 0 / 14px 14px; overflow: hidden; flex: none; }
.tm-logo__thumb img { max-width: 84px; max-height: 52px; object-fit: contain; }
.tm-logo__empty { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); }
.tm-logo__acts { display: flex; flex-wrap: wrap; gap: 8px; }

.tm-slugrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-slugrow__pre { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); white-space: nowrap; }
.tm-slug { flex: 1 1 140px; min-width: 0; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.tm-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--fill-subtle); margin-top: -6px; }
.tm-link__url { flex: 1 1 200px; min-width: 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-powered { padding: 6px 0; }
.tm-powered.is-locked { color: var(--text-3); }
.tm-plan-note { font-style: normal; color: var(--text-4); }
.tm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--hairline); margin-top: 6px; }
.tm-actions .btn-primary.is-dirty { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent), 0 14px 24px -14px rgba(0,0,0,0.7); }
.tm-locked { font-size: 0.78rem; color: var(--text-3); }

/* ---- live preview — a miniature of the rail + the sign-in card ---- */
.pv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pv-head .adm-section__h { margin-bottom: 0; }
.pv-head__tab { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pv-stage { --pv-bg: #0f1011; --pv-ink: #f5f7f8; --pv-ink-2: #9fa1a3; --pv-ink-3: #6a6b6b; --pv-line: rgba(245,245,247,0.09);
  position: relative; margin-top: 14px; display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 14px; border-radius: var(--r-xl); background: var(--pv-bg); border: 1px solid var(--hairline); overflow: hidden; min-height: 250px; }
.pv-stage::before { content: ""; position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(40% 40% at 25% 20%, color-mix(in oklab, var(--pv-accent) 26%, transparent), transparent 62%), radial-gradient(40% 40% at 80% 85%, rgba(132,125,255,0.16), transparent 62%); filter: blur(24px); }
.pv-stage > * { position: relative; }
.pv-rail { display: flex; flex-direction: column; gap: 10px; padding: 10px 8px; border-right: 1px solid var(--pv-line); }
.pv-rail__brand { min-height: 18px; display: flex; align-items: center; padding: 0 6px 6px; }
.pv-rail__logo { height: 16px; max-width: 96px; object-fit: contain; }
.pv-rail__name { font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; letter-spacing: -0.02em; color: var(--pv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.pv-rail__item { position: relative; font-size: 0.64rem; color: var(--pv-ink-2); padding: 5px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-rail__item.is-active { color: var(--pv-ink); background: rgba(245,245,247,0.06); }
.pv-rail__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 12px; border-radius: 2px; background: var(--pv-accent); }
.pv-rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 0; border-top: 1px solid var(--pv-line); }
.pv-rail__live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--pv-ink-2); }
.pv-rail__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pv-accent); box-shadow: 0 0 6px var(--pv-accent); animation: pv-pulse 1.8s ease-in-out infinite; }
@keyframes pv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pv-powered { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-ink-3); }

.pv-card { align-self: center; justify-self: center; width: min(100%, 210px); padding: 14px; border-radius: 12px; background: rgba(12,13,16,0.9); border: 1px solid var(--pv-line); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.8); display: flex; flex-direction: column; gap: 8px; }
.pv-card__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pv-ring { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--pv-accent); border-right-color: transparent; transform: rotate(-45deg); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--pv-accent) 55%, transparent)); flex: none; }
.pv-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; flex: none; }
.pv-card__text { display: flex; flex-direction: column; min-width: 0; }
.pv-card__text b { font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; letter-spacing: -0.02em; color: var(--pv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-card__text small { font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.2em; color: var(--pv-ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 99px; background: rgba(245,245,247,0.06); }
.pv-seg span { font-size: 0.56rem; text-align: center; padding: 4px 0; color: var(--pv-ink-2); border-radius: 99px; }
.pv-seg span.is-on { background: var(--pv-accent); color: var(--pv-accent-text); font-weight: 600; }
.pv-input { height: 20px; border-radius: 6px; background: rgba(245,245,247,0.05); border: 1px solid var(--pv-line); }
.pv-btn { margin-top: 2px; text-align: center; font-size: 0.6rem; font-weight: 600; padding: 6px; border-radius: 7px; background: #fff; color: #0c0d10; }
.pv-foot { font-size: 0.5rem; color: var(--pv-ink-3); text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-note { font-size: 0.76rem; color: var(--text-3); margin-top: 12px; line-height: 1.45; }
@media (max-width: 480px) { .pv-stage { grid-template-columns: 1fr; } .pv-rail { display: none; } }

/* ---- activity ---- */
.tm-act { display: flex; flex-direction: column; gap: 16px; }
.tm-act__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-act__head .adm-section__h { margin-bottom: 4px; }
.tm-act__sub { font-size: 0.78rem; color: var(--text-3); }
.tm-act__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tm-act__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px; }
.tm-chart { min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--hairline); border-radius: var(--r-xl); background: var(--card-2); }
.tm-chart__h { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
@media (max-width: 1100px) { .tm-act__grid { grid-template-columns: 1fr 1fr; } .tm-chart--reps { grid-column: 1 / -1; } }
@media (max-width: 860px) { .tm-act__tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tm-act__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tm-act__tiles { grid-template-columns: 1fr; } }

/* ---- members ---- */
.tm-members__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-members__hint { font-size: 0.76rem; color: var(--text-3); }
.tm-invite { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 1fr) 130px auto; gap: 8px; margin: 4px 0 16px; }
@media (max-width: 720px) { .tm-invite { grid-template-columns: 1fr 1fr; } }
.tm-select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239fa1a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; cursor: pointer; }
.tm-select--row { width: auto; min-width: 120px; padding: 6px 30px 6px 10px; font-size: 0.78rem; }
.tm-mrow { grid-template-columns: minmax(180px, 1.6fr) 140px minmax(120px, 1fr) 70px 50px 84px auto; }
.tm-mrow.is-off .adm-rep__name { color: var(--text-3); text-decoration: line-through; }
.tm-status { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tm-status.is-on { color: var(--accent); }
.tm-status.is-off { color: var(--text-4); }
.tm-deact { padding: 6px 10px; font-size: 0.76rem; }
/* appshell.css collapses adm-rows to 3 columns ≤860px (admin portal's 7-col table)
   and hides children 4–7; the roster has 7 of its own — restate them per breakpoint. */
@media (max-width: 1100px) { .tm-mrow { grid-template-columns: minmax(160px, 1.6fr) 130px minmax(110px, 1fr) 60px auto; } .tm-mrow > :nth-child(5), .tm-mrow > :nth-child(6) { display: none; } }
@media (max-width: 860px) { .tm-mrow { grid-template-columns: minmax(150px, 1.6fr) 130px 1fr auto; } .tm-mrow > :nth-child(4), .tm-mrow > :nth-child(5), .tm-mrow > :nth-child(6) { display: none; } .tm-mrow > :nth-child(7) { display: inline-flex; } }
@media (max-width: 640px) { .tm-mrow { grid-template-columns: 1fr auto auto; } .tm-mrow > :nth-child(3), .tm-mrow > :nth-child(4), .tm-mrow > :nth-child(5), .tm-mrow > :nth-child(6) { display: none; } .tm-mrow > :nth-child(7) { display: inline-flex; } .adm-row--head.tm-mrow > :nth-child(7) { display: none; } }