/* Story 63.8: the app chrome under the staff-only new-design switch.
   Linked from templates/base.html only when the switch is on. Chrome only:
   the top bar (DW-73 mobile menu, DW-74 1024 fit), the user menu, the OI
   badge, the footer, Django messages and the three global includes (sync
   banner, beta banner, feedback modal). Nothing here restyles page content.
   Story 11 merges this file into the token file.
   Epic 63 fix-5 (fix-mockups.md other pages rows 1, 2 and 14): Sync is a
   whole-button state again (fills from the tokens, the old pulse in market
   hours), and the username is never cut at 992-1279px. */

/* ---------- Top bar ---------- */
html[data-design="new"] .navbar-brand {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: 24px;
}
html[data-design="new"] .navbar .nav-link {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border-radius: var(--tt-radius-full);
}

/* DW-74: at 992-1279px the frozen tail's 52px per link and 48px brand
   margin push the bar past the viewport. Epic 63 fix-5 (row 14): the room
   comes from 13px link text and 6px link padding, so the username is shown
   whole; a name too long for one line wraps to a second line, never cut. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  html[data-design="new"] .navbar-brand {
    margin-right: 8px;
  }
  html[data-design="new"] .navbar .navbar-nav .nav-item {
    margin-right: 0;
  }
  html[data-design="new"] .navbar .navbar-nav .nav-link {
    padding: 8px 6px;
    margin: 0;
    font-size: 13px;
  }
  html[data-design="new"] .navbar .dropdown.ms-3 {
    margin-left: 8px !important; /* overrides Bootstrap `.ms-3` (margin-left: 1rem !important) */
  }
  html[data-design="new"] #navbar-sync-button.stripe-action {
    padding: 8px 10px;
  }
  html[data-design="new"] #userDropdown {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    font-size: 13px;
    line-height: 16px;
    vertical-align: middle;
  }
  html[data-design="new"] #userDropdown i {
    flex-shrink: 0;
  }
  html[data-design="new"] #userDropdown::after {
    flex-shrink: 0;
    margin-left: 4px;
  }
}

/* DW-74: the user menu is .dropdown-menu-end, but the tail's
   `.dropdown-menu { left: 0 }` opens it to the right, off the viewport. */
html[data-design="new"] .navbar .dropdown-menu.dropdown-menu-end {
  left: auto;
  right: 0;
}
html[data-design="new"] .navbar .dropdown-menu {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border-neutral);
  box-shadow: var(--tt-shadow-lg);
}
html[data-design="new"] .navbar .dropdown-item {
  color: var(--tt-text-primary);
  font-size: 14px;
}
html[data-design="new"] .navbar .dropdown-item:hover,
html[data-design="new"] .navbar .dropdown-item:focus {
  background: var(--tt-container-dark);
  color: var(--tt-text-primary);
}
html[data-design="new"] .navbar .dropdown-divider {
  border-top-color: var(--tt-divider);
}

/* DW-73: below 992px the tail's `.navbar.navbar-expand-lg .navbar-nav` and
   `.navbar.stripe-navbar .navbar-nav` (both flex-direction: row !important,
   specificity 0,3,0) beat the mobile column rule, so the open menu is one
   overflowing row. These (0,4,1) rules stack it. */
@media (max-width: 991.98px) {
  html[data-design="new"] .navbar.stripe-navbar .navbar-collapse {
    flex-direction: column !important; /* overrides `.navbar.stripe-navbar .navbar-collapse` (row !important) */
    align-items: stretch !important; /* overrides `.navbar-collapse` (align-items: center !important) */
    justify-content: flex-start !important; /* overrides `.navbar-collapse` (justify-content: space-between !important) */
  }
  html[data-design="new"] .navbar.navbar-expand-lg .navbar-nav,
  html[data-design="new"] .navbar.stripe-navbar .navbar-nav {
    flex-direction: column !important; /* overrides `.navbar.navbar-expand-lg .navbar-nav` / `.navbar.stripe-navbar .navbar-nav` (row !important) */
    align-items: stretch;
    width: 100%;
  }
  html[data-design="new"] .navbar .navbar-nav .nav-item {
    display: block !important; /* overrides `.navbar-nav .nav-item` (inline-block !important) */
    margin-right: 0;
  }
  html[data-design="new"] .navbar .navbar-nav .nav-link {
    font-size: 16px;
    padding: 10px 16px;
  }
  html[data-design="new"] .navbar .navbar-nav .dropdown-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  html[data-design="new"] .navbar .navbar-nav .dropdown-item {
    color: var(--tt-nav-text);
  }
  html[data-design="new"] .navbar .navbar-nav .dropdown-item:hover,
  html[data-design="new"] .navbar .navbar-nav .dropdown-item:focus {
    background: var(--tt-nav-hover);
    color: var(--tt-nav-text-active);
  }
  html[data-design="new"] .navbar .navbar-collapse > .d-flex {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* The OI badge keeps its inline colours (base.html branches them to
   tokens); the brand next to it is not a link colour. */
html[data-design="new"] .navbar-brand span {
  flex-shrink: 0;
}

/* Connect Account (no credential): outline on the bar, not accent text on navy. */
html[data-design="new"] .navbar .btn-outline-primary.stripe-action {
  color: var(--tt-nav-text-active) !important; /* overrides the 63.2 `html[data-design="new"] .btn-outline-primary.stripe-action` (!important) */
  background: transparent;
  border: 1px solid var(--tt-nav-text);
  box-shadow: none;
}
html[data-design="new"] .navbar .btn-outline-primary.stripe-action:hover,
html[data-design="new"] .navbar .btn-outline-primary.stripe-action:focus {
  background: var(--tt-nav-hover);
  color: var(--tt-nav-text-active) !important; /* overrides the 63.2 `.btn-outline-primary.stripe-action:hover` (!important) */
}

/* ---------- Sync (Epic 63 fix-5, rows 1-2): the whole button is the state ----------
   Fills from the tokens (green synced, amber stale with the market closed,
   red stale with the market open, blue never / syncing); the ink on each
   fill is >= 4.5:1. `idle` (a failed sync start) keeps the quiet fill. Each
   state lists :hover and :focus and comes after the generic hover / focus
   rule (1,4,1), so a hovered or clicked button keeps its state colour.
   `color` is !important against `.btn.stripe-action` (color #fff !important)
   and the 63.2 dark synced / stale rule (--tt-container !important). The red
   state reuses the old page's own `pulse-urgent` keyframes
   (stripe-inspired-overrides.css): no keyframes here. */
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status] {
  background: var(--tt-nav-hover);
  border: 1px solid transparent;
  color: var(--tt-nav-text-active) !important; /* overrides `.btn.stripe-action` (color #fff !important) and the 63.2 dark synced/stale ink rule (--tt-container !important) */
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  animation-name: none;
  transform: none;
  display: inline-flex;
  align-items: center;
}
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status]:hover,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status]:focus {
  background: var(--tt-nav-hover);
  border-color: var(--tt-nav-text);
  color: var(--tt-nav-text-active) !important; /* overrides `.btn.stripe-action:hover` (color #fff !important) */
  box-shadow: none;
  transform: none;
}
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="synced"],
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="synced"]:hover,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="synced"]:focus {
  background: var(--tt-success-fill);
  color: var(--tt-nav-bg) !important; /* overrides `.btn.stripe-action` (color #fff !important) and the 63.2 dark synced ink rule (--tt-container !important) */
}
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="closed"],
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="closed"]:hover,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="closed"]:focus {
  background: var(--tt-warning-fill);
  color: var(--tt-nav-bg) !important; /* overrides `.btn.stripe-action` (color #fff !important) and the 63.2 dark stale ink rule (--tt-container !important) */
}
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="open"],
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="open"]:hover,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="open"]:focus {
  background: var(--tt-error-fill);
  color: var(--tt-on-fill) !important; /* overrides `.btn.stripe-action` (color #fff !important) and the 63.2 dark stale ink rule (--tt-container !important) */
  animation: pulse-urgent 2s infinite;
}
html[data-design="new"][data-theme="dark"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="open"],
html[data-design="new"][data-theme="dark"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="open"]:hover,
html[data-design="new"][data-theme="dark"] #navbar-sync-button.stripe-action[data-sync-status="stale"][data-market="open"]:focus {
  color: var(--tt-nav-bg) !important; /* overrides the light stale-open ink above (--tt-on-fill !important) */
}
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="never"],
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="never"]:hover,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="never"]:focus,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="syncing"],
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="syncing"]:hover,
html[data-design="new"] #navbar-sync-button.stripe-action[data-sync-status="syncing"]:focus {
  background: var(--tt-primary);
  color: var(--tt-on-fill) !important; /* overrides `.btn.stripe-action` (color #fff !important) */
}

