/* V140 — one glass material for controls; study pages remain solid.
   Reflection is painted inside the existing button, never over its text.
   No pseudo-element, continuous animation, external asset or layout transform. */
:root {
  --lg140-control: #f5f9ffdc;
  --lg140-surface: var(--lg140-control);
  --lg140-foreground: var(--lg140-ink);
  --lg140-outline: var(--lg140-edge);
  --lg140-control-opaque: #f5f9ff;
  --lg140-ink: #192332;
  --lg140-edge: #7288a8;
  --lg140-selected: #e4edfff2;
  --lg140-selected-opaque: #e4edff;
  --lg140-selected-ink: #1743af;
  --lg140-selected-edge: #2455d6;
  --lg140-action: #2455d6;
  --lg140-action-hover: #1743af;
  --lg140-action-ink: #fff;
  --lg140-action-edge: #2e61d1;
  --lg140-danger: #98311b;
  --lg140-danger-ink: #fff;
  --lg140-rim: #ffffffa3;
  --lg140-lower-rim: #1535681a;
  --lg140-shadow: 0 6px 16px -10px #16376473;
  --lg140-hover-shadow: 0 9px 20px -11px #1637648c;
  --lg140-press-shadow: inset 0 2px 5px #0b285633;
  --lg140-reflection: radial-gradient(ellipse at 15% 0%, #ffffff0a, #ffffff00 66%),
    linear-gradient(180deg, #ffffff1a 0%, #ffffff00 56%, #061a3b0d 100%);
}
html[data-theme="dark"] {
  --lg140-control: #1b2d47e6;
  --lg140-control-opaque: #1b2d47;
  --lg140-ink: #edf4ff;
  --lg140-edge: #6b8fba;
  --lg140-selected: #294c79f2;
  --lg140-selected-opaque: #294c79;
  --lg140-selected-ink: #edf4ff;
  --lg140-selected-edge: #95bfff;
  --lg140-rim: #cce5ff70;
  --lg140-lower-rim: #06112280;
  --lg140-shadow: 0 6px 18px -9px #02081499;
  --lg140-hover-shadow: 0 10px 22px -10px #020814bd;
  --lg140-press-shadow: inset 0 2px 6px #02081499;
}

/* The semantic action layer covers SSR, the vanilla workspace and React.
   Text-only links and disclosure headings retain their lighter presentation. */
html body:is(.public-site, [data-analytics-context])
  :is(button, input[type="submit"], input[type="button"], input[type="reset"], .btn, .cl-button, .cl-inline-link[role="button"], .cb-panel > .cl-inline-link, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [data-slot="button"], [role="tab"], .ch-filter, .ch-period-button, .cl-period, .cb-choice, .cb-account-choice, .nav-link):where(:not([data-variant="link"]):not(.text-link):not(.ch-text-link):not(.analytics-settings)) {
  background-color: var(--lg140-surface) !important;
  background-image: var(--lg140-reflection) !important;
  background-origin: border-box;
  border: 1px solid var(--lg140-outline);
  border-radius: var(--ch-control-radius, 12px);
  color: var(--lg140-foreground) !important;
  box-shadow: inset 0 1px 0 var(--lg140-rim);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: background-color var(--motion-duration-feedback, 150ms) var(--motion-ease, ease-out),
    border-color var(--motion-duration-feedback, 150ms) var(--motion-ease, ease-out),
    box-shadow var(--motion-duration-feedback, 150ms) var(--motion-ease, ease-out);
  touch-action: manipulation;
}

/* Primary blue keeps enough pigment for white lettering, including the crest. */
html body:is(.public-site, [data-analytics-context])
  :is(.btn-primary, .cl-button:not(.cl-button-secondary), .h130-primary, .cc104-primary, .lp-button-primary, .ch-journey-primary, .ch-atlas-all, .cb-panel > .cl-inline-link, .ch-full-package-purchase .ch-button, .ch-package-files .ch-package-purchase > .ch-button, .ch-check-owned-next .ch-button, [data-slot="button"][data-variant="default"], button[type="submit"]:not(.btn-outline):not([data-variant="outline"])) {
  --lg140-surface: var(--lg140-action);
  --lg140-foreground: var(--lg140-action-ink);
  --lg140-outline: var(--lg140-action-edge);
  box-shadow: inset 0 1px 0 var(--lg140-rim), inset 0 -1px 0 var(--lg140-lower-rim), var(--lg140-shadow);
}
html body:is(.public-site, [data-analytics-context])
  :is(.btn-danger, .btn-destructive, [data-slot="button"][data-variant="destructive"]) {
  --lg140-surface: var(--lg140-danger);
  --lg140-foreground: var(--lg140-danger-ink);
  --lg140-outline: var(--lg140-danger);
}

/* Selected state has its own edge as well as a fill; labels remain unchanged. */
html body:is(.public-site, [data-analytics-context])
  :is(button, .btn, [role="tab"], .ch-filter, .ch-period-button, .cl-period, .nav-link):is([aria-pressed="true"], [aria-selected="true"], [data-state="active"], .active) {
  --lg140-surface: var(--lg140-selected);
  --lg140-foreground: var(--lg140-selected-ink);
  --lg140-outline: var(--lg140-selected-edge);
  box-shadow: inset 0 -2px 0 var(--lg140-selected-edge);
}
/* Legacy periods/nav badges used white child text for an opaque blue fill.
   Selected glass now owns its foreground; child labels follow that role. */
html body:is(.public-site, [data-analytics-context])
  :is(button, .btn, [role="tab"], .ch-filter, .filter-chip, .ch-period-button, .cl-period, .nav-link):is([aria-pressed="true"], [aria-selected="true"], [data-state="active"], .active)
  > :is(span, strong, b, small, svg),
html :is(.public-site, .chronika-ui) .cb-radio:checked + .cb-choice > :is(span, strong, b, small, svg),
html :is(.public-site, .chronika-ui) .cb-account-radio:checked + .cb-account-choice > :is(span, strong, b, small, svg) {
  color: inherit !important;
}
html :is(.public-site, .chronika-ui) .chronika-learning .cb-switch-five .cb-choice,
html :is(.public-site, .chronika-ui) .cb-account-choice {
  background-color: var(--lg140-control) !important;
  background-image: var(--lg140-reflection) !important;
  color: var(--lg140-ink) !important;
  border-color: var(--lg140-edge);
  box-shadow: inset 0 1px 0 var(--lg140-rim);
}
html :is(.public-site, .chronika-ui) .chronika-learning .cb-switch-five .cb-radio:checked + .cb-choice,
html :is(.public-site, .chronika-ui) .cb-account-radio:checked + .cb-account-choice {
  background-color: var(--lg140-selected) !important;
  color: var(--lg140-selected-ink) !important;
  border-color: var(--lg140-selected-edge);
  box-shadow: inset 0 -2px 0 var(--lg140-selected-edge);
}

@media (hover: hover) {
  html body:is(.public-site, [data-analytics-context])
    :is(button, .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [role="tab"], .ch-filter, .ch-period-button, .cl-period, .cb-choice, .nav-link):where(:not([data-variant="link"]):not(.text-link):not(.ch-text-link):not(.analytics-settings)):hover:not(:disabled):not([aria-disabled="true"]) {
    box-shadow: inset 0 1px 0 var(--lg140-rim);
  }
  html body:is(.public-site, [data-analytics-context])
    :is(.btn-primary, .cl-button:not(.cl-button-secondary), .h130-primary, .cc104-primary, [data-slot="button"][data-variant="default"]):hover:not(:disabled):not([aria-disabled="true"]) {
    --lg140-surface: var(--lg140-action-hover);
    box-shadow: inset 0 1px 0 var(--lg140-rim), var(--lg140-hover-shadow);
  }
}

html body:is(.public-site, [data-analytics-context])
  :is(button, .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [data-slot="button"], [role="tab"], .ch-filter, .ch-period-button, .cl-period, .nav-link):where(:not([data-variant="link"]):not(.text-link):not(.ch-text-link):not(.analytics-settings)):active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 1px 0 var(--lg140-rim), var(--lg140-press-shadow);
}
html body:is(.public-site, [data-analytics-context])
  :is(button, .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [data-slot="button"], [role="tab"], .ch-filter, .ch-period-button, .cl-period, .nav-link):where(:not([data-variant="link"]):not(.text-link):not(.ch-text-link):not(.analytics-settings)):focus-visible {
  outline: 3px solid var(--theme-focus, #2455d6);
  outline-offset: 3px;
}
html body:is(.public-site, [data-analytics-context])
  :is(button, .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, [data-slot="button"]):is(:disabled, [aria-disabled="true"]) {
  opacity: .56;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 var(--lg140-rim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body:is(.public-site, [data-analytics-context])
  :is(button, .btn, .cl-button, [data-slot="button"]):is([aria-busy="true"], [data-loading="true"], .is-loading) {
  cursor: progress;
  box-shadow: inset 0 1px 0 var(--lg140-rim), var(--lg140-press-shadow);
}

/* Larger translucent chrome makes the same material legible while scrolling. */
html body :is(.public-header, .topbar[data-floating-surface], .public-nav-more-content) {
  background-image: radial-gradient(ellipse at 8% 0%, #ffffff38, #ffffff00 70%),
    linear-gradient(180deg, #ffffff12, #ffffff00 62%) !important;
  box-shadow: inset 0 1px 0 var(--lg140-rim), inset 0 -1px 0 var(--lg140-lower-rim), 0 16px 38px -24px #15386e70;
}
@supports (backdrop-filter: blur(12px)) {
  html body :is(.public-header, .topbar[data-floating-surface], .public-nav-more-content) {
    -webkit-backdrop-filter: blur(26px) saturate(155%) !important;
    backdrop-filter: blur(26px) saturate(155%) !important;
  }
}
@supports not (backdrop-filter: blur(8px)) {
  :root, html[data-theme="dark"] { --lg140-control: var(--lg140-control-opaque); --lg140-selected: var(--lg140-selected-opaque); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, html[data-theme="dark"] { --lg140-control: var(--lg140-control-opaque); --lg140-selected: var(--lg140-selected-opaque); }
  html body:is(.public-site, [data-analytics-context])
    :is(button, input[type="submit"], input[type="button"], input[type="reset"], .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [data-slot="button"], [role="tab"], .ch-filter, .ch-period-button, .cl-period, .cb-choice, .cb-account-choice, .nav-link),
  html body :is(.public-header, .topbar[data-floating-surface], .public-nav-more-content) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body:is(.public-site, [data-analytics-context])
    :is(button, input[type="submit"], input[type="button"], input[type="reset"], .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [data-slot="button"], [role="tab"], .ch-filter, .ch-period-button, .cl-period, .cb-choice, .cb-account-choice, .nav-link) {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  html body:is(.public-site, [data-analytics-context])
    :is(button, input[type="submit"], input[type="button"], input[type="reset"], .btn, .cl-button, .h130-primary, .h130-secondary, .cc104-primary, .icon-button, .public-login, .account, [data-slot="button"], [role="tab"], .ch-filter, .ch-period-button, .cl-period, .cb-choice, .cb-account-choice, .nav-link) {
    background: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    forced-color-adjust: auto;
  }
}

/* Legacy highlighted entry actions declare background with a high-specificity
   shorthand; restore only the shared reflection after that declaration. */
html .chronika-ui .cl-home-surface .ch-guest-check > a.ch-button {
  background-image: var(--lg140-reflection) !important;
}
html body:is(.public-site, [data-analytics-context]) :is(.public-nav-toggle, .website-nav-toggle, .public-login, .account) {
  border-radius: 999px;
}
html body:is(.public-site, [data-analytics-context]) :is(.btn-primary, .cl-button:not(.cl-button-secondary), .h130-primary, .cc104-primary, [data-slot="button"][data-variant="default"]) > svg {
  color: inherit;
}

/* V141 — depth belongs to the main action and translucent navigation shell.
   Text navigation and secondary controls keep a lighter, stable hierarchy. */
html body:is(.public-site, [data-analytics-context]) .desktop-nav .nav-link {
  background-image: none !important;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body:is(.public-site, [data-analytics-context]) .desktop-nav .nav-link:not(.active):not([aria-current="page"]) {
  background-color: transparent !important;
}
html body:is(.public-site, [data-analytics-context]) .analytics-consent .btn {
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}