/*
 * Broadimage Apple material system
 * Approved by Fernando — 2026-07-29
 *
 * Scope: visual tokens, typography, material surfaces, borders, controls,
 * focus, and primary actions. This file intentionally does not alter content,
 * routes, form behavior, media, account controls, or menu geometry.
 */

:root {
  --bi-apple-page-light: #f5f5f7;
  --bi-apple-page-dark: #020407;
  --bi-apple-ink-light: #1d1d1f;
  --bi-apple-ink-dark: #f5f5f7;
  --bi-apple-muted-light: #515154;
  --bi-apple-muted-dark: #c7c7cc;
  --bi-apple-quiet-light: #6e6e73;
  --bi-apple-quiet-dark: #aeaeb2;
  --bi-apple-blue: #0071e3;
  --bi-apple-blue-hover: #0076df;
  --bi-apple-blue-active: #006edb;
  --bi-apple-link-light: #0066cc;
  --bi-apple-link-dark: #2997ff;
  --bi-apple-danger-light: #d70015;
  --bi-apple-danger-dark: #ff453a;
  --bi-apple-success-light: #248a3d;
  --bi-apple-success-dark: #30d158;

  /* ---------------------------------------------------------------------------
     APPLE SYSTEM COLOUR RAMP — added 2026-08-04 for the iOS grouped mobile nav.

     PROVENANCE, stated honestly: Apple publishes NO hex values. Its HIG "Color"
     page ships swatch PNGs only, and warns the values "may fluctuate from release
     to release". These are MEASURED from Apple's own published swatch assets
     (sRGB IEC61966-2.1, flat fills, dominant == centre pixel on all 72 files) at
     the 2025-06-09 palette revision. Treat them as Apple-DERIVED, never as spec.

     NOTE the June-2025 revision moved the chromatic values. The familiar
     #FF3B30 red / #007AFF blue / #5856D6 indigo are SUPERSEDED. The grays did
     not move. Do not "correct" these back to the older set.

     CONSUMERS: the mobile nav icon tiles only, inside
     @media (max-width:900px){ body.contributor-dashboard ... }.
     Declared != painted — nothing outside that block may read these.
     --------------------------------------------------------------------------- */
  --bi-apple-sys-red-light: #ff383c;
  --bi-apple-sys-red-dark: #ff4245;
  --bi-apple-sys-orange-light: #ff8d28;
  --bi-apple-sys-orange-dark: #ff9230;
  --bi-apple-sys-yellow-light: #ffcc00;
  --bi-apple-sys-yellow-dark: #ffd600;
  --bi-apple-sys-green-light: #34c759;
  --bi-apple-sys-green-dark: #30d158;
  --bi-apple-sys-mint-light: #00c8b3;
  --bi-apple-sys-mint-dark: #00dac3;
  --bi-apple-sys-teal-light: #00c3d0;
  --bi-apple-sys-teal-dark: #00d2e0;
  --bi-apple-sys-cyan-light: #00c0e8;
  --bi-apple-sys-cyan-dark: #3cd3fe;
  --bi-apple-sys-blue-light: #0088ff;
  --bi-apple-sys-blue-dark: #0091ff;
  --bi-apple-sys-indigo-light: #6155f5;
  --bi-apple-sys-indigo-dark: #6d7cff;
  --bi-apple-sys-purple-light: #cb30e0;
  --bi-apple-sys-purple-dark: #db34f2;
  --bi-apple-sys-pink-light: #ff2d55;
  --bi-apple-sys-pink-dark: #ff375f;
  --bi-apple-sys-brown-light: #ac7f5e;
  --bi-apple-sys-brown-dark: #b78a66;
  --bi-apple-sys-gray-light: #8e8e93;
  --bi-apple-sys-gray-dark: #8e8e93;

  /* Grouped-list surfaces. DELIBERATELY OPAQUE, unlike the --bi-apple-card-*
     tokens below: an alpha label on an alpha card over a backdrop-filter makes
     contrast a distribution rather than a number, and no audit can clear it.
     One alpha layer is auditable; two are not. */
  --bi-apple-grouped-bg-light: #f2f2f7;
  --bi-apple-grouped-bg-dark: #000000;
  --bi-apple-grouped-card-light: #ffffff;
  --bi-apple-grouped-card-dark: #1c1c1e;
  --bi-apple-grouped-sep-light: rgba(60, 60, 67, 0.29);
  --bi-apple-grouped-sep-dark: rgba(84, 84, 88, 0.65);

  /* Secondary label. NOT iOS secondaryLabel (#3C3C4399): composited on a light
     card that resolves to #8A8A8E = 3.44:1, a WCAG 1.4.3 FAIL at 17px. Dark mode
     passes, so the defect would be invisible on a dark mockup and would ship.
     #636366 measures 5.99 light / 5.37 dark. */
  --bi-apple-grouped-label2-light: #636366;
  --bi-apple-grouped-label2-dark: #98989f;

  /* Glyph polarity on a coloured tile. Every value ships #fff today, but the
     token must exist from day one: it is the hinge the "tiles are decorative,
     therefore contrast-exempt" ruling turns on. If a per-tile flip is ever
     needed (e.g. black on yellow under prefers-contrast: more, where Apple's
     accessible dark ramp goes LIGHTER and makes white worse), this is a
     value edit. Without the token it is a refactor. */
  --bi-apple-grouped-glyph: #ffffff;

  --bi-apple-card-light: rgba(255, 255, 255, 0.72);
  --bi-apple-card-dark: rgba(12, 15, 20, 0.78);
  --bi-apple-card-strong-light: rgba(255, 255, 255, 0.88);
  --bi-apple-card-strong-dark: rgba(17, 20, 27, 0.9);
  --bi-apple-field-light: rgba(255, 255, 255, 0.66);
  --bi-apple-field-dark: rgba(27, 31, 39, 0.72);
  --bi-apple-line-light: rgba(60, 60, 67, 0.28);
  --bi-apple-line-dark: rgba(235, 235, 245, 0.2);
  --bi-apple-separator-light: rgba(60, 60, 67, 0.18);
  --bi-apple-separator-dark: rgba(235, 235, 245, 0.13);
  --bi-apple-card-radius: 16px;
  --bi-apple-cell-radius: 10px;
  --bi-apple-button-radius: 999px;
  --bi-apple-control-height: 44px;
  --bi-apple-card-shadow-light:
    0 22px 64px rgba(27, 31, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --bi-apple-card-shadow-dark:
    0 26px 76px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bi-apple-liquid-shadow-light:
    0 12px 34px rgba(31, 40, 52, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --bi-apple-liquid-shadow-dark:
    0 14px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html.light {
  color-scheme: light;
  --bi-bg: var(--bi-apple-page-light);
  --bi-fg: var(--bi-apple-ink-light);
  --bi-muted: var(--bi-apple-muted-light);
  --bi-muted-2: var(--bi-apple-quiet-light);
  --bi-muted-3: var(--bi-apple-quiet-light);
  --bi-link: var(--bi-apple-link-light);
  --bi-border: var(--bi-apple-line-light);
  --bi-card-bg: var(--bi-apple-card-light);
  --bi-input-bg: var(--bi-apple-field-light);
  --bi-input-border: var(--bi-apple-line-light);
  --bi-btn-bg: var(--bi-apple-blue);
  --bi-btn-fg: #fff;
  --bi-strong: var(--bi-apple-ink-light);
  --ink: var(--bi-apple-ink-light);
  --muted: var(--bi-apple-muted-light);
  --quiet: var(--bi-apple-quiet-light);
  --page: var(--bi-apple-page-light);
  --card: var(--bi-apple-card-light);
  --card-strong: var(--bi-apple-card-strong-light);
  --field: var(--bi-apple-field-light);
  --line: var(--bi-apple-line-light);
  --wire: var(--bi-apple-blue);
  --wire-deep: var(--bi-apple-blue-active);
  --wire-text: var(--bi-apple-link-light);
  --focus: var(--bi-apple-blue);
  --shadow: var(--bi-apple-card-shadow-light);
}

html.dark {
  color-scheme: dark;
  --bi-bg: var(--bi-apple-page-dark);
  --bi-fg: var(--bi-apple-ink-dark);
  --bi-muted: var(--bi-apple-muted-dark);
  --bi-muted-2: var(--bi-apple-quiet-dark);
  --bi-muted-3: var(--bi-apple-quiet-dark);
  --bi-link: var(--bi-apple-link-dark);
  --bi-border: var(--bi-apple-line-dark);
  --bi-card-bg: var(--bi-apple-card-dark);
  --bi-input-bg: var(--bi-apple-field-dark);
  --bi-input-border: var(--bi-apple-line-dark);
  --bi-btn-bg: var(--bi-apple-blue);
  --bi-btn-fg: #fff;
  --bi-strong: var(--bi-apple-ink-dark);
  --ink: var(--bi-apple-ink-dark);
  --muted: var(--bi-apple-muted-dark);
  --quiet: var(--bi-apple-quiet-dark);
  --page: var(--bi-apple-page-dark);
  --card: var(--bi-apple-card-dark);
  --card-strong: var(--bi-apple-card-strong-dark);
  --field: var(--bi-apple-field-dark);
  --line: var(--bi-apple-line-dark);
  --wire: var(--bi-apple-blue);
  --wire-deep: var(--bi-apple-blue-active);
  --wire-text: var(--bi-apple-link-dark);
  --focus: var(--bi-apple-link-dark);
  --shadow: var(--bi-apple-card-shadow-dark);
}

html.light body {
  color: var(--bi-apple-ink-light);
  background-color: var(--bi-apple-page-light);
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.96), transparent 34rem),
    linear-gradient(155deg, #f8f8fa 0%, var(--bi-apple-page-light) 58%, #efeff2 100%);
  background-attachment: fixed;
}

html.dark body {
  color: var(--bi-apple-ink-dark);
  background-color: var(--bi-apple-page-dark);
  background-image:
    radial-gradient(circle at 80% 6%, rgba(41, 151, 255, 0.13), transparent 34rem),
    radial-gradient(circle at 12% 92%, rgba(0, 113, 227, 0.06), transparent 30rem),
    linear-gradient(155deg, #020407 0%, #06090e 54%, #020407 100%);
  background-attachment: fixed;
}

html.light body::before,
html.dark body::before {
  opacity: 0 !important;
  background-image: none !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Standard material: cards and cells remain in the content layer.
 */
:where(
  .registration-card,
  .page > .biwiz,
  .access-card,
  .kpi,
  .contact-card,
  .contact-form,
  .city,
  .toc,
  .notice,
  .important,
  .box,
  .card,
  .agent-card,
  .choice-fieldset,
  .permission-box,
  .agreement-box,
  .biwiz-consent,
  .geo-suggestions,
  .review-panel,
  .customer-id-card
) {
  border: 1px solid var(--bi-border, var(--line)) !important;
  border-radius: var(--bi-apple-card-radius) !important;
  background: var(--bi-card-bg, var(--card)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

html.light :where(
  .registration-card,
  .page > .biwiz,
  .access-card,
  .kpi,
  .contact-card,
  .contact-form,
  .city,
  .toc,
  .notice,
  .important,
  .box,
  .card,
  .agent-card
) {
  box-shadow: var(--bi-apple-card-shadow-light);
}

html.dark :where(
  .registration-card,
  .page > .biwiz,
  .access-card,
  .kpi,
  .contact-card,
  .contact-form,
  .city,
  .toc,
  .notice,
  .important,
  .box,
  .card,
  .agent-card
) {
  box-shadow: var(--bi-apple-card-shadow-dark);
}

.page > .biwiz {
  width: 100%;
  max-width: 640px;
  padding: clamp(20px, 5vw, 38px);
}

header.site-header {
  border-bottom-color: var(--bi-border, var(--line)) !important;
  background: var(--bi-card-bg, var(--card)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
}

footer.site-footer {
  border-top-color: var(--bi-border, var(--line)) !important;
  background: var(--bi-card-bg, var(--card)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

/*
 * Liquid Glass: header controls only. Width, height, radius, icon geometry,
 * and burger-line dimensions deliberately remain owned by existing CSS.
 */
:where(
  #biMenuBtn,
  #langToggle,
  .theme-switch,
  .editorial-theme-switch,
  .editorial-locale-control,
  .editorial-menu-button,
  #dashHamBtn,
  .sh-burger,
  #headerSessionSticky .header-icon-btn
) {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 48%, rgba(0, 0, 0, 0.08)),
    rgba(20, 24, 31, 0.46) !important;
  box-shadow: var(--bi-apple-liquid-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
}

/* Some legacy homepages declare the language surface later with an
 * ID-level !important rule. Keep its existing 44px geometry and only
 * raise specificity enough to apply the approved Liquid Glass material.
 */
html #langToggle {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035) 48%, rgba(0, 0, 0, 0.08)),
    rgba(20, 24, 31, 0.46) !important;
}

html.light :where(
  #biMenuBtn,
  #langToggle,
  .theme-switch,
  .editorial-theme-switch,
  .editorial-locale-control,
  .editorial-menu-button
) {
  color: var(--bi-apple-ink-light);
  border-color: rgba(255, 255, 255, 0.82) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.48) 52%, rgba(225, 228, 234, 0.42)),
    rgba(255, 255, 255, 0.58) !important;
  box-shadow: var(--bi-apple-liquid-shadow-light) !important;
}

html.light #langToggle {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.48) 52%, rgba(225, 228, 234, 0.42)),
    rgba(255, 255, 255, 0.58) !important;
}

body.contributor-dashboard:not(.dark) :where(#dashHamBtn, .sh-burger, #headerSessionSticky .header-icon-btn) {
  color: var(--bi-apple-ink-light);
  border-color: rgba(255, 255, 255, 0.82) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.48) 52%, rgba(225, 228, 234, 0.42)),
    rgba(255, 255, 255, 0.58) !important;
  box-shadow: var(--bi-apple-liquid-shadow-light) !important;
}

html.light #biMenuBtn span {
  background: var(--bi-apple-ink-light) !important;
}

html.dark #biMenuBtn span {
  background: var(--bi-apple-ink-dark) !important;
}

body.contributor-dashboard:not(.dark) :where(#dashHamBtn, .sh-burger) span {
  background: var(--bi-apple-ink-light) !important;
}

body.contributor-dashboard.dark :where(#dashHamBtn, .sh-burger) span {
  background: var(--bi-apple-ink-dark) !important;
}

/* Bell + Help carry their glyph as an SVG using currentColor, not <span> bars, so the ink
   has to land on `color`. An id-anchored selector with !important is required: dashboard.css
   sets `color:#fff` at (1,1,0) and the :where() glass rule above contributes zero specificity.
   Without this the icons stay white on light glass — effectively invisible. Same two ink
   tokens the hamburger bars use, so the three controls stay identical in both themes. */
body.contributor-dashboard:not(.dark) #headerSessionSticky .header-icon-btn {
  color: var(--bi-apple-ink-light) !important;
}
body.contributor-dashboard.dark #headerSessionSticky .header-icon-btn {
  color: var(--bi-apple-ink-dark) !important;
}

:where(
  #biMenuBtn,
  #langToggle,
  .theme-switch,
  .editorial-theme-switch,
  .editorial-locale-control,
  .editorial-menu-button,
  #dashHamBtn,
  .sh-burger,
  #headerSessionSticky .header-icon-btn
):hover {
  filter: brightness(1.06);
}

/*
 * Neutral form cells. Focus is a separate blue ring and never recolors the
 * physical cell border.
 */
:where(
  .contact-form input:not([type="checkbox"]):not([type="radio"]),
  .contact-form select,
  .contact-form textarea,
  .biwiz input:not([type="checkbox"]):not([type="radio"]),
  .biwiz select,
  .registration-card input:not([type="checkbox"]):not([type="radio"]),
  .registration-card select,
  .registration-card textarea,
  .modal form input:not([type="checkbox"]):not([type="radio"]),
  .modal form select,
  .modal form textarea
) {
  min-height: var(--bi-apple-control-height) !important;
  padding: 10px 12px !important;
  color: var(--bi-fg, var(--ink)) !important;
  background: var(--bi-input-bg, var(--field)) !important;
  border: 1px solid var(--bi-input-border, var(--line)) !important;
  border-radius: var(--bi-apple-cell-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  font-size: 16px !important;
}

:where(
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .biwiz input,
  .biwiz select,
  .registration-card input,
  .registration-card select,
  .registration-card textarea,
  .modal form input,
  .modal form select,
  .modal form textarea
):focus,
:where(
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .biwiz input,
  .biwiz select,
  .registration-card input,
  .registration-card select,
  .registration-card textarea,
  .modal form input,
  .modal form select,
  .modal form textarea
):focus-visible {
  border-color: var(--bi-input-border, var(--line)) !important;
  outline: 3px solid var(--focus, var(--bi-apple-blue)) !important;
  outline-offset: 2px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

:where(
  .contact-form label,
  .biwiz label:not(.biwiz-check),
  .registration-card label:not(.choice)
) {
  font-size: 14px !important;
}

:where(
  .helper,
  .biwiz-help,
  .biwiz-hint,
  .biwiz-field-err,
  .biwiz-strength-word,
  .field-hint,
  .field-error,
  .required-note,
  .step-copy,
  .recaptcha-notice
) {
  font-size: 14px !important;
}

/*
 * Apple web primary button: #0071E3 in both appearances, #0076DF hover,
 * #006EDB pressed, white label, capsule edge, and a restrained glass layer.
 */
:where(
  .button-primary,
  .biwiz-next,
  .biwiz-submit,
  .opm-login-submit,
  .contact-form button[type="submit"],
  .content .login,
  #npSubmit,
  .bdg-btn.primary,
  #metaSubmit
) {
  min-height: var(--bi-apple-control-height) !important;
  padding: 10px 18px !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 48%),
    var(--bi-apple-blue) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: var(--bi-apple-button-radius) !important;
  box-shadow:
    0 10px 28px rgba(0, 86, 176, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

:where(
  .button-primary,
  .biwiz-next,
  .biwiz-submit,
  .opm-login-submit,
  .contact-form button[type="submit"],
  .content .login,
  #npSubmit,
  .bdg-btn.primary,
  #metaSubmit
):hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 48%),
    var(--bi-apple-blue-hover) !important;
}

:where(
  .button-primary,
  .biwiz-next,
  .biwiz-submit,
  .opm-login-submit,
  .contact-form button[type="submit"],
  .content .login,
  #npSubmit,
  .bdg-btn.primary,
  #metaSubmit
):active:not(:disabled) {
  background: var(--bi-apple-blue-active) !important;
  transform: translateY(0) scale(0.985);
}

:where(
  .button-secondary,
  .biwiz-back,
  .biwiz-keep,
  .content .signup
) {
  min-height: var(--bi-apple-control-height) !important;
  padding: 10px 18px !important;
  color: var(--bi-fg, var(--ink)) !important;
  background: var(--bi-card-bg, var(--card)) !important;
  border: 1px solid var(--bi-border, var(--line)) !important;
  border-radius: var(--bi-apple-button-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  font-size: 14px !important;
  font-weight: 600 !important;
}

.biwiz-danger,
.btn-danger,
#cloneClearAll,
#cloneDeleteSelected {
  color: #fff !important;
  background: var(--bi-apple-danger-light) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html.dark .biwiz-danger,
body.contributor-dashboard.dark .btn-danger,
body.contributor-dashboard.dark #cloneClearAll,
body.contributor-dashboard.dark #cloneDeleteSelected {
  background: var(--bi-apple-danger-dark) !important;
}

.btn-success,
#finishBtn {
  color: #fff !important;
  background: var(--bi-apple-success-light) !important;
}

body.contributor-dashboard.dark :where(.btn-success, #finishBtn) {
  color: #001806 !important;
  background: var(--bi-apple-success-dark) !important;
}

/*
 * Registration details: blue is reserved for progress, links, focus, and
 * actions. Decorative blue borders/backgrounds become neutral material.
 */
.registration-card::before {
  display: none !important;
}

:where(
  .reference-preview,
  .design-preview-banner,
  .design-preview-notice,
  .review-panel,
  .customer-id-card
) {
  border-color: var(--bi-border, var(--line)) !important;
  background: rgba(127, 127, 127, 0.055) !important;
}

:where(.reference-preview, .design-preview-notice, .review-panel) {
  border-left-color: var(--bi-border, var(--line)) !important;
}

:where(.eyebrow, .status-kicker, .design-preview-banner strong) {
  color: var(--bi-muted, var(--muted)) !important;
}

:where(.progress-fill, .biwiz-progress-fill) {
  background: linear-gradient(90deg, var(--bi-apple-blue-active), var(--bi-apple-blue)) !important;
}

.progress-track {
  background: var(--bi-border, var(--line)) !important;
}

.editorial-phone-country-control {
  min-height: var(--bi-apple-control-height) !important;
  background: var(--bi-input-bg, var(--field)) !important;
  border: 1px solid var(--bi-input-border, var(--line)) !important;
  border-radius: var(--bi-apple-cell-radius) !important;
}

.editorial-phone-country-control:focus-within {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}

.editorial-phone-country-control select {
  border-radius: 0 var(--bi-apple-cell-radius) var(--bi-apple-cell-radius) 0 !important;
}

.choice input,
.biwiz-check input {
  accent-color: var(--bi-apple-blue) !important;
}

/*
 * Home-page curtains. Media, logos, badges, the user avatar, menu contents,
 * and hero positioning are deliberately excluded.
 */