/* ---------- Footer, messages ---------- */
html[data-design="new"] .footer {
  font-size: 14px;
}
html[data-design="new"] main > .mb-4 > .alert-error {
  background: var(--tt-error-light);
  color: var(--tt-error);
  border: 1px solid var(--tt-error);
  border-radius: var(--tt-radius-md);
}

/* The legacy sync box (always hidden) still gets the injected striped bar. */
html[data-design="new"] #global-sync-status .progress-bar {
  background-image: none;
  background-color: var(--tt-primary);
}

/* Story 7's settings breadcrumb (Brian 2026-10-16, Q4): Bootstrap's active
   item and divider are a fixed grey (#6c757d, 3.8:1 on the light page
   ground), which fails the CAP-7 contrast rule, and story 7's
   settings_new_design.css is read-only for this story. So this one page-
   content rule lives in the chrome layer, scoped by :has() to the page that
   links settings_new_design.css. The story-8 breadcrumbs (reconciliation,
   drill-downs) are fixed in misc_new_design.css. */
html[data-design="new"]:has(link[href*="settings_new_design.css"]) .breadcrumb-item.active {
  color: var(--tt-text-secondary);
}
html[data-design="new"]:has(link[href*="settings_new_design.css"]) .breadcrumb-item + .breadcrumb-item::before {
  color: var(--tt-text-secondary);
}

/* ---------- Sync progress banner (partials/_sync_progress_banner.html) ---------- */
html[data-design="new"] .sync-banner-v2 {
  box-shadow: none;
}
html[data-design="new"] .sync-banner-v2__link {
  color: var(--tt-accent-text);
}
html[data-design="new"] .sync-banner-v2__progress-bar-fill {
  background: var(--tt-primary);
  color: var(--tt-nav-text-active);
  font-size: 12px;
  font-family: var(--tt-font-mono);
}
html[data-design="new"] .sync-banner-v2__chip {
  font-size: 12px;
  border-radius: var(--tt-radius-sm);
}
html[data-design="new"] .sync-banner-v2__chip--pending {
  opacity: 1;
  color: var(--tt-text-secondary);
}
html[data-design="new"] .sync-banner-v2__chip--running {
  border-color: var(--tt-info);
  color: var(--tt-info);
  background: var(--tt-info-light);
  box-shadow: none;
}
html[data-design="new"] .sync-banner-v2__chip--completed {
  background: var(--tt-success-light);
}
html[data-design="new"] .sync-banner-v2__chip--failed {
  background: var(--tt-error-light);
}
html[data-design="new"] .sync-banner-v2__chip-icon {
  font-weight: 600;
}

/* ---------- Beta status banner (partials/_beta_status_banner.html, CSS only:
   the partial is shared with base_public.html) ---------- */
html[data-design="new"] .beta-status-banner {
  border-left-color: var(--tt-info);
}
html[data-design="new"] .beta-status-banner--warning {
  border-left-color: var(--tt-warning);
}
html[data-design="new"] .beta-status-banner--urgent {
  border-left-color: var(--tt-error);
}
html[data-design="new"] .beta-status-banner strong {
  font-weight: 600;
}
html[data-design="new"] .beta-status-banner__cta {
  background: transparent;
  color: var(--tt-accent-text);
  border: 1px solid var(--tt-primary);
  border-radius: var(--tt-radius-md);
}
html[data-design="new"] .beta-status-banner__cta:hover,
html[data-design="new"] .beta-status-banner__cta:focus {
  background: var(--tt-quiet-bg);
  color: var(--tt-accent-text);
}

/* ---------- Feedback modal (feedback/_feedback_modal.html; its colours are
   inline, branched to tokens in the template) ---------- */
