/* Section-adaptive chrome tone (P3) + sliding indicator polish (P4) */

.mc-chrome__bar.mc-glass--bar {
  transition:
    transform 0.42s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    min-height 0.42s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    background 0.36s ease,
    border-color 0.36s ease,
    box-shadow 0.36s ease,
    color 0.28s ease;
}

.mc-chrome__indicator {
  transition:
    transform 0.44s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    width 0.4s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    opacity 0.24s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Light sections - solid frosted bar, dark ink */
body.mc-chrome-tone-light .mc-chrome__bar,
html.mc-chrome-tone-light .mc-chrome__bar {
  --mc-chrome-divider: rgba(15, 23, 42, 0.14);
  --mc-chrome-segment-hover: rgba(15, 23, 42, 0.07);
  --mc-chrome-segment-active: rgba(0, 48, 222, 0.12);
  --mc-chrome-ink: var(--mc-ink);
  --mc-chrome-indicator-bg: rgba(255, 255, 255, 0.72);
  --mc-chrome-indicator-ring: rgba(255, 255, 255, 0.88);
  --mc-chrome-indicator-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 14px rgba(15, 23, 42, 0.06);
  color: var(--mc-chrome-ink);
}

body.mc-chrome-tone-light .mc-chrome__bar.mc-glass--bar,
html.mc-chrome-tone-light .mc-chrome__bar.mc-glass--bar {
  --mc-glass-bg: rgba(255, 255, 255, 0.9);
  --mc-glass-bg-hover: rgba(255, 255, 255, 0.9);
  --mc-glass-border: rgba(15, 23, 42, 0.11);
  --mc-glass-border-hover: rgba(15, 23, 42, 0.11);
  --mc-glass-rim-top: rgba(255, 255, 255, 0.96);
  --mc-glass-rim-bottom: rgba(15, 23, 42, 0.04);
  --mc-glass-specular: rgba(255, 255, 255, 0.48);
  --mc-glass-specular-soft: rgba(255, 255, 255, 0.16);
  --mc-glass-blur: 22px;
  --mc-glass-saturate: 158%;
  --mc-glass-shadow:
    0 12px 38px rgba(15, 23, 42, 0.1),
    0 2px 8px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Dark sections / night - frosted bar, light ink */
body.mc-chrome-tone-dark .mc-chrome__bar,
html.mc-chrome-tone-dark .mc-chrome__bar,
html.mc-chrome-tone-dark-pending .mc-chrome__bar {
  --mc-chrome-divider: rgba(255, 255, 255, 0.22);
  --mc-chrome-segment-hover: rgba(255, 255, 255, 0.1);
  --mc-chrome-segment-active: rgba(255, 255, 255, 0.14);
  --mc-chrome-ink: rgba(242, 241, 237, 0.96);
  --mc-chrome-indicator-bg: rgba(255, 255, 255, 0.14);
  --mc-chrome-indicator-ring: rgba(255, 255, 255, 0.22);
  --mc-chrome-indicator-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.22);
  color: var(--mc-chrome-ink);
}

body.mc-chrome-tone-dark .mc-chrome__bar.mc-glass--bar,
html.mc-chrome-tone-dark .mc-chrome__bar.mc-glass--bar,
html.mc-chrome-tone-dark-pending .mc-chrome__bar.mc-glass--bar {
  --mc-glass-bg: rgba(28, 30, 38, 0.9);
  --mc-glass-bg-hover: rgba(28, 30, 38, 0.9);
  --mc-glass-border: rgba(255, 255, 255, 0.3);
  --mc-glass-border-hover: rgba(255, 255, 255, 0.3);
  --mc-glass-rim-top: rgba(255, 255, 255, 0.34);
  --mc-glass-rim-bottom: rgba(0, 0, 0, 0.26);
  --mc-glass-specular: rgba(255, 255, 255, 0.22);
  --mc-glass-specular-soft: rgba(255, 255, 255, 0.09);
  --mc-glass-blur: 24px;
  --mc-glass-saturate: 172%;
  --mc-glass-shadow:
    0 16px 46px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Home hero - vivid glass picks up backdrop color */
body.mc-chrome-tone-vivid .mc-chrome__bar.mc-glass--bar,
html.mc-chrome-tone-vivid .mc-chrome__bar.mc-glass--bar {
  --mc-glass-blur: 28px;
  --mc-glass-saturate: 192%;
  --mc-glass-bg: rgba(255, 255, 255, 0.62);
  --mc-glass-border: rgba(255, 255, 255, 0.56);
  --mc-glass-rim-top: rgba(255, 255, 255, 0.82);
  --mc-glass-specular: rgba(255, 255, 255, 0.46);
  --mc-glass-specular-soft: rgba(255, 255, 255, 0.14);
}

body.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar,
html.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar {
  --mc-chrome-divider: rgba(15, 23, 42, 0.11);
  --mc-chrome-indicator-bg: rgba(255, 255, 255, 0.58);
  --mc-chrome-indicator-ring: rgba(255, 255, 255, 0.78);
  --mc-chrome-indicator-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 22px rgba(15, 23, 42, 0.08);
  --mc-chrome-ink: var(--mc-ink);
}

body.mc-chrome-tone-vivid.mc-chrome-tone-dark .mc-chrome__bar.mc-glass--bar,
html.mc-chrome-tone-vivid.mc-chrome-tone-dark .mc-chrome__bar.mc-glass--bar,
html.mc-chrome-tone-vivid.mc-chrome-tone-dark-pending .mc-chrome__bar.mc-glass--bar {
  --mc-glass-bg: rgba(20, 22, 30, 0.76);
  --mc-glass-border: rgba(255, 255, 255, 0.32);
  --mc-glass-saturate: 204%;
  --mc-glass-specular: rgba(255, 255, 255, 0.24);
  --mc-chrome-indicator-bg: rgba(255, 255, 255, 0.12);
  --mc-chrome-indicator-ring: rgba(255, 255, 255, 0.2);
}

body.mc-chrome-tone-vivid .mc-chrome__bar.mc-glass--bar::before,
html.mc-chrome-tone-vivid .mc-chrome__bar.mc-glass--bar::before {
  opacity: 0.86;
}

body.mc-chrome-tone-dark .mc-chrome__bar.mc-glass--bar::before,
html.mc-chrome-tone-dark .mc-chrome__bar.mc-glass--bar::before,
html.mc-chrome-tone-dark-pending .mc-chrome__bar.mc-glass--bar::before {
  opacity: 0.9;
}

body.mc-chrome-tone-light .mc-chrome__bar.mc-glass--bar::before,
html.mc-chrome-tone-light .mc-chrome__bar.mc-glass--bar::before {
  opacity: 0.76;
}

/* Drawer follows chrome ink tone */
body.mc-chrome-tone-light .mc-nav-drawer.mc-glass--panel {
  --mc-glass-bg: rgba(255, 255, 255, 0.95);
  --mc-glass-border: rgba(15, 23, 42, 0.1);
  --mc-glass-blur: 22px;
  --mc-glass-saturate: 155%;
  color: var(--mc-ink);
}

body.mc-chrome-tone-dark .mc-nav-drawer.mc-glass--panel,
body.mc-chrome-tone-vivid.mc-chrome-tone-dark .mc-nav-drawer.mc-glass--panel {
  --mc-glass-bg: rgba(24, 26, 34, 0.94);
  --mc-glass-border: rgba(255, 255, 255, 0.2);
  --mc-glass-blur: 24px;
  --mc-glass-saturate: 168%;
  color: rgba(242, 241, 237, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .mc-chrome__indicator {
    transition: opacity 0.15s ease, background 0.15s ease !important;
  }
}

/* P5 - dynamic hero backdrop sampling (vars set in creative-chrome-sample.js) */
body.mc-chrome-tone-vivid .mc-chrome__bar[data-mc-chrome-sampled="true"],
html.mc-chrome-tone-vivid .mc-chrome__bar[data-mc-chrome-sampled="true"] {
  --mc-glass-bg: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.54);
  --mc-glass-bg-hover: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.62);
  --mc-glass-border: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.42);
  --mc-glass-border-hover: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.5);
  --mc-glass-rim-top: rgba(255, 255, 255, 0.78);
  --mc-glass-specular: rgba(255, 255, 255, 0.42);
  --mc-glass-specular-soft: rgba(255, 255, 255, 0.14);
  --mc-chrome-indicator-bg: rgba(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b), 0.34);
  --mc-chrome-indicator-ring: rgba(255, 255, 255, 0.72);
  --mc-chrome-indicator-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 22px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.42s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    min-height 0.42s var(--mc-glass-spring, cubic-bezier(0.34, 1.25, 0.64, 1)),
    background 0.42s ease,
    border-color 0.42s ease,
    box-shadow 0.42s ease,
    color 0.28s ease;
}