.modal form,
.opm-panel {
  color: var(--bi-apple-ink-dark) !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(8, 11, 16, 0.88) !important;
  border: 1px solid var(--bi-apple-line-dark) !important;
  border-radius: var(--bi-apple-card-radius) !important;
  box-shadow: var(--bi-apple-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
  backdrop-filter: blur(26px) saturate(150%) !important;
}

.opm-login-submit {
  width: 100%;
  justify-content: center;
}

.content :where(button, a.login) {
  min-height: var(--bi-apple-control-height);
  font-size: 14px !important;
}

/*
 * Contributor dashboard. A body class is added only to dashboard.html so
 * these rules cannot leak into either protected video homepage.
 */
body.contributor-dashboard {
  --bg: var(--bi-apple-page-light);
  --fg: var(--bi-apple-ink-light);
  --muted: var(--bi-apple-muted-light);
  --brand: var(--bi-apple-blue);
  --brand-2: var(--bi-apple-blue-hover);
  --card: var(--bi-apple-card-light);
  --border: var(--bi-apple-line-light);
  --input-bg: var(--bi-apple-field-light);
  --radius: var(--bi-apple-card-radius);
  --bi-primary-1: var(--bi-apple-blue);
  --bi-primary-2: var(--bi-apple-blue-active);
  color: var(--fg);
  background-color: var(--bi-apple-page-light);
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.96), transparent 34rem),
    linear-gradient(155deg, #f8f8fa 0%, var(--bi-apple-page-light) 58%, #efeff2 100%);
  background-attachment: fixed;
  font-size: 15px;
}

body.contributor-dashboard.dark {
  --bg: var(--bi-apple-page-dark);
  --fg: var(--bi-apple-ink-dark);
  --muted: var(--bi-apple-muted-dark);
  --brand: var(--bi-apple-blue);
  --brand-2: var(--bi-apple-link-dark);
  --card: var(--bi-apple-card-dark);
  --border: var(--bi-apple-line-dark);
  --input-bg: var(--bi-apple-field-dark);
  color: var(--fg);
  background-color: var(--bi-apple-page-dark);
  background-image:
    radial-gradient(circle at 80% 6%, rgba(41, 151, 255, 0.13), transparent 34rem),
    radial-gradient(circle at 12% 92%, rgba(0, 113, 227, 0.06), transparent 30rem),
    linear-gradient(155deg, #020407 0%, #06090e 54%, #020407 100%);
}

body.contributor-dashboard :where(
  .card,
  .panel,
  .sh-section,
  .modal-inner,
  .cMS-glass,
  .users-console,
  .editorial-buyers-admin
) {
  border-color: var(--border) !important;
  border-radius: var(--bi-apple-card-radius) !important;
  background: var(--card) !important;
  box-shadow: var(--bi-apple-card-shadow-light);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

body.contributor-dashboard :where(
  .card,
  .panel,
  .sh-section,
  .modal-inner,
  .cMS-glass,
  .users-console,
  .editorial-buyers-admin
) {
  border: 1px solid var(--border) !important;
}

body.contributor-dashboard.dark :where(
  .card,
  .panel,
  .sh-section,
  .modal-inner,
  .cMS-glass,
  .users-console,
  .editorial-buyers-admin
) {
  box-shadow: var(--bi-apple-card-shadow-dark);
}

body.contributor-dashboard main.wrap :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
),
body.contributor-dashboard .modal-inner :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  min-height: var(--bi-apple-control-height) !important;
  color: var(--fg) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--bi-apple-cell-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  font-size: 16px !important;
}

body.contributor-dashboard main.wrap :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
):focus-visible,
body.contributor-dashboard .modal-inner :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
):focus-visible {
  border-color: var(--border) !important;
  outline: 3px solid var(--brand-2) !important;
  outline-offset: 2px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.contributor-dashboard main.wrap :where(
  .bdg-btn,
  .sh-btn,
  .btn,
  .btn-block,
  .btn-ghost,
  .btn-danger,
  .btn-success,
  .actionBtn,
  #metaSubmit,
  #metaReset,
  #browseImagesBtn,
  #selectAllBtn,
  #deselectAllBtn,
  #cloneClearAll,
  #cloneDeleteSelected,
  #finishBtn
),
body.contributor-dashboard .modal-inner :where(
  .bdg-btn,
  .sh-btn,
  .btn,
  .btn-block,
  .btn-ghost,
  .btn-danger,
  .btn-success,
  .actionBtn
) {
  border-radius: var(--bi-apple-button-radius) !important;
  font-size: 14px !important;
}

body.contributor-dashboard main.wrap :where(
  #metaSubmit,
  #metaReset,
  #browseImagesBtn,
  #selectAllBtn,
  #deselectAllBtn,
  #cloneClearAll,
  #cloneDeleteSelected,
  #finishBtn,
  .sh-btn,
  .bdg-btn,
  .btn,
  .btn-block,
  .btn-ghost,
  .btn-danger,
  .btn-success,
  .actionBtn
),
body.contributor-dashboard .modal-inner :where(
  .bdg-btn,
  .sh-btn,
  .btn,
  .btn-block,
  .btn-ghost,
  .btn-danger,
  .btn-success,
  .actionBtn
) {
  min-height: var(--bi-apple-control-height) !important;
}

body.contributor-dashboard main.wrap :where(
  #metaSubmit,
  #browseImagesBtn,
  #selectAllBtn,
  .sh-btn,
  .bdg-btn.primary,
  .actionBtn.primary
),
body.contributor-dashboard .modal-inner :where(
  .bdg-btn.primary,
  .sh-btn,
  .actionBtn.primary
) {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 48%),
    var(--bi-apple-blue);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    0 10px 28px rgba(0, 86, 176, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.contributor-dashboard main.wrap :where(
  #metaSubmit,
  #browseImagesBtn,
  #selectAllBtn,
  .sh-btn,
  .bdg-btn.primary,
  .actionBtn.primary
):hover:not(:disabled),
body.contributor-dashboard .modal-inner :where(
  .bdg-btn.primary,
  .sh-btn,
  .actionBtn.primary
):hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 48%),
    var(--bi-apple-blue-hover) !important;
}

body.contributor-dashboard main.wrap :where(
  #metaSubmit,
  #browseImagesBtn,
  #selectAllBtn,
  .sh-btn,
  .bdg-btn.primary,
  .actionBtn.primary
):active:not(:disabled),
body.contributor-dashboard .modal-inner :where(
  .bdg-btn.primary,
  .sh-btn,
  .actionBtn.primary
):active:not(:disabled) {
  background: var(--bi-apple-blue-active) !important;
}

body.contributor-dashboard main.wrap :where(button, .bdg-btn, .btn, .actionBtn):disabled,
body.contributor-dashboard .modal-inner :where(button, .bdg-btn, .btn, .actionBtn):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.contributor-dashboard main.wrap .btn-ghost,
body.contributor-dashboard .modal-inner .btn-ghost {
  color: var(--fg);
  background: var(--card);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.contributor-dashboard main.wrap :where(
  label,
  button,
  .tab,
  .gallery-meta,
  .progress-caption,
  .progress-label,
  .meta,
  .session,
  .helper
),
body.contributor-dashboard .modal-inner :where(
  label,
  button,
  .helper
) {
  font-size: max(12px, 0.875rem);
}

/*
 * Public information pages: meaningful text remains at least 14px; metadata
 * stays at least 12px. This does not resize logos or media.
 */
.page :where(p, ul, ol) {
  font-size: max(14px, 0.875rem);
}

.page :where(.desc, .helper, .lede-form) {
  font-size: max(12px, 0.75rem);
}

.page :where(.meta, .label),
footer.site-footer,
footer.site-footer .copy,
.bi-drawer-footer,
.editorial-drawer-footer {
  font-size: max(12px, 0.75rem);
}

.page a,
.site-footer a,
.editorial-drawer-external {
  color: var(--bi-link, var(--wire-text));
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.light :where(
    .registration-card,
    .access-card,
    .contact-card,
    .contact-form,
    .kpi,
    .city,
    header.site-header
  ) {
    background: rgba(255, 255, 255, 0.96) !important;
  }

  html.dark :where(
    .registration-card,
    .access-card,
    .contact-card,
    .contact-form,
    .kpi,
    .city,
    header.site-header
  ) {
    background: rgba(10, 13, 18, 0.97) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(button, a, input, select, textarea) {
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(
    .registration-card,
    .access-card,
    .contact-card,
    .contact-form,
    .kpi,
    .city,
    input,
    select,
    textarea,
    button
  ) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }

  :where(.button-primary, .biwiz-next, .biwiz-submit, #metaSubmit) {
    border: 2px solid Highlight !important;
  }
}

/*
 * Upload / Feed topbars + Upload form-width parity — approved 2026-08-03.
 *
 * These two topbars reuse the existing Sales visual language while controlling
 * the single canonical dashboard navigation dialog. They deliberately remain
 * outside .sh-wrap[data-panel], so no local section drawer or route controller
 * is created. The Upload form expands through only its transparent structural
 * wrapper gutter; the drop zone and every workflow surface stay untouched.
 */
body.contributor-dashboard :is(#create, #archive) > .dashboard-tab-topbar {
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

body.contributor-dashboard .dashboard-tab-topbar .sh-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.contributor-dashboard .dashboard-tab-topbar .sh-title small {
  margin-top: 2px;
  line-height: 1.35;
  white-space: normal;
}

body.contributor-dashboard .dashboard-tab-topbar .sh-crumb {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.contributor-dashboard #create > .card {
  --bi-upload-form-shell-inset: calc(var(--space-3) + 1px);
}

body.contributor-dashboard #create > .card > #metaForm {
  width: calc(
    100% + var(--bi-upload-form-shell-inset) + var(--bi-upload-form-shell-inset)
  );
  max-width: none;
  margin-inline: calc(0px - var(--bi-upload-form-shell-inset));
  margin-block-end: calc(0px - var(--bi-upload-form-shell-inset));
  padding: var(--space-3);
  box-sizing: border-box;
}

@media (max-width: 680px) {
  body.contributor-dashboard .dashboard-tab-topbar .sh-crumb {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.contributor-dashboard:not(.dark) .dashboard-tab-topbar {
    background: #f5f5f7 !important;
  }

  body.contributor-dashboard.dark .dashboard-tab-topbar {
    background: #1c1c1e !important;
  }
}

@media (forced-colors: active) {
  body.contributor-dashboard #create > .card {
    --bi-upload-form-shell-inset: var(--space-3);
  }
}

/* ================================================================
   Unified dashboard sidebar — 2026-08-02
   Desktop uses the original dashboard tab buttons plus the original
   Settings navigation node. Mobile keeps the approved 2x5 dock and
   returns #shSetDrawer to its existing in-panel position.
   ================================================================ */
.system-sidebar-group-label,
#unifiedSettingsNavSlot {
  display: none;
}

@media (min-width: 901px) {
  body.contributor-dashboard .wrap {
    grid-template-columns: minmax(220px, 248px) minmax(0, 1fr) !important;
    gap: 0;
    margin: 0 !important;
  }

  body.contributor-dashboard.rail-collapsed .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.contributor-dashboard #leftLinkRail {
    position: sticky !important;
    top: var(--header-session-sticky-h, 0px) !important;
    width: 248px !important;
    min-width: 220px !important;
    max-width: 248px !important;
    height: calc(100dvh - var(--header-session-sticky-h, 0px));
    min-height: 560px;
    max-height: calc(100dvh - var(--header-session-sticky-h, 0px));
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    overflow: hidden !important;
    color: var(--fg);
    background: #f2f2f7 !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.contributor-dashboard.dark #leftLinkRail {
    background: #2c2c2e !important;
  }

  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 14px 10px 12px;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
  }

  body.contributor-dashboard #leftLinkRail .system-sidebar-group-label {
    display: block;
    flex: 0 0 auto;
    padding: 10px 10px 7px;
    color: var(--muted);
    font-family: var(--bi-apple-system-font) !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body.contributor-dashboard #leftLinkRail .system-sidebar-group-label:first-child {
    padding-top: 2px;
  }

  body.contributor-dashboard #leftLinkRail .system-sidebar-settings-label {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  body.contributor-dashboard #leftLinkRail .system-sidebar-utility-label {
    padding-top: 9px;
    border-top: 1px solid var(--border);
  }

  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square,
  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square.tab {
    width: 100% !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    max-width: none !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    margin: 1px 0;
    padding: 0 10px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: var(--muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square:hover {
    color: var(--fg) !important;
    background: rgba(60, 60, 67, 0.065) !important;
  }

  body.contributor-dashboard.dark #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square:hover {
    background: rgba(255, 255, 255, 0.065) !important;
  }

  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square.tab.active {
    color: var(--bi-apple-link-light) !important;
    background: rgba(0, 122, 255, 0.1) !important;
  }

  body.contributor-dashboard.dark #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square.tab.active {
    color: var(--bi-apple-link-dark) !important;
    background: rgba(10, 132, 255, 0.1) !important;
  }

  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square .sb-ico {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
  }

  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square .sidebar-sample-label {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0;
    padding: 0;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--bi-apple-system-font) !important;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 1.25;
    text-align: left;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
  }

  body.contributor-dashboard #leftLinkRail #railShareBtn,
  body.contributor-dashboard #leftLinkRail #railHelpBtn {
    display: none !important;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot {
    min-height: 120px;
    margin: 0 -2px 8px 0;
    padding-right: 2px;
    display: block;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot::-webkit-scrollbar {
    width: 8px;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 67, 0.25);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  body.contributor-dashboard.dark #unifiedSettingsNavSlot::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 0;
    display: block !important;
    color: var(--fg);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer > header,
  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer > .sh-foot {
    display: none !important;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navlist {
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navgroup {
    padding: 12px 10px 6px;
    color: var(--muted);
    font-family: var(--bi-apple-system-font) !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navgroup:first-child {
    padding-top: 2px;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navgroup--additional {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navlink {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 1px 0;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px;
    box-shadow: none !important;
    font-family: var(--bi-apple-system-font) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navlink > svg {
    display: none;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-navlink:hover {
    color: var(--fg);
    background: rgba(60, 60, 67, 0.065) !important;
  }

  body.contributor-dashboard.dark #unifiedSettingsNavSlot #shSetDrawer .sh-navlink:hover {
    background: rgba(255, 255, 255, 0.065) !important;
  }

  body.contributor-dashboard:has(#dashboard.active)
    #unifiedSettingsNavSlot #shSetDrawer .sh-navlink[aria-current="true"],
  body.contributor-dashboard:has(#dashboard.active .sh-section[data-sec="home"].on)
    #unifiedSettingsNavSlot #shSetDrawer .sh-navlink[data-sec="endpoints"] {
    color: var(--bi-apple-link-light);
    background: rgba(0, 122, 255, 0.1) !important;
    font-weight: 600;
  }

  body.contributor-dashboard.dark:has(#dashboard.active)
    #unifiedSettingsNavSlot #shSetDrawer .sh-navlink[aria-current="true"],
  body.contributor-dashboard.dark:has(#dashboard.active .sh-section[data-sec="home"].on)
    #unifiedSettingsNavSlot #shSetDrawer .sh-navlink[data-sec="endpoints"] {
    color: var(--bi-apple-link-dark);
    background: rgba(10, 132, 255, 0.1) !important;
  }

  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer .sh-nav-badge {
    min-height: 22px;
    margin-left: auto;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bi-apple-link-light);
    background: rgba(0, 122, 255, 0.07);
    border: 1px solid rgba(0, 122, 255, 0.55);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
  }

  body.contributor-dashboard.dark #unifiedSettingsNavSlot #shSetDrawer .sh-nav-badge {
    color: var(--bi-apple-link-dark);
    background: rgba(10, 132, 255, 0.08);
    border-color: rgba(10, 132, 255, 0.62);
  }

  body.contributor-dashboard #dashboard .sh-settings-embedded {
    display: block;
  }

  body.contributor-dashboard #dashboard .sh-settings-embedded > .sh-burger,
  body.contributor-dashboard #dashboard .sh-settings-embedded > .sh-topbar .sh-burger {
    display: none !important;
  }

  /* Global-nav trigger, desktop + iPad landscape only.
     The rule directly above hides EVERY .sh-burger in this topbar at (1,4,1),
     so this override must out-specify it — two ids gives (2,3,1). Without that,
     !important alone loses and the button never appears.

     ⚠ SUPERSEDED 2026-08-05 (Tweak 4). The sentence that used to close this comment —
     "below 901px this stays hidden and #shSetBurger keeps its section-drawer job, so
     exactly one burger is ever visible" — is NO LONGER TRUE and has been removed rather
     than left to mislead. #shSetBurger is now hidden at every width, and no panel header
     anywhere carries a burger: the single global ≡ lives in the app header and each panel
     header shows its destination icon instead. The rule below is therefore overridden at
     the end of this file by a (2,4,0) selector. It is kept here, not deleted, because
     deleting it would silently re-expose the button the moment that override is touched. */
  body.contributor-dashboard #dashboard .sh-settings-embedded
    > .sh-topbar > #settingsDashboardMenuButton {
    display: flex !important;
  }

  body.contributor-dashboard #dashboard .sh-settings-embedded > .sh-body {
    width: 100%;
    min-width: 0;
  }
}

/* Companion to the rule above: below 901px the global-nav trigger is hidden and
   #shSetBurger takes over with its in-panel section drawer. A separate media
   condition rather than a base rule, so neither can shadow the other. */
@media (max-width: 900px) {
  body.contributor-dashboard #dashboard .sh-settings-embedded
    > .sh-topbar > #settingsDashboardMenuButton {
    display: none !important;
  }
}

#dashNavDrawer .dashnav-group {
  padding: 14px 20px 6px;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--bi-apple-system-font) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#dashNavDrawer .dashnav-item {
  font-family: var(--bi-apple-system-font) !important;
}

#dashNavDrawer .dashnav-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#dashNavDrawer .dashnav-badge {
  margin-left: auto;
  padding: 3px 6px;
  color: #5ac8fa;
  border: 1px solid rgba(90, 200, 250, 0.58);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

@media (forced-colors: active) and (min-width: 901px) {
  body.contributor-dashboard #leftLinkRail,
  body.contributor-dashboard #unifiedSettingsNavSlot #shSetDrawer {
    color: CanvasText;
    background: Canvas !important;
    border-color: CanvasText !important;
  }

  body.contributor-dashboard:has(#dashboard.active)
    #unifiedSettingsNavSlot #shSetDrawer .sh-navlink[aria-current="true"],
  body.contributor-dashboard:has(#dashboard.active .sh-section[data-sec="home"].on)
    #unifiedSettingsNavSlot #shSetDrawer .sh-navlink[data-sec="endpoints"] {
    color: HighlightText;
    background: Highlight !important;
  }
}

/*
 * Apple system v6 — approved combined runtime theme
 * Fernando approval: 2026-07-30
 *
 * This additive layer supersedes only presentation from v5:
 * - system UI typography (SF Pro on Apple platforms)
 * - flat Apple light / graphite dark page canvases, without page gradients
 * - 9px, 44px-minimum Apple controls
 * - neutral Liquid Glass navigation and control surfaces
 * - Apple blue reserved for actions, selection, links, progress, and focus
 * - web-safe embedded SVG masks for dashboard action symbols
 *
 * Routes, ids, events, media, account controls, feature labels, and API
 * behavior remain owned by the existing documents and scripts.
 */
:root {
  --bi-apple-system-font:
    system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --bi-apple-system-mono:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --bi-apple-button-radius: 9px;
  --bi-apple-control-height: 44px;
  --bi-apple-page-light: #f5f5f7;
  --bi-apple-page-dark: #020407;
  --bi-apple-surface-light: rgba(255, 255, 255, 0.86);
  --bi-apple-surface-dark: rgba(28, 28, 30, 0.84);
  --bi-apple-raised-light: rgba(255, 255, 255, 0.94);
  --bi-apple-raised-dark: rgba(36, 36, 38, 0.9);
  --bi-apple-field-light: rgba(242, 242, 247, 0.9);
  --bi-apple-field-dark: rgba(44, 44, 46, 0.82);
  --bi-apple-line-light: rgba(60, 60, 67, 0.24);
  --bi-apple-line-dark: rgba(235, 235, 245, 0.18);
  --bi-apple-liquid-light: rgba(255, 255, 255, 0.64);
  --bi-apple-liquid-dark: rgba(44, 44, 46, 0.58);
  --bi-apple-liquid-strong-light: rgba(255, 255, 255, 0.8);
  --bi-apple-liquid-strong-dark: rgba(52, 52, 56, 0.72);
}

html body,
html body :where(
  *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands)
) {
  font-family: var(--bi-apple-system-font) !important;
}

html body :where(
  code,
  pre,
  kbd,
  samp,
  .eba-mono,
  .customer-id-value,
  .customer-id-reference,
  [data-machine-value]
) {
  font-family: var(--bi-apple-system-mono) !important;
  font-variant-numeric: tabular-nums;
}