html[data-design="new"] #feedback-modal h5 {
  color: var(--tt-text-primary);
}
html[data-design="new"] #feedback-modal label {
  color: var(--tt-text-primary);
}
html[data-design="new"] #feedback-modal select,
html[data-design="new"] #feedback-modal textarea {
  background: var(--tt-surface);
  color: var(--tt-text-primary);
}
html[data-design="new"] #feedback-modal #feedback-submit:focus-visible,
html[data-design="new"] #feedback-modal #feedback-cancel:focus-visible,
html[data-design="new"] #feedback-modal #feedback-close-x:focus-visible {
  outline: 2px solid var(--tt-border-focus);
  outline-offset: 2px;
}

/* ---------- Phone (Epic 63 phone-1, CAP-11; mobile-mockups/menu.html rows 1-5) ----------
   Made for the phone, not shrunk: the top bar and menu get 44-48px targets,
   the account items join the menu list in the menu's own colours (audit
   D14), the sync banner scrolls away and the strip (#sync-strip, the banner
   partial, filled by static/js/sync_strip.js from what the banner's own poll
   writes) stays on top once it has. Plus the shared field rule (audit B2):
   16px field text so iPhone Safari does not zoom on tap, 44px tall. Every
   rule sits inside the phone query; desktop and tablet are unchanged. */
@media (max-width: 575.98px) {
  /* Row 1: logo link 44px tall, hamburger 48 x 48, one centre line. */
  html[data-design="new"] .navbar-brand {
    min-height: 44px;
  }
  html[data-design="new"] .navbar-toggler {
    width: 48px;
    height: 48px;
    margin-top: 12px; /* the brand link's own top margin: both centre on one line */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  html[data-design="new"] .navbar-toggler-icon {
    height: auto;
  }

  /* Row 2: one list, rows 48px, sub-items 44px. */
  html[data-design="new"] .navbar .navbar-collapse {
    padding: 8px 0 12px;
  }
  html[data-design="new"] .navbar .navbar-nav {
    gap: 0;
  }
  html[data-design="new"] .navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 0;
  }
  html[data-design="new"] .navbar .navbar-nav .dropdown-menu {
    margin: 0;
    padding: 0;
  }
  html[data-design="new"] .navbar .navbar-nav .dropdown-item,
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px 0 36px;
    font-size: 15px;
  }
  html[data-design="new"] .navbar .navbar-nav .dropdown-divider,
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-divider {
    margin: 4px 20px 4px 36px;
    border-top-color: var(--tt-nav-hover);
  }

  /* Row 3: divider, Sync full width, the username row, then the account
     items as rows of the same list (no card). */
  html[data-design="new"] .navbar .navbar-collapse > .d-flex {
    flex-direction: column;
    align-items: stretch !important; /* overrides Bootstrap `.align-items-center` (align-items: center !important) */
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tt-nav-hover);
  }
  html[data-design="new"] .navbar #navbar-sync-form {
    padding: 4px 20px 8px;
  }
  html[data-design="new"] .navbar #navbar-sync-button.stripe-action[data-sync-status] {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 16px;
    margin: 0;
  }
  /* No credential: Connect Account takes Sync's place, sized the same. */
  html[data-design="new"] .navbar .navbar-collapse > .d-flex > a.stripe-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto; /* the tail's <=576px `.btn.stripe-action { width: 100% }` plus these margins would overflow */
    min-height: 48px;
    margin: 4px 20px 8px;
    font-size: 16px;
  }
  html[data-design="new"] .navbar .dropdown.ms-3 {
    margin-left: 0 !important; /* overrides Bootstrap `.ms-3` (margin-left: 1rem !important) */
  }
  html[data-design="new"] .navbar #userDropdown {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    margin: 0;
    font-size: 16px;
    border-radius: 0;
    color: var(--tt-nav-text-active) !important; /* overrides the 63.2 `html[data-design="new"] .navbar .nav-link` (color !important) */
    background-color: transparent !important; /* overrides the 63.2 `.navbar .nav-link:hover, :focus` (background-color !important) */
  }
  html[data-design="new"] .navbar #userDropdown::after {
    margin-left: auto;
  }
  html[data-design="new"] .navbar .dropdown-menu.dropdown-menu-end {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-item,
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-item i {
    color: var(--tt-nav-text);
  }
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-item i {
    width: 20px;
  }
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-item:hover,
  html[data-design="new"] .navbar .dropdown-menu-end .dropdown-item:focus {
    background: var(--tt-nav-hover);
    color: var(--tt-nav-text-active);
  }

  /* Row 4: the full banner as today, but it scrolls away with the page;
     chips and bar text 14px, title and time left 15px, link 44px. */
  html[data-design="new"] .sync-banner-v2 {
    position: static;
  }
  html[data-design="new"] .sync-banner-v2__inner {
    padding: 0 16px;
  }
  html[data-design="new"] .sync-banner-v2__title {
    font-size: 15px;
    line-height: 22px;
    align-items: flex-start;
  }
  html[data-design="new"] .sync-banner-v2__title .sync-banner-v2__spinner {
    margin-top: 4px;
  }
  html[data-design="new"] .sync-banner-v2__meta {
    font-size: 15px;
    width: 100%;
    justify-content: space-between;
  }
  html[data-design="new"] .sync-banner-v2__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html[data-design="new"] .sync-banner-v2__progress-bar-container {
    height: 16px;
    border-radius: 8px;
  }
  html[data-design="new"] .sync-banner-v2__progress-bar-fill {
    font-size: 14px;
    min-width: 44px;
  }
  html[data-design="new"] .sync-banner-v2__chip {
    font-size: 14px;
  }

  /* Row 5: the strip, shown by sync_strip.js only once the banner has
     scrolled away ([hidden] otherwise: Bootstrap's display none). */
  html[data-design="new"] .sync-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 6px 8px 6px 16px;
    background: var(--tt-surface);
    border-bottom: 1px solid var(--tt-border-neutral);
    color: var(--tt-text-primary);
    font-size: 15px;
    line-height: 20px;
  }
  html[data-design="new"] .sync-strip__text {
    flex: 1;
    min-width: 0;
    font-weight: 600;
  }
  html[data-design="new"] .sync-strip__pct {
    font-family: var(--tt-font-mono);
    font-weight: 600;
  }
  html[data-design="new"] .sync-strip__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    color: var(--tt-accent-text);
    font-weight: 500;
    text-decoration: none;
  }
  html[data-design="new"] .sync-strip__bar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    background: var(--tt-primary);
  }
  /* A finished or failed sync: the spinner stops, as the banner's does. */
  html[data-design="new"] .sync-strip[data-state="done"] .sync-banner-v2__spinner {
    animation: none;
    border-right-color: var(--tt-text-primary);
  }

  /* WebKit's native menulist fixes its text at 13px. Disable that
     appearance on phones; keep Bootstrap's .form-select arrow intact. */
  html[data-design="new"] select {
    -webkit-appearance: none;
    appearance: none;
  }
  html[data-design="new"] select:not(.form-select),
  html[data-design="new"] #feedback-modal select:not(.form-select) {
    background-image: url("../images/brand/select-chevron.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
  }

  /* Shared field rule (audit B2; reused by phone-2 and phone-9). */
  html[data-design="new"] .form-control,
  html[data-design="new"] .form-select,
  html[data-design="new"] input[type="text"],
  html[data-design="new"] input[type="email"],
  html[data-design="new"] input[type="password"],
  html[data-design="new"] input[type="number"],
  html[data-design="new"] input[type="search"],
  html[data-design="new"] input[type="tel"],
  html[data-design="new"] input[type="url"],
  html[data-design="new"] input[type="date"],
  html[data-design="new"] input[type="datetime-local"],
  html[data-design="new"] input[type="time"],
  html[data-design="new"] input[type="month"],
  html[data-design="new"] input[type="week"],
  html[data-design="new"] input:not([type]),
  html[data-design="new"] textarea,
  html[data-design="new"] select {
    font-size: 16px;
    min-height: 44px;
  }
}
@media (min-width: 576px) {
  html[data-design="new"] .sync-strip {
    display: none;
  }
}

