/*
 * TextGopher dashboard. Mobile-first, no build step.
 *
 * ONE SEMANTIC TOKEN LAYER (Slice 1). The landing page is the brand source:
 * TextGopher orange #e94d00, warm white and cream surfaces, charcoal nav,
 * fine borders, rounded geometry. Every status color below carries a fixed
 * meaning across the Business Dashboard AND the Admin Control Center:
 *
 *   orange : human action needed, assignment needed, primary action
 *   red    : critical failure, true urgency, expired commitment, danger
 *   blue   : TextGopher(TM) working, system processing, gathering info
 *   green  : ready, delivered, successful, completed, healthy
 *   gray   : waiting, neutral, historical, paused, closed
 *
 * Never communicate state with color alone; every colored chip or badge
 * carries text. The legacy warm-earth names (clay/sage/brick/gold) are kept
 * as ALIASES into this layer so no existing page breaks.
 */

:root {
  /* brand + semantic status colors (single source of truth) */
  --tg-orange: #e94d00;        /* landing-page accent: fills, selection */
  --tg-orange-dark: #c14100;   /* AA text-on-light + hover */
  --tg-orange-deep: #9a3500;   /* pressed / strong emphasis */
  --tg-orange-soft: #fdeee3;   /* tint fills */
  --tg-red: #b42318;           /* critical / urgent / dangerous */
  --tg-red-dark: #9a1c12;
  --tg-red-soft: #fcebe9;
  --tg-amber: #a45a00;         /* attention soon / waiting on time */
  --tg-amber-soft: #f9f0dd;
  --tg-green: #1f7a4d;         /* ready / delivered / healthy */
  --tg-green-soft: #e5f4ec;
  --tg-blue: #2456d6;          /* TextGopher(TM) working / processing */
  --tg-blue-soft: #ecf1ff;

  /* shared neutral scale: ONE chrome for Business AND Admin surfaces */
  --tg-ink: #1d1d1f;           /* near-black text */
  --tg-ink-2: #424245;
  --tg-muted: #6e6e73;         /* secondary text */
  --tg-faint: #86868b;         /* tertiary text */
  --tg-line: #e6e6ea;          /* hairline */
  --tg-line-2: #d6d6db;
  --tg-card: #ffffff;
  --tg-page: #f5f5f7;          /* subtle premium canvas */
  --tg-side: #1a1a1c;          /* charcoal chrome (sidebar + admin bar) */
  --tg-side-hover: #2a2a2d;
  --tg-side-line: #37373a;
  --tg-side-ink: #d6d6db;
  --tg-side-dim: #86868b;
  --tg-r: 18px;
  --tg-r-sm: 12px;
  --tg-sh: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 26px rgba(0, 0, 0, .05);

  /* warm surfaces (classic shell; cream + charcoal per the landing page) */
  --sand: #f5efe4;      /* page background */
  --paper: #fffcf6;     /* cards */
  --line: #e6dcc9;      /* hairlines */
  --loam: #2b2118;      /* ink */
  --bark: #7a6a55;      /* muted text */

  /* legacy aliases: old names resolve into the semantic layer above */
  --clay: var(--tg-orange-dark);      /* brand */
  --clay-dark: var(--tg-orange-deep); /* brand hover / emphasis */
  --clay-soft: var(--tg-orange-soft); /* brand tint fills */
  --sage: var(--tg-green);            /* good news */
  --sage-soft: var(--tg-green-soft);
  --brick: var(--tg-red);             /* urgent / errors */
  --brick-soft: var(--tg-red-soft);
  --gold: var(--tg-amber);            /* warnings */
  --gold-soft: var(--tg-amber-soft);

  --radius: 10px;
  --shadow: 0 1px 2px rgba(43, 33, 24, 0.06), 0 4px 14px rgba(43, 33, 24, 0.05);
}

/* --- shared accessibility utilities ------------------------------------- */

/* Screen-reader-only text: state carried by more than color. */
.tg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element on every authenticated page. */
.tg-skip {
  position: absolute;
  left: 0.75rem; top: -3rem;
  z-index: 100;
  background: var(--loam);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.tg-skip:focus-visible { top: 0.75rem; outline: 2px solid var(--tg-orange); outline-offset: 2px; }
#tg-main:focus { outline: none; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  color: var(--loam);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2 { font-family: "Avenir Next", Avenir, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; }

a { color: var(--clay-dark); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* Strong, consistent keyboard focus in the app shell and on dark chrome. */
.tg-app :focus-visible { outline: 2px solid var(--tg-orange-dark); outline-offset: 2px; }
.tg-sidebar :focus-visible,
.admin-console .topbar :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- top bar --- */

.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: "Avenir Next", Avenir, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--loam);
  text-decoration: none;
}
.wordmark span { color: var(--clay); }
.wordmark span::after { content: "."; color: var(--sage); }
.wordmark-tm {
  font-size: 0.5em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.05em;
}

/* Brand lockup: the actual TextGopher horizontal logo (mark + wordmark).
   Dark variant on the admin bar, light variant on the client dashboard -
   the src is chosen in _header.ejs. */