body.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-luma="dark"],
html.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-luma="dark"] {
  --mc-chrome-ink: rgba(242, 241, 237, 0.96);
  --mc-chrome-divider: rgba(255, 255, 255, 0.2);
  color: var(--mc-chrome-ink);
}

body.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-light,
html.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-light {
  display: none;
}

body.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-dark,
html.mc-chrome-tone-vivid.mc-chrome-tone-light .mc-chrome__bar[data-mc-chrome-sampled="true"][data-mc-chrome-sample-luma="dark"] .mc-chrome__brand-mark--on-dark {
  display: block;
}

body.mc-chrome-tone-vivid.mc-chrome-tone-dark .mc-chrome__bar[data-mc-chrome-sampled="true"],
html.mc-chrome-tone-vivid.mc-chrome-tone-dark .mc-chrome__bar[data-mc-chrome-sampled="true"] {
  --mc-glass-bg: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 24%,
    rgba(20, 22, 30, 0.78)
  );
  --mc-glass-border: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 18%,
    rgba(255, 255, 255, 0.28)
  );
  --mc-chrome-indicator-bg: color-mix(
    in srgb,
    rgb(var(--mc-chrome-sample-r), var(--mc-chrome-sample-g), var(--mc-chrome-sample-b)) 22%,
    rgba(255, 255, 255, 0.12)
  );
}

@media (prefers-reduced-motion: reduce) {
  body.mc-chrome-tone-vivid .mc-chrome__bar[data-mc-chrome-sampled="true"],
  html.mc-chrome-tone-vivid .mc-chrome__bar[data-mc-chrome-sampled="true"] {
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
}