/* ---------- menu-1 (Epic 63, Brian 2026-10-21): click menus, Mac-style ----------
   Ported from the approved mockup mobile-mockups/menu-click/menu-click.css;
   static/js/menu_click.js (loaded only with the switch on) marks the bar
   (html[data-menu="click"], .mc-trigger, .mc-open, .mc-panel). Same look as
   the mockup: a rule that names an .mc-* class takes the mockup's own
   specificity (html[data-design="new"] in place of html[data-menu="click"]),
   so it wins and loses exactly where it did there. Three rules keep
   html[data-menu="click"] as well: the two desktop rules without an .mc-*
   class, so the bar still opens on hover if the script never runs, and the
   headings rule, whose extra attribute beats the <992px link rules. Where the mockup's !important beat no !important
   rule it is dropped (same computed style): the closed panel's display, the
   always-shown lists' display / position / transform, and the headings'
   font-size / padding (a #userDropdown selector beats the phone-1 id rule
   instead). One is added: the open title's colour, which in the mockup
   showed only while the title was hovered or focused. */

/* Desktop (992px and wider): Positions, Transactions and the account menu
   open on click only; the open title is highlighted. */
@media (min-width: 992px) {
  html[data-design="new"][data-menu="click"] .stripe-navbar .dropdown:hover > .dropdown-menu:not(.show) {
    display: none !important; /* overrides `.dropdown:hover .dropdown-menu` in stripe-inspired-overrides.css (display: block !important) */
  }
  html[data-design="new"][data-menu="click"] .stripe-navbar .dropdown > .dropdown-menu.show {
    display: block !important; /* overrides `.dropdown-menu` in stripe-inspired-overrides.css (display: none !important) */
    margin-top: 0;
  }
  html[data-design="new"] .stripe-navbar .mc-trigger {
    cursor: default;
    user-select: none;
  }
  /* The same small arrow the account menu already has, so every menu title reads alike. */
  html[data-design="new"] .stripe-navbar .navbar-nav .mc-trigger::after {
    display: inline-block;
    margin-left: .35em;
    vertical-align: .2em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
  }
  html[data-design="new"] .stripe-navbar .dropdown.mc-open > .mc-trigger {
    color: var(--tt-nav-text-active) !important; /* overrides the 63.2 `html[data-design="new"] .navbar .nav-link` (color !important): the open title keeps its ink when focus or the pointer leaves it */
    background: var(--tt-nav-hover);
    border-radius: 6px;
  }
  html[data-design="new"] .mc-panel-head {
    display: none;
  }
}

/* Phone and small tablet (under 992px): one full-screen panel that scrolls
   by itself; the page behind is locked; the account lists are always shown
   under their titles, which become plain section headings. */
@media (max-width: 991.98px) {
  html[data-design="new"] .stripe-navbar .mc-panel:not(.mc-panel-open) {
    display: none;
  }
  html[data-design="new"] .stripe-navbar .mc-panel.mc-panel-open {
    display: flex !important; /* overrides `.navbar-collapse:not(.show):not(.collapsing)` in stripe-inspired-overrides.css (display: none !important) */
    flex-direction: column !important; /* overrides `.navbar.stripe-navbar .navbar-collapse` (flex-direction: row !important) */
    align-items: stretch !important; /* overrides `.navbar-collapse` (align-items: center !important) */
    position: fixed;
    inset: 0;
    z-index: 2000;
    margin: 0;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom));
    background: var(--tt-nav-bg);
    overflow-y: auto;
    overscroll-behavior: contain; /* the page behind never moves */
    -webkit-overflow-scrolling: touch;
  }
  html[data-design="new"].mc-locked,
  html[data-design="new"].mc-locked body {
    overscroll-behavior: none;
  }
  html[data-design="new"] .mc-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: env(safe-area-inset-top) 8px 0 16px;
    background: var(--tt-nav-bg);
    border-bottom: 1px solid var(--tt-divider);
  }
  html[data-design="new"] .mc-panel-head .navbar-brand {
    margin: 0;
    min-height: 44px;
  }
  html[data-design="new"] .mc-close {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tt-nav-text-active);
    font-size: 22px;
    line-height: 1;
  }
  html[data-design="new"] .mc-close:focus-visible {
    outline: 2px solid var(--tt-primary);
  }
  html[data-design="new"] .mc-panel .dropdown-menu {
    display: block;
    position: static;
    transform: none;
    float: none;
    margin: 0;
    padding: 0 0 4px;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* The titles as headings: 14px, not tappable. One attribute more than
     the mockup's selector beats the <992px / phone link rules (the mockup
     used an important flag there); the id selector beats the phone-1
     #userDropdown rule. */
  html[data-design="new"][data-menu="click"] .mc-panel .mc-trigger,
  html[data-design="new"] .mc-panel #userDropdown.mc-trigger {
    pointer-events: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .75;
    padding: 16px 16px 4px;
    /* 576-991px: the 48px heading row the phone-1 rules give below 576px
       (the mockup left it 40px there). */
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  html[data-design="new"] .mc-panel .mc-trigger {
    color: var(--tt-nav-text) !important; /* overrides the 63.2 `html[data-design="new"] .navbar .nav-link` (color !important) */
  }
  html[data-design="new"] .mc-panel .mc-trigger::after {
    display: none;
  }
  html[data-design="new"] .mc-panel .navbar-nav > .nav-item > .nav-link:not(.mc-trigger) {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  html[data-design="new"] .mc-panel .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px 0 28px;
    font-size: 16px;
    /* 576-991px: the account items sat in --tt-text-primary on the nav
       colour (unreadable in light mode); below 576px phone-1 already sets it. */
    color: var(--tt-nav-text);
  }
  html[data-design="new"] .mc-panel .dropdown-divider {
    margin: 4px 16px;
  }
  html[data-design="new"] .mc-panel > .d-flex {
    padding: 12px 16px 0;
    flex-direction: column;
    align-items: stretch !important; /* overrides Bootstrap `.align-items-center` (align-items: center !important) */
  }
  html[data-design="new"] .mc-panel > .d-flex .dropdown {
    margin: 0 !important; /* overrides Bootstrap `.ms-3` (margin-left: 1rem !important) */
  }
}