.brandmark { display: inline-flex; align-items: center; text-decoration: none; }
.brandmark__img { display: block; height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; }
.nav a {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: var(--bark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.nav a.on { background: var(--clay-soft); color: var(--clay-dark); }
.nav a:hover { color: var(--clay-dark); }

/* Session cluster - pinned right of the scrollable nav; NEVER clipped. */
.topbar-session { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.whoami {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 9px;
  background: var(--clay-soft, #f6ede0); border-radius: 999px;
  font-size: 0.78rem; line-height: 1.2; white-space: nowrap;
}
.whoami__dot { width: 7px; height: 7px; border-radius: 50%; background: #3f9d63; flex: none; }
.whoami__name { font-weight: 700; color: var(--ink, #241c12); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.whoami__role { color: var(--muted, #7a6a55); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.whoami__role::before { content: '·'; margin-right: 7px; color: var(--line, #d9cdb8); }
@media (max-width: 1100px) { .whoami__role { display: none; } }
@media (max-width: 860px) { .whoami__name { max-width: 90px; } }
/* the nav scrolls; the session cluster and Sign out do not */
.admin-console .whoami { background: rgba(255, 255, 255, 0.1); }
.admin-console .whoami__name { color: #fff; }
.admin-console .whoami__role { color: var(--tg-side-dim); }
.admin-console .whoami__role::before { color: var(--tg-side-line); }

/* Post-sign-out confirmation on the login card. */
.tgauth__signedout {
  margin: 0 0 14px; padding: 9px 14px; border-radius: 8px;
  background: #e8f0e8; color: #3f6f4f; font-size: 0.88rem; font-weight: 600;
}

.nav-logout {
  margin-left: 0.35rem;
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--bark);
  cursor: pointer;
}
.nav-logout:hover { color: var(--brick); border-color: var(--brick); }

/* --- page frame --- */

.page {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.back { text-decoration: none; font-weight: 600; }

.footer {
  border-top: 1px solid var(--line);
  color: var(--bark);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}

.sub { color: var(--bark); margin: 0.25rem 0 1rem; font-size: 0.95rem; }

.live-dot { color: var(--sage); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.live-dot::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--sage);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- cards --- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.empty { color: var(--bark); text-align: center; padding: 2rem 1rem; }

/* --- chips (pipeline filter + status picker) --- */

.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 0.75rem; }

.chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--bark);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip.on { background: var(--loam); border-color: var(--loam); color: var(--sand); }
.chip.on .chip-n { color: var(--sand); opacity: 0.75; }
.chip-n { color: var(--bark); font-weight: 500; }

/* --- lead feed --- */

.feed { display: flex; flex-direction: column; gap: 0.6rem; }

.lead-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--clay);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.8rem 0.9rem;
  color: inherit;
  text-decoration: none;
}
.lead-card:hover { border-left-color: var(--clay-dark); }

.lead-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.lead-name { font-weight: 700; }
.lead-time { color: var(--bark); font-size: 0.82rem; white-space: nowrap; }
.lead-phone { color: var(--bark); font-size: 0.9rem; }
.lead-problem { margin-top: 0.3rem; font-size: 0.95rem; }
.lead-badges { display: flex; gap: 0.35rem; margin-top: 0.55rem; flex-wrap: wrap; }
.lead-call { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

.badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  background: var(--sand);
  color: var(--bark);
  white-space: nowrap;
}
.badge-new { background: var(--clay-soft); color: var(--clay-dark); }
.badge-qualified { background: var(--sage-soft); color: var(--sage); }
.badge-contacted { background: var(--gold-soft); color: var(--gold); }
.badge-won { background: var(--sage); color: #fff; }
.badge-lost { background: var(--line); color: var(--bark); }
.badge-urgent { background: var(--brick-soft); color: var(--brick); }
.badge-ok { background: var(--sage-soft); color: var(--sage); }
.badge-dim { background: var(--sand); color: var(--bark); }
.badge-active { background: var(--sage-soft); color: var(--sage); }
.badge-provisioning, .badge-pending { background: var(--gold-soft); color: var(--gold); }
.badge-past_due, .badge-suspended, .badge-canceled { background: var(--brick-soft); color: var(--brick); }

.lead-sub { color: var(--bark); font-size: 0.88rem; margin-top: 0.15rem; }

/* Heat seeker: grade caller intent, colorized, hottest first. */
.heat-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.08em;
}
.heat-hot { background: var(--brick); color: #fff; }
.heat-warm { background: var(--gold); color: #fff; }
.heat-cold { background: #7c93b4; color: #fff; }
.heat-new { background: var(--line); color: var(--bark); }
/* Left edge of the card echoes the grade so a scan reads top-to-bottom. */
.lead-card.heat-hot-edge { border-left-color: var(--brick); }
.lead-card.heat-warm-edge { border-left-color: var(--gold); }
.lead-card.heat-cold-edge { border-left-color: #7c93b4; }
.lead-card.heat-new-edge { border-left-color: var(--line); }

.heat-read {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--loam);
  background: var(--sand);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
}
.heat-read-tag {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clay-dark);
  margin-right: 0.35rem;
}

.lead-phone-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; flex-wrap: wrap; }
.call-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--clay-dark);
  background: var(--clay-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.call-btn:hover { border-color: var(--clay); }
.lead-loc { color: var(--bark); font-size: 0.85rem; }

.badge-outcome { background: var(--clay-soft); color: var(--clay-dark); }

/* --- one recommended next action (chip + detail banner) --- */

.next-row { margin-top: 0.5rem; }

.next-chip {
  display: inline-block;
  background: var(--clay-soft);
  color: var(--clay-dark);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.next-chip.urgent { background: var(--brick); color: #fff; }

.next-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--clay);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.next-banner.urgent { border-left-color: var(--brick); }
.next-call { font-weight: 700; white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.pager-label { color: var(--bark); font-size: 0.88rem; }

/* --- lead detail --- */

.fields { display: grid; gap: 0.45rem; margin-top: 0.75rem; }
.field { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; font-size: 0.95rem; }
.field-label { color: var(--bark); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.1rem; }
.error-text { color: var(--brick); }

/* --- inline field correction (strategy section 11) --- */
.field.editable .field-view { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.field-text { min-width: 0; word-break: break-word; }
.field-text.muted { color: var(--bark); font-style: italic; }
.field-edit {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--clay-dark);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
}
.field-edit:hover { color: var(--clay); }
.corrected-tag {
  background: var(--sage-soft);
  color: var(--sage);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
}
.field-edit-box { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.field-edit-box input, .field-edit-box select { width: auto; flex: 1 1 8rem; padding: 0.35rem 0.5rem; font-size: 0.95rem; }
.btn-sm { margin-top: 0; padding: 0.35rem 0.6rem; font-size: 0.85rem; }

/* --- contractor-facing lead history (plain audit timeline) --- */
.history {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.6rem 0.9rem;
  margin-top: 1.25rem;
}
.history > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.history > summary::-webkit-details-marker { display: none; }
.history > summary::before { content: '\25B8'; color: var(--bark); font-size: 0.8rem; }
.history[open] > summary::before { content: '\25BE'; }
.history-title { font-weight: 700; font-family: "Avenir Next", Avenir, sans-serif; }
.history-hint { color: var(--bark); font-size: 0.85rem; }
.history-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.history-actor {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clay-dark);
}
.history-action { color: var(--loam); }
.history-at { color: var(--bark); font-size: 0.82rem; white-space: nowrap; text-align: right; }

.status-row { display: flex; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap; }
.status-chip { text-transform: none; }

/* --- conversation thread (SMS style) --- */

.thread-title { margin: 1.25rem 0 0.5rem; }

.thread {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 65vh;
  overflow-y: auto;
}

.msg { max-width: 82%; display: flex; flex-direction: column; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }

.bubble {
  padding: 0.55rem 0.8rem;
  border-radius: 16px;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.in .bubble { background: var(--sand); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.out .bubble { background: var(--clay); color: #fff; border-bottom-right-radius: 4px; }

.msg-meta { color: var(--bark); font-size: 0.72rem; margin-top: 0.2rem; padding: 0 0.25rem; }

/* --- outcome capture ("What happened with this job?") --- */

.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin-top: 0.25rem; }

.outcome-btn {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--loam);
  border-radius: 8px;
  padding: 0.55rem 0.4rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.outcome-btn:hover { border-color: var(--bark); }
.outcome-btn.on { background: var(--clay); border-color: var(--clay); color: #fff; }

.outcome-values { border-top: 1px solid var(--line); margin-top: 0.9rem; }
.outcome-values[hidden] { display: none; }

.money-wrap { display: flex; align-items: center; gap: 0.4rem; }
.money-sign { color: var(--bark); font-weight: 700; }

.outcome-actions { display: flex; gap: 0.6rem; align-items: center; }
.outcome-done .fields { margin: 0.6rem 0 0.25rem; }

/* --- manual take-over + reply box --- */

.takeover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.takeover-row .btn { margin-top: 0; }

.reply-hint { color: var(--bark); font-size: 0.9rem; margin: 0; }

.reply-box { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.6rem; }
.reply-box textarea { flex: 1; resize: none; }
.reply-box .btn { margin-top: 0; }

.msg-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; }

/* --- MMS photos in the transcript (authenticated proxy) --- */

.msg-photo {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  margin-top: 0.4rem;
  border: 1px solid var(--line);
}

/* --- team assignment --- */

.assign-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.assign-row label { margin: 0; }
.assign-empty { color: var(--muted, #6b7280); font-size: 0.9rem; }
.assign-empty a { color: inherit; text-decoration: underline; }
.badge-assigned { background: var(--gold-soft); color: var(--gold); }

.team-list { margin-top: 0.4rem; }
.team-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.team-row:last-child { border-bottom: none; }
.team-name { font-weight: 600; }
.team-email { color: var(--bark); font-size: 0.9rem; flex: 1; }
.field-hint { color: var(--bark); font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }

.invite-link {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  margin-top: 0.75rem;
  overflow-wrap: anywhere;
}
.invite-link code { user-select: all; }

/* --- Opportunity Record: the scannable decision summary at the top of a lead --- */
.opp-record {
  margin: 0.9rem 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  overflow: hidden;
}
.opp-record--urgent { border-color: #e3b7ae; }
.opp-record-h {
  margin: 0; padding: 0.55rem 0.9rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bark); background: var(--paper); border-bottom: 1px solid var(--line);
}
.opp-record-rows { margin: 0; padding: 0; }
.opp-record-row {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.35rem 1rem;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); align-items: baseline;
}
.opp-record-row:last-child { border-bottom: 0; }
.opp-record-row dt {
  margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--bark);
}
.opp-record-row dd { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.opp-record-val { color: var(--loam); font-weight: 600; line-height: 1.35; }
.opp-record-sub { font-size: 0.8rem; color: var(--bark); font-weight: 400; line-height: 1.4; }
.opp-record-row--next .opp-record-val { color: var(--clay-dark); font-weight: 700; }
.opp-record--urgent .opp-record-row--why .opp-record-val,
.opp-record--urgent .opp-record-row--when .opp-record-val { color: var(--brick); font-weight: 700; }
.opp-record-ai {
  display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--clay-dark); background: var(--clay-soft); padding: 0.05rem 0.35rem; border-radius: 999px; margin-right: 0.3rem;
  vertical-align: 1px;
}
.opp-record .muted { color: var(--bark); font-weight: 400; }
@media (max-width: 560px) {
  .opp-record-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Safe Start badge (client pages): the governed-authority contract, compact --- */
.safestart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem;
  margin: 0 0 0.75rem; padding: 0.5rem 0.8rem;
  background: var(--sage-soft); border: 1px solid #d5e0cd; border-radius: var(--radius);
  color: var(--loam); font-size: 0.8rem; line-height: 1.4;
}
.safestart__pill {
  flex: none; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; font-size: 0.7rem; color: #fff;
  background: var(--sage); padding: 0.2rem 0.6rem; border-radius: 999px;
}
.safestart__desc { color: var(--bark); }
.safestart__desc strong { color: var(--loam); font-weight: 700; }

/* --- forms --- */

label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0.9rem 0 0.3rem; }
label.check { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; }
label.check input { margin-top: 0.25rem; accent-color: var(--clay); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--loam);
  font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--clay); outline: none; box-shadow: 0 0 0 3px var(--clay-soft); }

.inline-select { width: auto; padding: 0.4rem 0.55rem; font-size: 0.9rem; background: var(--paper); }

.form-grid h2 { margin-top: 1.25rem; }
.form-grid h2:first-child { margin-top: 0; }

.form-error { color: var(--brick); font-size: 0.9rem; margin: 0.75rem 0 0; }

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--loam);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.9rem;
}
.btn:hover { border-color: var(--bark); }
.btn:disabled { opacity: 0.55; cursor: default; }

/* Primary action: the same brand orange on every surface, Business or Admin. */
.btn-primary { background: var(--tg-orange); border-color: var(--tg-orange); color: #fff; }
.btn-primary:hover { background: var(--tg-orange-dark); border-color: var(--tg-orange-dark); }

.btn-block { width: 100%; }

/* --- auth pages --- */

.auth-card {
  max-width: 380px;
  margin: 8vh auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-top: 4px solid var(--clay);
}
.auth-alt { text-align: center; font-size: 0.9rem; margin-top: 1.1rem; }

/* --- usage --- */

.usage-period { color: var(--bark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.usage-big { font-size: 2.2rem; font-weight: 800; margin: 0.3rem 0 0.6rem; }
.usage-of { font-size: 1rem; font-weight: 500; color: var(--bark); }

.meter { height: 12px; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--sage); border-radius: 999px; transition: width 0.4s ease; }
.meter-fill.meter-warn { background: var(--gold); }
.meter-fill.meter-full { background: var(--brick); }

.usage-note { color: var(--bark); font-size: 0.92rem; }
.usage-note-warn { color: var(--gold); font-weight: 600; }
.usage-sub { color: var(--bark); font-size: 0.88rem; border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.6rem; }

/* --- onboarding wizard --- */

.steps {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: step;
  overflow-x: auto;
}
.step {
  counter-increment: step;
  color: var(--bark);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.step::before {
  content: counter(step);
  display: inline-block;
  width: 1.3rem; height: 1.3rem;
  line-height: 1.3rem;
  text-align: center;
  border-radius: 50%;
  background: var(--line);
  color: var(--bark);
  margin-right: 0.35rem;
  font-size: 0.75rem;
}
.step.on { color: var(--clay-dark); background: var(--clay-soft); }
.step.on::before { background: var(--clay); color: #fff; }
.step.done { color: var(--sage); }
.step.done::before { content: "\2713"; background: var(--sage); color: #fff; }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
.wizard-nav span { display: flex; gap: 0.6rem; align-items: center; }
.wizard-nav .btn { margin-top: 0; }

/* --- control choices (respond mode, automation level) --- */

.choice-list { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.choice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  font-weight: 400;
}
.choice input { margin-top: 0.25rem; accent-color: var(--clay); }
.choice.selected { border-color: var(--clay); background: var(--clay-soft); }
.choice.locked { opacity: 0.55; cursor: not-allowed; }
.choice-title { font-weight: 700; display: block; }
.choice-desc { color: var(--bark); font-size: 0.9rem; }
.choice-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bark);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.hours-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }
.hours-row label { margin: 0; }
.hours-row select { width: auto; }

.number-card {
  margin-top: 1.1rem;
  background: var(--sand);
  border: 1px dashed var(--clay);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.15rem;
}
.number-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bark); }
.number-value { font-size: 1.4rem; font-weight: 800; color: var(--clay-dark); }
.number-hint { font-size: 0.85rem; color: var(--bark); }

.carrier-steps { margin-top: 0.75rem; }
.dial-steps { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.dial {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  font-size: 0.95rem;
  user-select: all;
}
.dial-off { color: var(--bark); font-size: 0.88rem; }

.test-box {
  margin-top: 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-size: 0.95rem;
}
.test-result { font-weight: 600; margin: 0.6rem 0 0; }
.test-pass { color: var(--sage); }
.test-fail { color: var(--brick); }

/* --- admin --- */

.table-wrap { overflow-x: auto; padding: 0; }
.table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { color: var(--bark); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.table tr:last-child td { border-bottom: none; }
.rowlink { cursor: pointer; }
.rowlink:hover { background: var(--sand); }

.retry-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.75rem; }
.retry-row .btn { margin-top: 0; }

.action-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }
.action-row .btn { margin-top: 0; }
.btn-danger { border-color: var(--brick); color: var(--brick); }
.btn-danger:hover { background: var(--brick); border-color: var(--brick); color: #fff; }

/* --- admin metrics --- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem 1rem; margin-top: 0.5rem; }
.stat { display: grid; gap: 0.1rem; }
.stat-label { color: var(--bark); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 1.6rem; font-weight: 800; }
.stat-sub { color: var(--bark); font-size: 0.8rem; }

/* --- admin overview (the Control Center front door, Slice 2) --- */

.ov-updated { display: inline-block; min-width: 12ch; text-align: right; }
.ov-tile { text-decoration: none; color: inherit; border-radius: 8px; padding: 0.4rem 0.5rem; margin: -0.4rem -0.5rem; }
.ov-tile:hover { background: #fafafa; }
.ov-tile .stat-value { color: var(--loam); }

.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--line); }
.ov-item:last-child { border-bottom: none; }
.ov-item__sev { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.ov-item__sev svg { width: 13px; height: 13px; }
.ov-item__main { min-width: 0; flex: 1; }
.ov-item__title { font-weight: 600; }
.ov-item__biz { color: var(--bark); font-size: 0.88rem; margin-top: 0.15rem; }
.ov-item__biz a { color: var(--clay-dark); font-weight: 600; }
.ov-item__action { margin-top: 0; flex: none; white-space: nowrap; }

.ov-healthy { text-align: center; padding: 1.5rem 1rem; color: var(--bark); }
.ov-healthy svg { width: 34px; height: 34px; color: var(--tg-green); }
.ov-healthy h3 { margin: 0.5rem 0 0.3rem; color: var(--loam); font-size: 1.05rem; }
.ov-healthy p { margin: 0 0 0.5rem; }
.ov-healthy a { font-weight: 700; }

.ov-biz { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ov-biz:last-child { border-bottom: none; }
.ov-biz__name { font-weight: 700; color: var(--loam); text-decoration: none; }
.ov-biz__name:hover { text-decoration: underline; }
.ov-biz__reasons { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.ov-quality-sub { color: var(--bark); margin: 0.85rem 0 0.25rem; }
.ov-formulas { margin-top: 0.6rem; }
.ov-formulas summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--clay-dark); }
.ov-formulas dl { margin: 0.6rem 0 0; font-size: 0.9rem; }
.ov-formulas dt { font-weight: 700; margin-top: 0.5rem; }
.ov-formulas dd { margin: 0.1rem 0 0; color: var(--bark); }

.ov-changes { list-style: none; margin: 0; padding: 0; }
.ov-changes li { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ov-changes li:last-child { border-bottom: none; }
.ov-change__what { font-weight: 600; }
.ov-changes a { color: var(--clay-dark); font-weight: 600; }
.ov-change__at { margin-left: auto; color: var(--bark); font-size: 0.85rem; white-space: nowrap; }

.ov-footlinks { display: flex; gap: 1.25rem; justify-content: center; padding: 0.5rem 0 0; font-weight: 700; }

.ov-fail { text-align: center; padding: 1.25rem 1rem; color: var(--bark); }
.ov-fail p { margin: 0 0 0.35rem; }
.ov-fail .btn { margin-top: 0.6rem; }

@media (max-width: 640px) {
  .ov-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .ov-item__action { width: 100%; text-align: center; white-space: normal; }
  .ov-change__at { margin-left: 0; }
}

/* --- view-as (read-only impersonation) banner --- */

.viewas-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--gold-soft);
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
}
.viewas-bar button {
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--gold);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.viewas-bar button:hover { background: var(--gold); color: #fff; }

/* The operator's OWN account (full read/write) - sage, not the read-only gold. */
.viewas-bar.viewas-own {
  background: var(--sage-soft);
  border-bottom-color: var(--sage);
  color: var(--sage);
}
.viewas-bar.viewas-own button { border-color: var(--sage); color: var(--sage); }
.viewas-bar.viewas-own button:hover { background: var(--sage); color: #fff; }

.switch-row { margin: 0.9rem 0; }
.danger-row input { accent-color: var(--brick); }

/* --- toasts (announced: the container is a polite live region) --- */

.tg-toasts {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 50;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}
.toast {
  background: var(--loam);
  color: var(--sand);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 100%;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--brick); color: #fff; }

/* --- shared confirmation dialog (TG.confirm) ----------------------------
   The one confirmation pattern for the authenticated app: title, plain
   explanation of what will happen, explicit cancel, one confirm action.
   Danger styling is reserved for actions that are hard to undo. */
.tg-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.tg-modal__scrim { position: absolute; inset: 0; background: rgba(24, 18, 12, 0.45); }
.tg-modal__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(24, 18, 12, 0.25);
  padding: 1.4rem 1.5rem 1.25rem;
  width: 100%;
  max-width: 26rem;
}
.tg-modal__card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.tg-modal__card p { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.5; color: var(--bark); }
.tg-modal__scope {
  background: var(--tg-amber-soft);
  color: var(--tg-amber);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
}
.tg-modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.tg-modal__btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--loam);
  border-radius: 9px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tg-modal__btn:hover { border-color: var(--bark); }
.tg-modal__btn--go { background: var(--tg-orange); border-color: var(--tg-orange); color: #fff; }
.tg-modal__btn--go:hover { background: var(--tg-orange-dark); border-color: var(--tg-orange-dark); }
.tg-modal__btn--go.is-danger { background: var(--tg-red); border-color: var(--tg-red); }
.tg-modal__btn--go.is-danger:hover { background: var(--tg-red-dark); border-color: var(--tg-red-dark); }

/* --- wider screens --- */

@media (min-width: 640px) {
  h1 { font-size: 1.7rem; }
  .page { padding: 1.5rem 1.5rem 4rem; }
  .form-grid { max-width: 560px; }
  .msg { max-width: 70%; }
  .outcome-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- dismissable info banner (carrier registration status) --- */

.info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.info-banner-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}

/* --- recovery reporting --- */

.recovery-h3 { margin: 1.4rem 0 0.35rem; font-size: 0.95rem; }

/* --- recorded calls (RecordIt-style panel) --- */

.rec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rec-head h2 { margin: 0; }
.rec-actions { display: flex; align-items: center; gap: 0.5rem; }
.rec-actions .btn { white-space: nowrap; margin-top: 0; text-decoration: none; }
.rec-note { color: var(--bark); font-size: 0.88rem; margin: 0.5rem 0 0.9rem; line-height: 1.4; }
.rec-list { display: flex; flex-direction: column; gap: 0.8rem; }
.rec-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  background: var(--sand);
}
.rec-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.rec-when { color: var(--bark); font-size: 0.85rem; }
.rec-audio { width: 100%; margin: 0.2rem 0 0.5rem; }
.rec-block { margin-top: 0.55rem; }
.rec-block .rec-h {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--clay-dark); margin-bottom: 0.2rem;
}
.rec-block p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.rec-block ul { margin: 0.1rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; line-height: 1.45; }
.rec-todos li { margin-bottom: 0.15rem; }
.rec-analyzing { color: var(--gold); font-size: 0.9rem; font-weight: 600; margin-top: 0.4rem; }
.rec-failed { color: var(--bark); font-size: 0.9rem; margin-top: 0.4rem; }
.rec-transcript { margin-top: 0.6rem; }
.rec-transcript summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--clay-dark); }
.rec-transcript pre {
  white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.9rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.55rem 0.65rem; margin-top: 0.4rem; max-height: 320px; overflow-y: auto;
}

/* --- opportunity card (lead detail) --------------------------------------
   The dashboard twin of the marketing opp-card: kicker + status pill,
   problem headline, tags, dt/dd summary rows, told-us / still-need lists,
   source line, next-action bar, and the Safe Start footnote. */

.opp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.opp-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bark);
}
.opp-status {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--bark);
  white-space: nowrap;
  white-space: nowrap;
}
.opp-status-follow { background: var(--clay-soft); color: var(--clay-dark); border-color: transparent; }
.opp-status-live { background: var(--sage-soft); color: var(--sage); border-color: transparent; }

.opp-headline {
  margin: 0.7rem 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.opp-headline-empty { color: var(--bark); font-style: italic; font-weight: 600; }
.opp-headline .field-edit { vertical-align: middle; }
.opp-headline-edit { margin: 0.7rem 0 0.6rem; }

.opp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.85rem; padding: 0; list-style: none; }
.opp-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  border: 0;
  background: var(--sand);
  color: var(--bark);
}
button.opp-tag { cursor: pointer; font-family: inherit; }
button.opp-tag:hover { background: var(--clay-soft); color: var(--clay-dark); }
.opp-tag-urgent, button.opp-tag-urgent { background: var(--brick-soft); color: var(--brick); }
.opp-tag-editing { display: inline-flex; }
.opp-tags .heat-pill { font-size: 0.7rem; }

.opp-fields { margin: 0 0 0.85rem; padding: 0; }
.opp-fields .field {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.opp-fields dt {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bark);
  padding-top: 0.1rem;
}
.opp-fields dd { margin: 0; font-size: 0.92rem; font-weight: 600; min-width: 0; }

.opp-block { margin: 0 0 0.85rem; }
.opp-block-h {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bark);
}
.opp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.28rem; }
.opp-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.opp-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--sage);
}
.opp-list-missing li::before { background: transparent; border: 1.5px solid var(--bark); top: 0.5em; }
.opp-missing {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--bark);
  cursor: pointer;
  text-align: left;
}
.opp-missing:hover { color: var(--clay-dark); text-decoration: underline; }

.opp-source {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  color: var(--bark);
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line);
}

.opp-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--clay);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  text-decoration: none;
}
a.opp-next:hover { background: var(--clay-dark); }
.opp-next.urgent { background: var(--clay); }
.opp-next-soft { background: var(--sand); }
.opp-next-soft .opp-next-label { color: var(--bark); }
.opp-next-soft .opp-next-value { color: var(--loam); }
.opp-next-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.opp-next-value { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }

.opp-safety {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--bark);
  padding-left: 1.1rem;
  position: relative;
}
.opp-safety::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sage);
  font-weight: 800;
}

.opp-manage { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.opp-manage .status-row { margin-top: 0; }

/* ============================================================
   Sign-in page - branded to match the marketing / landing page.
   Everything is scoped to .tgauth (and body:has(.tgauth)) so no
   other dashboard screen is affected. Brand tokens mirror
   marketing.css: orange #e94d00, cream surfaces, hairline #ece7e1.
   ============================================================ */
body:has(.tgauth) { background: #fbf4ec; }
/* Replace the plain dashboard chrome; .tgauth renders its own branded
   header and footer with the card centered between them. */
body:has(.tgauth) .topbar,
body:has(.tgauth) .footer { display: none; }
body:has(.tgauth) .page { display: block; max-width: none; margin: 0; padding: 0; }

.tgauth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #15171b;
  background:
    radial-gradient(80% 42% at 50% 0%, #fff2e7 0%, rgba(255,242,231,0) 62%),
    #fbf4ec;
}

/* --- branded header --- */
.tgauth-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem clamp(1.15rem, 4vw, 2.5rem);
  border-bottom: 1px solid #ece7e1;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
.tgauth-top .tgauth__word { font-size: 1.2rem; }
.tgauth-top .tgauth__mark > img { width: 30px; }
.tgauth-top__cta {
  display: inline-block; padding: 0.55rem 1rem; border-radius: 0.7rem;
  font-weight: 700; font-size: 0.9rem; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #f2571b 0%, #e94d00 55%, #db4900 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(21,23,27,0.18), 0 2px 6px -1px rgba(21,23,27,0.12);
  transition: filter 0.15s ease;
}
.tgauth-top__cta:hover { filter: brightness(1.05) saturate(1.02); }

/* --- centered card region --- */
.tgauth-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
}
.tgauth__card { width: 100%; max-width: 25rem; }

.tgauth__card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ece7e1;
  border-radius: 1.15rem;
  padding: clamp(1.75rem, 4vw, 2.4rem);
  box-shadow: 0 1px 2px rgba(21,23,27,0.04), 0 18px 44px -20px rgba(21,23,27,0.22);
}
.tgauth__accent {
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #e94d00, #ff7a33);
}

