/* ---- R1. Header: floating pill becomes a full-width bar --------------
   Sticky/z-index/backdrop-filter positions are untouched (see the notes on
   .site-header above) — only paint changes: square bar, hairline bottom,
   1280 content measure, 80px rhythm like the mockup. */
.site-header{padding:0;}
.tdt-header-inner{max-width:1280px;border:0;border-bottom:1px solid var(--header-line);
  border-radius:0;padding:0 48px;min-height:80px;
  box-shadow:0 1px 8px rgba(0,0,0,.04);}
@media(max-width:1100px){.tdt-header-inner{padding:0 24px;min-height:72px;}}
@media(max-width:640px){.tdt-header-inner{padding:0 16px;min-height:64px;}}

/* ---- R2. Logo mark: gradient flattens to brand blue -------------------
   WHY literal: matches kit Primary (#003BD7) exactly; white glyphs on it
   clear AA in both themes because the mark never re-themes. */
.tdt-logo__mark #tdtLogoGrad stop:first-child{stop-color:#003BD7;}
.tdt-logo__mark #tdtLogoGrad stop:last-child{stop-color:#003BD7;}

/* ---- R3. Nav pills + current-section pill ------------------------------
   Replaces the inset-underline .is-current above with the mockup's filled
   pill (background shift + weight, so state is never colour-alone). */
.tdt-nav a,.tdt-nav-dropdown__trigger{border-radius:8px;}
.tdt-nav a.is-current,
.tdt-nav-dropdown__trigger.is-current{background:var(--wash)!important;color:var(--ink)!important;font-weight:600;box-shadow:none!important;}
.tdt-nav-dropdown__menu a.is-current{background:var(--wash)!important;box-shadow:none;}

/* ---- R4. "New" badge: green flag becomes the mockup's purple tint ---- */
.tdt-nav-badge{background:var(--sponsored-bg);color:var(--sponsored);}

/* ---- R5. Search toggle doubles as the search field ---------------------
   Markup (placeholder + Ctrl-K) comes from snippet 392; here it becomes a
   230px muted field on wide screens and falls back to the icon button. */
.tdt-search-toggle{gap:8px;border-radius:8px;}
.tdt-search-toggle__ph{font-size:13px;font-weight:400;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tdt-search-toggle kbd{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--sub);background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;line-height:1.5;white-space:nowrap;}
@media(min-width:1100px){
  .tdt-search-toggle{width:230px;height:40px;padding:0 8px 0 12px;justify-content:flex-start;background:var(--wash)!important;border-color:transparent;}
  .tdt-search-toggle:hover{background:var(--paper)!important;border-color:var(--control-line);color:var(--ink)!important;}
  .tdt-search-toggle__ph{flex:1 1 auto;text-align:left;}
}
@media(max-width:1099.98px){.tdt-search-toggle__ph,.tdt-search-toggle kbd{display:none;}}

/* ---- R6. Header CTAs: Newsletter ghost, Submit Tool primary ------------
   WHY 8px, not pill: mockup direction, also used on /for-makers/ —
   conflicts with rule 16 ("every button is a pill"); revisit if pills return. */
.tdt-nav a.tdt-cta{border-radius:8px;box-shadow:0 1px 2px rgba(0,59,215,.18);}
.tdt-nav a.tdt-cta[href*="/newsletter"]{background:transparent;box-shadow:none;color:var(--ink)!important;}
.tdt-nav a.tdt-cta[href*="/newsletter"]:hover{background:var(--header-hover);}
.tdt-nav a.tdt-cta[href*="/submit-tool"]{background:#003BD7;color:#fff!important;}
.tdt-nav a.tdt-cta[href*="/submit-tool"]:hover{background:#003BD7;filter:brightness(1.12);}

/* ---- R7. Account avatar ------------------------------------------------ */
.tdt-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:#003BD7;color:#fff!important;text-decoration:none!important;}
.tdt-avatar svg{width:18px;height:18px;}
.tdt-avatar:hover{filter:brightness(1.12);color:#fff!important;}

/* ---- R8. Sponsor strip: purple offer becomes the notice bar ------------
   Height is preserved (~39px) so snippet 378's 40px header offset stays exact. */
.tdt-strip--offer{background:var(--wash);border-bottom:1px solid var(--line);}
.tdt-strip .tdt-banner{max-width:1280px;margin:0 auto;padding-left:48px;padding-right:48px;}
@media(max-width:1100px){.tdt-strip .tdt-banner{padding-left:24px;padding-right:24px;}}
@media(max-width:640px){.tdt-strip .tdt-banner{padding-left:16px;padding-right:16px;}}
.tdt-banner__dot{background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18);}
.tdt-banner__flag{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);white-space:nowrap;}
.tdt-banner__note{margin-left:12px;flex:none;font-size:11px;color:var(--sub);white-space:nowrap;}
@media(max-width:1279.98px){.tdt-banner__note{display:none;}}
@media(max-width:640px){.tdt-banner__flag{display:none;}}
.tdt-banner__go{color:var(--ink);}

/* ---- R9. Mobile nav current states -------------------------------------- */
.tdt-mobile-nav a.is-current{background:var(--wash);font-weight:700;}
.tdt-mobile-nav__group-trigger.has-current{background:var(--wash);}