/* ---------- stitch-1 (Epic 63, Brian 2026-10-22): the Stitch phone look ----------
   The approved Stitch phone designs (design-test-2026-10/stitch-mobile/,
   menu-dark.html / menu-light.html) over the phone top bar and the menu-1
   panel, plus the shared Stitch phone kit. Looks only: same items, order,
   words, hrefs, icons and behaviour (static/js/menu_click.js untouched);
   uppercase on the headings is CSS, the DOM words are unchanged. Kept from
   the built menu where Stitch differs: no "Account" label, the item words
   and icons, the fix-5 Sync state fills, the disabled Query look, the OI
   badge (inline style).
   Dark: the bar and the panel stay on the nav colours (--tt-nav-*).
   Light (Brian 2026-10-22, answer A): on a phone the bar and the open panel
   follow the Stitch light screen, white bar, pale panel, white account card,
   dark ink, blue labels, on the light v2 surface / text tokens. The second
   half of this block holds those rules (html:not([data-theme="dark"]), one
   attribute more than the dark rules they follow). Desktop and tablet keep
   the navy bar. */
@media (max-width: 575.98px) {
  /* ---- Stitch phone kit (shared by stitch-1..9) ----
     Each rule is a selector list. stitch-2..9 add their page selectors
     (html[data-design="new"] <page selector>) to these lists; they never
     copy a rule or add a template class, so the switch-off HTML stays
     byte-identical. The .st-* classes seed each list (and the kit probe in
     tests/playwright/test_story_63_stitch1_menu_kit.py); the menu selectors
     listed are the parts of stitch-1 that use the rule.
     stitch-2 (home and insights, Brian 2026-10-22): the two pages' selectors
     joined the lists below, each written deep enough to outrank the page's
     own non-phone rule for the same part (this file loads before the page
     sheets, so a tie goes to the page); the page phone blocks hold only what
     the kit does not cover. It added .st-icon-btn (the Full screen buttons),
     gave .st-btn--quiet the Stitch `quiet-btn` fill and wrote the stat
     label's font (Geist) so a mono page label takes the kit's.
     stitch-3 (Query, Brian 2026-10-22): the no-key card, the answer cards,
     the usage labels, the example questions, the answer buttons (quiet
     colours only, their phone-4 size kept) and the answer chart's Full
     screen button joined the lists, scoped under #query-no-key /
     #query-app so they outrank query_new_design.css's own rules; the query
     phone block holds the rest. No rule was added.
     stitch-4 (positions, Brian 2026-10-22): the symbol cards, the cold
     states and the summary card (drawn by .pos-summary::before behind the
     2 x 2 stats) joined the card list; the summary heading and the account
     labels take the section label; the summary, head and leg labels take
     the stat label. Scoped under .pos-wrap so they outrank positions_new_design.css's
     own rules; the positions phone block holds the rest (the card padding
     resets, the Last sync pill, the summary grid, the symbol row). No rule
     was added.
     stitch-5 (transactions, Brian 2026-10-22): the four summary tiles, the
     filter and legend cards, the date-group cards (and the loading
     skeleton's) and the cold states
     (.empty-state) joined the card list; the summary labels and the
     opened transaction labels (td[data-label]::before) the stat label; the
     pager buttons the button, its outline ones the quiet button. Scoped
     under .txn-page and written deep enough to outrank
     transactions_new_design.css's own rules; the transactions phone block
     holds the rest (the card padding resets, the summary label ink, the
     count tiles' row, the headers, the sunken position cards and chips,
     Export CSV). No rule was added.
     stitch-6 (trade detail, Brian 2026-10-22): the P&L cards, the
     lifecycle and cash-flow cards, the leg cards and the timeline cards
     joined the card list; the P&L labels, the BPR label and the chart stat
     labels the stat label. Scoped under .trade-detail so they outrank
     trade_detail_new_design.css's and lifecycle_chart.css's own rules; the
     trade-detail phone block holds the rest (the P&L padding 12px and the
     Net P&L fill, the headings' ink, the chips, the chart boxes, the
     hairline-separated BPR / legend / stats, the pill bars, the frameless
     legs and timeline sections, the mono lines). No rule was added.
     stitch-7 (free report, Brian 2026-10-22): no free-report selector
     joined the lists. The report extends base_public.html, which does not
     load this file; its own base card already equals the kit card, and its
     phone block restates only the stat label's uppercase / .06em
     (free_report_new_design.css). No rule was added.
     stitch-8 (log in, sign up, onboarding, connect, Brian 2026-10-22): the
     auth card (log in, sign up, the wizard steps and the pages sharing
     it) and connect's OAuth card joined the card list; the wizard step
     line the section label; Sign In / Create Account / Next / Complete
     (.auth-submit), the wizard Previous, the invite trigger and connect's
     buttons the button; the filled ones the primary button; the wizard
     Previous, the invite trigger and Authorize the quiet button. Scoped
     under .auth-card, an id or connect's card path (no :has(), which would
     void a whole kit list where unsupported) so they outrank
     entry_new_design.css, which loads after this file; the entry phone
     block holds the rest (card padding and top edge, title, labels, fields,
     footer, wizard bar / header / headings, the frameless connect card, its
     status box, field and red Disconnect buttons). No rule was added.
     stitch-9 (settings, alert preferences, Brian 2026-10-22): the settings
     section nav, the settings section bodies, the alert-preferences snooze
     body and the alert rows joined the card list; every button in a
     settings section card (except the Databento eye), Resume now and Save
     Alert Preferences the button; Resume now and Save Alert Preferences
     the primary button; the settings grey buttons (.btn-outline-secondary,
     .btn-secondary) and the four snooze buttons the quiet button. Scoped under .settings-layout or the alert sections'
     aria-labelledby (no :has()) so they outrank settings_new_design.css,
     which loads after this file; the settings phone block holds the rest
     (section nav list, frameless sections and their labels, notes,
     controls, fields, inner cards, the Bootstrap utility overrides). The
     billing plan page extends base_minimal.html, which does not load this
     file: its look is in billing_new_design.css. No rule was added. */
  /* Card: Stitch `rounded-[16px] p-4` on the page's panel colours. */
  html[data-design="new"] .st-card,
  html[data-design="new"] .dashboard .account-card-mobile,
  html[data-design="new"] .dashboard .dashboard-section,
  html[data-design="new"] .ins-wrap .ins-tile,
  html[data-design="new"] .ins-wrap .ins-live-card,
  html[data-design="new"] .ins-wrap .ins-alloc-body,
  html[data-design="new"] .ins-wrap .ins-balance-table-wrap,
  html[data-design="new"] #query-no-key .query-no-key-inner,
  html[data-design="new"] #query-app .query-assistant .query-bubble,
  html[data-design="new"] .pos-wrap .pos-card,
  html[data-design="new"] .pos-wrap .pos-empty,
  html[data-design="new"] .pos-wrap .pos-connect,
  html[data-design="new"] .pos-wrap .pos-summary::before,
  html[data-design="new"] .txn-page > .col-12 > .txn-summary .card,
  html[data-design="new"] .txn-page > .col-12 > .card,
  html[data-design="new"] .txn-page #strategies-container > .card,
  html[data-design="new"] .txn-page #strategies-container > [data-skeleton] > .card,
  html[data-design="new"] .txn-page > .col-12 > .empty-state,
  html[data-design="new"] .trade-detail .pnl-summary .pnl-card,
  html[data-design="new"] .trade-detail .chart-section,
  html[data-design="new"] .trade-detail .cashflow-section,
  html[data-design="new"] .trade-detail .legs-section .leg-card,
  html[data-design="new"] .trade-detail .timeline-section .timeline-content,
  html[data-design="new"] .auth-container > .auth-card,
  html[data-design="new"] main .col-lg-6 > .card.shadow-sm > .card-body > .card.mt-3.mb-3,
  html[data-design="new"] .settings-layout > .settings-sidebar,
  html[data-design="new"] .settings-layout > .settings-content > .settings-section > .card-body,
  html[data-design="new"] main section[aria-labelledby="snooze-heading"] > .card-body,
  html[data-design="new"] main section[aria-labelledby="your-alerts-heading"] > .card-body > .alert-pref-row,
  html[data-design="new"] main section[aria-labelledby="operational-alerts-heading"] > .card-body > .alert-pref-row {
    border-radius: 16px;
    padding: 16px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-border-neutral);
    box-shadow: var(--tt-shadow-sm);
  }
  /* Section label: Stitch `text-[14px] uppercase tracking-wider font-semibold`.
     The menu headings (Positions, Transactions) take its look; their ink
     is set below (the nav label blue in dark, this --tt-accent-text in light). */
  html[data-design="new"] .st-label,
  html[data-design="new"][data-menu="click"] .mc-panel .navbar-nav .mc-trigger,
  html[data-design="new"] .dashboard .dashboard-section .section-title,
  html[data-design="new"] .pos-wrap .pos-summary-title,
  html[data-design="new"] .pos-wrap .pos-account-label,
  html[data-design="new"] .auth-card .wizard-progress-text {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--tt-accent-text);
  }
  /* Caption: the small explaining line under a number or a heading. */
  html[data-design="new"] .st-caption,
  html[data-design="new"] .dashboard .section-content p.tt-text-secondary[style] {
    font-size: 14px;
    line-height: 1.45;
    color: var(--tt-text-secondary);
  }
  /* Stat: a label over a mono number (Stitch `font-mono 18px`). */
  html[data-design="new"] .st-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  html[data-design="new"] .st-stat__label,
  html[data-design="new"] .dashboard .account-card-mobile .card-metrics .metric-label,
  html[data-design="new"] .ins-wrap .ins-control-label,
  html[data-design="new"] .ins-wrap .ins-metric-label,
  html[data-design="new"] .ins-wrap .ins-balance-table td.ins-col-num[data-label]::before,
  html[data-design="new"] #query-app .query-usage-label,
  html[data-design="new"] .pos-wrap .pos-stat dt,
  html[data-design="new"] .pos-wrap .pos-pl dt,
  html[data-design="new"] .pos-wrap .pos-greeks dt,
  html[data-design="new"] .pos-wrap table.pos-legs td[data-label]::before,
  html[data-design="new"] .txn-page > .col-12 > .txn-summary h6.card-subtitle.text-muted,
  html[data-design="new"] .txn-page table.txn-table td[data-label]::before,
  html[data-design="new"] .trade-detail .pnl-summary .pnl-label,
  html[data-design="new"] .trade-detail .chart-section .chart-bpr-stat-label,
  html[data-design="new"] .trade-detail .chart-section .chart-stat-label {
    font-family: var(--tt-font-family);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
    color: var(--tt-text-secondary);
  }
  html[data-design="new"] .st-stat__value {
    font-family: var(--tt-font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--tt-text-primary);
  }
  /* Button: Stitch `min-h-[48px] rounded-xl`, full width. Sync and Connect
     Account in the open panel use it (Sync keeps its fix-5 state fill;
     Connect Account its outline). Scoped to .mc-panel: without the menu
     script the old Bootstrap collapse keeps its phone-1 look. */
  html[data-design="new"] .st-btn,
  html[data-design="new"] .dashboard #discipline-tiles a.btn-outline-primary,
  html[data-design="new"] .navbar .mc-panel #navbar-sync-button.stripe-action[data-sync-status],
  html[data-design="new"] .navbar .mc-panel > .d-flex > a.stripe-action,
  html[data-design="new"] #query-no-key .query-no-key-inner a.btn-primary,
  html[data-design="new"] #query-app .query-example-btn,
  html[data-design="new"] .txn-page .txn-pager.d-flex > div > .btn,
  html[data-design="new"] .auth-card .btn.auth-submit,
  html[data-design="new"] .auth-card .wizard-nav .btn.auth-secondary,
  html[data-design="new"] .auth-card #invite-request-trigger,
  html[data-design="new"] main #oauth-authorize-btn,
  html[data-design="new"] main #oauth-revoke-btn,
  html[data-design="new"] main #connect-disconnect-link,
  html[data-design="new"] main .col-lg-6 > .card.shadow-sm > .card-body > form > p ~ .btn,
  html[data-design="new"] main .col-lg-6 > .card.shadow-sm > .card-body > form.mt-3 > .btn-warning,
  html[data-design="new"] .settings-layout > .settings-content > .settings-section > .card-body .btn:not(#toggle-databento-key),
  html[data-design="new"] main section[aria-labelledby="snooze-heading"] > .card-body .btn-primary,
  html[data-design="new"] main section[aria-labelledby="operational-alerts-heading"] ~ .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
  }
  html[data-design="new"] .st-btn--primary,
  html[data-design="new"] .auth-card .btn.auth-submit,
  html[data-design="new"] main section[aria-labelledby="snooze-heading"] > .card-body .btn-primary,
  html[data-design="new"] main section[aria-labelledby="operational-alerts-heading"] ~ .btn-primary {
    background: var(--tt-primary);
    border: 1px solid transparent;
    color: var(--tt-on-fill);
  }
  /* Quiet button: Stitch `quiet-btn` (#272727 dark; pale fill, hairline light). */
  html[data-design="new"] .st-btn--quiet,
  html[data-design="new"] .dashboard #discipline-tiles a.btn-outline-primary,
  html[data-design="new"] #query-app .query-example-btn,
  html[data-design="new"] #query-app .query-actions .btn,
  html[data-design="new"] .txn-page .txn-pager.d-flex > div > .btn-outline-primary,
  html[data-design="new"] .txn-page .txn-pager.d-flex > div > .btn-outline-secondary,
  html[data-design="new"] .auth-card .wizard-nav .btn.auth-secondary,
  html[data-design="new"] .auth-card #invite-request-trigger,
  html[data-design="new"] main #oauth-authorize-btn,
  html[data-design="new"] .settings-layout > .settings-content > .settings-section > .card-body .btn-outline-secondary:not(#toggle-databento-key),
  html[data-design="new"] .settings-layout > .settings-content > .settings-section > .card-body .btn-secondary,
  html[data-design="new"] main section[aria-labelledby="snooze-heading"] .btn-group.flex-wrap > .btn {
    background: var(--tt-container-dark);
    border: 1px solid var(--tt-border-neutral);
    color: var(--tt-text-primary);
  }
  /* Icon button (stitch-2): a bare 44px square for an icon-only control; the
     Full screen buttons (static/js/chart_zoom_pages.js) on home and insights.
     Their :focus-visible outline stays chart_zoom.css's. */
  html[data-design="new"] .st-icon-btn,
  html[data-design="new"] .dashboard .cz-expand,
  html[data-design="new"] .ins-wrap .cz-expand,
  html[data-design="new"] #query-app .cz-expand {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tt-text-secondary);
  }

  /* ---- Top bar: 56px, a hairline under it ---- */
  html[data-design="new"] .navbar.stripe-navbar {
    min-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--tt-nav-hover);
  }
  html[data-design="new"] .stripe-navbar > .container-fluid > .navbar-brand {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* The wordmark (and its copy in the panel head) in the bright nav ink. */
  html[data-design="new"] .navbar .navbar-brand {
    font-size: 18px;
    font-weight: 600;
    color: var(--tt-nav-text-active) !important; /* overrides the 63.2 `html[data-design="new"] .navbar-brand` (color !important) */
  }
  html[data-design="new"] .navbar .navbar-toggler {
    margin-top: 0;
  }
  html[data-design="new"] .navbar .navbar-toggler-icon:before,
  html[data-design="new"] .navbar .navbar-toggler-icon:after {
    height: 2px;
    background: var(--tt-nav-text);
  }

  /* ---- The open panel ---- */
  html[data-design="new"] .mc-panel-head {
    border-bottom-color: var(--tt-nav-hover);
  }
  html[data-design="new"] .mc-panel > .navbar-nav {
    padding: 12px 16px 0;
  }
  /* Top-level rows (Dashboard, Query, Settings, Feedback): 52px rounded rows. */
  html[data-design="new"] .mc-panel .navbar-nav > .nav-item > .nav-link:not(.mc-trigger) {
    min-height: 52px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 16px;
  }
  /* Their ink; the disabled Query span (no LLM key) keeps its own look. */
  html[data-design="new"] .mc-panel .navbar-nav > .nav-item > .nav-link:not(.mc-trigger):not(.disabled) {
    color: var(--tt-nav-text-active) !important; /* overrides the 63.2 `html[data-design="new"] .navbar .nav-link` (color !important) */
  }
  html[data-design="new"] .mc-panel .navbar-nav > .nav-item:first-child > .nav-link {
    font-size: 18px;
    font-weight: 500;
  }
  /* Positions / Transactions: section labels (the kit's .st-label look),
     not tappable (menu-1), in the nav's label blue. 44px rows. */
  html[data-design="new"][data-menu="click"] .mc-panel .navbar-nav .mc-trigger {
    min-height: 44px;
    padding: 12px 12px 4px;
    opacity: 1;
    color: var(--tt-nav-brand) !important; /* overrides the menu-1 `html[data-design="new"] .mc-panel .mc-trigger` (color !important) */
  }
  /* List rows: 52px; the per-account rows (after All and the divider) mono
     in the quieter nav ink, except while hovered or focused (the <992px
     hover ink then shows). */
  html[data-design="new"] .mc-panel .navbar-nav .dropdown-item {
    min-height: 52px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 16px;
    color: var(--tt-nav-text-active);
  }
  html[data-design="new"] .mc-panel .navbar-nav .dropdown-menu > li:nth-child(n+3) > .dropdown-item {
    font-family: var(--tt-font-mono);
  }
  html[data-design="new"] .mc-panel .navbar-nav .dropdown-menu > li:nth-child(n+3) > .dropdown-item:not(:hover):not(:focus) {
    color: var(--tt-nav-text);
  }
  html[data-design="new"] .mc-panel .dropdown-divider {
    display: none;
  }
  /* Sync (or Connect Account), then the account card; no line above. */
  html[data-design="new"] .navbar .mc-panel > .d-flex {
    margin-top: 0;
    padding: 16px 16px 0;
    border-top: 0;
    gap: 16px;
  }
  html[data-design="new"] .navbar .mc-panel #navbar-sync-form {
    padding: 0;
  }
  html[data-design="new"] .navbar .mc-panel > .d-flex > .dropdown {
    padding: 12px;
    border: 1px solid var(--tt-nav-hover);
    border-radius: 12px;
  }
  html[data-design="new"] .mc-panel #userDropdown.mc-trigger {
    min-height: 44px;
    padding: 0 8px;
    font-family: var(--tt-font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    border-bottom: 1px solid var(--tt-nav-hover);
  }
  html[data-design="new"] .mc-panel .dropdown-menu-end .dropdown-item {
    min-height: 44px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 15px;
  }
  /* Log Out in the nav red (--tt-nav-danger, AA on the nav colour and on
     its hover background). */
  html[data-design="new"] .mc-panel .dropdown-menu-end > li:last-child > .dropdown-item,
  html[data-design="new"] .mc-panel .dropdown-menu-end > li:last-child > .dropdown-item i {
    color: var(--tt-nav-danger);
  }

  /* ---- Light (Brian 2026-10-22, answer A): the Stitch light screen ----
     White bar and panel head (--tt-surface), pale panel (--tt-container,
     the page ground), white account card, --tt-text-primary ink,
     --tt-text-secondary quiet ink, --tt-accent-text labels, Log Out in
     --tt-error (6.47:1 on white; --tt-nav-danger is 3.37:1 there). */
  html[data-design="new"]:not([data-theme="dark"]) .navbar.stripe-navbar {
    background: var(--tt-surface) !important; /* overrides the 63.2 `html[data-design="new"] .stripe-navbar, .navbar` (background !important) */
    border-bottom-color: var(--tt-divider);
  }
  html[data-design="new"]:not([data-theme="dark"]) .navbar .navbar-brand {
    color: var(--tt-text-primary) !important; /* overrides the dark-and-light wordmark rule above (color !important) */
  }
  html[data-design="new"]:not([data-theme="dark"]) .navbar .navbar-toggler-icon:before,
  html[data-design="new"]:not([data-theme="dark"]) .navbar .navbar-toggler-icon:after {
    background: var(--tt-text-secondary);
  }
  html[data-design="new"]:not([data-theme="dark"]) .stripe-navbar .mc-panel.mc-panel-open {
    background: var(--tt-container);
    border-color: transparent;
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel-head {
    background: var(--tt-surface);
    border-bottom-color: var(--tt-divider);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-close {
    color: var(--tt-text-primary);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav > .nav-item > .nav-link:not(.mc-trigger):not(.disabled) {
    color: var(--tt-text-primary) !important; /* overrides the dark-and-light row ink rule above (color !important) */
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav > .nav-item > .nav-link:not(.mc-trigger):hover,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav > .nav-item > .nav-link:not(.mc-trigger):focus {
    background-color: var(--tt-surface) !important; /* overrides the 63.2 `.navbar .nav-link:hover, :focus` (background-color !important) */
  }
  /* The disabled Query span: its inline 50% opacity stays; the ink moves
     off the navy-bar grey so it reads on the pale panel. */
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav > .nav-item > .nav-link.disabled {
    color: var(--tt-text-secondary) !important; /* overrides the 63.2 `html[data-design="new"] .navbar .nav-link` (color !important) */
  }
  html[data-design="new"]:not([data-theme="dark"])[data-menu="click"] .mc-panel .navbar-nav .mc-trigger {
    color: var(--tt-accent-text) !important; /* overrides the dark-and-light heading rule above (color !important) */
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav .dropdown-item {
    color: var(--tt-text-primary);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav .dropdown-menu > li:nth-child(n+3) > .dropdown-item:not(:hover):not(:focus) {
    color: var(--tt-text-secondary);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav .dropdown-item:hover,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .navbar-nav .dropdown-item:focus {
    background: var(--tt-surface);
    color: var(--tt-text-primary);
  }
  /* Sync: the fix-5 state fills stay (their ink is dark on green / amber,
     white on blue / red); only `idle` (a failed start), whose quiet fill is
     the nav hover, becomes a white button. */
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel #navbar-sync-button.stripe-action[data-sync-status="idle"],
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel #navbar-sync-button.stripe-action[data-sync-status="idle"]:hover,
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel #navbar-sync-button.stripe-action[data-sync-status="idle"]:focus {
    background: var(--tt-surface);
    border-color: var(--tt-border-neutral);
    color: var(--tt-text-primary) !important; /* overrides the fix-5 `#navbar-sync-button.stripe-action[data-sync-status]` (color !important) */
  }
  /* Connect Account: the outline button in the label blue. */
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel > .d-flex > a.stripe-action,
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel > .d-flex > a.stripe-action:hover,
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel > .d-flex > a.stripe-action:focus {
    background: var(--tt-surface);
    border-color: var(--tt-accent-text);
    color: var(--tt-accent-text) !important; /* overrides the 63.8 `.navbar .btn-outline-primary.stripe-action` (color !important) */
  }
  html[data-design="new"]:not([data-theme="dark"]) .navbar .mc-panel > .d-flex > .dropdown {
    background: var(--tt-surface);
    border-color: var(--tt-border-neutral);
    box-shadow: var(--tt-shadow-sm);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel #userDropdown.mc-trigger {
    color: var(--tt-text-primary) !important; /* overrides the phone-1 `.navbar #userDropdown` (color !important) */
    border-bottom-color: var(--tt-divider);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end .dropdown-item,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end .dropdown-item i {
    color: var(--tt-text-secondary);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end .dropdown-item:hover,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end .dropdown-item:focus,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end .dropdown-item:hover i,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end .dropdown-item:focus i {
    background: var(--tt-container-dark);
    color: var(--tt-text-primary);
  }
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end > li:last-child > .dropdown-item,
  html[data-design="new"]:not([data-theme="dark"]) .mc-panel .dropdown-menu-end > li:last-child > .dropdown-item i {
    color: var(--tt-error);
  }
}