/* Brand lockup: bare gopher (no circle) + wordmark (Gopher in accent). */
.tgauth__brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.tgauth__mark { display: grid; place-items: center; }
.tgauth__mark > img { width: 36px; height: auto; filter: drop-shadow(0 2px 4px rgba(21,23,27,0.14)); }
.tgauth__word { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.tgauth__word em { font-style: normal; color: #e94d00; }
.tgauth__word sup { font-size: 0.5em; font-weight: 600; vertical-align: super; margin-left: 0.05em; }

.tgauth__title { font-family: inherit; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; margin: 1.35rem 0 0.4rem; }
.tgauth__sub { color: #4b5058; font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.6rem; }

.tgauth__field { margin-bottom: 1rem; }
.tgauth .tgauth__field label { display: block; font-weight: 650; font-size: 0.85rem; color: #2b2f36; margin: 0 0 0.4rem; }
.tgauth input[type="email"],
.tgauth input[type="password"] {
  width: 100%;
  padding: 0.72rem 0.85rem;
  border: 1px solid #ded7cf;
  border-radius: 0.7rem;
  background: #fffdfb;
  color: #15171b;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tgauth input:focus {
  outline: none;
  border-color: #e94d00;
  box-shadow: 0 0 0 3px rgba(233,77,0,0.16);
}

.tgauth__check {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0.25rem 0 0.4rem;
  font-size: 0.9rem; color: #4b5058; font-weight: 500; cursor: pointer;
}
.tgauth__check input { width: 1rem; height: 1rem; accent-color: #e94d00; margin: 0; }

.tgauth__error { color: #b42318; font-size: 0.88rem; margin: 0.85rem 0 0; }

.tgauth__btn {
  display: block; width: 100%;
  margin-top: 1.4rem;
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: 0.85rem;
  font: inherit; font-weight: 700; letter-spacing: 0.005em;
  color: #ffffff;
  background: linear-gradient(180deg, #f2571b 0%, #e94d00 55%, #db4900 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(21,23,27,0.18), 0 2px 6px -1px rgba(21,23,27,0.12);
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.tgauth__btn:hover { filter: brightness(1.04) saturate(1.03); }
.tgauth__btn:active { filter: brightness(0.96); }
.tgauth__btn:disabled { opacity: 0.6; cursor: default; filter: none; }

.tgauth__alt { text-align: center; font-size: 0.9rem; margin: 1.15rem 0 0; }
.tgauth__alt a { color: #c94000; font-weight: 650; text-decoration: none; }
.tgauth__alt a:hover { text-decoration: underline; }

/* --- branded footer --- */
.tgauth-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem;
  padding: 1.15rem clamp(1.15rem, 4vw, 2.5rem);
  border-top: 1px solid #ece7e1;
  background: rgba(255,255,255,0.55);
  font-size: 0.82rem; color: #6d727a;
}
.tgauth-bottom__copy { margin: 0; }
.tgauth-bottom__copy em { font-style: normal; }
.tgauth-bottom__nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.tgauth-bottom__nav a { color: #6d727a; text-decoration: none; font-weight: 600; }
.tgauth-bottom__nav a:hover { color: #15171b; }
@media (max-width: 520px) {
  .tgauth-bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SIGNAL brand restyle - auth pages (sign-in / reset). Scoped to .tgauth,
   so the rest of the dashboard is untouched. SF Pro type, cool graphite
   palette, refined flat card, pill buttons.
   ═══════════════════════════════════════════════════════════════════════ */
body:has(.tgauth) {
  background: #f5f7fa;
  color: #0e1116;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tgauth { font-family: inherit; }
.tgauth__word { font-weight: 600; letter-spacing: -0.02em; }
.tgauth-top__cta { border-radius: 999px !important; font-weight: 600; letter-spacing: 0.01em; }
.tgauth__card {
  max-width: 26rem;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 24px 50px -30px rgba(14,17,22,.16);
}
.tgauth__accent { display: none; }
.tgauth__title { font-weight: 600; letter-spacing: -0.025em; }
.tgauth__sub { color: #5a6472; }
.tgauth .tgauth__field label { font-weight: 600; color: #3f4855; letter-spacing: 0.005em; }
.tgauth input[type="email"],
.tgauth input[type="password"] {
  border: 1px solid #d9dee6 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #0e1116 !important;
}
.tgauth input:focus {
  border-color: #e94d00 !important;
  box-shadow: 0 0 0 3px rgba(233,77,0,.14) !important;
  outline: none !important;
}
.tgauth__btn { border-radius: 999px !important; font-weight: 600; letter-spacing: 0.01em; }
.tgauth__alt a, .tgauth__word em { color: #e94d00; }
.tgauth-bottom__nav a:hover { color: #0e1116; }
/* Cool the auth ground (drop the leftover warm band behind the card). */
.tgauth, .tgauth-main { background: transparent !important; }

/* ---- /admin/rules - the layered rules editor ---------------------------- */

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.pill--off      { background: #ececec; color: #777; }
.pill--baseline { background: #e8f0e8; color: #3f6f4f; }
.pill--override { background: #fbedd8; color: #b45309; }
.pill--custom   { background: #e7e9f7; color: #4a52a3; }

.rules-toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.rules-status { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: #3f6f4f; opacity: 0; transition: opacity 0.25s; }
.rules-status.on { opacity: 1; }

.rules-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }

.rule-row { border: 1px solid #ece3d3; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.rule-row--off { opacity: 0.55; }
.rule-row--editing { border-color: #b45309; box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.08); }
@keyframes rule-flash { from { background: #fbedd8; } to { background: #fff; } }
.rule-row--flash { animation: rule-flash 1.2s ease-out; }

.rule-row__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rule-row__meta { display: flex; gap: 6px; align-items: center; }
.rule-row__meta code { font-size: 11px; opacity: 0.6; }
.rule-row__body { margin: 6px 0 10px; white-space: pre-wrap; font-size: 14px; }
.rule-row__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* inline edit form */
.re-grid { display: grid; gap: 10px; margin-top: 10px; }
.re-field { display: grid; gap: 4px; }
.re-field > span { font-size: 0.8rem; font-weight: 600; color: #7a6a55; }
.re-field > span em { font-weight: 400; font-style: normal; opacity: 0.75; }
.re-field input, .re-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px;
  border: 1px solid #d9cdb8; border-radius: 8px; background: #fffdf9;
}
.re-field textarea { resize: vertical; min-height: 68px; line-height: 1.5; overflow: hidden; }
.re-field input:focus, .re-field textarea:focus { outline: 2px solid #b45309; outline-offset: 0; border-color: transparent; }

.re-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 0.82rem; color: #7a6a55; }
.re-tokens { display: inline-flex; gap: 6px; align-items: center; }
.token-btn {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; cursor: pointer;
  border: 1px dashed #b45309; color: #b45309; background: #fbedd8;
  border-radius: 6px; padding: 2px 8px;
}
.token-btn:hover { background: #f6dcb8; }
.re-sort { display: inline-flex; gap: 6px; align-items: center; }
.re-sort input { width: 74px; padding: 4px 8px; border: 1px solid #d9cdb8; border-radius: 6px; font: inherit; }
.char-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.key-hint { font-size: 0.75rem; color: #a89a83; margin-left: 4px; }

/* two-step delete */
.re-del.armed { background: #9a3412; border-color: #9a3412; color: #fff; }

/* pick-and-choose checkbox: checked = following the rule */
.rule-check { display: inline-flex; gap: 9px; align-items: baseline; cursor: pointer; margin: 0; }
.rule-check input { width: 16px; height: 16px; accent-color: #b45309; cursor: pointer; transform: translateY(2px); }
.rule-row--off .rule-check strong { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Tabs linking the two Rules pages - one identity, two surfaces. */
.rules-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.rules-tabs a {
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
  font-size: 0.9rem; font-weight: 600; color: #7a6a55;
  border: 1px solid #ece3d3; background: #fff;
}
.rules-tabs a:hover { color: var(--tg-ink); border-color: var(--tg-line-2); }
.rules-tabs a.on { background: var(--tg-orange); border-color: var(--tg-orange); color: #fff; }
.admin-console .rules-tabs a { background: #fff; border-color: var(--tg-line); color: var(--tg-muted); }
.admin-console .rules-tabs a.on { background: var(--tg-orange); border-color: var(--tg-orange); color: #fff; }

/* ---- /admin/rules/builtin - The Rule Register --------------------------- */

.reg-toolbar { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; }
.reg-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.reg-stat { background: #f6f0e4; border-radius: 999px; padding: 5px 13px; font-size: 0.82rem; color: #7a6a55; }
.reg-stat strong { color: #241c12; font-variant-numeric: tabular-nums; }
.reg-stat--off { background: #fbe3e0; color: #9a3412; }
.reg-stat--off strong { color: #9a3412; }

.reg-group__head { margin-bottom: 6px; }
.reg-group__head h2 { margin: 0; }
.reg-group__head .sub { margin: 2px 0 0; }

.reg-sec { margin: 22px 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #a08b6d; }
.reg-sec__n { font-weight: 500; color: #c4b39a; margin-left: 4px; }

.reg-rule { border: 1px solid #ece3d3; border-radius: 10px; background: #fff; margin-bottom: 6px; transition: border-color 0.15s; }
.reg-rule--open { border-color: #d9c6a6; box-shadow: 0 1px 6px rgba(60, 42, 15, 0.05); }
.reg-rule--off .reg-rule__title { text-decoration: line-through; text-decoration-thickness: 1px; color: #a89a83; }
.reg-rule--off { background: #fbf8f2; }

.reg-rule__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.reg-rule__ctl { flex: none; width: 20px; display: grid; place-items: center; }
.reg-rule__ctl input { width: 16px; height: 16px; accent-color: #b45309; cursor: pointer; }
.reg-lock { font-size: 13px; opacity: 0.65; cursor: help; }

.reg-rule__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.reg-rule__title { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.reg-rule__preview { font-size: 0.8rem; color: #a08b6d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reg-rule__meta { flex: none; display: flex; gap: 6px; align-items: center; }
.reg-rule__chev { color: #c4b39a; font-size: 1.1rem; transition: transform 0.15s; margin-left: 2px; }
.reg-rule--open .reg-rule__chev { transform: rotate(90deg); }

.reg-rule__body { border-top: 1px solid #f1e8d8; padding: 14px 18px 16px 46px; max-width: 74ch; font-size: 0.9rem; line-height: 1.65; color: #43382a; }
.reg-rule__body p { margin: 0 0 10px; }
.reg-rule__body p:last-child { margin-bottom: 0; }
.reg-rule__body ul, .reg-rule__body ol { margin: 0 0 10px; padding-left: 20px; }
.reg-rule__body li { margin-bottom: 4px; }
.reg-rule__lockwhy { font-size: 0.8rem; color: #a08b6d; font-style: italic; }
.reg-rule__body .lead-in { color: #241c12; }
.lbl { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; color: #7a6a55; text-transform: uppercase; margin-right: 2px; }
.lbl--bad { color: #b3362a; }
.lbl--good { color: #3f6f4f; }

/* rule type chips - one hue per discipline */
.tchip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tchip--law        { background: #efe3d0; color: #6d4a1f; }
.tchip--compliance { background: #fbe3e0; color: #9a3412; }
.tchip--accuracy   { background: #e3edf7; color: #2a5a8f; }
.tchip--boundaries { background: #fbedd8; color: #b45309; }
.tchip--security   { background: #ece7f6; color: #5b4a9e; }
.tchip--integrity  { background: #ddf0ec; color: #1f6f62; }
.tchip--safety     { background: #fde8d4; color: #b04a09; }
.tchip--voice      { background: #e8f0e8; color: #3f6f4f; }
.tchip--playbook   { background: #e7e9f7; color: #4a52a3; }
.tchip--reading    { background: #eceff2; color: #4a5763; }
.tchip--examples   { background: #f8e5ef; color: #9c3a6d; }
.tchip--machinery  { background: #ececec; color: #6f6f6f; }
.tchip--protected  { background: #f3ede2; color: #8a7455; border: 1px dashed #cbb895; }
.tchip--immutable  { background: #241c12; color: #f1e9db; }
.tchip--edited     { background: #fbedd8; color: #b45309; border: 1px solid #e8c491; }
.tchip--offall     { background: #9a3412; color: #fff; }
.reg-stat--edited  { background: #fbedd8; color: #b45309; }
.reg-stat--edited strong { color: #b45309; }
.reg-editform { max-width: 74ch; }

/* ============================================================
   ADMIN CONSOLE. Scoped to .admin-console (admin pages only). Same
   neutral scale and brand orange as the Business Dashboard, denser
   chrome. Token overrides re-skin every component that reads them;
   the rest are targeted visual refinements. APPEARANCE ONLY - no markup,
   logic, form action, or behavior is changed by anything below.
   ============================================================ */
.admin-console {
  /* Admin chrome uses the SAME neutral scale as the Business Dashboard:
     charcoal bar, premium gray canvas, white cards, one hairline, one ink.
     No more slate-blue tint; the two products read as one system. */
  --sand: var(--tg-page);
  --paper: var(--tg-card);
  --line: var(--tg-line);
  --loam: var(--tg-ink);
  --bark: var(--tg-muted);
  --shadow: var(--tg-sh);
  font-variant-numeric: tabular-nums;
}
.admin-console .topbar { background: var(--tg-side); border-bottom: 1px solid var(--tg-side-line); }
.admin-console .topbar-inner { max-width: 1100px; padding-block: 0.55rem; }
.admin-console .wordmark { color: #fff; }
.admin-console .wordmark span { color: var(--tg-orange); }
.admin-console .wordmark span::after { color: var(--sage); }
.admin-console .nav a { color: var(--tg-side-ink); }
.admin-console .nav a:hover { color: #fff; }
/* Active nav mirrors the Business sidebar: white pill, near-black text. */
.admin-console .nav a.on { background: #fff; color: var(--tg-side); }
.admin-console .nav-logout { background: transparent; color: var(--tg-side-ink); border-color: var(--tg-side-line); }
.admin-console .nav-logout:hover { color: #fff; border-color: var(--tg-red); }
.admin-console .page { max-width: 1100px; }
.admin-console .card { border-radius: var(--radius); }
.admin-console input[type="text"],
.admin-console input[type="email"],
.admin-console input[type="password"],
.admin-console input[type="tel"],
.admin-console select,
.admin-console textarea {
  border-radius: 6px;
  border-color: var(--tg-line-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.admin-console input::placeholder,
.admin-console textarea::placeholder { color: var(--tg-faint); }
.admin-console input:focus,
.admin-console select:focus,
.admin-console textarea:focus {
  border-color: var(--tg-orange);
  box-shadow: 0 0 0 3px rgba(233, 77, 0, 0.18);
}
.admin-console .table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.admin-console .table th {
  text-align: left; padding: 0.5rem 0.7rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--bark); background: #fafafa; border-bottom: 1px solid var(--line);
}
.admin-console .table td { padding: 0.5rem 0.7rem; font-size: 0.9rem; border-bottom: 1px solid #f1f2f5; }
.admin-console .table tr:last-child td { border-bottom: 0; }
.admin-console .table tbody tr:hover { background: #fafafa; }
.admin-console .switch-row { align-items: center; }
.admin-console .switch-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; position: relative; cursor: pointer;
  width: 2.6rem; height: 1.5rem; margin-top: 0.1rem;
  border: none; border-radius: 999px; background: var(--tg-line-2);
  transition: background 0.15s ease;
}
.admin-console .switch-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}
.admin-console .switch-row input[type="checkbox"]:checked { background: var(--tg-orange); }
.admin-console .switch-row input[type="checkbox"]:checked::after { left: calc(100% - 1.1rem - 3px); }
.admin-console .danger-row input[type="checkbox"]:checked { background: var(--tg-red); }
.admin-console .danger-row input[type="checkbox"]:checked::after {
  box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.25), 0 1px 2px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .admin-console .badge-urgent { animation: adminPulse 1.8s ease-in-out infinite; }
}
@keyframes adminPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); }
  50% { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.18); }
}

/* =================================================================
 * AUTHENTICATED APP SHELL  -  /today "work queue" dashboard
 * Visual authority: the Business Dashboard mockup. Scoped entirely
 * under .tg-app so no existing page (classic warm-earth shell) or
 * marketing page is affected. Dark left nav + white workspace.
 * ================================================================= */
.tg-app {
  /* Status colors AND the neutral scale come from the shared :root layer;
     only layout is scoped here. */
  flex-direction: row;
  align-items: stretch;
  background: var(--tg-page);
  color: var(--tg-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.tg-app h1, .tg-app h2 { font-family: inherit; }

/* --- sidebar --- */
.tg-sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--tg-side);
  color: var(--tg-side-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.4rem 0.9rem 1.15rem;
}
.tg-brand { display: flex; align-items: center; padding: 0.4rem 0.5rem 1.6rem; }
.tg-brand img { height: 36px; width: auto; }
.tg-nav { display: flex; flex-direction: column; gap: 0.14rem; }
.tg-nav a {
  display: flex; align-items: center; gap: 0.78rem;
  padding: 0.6rem 0.78rem; border-radius: 11px;
  color: var(--tg-side-ink); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; letter-spacing: -0.006em; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.tg-nav a svg { width: 19px; height: 19px; flex: 0 0 19px; opacity: .8; }
.tg-nav a:hover { background: var(--tg-side-hover); color: #fff; }
.tg-nav a.on { background: #fff; color: #1a1a1c; font-weight: 600; }
.tg-nav a.on svg { opacity: 1; color: var(--tg-orange); }
.tg-nav a[aria-disabled="true"] { opacity: .55; cursor: default; }
.tg-nav a[aria-disabled="true"]:hover { background: none; color: var(--tg-side-ink); }
.tg-nav__count {
  margin-left: auto; background: var(--tg-orange); color: #fff;
  font-size: 0.72rem; font-weight: 700; min-width: 20px; height: 20px;
  border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 6px;
}
.tg-nav__sep { height: 1px; background: var(--tg-side-line); margin: 0.7rem 0.4rem; }
.tg-calls {
  margin-top: auto; background: #191c23; border: 1px solid var(--tg-side-line);
  border-radius: var(--tg-r); padding: 0.85rem 0.9rem; font-size: 0.85rem;
}
.tg-calls__on { display: flex; align-items: center; gap: 0.45rem; color: var(--tg-side-dim); font-weight: 600; font-size: 0.8rem; }
.tg-calls__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tg-green); box-shadow: 0 0 0 3px rgba(18, 161, 80, .2); }
.tg-calls__num { color: #fff; font-weight: 700; font-size: 1.02rem; margin: 0.35rem 0 0.1rem; letter-spacing: .01em; }
.tg-calls__fwd { color: var(--tg-side-dim); }
.tg-calls__link { display: inline-block; margin-top: 0.5rem; color: var(--tg-orange); font-weight: 700; text-decoration: none; font-size: 0.82rem; }
.tg-calls__link:hover { text-decoration: underline; }

/* --- workspace --- */
.tg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--tg-page); }
.tg-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 2rem 2rem 0.85rem; flex-wrap: wrap;
}
.tg-greeting h1 { font-size: 1.95rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.tg-greeting p { margin: 0.45rem 0 0; color: var(--tg-muted); font-size: 1.02rem; letter-spacing: -0.01em; }
.tg-greeting p b { color: var(--tg-orange-dark); font-weight: 700; }
.tg-topbar__right { display: flex; align-items: center; gap: 1rem; }
.tg-live { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--tg-ink); }
.tg-live__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tg-green); }
.tg-iconbtn {
  position: relative; width: 40px; height: 40px; border: 1px solid var(--tg-line);
  background: #fff; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--tg-ink); cursor: pointer;
}
.tg-iconbtn svg { width: 20px; height: 20px; }
.tg-iconbtn__badge {
  position: absolute; top: -6px; right: -6px; background: var(--tg-red); color: #fff;
  font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid #fff;
}
.tg-identity { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--tg-line); border-radius: 12px; padding: 0.35rem 0.6rem 0.35rem 0.4rem; background: #fff; cursor: pointer; }
.tg-identity__meta { line-height: 1.2; text-align: left; }
.tg-identity__name { font-weight: 700; font-size: 0.92rem; }
.tg-identity__role { font-size: 0.78rem; color: var(--tg-muted); }
.tg-identity__menu { display: none; }
.tg-workspace { padding: 1.25rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* --- summary strip --- */
.tg-summary {
  display: flex; align-items: center; gap: 0; border: 1px solid var(--tg-line);
  border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh);
  padding: 0.15rem 0.4rem; flex-wrap: wrap;
}
.tg-summary__item { display: flex; align-items: center; gap: 0.65rem; padding: 1.05rem 1.35rem; }
.tg-summary__item svg { width: 21px; height: 21px; }
.tg-summary__n { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tg-summary__label { color: var(--tg-muted); font-size: 0.94rem; font-weight: 400; }
.tg-summary__item.is-red svg, .tg-summary__item.is-red .tg-summary__n { color: var(--tg-red); }
.tg-summary__item.is-amber svg, .tg-summary__item.is-amber .tg-summary__n { color: var(--tg-amber); }
.tg-summary__item.is-blue svg, .tg-summary__item.is-blue .tg-summary__n { color: var(--tg-blue); }
.tg-summary__item.is-green svg, .tg-summary__item.is-green .tg-summary__n { color: var(--tg-green); }
.tg-summary__div { width: 1px; align-self: stretch; background: var(--tg-line); margin: 0.55rem 0; }
.tg-summary__all { margin-left: auto; padding: 0.85rem 1.15rem; color: var(--tg-orange-dark); font-weight: 700; text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.tg-summary__all:hover { text-decoration: underline; }

/* --- priority (dominant) opportunity --- */
.tg-priority {
  border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-red);
  border-radius: var(--tg-r); background: linear-gradient(90deg, var(--tg-red-soft), #fff 44%);
  box-shadow: var(--tg-sh); padding: 1.6rem 1.75rem;
  display: grid; grid-template-columns: 1fr auto auto; gap: 1.75rem; align-items: start;
}
.tg-flag { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.76rem; letter-spacing: .04em; text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: 8px; }
.tg-flag svg { width: 15px; height: 15px; }
.tg-flag.is-red { background: var(--tg-red); color: #fff; }
.tg-flag.is-amber { background: var(--tg-amber-soft); color: var(--tg-amber); }
.tg-flag.is-orange { background: var(--tg-orange-soft); color: var(--tg-orange-dark); }
.tg-opp-title { font-size: 1.62rem; font-weight: 700; letter-spacing: -0.026em; line-height: 1.12; margin: 0.9rem 0 0.4rem; }
.tg-opp-quote { font-style: italic; color: var(--tg-ink-2); font-size: 1.02rem; margin: 0 0 0.75rem; }
.tg-opp-summary { color: var(--tg-ink-2); font-size: 1.03rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.tg-opp-meta { display: flex; align-items: center; gap: 0.6rem; color: var(--tg-muted); font-size: 0.92rem; flex-wrap: wrap; }
.tg-opp-meta svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.tg-opp-meta .sep { color: var(--tg-line); }
.tg-opp-meta time, .tg-opp-meta .req { color: var(--tg-ink); }
.tg-owner { text-align: center; min-width: 118px; }
.tg-owner__label { color: var(--tg-muted); font-size: 0.8rem; margin-bottom: 0.4rem; }
.tg-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--tg-orange-soft); color: var(--tg-orange-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; margin: 0 auto; overflow: hidden; }
.tg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tg-avatar.sm { width: 34px; height: 34px; font-size: 0.82rem; }
.tg-owner__name { font-weight: 700; margin-top: 0.4rem; }
.tg-owner__state { font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; }
.tg-owner__state.is-assigned { color: var(--tg-amber); }
.tg-owner__state.is-active { color: var(--tg-green); }
.tg-owner__state.is-unassigned { color: var(--tg-muted); }
.tg-owner__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tg-actions { display: flex; flex-direction: column; gap: 0.6rem; min-width: 210px; }
.tg-call { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--tg-red); color: #fff; border: none; border-radius: var(--tg-r-sm); padding: 0.88rem 1.15rem; font-weight: 600; font-size: 0.9rem; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .15s ease; }
.tg-call:hover { background: var(--tg-red-dark); }
.tg-call.is-orange { background: var(--tg-orange); }
.tg-call.is-orange:hover { background: var(--tg-orange-dark); }
.tg-call svg { width: 18px; height: 18px; }
.tg-actrow { display: flex; gap: 0.6rem; }
.tg-btn2 { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; background: #fff; color: var(--tg-ink); border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm); padding: 0.7rem 0.6rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none; }
.tg-btn2:hover { background: #f7f8fa; }
.tg-btn2 svg { width: 16px; height: 16px; }

/* --- upcoming opportunity rows --- */
.tg-upcoming { display: flex; flex-direction: column; gap: 0.75rem; }
.tg-row {
  display: grid; grid-template-columns: 132px 1fr auto auto 22px; gap: 1.25rem; align-items: center;
  border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-amber);
  border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh);
  padding: 1rem 1.25rem; text-decoration: none; color: inherit;
  cursor: pointer; /* div-based row; navigation is delegated in _dash-elite */
}
.tg-row.is-dispositioned { opacity: 0.45; transition: opacity 0.25s; }
.tg-row__tel { color: var(--tg-ink-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tg-row__tel:hover { text-decoration: underline; }
/* Truthful reply-state chip: replied / no reply / carrier bounced the text. */
.tg-reply { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; letter-spacing: 0.01em; }
.tg-reply.is-yes { background: var(--tg-green-soft); color: var(--tg-green); }
.tg-reply.is-no { background: #f0f0f3; color: var(--tg-muted); }
.tg-reply.is-undeliv { background: #fdeee3; color: var(--tg-orange-dark); }
/* Suspected spam: a suspicion, not a verdict. Deliberately reads as a warning
   rather than a status — the owner decides, and hovering shows why. */
.tg-reply.is-spam { background: #fbe3de; color: #a3341c; cursor: help; }
/* Compact row controls: disposition + assign. Small on purpose — one flick
   each, junk dies without ever opening the lead. */
.tg-mini-disp, .tg-mini-assign {
  font-size: 0.78rem; padding: 0.18rem 0.35rem; max-width: 165px;
  border: 1px solid var(--tg-line); border-radius: 7px; background: #fff;
  color: var(--tg-muted); cursor: pointer;
}
.tg-mini-disp.has-outcome { color: var(--tg-ink-2); border-color: #d8dbe2; }
.tg-mini-disp { margin-left: 0.5rem; }
.tg-mini-assign { margin-top: 0.3rem; max-width: 120px; }
/* Quick-teammate popover (created on demand by TGE.quickTeammate). */
.tg-qt {
  position: absolute; z-index: 60; width: 280px; padding: 0.9rem;
  background: #fff; border: 1px solid var(--tg-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(29, 29, 31, 0.16); display: flex; flex-direction: column; gap: 0.5rem;
}
.tg-qt__title { font-weight: 700; font-size: 0.95rem; }
.tg-qt input { font-size: 0.88rem; padding: 0.45rem 0.55rem; border: 1px solid var(--tg-line); border-radius: 8px; }
.tg-qt__err { color: #b3261e; font-size: 0.82rem; }
.tg-qt__row { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.2rem; }
.tg-row:hover { border-color: #d6d9e0; }
/* Grid cells may shrink below content (long titles / nowrap chips) so the
   row never pushes past its container at tablet widths. */
.tg-row > * { min-width: 0; }
.tg-row .tg-ready { white-space: normal; }
.tg-row.is-cal { border-left-color: var(--tg-amber); }
.tg-row__when { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--tg-amber); font-size: 0.92rem; }
.tg-row__when svg { width: 17px; height: 17px; }
.tg-row__need { font-weight: 600; font-size: 1.04rem; letter-spacing: -0.014em; }
.tg-row__detail { color: var(--tg-ink-2); font-size: 0.92rem; font-style: italic; margin: 0.15rem 0; }
.tg-row__detail.plain { font-style: normal; }
.tg-row__meta { color: var(--tg-muted); font-size: 0.86rem; }
.tg-row__owner { text-align: center; min-width: 96px; }
.tg-row__next { display: flex; align-items: center; gap: 0.55rem; color: var(--tg-orange-dark); font-weight: 700; font-size: 0.92rem; max-width: 220px; }
.tg-row__next svg { width: 18px; height: 18px; flex: 0 0 18px; }
.tg-row__chev { color: #b7bcc6; }
.tg-row__chev svg { width: 18px; height: 18px; }

/* --- bottom two-column panels --- */
.tg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tg-panel { border: 1px solid var(--tg-line); border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh); overflow: hidden; }
.tg-panel__head { display: flex; align-items: center; gap: 0.55rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tg-line); }
.tg-panel__head svg { width: 20px; height: 20px; }
.tg-panel__title { font-weight: 700; font-size: 1.04rem; letter-spacing: -0.015em; }
.tg-panel.is-working .tg-panel__title { color: var(--tg-blue); }
.tg-panel.is-working .tg-panel__head svg { color: var(--tg-blue); }
.tg-panel.is-team .tg-panel__head svg { color: var(--tg-orange); }
.tg-panel__count { margin-left: auto; color: var(--tg-muted); font-size: 0.88rem; font-weight: 600; }
.tg-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid #f1f2f5; text-decoration: none; color: inherit; }
.tg-item:last-of-type { border-bottom: none; }
.tg-item:hover { background: #fafbfc; }
.tg-item__ico { width: 30px; height: 30px; border-radius: 8px; background: var(--tg-blue-soft); color: var(--tg-blue); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.tg-item__ico svg { width: 16px; height: 16px; }
.tg-panel.is-team .tg-item__ico { background: var(--tg-orange-soft); color: var(--tg-orange-dark); }
.tg-item__label { font-weight: 600; font-size: 0.94rem; min-width: 0; }
.tg-item__label small { display: block; color: var(--tg-muted); font-weight: 500; font-size: 0.85rem; }
.tg-item__side { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
.tg-item__age { color: var(--tg-muted); font-size: 0.82rem; }
.tg-chip { font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 7px; white-space: nowrap; }
.tg-chip.is-blue { background: var(--tg-blue-soft); color: var(--tg-blue); }
.tg-chip.is-amber { background: var(--tg-amber-soft); color: var(--tg-amber); }
.tg-chip.is-orange { background: var(--tg-orange-soft); color: var(--tg-orange-dark); }
.tg-chip.is-red { background: var(--tg-red-soft); color: var(--tg-red); }
.tg-panel__foot { padding: 0.85rem 1.25rem; text-align: center; }
.tg-panel__foot a { color: var(--tg-orange-dark); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.tg-panel__foot a:hover { text-decoration: underline; }

/* --- governance footer + states --- */
.tg-govern { display: flex; align-items: center; justify-content: center; gap: 0.45rem; color: var(--tg-muted); font-size: 0.88rem; padding: 0.5rem 0 0.25rem; text-align: center; }
.tg-govern svg { width: 16px; height: 16px; flex: 0 0 16px; }
.tg-govern a { color: var(--tg-orange-dark); font-weight: 700; text-decoration: none; }
.tg-empty, .tg-error { border: 1px dashed var(--tg-line); border-radius: var(--tg-r); background: #fff; padding: 2.5rem 1.5rem; text-align: center; color: var(--tg-muted); }
.tg-empty h2 { font-size: 1.15rem; color: var(--tg-ink); margin-bottom: 0.35rem; }
.tg-empty a, .tg-error button { color: var(--tg-orange-dark); font-weight: 700; }
.tg-skel { border: 1px solid var(--tg-line); border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh); }
.tg-skel__bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0f3, #f6f7f9, #eef0f3); background-size: 200% 100%; animation: tgShimmer 1.3s ease-in-out infinite; margin: 0.6rem 0; }
@keyframes tgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tg-priority.tg-skel { display: block; min-height: 150px; padding: 1.4rem; }

/* --- tablet --- */
@media (max-width: 1080px) {
  .tg-priority { grid-template-columns: 1fr; }
  .tg-owner { text-align: left; min-width: 0; display: flex; align-items: center; gap: 0.6rem; }
  .tg-owner__label { display: none; }
  .tg-actions { min-width: 0; }
  .tg-actrow { flex-wrap: wrap; }
  .tg-cols { grid-template-columns: 1fr; }
  .tg-row { grid-template-columns: 110px 1fr auto 22px; }
  .tg-row__owner { display: none; }
}

/* --- mobile: sidebar becomes a top bar, priority first --- */
@media (max-width: 720px) {
  .tg-app { flex-direction: column; }
  .tg-sidebar {
    width: auto; flex: none; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem;
    overflow-x: auto;
  }
  .tg-brand { padding: 0 0.5rem 0 0; }
  .tg-nav { flex-direction: row; gap: 0.25rem; }
  /* Icons only, visually; the label stays in the accessibility tree. The
     status pip is NOT a label and must never be hidden — it is the answer to
     "is my number working?", and hiding it is exactly what left an owner on a
     phone with no idea what their number was doing. */
  .tg-nav a span:not(.tg-nav__count):not(.tg-nav__pip) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* "My Number" keeps its words on a phone. Call forwarding is set up ON the
     phone, so this is the primary mobile destination, not a secondary one, and
     an unlabelled handset icon is not something a non-technical owner will
     find. It is the only item worth the horizontal room. */
  .tg-nav a[href="/number"] { flex: 0 0 auto; padding-right: 0.6rem; }
  .tg-nav a[href="/number"] span:not(.tg-nav__count):not(.tg-nav__pip) {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip: auto; white-space: nowrap; border: 0;
  }
  .tg-nav__pip { margin-left: 0.35rem; }
  .tg-nav__sep, .tg-calls { display: none; }
  .tg-topbar { padding: 1.1rem 1.1rem 0.25rem; }
  .tg-greeting h1 { font-size: 1.4rem; }
  .tg-workspace { padding: 0.85rem 1.1rem 2rem; }
  .tg-summary { flex-direction: column; align-items: stretch; }
  .tg-summary__div { display: none; }
  .tg-summary__item { border-bottom: 1px solid var(--tg-line); }
  .tg-summary__all { margin: 0; }
  .tg-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .tg-row__chev { display: none; }
  .tg-call, .tg-btn2 { min-width: 0; }
}

/* --- account menu (identity dropdown) --- */
.tg-acct { position: relative; }
.tg-acct > summary { list-style: none; cursor: pointer; }
.tg-acct > summary::-webkit-details-marker { display: none; }
.tg-acct[open] > summary { border-color: #d6d9e0; }
.tg-acct__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid var(--tg-line); border-radius: 12px;
  box-shadow: var(--tg-sh); padding: 0.5rem; min-width: 220px;
}
.tg-acct__email { color: var(--tg-muted); font-size: 0.82rem; padding: 0.35rem 0.5rem 0.5rem; border-bottom: 1px solid var(--tg-line); margin-bottom: 0.35rem; }
.tg-acct__signout { width: 100%; text-align: left; background: none; border: none; color: var(--tg-red); font-weight: 700; font-size: 0.9rem; padding: 0.5rem; border-radius: 8px; cursor: pointer; }
.tg-acct__signout:hover { background: var(--tg-red-soft); }
.tg-priority__main { min-width: 0; }

/* --- notifications dropdown (bell) --- */
.tg-notifwrap { position: relative; }
.tg-notif { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 344px; max-width: 86vw; background: #fff; border: 1px solid var(--tg-line); border-radius: 16px; box-shadow: var(--tg-sh); overflow: hidden; }
.tg-notif__head { padding: 0.85rem 1rem; border-bottom: 1px solid var(--tg-line); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.tg-notif__head span { color: var(--tg-muted); font-weight: 500; }
.tg-notif__empty { padding: 1.75rem 1rem; text-align: center; color: var(--tg-muted); font-size: 0.92rem; }
.tg-notif__item { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1rem; border-bottom: 1px solid #f2f2f4; text-decoration: none; color: inherit; }
.tg-notif__item:last-of-type { border-bottom: none; }
.tg-notif__item:hover { background: #fafafa; }
.tg-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tg-amber); flex: 0 0 8px; }
.tg-notif__dot.is-red { background: var(--tg-red); }
.tg-notif__meta { min-width: 0; flex: 1; }
.tg-notif__label { display: block; font-weight: 600; font-size: 0.9rem; }
.tg-notif__sub { display: block; color: var(--tg-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-notif__age { color: var(--tg-faint); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tg-notif__all { display: block; padding: 0.8rem 1rem; text-align: center; color: var(--tg-orange-dark); font-weight: 700; text-decoration: none; font-size: 0.9rem; border-top: 1px solid var(--tg-line); }
.tg-notif__all:hover { text-decoration: underline; }

/* --- notifications on a phone -------------------------------------------
   The panel is anchored to the bell with `right: 0`, which is correct on a
   desktop where the bell sits at the right of the topbar and the panel opens
   leftward into the page. On a phone the bell is near the LEFT edge, so
   `right: 0` threw the whole 344px panel off the left of the screen — the
   owner tapped the bell and saw a sliver of cut-off dates.

   On mobile it stops being a dropdown and becomes a viewport-anchored sheet:
   full width inside a small margin, so it cannot overflow in either direction
   no matter where the bell ends up. `top` is set in JS from the bell's real
   position, because the header height varies with the status bar above it. */
@media (max-width: 720px) {
  .tg-notif {
    position: fixed;
    left: 10px; right: 10px; width: auto; max-width: none;
    top: 64px; /* JS overrides with the bell's actual bottom edge */
    max-height: 72vh; /* fallback; JS sets the true height from the bell's position */
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  /* A long list must scroll inside the sheet rather than run off the bottom
     of the screen where the last items are unreachable. */
  .tg-notif__item { padding: 0.85rem 1rem; }
  /* Wrap, but never let one entry eat the panel. Removing the desktop ellipsis
     so the text could wrap turned a long Gus summary into a ten-line wall that
     pushed every other notification off the screen — the list stopped being a
     list. Two lines is enough to recognise which lead it is; the full story is
     one tap away on the lead itself. */
  .tg-notif__sub {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Keep the title visible while scrolling a long list, so it is always clear
     what the sheet is and that there is more above. */
  .tg-notif__head { position: sticky; top: 0; background: #fff; z-index: 1; }

  /* The account menu is the same shape of bug waiting to happen: absolutely
     positioned with `right: 0` and a 220px min-width, so a narrow screen could
     push it off an edge too. Pinned to both edges of its own trigger, which is
     always on-screen, it cannot overflow in either direction. */
  .tg-acct__menu { left: 0; right: 0; min-width: 0; }
}

/* --- readiness (decision-ready layer) --- */
.tg-ready { display: inline-flex; align-items: center; gap: 0.36rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.52rem; border-radius: 7px; vertical-align: middle; white-space: nowrap; }
.tg-ready::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tg-ready.is-ready { background: var(--tg-green-soft); color: var(--tg-green); }
.tg-ready.is-decision { background: var(--tg-red-soft); color: var(--tg-red); }
.tg-ready.is-gathering { background: var(--tg-blue-soft); color: var(--tg-blue); }
.tg-intake { color: var(--tg-ink-2); font-size: 0.98rem; margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.tg-requested { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--tg-muted); font-size: 0.85rem; margin-top: 0.55rem; }
.tg-requested svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* --- decision-ready panel (Opportunity detail) --- */
.tg-decide { border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-line); border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; }
.tg-decide.is-decision { border-left-color: var(--tg-red); }
.tg-decide.is-ready { border-left-color: var(--tg-green); }
.tg-decide.is-gathering { border-left-color: var(--tg-blue); }
.tg-decide__top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.tg-decide__age { color: var(--tg-muted); font-size: 0.86rem; }
.tg-decide__q { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.024em; line-height: 1.15; margin: 0.75rem 0 0.4rem; }
.tg-decide__intake { color: var(--tg-ink-2); font-size: 1.02rem; margin: 0 0 1rem; letter-spacing: -0.01em; }
.tg-checklist { display: flex; flex-wrap: wrap; gap: 0.55rem 1.15rem; margin: 0 0 1rem; }
.tg-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; color: var(--tg-ink); }
.tg-check.is-missing { color: var(--tg-faint); }
.tg-check__mark { width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 19px; font-size: 0.7rem; font-weight: 700; }
.tg-check.is-done .tg-check__mark { background: var(--tg-green-soft); color: var(--tg-green); }
.tg-check.is-missing .tg-check__mark { background: #ececee; color: var(--tg-faint); }
.tg-decide__gov { color: var(--tg-muted); font-size: 0.88rem; display: flex; align-items: center; gap: 0.45rem; padding-top: 0.9rem; border-top: 1px solid var(--tg-line); }
.tg-decide__gov svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* --- Opportunity detail in the elite shell: keep the tuned layout, refine accents --- */
.tg-app .back { color: var(--tg-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.tg-app .thread-wrap, .tg-app .history { margin-bottom: 1rem; }
.tg-app .thread-title, .tg-app .rec-head h2, .tg-app #outcome-panel h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
.tg-app .opp-kicker { color: var(--tg-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tg-app .opp-headline { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.022em; }
.tg-app .opp-status { border-radius: 999px; font-weight: 600; font-size: 0.78rem; padding: 0.28rem 0.7rem; }
.tg-app .opp-status-live { background: var(--tg-blue-soft); color: var(--tg-blue); }
.tg-app .opp-status-follow { background: var(--tg-orange-soft); color: var(--tg-orange-dark); }
.tg-app .opp-tag { border-radius: 8px; }
.tg-app .status-chip.on { background: var(--tg-ink); color: #fff; border-color: var(--tg-ink); }
/* Outbound bubbles: saturated orange tint with DARK text. The old pale tint
   inherited the base rule's white text — near-invisible (owner bug report
   2026-07-18). Keep the text dark on any light-orange fill. */
.tg-app .msg.out .bubble { background: #f8cfad; border: 1px solid #efb98d; color: var(--tg-ink); }
.tg-app .outcome-btn.on { border-color: var(--tg-orange); background: var(--tg-orange-soft); }

/* --- Opportunities (elite list) --- */
.tg-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tg-page-head h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.tg-page-head p { margin: 0.2rem 0 0; color: var(--tg-muted); font-size: 0.95rem; }
.tg-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tg-filter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border: 1px solid var(--tg-line); background: #fff; border-radius: 999px; font-weight: 600; font-size: 0.9rem; color: var(--tg-ink); cursor: pointer; }
.tg-filter:hover { border-color: #d6d9e0; }
.tg-filter.on { background: var(--tg-ink); color: #fff; border-color: var(--tg-ink); }
.tg-filter__n { font-size: 0.8rem; opacity: .7; }
.tg-spam { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.25rem; color: var(--tg-muted); font-size: 0.9rem; cursor: pointer; }
.tg-list { display: flex; flex-direction: column; gap: 0.6rem; }
.tg-list .tg-row { box-shadow: none; }
.tg-list .tg-row.tg-row--em { border-left-color: var(--tg-red); }
.tg-list .tg-row.tg-row--em .tg-row__when { color: var(--tg-red); }
.tg-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.25rem 0 0.25rem; color: var(--tg-muted); font-size: 0.9rem; }
.tg-pager button { background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm); padding: 0.5rem 0.85rem; font-weight: 600; cursor: pointer; color: var(--tg-ink); }
.tg-pager button[disabled] { opacity: .5; cursor: default; }

/* --- stat tiles (Reports) --- */
.tg-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.tg-section-title { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.017em; margin: 0.25rem 0; }
.tg-section-note { color: var(--tg-muted); font-size: 0.9rem; margin: -0.25rem 0 0.5rem; }
.tg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.tg-stat { border: 1px solid var(--tg-line); border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh); padding: 1.1rem 1.25rem; }
.tg-stat__label { color: var(--tg-muted); font-size: 0.88rem; }
.tg-stat__value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.tg-stat__sub { color: var(--tg-muted); font-size: 0.82rem; margin-top: 0.25rem; }
.tg-stat.is-green .tg-stat__value { color: var(--tg-green); }
.tg-form { border: 1px solid var(--tg-line); border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh); overflow: hidden; }
.tg-field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid #f1f2f5; }
.tg-field:last-child { border-bottom: none; }
.tg-field__label { font-weight: 600; }
.tg-field__label small { display: block; color: var(--tg-muted); font-weight: 400; font-size: 0.82rem; margin-top: 0.1rem; }
.tg-field strong { font-variant-numeric: tabular-nums; }

/* --- Reports: segmented period control + hero --- */
.tg-reports-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tg-reports-head__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.tg-seg { display: inline-flex; background: #ececee; border-radius: 12px; padding: 3px; }
.tg-seg button { border: none; background: none; padding: 0.5rem 1.15rem; border-radius: 9px; font-weight: 600; font-size: 0.9rem; color: var(--tg-muted); cursor: pointer; transition: background .12s ease, color .12s ease; }
.tg-seg button.on { background: #fff; color: var(--tg-ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tg-hero { background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r); box-shadow: var(--tg-sh); padding: 1.6rem 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.tg-hero__label { color: var(--tg-muted); font-size: 0.92rem; font-weight: 500; }
.tg-hero__value { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--tg-green); font-variant-numeric: tabular-nums; margin: 0.35rem 0 0.2rem; line-height: 1.05; }
.tg-hero__value.is-ink { color: var(--tg-ink); }
.tg-hero__sub { color: var(--tg-muted); font-size: 0.88rem; line-height: 1.4; }
.tg-hero > div + div { border-left: 1px solid var(--tg-line); padding-left: 1.5rem; }
@media (max-width: 640px) {
  .tg-hero { grid-template-columns: 1fr; }
  .tg-hero > div + div { border-left: none; border-top: 1px solid var(--tg-line); padding-left: 0; padding-top: 1.2rem; }
}

/* --- team roster --- */
.tg-member { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.25rem; border-bottom: 1px solid #f1f2f5; }
.tg-member .tg-avatar { margin: 0; flex: 0 0 auto; }
.tg-member:last-of-type { border-bottom: none; }
.tg-member__meta { min-width: 0; }
.tg-member__name { font-weight: 700; }
.tg-member__email { color: var(--tg-muted); font-size: 0.86rem; }
.tg-member__side { margin-left: auto; display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
.tg-role { font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 7px; background: var(--tg-blue-soft); color: var(--tg-blue); }
.tg-role.is-owner { background: var(--tg-orange-soft); color: var(--tg-orange-dark); }
.tg-member__count { color: var(--tg-muted); font-size: 0.88rem; }
.tg-invite { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 1rem 1.25rem; border-top: 1px solid var(--tg-line); background: #fafbfc; }
.tg-invite input { border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm); padding: 0.55rem 0.7rem; font: inherit; font-size: 0.9rem; }

/* --- hub (More) --- */
.tg-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.tg-hubcard { display: flex; align-items: flex-start; gap: 0.85rem; border: 1px solid var(--tg-line); border-radius: var(--tg-r); background: #fff; box-shadow: var(--tg-sh); padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; }
.tg-hubcard:hover { border-color: #d6d9e0; }
.tg-hubcard__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--tg-orange-soft); color: var(--tg-orange-dark); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.tg-hubcard__ico svg { width: 20px; height: 20px; }
.tg-hubcard__title { font-weight: 700; display: block; }
.tg-hubcard__desc { color: var(--tg-muted); font-size: 0.88rem; margin-top: 0.15rem; display: block; }

/* --- More: grouped settings-style hub --- */
.tg-morewrap { max-width: 680px; }
.tg-moregroup { margin-bottom: 1.75rem; }
.tg-moregroup__label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tg-faint); margin: 0 0 0.6rem 0.2rem; }
.tg-morelist { background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r); box-shadow: var(--tg-sh); overflow: hidden; }
.tg-morecard { display: flex; align-items: center; gap: 0.9rem; padding: 1.05rem 1.25rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f2f2f4; transition: background .12s ease; }
.tg-morecard:last-child { border-bottom: none; }
.tg-morecard:hover { background: #fafafa; }
.tg-morecard__ico { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.tg-morecard__ico svg { width: 21px; height: 21px; }
.tg-morecard__ico.t-orange { background: var(--tg-orange-soft); color: var(--tg-orange-dark); }
.tg-morecard__ico.t-blue { background: var(--tg-blue-soft); color: var(--tg-blue); }
.tg-morecard__ico.t-green { background: var(--tg-green-soft); color: var(--tg-green); }
.tg-morecard__ico.t-ink { background: #ececee; color: var(--tg-ink); }
.tg-morecard__body { min-width: 0; flex: 1; }
.tg-morecard__title { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.tg-morecard__desc { color: var(--tg-muted); font-size: 0.86rem; margin-top: 0.1rem; }
.tg-morecard__status { color: var(--tg-ink); font-weight: 600; font-size: 0.88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tg-morecard__chev { color: #c2c2c7; flex: 0 0 auto; display: inline-flex; }
.tg-morecard__chev svg { width: 18px; height: 18px; }
.tg-morecard.is-danger .tg-morecard__title { color: var(--tg-red); }
.tg-morecard.is-danger .tg-morecard__ico { background: var(--tg-red-soft); color: var(--tg-red); }

/* --- Referrals (elite, clear, no brown) --- */
.tg-refwrap { max-width: 640px; }
.tg-refcard { background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r); box-shadow: var(--tg-sh); padding: 1.5rem 1.6rem; }
.tg-ref-rate { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--tg-green); margin: 0.75rem 0 0.15rem; font-variant-numeric: tabular-nums; }
.tg-ref-rate span { font-size: 1.05rem; font-weight: 500; color: var(--tg-muted); letter-spacing: normal; }
.tg-ref-was { color: var(--tg-muted); font-size: 0.95rem; }
.tg-ref-was s { color: var(--tg-faint); }
.tg-ref-note { margin: 0.9rem 0 0; color: var(--tg-ink-2); font-size: 0.94rem; line-height: 1.5; }
.tg-ref-note strong { color: var(--tg-ink); }
.tg-refprog__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.94rem; color: var(--tg-muted); margin-bottom: 0.6rem; }
.tg-refprog__head strong { color: var(--tg-ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tg-refbar { position: relative; height: 12px; background: #ececee; border-radius: 999px; }
.tg-refbar__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--tg-green); border-radius: 999px; transition: width .3s ease; }
.tg-refbar__tick { position: absolute; top: -3px; width: 2px; height: 18px; background: #fff; box-shadow: 0 0 0 1px var(--tg-line-2); border-radius: 1px; }
.tg-refmiles { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--tg-muted); margin-top: 0.55rem; font-variant-numeric: tabular-nums; }
.tg-reflink { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.tg-reflink code { flex: 1; min-width: 200px; background: #f3f4f6; color: var(--tg-ink); padding: 0.6rem 0.8rem; border-radius: var(--tg-r-sm); font-size: 0.86rem; word-break: break-all; }

/* --- re-skin classic controls when inside the elite app shell (Settings) --- */
.tg-app .page-head { display: none; }
.tg-app .card { background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r); box-shadow: var(--tg-sh); padding: 1.25rem 1.4rem; margin-bottom: 1rem; color: var(--tg-ink); }
.tg-app .card h2 { font-family: inherit; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--tg-ink); margin: 0 0 0.4rem; }
.tg-app .sub, .tg-app .field-hint, .tg-app .field-optional { color: var(--tg-muted); }
.tg-app .btn { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: var(--tg-r-sm); border: 1px solid var(--tg-line); background: #fff; color: var(--tg-ink); font-weight: 600; font-size: 0.92rem; padding: 0.6rem 1rem; cursor: pointer; text-decoration: none; }
.tg-app .btn:hover { background: #f7f8fa; }
.tg-app .btn-primary { background: var(--tg-orange); border-color: var(--tg-orange); color: #fff; }
.tg-app .btn-primary:hover { background: var(--tg-orange-dark); }
.tg-app .btn-danger { background: var(--tg-red); border-color: var(--tg-red); color: #fff; }
.tg-app .btn-danger:hover { background: var(--tg-red-dark); }
.tg-app input[type=text], .tg-app input[type=email], .tg-app input[type=tel], .tg-app select, .tg-app textarea { border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm); padding: 0.55rem 0.7rem; font: inherit; font-size: 0.92rem; color: var(--tg-ink); background: #fff; }
.tg-app .form-grid label { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; }
.tg-app .form-grid > input, .tg-app .form-grid > select, .tg-app .form-grid > textarea { width: 100%; max-width: 540px; }
.tg-app .choice-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; }
.tg-app .choice { display: flex; gap: 0.6rem; border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm); padding: 0.8rem 1rem; cursor: pointer; }
.tg-app .choice.selected { border-color: var(--tg-orange); background: var(--tg-orange-soft); }
.tg-app .choice.locked { opacity: .6; }
.tg-app .choice-title { font-weight: 700; display: block; }
.tg-app .choice-desc { color: var(--tg-muted); font-size: 0.9rem; }
.tg-app .choice-tag { font-size: 0.72rem; font-weight: 700; color: var(--tg-orange-dark); background: #fff; border: 1px solid var(--tg-orange-soft); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.tg-app .check { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; font-weight: 500; }
.tg-app .form-error { color: var(--tg-red); font-size: 0.9rem; }
.tg-app .empty { color: var(--tg-muted); }
.tg-app .hours-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tg-app .hours-row label { margin: 0.9rem 0 0.3rem; }
.tg-app .invite-link { background: var(--tg-amber-soft); border-radius: var(--tg-r-sm); padding: 0.75rem; font-size: 0.9rem; word-break: break-all; }

/* --- accordion sections (progressive disclosure) --- */
.tg-acc { background: #fff; border: 1px solid var(--tg-line); border-radius: var(--tg-r); box-shadow: var(--tg-sh); margin-bottom: 1rem; overflow: hidden; }
.tg-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.6rem; padding: 1.15rem 1.4rem; font-weight: 700; font-size: 1.06rem; letter-spacing: -0.015em; color: var(--tg-ink); }
.tg-acc > summary::-webkit-details-marker { display: none; }
.tg-acc > summary::after { content: ""; margin-left: auto; align-self: center; width: 9px; height: 9px; border-right: 2px solid var(--tg-faint); border-bottom: 2px solid var(--tg-faint); transform: rotate(-45deg); transition: transform .2s ease; }
.tg-acc[open] > summary::after { transform: rotate(45deg); }
.tg-acc > summary:hover { background: #fafafa; }
.tg-acc__hint { font-weight: 400; font-size: 0.88rem; color: var(--tg-muted); letter-spacing: -0.005em; }
.tg-acc__body { padding: 0.25rem 1.4rem 1.4rem; }
.tg-acc__body > h2:first-child, .tg-acc__body > label:first-child { margin-top: 0.25rem; }
.tg-acc__body h2 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin: 1.15rem 0 0.5rem; }
.tg-acc--quiet > summary { color: var(--tg-muted); font-size: 0.98rem; font-weight: 600; }
.tg-acc--quiet { box-shadow: none; background: transparent; border-style: dashed; }

/* --- field info tooltip --- */
.tg-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.3rem; color: var(--tg-faint); cursor: help; }
.tg-tip svg { width: 15px; height: 15px; }
.tg-tip:hover, .tg-tip:focus-visible { color: var(--tg-orange); outline: none; }
.tg-tip__pop { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: 250px; max-width: 76vw; background: var(--tg-ink); color: #fff; font-size: 0.82rem; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; padding: 0.6rem 0.78rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transition: opacity .14s ease; z-index: 60; pointer-events: none; }
.tg-tip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tg-ink); }
.tg-tip:hover .tg-tip__pop, .tg-tip:focus .tg-tip__pop, .tg-tip:focus-within .tg-tip__pop { opacity: 1; visibility: visible; }
/* Usage / Referrals / Account controls inside the elite shell */
.tg-app .usage-period { color: var(--tg-muted); font-size: 0.9rem; font-weight: 600; }
.tg-app .usage-big { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.25rem 0; }
.tg-app .usage-of { font-size: 1rem; font-weight: 500; color: var(--tg-muted); }
.tg-app .usage-note { color: var(--tg-ink); font-size: 0.92rem; margin: 0.6rem 0 0; }
.tg-app .usage-note-warn { color: var(--tg-amber); }
.tg-app .usage-sub { color: var(--tg-muted); font-size: 0.85rem; margin-top: 0.6rem; }
.tg-app .meter { height: 12px; background: #eef0f3; border-radius: 999px; overflow: hidden; margin: 0.75rem 0; }
.tg-app .meter-fill { height: 100%; background: var(--tg-green); border-radius: 999px; }
.tg-app .meter-fill.meter-warn { background: var(--tg-amber); }
.tg-app .meter-fill.meter-full { background: var(--tg-red); }
.tg-app .table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.92rem; }
.tg-app .table th { text-align: left; color: var(--tg-muted); font-weight: 600; font-size: 0.82rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--tg-line); }
.tg-app .table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid #f1f2f5; }
.tg-app .btn-block { width: 100%; justify-content: center; }
.tg-app .btn-outline { background: #fff; }
.tg-app .auth-card { max-width: 460px; }
.tg-app .auth-card h1 { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.4rem; }
.tg-app .auth-card label { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; }
.tg-app .auth-card input { width: 100%; }
.tg-app code { background: #f3f4f6; padding: 2px 7px; border-radius: 6px; font-size: 0.88rem; }

/* ==========================================================================
   CONFIDENCE LAYER - Business Today (.tg-today-v2) + Admin Overview
   (.admin-overview-v2) + the shared freshness element (.tg-fresh).
   Additive and scoped. No existing selector is altered or removed.
   ========================================================================== */

/* --- shared: truthful freshness pill (only approved shared selector) --- */
.tg-fresh { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--tg-muted); font-weight: 500; }
.tg-fresh:empty { display: none; }
.tg-fresh__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--tg-green); flex: 0 0 7px; }
.tg-fresh.is-updating { color: var(--tg-blue); }
.tg-fresh.is-updating .tg-fresh__dot { background: var(--tg-blue); }
.tg-fresh.is-stale { color: var(--tg-amber); }
.tg-fresh.is-stale .tg-fresh__dot { background: var(--tg-amber); }
.tg-fresh.is-failed { color: var(--tg-red); }
.tg-fresh.is-failed .tg-fresh__dot { background: var(--tg-red); }

/* ===================== BUSINESS TODAY (scoped to .tg-today-v2) ============= */
.tg-today-v2 .tg-today-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.tg-today-v2 .tg-today-filters .f { font-size: 0.8125rem; color: var(--tg-muted); background: var(--tg-card); border: 1px solid var(--tg-line); border-radius: 999px; padding: 5px 12px; }
.tg-today-v2 .tg-today-filters .f b { font-variant-numeric: tabular-nums; margin-left: 3px; color: var(--tg-ink); font-weight: 700; }
.tg-today-v2 .tg-today-filters .f.is-red b { color: var(--tg-red); }
.tg-today-v2 .tg-today-filters .f.is-green b { color: var(--tg-green); }
.tg-today-v2 .tg-today-filters .f.is-blue b { color: var(--tg-blue); }

.tg-today-v2 .tg-today-shead { display: flex; align-items: center; gap: 0.5rem; margin: 26px 0 8px; font-size: 0.9375rem; font-weight: 700; color: var(--tg-ink); }
.tg-today-v2 .tg-today-shead__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--tg-faint); flex: 0 0 9px; }
.tg-today-v2 .tg-today-shead__dot.red { background: var(--tg-red); }
.tg-today-v2 .tg-today-shead__dot.green { background: var(--tg-green); }
.tg-today-v2 .tg-today-shead__dot.blue { background: var(--tg-blue); }
.tg-today-v2 .tg-today-shead__n { font-size: 0.8125rem; color: var(--tg-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-today-v2 .tg-today-shead__note { margin-left: auto; font-size: 0.8125rem; color: var(--tg-faint); font-weight: 500; }

.tg-today-v2 .tg-today-priority { background: var(--paper); border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-red); border-radius: var(--tg-r); box-shadow: var(--tg-sh); padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; }
.tg-today-v2 .tg-today-priority__eyebrow { font-size: 0.75rem; font-weight: 700; color: var(--tg-red); letter-spacing: 0.02em; }
.tg-today-v2 .tg-today-priority__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 0; }
.tg-today-v2 .tg-today-priority__who { font-size: 0.875rem; color: var(--tg-muted); font-variant-numeric: tabular-nums; }
.tg-today-v2 .tg-today-priority__ctx { font-size: 0.9375rem; color: var(--tg-ink-2); margin: 8px 0 0; max-width: 62ch; }
.tg-today-v2 .tg-today-priority__owner { font-size: 0.8125rem; color: var(--tg-muted); margin-top: 8px; }
.tg-today-v2 .tg-today-priority__owner b { color: var(--tg-ink); font-weight: 700; }

.tg-today-v2 .tg-today-why { margin-top: 8px; }
.tg-today-v2 .tg-today-why summary { cursor: pointer; font-size: 0.8125rem; color: var(--tg-blue); font-weight: 600; display: inline-block; max-width: 100%; }
.tg-today-v2 .tg-today-why__body { font-size: 0.8125rem; color: var(--tg-muted); margin-top: 6px; max-width: 100%; overflow-wrap: anywhere; }

.tg-today-v2 .tg-today-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.tg-today-v2 .tg-today-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 46px; background: var(--tg-orange); color: #fff; border: 0; border-radius: var(--tg-r-sm); font-size: 1rem; font-weight: 700; padding: 0 20px; text-decoration: none; cursor: pointer; }
.tg-today-v2 .tg-today-btn:hover { background: var(--tg-orange-dark); }
.tg-today-v2 .tg-today-btn2 { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--tg-ink-2); text-decoration: none; }
.tg-today-v2 .tg-today-btn2:hover { color: var(--tg-orange-dark); }

.tg-today-v2 .tg-today-list { background: var(--tg-card); border: 1px solid var(--tg-line); border-radius: var(--tg-r); overflow: hidden; }
.tg-today-v2 .tg-today-list.is-calm { background: #fafafa; }
.tg-today-v2 .tg-today-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 13px 16px; border-top: 1px solid var(--tg-line); color: inherit; text-decoration: none; }
.tg-today-v2 .tg-today-row:first-child { border-top: 0; }
.tg-today-v2 a.tg-today-row:hover { background: #fafafa; }
.tg-today-v2 .tg-today-row__title { grid-column: 1; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tg-today-v2 .tg-today-row__ctx { grid-column: 1; grid-row: 2; font-size: 0.8125rem; color: var(--tg-muted); line-height: 1.35; }
.tg-today-v2 .tg-today-row__side { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 16px; justify-self: end; }
.tg-today-v2 .tg-today-status { font-size: 0.8125rem; color: var(--tg-muted); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.tg-today-v2 .tg-today-status__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--tg-faint); flex: 0 0 7px; }
.tg-today-v2 .tg-today-status.green .tg-today-status__dot { background: var(--tg-green); }
.tg-today-v2 .tg-today-status.blue .tg-today-status__dot { background: var(--tg-blue); }
.tg-today-v2 .tg-today-status.red { color: var(--tg-red); }
.tg-today-v2 .tg-today-status.red .tg-today-status__dot { background: var(--tg-red); }
.tg-today-v2 .tg-today-act { font-size: 0.9375rem; font-weight: 600; color: var(--tg-orange-dark); white-space: nowrap; }
.tg-today-v2 .tg-today-none { font-size: 0.8125rem; color: var(--tg-faint); white-space: nowrap; }
.tg-today-v2 .tg-today-govern { display: flex; align-items: center; gap: 0.55rem; margin-top: 26px; padding: 12px 14px; background: #fafafa; border: 1px solid var(--tg-line); border-radius: var(--tg-r-sm); font-size: 0.8125rem; color: var(--tg-muted); }
.tg-today-v2 a:focus-visible,
.tg-today-v2 button:focus-visible,
.tg-today-v2 summary:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 2px; border-radius: 4px; }

/* ===================== ADMIN OVERVIEW (scoped to .admin-overview-v2) ======= */
.admin-overview-v2 .ov-shead { display: flex; align-items: center; gap: 0.5rem; margin: 26px 0 8px; font-size: 0.9375rem; font-weight: 700; color: var(--tg-ink); }
.admin-overview-v2 .ov-shead__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--tg-faint); flex: 0 0 9px; }
.admin-overview-v2 .ov-shead__dot.red { background: var(--tg-red); }
.admin-overview-v2 .ov-shead__n { font-size: 0.8125rem; color: var(--tg-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-overview-v2 .ov-shead__note { margin-left: auto; font-size: 0.8125rem; color: var(--tg-faint); font-weight: 500; }

.admin-overview-v2 .ov-lead { background: var(--tg-card); border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-red); border-radius: var(--tg-r); box-shadow: var(--tg-sh); padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
.admin-overview-v2 .ov-lead.sev-high { border-left-color: var(--tg-amber); }
.admin-overview-v2 .ov-lead.sev-info { border-left-color: var(--tg-line-2); }
.admin-overview-v2 .ov-lead__t { grid-column: 1; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.admin-overview-v2 .ov-lead__c { grid-column: 1; grid-row: 2; font-size: 0.875rem; color: var(--tg-muted); }
.admin-overview-v2 .ov-lead__c a { color: var(--tg-ink-2); font-weight: 600; border-bottom: 1px solid var(--tg-line-2); }
.admin-overview-v2 .ov-lead__a { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

.admin-overview-v2 .ov-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--tg-orange); color: #fff; border: 0; border-radius: var(--tg-r-sm); font-size: 0.9375rem; font-weight: 700; padding: 0 16px; text-decoration: none; cursor: pointer; }
.admin-overview-v2 .ov-action:hover { background: var(--tg-orange-dark); }

.admin-overview-v2 .ov-attn-list { background: var(--tg-card); border: 1px solid var(--tg-line); border-radius: var(--tg-r); overflow: hidden; margin-top: 8px; }
.admin-overview-v2 .ov-attn-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 12px 16px; border-top: 1px solid var(--tg-line); }
.admin-overview-v2 .ov-attn-row:first-child { border-top: 0; }
.admin-overview-v2 .ov-attn-row__t { grid-column: 1; font-weight: 600; }
.admin-overview-v2 .ov-attn-row__c { grid-column: 1; grid-row: 2; font-size: 0.8125rem; color: var(--tg-muted); }
.admin-overview-v2 .ov-attn-row__a { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-size: 0.9375rem; font-weight: 600; color: var(--tg-orange-dark); white-space: nowrap; }

.admin-overview-v2 .ov-health { display: flex; gap: 0; flex-wrap: wrap; margin: 8px 0 2px; padding: 12px 16px; background: #fafafa; border: 1px solid var(--tg-line); border-radius: var(--tg-r); }
.admin-overview-v2 .ov-health .h { font-size: 0.875rem; color: var(--tg-muted); display: inline-flex; align-items: baseline; gap: 0.5rem; }
.admin-overview-v2 .ov-health .h b { font-size: 1.0625rem; color: var(--tg-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-overview-v2 .ov-health .h.warn b { color: var(--tg-amber); }
.admin-overview-v2 a:focus-visible,
.admin-overview-v2 button:focus-visible,
.admin-overview-v2 summary:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 2px; border-radius: 4px; }

/* --- disabled + pending states (readable, no opacity-only, no hover) --- */
.tg-today-v2 .tg-today-btn:disabled,
.admin-overview-v2 .ov-action:disabled { background: var(--tg-line-2); color: var(--tg-ink-2); box-shadow: none; cursor: not-allowed; }
.tg-today-v2 .tg-today-btn[aria-busy="true"],
.admin-overview-v2 .ov-action[aria-busy="true"] { background: var(--tg-line-2); color: var(--tg-ink-2); box-shadow: none; cursor: progress; }
.tg-today-v2 .tg-today-btn:disabled:hover,
.tg-today-v2 .tg-today-btn[aria-busy="true"]:hover,
.admin-overview-v2 .ov-action:disabled:hover,
.admin-overview-v2 .ov-action[aria-busy="true"]:hover { background: var(--tg-line-2); color: var(--tg-ink-2); }

/* --- mobile: stacking, status wrapping, resilient headings (both surfaces) --- */
@media (max-width: 560px) {
  /* Priority reads before the summary counts by real source order now
     (#today-body, then #today-filters, then #today-rest), so no CSS order
     workaround is needed at any width. */
  .tg-today-v2 .tg-today-row { grid-template-columns: 1fr; gap: 6px; }
  .tg-today-v2 .tg-today-row__side { grid-column: 1; grid-row: auto; justify-self: start; gap: 14px; flex-wrap: wrap; }
  .tg-today-v2 .tg-today-actions { gap: 10px; }
  .tg-today-v2 .tg-today-actions .tg-today-btn { width: 100%; }
  .tg-today-v2 .tg-today-priority__ctx { max-width: none; }
  .tg-today-v2 .tg-today-status,
  .tg-today-v2 .tg-today-none,
  .tg-today-v2 .tg-today-act { white-space: normal; overflow-wrap: anywhere; }
  .tg-today-v2 .tg-today-shead,
  .admin-overview-v2 .ov-shead { flex-wrap: wrap; }
  .tg-today-v2 .tg-today-shead__note,
  .admin-overview-v2 .ov-shead__note { margin-left: 0; flex-basis: 100%; }
  .admin-overview-v2 .ov-lead { grid-template-columns: 1fr; }
  .admin-overview-v2 .ov-lead__a { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 10px; }
  .admin-overview-v2 .ov-lead__a .ov-action { width: 100%; }
  .admin-overview-v2 .ov-attn-row { grid-template-columns: 1fr; gap: 6px; }
  .admin-overview-v2 .ov-attn-row__a { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* --- reduced-motion-safe hover transitions only --- */
@media (prefers-reduced-motion: no-preference) {
  .tg-today-v2 .tg-today-btn,
  .tg-today-v2 .tg-today-btn2,
  .tg-today-v2 a.tg-today-row,
  .admin-overview-v2 .ov-action { transition: background 0.14s ease, color 0.14s ease; }
}

/* --- pre-launch refinements (design review) --- */
/* Shared Router banner: first sentence visible, the rest behind a subtle disclosure. */
.tg-today-v2 .cr-details { display: inline; }
.tg-today-v2 .cr-details > summary { display: inline; list-style: none; cursor: pointer; color: var(--tg-orange-dark); font-weight: 700; }
.tg-today-v2 .cr-details > summary::-webkit-details-marker { display: none; }
.tg-today-v2 .cr-details[open] > summary { margin-right: 4px; }

/* Assign control: an intentional pill with a chevron, not a raw browser select. */
.tg-today-v2 .tg-assign { position: relative; display: inline-flex; }
.tg-today-v2 .tg-assign::after { content: "\25BE"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tg-orange-dark); font-size: 0.8rem; }
.tg-today-v2 .tg-assign .tg-mini-assign { -webkit-appearance: none; appearance: none; border: 1px solid var(--tg-line); border-radius: 8px; background: var(--tg-card); color: var(--tg-orange-dark); font-weight: 600; font-size: 0.875rem; line-height: 1; min-height: 40px; padding: 0 30px 0 12px; cursor: pointer; }
.tg-today-v2 .tg-assign .tg-mini-assign:hover { border-color: var(--tg-orange); }
.tg-today-v2 .tg-assign .tg-mini-assign:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 2px; }

/* Admin Platform health: evenly spaced metric groups with subtle dividers. */
.admin-overview-v2 .ov-health .h { padding: 0 22px; }
.admin-overview-v2 .ov-health .h:first-child { padding-left: 0; }
.admin-overview-v2 .ov-health .h + .h { border-left: 1px solid var(--tg-line-2); }

/* Admin Conversation quality: equal label height so the four figures align. */
.admin-overview-v2 .ov-quality-grid .stat-label { display: block; min-height: 2.4em; }

@media (max-width: 560px) {
  .tg-today-v2 .tg-assign,
  .tg-today-v2 .tg-assign .tg-mini-assign { width: 100%; }
  .admin-overview-v2 .ov-health { gap: 8px; }
  .admin-overview-v2 .ov-health .h { padding: 0; }
  .admin-overview-v2 .ov-health .h + .h { border-left: 0; }
}

/* --- Admin header: keep the topbar on ONE row (the session cluster was
   wrapping to a second row) and give the logo a little more presence. Scoped
   to .admin-console, so the customer classic topbar is unaffected. --- */
.admin-console .topbar-inner { flex-wrap: nowrap; }
.admin-console .brandmark { flex: none; margin-right: 0.6rem; }
.admin-console .brandmark__img { height: 34px; }
.admin-console .nav { flex: 1 1 auto; min-width: 0; gap: 0.1rem; }
.admin-console .nav a { padding: 0.35rem 0.5rem; font-size: 0.88rem; }
.admin-console .topbar-session { flex: none; }

/* --- Assigned responder control (Today) --- */
.tg-today-v2 .tg-resp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tg-today-v2 .tg-resp__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tg-faint); font-weight: 700; }
.tg-today-v2 .tg-resp__name { font-size: 0.9375rem; font-weight: 700; color: var(--tg-ink); }
.tg-today-v2 .tg-resp__change { -webkit-appearance: none; appearance: none; border: 0; background: none; color: var(--tg-orange-dark); font-weight: 600; font-size: 0.8125rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; min-height: 32px; }
.tg-today-v2 .tg-resp__change:hover { text-decoration: underline; }
.tg-today-v2 .tg-resp__change:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 2px; }
.tg-today-v2 .tg-resp__pill { position: relative; display: inline-flex; }
.tg-today-v2 .tg-resp__pill::after { content: "\25BE"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tg-orange-dark); font-size: 0.8rem; }
.tg-today-v2 .tg-resp__select { -webkit-appearance: none; appearance: none; border: 1px solid var(--tg-line); border-radius: 8px; background: var(--tg-card); color: var(--tg-orange-dark); font-weight: 600; font-size: 0.875rem; line-height: 1; min-height: 40px; padding: 0 30px 0 12px; cursor: pointer; }
.tg-today-v2 .tg-resp__select:hover { border-color: var(--tg-orange); }
.tg-today-v2 .tg-resp__select:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 2px; }
.tg-today-v2 .tg-today-priority__resp { margin-top: 10px; }

@media (max-width: 560px) {
  .tg-today-v2 .tg-resp__pill,
  .tg-today-v2 .tg-resp__select { width: 100%; }
}

/* --- Business Today refinement pass: compact priority card, quiet Shared
   Router banner, subordinate "Why this is first", lightweight empty states.
   Additive and scoped to .tg-today-v2; later same-selector rules win over the
   base confidence-layer values above. No base rule is edited or removed. --- */

/* Priority card: tighter, uniform rhythm - dominant but not oversized. */
.tg-today-v2 .tg-today-priority { padding: 14px 18px; gap: 6px; }
.tg-today-v2 .tg-today-priority__ctx { margin: 0; }
.tg-today-v2 .tg-today-priority__resp { margin-top: 2px; }
.tg-today-v2 .tg-today-why { margin-top: 2px; }
.tg-today-v2 .tg-today-actions { margin-top: 8px; }

/* "Why this is first": subordinate to the primary action (muted, not blue). */
.tg-today-v2 .tg-today-why summary { color: var(--tg-muted); font-weight: 500; }

/* Shared Router banner: quiet neutral surface, not a warning tone. The
   truthful copy and Details disclosure in the markup are unchanged. */
.tg-today-v2 #cr-banner { background: var(--tg-card); border: 1px solid var(--tg-line); color: var(--tg-ink-2); padding: 0.4rem 0.75rem; border-radius: 10px; font-size: 0.85rem; }

/* Empty sections: lightweight text, no bordered or elevated card. */
.tg-today-v2 .tg-today-empty { margin: 2px 0 0; padding: 2px; font-size: 0.8125rem; color: var(--tg-faint); }

/* --- Priority card: two-zone decision layout. The situation reads on the left;
   a dedicated action panel sits on the right, separated by a hairline, so the
   card uses its full width with purpose instead of leaving the right half empty. */
.tg-today-v2 .tg-today-priority { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 32px; padding: 18px 22px; }
.tg-today-v2 .tg-today-priority__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tg-today-v2 .tg-today-priority__aside { display: flex; flex-direction: column; align-self: center; gap: 10px; min-width: 220px; border-left: 1px solid var(--tg-line); padding-left: 28px; }
.tg-today-v2 .tg-today-priority__aside .tg-today-btn { width: 100%; }
.tg-today-v2 .tg-today-priority__aside .tg-today-btn2 { justify-content: center; }
.tg-today-v2 .tg-today-priority__num { font-size: 0.9375rem; font-weight: 600; color: var(--tg-ink-2); text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .tg-today-v2 .tg-today-priority { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .tg-today-v2 .tg-today-priority__aside { align-self: stretch; min-width: 0; border-left: 0; padding-left: 0; border-top: 1px solid var(--tg-line); padding-top: 14px; }
}

/* --- Settings: the (i) info tooltips (.tg-tip__pop) were clipped by the
   accordion's overflow:hidden. Let the accordion not clip its popups, and round
   the summary so its hover fill still respects the rounded card corners. --- */
.tg-acc { overflow: visible; }
.tg-acc > summary { border-radius: var(--tg-r); }
.tg-acc[open] > summary { border-radius: var(--tg-r) var(--tg-r) 0 0; }

/* ============================================================================
   BUSINESS TODAY - composed premium pass. Caps the content so a wide canvas
   frames the work instead of stretching it; strengthens type hierarchy; turns
   the priority card into a three-zone command surface. Appended = wins cascade.
   ============================================================================ */

/* 1. Composition + scale: cap, center, deliberate side padding (all app pages). */
.tg-app .tg-topbar,
.tg-app .tg-workspace { max-width: 1560px; margin-inline: auto; width: 100%; }
.tg-app .tg-topbar { padding: 2.1rem 2.75rem 0.5rem; }
.tg-app .tg-workspace { padding: 1.5rem 2.75rem 3rem; gap: 0.6rem; }

/* 2. Header hierarchy: confident greeting, quiet subtitle, tidy utility group. */
.tg-app .tg-greeting h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.tg-app .tg-greeting p { margin-top: 0.35rem; color: var(--tg-muted); font-size: 0.95rem; font-weight: 500; }
.tg-app .tg-greeting p b { color: var(--tg-ink); font-weight: 700; }
.tg-app .tg-topbar__right { gap: 0.85rem; }

/* 3. Priority card: three-zone command surface (NEED | RESPONSIBILITY | ACTION).
   Warm tint, red accent rail, internal hairlines, one soft shadow used only here. */
.tg-today-v2 .tg-today-priority {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) minmax(210px, 260px);
  align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: #fffdf9; border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-red);
  border-radius: var(--tg-r); box-shadow: 0 12px 34px rgba(31, 26, 20, 0.08);
}
.tg-today-v2 .tg-today-priority__need { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 26px; }
.tg-today-v2 .tg-today-priority__resp-zone,
.tg-today-v2 .tg-today-priority__act { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 24px; border-left: 1px solid var(--tg-line); }
.tg-today-v2 .tg-today-priority__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tg-today-v2 .tg-today-priority__title { font-size: 1.6rem; line-height: 1.1; margin: 2px 0 0; }
.tg-today-v2 .tg-today-priority__who { font-size: 0.9rem; }
.tg-today-v2 .tg-today-priority__ctx { font-size: 1rem; margin: 6px 0 0; color: var(--tg-ink-2); }
.tg-today-v2 .tg-today-priority__act .tg-today-btn { width: 100%; min-height: 52px; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(233, 77, 0, 0.24); }
.tg-today-v2 .tg-today-priority__act .tg-today-btn2 { justify-content: center; }
.tg-today-v2 .tg-today-priority__num { font-size: 0.95rem; font-weight: 700; text-align: center; color: var(--tg-ink); font-variant-numeric: tabular-nums; }
.tg-today-v2 .tg-today-priority__resp-zone .tg-today-why summary { font-weight: 600; }

/* 4. Section labels: larger, bolder, more air above, tighter to content. */
.tg-today-v2 .tg-today-shead { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em; margin: 30px 0 8px; }
.tg-today-v2 .tg-today-shead__dot { width: 8px; height: 8px; flex: 0 0 8px; }
.tg-today-v2 .tg-today-shead__n { font-size: 0.85rem; }

/* 4b. Rows: readable titles + support, consistent padding, softer dividers. */
.tg-today-v2 .tg-today-row { padding: 15px 18px; gap: 2px 20px; border-top-color: #eeeef1; }
.tg-today-v2 .tg-today-row__title { font-size: 1.02rem; }
.tg-today-v2 .tg-today-row__ctx { font-size: 0.875rem; }
.tg-today-v2 .tg-today-act { font-size: 0.95rem; font-weight: 700; }

/* 4c. Exception rows: three columns - Opportunity | Reason | Action. */
.tg-today-v2 .tg-today-row.is-ex { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) auto; align-items: center; gap: 0 24px; }
.tg-today-v2 .tg-today-row.is-ex .tg-today-row__title { grid-column: 1; grid-row: 1; }
.tg-today-v2 .tg-today-row__reason { grid-column: 2; grid-row: 1; font-size: 0.875rem; color: var(--tg-muted); line-height: 1.35; }
.tg-today-v2 .tg-today-row__actzone { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; }
.tg-today-v2 .tg-today-act.is-alert { color: var(--tg-red); }

/* 5. Controls: consistent radius + heights; orange only where it means "do this". */
.tg-today-v2 .tg-today-filters .f { padding: 7px 15px; font-size: 0.84rem; border-radius: 11px; }
.tg-today-v2 .tg-today-filters .f b { margin-left: 6px; }
.tg-today-v2 .tg-today-btn { border-radius: 11px; }
.tg-today-v2 .tg-resp__select, .tg-today-v2 .tg-resp__pill { border-radius: 11px; }
.tg-today-v2 .tg-resp__select { min-height: 42px; }
.tg-today-v2 .tg-resp__change { border-radius: 8px; }
.tg-today-v2 .tg-resp__change:hover { background: var(--tg-orange-soft); text-decoration: none; }

/* per-area: Shared Router banner - pale warm neutral, normal-weight, calm. */
.tg-today-v2 #cr-banner { background: #fbf7f1; border: 1px solid #efe7db; color: var(--tg-ink-2); border-radius: 8px; padding: 0.5rem 0.85rem; font-weight: 400; }
.tg-today-v2 #cr-banner strong { font-weight: 600; }

/* per-area: Ready empty - muted text under the heading, restrained padding. */
.tg-today-v2 .tg-today-empty { margin: 0 0 4px; padding: 2px 2px 6px; font-size: 0.9rem; color: var(--tg-muted); }

/* per-area: authority statement - designed, not a card. */
.tg-today-v2 .tg-today-govern { background: none; border: 0; padding: 0; margin-top: 32px; gap: 0.5rem; font-size: 0.85rem; color: var(--tg-ink-2); }
.tg-today-v2 .tg-today-govern svg { width: 15px; height: 15px; color: var(--tg-faint); }

/* mobile: three-zone card and exception rows stack cleanly. */
@media (max-width: 720px) {
  .tg-app .tg-topbar { padding: 1.4rem 1.25rem 0.4rem; }
  .tg-app .tg-workspace { padding: 1rem 1.25rem 2.5rem; }
  .tg-app .tg-greeting h1 { font-size: 1.85rem; }
  .tg-today-v2 .tg-today-priority { grid-template-columns: 1fr; }
  .tg-today-v2 .tg-today-priority__resp-zone,
  .tg-today-v2 .tg-today-priority__act { border-left: 0; border-top: 1px solid var(--tg-line); }
  .tg-today-v2 .tg-today-row.is-ex { grid-template-columns: 1fr; gap: 4px; }
  .tg-today-v2 .tg-today-row__reason { grid-column: 1; grid-row: 2; }
  .tg-today-v2 .tg-today-row__actzone { grid-column: 1; grid-row: 3; justify-self: start; }
}

/* ============================================================================
   ADMIN OVERVIEW - composed premium pass (mirrors Business Today). Scoped to
   .admin-overview-v2 / .admin-console. Appended = wins cascade.
   ============================================================================ */

/* Width: a touch more generous on wide screens; nav stays aligned to content. */
.admin-console .topbar-inner,
.admin-console .page { max-width: 1280px; }

/* Header hierarchy: confident title, quiet subtitle, aligned freshness. */
.admin-overview-v2 .page-head { align-items: flex-end; margin: 0.25rem 0 0.1rem; }
.admin-overview-v2 .page-head h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.028em; line-height: 1.04; }
.admin-overview-v2 .hint { color: var(--tg-muted); font-size: 0.95rem; font-weight: 500; margin: 0.35rem 0 0.4rem; }

/* Section labels: larger, bolder, more air above, tighter to content. */
.admin-overview-v2 .ov-shead { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em; margin: 30px 0 8px; }
.admin-overview-v2 .ov-shead__dot { width: 8px; height: 8px; flex: 0 0 8px; }

/* Promoted attention card: an elevated command surface (the one soft shadow). */
.admin-overview-v2 .ov-lead { padding: 20px 24px; border-radius: var(--tg-r); box-shadow: 0 12px 34px rgba(31, 26, 20, 0.08); align-items: center; gap: 6px 24px; }
.admin-overview-v2 .ov-lead__t { font-size: 1.4rem; letter-spacing: -0.012em; line-height: 1.15; }
.admin-overview-v2 .ov-lead__c { font-size: 0.9rem; margin-top: 2px; }

/* Attention rows: readable, consistent density, softer dividers. */
.admin-overview-v2 .ov-attn-list { border-radius: var(--tg-r); }
.admin-overview-v2 .ov-attn-row { padding: 14px 18px; border-top-color: #eeeef1; }
.admin-overview-v2 .ov-attn-row__t { font-size: 1rem; }
.admin-overview-v2 .ov-attn-row__c { font-size: 0.85rem; }
.admin-overview-v2 .ov-attn-row__a { font-size: 0.95rem; font-weight: 700; }

/* Controls: consistent radius, stronger primary, orange for real actions only. */
.admin-overview-v2 .ov-action { border-radius: 11px; min-height: 46px; font-size: 0.95rem; box-shadow: 0 6px 16px rgba(233, 77, 0, 0.22); }

/* Platform health strip + quality: composed spacing. */
.admin-overview-v2 .ov-health { padding: 16px 20px; border-radius: var(--tg-r); }
.admin-overview-v2 .ov-health .h b { font-size: 1.15rem; }

/* ============================================================================
   SITE-WIDE POLISH - enterprise-grade details across every surface.
   ============================================================================ */

/* Autofilled fields kept the browser's yellow box (no prior styling anywhere).
   Match the field's real surface + text on every form (auth, app, marketing). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--loam);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--loam);
  transition: background-color 9999s ease-in-out 0s;
}
.tg-app input:-webkit-autofill,
.tg-app textarea:-webkit-autofill,
.tg-app select:-webkit-autofill {
  -webkit-text-fill-color: var(--tg-ink);
  caret-color: var(--tg-ink);
}

/* Auth: secondary (ghost) button for two-choice flows (e.g. the reset page's
   "Text me a code instead"), plus spacing between stacked auth buttons. */
.tgauth__btn + .tgauth__btn { margin-top: 0.6rem; }
.tgauth__btn--ghost { background: #fff; color: #15171b; border: 1px solid #dfe1e6; }
.tgauth__btn--ghost:hover { filter: none; background: #fafafa; border-color: #c9ccd2; }
/* Explicit focus ring for auth buttons (were browser-default only). The outline
   sits on the light card via outline-offset, so it reads on both the orange
   primary and the white ghost; the ring shape - not color - is the indicator.
   outline does not affect box size, so there is no layout shift. */
.tgauth__btn:focus-visible,
.tgauth__btn--ghost:focus-visible { outline: 3px solid #15171b; outline-offset: 2px; }

/* ============================================================================
   BUSINESS TODAY - 9/10 refinement pass. Presentation only; scoped, additive.
   ============================================================================ */

/* A1. Priority card: proportionate zones, content top-aligned (no floating
   middle-zone whitespace); the three columns read as aligned regions. */
.tg-today-v2 .tg-today-priority { grid-template-columns: minmax(0, 1.4fr) minmax(200px, 260px) minmax(220px, 280px); }
.tg-today-v2 .tg-today-priority__resp-zone,
.tg-today-v2 .tg-today-priority__act { justify-content: flex-start; gap: 10px; }
.tg-today-v2 .tg-today-priority__title { line-height: 1.12; }

/* B. Eyebrow as a restrained pill instead of bare uppercase text. */
.tg-today-v2 .tg-today-priority__eyebrow { align-self: flex-start; width: max-content; background: #fdeceb; color: var(--tg-red); padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.05em; }

/* B. "Why this is first": a clean, muted native disclosure with a chevron. */
.tg-today-v2 .tg-today-why summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.tg-today-v2 .tg-today-why summary::-webkit-details-marker { display: none; }
.tg-today-v2 .tg-today-why summary::after { content: "\25BE"; font-size: 0.58rem; color: var(--tg-faint); }
.tg-today-v2 .tg-today-why[open] summary::after { content: "\25B4"; }

/* A2. Section headings are now <h2>: hold the rhythm and reset UA heading style;
   the Exceptions dot signals with a muted amber. */
.tg-today-v2 h2.tg-today-shead { margin: 32px 0 8px; }
.tg-today-v2 .tg-today-shead__dot.amber { background: var(--tg-amber); }

/* A3. Summary counts -> honest passive stat labels (no button affordance). */
.tg-today-v2 .tg-today-filters { gap: 20px; margin: 2px 0 6px; }
.tg-today-v2 .tg-today-filters .f { background: none; border: 0; border-radius: 0; padding: 0; color: var(--tg-muted); font-size: 0.85rem; cursor: default; }
.tg-today-v2 .tg-today-filters .f b { font-size: 0.95rem; margin-left: 5px; }

/* A4. Consistent, slightly clearer hover + keyboard focus on interactive rows. */
.tg-today-v2 a.tg-today-row:hover { background: #f7f7f9; }
.tg-today-v2 a.tg-today-row:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: -2px; }

/* Mobile: keep the pill-free chips tidy and the stacked card zones aligned. */
@media (max-width: 720px) {
  .tg-today-v2 .tg-today-priority__resp-zone,
  .tg-today-v2 .tg-today-priority__act { padding-top: 14px; }
}

/* ============================================================================
   BUSINESS TODAY - ambiguity/clarity pass.
   ============================================================================ */

/* The priority card MUST stack on mobile. The 9/10 grid rule above is a non-media
   rule, so re-assert the single-column stack after it (this was the 390px
   blocker). Also let the card reveal the "Why this is first" tooltip rather than
   clipping it (zones have no background, so dropping the clip is safe). */
.tg-today-v2 .tg-today-priority { overflow: visible; }
@media (max-width: 720px) {
  .tg-today-v2 .tg-today-priority { grid-template-columns: 1fr; }
}

/* "Why this is first": a quiet label plus an (i) that reveals the real reasons
   on hover/focus/tap (reuses the shared .tg-tip tooltip). */
.tg-today-v2 .tg-today-why { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.tg-today-v2 .tg-today-why__label { font-size: 0.8125rem; color: var(--tg-muted); font-weight: 600; }
.tg-today-v2 .tg-today-why .tg-tip { margin-left: 0; color: var(--tg-faint); }
.tg-today-v2 .tg-today-why .tg-tip__pop strong { display: block; margin-bottom: 3px; }

/* ============================================================================
   BUSINESS TODAY - cohesion pass: two-part priority card + one row grammar.
   ============================================================================ */

/* Priority card: SITUATION (left, reads top-to-bottom) + ACTION panel (right).
   No floating middle zone / void. Overrides the earlier three-zone grid. */
.tg-today-v2 .tg-today-priority { grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); align-items: stretch; }
.tg-today-v2 .tg-today-priority__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 22px 26px; }
.tg-today-v2 .tg-today-priority__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; }
.tg-today-v2 .tg-today-priority__act { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 24px; border-left: 1px solid var(--tg-line); }
.tg-today-v2 .tg-today-priority__meta .tg-today-why { margin-top: 0; }

/* One row grammar for Ready / Handling / Exceptions: OPPORTUNITY | STATE | ACTION. */
.tg-today-v2 .tg-today-row--3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.35fr) auto; align-items: center; gap: 0 22px; }
.tg-today-v2 .tg-today-row--3 .tg-today-row__title { grid-column: 1; grid-row: 1; }
.tg-today-v2 .tg-today-row__sub { grid-column: 1; grid-row: 2; font-size: 0.8rem; color: var(--tg-faint); margin-top: 1px; }
.tg-today-v2 .tg-today-row__state { grid-column: 2; grid-row: 1 / span 2; font-size: 0.875rem; color: var(--tg-muted); display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.35; }
.tg-today-v2 .tg-today-row__actzone { grid-column: 3; grid-row: 1 / span 2; justify-self: end; display: flex; align-items: center; }
.tg-today-v2 .tg-today-row__state .tg-today-status__dot.green { background: var(--tg-green); }
.tg-today-v2 .tg-today-row__state .tg-today-status__dot.blue { background: var(--tg-blue); }
.tg-today-v2 .tg-today-row__state .tg-today-status__dot.amber { background: var(--tg-amber); }
.tg-today-v2 .tg-today-row__state .tg-today-status__dot.red { background: var(--tg-red); }

@media (max-width: 560px) {
  .tg-today-v2 .tg-today-row--3 { grid-template-columns: 1fr; gap: 3px; }
  .tg-today-v2 .tg-today-row__sub,
  .tg-today-v2 .tg-today-row__state,
  .tg-today-v2 .tg-today-row__actzone { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ============================================================================
   BUSINESS TODAY - refined horizontal priority card (pills | owner | actions).
   Overrides the earlier priority-card layouts.
   ============================================================================ */
.tg-today-v2 .tg-today-priority {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 18px;
  padding: 0; overflow: visible;
  background: linear-gradient(90deg, #fdeceb 0%, #fffdfb 44%, #ffffff 100%);
  border: 1px solid var(--tg-line); border-left: 4px solid var(--tg-red);
  border-radius: var(--tg-r); box-shadow: 0 12px 34px rgba(31, 26, 20, 0.08);
}
.tg-today-v2 .tg-today-priority__lead { padding: 20px 24px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.tg-today-v2 .tg-today-priority__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tg-today-v2 .tg-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 999px; }
.tg-today-v2 .tg-pill--time { background: #f5ecd7; color: #886b1c; }
.tg-today-v2 .tg-pill--red { background: #fbe2df; color: var(--tg-red); }
.tg-today-v2 .tg-pill--amber { background: #fce9d6; color: #98670f; }
.tg-today-v2 .tg-pill__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.tg-today-v2 .tg-today-priority__title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 2px 0 0; }
.tg-today-v2 .tg-today-priority__loc { font-size: 0.85rem; color: var(--tg-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tg-today-v2 .tg-today-priority__pin { display: inline-flex; align-items: center; gap: 4px; }
.tg-today-v2 .tg-today-priority__pills .tg-today-why { margin: 0; display: inline-flex; }
.tg-today-v2 .tg-today-priority__pills .tg-tip { color: var(--tg-faint); margin-left: 0; }

.tg-today-v2 .tg-today-owner { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 14px; text-align: center; border-left: 1px solid rgba(31, 26, 20, 0.06); }
.tg-today-v2 .tg-today-owner__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tg-faint); font-weight: 700; margin-bottom: 2px; }
.tg-today-v2 .tg-today-owner__avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--tg-orange-soft); color: var(--tg-orange-dark); display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.tg-today-v2 .tg-today-owner__avatar.is-empty { background: var(--tg-line); }
.tg-today-v2 .tg-today-owner__name { font-weight: 700; font-size: 0.95rem; }
.tg-today-v2 .tg-today-owner__state { font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.tg-today-v2 .tg-today-owner__state.is-assigned { color: var(--tg-green); }
.tg-today-v2 .tg-today-owner__state.is-unassigned { color: var(--tg-amber); }
.tg-today-v2 .tg-today-owner__state .tg-today-status__dot { background: currentColor; }

.tg-today-v2 .tg-today-priority__actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
.tg-today-v2 .tg-today-priority__actions2 { display: flex; gap: 10px; }
.tg-today-v2 .tg-today-priority__actions .tg-today-btn { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.875rem; min-height: 50px; gap: 8px; white-space: nowrap; }
.tg-today-v2 .tg-today-btn3 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--tg-line); border-radius: 11px; font-weight: 700; font-size: 0.85rem; color: var(--tg-ink-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.tg-today-v2 .tg-today-btn3:hover { border-color: var(--tg-orange); color: var(--tg-orange-dark); }
.tg-today-v2 .tg-today-btn3:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 2px; }
.tg-today-v2 .tg-today-priority__actions .tg-resp { display: inline-flex; align-items: center; }

@media (max-width: 820px) {
  .tg-today-v2 .tg-today-priority { grid-template-columns: 1fr; }
  .tg-today-v2 .tg-today-owner { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; padding: 12px 24px; border-left: 0; border-top: 1px solid var(--tg-line); text-align: left; }
  .tg-today-v2 .tg-today-owner__label { margin-bottom: 0; }
  .tg-today-v2 .tg-today-priority__actions { padding: 16px 24px; border-top: 1px solid var(--tg-line); }
  .tg-today-v2 .tg-today-priority__actions .tg-today-btn { width: 100%; }
  .tg-today-v2 .tg-today-priority__actions2 { flex-wrap: wrap; }
  .tg-today-v2 .tg-today-priority__actions2 .tg-today-btn3,
  .tg-today-v2 .tg-today-priority__actions2 .tg-resp { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   SHARED CLASSIC TOP BAR: deliberate mobile navigation.
   Desktop (>= 861px) is unchanged - the Menu control is hidden and .nav stays
   the horizontal row it already was. At <= 860px the cramped overflow scroller
   is replaced by a labeled Menu disclosure that expands .nav into a full-width
   vertical panel. Role-gated links, active states (.nav a.on), the session
   cluster, and Sign out are all preserved; only presentation changes.
--------------------------------------------------------------------------- */
.nav-toggle {
  display: none;                 /* desktop: no menu control at all */
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--bark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.nav-toggle__icon { width: 20px; height: 20px; flex: none; }
.admin-console .nav-toggle { color: var(--tg-side-ink); border-color: var(--tg-side-line); }
.admin-console .nav-toggle:hover { color: #fff; border-color: var(--tg-side); }

@media (max-width: 860px) {
  /* Override the desktop-only .admin-console nowrap (line ~2492) at this
     breakpoint so the nav panel can wrap to its own row. Matched specificity,
     later in source, and scoped to the media query keep desktop unchanged. */
  .topbar-inner,
  .admin-console .topbar-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .topbar-session { order: 3; margin-left: 12px; }
  .topbar .nav {
    order: 4;
    flex: 0 0 100%;              /* shrink:0 forces a clean wrap to its own row */
    width: 100%;
    display: none;               /* collapsed by default; JS opens it */
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow-x: visible;         /* horizontal scrolling is no longer the pattern */
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .admin-console .topbar .nav { border-top-color: var(--tg-side-line); }
  .topbar .nav.is-open { display: flex; }
  .topbar .nav a {
    padding: 0.7rem 0.85rem;     /* ~44px tall touch targets in the panel */
    border-radius: 10px;
    font-size: 0.98rem;
  }
}

/* Phone widths: the signed-in user chip is discretionary and would otherwise
   force the top row (brand + Menu + chip + Sign out) to overflow. Drop the chip
   only here; brand identity and the Sign out control both remain visible. */
@media (max-width: 560px) {
  .topbar-session .whoami { display: none; }
}

/* Conversation quality: deterministic column counts so the four metrics never
   render as 3 + 1. Base is a balanced 2 x 2; four-up only when there is genuine
   room (>= 720px, which keeps the current desktop and 768px four-column view).
   1fr columns shrink to fit, so there is no horizontal overflow at any width.
   Overrides .stat-grid's auto-fit for this grid only. CSS-only; markup, values,
   labels, and formulas are untouched. */
.admin-overview-v2 .ov-quality-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .admin-overview-v2 .ov-quality-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Member read-only explanation on owner-only pages (Settings). Presentation
   only; the owner-only write is enforced server-side. */
.tg-readonly-note {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--tg-blue-soft);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-sm, 8px);
  color: var(--tg-ink-2);
  font-size: 0.9rem;
}
/* The member read-only wrapper is a layout-neutral fieldset: strip its default
   chrome so the page is unchanged, and keep disabled values at readable
   contrast (do not fade the text). Only members get this wrapper. */
.tg-settings-ro { border: 0; margin: 0; padding: 0; min-width: 0; }
.tg-settings-ro:disabled input,
.tg-settings-ro:disabled textarea,
.tg-settings-ro:disabled select {
  color: var(--tg-ink-2);
  -webkit-text-fill-color: var(--tg-ink-2);
  opacity: 1;
  background: #f6f5f2;
}