/* Teddy AuthorityMap V2 — tab chrome.
   Layered after styles.css, v2-overlay.css, polish.css (highest priority).
   Owns: shell width, sticky-safe overflow, the (light) tab bar, panel show/hide,
   reveal neutralization, the Overview layout, the This-Week grids, and the
   Visibility clarity pass. All inner components inherit brand styles. */

.v2-shell { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* --- Sticky fix ------------------------------------------------------------
   The inherited sheets set `overflow-x: hidden` on html/body/main to contain
   the old hero aurora. `hidden` turns the root into a scroll container, which
   silently breaks `position: sticky`. `clip` contains horizontal overflow the
   same way WITHOUT establishing a scroll container, so the tab bar can stick. */
html, body, main { overflow-x: clip; }

/* --- Tab bar: light, high-contrast, part of the warm page ------------------ */
.tab-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: .35rem;
  margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem));
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in oklab, var(--paper, #fff) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-bottom: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 1px 0 rgba(17, 24, 39, .02), 0 10px 24px -20px rgba(17, 24, 39, .35);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar [role="tab"] {
  flex: 0 0 auto; padding: .5rem 1.05rem; border-radius: 999px;
  font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: .002em;
  color: var(--muted-2, #6b7280); background: transparent;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast, 140ms) var(--ease-out, ease),
              color var(--dur-fast, 140ms) var(--ease-out, ease);
}
.tab-bar [role="tab"]:hover {
  color: var(--ink, #111827);
  background: var(--primary-50, rgba(234, 88, 12, .06));
}
.tab-bar [role="tab"]:focus-visible { outline: 2px solid var(--primary, #ea580c); outline-offset: 2px; }
.tab-bar [role="tab"][aria-selected="true"] {
  color: #fff; font-weight: 700;
  background: var(--primary-700, #c2410c);
  box-shadow: 0 1px 2px rgba(194, 65, 12, .35), 0 6px 16px -8px rgba(194, 65, 12, .55);
}

/* --- panels --- */
[role="tabpanel"] { padding: clamp(1.5rem, 4vw, 2.75rem) 0; }
[role="tabpanel"][hidden], [role="tabpanel"]:not(.is-active) { display: none; }
[role="tabpanel"]:focus { outline: none; }
/* keep anchored content clear of the sticky bar */
[role="tabpanel"] [id], .section-heading { scroll-margin-top: 72px; }

/* Reveal animations are scroll-driven in app.js and never fire on hidden
   panels — show everything immediately in V2. */
.reveal { opacity: 1 !important; transform: none !important; }

/* ===========================================================================
   OVERVIEW — the panel is a vertical stack, NOT the inherited 2-col hero grid.
   The hero card holds only copy + board; everything below is full-width.
   =========================================================================== */
.overview-panel { display: block; }

.overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(330px, 0.82fr);
  gap: clamp(1.5rem, 3.2vw, 2.75rem);
  align-items: stretch;
  padding: clamp(1.5rem, 3.6vw, 3rem);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 18px;
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(234, 88, 12, .07), transparent 48%),
    linear-gradient(135deg, var(--paper, #fff) 0%, #f6efe3 100%);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 30px 70px -42px rgba(17, 24, 39, .28);
}
.overview-hero .hero-copy { align-content: center; max-width: 56ch; }
.overview-hero .hero-board {
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(255, 255, 255, .55);
}

/* readout KPIs — full-width band, comfortable */
.overview-panel .client-readout {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.65rem, 1.3vw, 1rem);
  margin: clamp(1.1rem, 2.6vw, 1.9rem) 0 0;
}

/* "What's working" / "What's blocking" — full-width, two-up */
.overview-panel .overview-signals {
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.35rem);
  margin-top: clamp(1.1rem, 2.6vw, 1.9rem);
}
.overview-panel .overview-thisweek {
  grid-template-columns: 1fr;
  margin-top: clamp(.85rem, 1.8vw, 1.2rem);
}
.overview-panel .overview-thisweek .exec-card { max-width: none; }

@media (max-width: 880px) {
  .overview-hero { grid-template-columns: 1fr; }
  .overview-panel .overview-signals { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .overview-panel .client-readout { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   THIS WEEK — grouped 2-column action cards + escalations on desktop.
   app.js (V2 path) wraps cards in .tw-group[data-kind] under .tw-group-label.
   =========================================================================== */
/* When the this-week filter is active, app.js's cards are regrouped (by tabs.js)
   into .tw-group blocks under labels. #fixQueue inherits a 3-col gallery grid
   (styles.css .fix-queue) that strands those groups in separate columns — so
   when groups are present, stack the queue vertically. Flat filters (All /
   Fix now / Needs approval / Defer) have no .tw-group and keep the 3-col grid. */
#panel-this-week .fix-queue:has(.tw-group) { display: block; }
#panel-this-week .fix-queue:has(.tw-group) > .tw-group { margin-bottom: 1rem; }

#panel-this-week .tw-group-label {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2, #6b7280); margin: 1.25rem 0 .5rem;
}
#panel-this-week .tw-group { display: grid; gap: .75rem; grid-template-columns: 1fr; }
#panel-this-week .escalations-panel { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  #panel-this-week .tw-group[data-kind="alone"] { grid-template-columns: 1fr 1fr; }
  #panel-this-week .escalations-panel { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   VISIBILITY — clarity pass.
   The content is strong but reads as one dense wall: the four lead panels butt
   together with no gap and there's no visual break between the page's narrative
   "acts". Give it consistent rhythm + clear act dividers so a first-time viewer
   can follow: the verdict → the two gates → the evidence → what buyers say →
   the benchmarks. Scoped entirely to #panel-visibility; content untouched. */
#panel-visibility > * { margin-top: 0; margin-bottom: 0; }
#panel-visibility > * + * { margin-top: clamp(1rem, 2vw, 1.6rem); }

/* a new act: generous space + a hairline rule above each section heading */
#panel-visibility > .section-heading:not(:first-child) {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line, #e5e7eb);
}
/* a heading hugs the content it introduces */
#panel-visibility > .section-heading + * { margin-top: clamp(.75rem, 1.6vw, 1.1rem); }
/* the reframe callout pairs tightly with the opening headline */
#panel-visibility > .reframe-callout { margin-top: clamp(.75rem, 1.6vw, 1.1rem); }

/* calmer, consistent panel surfaces; quieter eyebrow labels */
#panel-visibility .panel { border-radius: 14px; }
#panel-visibility .utility { color: var(--muted-2, #6b7280); }

/* breathing room inside the two tallest, densest panels */
#panel-visibility .pilot-grid { gap: clamp(1.25rem, 3vw, 2.25rem); }
#panel-visibility .intent-board > * + * { margin-top: clamp(.5rem, 1.2vw, .85rem); }

/* merged "Why" card: the two gates → divider → the gap, measured.
   inclusion-floor + sov-matrix are now ONE panel; the old standalone
   "What this means" panel is folded into the matrix note + gate copy. */
#panel-visibility .visibility-why { display: grid; gap: clamp(1.4rem, 3vw, 2.1rem); }
#panel-visibility .visibility-why .inclusion-floor { border-left: 0; padding-left: 0; }
#panel-visibility .why-divider { height: 1px; background: var(--line, #e5e7eb); }
#panel-visibility .visibility-why .why-matrix { display: grid; gap: 14px; }

/* relocated protect-not-grow discipline (from the deleted insight panel) */
#panel-visibility .reddit-discipline {
  margin: 12px 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted, #4b5563);
}
#panel-visibility .reddit-discipline b { color: var(--ink, #111827); }

/* ===========================================================================
   DARK RE-SKIN — V2 chrome patches
   The shared dark layer (../dashboard-dark.css) remaps the design tokens and
   patches the shared components. This block patches the V2-ONLY chrome (tab
   bar, overview hero + board, score ring, hero CTAs) and the literals those
   components hard-code that the token remap can't reach: orange glows, the
   cream hero fill, the near-white inner board, and the blue "action" accent —
   all resolved to the single copper accent. Scoped to [data-theme="dark"]; the
   light control and the sample / V1 dashboards (which never load this file)
   are untouched.
   =========================================================================== */

/* --- Tab bar: dark glass + copper active pill (kills salmon + orange) ------ */
[data-theme="dark"] .tab-bar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 14px 30px -24px rgba(0, 0, 0, .8);
}
[data-theme="dark"] .tab-bar [role="tab"] { color: var(--muted); }
[data-theme="dark"] .tab-bar [role="tab"]:hover {
  color: var(--ink);
  background: rgba(204, 128, 102, .10);   /* was an undefined --primary-50 → orange */
}
[data-theme="dark"] .tab-bar [role="tab"][aria-selected="true"] {
  color: #0a0d12;                          /* dark label on copper, not white-on-copper */
  background: linear-gradient(180deg, #e7a184 0%, #cc8066 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
              0 8px 20px -8px rgba(204, 128, 102, .55);
}

/* --- Overview hero: cream + orange → dark surface + copper corner glow ----- */
[data-theme="dark"] .overview-hero {
  border-color: var(--line);
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(204, 128, 102, .10), transparent 48%),
    linear-gradient(135deg, var(--paper) 0%, var(--bg-soft) 100%);
  box-shadow: var(--shadow-card);
}
/* the inner board read as a near-white frosted panel (rgba(255,255,255,.55)) */
[data-theme="dark"] .overview-hero .hero-board {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(204, 128, 102, .06), transparent 55%),
    rgba(255, 255, 255, .022);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .hero-board::before {
  background: linear-gradient(180deg, rgba(204, 128, 102, .10), rgba(204, 128, 102, 0));
}

/* --- Score ring: copper arc, neutral dark track, copper halo --------------- */
[data-theme="dark"] .score-ring {
  background: conic-gradient(
    var(--primary-700) calc(var(--score) * 1%),
    rgba(255, 255, 255, .08) 0
  ) !important;
}
[data-theme="dark"] .score-ring::after {
  background: radial-gradient(closest-side, rgba(204, 128, 102, .20), transparent 70%);
}

/* --- Primary CTA: brand white pill + dark label + copper glow -------------- */
[data-theme="dark"] .button.primary {
  background: #ffffff;
  color: #0a0d12;
  border-color: transparent;
  box-shadow: var(--shadow-cta);
}
[data-theme="dark"] .button.primary:hover {
  background: #ffffff;
  box-shadow: 0 18px 60px -16px rgba(204, 128, 102, .5);
}
[data-theme="dark"] .button.secondary {
  background: rgba(255, 255, 255, .04);
}

/* --- Live-pill pulse: orange → copper ------------------------------------- */
[data-theme="dark"] .live-pill .dot {
  box-shadow: 0 0 0 4px rgba(204, 128, 102, .18);
  animation-name: v2-pulse-copper;
}
@keyframes v2-pulse-copper {
  0%, 100% { box-shadow: 0 0 0 4px rgba(204, 128, 102, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(204, 128, 102, 0); }
}

/* --- "Action / This week" accent: blue → copper --------------------------- */
[data-theme="dark"] .readout-tile--next { border-top-color: var(--primary); }
[data-theme="dark"] .exec-card--action .exec-card__icon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, #cc8066 0%, #a8654d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 4px 10px -2px rgba(204, 128, 102, .34);
}

/* --- Board-grid stat tiles: cream fill → dark; blue accent → copper -------- */
[data-theme="dark"] .board-grid.premium > div {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
}
[data-theme="dark"] .board-grid.premium > div:nth-child(1)::before { background: var(--primary); }

/* --- Solid-black ChatGPT/OpenAI marks → white on dark (engine strip, failure
       cards, snippet engines — anywhere the black PNG would vanish) ---------- */
[data-theme="dark"] img[src*="chatgpt"],
[data-theme="dark"] img[src*="openai"] { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------------------
   THIS WEEK tab
   --------------------------------------------------------------------------- */
/* Focus cards used an orange border + 3px top bar + chip/expander tints */
[data-theme="dark"] .fix-card[data-focus="this-week"] {
  border-color: rgba(204, 128, 102, .34);
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--primary);
}
[data-theme="dark"] .badge.action-focus { background: rgba(204, 128, 102, .16); }
[data-theme="dark"] .fix-card__details summary::after { background: rgba(204, 128, 102, .14); }

/* Active filter pill: clean neutral light pill (secondary to the copper tab),
   replacing the leftover slate→white gradient that risked white-on-light text */
[data-theme="dark"] .filter-button.is-selected,
[data-theme="dark"] .filter-button.is-selected:hover {
  background: var(--ink);
  color: #0a0d12;
  border-color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 6px 16px -10px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------------
   IDENTITY tab — the entity map was a cream/white panel with a blue radial
   --------------------------------------------------------------------------- */
[data-theme="dark"] .entity-map {
  background:
    radial-gradient(circle at 50% 18%, rgba(106, 160, 255, .10), transparent 30%),
    linear-gradient(180deg, var(--bg-soft), var(--paper));
}
[data-theme="dark"] .fragmented .entity-map {
  background:                              /* conflict = subtle red glow on dark */
    radial-gradient(circle at 50% 44%, rgba(239, 126, 114, .14), transparent 30%),
    linear-gradient(180deg, var(--bg-soft), var(--paper));
}
[data-theme="dark"] .aligned .entity-map {
  background:                              /* alignment = subtle emerald glow */
    radial-gradient(circle at 50% 44%, rgba(95, 211, 154, .14), transparent 30%),
    linear-gradient(180deg, var(--bg-soft), var(--paper));
}
[data-theme="dark"] .entity-center {
  border-color: var(--line);
}

/* ---------------------------------------------------------------------------
   VISIBILITY tab — data-viz
   --------------------------------------------------------------------------- */
/* Magnitude bars (engine hit-rate, buyer-intent, clarity) ended in orange
   (#f97316). Single-series, so → a pure copper gradient. */
[data-theme="dark"] .engine-bars .track > span,
[data-theme="dark"] .intent-board .intent-track > span,
[data-theme="dark"] .track > span,
[data-theme="dark"] .intent-track > span,
[data-theme="dark"] .clarity-track > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 38%),
    linear-gradient(90deg, var(--primary-700) 0%, var(--primary) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 0 .5px rgba(204, 128, 102, .22),
    0 4px 8px -4px rgba(204, 128, 102, .4) !important;
}
[data-theme="dark"] .clarity-row--you .clarity-track > span {
  background: linear-gradient(90deg, #e7a184 0%, #cc8066 100%) !important;
}

/* Share-of-voice matrix: client (Teddy) = copper hero, competitor (Jason) =
   neutral white-alpha; the original blue competitor bar was a 2nd accent. */
[data-theme="dark"] .sov-mtrack { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .sov-mtrack--jason > span { background: rgba(255, 255, 255, .30); }
[data-theme="dark"] .sov-mtrack--teddy > span { background: var(--primary); }
[data-theme="dark"] .sov-mrow.is-featured .sov-mtrack--teddy > span { background: var(--primary-700); }

/* ---------------------------------------------------------------------------
   PLAYBOOK tab — fold remaining orange (#f97316 / rgba(234,88,12)) into copper
   --------------------------------------------------------------------------- */
/* "Projected after fixes" snippet: stamp top-border, stripe glow, hover edge */
[data-theme="dark"] .snippet-stamp--projected { border-top-color: rgba(204, 128, 102, .4); }
[data-theme="dark"] .snippet-card--after::before { box-shadow: 0 1px 12px -2px rgba(204, 128, 102, .42); }
[data-theme="dark"] .snippet-card--after:hover { border-color: rgba(204, 128, 102, .45); }
/* WSHFC "make it readable" target step marker started at orange */
[data-theme="dark"] .wshfc-callout__path li.is-target::before {
  background: linear-gradient(160deg, #e7a184 0%, var(--primary) 60%, var(--primary-700) 100%) !important;
}
[data-theme="dark"] .wshfc-callout__path li.is-target:hover { background: rgba(204, 128, 102, .12); }

/* ---------------------------------------------------------------------------
   PROOF tab — heatmap: fold the teal "anchored" state into the green ramp
   --------------------------------------------------------------------------- */
[data-theme="dark"] .heat-cell.anchored {
  background: #117a4d;
  color: #eafff4;
  border-color: rgba(95, 211, 154, .5);
}