html,
body {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.light body,
html.dark body,
body.contributor-dashboard,
body.contributor-dashboard.dark {
  background-image: none !important;
  background-attachment: initial !important;
}

html.light body,
body.contributor-dashboard:not(.dark) {
  background-color: var(--bi-apple-page-light) !important;
}

html.dark body,
body.contributor-dashboard.dark {
  background-color: var(--bi-apple-page-dark) !important;
}

html.light {
  --bi-card-bg: var(--bi-apple-surface-light);
  --bi-input-bg: var(--bi-apple-field-light);
}

html.dark {
  --bi-card-bg: var(--bi-apple-surface-dark);
  --bi-input-bg: var(--bi-apple-field-dark);
}

/*
 * Buttons and interactive controls. Primary actions are solid #0071E3;
 * the restrained highlight comes from the inset edge, not a blue gradient.
 */
:where(
  .button-primary,
  .biwiz-next,
  .biwiz-submit,
  .opm-login-submit,
  .contact-form button[type="submit"],
  .content .login,
  #npSubmit,
  .bdg-btn.primary,
  #metaSubmit
) {
  min-height: var(--bi-apple-control-height) !important;
  padding: 10px 18px !important;
  color: #fff !important;
  background: var(--bi-apple-blue) !important;
  background-image: none !important;
  border: 1px solid #459cf0 !important;
  border-radius: var(--bi-apple-button-radius) !important;
  box-shadow:
    0 8px 22px rgba(0, 113, 227, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

:where(
  .button-primary,
  .biwiz-next,
  .biwiz-submit,
  .opm-login-submit,
  .contact-form button[type="submit"],
  .content .login,
  #npSubmit,
  .bdg-btn.primary,
  #metaSubmit
):hover:not(:disabled) {
  background: var(--bi-apple-blue-hover) !important;
  background-image: none !important;
}

:where(
  .button-primary,
  .biwiz-next,
  .biwiz-submit,
  .opm-login-submit,
  .contact-form button[type="submit"],
  .content .login,
  #npSubmit,
  .bdg-btn.primary,
  #metaSubmit
):active:not(:disabled) {
  background: var(--bi-apple-blue-active) !important;
  transform: translateY(0) scale(0.985);
}

:where(
  .button-secondary,
  .biwiz-back,
  .biwiz-keep,
  .content .signup
) {
  border-radius: var(--bi-apple-button-radius) !important;
}

/*
 * Dashboard palette. Content stays standard material; navigation, segmented
 * controls, and action controls receive neutral Liquid Glass.
 */
body.contributor-dashboard {
  --bg: var(--bi-apple-page-light);
  --fg: var(--bi-apple-ink-light);
  --muted: var(--bi-apple-muted-light);
  --brand: var(--bi-apple-blue);
  --brand-2: var(--bi-apple-blue);
  --card: var(--bi-apple-surface-light);
  --border: var(--bi-apple-line-light);
  --input-bg: var(--bi-apple-field-light);
  --glass: var(--bi-apple-liquid-light);
  --glass-line: rgba(255, 255, 255, 0.86);
  --cyan: var(--bi-apple-blue);
  --radius: 14px;
}

body.contributor-dashboard.dark {
  --bg: var(--bi-apple-page-dark);
  --fg: var(--bi-apple-ink-dark);
  --muted: var(--bi-apple-muted-dark);
  --brand: var(--bi-apple-blue);
  --brand-2: var(--bi-apple-link-dark);
  --card: var(--bi-apple-surface-dark);
  --border: var(--bi-apple-line-dark);
  --input-bg: var(--bi-apple-field-dark);
  --glass: var(--bi-apple-liquid-dark);
  --glass-line: rgba(255, 255, 255, 0.22);
  --cyan: var(--bi-apple-link-dark);
}

body.contributor-dashboard main.wrap button {
  min-height: var(--bi-apple-control-height);
  border: 1px solid var(--border);
  border-radius: var(--bi-apple-button-radius) !important;
  color: var(--fg);
  background: var(--bi-apple-liquid-strong-light);
  background-image: none;
  box-shadow:
    0 7px 20px rgba(31, 40, 52, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
}

body.contributor-dashboard.dark main.wrap button {
  background: var(--bi-apple-liquid-strong-dark);
  background-image: none;
  box-shadow:
    0 7px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.contributor-dashboard main.wrap :where(
  #metaSubmit,
  #browseImagesBtn,
  #selectAllBtn,
  .sh-btn:not(.ghost):not(.danger),
  .bdg-btn.primary,
  .actionBtn.primary,
  .btn-success,
  #finishBtn
),
dialog.cM-dlg :where(.cM-dlgbtn-primary),
.eba-console .eba-button-primary,
dialog.eba-dialog .eba-button-primary {
  color: #fff !important;
  background: var(--bi-apple-blue) !important;
  background-image: none !important;
  border-color: #459cf0 !important;
  box-shadow:
    0 8px 22px rgba(0, 113, 227, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* The legacy ID rule carries ID-level !important specificity. Keep this
 * explicit ID override so green remains a status color, never an action. */
body.contributor-dashboard #finishBtn {
  color: #fff !important;
  background: var(--bi-apple-blue) !important;
  background-image: none !important;
  border-color: #459cf0 !important;
  box-shadow:
    0 8px 22px rgba(0, 113, 227, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body.contributor-dashboard #finishBtn:hover:not(:disabled) {
  background: var(--bi-apple-blue-hover) !important;
}

body.contributor-dashboard main.wrap :where(
  #metaSubmit,
  #browseImagesBtn,
  #selectAllBtn,
  .sh-btn:not(.ghost):not(.danger),
  .bdg-btn.primary,
  .actionBtn.primary,
  .btn-success,
  #finishBtn
):hover:not(:disabled),
dialog.cM-dlg .cM-dlgbtn-primary:hover:not(:disabled),
.eba-console .eba-button-primary:hover:not(:disabled),
dialog.eba-dialog .eba-button-primary:hover:not(:disabled) {
  background: var(--bi-apple-blue-hover) !important;
}

body.contributor-dashboard main.wrap :where(
  .btn-danger,
  .sh-btn.danger,
  #cloneClearAll,
  #cloneDeleteSelected
),
dialog.cM-dlg .cM-dlgbtn-danger,
.eba-console .eba-button-danger {
  color: var(--bi-apple-danger-light) !important;
  background: rgba(215, 0, 21, 0.07) !important;
  background-image: none !important;
  border-color: rgba(215, 0, 21, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

body.contributor-dashboard.dark main.wrap :where(
  .btn-danger,
  .sh-btn.danger,
  #cloneClearAll,
  #cloneDeleteSelected
),
body.contributor-dashboard.dark dialog.cM-dlg .cM-dlgbtn-danger,
body.contributor-dashboard.dark .eba-console .eba-button-danger {
  color: var(--bi-apple-danger-dark) !important;
  background: rgba(255, 69, 58, 0.11) !important;
  border-color: rgba(255, 69, 58, 0.36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.contributor-dashboard main.wrap :where(
  .btn-ghost,
  .bdg-btn:not(.primary),
  .sh-btn.ghost,
  .set-back
),
dialog.cM-dlg .cM-dlgbtn:not(.cM-dlgbtn-primary):not(.cM-dlgbtn-danger),
.eba-console .eba-button-secondary,
dialog.eba-dialog .eba-button-secondary {
  color: var(--fg) !important;
  background: var(--bi-apple-liquid-strong-light) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow:
    0 7px 20px rgba(31, 40, 52, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body.contributor-dashboard.dark main.wrap :where(
  .btn-ghost,
  .bdg-btn:not(.primary),
  .sh-btn.ghost,
  .set-back
),
body.contributor-dashboard.dark dialog.cM-dlg .cM-dlgbtn:not(.cM-dlgbtn-primary):not(.cM-dlgbtn-danger),
body.contributor-dashboard.dark .eba-console .eba-button-secondary,
body.contributor-dashboard.dark dialog.eba-dialog .eba-button-secondary {
  color: var(--fg) !important;
  background: var(--bi-apple-liquid-strong-dark) !important;
  border-color: var(--border) !important;
  box-shadow:
    0 7px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.contributor-dashboard main.wrap button:hover:not(:disabled),
dialog.cM-dlg button:hover:not(:disabled),
.eba-console button:hover:not(:disabled),
dialog.eba-dialog button:hover:not(:disabled) {
  transform: translateY(-1px);
}

body.contributor-dashboard main.wrap button:active:not(:disabled),
dialog.cM-dlg button:active:not(:disabled),
.eba-console button:active:not(:disabled),
dialog.eba-dialog button:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

/*
 * Left rail and Settings navigation retain their existing geometry and event
 * model while adopting the approved neutral glass and Apple selection states.
 */
body.contributor-dashboard #leftLinkRail {
  background: var(--bi-apple-liquid-light) !important;
  border-color: var(--bi-apple-line-light) !important;
  box-shadow:
    0 12px 32px rgba(31, 40, 52, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
}

body.contributor-dashboard.dark #leftLinkRail {
  background: var(--bi-apple-liquid-dark) !important;
  border-color: var(--bi-apple-line-dark) !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.contributor-dashboard #leftLinkRail .sidebar-sample-square,
body.contributor-dashboard #leftLinkRail .sidebar-sample-square.tab {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.contributor-dashboard #leftLinkRail .sidebar-sample-square .sb-ico {
  width: 19px;
  height: 19px;
  min-width: 19px;
  flex-basis: 19px;
  color: currentColor !important;
}

body.contributor-dashboard #leftLinkRail .sidebar-sample-square:hover {
  color: var(--fg) !important;
  background: rgba(60, 60, 67, 0.065) !important;
}

body.contributor-dashboard.dark #leftLinkRail .sidebar-sample-square:hover {
  background: rgba(255, 255, 255, 0.065) !important;
}

body.contributor-dashboard #leftLinkRail .sidebar-sample-square.tab.active {
  color: var(--bi-apple-link-light) !important;
  background: rgba(0, 122, 255, 0.1) !important;
  box-shadow: none !important;
}

body.contributor-dashboard.dark #leftLinkRail .sidebar-sample-square.tab.active {
  color: var(--bi-apple-link-dark) !important;
  background: rgba(10, 132, 255, 0.1) !important;
}

body.contributor-dashboard #leftLinkRail .sidebar-sample-label {
  color: currentColor !important;
  font-family: var(--bi-apple-system-font) !important;
  font-weight: 600 !important;
}

body.contributor-dashboard :where(.sh-wrap, .sh-topbar, .sh-drawer) {
  background-image: none !important;
}

body.contributor-dashboard .sh-wrap {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

body.contributor-dashboard .sh-topbar {
  background: rgba(255, 255, 255, 0.76) !important;
  border-bottom-color: var(--border) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
}

body.contributor-dashboard.dark .sh-topbar {
  background: rgba(28, 28, 30, 0.78) !important;
}

body.contributor-dashboard .sh-drawer {
  color: var(--fg);
  background: rgba(245, 245, 247, 0.92) !important;
  border-right: 1px solid var(--border);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
}

body.contributor-dashboard.dark .sh-drawer {
  background: rgba(28, 28, 30, 0.92) !important;
}

body.contributor-dashboard .sh-drawer :where(header, .sh-foot) {
  border-color: var(--border);
}

body.contributor-dashboard .sh-drawer :where(header b, .sh-close, .sh-navgroup) {
  color: var(--muted);
}

body.contributor-dashboard .sh-wrap[data-panel] .sh-navlink {
  min-height: 44px;
  padding: 9px 14px;
  margin: 1px 8px;
  width: calc(100% - 16px);
  color: var(--muted);
  border-radius: 9px;
  font-family: var(--bi-apple-system-font) !important;
  font-size: 13px;
  font-weight: 500;
}

body.contributor-dashboard .sh-wrap[data-panel] .sh-navlink:hover {
  color: var(--fg);
  background: rgba(60, 60, 67, 0.065);
}

body.contributor-dashboard.dark .sh-wrap[data-panel] .sh-navlink:hover {
  background: rgba(255, 255, 255, 0.065);
}

body.contributor-dashboard .sh-wrap[data-panel] .sh-navlink[aria-current="true"] {
  color: var(--bi-apple-link-light);
  background: rgba(0, 122, 255, 0.1);
  box-shadow: none;
  font-weight: 600;
}

body.contributor-dashboard.dark .sh-wrap[data-panel] .sh-navlink[aria-current="true"] {
  color: var(--bi-apple-link-dark);
  background: rgba(10, 132, 255, 0.1);
}

body.contributor-dashboard :where(
  .sh-title,
  .sh-title small,
  .sh-sec-head,
  #shLiveEndpoints .card > h3,
  .sh-wrap[data-panel] .set-card-label,
  .sh-wrap[data-panel] .set-card-status,
  .sh-wrap[data-panel] .set-back,
  .sidebar-sample-label
) {
  font-family: var(--bi-apple-system-font) !important;
}

body.contributor-dashboard .sh-wrap[data-panel] .set-card {
  background: var(--bi-apple-raised-light);
  background-image: none;
  border-color: var(--border);
  border-radius: 14px !important;
  padding: 13px !important;
  box-shadow: none;
}

body.contributor-dashboard.dark .sh-wrap[data-panel] .set-card {
  background: var(--bi-apple-raised-dark);
}

body.contributor-dashboard .sh-wrap[data-panel] .set-card-ic {
  color: var(--bi-apple-link-light);
  background: rgba(0, 122, 255, 0.1);
  background-image: none;
}

body.contributor-dashboard.dark .sh-wrap[data-panel] .set-card-ic {
  color: var(--bi-apple-link-dark);
  background: rgba(10, 132, 255, 0.1);
}

body.contributor-dashboard .sh-wrap[data-panel] .set-card:hover {
  border-color: color-mix(in srgb, var(--bi-apple-blue) 42%, var(--border));
  background: var(--bi-apple-raised-light);
  background-image: none;
}

body.contributor-dashboard.dark .sh-wrap[data-panel] .set-card:hover {
  background: var(--bi-apple-raised-dark);
}

body.contributor-dashboard .sh-wrap[data-panel] .set-card-status {
  color: var(--muted) !important;
  background: rgba(127, 127, 127, 0.08);
  border-color: var(--border);
}

body.contributor-dashboard .sh-form :where(input, select, textarea),
body.contributor-dashboard :where(.cM-searchinput, .eba-field input, .eba-field select, .eba-field textarea) {
  color: var(--fg) !important;
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  border-radius: 9px !important;
}

body.contributor-dashboard :where(
  .sh-form input,
  .sh-form select,
  .sh-form textarea,
  .cM-searchinput,
  .eba-field input,
  .eba-field select,
  .eba-field textarea
):focus-visible {
  border-color: var(--border) !important;
  outline: 3px solid var(--bi-apple-blue) !important;
  outline-offset: 2px !important;
}

body.contributor-dashboard :where(
  input[type="checkbox"],
  input[type="radio"]
) {
  accent-color: var(--bi-apple-blue);
}

/*
 * Users & Roles and Editorial Buyers: neutral materials, blue focus/actions,
 * red destructive actions, and system monospace for machine references.
 */
.eba-console {
  --eba-ink: var(--fg);
  --eba-muted: var(--muted);
  --eba-line: var(--border);
  --eba-panel: var(--bi-apple-raised-light);
  --eba-soft: var(--bi-apple-field-light);
  --eba-teal: var(--bi-apple-blue);
  --eba-teal-dark: var(--bi-apple-blue-active);
  --eba-blue: var(--bi-apple-link-light);
  --eba-red: var(--bi-apple-danger-light);
  font-family: var(--bi-apple-system-font) !important;
}

body.dark .eba-console {
  --eba-ink: var(--fg);
  --eba-muted: var(--muted);
  --eba-line: var(--border);
  --eba-panel: var(--bi-apple-raised-dark);
  --eba-soft: var(--bi-apple-field-dark);
  --eba-teal: var(--bi-apple-blue);
  --eba-teal-dark: var(--bi-apple-blue-active);
  --eba-blue: var(--bi-apple-link-dark);
  --eba-red: var(--bi-apple-danger-dark);
}

.eba-console :focus-visible,
dialog.eba-dialog :focus-visible,
dialog.cM-dlg :focus-visible {
  outline-color: var(--bi-apple-blue) !important;
}

.eba-console :where(
  .eba-console-heading,
  .eba-detail-heading,
  .eba-ledger-country
),
dialog.eba-dialog .eba-dialog-head h2 {
  font-family: var(--bi-apple-system-font) !important;
  letter-spacing: -0.015em;
}

.eba-console :where(.eba-card, .eba-filterbar, .eba-ledger, .eba-application) {
  background-image: none !important;
}

.eba-console .eba-filterbar {
  background: var(--eba-soft);
  border-color: var(--eba-line);
}

.eba-console .eba-application[aria-current="true"] {
  background: rgba(0, 122, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--bi-apple-blue);
}

body.dark .eba-console .eba-application[aria-current="true"] {
  background: rgba(10, 132, 255, 0.1);
}

.eba-console .eba-ledger-card-issued,
.eba-console .eba-ledger-card-current {
  box-shadow: inset 0 3px 0 var(--bi-apple-blue);
}

dialog.cM-dlg,
dialog.eba-dialog {
  color: #f5f5f7 !important;
  background: rgba(28, 28, 30, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(235, 235, 245, 0.2) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
}

dialog.cM-dlg :where(input, select, textarea),
dialog.eba-dialog :where(input, select, textarea) {
  color: #f5f5f7 !important;
  background: rgba(44, 44, 46, 0.86) !important;
  border-color: rgba(235, 235, 245, 0.2) !important;
}

dialog.eba-dialog :where(.eba-dialog-warning, .eba-dialog-note) {
  color: #d1d1d6;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(235, 235, 245, 0.18);
}

dialog.cM-dlg button,
dialog.eba-dialog button,
.eba-console .eba-button {
  min-height: var(--bi-apple-control-height);
  border-radius: var(--bi-apple-button-radius) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/*
 * Embedded, web-safe Apple-style line symbols. These are local CSS masks, not
 * SF Symbols or an external icon font, so they are redistributable on the web.
 */
[data-bi-icon="key"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M15 8l3 3M17 6l2 2'/%3E%3C/svg%3E");
}
[data-bi-icon="refresh"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6v6h-6M18.5 9A8 8 0 1 0 20 15'/%3E%3C/svg%3E");
}
[data-bi-icon="server"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2'/%3E%3Cpath d='M7 7h.01M7 17h.01M11 7h7M11 17h7'/%3E%3C/svg%3E");
}
[data-bi-icon="mail-key"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7M3 7l9 6 9-6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='m18.5 15.5 3-3M20 14l1.5 1.5'/%3E%3C/svg%3E");
}
[data-bi-icon="mail-pen"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 7l9 6 9-6M16 19l4.5-4.5a1.4 1.4 0 0 1 2 2L18 21l-3 .7Z'/%3E%3C/svg%3E");
}
[data-bi-icon="trash"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
}
[data-bi-icon="check-circle"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.7 2.7L16.5 9'/%3E%3C/svg%3E");
}
[data-bi-icon="x-circle"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
[data-bi-icon="pencil"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
}
[data-bi-icon="eye"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
[data-bi-icon="eye-off"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.1 10.1 0 0 1 12 20c-7 0-11-8-11-8a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A9.1 9.1 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19M1 1l22 22M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3C/svg%3E");
}
[data-bi-icon="lock"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
[data-bi-icon="unlock"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.5-2'/%3E%3C/svg%3E");
}
[data-bi-icon="images"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}
[data-bi-icon="warning"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
[data-bi-icon="plus"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
[data-bi-icon="search"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
}
[data-bi-icon="user-plus"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8' cy='7' r='4'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E");
}
[data-bi-icon="link"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1'/%3E%3C/svg%3E");
}
[data-bi-icon="globe"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
}
[data-bi-icon="chevron-left"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
[data-bi-icon="chevron-right"] {
  --bi-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

button[data-bi-icon]::before,
.bi-action-symbol[data-bi-icon] {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--bi-action-icon);
  mask-image: var(--bi-action-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.bi-action-symbol[data-bi-icon] {
  vertical-align: -0.2em;
  margin-right: 7px;
}

@media (max-width: 620px) {
  :where(
    .biwiz-actions,
    .sh-actions,
    .cM-actionbar,
    .eba-action-bar,
    .eba-filter-actions,
    dialog.cM-dlg .cM-dlg-f,
    dialog.eba-dialog .eba-dialog-foot
  ) > :where(button, .button-primary, .button-secondary, .bdg-btn) {
    width: 100%;
    justify-content: center;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.contributor-dashboard #leftLinkRail,
  body.contributor-dashboard .sh-topbar,
  body.contributor-dashboard .sh-drawer,
  dialog.cM-dlg,
  dialog.eba-dialog {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.contributor-dashboard #leftLinkRail,
  body.contributor-dashboard .sh-topbar,
  body.contributor-dashboard .sh-drawer {
    background: #f5f5f7 !important;
  }

  body.contributor-dashboard.dark #leftLinkRail,
  body.contributor-dashboard.dark .sh-topbar,
  body.contributor-dashboard.dark .sh-drawer,
  dialog.cM-dlg,
  dialog.eba-dialog {
    background: #1c1c1e !important;
  }
}

@media (forced-colors: active) {
  button[data-bi-icon]::before,
  .bi-action-symbol[data-bi-icon] {
    background-color: CanvasText;
  }
}

/*
 * Settings embedded layout v1 — approved 2026-08-02.
 * Presentation-only adaptation of the approved Apple theme study. The existing
 * Settings topbar, section ids, data-sec routes, Beta/Demo state, and live
 * builders remain the source of truth. Typography continues to inherit the
 * approved system/SF Pro stack above.
 */
body.contributor-dashboard .sh-settings-embedded {
  display: grid;
  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--fg);
  background: #ffffff !important;
}

body.contributor-dashboard.dark .sh-settings-embedded {
  background: #1c1c1e !important;
}

body.contributor-dashboard .sh-settings-embedded > .sh-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.contributor-dashboard .sh-settings-embedded > .sh-backdrop {
  display: none !important;
}

body.contributor-dashboard .sh-settings-embedded > .sh-drawer {
  position: relative !important;
  inset: auto !important;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
  width: auto !important;
  min-width: 0;
  height: auto;
  min-height: 100%;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
  color: var(--fg);
  background: #f2f2f7 !important;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark .sh-settings-embedded > .sh-drawer {
  background: #2c2c2e !important;
}

body.contributor-dashboard .sh-settings-embedded > .sh-drawer > header,
body.contributor-dashboard .sh-settings-embedded > .sh-drawer > .sh-foot {
  display: none !important;
}

body.contributor-dashboard .sh-settings-embedded > .sh-drawer .sh-navlist {
  min-height: 0;
  padding: 20px 10px 24px;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body.contributor-dashboard .sh-settings-embedded .sh-navgroup {
  padding: 16px 10px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

body.contributor-dashboard .sh-settings-embedded .sh-navgroup:first-child {
  padding-top: 0;
}

body.contributor-dashboard .sh-settings-embedded .sh-navgroup--additional {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

body.contributor-dashboard .sh-settings-embedded .sh-navlink {
  width: 100%;
  min-height: 44px;
  margin: 1px 0;
  padding: 9px 10px;
  gap: 8px;
  color: var(--muted);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard .sh-settings-embedded .sh-navlink > svg {
  display: none;
}

body.contributor-dashboard .sh-settings-embedded .sh-navlink:hover {
  color: var(--fg);
  background: rgba(60, 60, 67, 0.065) !important;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-navlink:hover {
  background: rgba(255, 255, 255, 0.065) !important;
}

body.contributor-dashboard .sh-settings-embedded .sh-navlink[aria-current="true"],
body.contributor-dashboard .sh-settings-embedded:has(.sh-body > .sh-section[data-sec="home"].on)
  .sh-navlink[data-sec="endpoints"] {
  color: var(--bi-apple-link-light);
  background: rgba(0, 122, 255, 0.1) !important;
  box-shadow: none !important;
  font-weight: 600;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-navlink[aria-current="true"],
body.contributor-dashboard.dark .sh-settings-embedded:has(.sh-body > .sh-section[data-sec="home"].on)
  .sh-navlink[data-sec="endpoints"] {
  color: var(--bi-apple-link-dark);
  background: rgba(10, 132, 255, 0.1) !important;
}

body.contributor-dashboard .sh-settings-embedded .sh-nav-badge {
  min-height: 22px;
  margin-left: auto;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-apple-link-light);
  background: rgba(0, 122, 255, 0.07);
  border: 1px solid rgba(0, 122, 255, 0.55);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-nav-badge {
  color: var(--bi-apple-link-dark);
  background: rgba(10, 132, 255, 0.08);
  border-color: rgba(10, 132, 255, 0.62);
}

body.contributor-dashboard .sh-settings-embedded > .sh-body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  /* Horizontal padding matches .sh-topbar's flat 20px so the section heading,
     body copy and cell edges land on the same vertical line as the topbar
     hamburger. Vertical rhythm and the responsive clamp are unchanged. */
  padding: clamp(24px, 3vw, 38px) 20px;
  color: var(--fg);
  background: #ffffff;
}

body.contributor-dashboard.dark .sh-settings-embedded > .sh-body {
  background: #1c1c1e;
}

body.contributor-dashboard .sh-settings-embedded.settings-nav-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

body.contributor-dashboard .sh-settings-embedded.settings-nav-collapsed > .sh-drawer {
  display: none !important;
}

body.contributor-dashboard .sh-settings-embedded.settings-nav-collapsed > .sh-body {
  grid-column: 1;
}

/* The approved header control remains a hamburger even while the in-flow
   sidebar is visible; only its expanded accessibility state changes. */
body.contributor-dashboard .sh-settings-embedded .sh-burger[aria-expanded="true"] span:nth-child(1),
body.contributor-dashboard .sh-settings-embedded .sh-burger[aria-expanded="true"] span:nth-child(3) {
  transform: none;
}

body.contributor-dashboard .sh-settings-embedded .sh-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 1;
}

body.contributor-dashboard .sh-settings-embedded .settings-overview-heading {
  margin-bottom: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

body.contributor-dashboard .sh-settings-embedded .settings-overview-heading .sh-sec-head {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

body.contributor-dashboard .sh-settings-embedded .settings-overview-heading .sh-sec-sub {
  max-width: 720px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

body.contributor-dashboard .sh-settings-embedded .settings-system-status {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

body.contributor-dashboard .sh-settings-embedded .settings-system-status i {
  width: 9px;
  height: 9px;
  display: block;
  background: #30d158;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.13);
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] > .set-grp {
  margin: 0;
}

body.contributor-dashboard .sh-settings-embedded .sh-body > .sh-section[data-sec="home"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"]
  > .set-grp + .set-grp {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"]
  > .set-grp[aria-labelledby="set-grp-workspace"] {
  display: none;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"]
  > .set-grp[aria-labelledby="set-grp-distribution"] .set-grid > li:first-child,
body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"]
  > .set-grp[aria-labelledby="set-grp-control"] .set-grid > li:nth-child(n + 4) {
  display: none;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-grp-head {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card {
  min-height: 190px;
  padding: 16px !important;
  gap: 5px;
  justify-content: flex-start;
  color: var(--fg);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-section[data-sec="home"] .set-card {
  background: #242426;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card:hover {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--bi-apple-blue) 45%, var(--border));
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-section[data-sec="home"] .set-card:hover {
  background: #242426;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-ic {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  color: var(--bi-apple-link-light);
  background: rgba(0, 122, 255, 0.08);
  border-radius: 10px;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-section[data-sec="home"] .set-card-ic {
  color: var(--bi-apple-link-dark);
  background: rgba(10, 132, 255, 0.08);
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-ic svg {
  width: 20px;
  height: 20px;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-label {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-desc {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: initial;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-count {
  padding-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-link {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bi-apple-link-light);
  font-size: 13px;
  font-weight: 650;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-section[data-sec="home"] .set-card-link {
  color: var(--bi-apple-link-dark);
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-link b {
  font-size: 18px;
  font-weight: 400;
  line-height: 0.75;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card-status {
  top: 14px;
  right: 14px;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"]
  .set-card-status--beta {
  color: var(--bi-apple-link-light) !important;
  background: rgba(0, 122, 255, 0.07);
  border-color: rgba(0, 122, 255, 0.55) !important;
}

body.contributor-dashboard.dark .sh-settings-embedded .sh-section[data-sec="home"]
  .set-card-status--beta {
  color: var(--bi-apple-link-dark) !important;
  background: rgba(10, 132, 255, 0.08);
  border-color: rgba(10, 132, 255, 0.62) !important;
}

body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"]
  .set-card-status--demo {
  color: var(--muted) !important;
  background: rgba(127, 127, 127, 0.08);
  border-color: color-mix(in srgb, var(--muted) 40%, transparent) !important;
}

@media (max-width: 1120px) {
  body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.contributor-dashboard .sh-settings-embedded {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  body.contributor-dashboard .sh-settings-embedded > .sh-drawer {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    max-height: min(46vh, 420px);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  body.contributor-dashboard .sh-settings-embedded > .sh-body {
    grid-column: 1;
    grid-row: 3;
  }

  body.contributor-dashboard .sh-settings-embedded.settings-nav-collapsed > .sh-body {
    grid-row: 2;
  }
}

@media (max-width: 680px) {
  body.contributor-dashboard .sh-settings-embedded > .sh-body {
    /* 20px horizontal keeps the hamburger-line alignment below 680px too. */
    padding: 22px 20px 26px;
  }

  body.contributor-dashboard .sh-settings-embedded .settings-overview-heading {
    margin-bottom: 22px;
    display: grid;
    gap: 12px;
  }

  body.contributor-dashboard .sh-settings-embedded .settings-system-status {
    justify-self: start;
  }

  body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  body.contributor-dashboard .sh-settings-embedded > .sh-drawer,
  body.contributor-dashboard .sh-settings-embedded > .sh-body,
  body.contributor-dashboard .sh-settings-embedded .sh-section[data-sec="home"] .set-card {
    background: Canvas !important;
    border-color: CanvasText !important;
  }

  body.contributor-dashboard .sh-settings-embedded .sh-navlink[aria-current="true"],
  body.contributor-dashboard .sh-settings-embedded:has(.sh-body > .sh-section[data-sec="home"].on)
    .sh-navlink[data-sec="endpoints"] {
    color: HighlightText;
    background: Highlight;
  }
}

/* Keep the new persistent rail on the exact approved Settings sidebar material.
   This final override intentionally follows the legacy liquid-rail rules above. */
@media (min-width: 901px) {
  body.contributor-dashboard #leftLinkRail {
    background: #f2f2f7 !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.contributor-dashboard.dark #leftLinkRail {
    background: #2c2c2e !important;
  }
}

/*
 * Dashboard tab parity v1 — approved 2026-08-02.
 *
 * Settings is the visual reference for Upload, Feed, Sales, Events, and
 * Social. This layer changes presentation only: the original tab panels,
 * routes, controls, status labels, media geometry, and event wiring remain
 * untouched. Opaque content surfaces mirror Settings; blue remains limited
 * to actions, links, active state, progress, and focus.
 */
body.contributor-dashboard {
  --bi-dashboard-canvas-light: #f2f2f7;
  --bi-dashboard-canvas-dark: #000000;
  --bi-dashboard-surface-light: #ffffff;
  --bi-dashboard-surface-dark: #171719;
  --bi-dashboard-nested-light: #f2f2f7;
  --bi-dashboard-nested-dark: #08090c;
  --bi-dashboard-field-light: #ffffff;
  --bi-dashboard-field-dark: #111214;
  --bi-dashboard-border-light: rgba(60, 60, 67, 0.2);
  --bi-dashboard-border-dark: #26272a;
  --bi-dashboard-content-light: var(--bi-dashboard-surface-light);
  --bi-dashboard-content-dark: var(--bi-dashboard-surface-dark);
  --bi-dashboard-card-light: var(--bi-dashboard-surface-light);
  --bi-dashboard-card-dark: var(--bi-dashboard-surface-dark);
  --bi-dashboard-sidebar-light: #f2f2f7;
  --bi-dashboard-sidebar-dark: #2c2c2e;
  --bi-dashboard-canvas: var(--bi-dashboard-canvas-light);
  --bi-dashboard-surface: var(--bi-dashboard-surface-light);
  --bi-dashboard-nested: var(--bi-dashboard-nested-light);
  --bi-dashboard-field: var(--bi-dashboard-field-light);
  --bi-dashboard-content-border: var(--bi-dashboard-border-light);
}

body.contributor-dashboard.dark {
  --bi-dashboard-canvas: var(--bi-dashboard-canvas-dark);
  --bi-dashboard-surface: var(--bi-dashboard-surface-dark);
  --bi-dashboard-nested: var(--bi-dashboard-nested-dark);
  --bi-dashboard-field: var(--bi-dashboard-field-dark);
  --bi-dashboard-content-border: var(--bi-dashboard-border-dark);
}

/* Sales, Events, and Social use the same outer content material as Settings. */
body.contributor-dashboard :is(#sales, #profile, #social) > .sh-wrap {
  color: var(--fg);
  background: var(--bi-dashboard-content-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark :is(#sales, #profile, #social) > .sh-wrap {
  background: var(--bi-dashboard-content-dark) !important;
}

body.contributor-dashboard :is(#sales, #profile, #social) .sh-wrap > .sh-body {
  min-width: 0;
  /* Same hamburger-line alignment as the Settings panel above. */
  padding: clamp(24px, 3vw, 38px) 20px;
  color: var(--fg);
  background: var(--bi-dashboard-content-light);
}

body.contributor-dashboard.dark :is(#sales, #profile, #social) .sh-wrap > .sh-body {
  background: var(--bi-dashboard-content-dark);
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-body > .sh-section[data-sec="home"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] > .sh-sec-head {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] > .sh-sec-sub {
  max-width: 760px;
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.55;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] > .set-grp {
  margin: 0;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] > .set-grp + .set-grp {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-grp-head {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card {
  min-height: 190px;
  padding: 16px !important;
  gap: 5px;
  justify-content: flex-start;
  color: var(--fg) !important;
  background: var(--bi-dashboard-card-light) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card {
  background: var(--bi-dashboard-card-dark) !important;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card:hover {
  background: var(--bi-dashboard-card-light) !important;
  border-color: color-mix(in srgb, var(--bi-apple-blue) 45%, var(--border)) !important;
}

body.contributor-dashboard.dark :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card:hover {
  background: var(--bi-dashboard-card-dark) !important;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-ic {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  color: var(--bi-apple-link-light);
  background: rgba(0, 122, 255, 0.08);
  background-image: none;
  border-radius: 10px;
}

body.contributor-dashboard.dark :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-ic {
  color: var(--bi-apple-link-dark);
  background: rgba(10, 132, 255, 0.08);
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-ic svg {
  width: 20px;
  height: 20px;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-label {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-desc {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: initial;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-count {
  padding-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section[data-sec="home"] .set-card-status {
  top: 14px;
  right: 14px;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
}

/* Non-home views keep their original content, but use the Settings hierarchy. */
body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section:not([data-sec="home"]) > .sh-sec-head {
  margin: 0 0 6px;
  font-size: clamp(23px, 2.2vw, 28px);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section:not([data-sec="home"]) > .sh-sec-sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-section:not([data-sec="home"]) :where(.card, .dz-stat, .sh-dest) {
  background: var(--bi-dashboard-card-light) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.contributor-dashboard.dark :is(#sales, #profile, #social)
  .sh-section:not([data-sec="home"]) :where(.card, .dz-stat, .sh-dest) {
  background: var(--bi-dashboard-card-dark) !important;
}

/* Each panel drawer keeps its routes and icons, with the Settings sidebar material. */
body.contributor-dashboard :is(#sales, #profile, #social) .sh-drawer {
  color: var(--fg);
  background: var(--bi-dashboard-sidebar-light) !important;
  background-image: none !important;
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 34px rgba(31, 40, 52, 0.16) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark :is(#sales, #profile, #social) .sh-drawer {
  background: var(--bi-dashboard-sidebar-dark) !important;
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.38) !important;
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-drawer :where(header, .sh-foot) {
  border-color: var(--border);
}

body.contributor-dashboard :is(#sales, #profile, #social)
  .sh-drawer :where(header b, .sh-close, .sh-navgroup) {
  color: var(--muted);
}

/* Upload: Settings surfaces and form cells, with protected workflow geometry. */
body.contributor-dashboard #create > .card,
body.contributor-dashboard #create #countsCard {
  color: var(--fg);
  background: var(--bi-dashboard-content-light) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark #create > .card,
body.contributor-dashboard.dark #create #countsCard {
  background: var(--bi-dashboard-content-dark) !important;
}

body.contributor-dashboard #metaForm :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: var(--bi-apple-control-height) !important;
  padding: 10px 12px !important;
  color: var(--fg) !important;
  background-color: var(--bi-apple-field-light) !important;
  border: 1px solid var(--bi-apple-line-light) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-size: 16px !important;
}

body.contributor-dashboard.dark #metaForm :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  background-color: var(--bi-apple-field-dark) !important;
  border-color: var(--bi-apple-line-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.contributor-dashboard #metaForm label {
  font-size: 14px;
  font-weight: 600;
}

body.contributor-dashboard #metaForm :where(input, select, textarea):focus-visible {
  border-color: var(--border) !important;
  outline: 3px solid var(--bi-apple-blue) !important;
  outline-offset: 2px !important;
}

body.contributor-dashboard #create .sticky-controls,
body.contributor-dashboard #create #dropzone,
body.contributor-dashboard #create #clonedControls {
  color: var(--fg);
  background-color: var(--bi-dashboard-content-light) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.contributor-dashboard.dark #create .sticky-controls,
body.contributor-dashboard.dark #create #dropzone,
body.contributor-dashboard.dark #create #clonedControls {
  background-color: var(--bi-dashboard-content-dark) !important;
}

body.contributor-dashboard #create #dropzone {
  border: 2px dashed var(--border) !important;
  border-radius: 14px !important;
}

body.contributor-dashboard #create #dropzone.dragover {
  background-color: rgba(0, 122, 255, 0.06) !important;
  border-color: var(--bi-apple-blue) !important;
}

body.contributor-dashboard.dark #create #dropzone.dragover {
  background-color: rgba(10, 132, 255, 0.08) !important;
}

body.contributor-dashboard #create .progressbar,
body.contributor-dashboard #create .loadingGlass {
  color: var(--fg);
  background: var(--bi-apple-field-light) !important;
  background-image: none !important;
  border-color: var(--bi-apple-line-light) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark #create .progressbar,
body.contributor-dashboard.dark #create .loadingGlass {
  background: var(--bi-apple-field-dark) !important;
  border-color: var(--bi-apple-line-dark) !important;
}

body.contributor-dashboard #create .progressbar .progress-text {
  color: var(--fg);
  background: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
}

/* Remove the legacy metallic fill while retaining the native custom chevron. */
body.contributor-dashboard:not(.dark) #create #clonedControls select {
  color: var(--bi-apple-ink-light) !important;
  font-size: 16px !important;
  background-color: var(--bi-apple-field-light) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  border-color: var(--bi-apple-line-light) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}

body.contributor-dashboard.dark #create #clonedControls select {
  color: var(--bi-apple-ink-dark) !important;
  font-size: 16px !important;
  background-color: var(--bi-apple-field-dark) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  border-color: var(--bi-apple-line-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  text-shadow: none !important;
}

@media (min-width: 901px) {
  body.contributor-dashboard #create .sticky-controls,
  body.contributor-dashboard #create #clonedControls {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
  }

  body.contributor-dashboard #create .sticky-controls {
    margin-bottom: 14px;
  }

  body.contributor-dashboard #create #clonedControls {
    margin-top: 12px;
  }
}

@media (max-width: 900px) {
  body.contributor-dashboard #create .sticky-controls {
    margin-bottom: 14px;
  }
}

/* Feed: preserve image layouts while matching Settings cards and fields. */
body.contributor-dashboard #archiveCard {
  color: var(--fg);
  background: var(--bi-dashboard-content-light) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard.dark #archiveCard {
  background: var(--bi-dashboard-content-dark) !important;
}

body.contributor-dashboard #archiveSearchInput,
body.contributor-dashboard #archive .facet-search {
  min-height: var(--bi-apple-control-height);
  color: var(--fg) !important;
  background-color: var(--bi-apple-field-light) !important;
  border-color: var(--bi-apple-line-light) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.contributor-dashboard #archiveSearchInput {
  font-size: 16px;
}

body.contributor-dashboard.dark #archiveSearchInput,
body.contributor-dashboard.dark #archive .facet-search {
  background-color: var(--bi-apple-field-dark) !important;
  border-color: var(--bi-apple-line-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.contributor-dashboard #archive :where(
  .archive-search-mode-menu,
  .archive-layout-head,
  .archive-facet-sidebar
) {
  color: var(--fg);
  background: var(--bi-dashboard-card-light) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.contributor-dashboard.dark #archive :where(
  .archive-search-mode-menu,
  .archive-layout-head,
  .archive-facet-sidebar
) {
  background: var(--bi-dashboard-card-dark) !important;
}

body.contributor-dashboard #archive :where(
  .facet-section,
  .archive-mobile-primary-controls,
  .archive-mobile-facet-jumps
) {
  border-color: var(--border);
}

body.contributor-dashboard #archive .archive-category-tabs .archive-cat-tab.active {
  color: #fff !important;
  background: var(--bi-apple-blue) !important;
  background-image: none !important;
  border-color: #459cf0 !important;
}

body.contributor-dashboard #archive .ai-fashion-item {
  background: var(--bi-apple-field-light);
  border-color: var(--bi-apple-line-light);
  border-radius: 9px;
}

body.contributor-dashboard.dark #archive .ai-fashion-item {
  background: var(--bi-apple-field-dark);
  border-color: var(--bi-apple-line-dark);
}

@media (min-width: 901px) {
  body.contributor-dashboard #archiveCard {
    padding: clamp(24px, 3vw, 38px);
  }
}

/* Feed desktop web app: align search and both image-grid states with the
   Feed header's outer edges without changing grid or image behavior. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  body.contributor-dashboard #archiveCard {
    --bi-feed-desktop-outer-inset: calc(clamp(24px, 3vw, 38px) + 1px);
  }

  body.contributor-dashboard #archive :is(
    .archive-search-row,
    #leadTilesGrid,
    #archiveGridWrap
  ) {
    width: calc(
      100% + var(--bi-feed-desktop-outer-inset) + var(--bi-feed-desktop-outer-inset)
    );
    max-width: none;
    margin-inline: calc(0px - var(--bi-feed-desktop-outer-inset));
  }
}

@media (forced-colors: active) and (min-width: 901px) and (hover: hover) and (pointer: fine) {
  body.contributor-dashboard #archiveCard {
    --bi-feed-desktop-outer-inset: clamp(24px, 3vw, 38px);
  }
}

@media (min-width: 601px) {
  body.contributor-dashboard #archive .archive-grid :where(.cell, .thumb) {
    background: var(--bi-dashboard-card-light);
    border-color: var(--border);
    border-radius: 14px;
    box-shadow: none;
  }

  body.contributor-dashboard.dark #archive .archive-grid :where(.cell, .thumb) {
    background: var(--bi-dashboard-card-dark);
  }
}

@media (max-width: 1120px) {
  body.contributor-dashboard :is(#sales, #profile, #social)
    .sh-section[data-sec="home"] .set-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.contributor-dashboard :is(#sales, #profile, #social) .sh-wrap > .sh-body {
    /* 20px horizontal keeps the hamburger-line alignment below 680px too. */
    padding: 22px 20px 26px;
  }

  body.contributor-dashboard :is(#sales, #profile, #social)
    .sh-section[data-sec="home"] .set-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  body.contributor-dashboard :is(
    #create > .card,
    #create .sticky-controls,
    #create #dropzone,
    #create #clonedControls,
    #create #countsCard,
    #archiveCard,
    #sales > .sh-wrap,
    #profile > .sh-wrap,
    #social > .sh-wrap
  ) {
    color: CanvasText !important;
    background: Canvas !important;
    border-color: CanvasText !important;
  }
}

/*
 * Dashboard Native/Broadimage canvas hybrid v1 — approved 2026-08-03.
 *
 * Users & Roles is the material reference. Structural routing wrappers stay
 * in the DOM, but no longer render as oversized cards. Content cards, forms,
 * records, and fields own their material independently. Header, persistent
 * rail, drawers, topbars, dialogs, media geometry, and JS wiring are outside
 * this layer.
 */
html body.contributor-dashboard {
  background-color: var(--bi-dashboard-canvas) !important;
  background-image: none !important;
}

body.contributor-dashboard:not(.dark) {
  background-color: var(--bi-dashboard-canvas-light) !important;
}

body.contributor-dashboard.dark {
  background-color: var(--bi-dashboard-canvas-dark) !important;
}

/* The six main panel envelopes remain structural and keep their existing box
   footprint, padding, grid, routing, and focus behavior. */
body.contributor-dashboard :is(
  #create > .card,
  #archiveCard,
  #sales > .sh-wrap,
  #profile > .sh-wrap,
  #social > .sh-wrap,
  #dashboard > .sh-wrap
) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Match the extra theme-class specificity used by legacy dark rules. */
body.contributor-dashboard.dark :is(
  #create > .card,
  #archiveCard,
  #sales > .sh-wrap,
  #profile > .sh-wrap,
  #social > .sh-wrap,
  #dashboard > .sh-wrap
) {
  background: transparent !important;
  background-image: none !important;
}

/* Drawer panels and Settings share the same grouped canvas. Navigation and
   topbar children retain their existing Liquid Glass / sidebar materials. */
body.contributor-dashboard :is(#sales, #profile, #social, #dashboard)
  > .sh-wrap > .sh-body {
  color: var(--fg);
  background: var(--bi-dashboard-canvas) !important;
  background-image: none !important;
}

/* Every routed section is a focus/routing wrapper, not a content card. */
body.contributor-dashboard :is(#sales, #profile, #social, #dashboard)
  .sh-body > .sh-section {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Standard content material. These are the independent cards that remain
   visible after their enclosing structural shells become transparent. */
body.contributor-dashboard :is(
  #create #metaForm,
  #create .sticky-controls,
  #create #dropzone,
  #create #clonedControls,
  #create #countsCard,
  #archive .archive-search-row,
  #archive .archive-layout-head,
  #archive .archive-facet-sidebar,
  #sales .sh-section :where(.set-card, .card, .dz-stat, .sh-dest),
  #profile .sh-section :where(.set-card, .card, .dz-stat, .sh-dest),
  #social .sh-section :where(.set-card, .card, .dz-stat, .sh-dest),
  #dashboard .sh-section[data-sec="home"] .set-card,
  #dashboard .sh-section:not(.users-roles-section) :where(.card, .dz-stat, .sh-dest, .cMS-glass),
  #dashboard .sh-section:not(.users-roles-section) > .sh-form,
  #dashboard .sh-section[data-sec="queues"] > div:has(> .sh-table)
) {
  color: var(--fg) !important;
  background: var(--bi-dashboard-surface) !important;
  background-image: none !important;
  border: 1px solid var(--bi-dashboard-content-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.contributor-dashboard #dashboard
  .sh-section:not(.users-roles-section) > .sh-form {
  padding: 16px;
}

/* A form or record living inside a primary card is the darker grouped layer,
   matching the approved Users & Roles search and record hierarchy. */
body.contributor-dashboard :is(
  #dashboard .sh-section:not(.users-roles-section) .card > .sh-form,
  #dashboard .sh-section[data-sec="livefeed"] .cMS-glass .cM-card,
  #archive .archive-grid-set-summary
) {
  background: var(--bi-dashboard-nested) !important;
  background-image: none !important;
  border: 1px solid var(--bi-dashboard-content-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.contributor-dashboard #dashboard
  .sh-section:not(.users-roles-section) .card > .sh-form {
  padding: 14px;
}

/* The standalone Queues table owns the material through its scroll container;
   live tables inside existing cards retain their established geometry. */
body.contributor-dashboard #dashboard
  .sh-section[data-sec="queues"] > div:has(> .sh-table) {
  overflow: hidden auto;
}

body.contributor-dashboard #dashboard
  .sh-section[data-sec="queues"] > div > .sh-table {
  margin: 0;
  background: transparent !important;
  border: 0 !important;
}

/* Neutral field cells use the shared exact light/dark material without
   replacing custom select arrows or altering control dimensions. */
body.contributor-dashboard :is(
  #metaForm,
  #clonedControls,
  #archive,
  #dashboard .sh-section:not(.users-roles-section)
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea
) {
  color: var(--fg) !important;
  background-color: var(--bi-dashboard-field) !important;
  border-color: var(--bi-dashboard-content-border) !important;
  box-shadow: none !important;
}

body.contributor-dashboard #create :where(.progressbar, .loadingGlass) {
  color: var(--fg);
  background: var(--bi-dashboard-field) !important;
  background-image: none !important;
  border-color: var(--bi-dashboard-content-border) !important;
}

body.contributor-dashboard #create #dropzone {
  border: 2px dashed var(--bi-dashboard-content-border) !important;
}

/* Feed tiles retain the existing mobile full-bleed exception. */
@media (min-width: 601px) {
  body.contributor-dashboard #archive .archive-grid :where(.cell, .thumb) {
    background: var(--bi-dashboard-surface) !important;
    border-color: var(--bi-dashboard-content-border) !important;
  }
}

/* Form-only Settings routes become independent cards after their route shell
   is removed; small screens keep the existing responsive stacking. */
@media (max-width: 680px) {
  body.contributor-dashboard #dashboard
    .sh-section:not(.users-roles-section) > .sh-form {
    padding: 14px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.contributor-dashboard :is(
    .sh-topbar,
    .sh-burger,
    #create #clonedControls,
    #archive .archive-search-mode-menu,
    #archive .archive-mobile-quickbar,
    dialog
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  html body.contributor-dashboard,
  body.contributor-dashboard :is(#sales, #profile, #social, #dashboard)
    > .sh-wrap > .sh-body {
    color: CanvasText !important;
    background: Canvas !important;
  }

  body.contributor-dashboard :is(
    #create > .card,
    #archiveCard,
    #sales > .sh-wrap,
    #profile > .sh-wrap,
    #social > .sh-wrap,
    #dashboard > .sh-wrap,
    #sales .sh-body > .sh-section,
    #profile .sh-body > .sh-section,
    #social .sh-body > .sh-section,
    #dashboard .sh-body > .sh-section
  ) {
    background: Canvas !important;
    border: 0 !important;
  }

  body.contributor-dashboard :is(
    #create #metaForm,
    #create .sticky-controls,
    #create #dropzone,
    #create #clonedControls,
    #create #countsCard,
    #archive .archive-search-row,
    #archive .archive-layout-head,
    #archive .archive-facet-sidebar,
    #sales .sh-section :where(.set-card, .card, .dz-stat, .sh-dest),
    #profile .sh-section :where(.set-card, .card, .dz-stat, .sh-dest),
    #social .sh-section :where(.set-card, .card, .dz-stat, .sh-dest),
    #dashboard .sh-section:not(.users-roles-section) :where(.set-card, .card, .dz-stat, .sh-dest, .sh-form, .cMS-glass),
    #dashboard .sh-section[data-sec="queues"] > div:has(> .sh-table)
  ) {
    color: CanvasText !important;
    background: Canvas !important;
    border-color: CanvasText !important;
  }

  /* This block intentionally follows the shared dark .sh-topbar rule so the
     new Upload/Feed headers resolve to the operating-system Canvas instead of
     retaining their translucent material when forced colors are active. */
  body.contributor-dashboard :is(#create, #archive) > .dashboard-tab-topbar {
    color: CanvasText !important;
    background: Canvas !important;
    border-bottom-color: CanvasText !important;
  }

  body.contributor-dashboard
    :is(#create, #archive) > .dashboard-tab-topbar
    .dashboard-nav-trigger {
    color: ButtonText !important;
    background: ButtonFace !important;
    border-color: ButtonText !important;
  }

  body.contributor-dashboard
    :is(#create, #archive) > .dashboard-tab-topbar
    .dashboard-nav-trigger span {
    background: ButtonText !important;
  }
}

/*
 * Apple navigation disclosure v1 — 2026-08-04.
 * Scope is limited to the collapsed dashboard hamburger, its canonical
 * navigation drawer, and the shared Additional Settings disclosure. Existing
 * route buttons, forwarding handlers, sidebar placement, and drawer mechanics
 * remain authoritative.
 */
body.contributor-dashboard #dashHamBtn {
  width: 44px;
  height: 44px;
  border-radius: 11px !important;
  gap: 4px;
}

body.contributor-dashboard #dashHamBtn span {
  width: 20px;
}

body.contributor-dashboard:not(.dark) #dashHamBtn:focus-visible {
  outline: 3px solid var(--bi-apple-blue) !important;
  outline-offset: 2px;
}

body.contributor-dashboard.dark #dashHamBtn:focus-visible {
  outline: 3px solid var(--bi-apple-link-dark) !important;
  outline-offset: 2px;
}

body.contributor-dashboard #dashNavDrawer {
  color: var(--bi-apple-ink-light);
  font-family: var(--bi-apple-system-font) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 52%, rgba(174, 174, 178, 0.12)),
    var(--bi-apple-liquid-strong-light) !important;
  border-right: 1px solid var(--bi-apple-separator-light);
  box-shadow: 12px 0 42px rgba(31, 31, 36, 0.2);
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
}

body.contributor-dashboard.dark #dashNavDrawer {
  color: var(--bi-apple-ink-dark);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 52%, rgba(0, 0, 0, 0.18)),
    var(--bi-apple-liquid-strong-dark) !important;
  border-right-color: var(--bi-apple-separator-dark);
  box-shadow: 12px 0 42px rgba(0, 0, 0, 0.52);
}

body.contributor-dashboard #dashNavDrawer .dashnav-head {
  min-height: 68px;
  padding: 12px 14px 12px 20px;
  border-bottom-color: var(--bi-apple-separator-light);
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-head {
  border-bottom-color: var(--bi-apple-separator-dark);
}

body.contributor-dashboard #dashNavDrawer .dashnav-logo {
  height: 24px;
  width: auto;
}

body.contributor-dashboard #dashNavDrawer .dashnav-logo--light {
  display: block;
}

body.contributor-dashboard #dashNavDrawer .dashnav-logo--dark,
body.contributor-dashboard.dark #dashNavDrawer .dashnav-logo--light {
  display: none;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-logo--dark {
  display: block;
}

body.contributor-dashboard #dashNavDrawer .dashnav-close {
  width: 44px;
  height: 44px;
  color: var(--bi-apple-ink-light);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--bi-apple-separator-light);
  border-radius: 9px !important;
  font-family: var(--bi-apple-system-font) !important;
  font-size: 24px !important;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-close {
  color: var(--bi-apple-ink-dark);
  background: rgba(44, 44, 46, 0.62);
  border-color: var(--bi-apple-separator-dark);
}

body.contributor-dashboard #dashNavDrawer .dashnav-close:hover,
body.contributor-dashboard #dashNavDrawer .dashnav-item:hover {
  background: rgba(60, 60, 67, 0.08) !important;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-close:hover,
body.contributor-dashboard.dark #dashNavDrawer .dashnav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.contributor-dashboard #dashNavDrawer :is(.dashnav-close, .dashnav-item):focus-visible,
body.contributor-dashboard #settingsAdditionalToggle:focus-visible {
  outline: 3px solid var(--bi-apple-blue) !important;
  outline-offset: 1px;
}

body.contributor-dashboard.dark #dashNavDrawer :is(.dashnav-close, .dashnav-item):focus-visible,
body.contributor-dashboard.dark #settingsAdditionalToggle:focus-visible {
  outline-color: var(--bi-apple-link-dark) !important;
}

body.contributor-dashboard #dashNavDrawer .dashnav-list {
  padding: 8px 0;
  gap: 0;
}

body.contributor-dashboard #dashNavDrawer .dashnav-group {
  padding: 14px 20px 6px;
  color: var(--bi-apple-quiet-light);
  font-family: var(--bi-apple-system-font) !important;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-group {
  color: var(--bi-apple-quiet-dark);
}

body.contributor-dashboard #dashNavDrawer .dashnav-item {
  box-sizing: border-box;
  width: calc(100% - 16px);
  min-height: 44px;
  margin: 1px 8px;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bi-apple-ink-light);
  background: transparent !important;
  border-radius: 9px !important;
  font-family: var(--bi-apple-system-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-item {
  color: var(--bi-apple-ink-dark);
}

body.contributor-dashboard #dashNavDrawer .dashnav-setting {
  justify-content: space-between;
}

body.contributor-dashboard #dashNavDrawer .dashnav-util {
  color: var(--bi-apple-ink-light);
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-util {
  color: var(--bi-apple-ink-dark);
}

body.contributor-dashboard #dashNavDrawer .dashnav-divider {
  background: var(--bi-apple-separator-light);
  margin: 8px 20px;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-divider {
  background: var(--bi-apple-separator-dark);
}

body.contributor-dashboard #dashNavDrawer .dashnav-foot {
  color: var(--bi-apple-quiet-light);
  border-top-color: var(--bi-apple-separator-light);
  font-family: var(--bi-apple-system-font) !important;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-foot {
  color: var(--bi-apple-quiet-dark);
  border-top-color: var(--bi-apple-separator-dark);
}

body.contributor-dashboard #settingsAdditionalToggle {
  all: unset;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 8px 0 1px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-family: var(--bi-apple-system-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  cursor: pointer;
}

body.contributor-dashboard #settingsAdditionalToggle:hover {
  color: var(--fg);
  background: rgba(60, 60, 67, 0.065) !important;
}

body.contributor-dashboard.dark #settingsAdditionalToggle:hover {
  background: rgba(255, 255, 255, 0.065) !important;
}

body.contributor-dashboard .nav-disclosure-chevron {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-left: auto;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

body.contributor-dashboard .nav-disclosure-toggle[aria-expanded="true"]
  .nav-disclosure-chevron {
  transform: rotate(90deg);
}

body.contributor-dashboard #settingsAdditionalPanel,
body.contributor-dashboard #dashAdditionalPanel {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.contributor-dashboard :is(#settingsAdditionalPanel, #dashAdditionalPanel)[hidden] {
  display: none !important;
}

body.contributor-dashboard #dashNavDrawer .dashnav-disclosure-toggle {
  justify-content: space-between;
  color: var(--bi-apple-quiet-light);
  border-top: 1px solid var(--bi-apple-separator-light) !important;
}

body.contributor-dashboard.dark #dashNavDrawer .dashnav-disclosure-toggle {
  color: var(--bi-apple-quiet-dark);
  border-top-color: var(--bi-apple-separator-dark) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.contributor-dashboard .nav-disclosure-chevron {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.contributor-dashboard #dashNavDrawer {
    background: #f2f2f7 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.contributor-dashboard.dark #dashNavDrawer {
    background: #1c1c1e !important;
  }
}

@media (forced-colors: active) {
  body.contributor-dashboard #dashHamBtn,
  body.contributor-dashboard #dashNavDrawer,
  body.contributor-dashboard #dashNavDrawer :is(.dashnav-close, .dashnav-item),
  body.contributor-dashboard #settingsAdditionalToggle {
    color: CanvasText !important;
    background: Canvas !important;
    background-image: none !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.contributor-dashboard #dashHamBtn span {
    background: CanvasText !important;
  }

  body.contributor-dashboard #dashNavDrawer :is(.dashnav-divider, .dashnav-head, .dashnav-foot) {
    border-color: CanvasText !important;
  }
}

/* ========================================================================== */
/* Profile + nested Settings hierarchy — Phase 1 (2026-08-04)                */
/* Scope: authenticated dashboard Profile/Settings only. Header untouched.   */
/* ========================================================================== */

body.contributor-dashboard :is(#unifiedSettingsNavSlot, #dashSettingsPanel)[hidden] {
  display: none !important;
}

body.contributor-dashboard #railSettingsToggle {
  min-height: 44px;
}

body.contributor-dashboard #railSettingsToggle .nav-disclosure-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

body.contributor-dashboard #railSettingsToggle[aria-current="page"] {
  color: var(--bi-apple-link-light) !important;
  background: rgba(0, 122, 255, 0.1) !important;
}

body.contributor-dashboard.dark #railSettingsToggle[aria-current="page"] {
  color: var(--bi-apple-link-dark) !important;
  background: rgba(10, 132, 255, 0.1) !important;
}

body.contributor-dashboard #dashSettingsPanel {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.contributor-dashboard #dashSettingsPanel > .dashnav-divider:first-child {
  margin-top: 5px;
}

body.contributor-dashboard .profile-home-section {
  width: 100%;
  min-width: 0;
}

body.contributor-dashboard .profile-page-heading {
  margin: 0 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body.contributor-dashboard .profile-page-heading .sh-sec-head,
body.contributor-dashboard .profile-page-heading .sh-sec-sub {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.contributor-dashboard .profile-reload {
  min-width: 92px;
  min-height: 44px;
  flex: 0 0 auto;
}

body.contributor-dashboard .profile-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.contributor-dashboard .profile-material {
  min-width: 0;
  padding: 20px;
  color: var(--fg);
  background: var(--bi-dashboard-surface) !important;
  border: 1px solid var(--bi-dashboard-content-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.contributor-dashboard .profile-material--wide {
  grid-column: 1 / -1;
}

body.contributor-dashboard .profile-material > header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body.contributor-dashboard .profile-material > header > div:not(.profile-feed-total) {
  min-width: 0;
}

body.contributor-dashboard .profile-material h3,
body.contributor-dashboard .profile-material h4,
body.contributor-dashboard .profile-material p {
  margin: 0;
}

body.contributor-dashboard .profile-material h3 {
  font-size: 19px;
  line-height: 1.25;
}

body.contributor-dashboard .profile-material h4 {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.3;
}

body.contributor-dashboard .profile-material header p,
body.contributor-dashboard .profile-section-state,
body.contributor-dashboard .profile-boundary-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

body.contributor-dashboard .profile-material-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-apple-link-light);
  background: color-mix(in srgb, var(--bi-apple-blue) 10%, var(--bi-dashboard-nested));
  border: 1px solid color-mix(in srgb, var(--bi-apple-blue) 28%, var(--bi-dashboard-content-border));
  border-radius: 12px;
}

body.contributor-dashboard.dark .profile-material-icon {
  color: var(--bi-apple-link-dark);
}

body.contributor-dashboard .profile-material-icon svg {
  width: 22px;
  height: 22px;
}

body.contributor-dashboard .profile-data-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--bi-dashboard-content-border);
  border: 1px solid var(--bi-dashboard-content-border);
  border-radius: 13px;
}

body.contributor-dashboard .profile-data-list--single {
  grid-template-columns: minmax(0, 1fr);
}

body.contributor-dashboard .profile-data-list > div {
  min-width: 0;
  padding: 12px 13px;
  background: var(--bi-dashboard-nested);
}

body.contributor-dashboard .profile-data-list dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

body.contributor-dashboard .profile-data-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

body.contributor-dashboard .profile-identifier {
  color: var(--bi-apple-link-light) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

body.contributor-dashboard.dark .profile-identifier {
  color: var(--bi-apple-link-dark) !important;
}

body.contributor-dashboard .profile-boundary-note {
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--bi-dashboard-nested);
  border: 1px solid var(--bi-dashboard-content-border);
  border-radius: 11px;
}

body.contributor-dashboard .profile-access-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.2fr);
  gap: 16px;
}

body.contributor-dashboard .profile-access-layout > div {
  min-width: 0;
  padding: 16px;
  background: var(--bi-dashboard-nested);
  border: 1px solid var(--bi-dashboard-content-border);
  border-radius: 14px;
}

body.contributor-dashboard .profile-route-list,
body.contributor-dashboard .profile-feed-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

body.contributor-dashboard .profile-route-list li,
body.contributor-dashboard .profile-feed-list li {
  min-height: 48px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--bi-dashboard-content-border);
}

body.contributor-dashboard .profile-route-list li:last-child,
body.contributor-dashboard .profile-feed-list li:last-child {
  border-bottom: 0;
}

body.contributor-dashboard .profile-route-list li span,
body.contributor-dashboard .profile-feed-list small {
  color: var(--muted);
  font-size: 12px;
}

body.contributor-dashboard .profile-feed-list li > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.contributor-dashboard .profile-feed-list strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

body.contributor-dashboard .profile-ftp-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.contributor-dashboard .profile-ftp-heading button,
body.contributor-dashboard .profile-action-row button {
  min-height: 44px;
}

body.contributor-dashboard .profile-ftp-region {
  margin-top: 14px;
}

body.contributor-dashboard .profile-action-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.contributor-dashboard .profile-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: 0.03em;
}

body.contributor-dashboard .profile-feed-total {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

body.contributor-dashboard .profile-feed-total strong {
  font-size: 28px;
  line-height: 1;
}

body.contributor-dashboard .profile-feed-total span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

/* The four live Beta consoles retain their existing DOM, handlers and APIs. */
body.contributor-dashboard .settings-beta-console {
  min-width: 0;
  padding: 18px !important;
  background: var(--bi-dashboard-surface) !important;
  border: 1px solid var(--bi-dashboard-content-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.contributor-dashboard .phase1-console-metrics {
  margin: 14px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.contributor-dashboard .phase1-console-metric {
  min-width: 0;
  min-height: 92px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  background: var(--bi-dashboard-nested);
  border: 1px solid var(--bi-dashboard-content-border);
  border-radius: 14px;
}

body.contributor-dashboard .phase1-console-metric span {
  color: var(--muted);
  font-size: 12px;
}

body.contributor-dashboard .phase1-console-metric strong {
  color: var(--fg);
  font-size: 25px;
  line-height: 1;
}

body.contributor-dashboard .phase1-console-controls {
  margin: 14px 0 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto auto auto;
  align-items: end;
  gap: 8px;
  background: var(--bi-dashboard-nested);
  border: 1px solid var(--bi-dashboard-content-border);
  border-radius: 14px;
}

body.contributor-dashboard :is(.phase1-console-search, .phase1-console-filter) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

body.contributor-dashboard :is(.phase1-console-search, .phase1-console-filter) :is(input, select) {
  width: 100%;
  min-height: 44px;
  color: var(--fg) !important;
  background: var(--bi-dashboard-field) !important;
  border: 1px solid var(--bi-dashboard-content-border) !important;
  border-radius: 11px !important;
}

body.contributor-dashboard .phase1-console-controls button,
body.contributor-dashboard .phase1-console-retry {
  min-height: 44px;
  border-radius: 11px !important;
}

body.contributor-dashboard .settings-beta-console :is(.sh-form, form.row, .sh-table, .cM-card) {
  border-color: var(--bi-dashboard-content-border) !important;
}

body.contributor-dashboard .settings-beta-console .sh-table {
  overflow: hidden;
  background: var(--bi-dashboard-nested) !important;
  border: 1px solid var(--bi-dashboard-content-border) !important;
  border-radius: 13px;
}

body.contributor-dashboard .settings-beta-console .sh-table :is(th, td) {
  border-color: var(--bi-dashboard-content-border) !important;
}

body.contributor-dashboard .settings-beta-console--livefeed .phase1-console-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
}

body.contributor-dashboard .settings-beta-console--livefeed .phase1-console-retry {
  align-self: center;
  min-width: 84px;
}

@media (max-width: 1100px) {
  body.contributor-dashboard .profile-material-grid,
  body.contributor-dashboard .profile-access-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.contributor-dashboard .profile-material--wide {
    grid-column: auto;
  }

  body.contributor-dashboard .phase1-console-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* Preserve the existing six-item mobile/tablet dock exactly. */
  body.contributor-dashboard #railSettingsToggle,
  body.contributor-dashboard #unifiedSettingsNavSlot {
    display: none !important;
  }

  body.contributor-dashboard .profile-material-grid,
  body.contributor-dashboard .phase1-console-metrics,
  body.contributor-dashboard .settings-beta-console--livefeed .phase1-console-metrics,
  body.contributor-dashboard .phase1-console-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  body.contributor-dashboard .profile-page-heading,
  body.contributor-dashboard .profile-ftp-heading {
    align-items: stretch;
    flex-direction: column;
  }

  body.contributor-dashboard .profile-page-heading button,
  body.contributor-dashboard .profile-ftp-heading button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  body.contributor-dashboard .profile-material,
  body.contributor-dashboard .settings-beta-console {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  body.contributor-dashboard .profile-data-list {
    grid-template-columns: minmax(0, 1fr);
  }

  body.contributor-dashboard .profile-material > header {
    flex-wrap: wrap;
  }

  body.contributor-dashboard .profile-feed-total {
    width: 100%;
    margin: 2px 0 0 54px;
    align-items: flex-start;
  }

  body.contributor-dashboard .profile-action-row button {
    width: 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.contributor-dashboard :is(#railSettingsToggle, #dashSettingsToggle) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  body.contributor-dashboard :is(#railSettingsToggle, #dashSettingsToggle, .profile-material, .profile-data-list > div, .profile-access-layout > div, .settings-beta-console, .phase1-console-metric, .phase1-console-controls) {
    color: CanvasText !important;
    background: Canvas !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
  }

  body.contributor-dashboard :is(.profile-identifier, .profile-material-icon) {
    color: LinkText !important;
  }
}

/* ===== Account chip + sign out — specificity note =====
   apple-material.css:`body.contributor-dashboard main.wrap button` (0,2,3) carries
   `border-radius: var(--bi-apple-button-radius) !important`, and this file loads AFTER
   dashboard.css, so rules declared there at (0,1,0) cannot win no matter the source order.
   These selectors are (0,3,1) — class count decides before element count — so they beat it
   on merit rather than by stacking another !important war. */
body.contributor-dashboard .bdg-account-anchor .bdg-account-chip,
body.contributor-dashboard .bdg-account-anchor .bdg-account-signout {
  border-radius: 11px !important;
  display: flex !important;
  align-items: center;
  width: 100%;
  text-align: left;
}
body.contributor-dashboard .bdg-account-anchor .bdg-account-chip { padding: 8px 10px !important; min-height: 56px; }
body.contributor-dashboard .bdg-account-anchor .bdg-account-signout { padding: 8px 10px !important; min-height: 44px; }

/* ===== Mobile dock (<=900px) — Fernando 2026-08-04 =====
   The dock is #leftLinkRail repositioned as a fixed bottom icon grid, and
   .sidebar-sample-stack is its grid container. The account chip landed there when it
   was placed in the stack for desktop, rendering as a 155x121 block inside a 44px icon
   grid and overlapping the form. On mobile: drop Social and Support, hide the avatar
   chip entirely, and keep ONLY the sign-out as a normal dock cell. Desktop is untouched. */
@media (max-width: 900px) {
  body.contributor-dashboard #leftLinkRail .tab[data-tab="social"],
  body.contributor-dashboard #leftLinkRail #railHelpBtn {
    display: none !important;
  }
  /* the avatar chip is desktop-only — he asked for the sign out here, not the profile */
  body.contributor-dashboard #leftLinkRail .bdg-account-chip {
    display: none !important;
  }
  /* the anchor stops being a bordered footer block and becomes a plain dock cell */
  body.contributor-dashboard #leftLinkRail .bdg-account-anchor {
    margin-top: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    display: contents;
  }
  /* sign out matches the other dock cells: 44px square, icon over label */
  body.contributor-dashboard #leftLinkRail .bdg-account-anchor .bdg-account-signout {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 44px !important;
    min-width: 44px;
    /* match the real dock cells exactly: 44x44, no chrome. Measured against
       .tab[data-tab="create"] and #railShareBtn, both 44x44 with transparent
       background and border. The label is nowrap at 9px so "Sign out" stays on
       one line — at 12.5px it wrapped and pushed the cell to 62px, overflowing
       the dock and the viewport. */
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    opacity: 1;
  }
  body.contributor-dashboard #leftLinkRail .bdg-account-anchor .bdg-account-signout svg {
    width: 20px !important; height: 20px !important; flex: 0 0 auto;
  }
  body.contributor-dashboard #leftLinkRail .bdg-account-anchor .bdg-account-signout:hover {
    background: rgba(211, 47, 47, 0.14) !important; color: #ff8a80;
  }
}

/* ===== Mobile dock — unify every cell on the sign-out treatment (Fernando 2026-08-04) =====
   The shipped dock cells are flex-ROW with the label absolutely positioned BELOW the 44px
   box (dashboard.css:3831 `top: calc(100% + 4px)`), which is why they sat lower than the
   sign-out cell. Fernando picked the sign-out styling, so every cell becomes the same
   in-flow flex COLUMN: 20px icon, 2px gap, 9px nowrap label inside the box.

   Two constraints respected:
   - dashboard.css carries a BINDING note that the label display:none/display:block pair is
     decided by SOURCE ORDER on the coarse path. This block is appended to a later-loading
     file and reorders nothing; `display:block` is restated so labels cannot go dark.
   - The dock height is JS-measured into --mobile-rail-h (ResizeObserver on #leftLinkRail),
     so the tighter cells are re-measured automatically rather than hard-coded here. */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  body.contributor-dashboard #leftLinkRail .sidebar-sample-square {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 2px 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  body.contributor-dashboard #leftLinkRail .sidebar-sample-square .sidebar-sample-label {
    display: block !important;      /* restated — never let the labels go dark */
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  body.contributor-dashboard #leftLinkRail .sidebar-sample-square .sb-ico {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
  }
}

/* ============================================================================
   iOS GROUPED MOBILE NAVIGATION — STEP 1: THE SHAPE
   Added 2026-08-04. Approved by Fernando.

   SCOPE: mobile only (<=900px) AND body.contributor-dashboard. Desktop and tablet
   above 900px keep the shipped 280px Liquid Glass drawer byte-for-byte — every
   rule below is inside the media query, none of them leak upward.

   WHY THIS FILE, AND WHY THE END OF IT: the drawer's current look is owned by
   `body.contributor-dashboard #dashNavDrawer` at apple-material.css:3732, which
   carries `!important` on `background`. That is (0,2,1) — identical specificity to
   the selectors below. Source order is therefore the ONLY thing that decides the
   winner, and these rules must stay AFTER line 3732. Do not hoist this block, and
   do not move it into dashboard.css: that file loads BEFORE this one (dashboard.html
   line 17 vs 24) and would lose every one of these ties.
   ============================================================================ */
@media (max-width: 900px){

  /* ---- the screen ------------------------------------------------------- */
  /* Full-bleed. 100dvh not 100vh: on iOS Safari, 100vh is the LARGE viewport and
     stays tall while the URL bar is showing, so the last rows sit below the fold
     with no way to scroll to them. dvh tracks the bar collapsing. */
  body.contributor-dashboard #dashNavDrawer{
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: var(--bi-apple-grouped-bg-light) !important;
    background-image: none !important;
    color: var(--bi-apple-ink-light);
    border-right: 0 !important;
    box-shadow: none !important;
    /* The blur is deliberately dropped here. An opaque ground is what makes the row
       text auditable at all — a translucent card over a blurred page makes contrast a
       distribution rather than a number, and no audit can clear it. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer{
    background: var(--bi-apple-grouped-bg-dark) !important;
    background-image: none !important;
    color: var(--bi-apple-ink-dark);
  }

  /* ---- scroll container ------------------------------------------------- */
  /* MEASURED 2026-08-04: .dashnav-list computes flex-grow:0 / min-height:auto and
     works today only because a scroll container's automatic minimum size resolves
     to 0. That accident breaks the moment a fourth flex sibling (the search field)
     joins the column. Declared explicitly, not defensively. */
  body.contributor-dashboard #dashNavDrawer .dashnav-list{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 18px 0 24px !important;
    background: transparent !important;
    overscroll-behavior: contain;
  }

  /* ---- section headings ------------------------------------------------- */
  body.contributor-dashboard #dashNavDrawer .dashnav-group{
    padding: 22px 32px 7px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    color: var(--bi-apple-grouped-label2-light) !important;
    background: transparent !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-group{
    color: var(--bi-apple-grouped-label2-dark) !important;
  }

  /* ---- rows ------------------------------------------------------------- */
  /* Edge-to-edge opaque band. Step 2 wraps each run in .dashnav-card to round the
     ends; until then the band itself carries the iOS reading.
     min-height NOT height: at 200% text zoom "Additional Settings" wraps, and a
     fixed height would clip it outright (WCAG 1.4.12). Labels wrap, never truncate —
     the moment a label is cut, tile colour becomes the only differentiator and the
     "tiles are decorative" contrast exemption collapses. */
  body.contributor-dashboard #dashNavDrawer .dashnav-item,
  body.contributor-dashboard #dashNavDrawer .dashnav-util,
  body.contributor-dashboard #dashNavDrawer .dashnav-disclosure-toggle{
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    background: var(--bi-apple-grouped-card-light) !important;
    color: var(--bi-apple-ink-light) !important;
    font-size: 17px !important;
    letter-spacing: -0.014em !important;
    border-bottom: 0.5px solid var(--bi-apple-grouped-sep-light) !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-item,
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-util,
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-disclosure-toggle{
    background: var(--bi-apple-grouped-card-dark) !important;
    color: var(--bi-apple-ink-dark) !important;
    border-bottom-color: var(--bi-apple-grouped-sep-dark) !important;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-item:active,
  body.contributor-dashboard #dashNavDrawer .dashnav-util:active{
    background: rgba(120,120,128,0.16) !important;
  }

  /* ---- top bar ---------------------------------------------------------- */
  body.contributor-dashboard #dashNavDrawer .dashnav-head{
    background: transparent !important;
    border-bottom: 0.5px solid var(--bi-apple-grouped-sep-light) !important;
    padding: 10px 12px 10px 20px !important;
    flex: 0 0 auto !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-head{
    border-bottom-color: var(--bi-apple-grouped-sep-dark) !important;
  }

  /* ---- footer + account anchor ------------------------------------------ */
  body.contributor-dashboard #dashNavDrawer .dashnav-foot{
    background: transparent !important;
    border-top: 0.5px solid var(--bi-apple-grouped-sep-light) !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-foot{
    border-top-color: var(--bi-apple-grouped-sep-dark) !important;
  }

  /* ---- very short viewports --------------------------------------------- */
  /* At 400px tall (400% zoom territory) the fixed chrome leaves almost no list.
     The footer is the decorative string "© 2026 Broadimage" — dropping it is zero
     content loss and buys back 46 measured px. */
  @media (max-height: 400px){
    body.contributor-dashboard #dashNavDrawer .dashnav-foot{ display: none !important; }
  }
}

/* ---- Windows High Contrast ---------------------------------------------- */
/* Every background above flattens to Canvas here, so the opaque row band and the
   grouped ground become the same colour and the list loses all structure. Borders
   survive forced-colors; backgrounds do not. Re-draw the separations as borders. */
@media (max-width: 900px) and (forced-colors: active){
  body.contributor-dashboard #dashNavDrawer .dashnav-item,
  body.contributor-dashboard #dashNavDrawer .dashnav-util,
  body.contributor-dashboard #dashNavDrawer .dashnav-disclosure-toggle{
    border-bottom: 1px solid CanvasText !important;
    background: Canvas !important;
    forced-color-adjust: none;
  }
  body.contributor-dashboard #dashNavDrawer{ background: Canvas !important; }
  body.contributor-dashboard #dashNavDrawer .dashnav-group{ color: CanvasText !important; }
}

/* ============================================================================
   STEP 2 — GROUPED CARDS. Added 2026-08-04.

   PART A is UNSCOPED BY WIDTH and that is deliberate. Step 2 introduced <ul>/<li>
   into a drawer that previously held bare <button>s, and those elements exist at
   EVERY width. Without these three rules the desktop drawer — which this project is
   under standing instruction not to regress — would render bullet markers and the
   UA's 40px list indent. Do not move Part A inside the media query.
   ============================================================================ */
body.contributor-dashboard #dashNavDrawer .dashnav-card{
  list-style: none;
  margin: 0;
  padding: 0;
}
body.contributor-dashboard #dashNavDrawer .dashnav-card > li{
  margin: 0;
  padding: 0;
  list-style: none;
}
body.contributor-dashboard #dashNavDrawer .dashnav-card > li > .dashnav-item{
  width: 100%;
}

/* ---- PART B: the iOS card look, mobile only ---- */
@media (max-width: 900px){
  body.contributor-dashboard #dashNavDrawer .dashnav-section{
    margin: 0 0 10px !important;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-card{
    margin: 0 16px !important;
    border-radius: 10px !important;
    background: var(--bi-apple-grouped-card-light) !important;
    /* overflow:hidden is what rounds the first and last row's corners. It also clips
       an OUTSET focus ring on exactly those two rows, so the ring below is inset. */
    overflow: hidden !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-card{
    background: var(--bi-apple-grouped-card-dark) !important;
  }
  /* The separator belongs BETWEEN rows, never under the last one — a hairline sitting
     on the card's rounded bottom edge is the classic tell of a faked iOS list. */
  body.contributor-dashboard #dashNavDrawer .dashnav-card > li:last-child > .dashnav-item{
    border-bottom: 0 !important;
  }
  /* WCAG 2.4.13: an outset ring would be clipped by the overflow above on the first and
     last row of every card. Inset rings consume area rather than adding it, so the spec
     asks for more of them — 3px, not 2px. */
  body.contributor-dashboard #dashNavDrawer .dashnav-item:focus-visible,
  body.contributor-dashboard #dashNavDrawer .dashnav-util:focus-visible{
    outline: 3px solid var(--bi-apple-sys-blue-light) !important;
    outline-offset: -3px !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-item:focus-visible,
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-util:focus-visible{
    outline-color: var(--bi-apple-sys-blue-dark) !important;
  }
}

@media (max-width: 900px) and (forced-colors: active){
  /* The card background flattens to Canvas, so the rounded card silhouette disappears
     entirely and the rows become one undifferentiated block. Borders survive. */
  body.contributor-dashboard #dashNavDrawer .dashnav-card{
    border: 1px solid CanvasText !important;
    background: Canvas !important;
  }
}

/* ============================================================================
   STEP 3 — COLOURED ICON TILES + CHEVRONS. Added 2026-08-04.

   PART A is the desktop guarantee: tiles and chevrons are display:none at EVERY
   width by default, and switched on only inside the mobile block below. The 280px
   desktop drawer is under standing instruction not to regress, and it was never
   designed to carry a 29px tile per row. Default-off is the only version of this
   that cannot leak.
   ============================================================================ */
body.contributor-dashboard #dashNavDrawer .dashnav-ic,
body.contributor-dashboard #dashNavDrawer .dashnav-chev{ display: none; }

@media (max-width: 900px){
  body.contributor-dashboard #dashNavDrawer .dashnav-item{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* ---- the tile ---- */
  body.contributor-dashboard #dashNavDrawer .dashnav-ic{
    display: grid !important;
    place-items: center;
    flex: 0 0 29px;
    width: 29px; height: 29px;
    border-radius: 7px;
    /* The glyph inherits this via fill="currentColor". Tokenised from day one so a
       per-tile polarity flip is a value edit, not a refactor — see the token's own
       note at the top of this file. */
    color: var(--bi-apple-grouped-glyph);
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic svg{
    width: 18px; height: 18px; display: block;
  }

  /* ---- the 13 Apple system hues ---- */
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--red{ background: var(--bi-apple-sys-red-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--orange{ background: var(--bi-apple-sys-orange-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--yellow{ background: var(--bi-apple-sys-yellow-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--green{ background: var(--bi-apple-sys-green-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--mint{ background: var(--bi-apple-sys-mint-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--teal{ background: var(--bi-apple-sys-teal-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--cyan{ background: var(--bi-apple-sys-cyan-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--blue{ background: var(--bi-apple-sys-blue-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--indigo{ background: var(--bi-apple-sys-indigo-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--purple{ background: var(--bi-apple-sys-purple-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--pink{ background: var(--bi-apple-sys-pink-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--brown{ background: var(--bi-apple-sys-brown-light); }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic--gray{ background: var(--bi-apple-sys-gray-light); }

  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--red{ background: var(--bi-apple-sys-red-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--orange{ background: var(--bi-apple-sys-orange-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--yellow{ background: var(--bi-apple-sys-yellow-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--green{ background: var(--bi-apple-sys-green-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--mint{ background: var(--bi-apple-sys-mint-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--teal{ background: var(--bi-apple-sys-teal-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--cyan{ background: var(--bi-apple-sys-cyan-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--blue{ background: var(--bi-apple-sys-blue-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--indigo{ background: var(--bi-apple-sys-indigo-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--purple{ background: var(--bi-apple-sys-purple-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--pink{ background: var(--bi-apple-sys-pink-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--brown{ background: var(--bi-apple-sys-brown-dark); }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-ic--gray{ background: var(--bi-apple-sys-gray-dark); }

  /* ---- label + badge ---- */
  body.contributor-dashboard #dashNavDrawer .dashnav-item > span:not(.dashnav-ic):not(.dashnav-badge){
    flex: 1 1 auto;
    min-width: 0;
    /* Labels WRAP, never truncate. A clipped label loses content outright (1.4.4), and
       it would also collapse the reason the tiles are contrast-exempt: the exemption
       rests on every row carrying its full visible text. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-badge{ flex: 0 0 auto; margin-left: 0 !important; }

  /* ---- the chevron ----
     Unlike the tile, this is NOT decorative. WCAG's own worked example for 1.4.11 is a
     label beside a disclosure arrow, and it rules the arrow IN scope at 3:1 because it
     conveys "this navigates" — information the text label does not carry. #8A8A8E
     measures 3.44:1 on the white card. Do not lighten it. */
  body.contributor-dashboard #dashNavDrawer .dashnav-chev{
    display: block !important;
    flex: 0 0 auto;
    width: 8px; height: 13px;
    color: #8A8A8E;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-chev{ color: #7C7C80; }

  /* ---- separator inset ----
     iOS starts the hairline at the label, not the card edge: 16 padding + 29 tile +
     12 gap = 57px. Drawn as a gradient because border-bottom cannot be inset. */
  body.contributor-dashboard #dashNavDrawer .dashnav-card > li:not(:last-child) > .dashnav-item{
    border-bottom: 0 !important;
    background-image: linear-gradient(to right, transparent 0 57px, var(--bi-apple-grouped-sep-light) 57px 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.5px;
    background-position: 0 100%;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-card > li:not(:last-child) > .dashnav-item{
    background-image: linear-gradient(to right, transparent 0 57px, var(--bi-apple-grouped-sep-dark) 57px 100%);
  }
}

@media (max-width: 900px) and (forced-colors: active){
  /* Tile fills flatten to Canvas, so a white-on-colour glyph becomes Canvas-on-Canvas —
     invisible. A border restores the tile silhouette and currentColor restores the glyph.
     The gradient separator is also dropped in forced-colors, so the border returns. */
  body.contributor-dashboard #dashNavDrawer .dashnav-ic{
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-card > li:not(:last-child) > .dashnav-item{
    background-image: none !important;
    border-bottom: 1px solid CanvasText !important;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-chev{ color: CanvasText !important; }
}

/* ============================================================================
   STEP 4 — THE DOCK YIELDS WHILE THE MENU IS OPEN. Added 2026-08-04.

   `visibility: hidden` is REQUIRED here. Not display:none, not opacity:0.

   • display:none is forbidden. dashboard.js:~21290 measures rail.offsetHeight into
     --mobile-rail-h and re-measures on ANY size change via ResizeObserver. Thirteen
     CSS rules read that variable (dashboard.css:3611, 3619, 3636, 3650, 3762, 3825,
     3844, 4753, 4950, 4961, 4984, 5001 + the :root declarations). display:none makes
     offsetHeight 0, the variable collapses, and every one of those consumers reflows
     BEHIND the open menu — invisible while it happens, wrong when the menu closes.
     That is the 2026-07-17 covered-content failure reached by a different route.

   • opacity:0 and an offscreen transform are also wrong: both leave the ten dock
     buttons focusable and in the accessibility tree. A keyboard or screen-reader user
     would tab into controls that are not there.

   visibility:hidden is the only one that removes the dock from hit-testing AND from the
   accessibility tree while preserving the border-box height the measure depends on. It
   also does not fire the ResizeObserver, because the box does not change.
   ============================================================================ */
@media (max-width: 900px){
  body.contributor-dashboard.dashnav-open #leftLinkRail{
    visibility: hidden !important;
  }
}

/* ============================================================================
   STEP 5 — SEARCH. Added 2026-08-04. Mobile only; hidden entirely on desktop,
   where the 280px drawer has neither the room nor the row count to need it.
   ============================================================================ */
body.contributor-dashboard #dashNavDrawer .dashnav-search{ display: none; }

@media (max-width: 900px){
  body.contributor-dashboard #dashNavDrawer .dashnav-search{
    display: block;
    /* flex-shrink:0 is the whole pinning mechanism. The drawer is a fixed-height flex
       column, .dashnav-list takes the remaining space (flex:1 1 auto, min-height:0), so an
       unshrinkable sibling after it is pinned to the bottom by construction — no position,
       no z-index, and no containing-block hazard from the drawer's transform. */
    flex: 0 0 auto;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    border-top: 0.5px solid var(--bi-apple-grouped-sep-light);
    background: var(--bi-apple-grouped-bg-light);
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-search{
    border-top-color: var(--bi-apple-grouped-sep-dark);
    background: var(--bi-apple-grouped-bg-dark);
  }

  body.contributor-dashboard #dashNavDrawer .dashnav-search-input{
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 11px;
    padding: 0 14px;
    background: rgba(118,118,128,0.14);
    color: var(--bi-apple-ink-light);
    /* 16px is a HARD FLOOR, not a style preference. iOS Safari zooms the page whenever a
       focused input computes below 16px. The drawer's own scale is 14.5px, so inheriting it
       would magnify the viewport under a fixed-height flex column the moment the field takes
       focus — which re-creates, by a different route, exactly the occlusion this layout was
       restructured to remove. Never lower this. */
    font-size: 16px;
    font-family: var(--bi-apple-system-font);
    letter-spacing: -0.014em;
    -webkit-appearance: none;
    appearance: none;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-search-input{
    background: rgba(118,118,128,0.28);
    color: var(--bi-apple-ink-dark);
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-search-input::placeholder{
    color: var(--bi-apple-grouped-label2-light);
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-search-input::placeholder{
    color: var(--bi-apple-grouped-label2-dark);
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-search-input:focus-visible{
    outline: 3px solid var(--bi-apple-sys-blue-light);
    outline-offset: 2px;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-search-input:focus-visible{
    outline-color: var(--bi-apple-sys-blue-dark);
  }

  /* Under ~400px tall the fixed chrome leaves almost no list. The footer is the decorative
     string "© 2026 Broadimage" — dropping it is zero content loss and buys back 46 measured
     px, which is more than a whole row. */
  @media (max-height: 400px){
    body.contributor-dashboard #dashNavDrawer .dashnav-foot{ display: none !important; }
  }
}

@media (max-width: 900px) and (forced-colors: active){
  body.contributor-dashboard #dashNavDrawer .dashnav-search-input{
    border: 1px solid CanvasText;
    background: Field;
    color: FieldText;
  }
}

/* ============================================================================
   TWEAK 1 — iOS DYNAMIC TYPE. Added 2026-08-04. Approved by Fernando.

   WHY: our sizes already matched Apple's DEFAULT scale exactly (Body 17pt, Footnote
   13pt, 44pt targets — measured at 440×956, iPhone 16 Pro Max). But iOS apps track the
   user's Settings → Display & Brightness → Text Size slider, and fixed-px CSS does not.
   With the slider below default, Apple's Settings shrinks and our menu did not. That is
   the whole of the reported difference.

   HOW: `font: -apple-system-body` is WebKit's documented hook into Dynamic Type, from the
   same 2015 work that gave us -apple-system. Non-WebKit engines cannot parse it, so the
   declaration is dropped by ordinary CSS error handling and the px declaration ABOVE it
   stands. VERIFIED in Chrome: computed font-size stayed 17px (FALLBACK_SURVIVES true).
   No @supports is needed, and none is used — @supports would be the fragile version here,
   because it would have to guess at how each engine reports the keyword.

   NON-REGRESSIVE BY CONSTRUCTION: if the keyword resolves, the menu tracks the user's
   slider. If it does not, every element renders at the px fallback — byte-identical to
   the previous build. There is no third outcome.

   MEASURED across Apple's full published Dynamic Type table (xSmall 14pt → AX5 53pt),
   12 of 12 sizes: rows never drop below 44pt, nothing clips, nothing scrolls sideways.
   ============================================================================ */
@media (max-width: 900px){

  /* ---- row label: Body ---- */
  body.contributor-dashboard #dashNavDrawer .dashnav-item{
    font-family: var(--bi-apple-system-font) !important;
    font-size: 17px !important;                  /* fallback — non-WebKit */
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-item{
    font: -apple-system-body !important;         /* WebKit — tracks the Text Size slider */
    /* The `font` shorthand resets weight and line-height to initial. Re-declared AFTER it
       or the rows silently lose their type treatment on exactly the engines where the
       keyword works — a regression that would be invisible in Chrome. */
    font-weight: 400 !important;
    letter-spacing: -0.014em !important;
  }

  /* ---- section heading: Footnote ---- */
  body.contributor-dashboard #dashNavDrawer .dashnav-group{
    font-size: 13px !important;                  /* fallback */
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-group{
    font: -apple-system-footnote !important;
    font-weight: 400 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
  }

  /* ---- Beta badge: Caption 2 ----
     Raised from 9px. Apple's smallest published Dynamic Type step is Caption2 at 11pt;
     9px sat below the entire scale and had no basis in the design system. */
  body.contributor-dashboard #dashNavDrawer .dashnav-badge{
    font-size: 11px !important;                  /* fallback */
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-badge{
    font: -apple-system-caption2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  /* ---- icons scale WITH the text ----
     em, not px, so the tile tracks whatever size the row label resolves to — which is what
     iOS does when SF Symbols scale with Dynamic Type. The ratios are the shipped values
     divided by 17pt, so at the default setting these compute to exactly 29px and 18px and
     nothing moves. flex-basis must be converted too, or the tile keeps its old 29px track
     width while the box around it grows. */
  body.contributor-dashboard #dashNavDrawer .dashnav-ic{
    flex: 0 0 1.706em;                            /* 29 / 17 */
    width: 1.706em;
    height: 1.706em;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-ic svg{
    width: 1.06em;                                /* 18 / 17 */
    height: 1.06em;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-chev{
    width: 0.47em;                                /* 8 / 17 */
    height: 0.765em;                              /* 13 / 17 */
  }

  /* ---- search input: DELIBERATELY EXCLUDED from Dynamic Type ----
     Not an oversight. iOS Safari zooms the page whenever a focused input computes below
     16px, and at a small Text Size setting -apple-system-body resolves under 16px. The
     field would zoom the viewport on focus and re-create, by a new route, the exact
     occlusion this whole layout was restructured to eliminate. It stays at a fixed 16px.
     The rule below exists to make that intent explicit and to stop a future edit from
     "consistently" converting it along with everything else. */
  body.contributor-dashboard #dashNavDrawer .dashnav-search-input{
    font-size: 16px !important;
  }
}

/* ============================================================================
   TWEAK 2 — NAV HIERARCHY + MENU HEADER + CELL SPACING. 2026-08-05.

   ONE RULE: `≡` is the only way into the menu and sits in exactly one place on every
   tab; `←` is the only way out. Both never move.
   ============================================================================ */

/* ---- 1. Hamburger: always present, at every width, rail expanded or collapsed ----
   Was gated `body.rail-collapsed #dashHamBtn{display:flex}` (dashboard.css:4848) against a
   `display:none` default (:4785). Both are plain (0,1,0)/(0,2,0) with no !important, so this
   later-loading file wins on source order alone.

   CENTRING BY PERCENTAGE, NOT PIXELS. The header is 99.3px on mobile and 116.9px on desktop,
   so any fixed `top` is wrong on one of them — the shipped 24px was off-centre by −3.7px and
   −12.4px respectively. It would also drift again the moment Dynamic Type changes the
   header's content height. 50% + translateY(-50%) is correct at every height, forever.
   The button's own span children carry the ≡→✕ transforms; this transform is on the button,
   so the two never collide. */
body.contributor-dashboard #dashHamBtn{
  display: flex !important;
  top: 50% !important;
  transform: translateY(-50%);
}

/* ---- 2. Topbar hamburgers: hidden, title only ----
   HIDDEN, NOT DELETED. syncTriggerState() still writes aria-expanded to these on every open
   and close; removing them from the DOM would either need a JS change or leave that loop
   writing to nothing. Hiding keeps the wiring honest and the trigger-count assertion intact.

   SCOPED TO .dashboard-nav-trigger ONLY. #shSalesBurger / #shEventsBurger / #shSocialBurger
   share the .sh-burger class but open their own PANEL section drawer — a different surface.
   Hiding those would strand three tabs with no route to their own sections. */
body.contributor-dashboard .sh-topbar .sh-burger.dashboard-nav-trigger{
  display: none !important;
}

/* ---- 3. Menu header: back button left, logo centred at hero size ---- */
body.contributor-dashboard #dashNavDrawer .dashnav-head{
  position: relative;
  justify-content: flex-start !important;
}
body.contributor-dashboard #dashNavDrawer .dashnav-close{
  /* Circled liquid glass — the same navy .85 floor as #dashHamBtn, so the way out of the
     menu is visibly the same object as the way in. */
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid var(--glass-line, rgba(255,255,255,.14)) !important;
  background: rgba(17,25,40,.85) !important;
  color: #fff !important;
  font-size: 0 !important;              /* kills any leftover text node */
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
body.contributor-dashboard #dashNavDrawer .dashnav-close svg{
  width: 22px; height: 22px; display: block;
}
body.contributor-dashboard #dashNavDrawer .dashnav-logo{
  /* Centred on the SCREEN, not in the leftover flex space — otherwise the 44px button on the
     left would push the logo permanently off-centre by 22px. pointer-events:none so it can
     never swallow a tap aimed at the back button underneath its bounding box. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 31.4px !important;            /* hero logo, measured 164.5 × 31.4 */
  width: auto !important;
  pointer-events: none;
}

@media (max-width: 900px){
  /* ---- 4. Cell height ----
     CORRECTION, recorded because it is counter-intuitive: raising padding alone moves NOTHING.
     Content is 21.25px line-height + 16px padding = 37.25px, already below the 44px floor, so
     the floor is what sets the height. Even at 11px padding it is 43.25px — still below. The
     FLOOR itself has to rise. 52px is the standard iOS row height for a list with icons and
     leaves comfortable margin over the 44pt touch minimum.
     Fonts, tiles, chevrons and colours are deliberately untouched. */
  body.contributor-dashboard #dashNavDrawer .dashnav-item,
  body.contributor-dashboard #dashNavDrawer .dashnav-util{
    min-height: 52px !important;
    padding: 11px 16px !important;
  }
}

/* ============================================================================
   TWEAK 3 — NO BURGER IN ANY PANEL HEADER; DESTINATION ICON INSTEAD. 2026-08-05.
   ============================================================================ */

/* ---- 1. the four panel burgers ----
   HIDDEN, NEVER DELETED. initStreamHubPanels binds each panel's section drawer via
   wrap.querySelector('.sh-burger') — first-in-DOM. display:none leaves the element findable
   so the binding still resolves and no JS changes; removing it from the DOM would break the
   lookup outright. dashboard.html:679 also carries a BINDING note requiring #shSetBurger to
   stay first in its topbar — hiding honours that, deleting does not.
   Sections stay reachable: every one of these panels exposes the identical set as cards on
   its home screen (Sales 8/8, Events 5/5, Social 12/12, Settings 23/23), and .set-back
   returns from a section to the grid. */
body.contributor-dashboard #shSalesBurger,
body.contributor-dashboard #shEventsBurger,
body.contributor-dashboard #shSocialBurger,
body.contributor-dashboard #shSetBurger{
  display: none !important;
}

/* ---- 2. the header icon ----
   The hue classes (.dashnav-ic--*) are scoped to #dashNavDrawer, so they paint nothing out
   here. These rules re-declare the same 13 hues for the header context against the SAME
   tokens — so a header icon and its menu row can never drift apart. */
body.contributor-dashboard :is(.sh-topbar-ic, .sh-sec-ic){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 7px;
  vertical-align: middle;
  margin-right: 10px;
  color: var(--bi-apple-grouped-glyph);
}
body.contributor-dashboard :is(.sh-topbar-ic, .sh-sec-ic) svg{
  width: 18px; height: 18px; display: block;
}
/* The heading sits BESIDE the icon rather than under it. Scoped to the adjacency so the other
   28 .sh-sec-head elements in the document keep their block layout untouched. */
body.contributor-dashboard .sh-sec-ic + .sh-sec-head{
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--red{ background: var(--bi-apple-sys-red-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--orange{ background: var(--bi-apple-sys-orange-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--yellow{ background: var(--bi-apple-sys-yellow-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--green{ background: var(--bi-apple-sys-green-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--mint{ background: var(--bi-apple-sys-mint-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--teal{ background: var(--bi-apple-sys-teal-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--cyan{ background: var(--bi-apple-sys-cyan-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--blue{ background: var(--bi-apple-sys-blue-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--indigo{ background: var(--bi-apple-sys-indigo-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--purple{ background: var(--bi-apple-sys-purple-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--pink{ background: var(--bi-apple-sys-pink-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--brown{ background: var(--bi-apple-sys-brown-light); }
body.contributor-dashboard :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--gray{ background: var(--bi-apple-sys-gray-light); }

body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--red{ background: var(--bi-apple-sys-red-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--orange{ background: var(--bi-apple-sys-orange-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--yellow{ background: var(--bi-apple-sys-yellow-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--green{ background: var(--bi-apple-sys-green-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--mint{ background: var(--bi-apple-sys-mint-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--teal{ background: var(--bi-apple-sys-teal-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--cyan{ background: var(--bi-apple-sys-cyan-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--blue{ background: var(--bi-apple-sys-blue-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--indigo{ background: var(--bi-apple-sys-indigo-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--purple{ background: var(--bi-apple-sys-purple-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--pink{ background: var(--bi-apple-sys-pink-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--brown{ background: var(--bi-apple-sys-brown-dark); }
body.contributor-dashboard.dark :is(.sh-topbar-ic,.sh-sec-ic).dashnav-ic--gray{ background: var(--bi-apple-sys-gray-dark); }

@media (forced-colors: active){
  /* Tile fills flatten to Canvas, making a white glyph invisible. A border restores the
     silhouette and currentColor restores the glyph — same treatment as the menu tiles. */
  body.contributor-dashboard :is(.sh-topbar-ic, .sh-sec-ic){
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
}

/* ============================================================================
   TWEAK 4 — two corrections. 2026-08-05.
   ============================================================================ */

/* ---- FIX A: the last visible burger, on desktop ----
   Tweak 3's rule was `.sh-topbar .sh-burger.dashboard-nav-trigger` = (0,4,1) with
   !important, and it LOST. The documented override at ~:1466 re-shows this one button with
   TWO IDS — (2,3,0) — and !important. When one selector has more ids, !important on the
   other does not save it; specificity is compared first. This mirrors that selector and adds
   the class, giving (2,4,0), which beats (2,3,0) on the class count with the ids tied.
   Do not "simplify" this to #settingsDashboardMenuButton{display:none} — that is (1,0,0)
   and loses again. The chain is the point. */
body.contributor-dashboard #dashboard .sh-settings-embedded
  > .sh-topbar > #settingsDashboardMenuButton.dashboard-nav-trigger{
  display: none !important;
}

/* ---- FIX B: the settings nav was pushing every section 420px down on mobile ----
   MEASURED: #shSetDrawer is position:relative and ~420px tall in normal flow on mobile, so
   tapping Assignments / Curation / Distribution rendered the section correctly but at y=519,
   under a long list — elementFromPoint at the top of the content area returned .sh-navlink,
   not the section. With this rule the same tap lands the section at y=132.

   KEYED ON :not(.system-settings-nav), NOT ON THE MEDIA QUERY ALONE. syncUnifiedSettingsNav()
   (dashboard.js:21043) adds .system-settings-nav when it moves this nav into the rail for
   desktop and removes it when it moves the nav back into the panel for mobile. Matching on
   that class means the CSS and the JS can never disagree about which mode is active — if the
   JS decides a width is desktop, the nav stays visible whatever the media query thinks.

   ROUTING IS UNAFFECTED: forwardSetting() reaches these links with .click(), which fires on
   display:none elements — verified, `routedWhileHidden: true`, announcement unchanged.
   NOTHING BECOMES UNREACHABLE: all 23 destinations are in the full-page menu AND are cards on
   the Settings home grid, with .set-back returning from a section to the grid. */
@media (max-width: 900px){
  body.contributor-dashboard #shSetDrawer:not(.system-settings-nav){
    display: none !important;
  }
}

/* ============================================================================
   STEP 1 — THE RAIL HOSTS THE MENU'S OWN NAV. 2026-08-05.

   .dashnav-list--rail is added by syncGlobalNavHost() when the list is moved into
   #leftLinkRail on desktop, and removed when it goes back to the <dialog> on mobile.
   Styling keys on THAT CLASS, never on a bare width query — so the CSS and the JS can never
   disagree about which host the node is currently in.
   ============================================================================ */
@media (min-width: 901px){

  /* The six tab squares, the Settings disclosure and the old 23-link settings nav are all
     redundant now that the rail carries the full 29-destination map. HIDDEN, NOT REMOVED:
     forwardTab() clicks .tab[data-tab=…] and forwardSetting() clicks #shSetDrawer .sh-navlink,
     and .click() works on display:none elements. Delete them and every route breaks. */
  body.contributor-dashboard #leftLinkRail .sidebar-sample-stack > .sidebar-sample-square.tab,
  body.contributor-dashboard #leftLinkRail #railSettingsToggle,
  body.contributor-dashboard #leftLinkRail #unifiedSettingsNavSlot,
  body.contributor-dashboard #leftLinkRail .system-sidebar-group-label:not(.system-sidebar-utility){
    display: none !important;
  }

  body.contributor-dashboard .dashnav-list--rail{
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 10px;
    background: transparent;
  }
  body.contributor-dashboard .dashnav-list--rail .dashnav-section{ margin: 0 0 10px; }
  body.contributor-dashboard .dashnav-list--rail .dashnav-group{
    padding: 12px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bi-apple-grouped-label2-light);
  }
  body.contributor-dashboard.dark .dashnav-list--rail .dashnav-group{
    color: var(--bi-apple-grouped-label2-dark);
  }
  body.contributor-dashboard .dashnav-list--rail .dashnav-card{
    margin: 0 6px;
    border-radius: 10px;
    background: var(--bi-apple-grouped-card-light);
    overflow: hidden;
  }
  body.contributor-dashboard.dark .dashnav-list--rail .dashnav-card{
    background: var(--bi-apple-grouped-card-dark);
  }
  body.contributor-dashboard .dashnav-list--rail .dashnav-item{
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    width: 100%;
    min-height: 40px !important;
    padding: 7px 10px !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    white-space: normal;
  }
  body.contributor-dashboard .dashnav-list--rail .dashnav-card > li:not(:last-child) > .dashnav-item{
    border-bottom: 0.5px solid var(--bi-apple-grouped-sep-light) !important;
  }
  body.contributor-dashboard.dark .dashnav-list--rail .dashnav-card > li:not(:last-child) > .dashnav-item{
    border-bottom-color: var(--bi-apple-grouped-sep-dark) !important;
  }
  body.contributor-dashboard .dashnav-list--rail .dashnav-item:hover{
    background: rgba(120,120,128,0.12) !important;
  }
  /* Tiles and chevrons were display:none outside the mobile block — switch them back on for
     this host only, at a size that suits a 248px rail rather than a full-screen sheet. */
  body.contributor-dashboard .dashnav-list--rail .dashnav-ic{
    display: grid !important;
    place-items: center;
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border-radius: 6px;
    color: var(--bi-apple-grouped-glyph);
  }
  body.contributor-dashboard .dashnav-list--rail .dashnav-ic svg{ width: 14px; height: 14px; display: block; }
  body.contributor-dashboard .dashnav-list--rail .dashnav-chev{
    display: block !important;
    flex: 0 0 auto;
    width: 7px; height: 11px;
    margin-left: auto;
    color: #8A8A8E;
  }
  body.contributor-dashboard.dark .dashnav-list--rail .dashnav-chev{ color: #7C7C80; }
  /* The search field belongs to the full-screen sheet, not to a 248px rail. */
  body.contributor-dashboard #dashNavDrawer .dashnav-search{ display: none; }
}

/* ============================================================================
   HOST-AGNOSTIC TILE HUES. 2026-08-05.

   The 13 hue rules were originally written as `#dashNavDrawer .dashnav-ic--red`, which was
   fine while the nav only ever lived in the drawer. It now lives in the rail on desktop too,
   and MEASURED: 29 tiles rendered with zero background — the hue rules simply did not match
   their new host. Rather than add a third scoped copy (drawer, header, rail) and invite the
   same bug the next time the nav moves, these are host-agnostic: any element carrying
   .dashnav-ic--<hue> gets its colour wherever it is in the document.
   Same tokens as before, so nothing shifts in the places that already worked.
   ============================================================================ */
body.contributor-dashboard .dashnav-ic--red{ background: var(--bi-apple-sys-red-light); }
body.contributor-dashboard .dashnav-ic--orange{ background: var(--bi-apple-sys-orange-light); }
body.contributor-dashboard .dashnav-ic--yellow{ background: var(--bi-apple-sys-yellow-light); }
body.contributor-dashboard .dashnav-ic--green{ background: var(--bi-apple-sys-green-light); }
body.contributor-dashboard .dashnav-ic--mint{ background: var(--bi-apple-sys-mint-light); }
body.contributor-dashboard .dashnav-ic--teal{ background: var(--bi-apple-sys-teal-light); }
body.contributor-dashboard .dashnav-ic--cyan{ background: var(--bi-apple-sys-cyan-light); }
body.contributor-dashboard .dashnav-ic--blue{ background: var(--bi-apple-sys-blue-light); }
body.contributor-dashboard .dashnav-ic--indigo{ background: var(--bi-apple-sys-indigo-light); }
body.contributor-dashboard .dashnav-ic--purple{ background: var(--bi-apple-sys-purple-light); }
body.contributor-dashboard .dashnav-ic--pink{ background: var(--bi-apple-sys-pink-light); }
body.contributor-dashboard .dashnav-ic--brown{ background: var(--bi-apple-sys-brown-light); }
body.contributor-dashboard .dashnav-ic--gray{ background: var(--bi-apple-sys-gray-light); }

body.contributor-dashboard.dark .dashnav-ic--red{ background: var(--bi-apple-sys-red-dark); }
body.contributor-dashboard.dark .dashnav-ic--orange{ background: var(--bi-apple-sys-orange-dark); }
body.contributor-dashboard.dark .dashnav-ic--yellow{ background: var(--bi-apple-sys-yellow-dark); }
body.contributor-dashboard.dark .dashnav-ic--green{ background: var(--bi-apple-sys-green-dark); }
body.contributor-dashboard.dark .dashnav-ic--mint{ background: var(--bi-apple-sys-mint-dark); }
body.contributor-dashboard.dark .dashnav-ic--teal{ background: var(--bi-apple-sys-teal-dark); }
body.contributor-dashboard.dark .dashnav-ic--cyan{ background: var(--bi-apple-sys-cyan-dark); }
body.contributor-dashboard.dark .dashnav-ic--blue{ background: var(--bi-apple-sys-blue-dark); }
body.contributor-dashboard.dark .dashnav-ic--indigo{ background: var(--bi-apple-sys-indigo-dark); }
body.contributor-dashboard.dark .dashnav-ic--purple{ background: var(--bi-apple-sys-purple-dark); }
body.contributor-dashboard.dark .dashnav-ic--pink{ background: var(--bi-apple-sys-pink-dark); }
body.contributor-dashboard.dark .dashnav-ic--brown{ background: var(--bi-apple-sys-brown-dark); }
body.contributor-dashboard.dark .dashnav-ic--gray{ background: var(--bi-apple-sys-gray-dark); }

/* ============================================================================
   HOST-AGNOSTIC LIST RESET. 2026-08-05.

   The reset at ~:4777 was written "unscoped by width, deliberately" — and that part was
   right — but it was still scoped to #dashNavDrawer. The moment syncGlobalNavHost() moved
   the nav into the rail it stopped applying, and MEASURED: <li> markers rendered as visible
   bullets down the desktop sidebar.

   Scoping by WIDTH and scoping by HOST are two different mistakes and this rule made the
   second one. A nav that can live in more than one container needs its structural reset
   attached to the nav, not to either container.
   ============================================================================ */
body.contributor-dashboard .dashnav-card{
  list-style: none;
  margin: 0;
  padding: 0;
}
body.contributor-dashboard .dashnav-card > li{
  margin: 0;
  padding: 0;
  list-style: none;
}
body.contributor-dashboard .dashnav-card > li::marker{ content: none; }
body.contributor-dashboard .dashnav-card > li > .dashnav-item{ width: 100%; }

/* ============================================================================
   STEP 4 — "Back to …" becomes the circled ←. 2026-08-05.

   Scoped to .set-back--circle, which only the four panel buttons carry. The two
   .cM-headbar .set-back buttons in the contributor editor/create flows keep their existing
   text treatment — they were not part of what Fernando was looking at, and silently
   restyling them would be an unrequested change to a different surface.

   Same 44×44 circle, same navy glass floor, same arrow as #dashNavClose in the menu header,
   so "the way back" is one recognisable object throughout the app.
   ============================================================================ */
body.contributor-dashboard .sh-wrap[data-panel] .set-back--circle{
  display: inline-grid !important;
  place-items: center;
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  border-radius: 50% !important;
  border: 1px solid var(--glass-line, rgba(255,255,255,.14)) !important;
  background: rgba(17,25,40,.85) !important;
  color: #fff !important;
  font-size: 0 !important;                /* kills any residual text node */
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
body.contributor-dashboard .sh-wrap[data-panel] .set-back--circle svg{
  width: 22px; height: 22px; display: block;
}
body.contributor-dashboard .sh-wrap[data-panel] .set-back--circle:hover{
  background: rgba(17,25,40,.95) !important;
}

@media (forced-colors: active){
  body.contributor-dashboard .sh-wrap[data-panel] .set-back--circle{
    background: Canvas !important;
    border: 1px solid CanvasText !important;
    color: CanvasText !important;
  }
}

/* ============================================================================
   A + B + C — hamburger / scrollbar / ground. 2026-08-05. Approved plan.
   ============================================================================ */

/* ---- A · THE HAMBURGER IS ALWAYS 3 LINES ----
   Fernando, verbatim: "I want the hamburger to have the 3 lines always does not matter the
   state, we have a Hide in the sidebar for that!"
   MEASURED before this fix: both states returned matrix(0.707107, …) — the icon was an X
   PERMANENTLY, because Step 2 made aria-expanded="true" mean "sidebar open" and the morph
   rules at dashboard.css:3935-3937 / 4851-4853 key on that attribute.
   Generalises the decision already shipped at apple-material.css:2551 for the embedded
   settings burger. State is carried by aria-expanded (4.1.2 satisfied — no SC requires a
   visual morph) and by the sidebar itself appearing/disappearing.
   Companion (done in dashboard.html): all 7 triggers renamed to the constant
   "Navigation menu" — the old "Open …" labels asserted a direction that was wrong half the
   time once the icon stopped changing. */
body.contributor-dashboard #dashHamBtn[aria-expanded="true"] span:nth-child(1),
body.contributor-dashboard #dashHamBtn[aria-expanded="true"] span:nth-child(3),
body.contributor-dashboard .sh-burger[aria-expanded="true"] span:nth-child(1),
body.contributor-dashboard .sh-burger[aria-expanded="true"] span:nth-child(3){
  transform: none !important;
}
body.contributor-dashboard #dashHamBtn[aria-expanded="true"] span:nth-child(2),
body.contributor-dashboard .sh-burger[aria-expanded="true"] span:nth-child(2){
  opacity: 1 !important;
}

@media (min-width: 901px){
  /* ---- B · NO SCROLLBAR TRACK IN THE RAIL ----
     MEASURED: the track consumed 15px of a 227px list (212 usable). Fernando chose `none`
     over `thin` with the macOS "Always show scrollbars" tradeoff stated to him.
     Scrolling itself is untouched — wheel/trackpad/keyboard all work, and the 29 focusable
     rows guarantee keyboard reachability (2.1.1 satisfied by content). No WCAG criterion
     requires a visible scrollbar; do not cite one in the CHANGE_LOG. */
  body.contributor-dashboard .dashnav-list--rail{
    scrollbar-width: none;
    /* C · THE GROUND. MEASURED: cards sat DARKER than their ground in dark mode
       (#1C1C1E card on #2C2C2E rail) — inverted from iOS, and the cause of the corner
       defect Fernando saw: the wrong colour showing through the rounded notches.
       The grouped ground puts the same card-lighter-than-ground relationship here as in
       the mobile sheet. */
    background: var(--bi-apple-grouped-bg-light) !important;
    padding-left: 6px;
    padding-right: 6px;
  }
  body.contributor-dashboard.dark .dashnav-list--rail{
    background: var(--bi-apple-grouped-bg-dark) !important;
  }
  body.contributor-dashboard .dashnav-list--rail::-webkit-scrollbar{
    width: 0; height: 0; display: none;
  }
  /* Free companion from the gate: focused rows stop sliding flush against the scroll
     container's top edge. Partial occlusion passes AA; this simply removes the complaint. */
  body.contributor-dashboard .dashnav-list--rail .dashnav-item{
    scroll-margin-top: 10px;
    scroll-margin-bottom: 10px;
  }
}

/* ============================================================================
   E — THE BACK BUTTON: theme-aware, and desktop-free. 2026-08-05.

   MEASURED before: rgba(17,25,40,.85) navy in BOTH themes — near-invisible on the dark
   sheet's #000 ground, and a dark blob on light. Fernando: "I don't even see a sign."
   Now: light theme = light glass + dark ink; dark theme = dark glass + white ink, each
   measured against its actual ground.
   ============================================================================ */
body.contributor-dashboard:not(.dark) #dashNavDrawer .dashnav-close,
body.contributor-dashboard:not(.dark) .sh-wrap[data-panel] .set-back--circle{
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #1d1d1f !important;
}
body.contributor-dashboard.dark #dashNavDrawer .dashnav-close,
body.contributor-dashboard.dark .sh-wrap[data-panel] .set-back--circle{
  background: rgba(58,58,60,0.85) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
}

/* DESKTOP: no back button anywhere — Fernando's call, and safe ONLY because forwardTab()
   now resets every panel to its card grid (see dashboard.js), so the sidebar row genuinely
   IS the route back. Removal without that reset was MEASURED to strand the user
   (STRANDED: true from Events/Calendar). display:none also removes it from the a11y tree —
   there is no "present for AT" half-state — while HTMLElement.click() still works for the
   Live Feed breadcrumb at dashboard.js:13680. */
@media (min-width: 901px){
  body.contributor-dashboard .sh-wrap[data-panel] .set-back--circle{
    display: none !important;
  }
}

/* ---- D · group disclosure styling ---- */
body.contributor-dashboard .dashnav-group-btn{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;                 /* the h2/.dashnav-group typography carries through */
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
body.contributor-dashboard .dashnav-group-btn:focus-visible{
  outline: 2px solid var(--bi-apple-sys-blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}
body.contributor-dashboard.dark .dashnav-group-btn:focus-visible{
  outline-color: var(--bi-apple-sys-blue-dark);
}
body.contributor-dashboard .dashnav-grp-chev{
  width: 12px; height: 12px; flex: 0 0 auto;
  transition: transform 160ms ease;
}
body.contributor-dashboard .dashnav-group-btn[aria-expanded="false"] .dashnav-grp-chev{
  transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce){
  body.contributor-dashboard .dashnav-grp-chev{ transition: none; }
}

/* ---- F · the header back control (mobile only) ----
   Sits in the LEFT of the top header beside the hamburger, logo centred — Fernando's spec:
   "the back button stays in the left of the top header just like it is in menu with the
   broadimage logo in the middle for all toggling after that menu." Same circled glass as the
   menu's own back, theme-aware, so "the way back" is one object everywhere. Desktop never
   shows it — the sidebar is the navigation there. */
body.contributor-dashboard .bdg-header-back{
  display: none;
  position: absolute;
  left: 68px;                    /* 16 (ham left) + 44 (ham) + 8 gap */
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  color: #1d1d1f;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
body.contributor-dashboard.dark .bdg-header-back{
  border-color: rgba(255,255,255,0.28);
  background: rgba(58,58,60,0.85);
  color: #fff;
}
body.contributor-dashboard .bdg-header-back svg{ width: 22px; height: 22px; }
@media (max-width: 900px){
  body.contributor-dashboard .bdg-header-back:not([hidden]){ display: grid; }
}
@media (forced-colors: active){
  body.contributor-dashboard .bdg-header-back{
    background: Canvas; border: 1px solid CanvasText; color: CanvasText;
  }
}

/* ============================================================================
   MOBILE-ONLY NAVIGATED HEADER — Fernando's corrected spec, 2026-08-05.
   Every rule below sits inside @media (max-width:900px). Desktop is untouched by
   construction; the JS side is gated by an isDesktop() early-return.
   ============================================================================ */
@media (max-width: 900px){
  /* The navigated header IS the menu header: arrow at the MENU's measured position
     (left:20px, 44×44 — not beside the hamburger, in its region), logo centred (already
     pixel-identical: 164×31.4 centre 220.1 in both headers, measured). */
  body.contributor-dashboard .bdg-header-back{
    left: 20px;
  }
  /* Forward from the Broadimage menu ⇒ no hamburger, no notifications. Both return at root.
     display:none also removes them from the a11y tree and tab order — ruled conformant
     (omission, user-initiated; 3.2.3 governs order, not presence). */
  body.contributor-dashboard.bdg-mobile-navigated #dashHamBtn,
  body.contributor-dashboard.bdg-mobile-navigated #headerSessionSticky #headerNotifyBtn{
    display: none !important;
  }
  /* The in-panel circled button "between the tab headers and the wording" — GONE on mobile,
     at Fernando's order. PROGRAMMATIC-ONLY, not deleted: the header ←'s pop and the Live Feed
     breadcrumb both drive it via HTMLElement.click(), which fires on display:none — proven
     live before this rule was written. */
  body.contributor-dashboard .sh-wrap[data-panel] .set-back--circle{
    display: none !important;
  }
}

/* ---- FIX 2026-08-05: the header ← must BE the menu ← ----
   MEASURED: everything already matched the menu button (44×44, bg .85, border .15, ink,
   blur, left:20, vertical centre offset 0) EXCEPT border-radius — a header-scoped rule was
   flattening it to 5.4px ("squared") — and an inherited box-shadow the menu button does not
   carry. Two ids out-specify whatever header rule was winning. Mobile block only; desktop
   never displays this control. */
@media (max-width: 900px){
  body.contributor-dashboard #headerSessionSticky #bdgHeaderBack{
    border-radius: 50% !important;
    box-shadow: none !important;
  }
}

/* ============================================================================
   FIX 2026-08-05 — THE HEADER ← IS THE HAMBURGER, RESTYLED WITH AN ARROW.
   Fernando: "make sure the back button follows the same style… place them aligned in the
   header, I've asked you to do that as well with the hamburgers."

   MEASURED, and the previous fix matched the WRONG reference: the header pattern is the
   HAMBURGER — an 11px rounded square in Liquid Glass — not the menu sheet's flat white
   circle. Every value below is the hamburger's own rendered value, copied verbatim per
   theme (light: gradient .88→.48/.42, border white .82, liquid-shadow-light; dark:
   gradient .16→.035/.08 over navy .46, border white .24, liquid-shadow-dark; both blur
   24 saturate 180%). Position = the hamburger's exact slot: left:16, same vertical rule —
   the ← replaces the ≡ in place. The arrow was also MEASURED 6px right of centre; the
   grid centring below is enforced with the svg pinned to the grid centre.
   Mobile block only; desktop never renders this control.
   ============================================================================ */
@media (max-width: 900px){
  body.contributor-dashboard #headerSessionSticky #bdgHeaderBack{
    left: 16px !important;                     /* the hamburger's slot, not beside it */
    border-radius: 11px !important;            /* the ham is a rounded SQUARE — the pattern */
    border-color: rgba(255,255,255,0.82) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.48) 52%, rgba(225,228,234,0.42)),
      rgba(255,255,255,0.58) !important;   /* the ham's base layer under the gradient — measured */
    box-shadow: var(--bi-apple-liquid-shadow-light) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    color: #1d1d1f !important;
    display: grid;
    place-items: center !important;
    padding: 0 !important;
  }
  body.contributor-dashboard #headerSessionSticky #bdgHeaderBack[hidden]{ display: none; }
  body.contributor-dashboard.dark #headerSessionSticky #bdgHeaderBack{
    border-color: rgba(255,255,255,0.24) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 48%, rgba(0,0,0,0.08)),
      rgba(20,24,31,0.46) !important;
    box-shadow: var(--bi-apple-liquid-shadow-dark) !important;
    color: #f5f5f7 !important;
  }
  /* The arrow, dead centre — MEASURED 6px right before this. Pinned to the grid centre so
     nothing (baseline, inherited margins, float leaks) can push it again. */
  body.contributor-dashboard #headerSessionSticky #bdgHeaderBack svg{
    width: 20px; height: 20px;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
  }
}

/* ---- FIX 2026-08-05: ≡ and ← sit in the TOP-LEFT of the header band, equal padding ----
   Fernando: "the square aligned left and in the top left of the header with the same padding
   from the top and bottom of the header… I've asked you to do that as well with the hamburgers."
   MEASURED: the header is two stacked boxes — .top-section (the video band, 67.3px) and
   #sessionBar (the black strip, 32px). Centring at 50% of the WHOLE header (my earlier rule)
   put both buttons over the band/strip boundary. Equal padding within the BAND for a 44px
   button = (67.3−44)/2 = 11.6px — and the menu header's own back button sits at 11.5 in a
   68px head, so this is the same geometry the design already uses.
   Mobile only, per standing order; the desktop hamburger is untouched. */
@media (max-width: 900px){
  body.contributor-dashboard #dashHamBtn,
  body.contributor-dashboard #headerSessionSticky #bdgHeaderBack{
    top: 11.6px !important;
    transform: none !important;
  }
}

/* ---- FIX 2026-08-05: the bell joins the same vertical alignment (mobile only) ----
   Fernando: same alignment as the hamburger, stays on the right. MEASURED before: the bell
   sat at top:20 in the 67.3px band → 20 above / 3.3 below, visibly low. Same 11.6px as
   ≡ and ← → equal padding. Right position untouched. Desktop untouched. */
@media (max-width: 900px){
  body.contributor-dashboard #headerSessionSticky #headerNotifyBtn{
    top: 11.6px !important;
    transform: none !important;
  }
}

/* ============================================================================
   2026-08-05 — mobile sheet: plain headings + the corner-defect fix (Fernando ×3).
   ============================================================================ */
@media (max-width: 900px){
  /* Sections are NOT collapsible in the mobile menu — headings back to plain labels.
     JS strips the ARIA/tabbability on the sheet host; this removes the visual affordance. */
  body.contributor-dashboard #dashNavDrawer .dashnav-group-btn{
    pointer-events: none;
    cursor: default;
  }
  body.contributor-dashboard #dashNavDrawer .dashnav-grp-chev{ display: none !important; }

  /* THE CORNER DEFECT, root-caused after three reports: every row carried
     `inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.28)` from a broad
     button-glass rule. The inner rings drew hairlines, the drop shadows drew dark seams —
     rows read as separate floating slabs — and at the card's rounded corners the SQUARE
     ring was clipped by overflow:hidden: the "missing cell" corner. Colours were never the
     problem; the shadows were. Scoped to sheet rows only — no other button loses its glass. */
  body.contributor-dashboard #dashNavDrawer .dashnav-item,
  body.contributor-dashboard #dashNavDrawer .dashnav-util{
    box-shadow: none !important;
  }

  /* The iOS inset hairline, RESTORED — the same probe found it had never rendered: the
     Step-1 `background: … !important` shorthand resets background-image with importance,
     silently killing the later non-important gradient. `!important` here + later source
     order wins. 57px inset (16 pad + 29 tile + 12 gap); absent under the last row. */
  body.contributor-dashboard #dashNavDrawer .dashnav-card > li:not(:last-child) > .dashnav-item{
    background-image: linear-gradient(to right, transparent 0 57px, var(--bi-apple-grouped-sep-light) 57px 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 0.5px !important;
    background-position: 0 100% !important;
  }
  body.contributor-dashboard.dark #dashNavDrawer .dashnav-card > li:not(:last-child) > .dashnav-item{
    background-image: linear-gradient(to right, transparent 0 57px, var(--bi-apple-grouped-sep-dark) 57px 100%) !important;
  }
}

/* ---- FIX 2026-08-05: ghost "cell" around the section titles in the mobile menu ----
   Fernando (after the row fix): "I still see traces of cells in the titles account, content."
   MEASURED: the <h2> is clean; the BUTTON inside it inherits from the same broad button-glass
   rules that shadowed the rows — inset ring rgba(255,255,255,.06), drop 0 6px 16px
   rgba(0,0,0,.28), blur(6px) saturate(1.15), radius 5.4px. Rows were swept; the headings
   were not — same leak class, now closed. Drawer-scoped: on desktop the list lives in the
   rail, outside #dashNavDrawer, so this cannot touch it. */
@media (max-width: 900px){
  body.contributor-dashboard #dashNavDrawer .dashnav-group-btn,
  body.contributor-dashboard #dashNavDrawer h2.dashnav-group{
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}