/* Shared primitives, semantic roles and action states for the browser storefront. */
:is(body.public-site,html[data-client-surface="website"] body){
  --ch-paper:#f3f6fa; --ch-ink:#18283e; --ch-muted:#3e536c; --ch-surface:#fff;
  --ch-line:#b5c7dc; --ch-subtle:#e7effa; --ch-link:#224fac;
  --ch-blue-700:#1947bd; --ch-blue-650:#2852bd; --ch-blue-600:#2458d7;
  --ch-blue-ink:#fff; --ch-rose-300:#f6a2ca; --ch-rose-200:#f9b7d7;
  --ch-atlas-light:#c9ddf5; --ch-atlas-edge:#dbe8f9; --ch-atlas-land:#d1e1f2;
  --ch-focus:#2155c3; --ch-feedback:150ms; --ch-focus-time:180ms; --ch-state-time:230ms; --ch-sheet-time:300ms; --ch-optic-time:420ms; --ch-ease:cubic-bezier(.16,1,.3,1);
  --ch-action-bg:var(--ch-blue-600); --ch-action-hover:var(--ch-blue-700);
  --ch-preview-bg:var(--ch-blue-650); --ch-preview-hover:var(--ch-blue-700);
  --ch-bundle-bg:var(--ch-rose-300); --ch-bundle-hover:var(--ch-rose-200); --ch-bundle-ink:#331d2d;
  --ch-search-glass:#153da4; --ch-search-glass-hover:#123587;
  --ch-sample-glass:#8aaff7; --ch-sample-glass-hover:#7fa6ee; --ch-sample-ink:#183872;
  --ch-bundle-glass:#f28ebe; --ch-bundle-glass-hover:#f6a5cc; --ch-bundle-reflection:rgb(255 238 247 / .65);
  --ch-glass-rim:rgb(255 255 255 / .87); --ch-glass-rim-blue:rgb(192 225 255 / .50);
  --ch-room-key:#fbfdff; --ch-room-edge:#d5e5f9; --ch-room-return:#eef4fc;
  --ch-scene-light:rgb(153 190 237 / .31); --ch-scene-reflection:rgb(255 255 255 / .68);
}
html[data-theme="dark"] :is(body.public-site,html[data-client-surface="website"] body){
  --ch-paper:#0e1624; --ch-ink:#edf4ff; --ch-muted:#bbcee6; --ch-surface:#17283e;
  --ch-line:#46617e; --ch-subtle:#233b56; --ch-link:#9fc9ff;
  --ch-blue-700:#3b69e1; --ch-blue-650:#2b52ad; --ch-blue-600:#2f61db;
  --ch-bundle-bg:#78d7ff; --ch-bundle-hover:#a7e7ff; --ch-bundle-ink:#092238;
  --ch-atlas-light:#26496d; --ch-atlas-edge:#152b47; --ch-atlas-land:#244361;
  --ch-search-glass:#2962dc; --ch-search-glass-hover:#316be4;
  --ch-sample-glass:#658bc9; --ch-sample-glass-hover:#6a92d5; --ch-sample-ink:#f0f6ff;
  --ch-bundle-glass:var(--ch-bundle-bg); --ch-bundle-glass-hover:var(--ch-bundle-hover); --ch-bundle-reflection:rgb(221 246 255 / .72);
  --ch-glass-rim:rgb(247 251 255 / .76); --ch-glass-rim-blue:rgb(160 208 255 / .44);
  --ch-room-key:#192f4b; --ch-room-edge:#223c5b; --ch-room-return:#101e31;
  --ch-scene-light:rgb(63 113 181 / .33); --ch-scene-reflection:rgb(97 148 208 / .13);
  --ch-focus:#afd1ff;
}
/* One room light across browser routes. Content and dialogs keep their own solid reading surfaces. */
:is(body.public-site,html[data-client-surface="website"] body) {
  background-image:radial-gradient(ellipse 108% 1080px at 100% -160px,var(--ch-room-edge),color-mix(in srgb,var(--ch-room-key) 64%,transparent) 49%,transparent 100%),linear-gradient(166deg,var(--ch-paper) 22%,var(--ch-room-return) 57%,var(--ch-paper) 100%)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-blend-mode:normal;
}
.public-site .chronika-learning,
html[data-client-surface="website"] :is(.app-shell,.content-shell,#main.chronika-ui,.chronika-learning){background-color:transparent!important}
/* The same top-right key follows three content scenes. The wash fades inside each scene. */
:is(.public-site,html[data-client-surface="website"] body) :is(#materials-demo,#program,#formats,.public-catalog-page,.cl-ad-landing){position:relative;isolation:isolate}
:is(.public-site,html[data-client-surface="website"] body) :is(#materials-demo,#program,#formats,.public-catalog-page,.cl-ad-landing)::before{
  content:"";position:absolute;inset:-12px 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 64% at 81% 10%,var(--ch-scene-light),transparent 86%),
    radial-gradient(ellipse 76% 62% at 23% 67%,var(--ch-scene-reflection),transparent 80%);
  mask-image:linear-gradient(transparent,#000 9%,#000 73%,transparent);
}
@media (min-width:850px) and (forced-colors:none){
  .public-site .as141-process>h2{
    min-block-size:68px;display:flex;align-items:center;padding-inline-end:80px;
    background:url('/assets/chronika-brand/chronika-archive-seal-poster.webp') right 6px center / 66px no-repeat;
  }
}
@media (forced-colors:active){
  :is(body.public-site,html[data-client-surface="website"] body){background-image:none!important}
  :is(.public-site,html[data-client-surface="website"] body) :is(#materials-demo,#program,#formats,.public-catalog-page,.cl-ad-landing)::before{display:none}
}

/* One composition for the featured programme offer on Home and both price pages. */
html body :is(#formats,.cc104,.ch-program-offers) .chronika-v3-bundle {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(124px,.75fr) minmax(208px,.9fr)!important;
  grid-template-areas:"copy book purchase";
  align-items:center;
  gap:12px clamp(12px,2.2vw,32px);
  padding:clamp(18px,3.4vw,40px);
  border:1px solid var(--ch-line,var(--theme-line,#b5c7dc));
  border-radius:var(--ch-panel-radius,18px);
  background:radial-gradient(ellipse at 52% 0,var(--ch-scene-light,transparent),transparent 74%),
    var(--ch-surface,var(--theme-surface,#fff));
  color:var(--ch-ink,var(--theme-text,#192332));
}
html body :is(#formats,.cc104,.ch-program-offers) .chronika-v3-bundle>.v3-bundle-copy {
  grid-area:copy!important; display:block; min-width:0;
}
.chronika-v3-bundle>.v3-bundle-copy::before { content:none!important; }
html body .chronika-v3-bundle>.v3-bundle-art {
  grid-area:book; justify-self:center; align-self:center; width:min(100%,230px);
}
#formats .chronika-v3-bundle>.v3-bundle-art {
  background:radial-gradient(ellipse at 52% 49%,rgb(186 219 255 / .36),transparent 68%);
}
html body .chronika-v3-bundle>.v3-bundle-art>img {
  display:block; width:100%!important; height:auto!important; margin:0; aspect-ratio:1; object-fit:contain;
  filter:drop-shadow(0 12px 14px rgb(12 32 76 / .17));
}
html body :is(#formats,.cc104,.ch-program-offers) .chronika-v3-bundle>.v3-bundle-purchase {
  grid-area:purchase!important; display:grid; gap:8px; align-content:center; min-width:0;
}
.chronika-v3-bundle .v3-bundle-copy :is(h2,h3) { margin:0 0 10px; font-size:clamp(23px,3vw,36px); line-height:1.12; }
.chronika-v3-bundle .v3-bundle-copy .ch-bundle-includes {
  display:grid; gap:6px; padding:0; margin:12px 0 8px; list-style:none; font-size:16px;
}
.chronika-v3-bundle .v3-bundle-copy .ch-bundle-includes li { display:flex; align-items:center; gap:10px; }
.chronika-v3-bundle .v3-bundle-copy .ch-bundle-includes svg {
  width:32px; height:32px; flex:0 0 32px; padding:6px; border-radius:9px;
  background:color-mix(in srgb,currentColor 12%,transparent);
  color:var(--theme-link,var(--ch-link,#2455d6));
}
.chronika-v3-bundle .v3-bundle-boundary { margin:8px 0 0; color:var(--ch-muted,var(--theme-muted,#556577)); font-size:15px; }
html body :is(#formats,.cc104,.ch-program-offers) .chronika-v3-bundle .v3-bundle-purchase :is(.price-current,.ch-price-current,.cc139-ready-price) {
  font-size:clamp(36px,4.2vw,61px); line-height:1; letter-spacing:-.035em; white-space:nowrap;
}
.chronika-v3-bundle .v3-bundle-purchase>.ch-package-payment,
.chronika-v3-bundle .v3-bundle-purchase>span { margin:0; font-size:15px; }
.chronika-v3-bundle .v3-bundle-saving {
  display:grid; gap:3px; margin:4px 0; padding:9px 12px;
  border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius:12px; background:color-mix(in srgb,currentColor 7%,transparent);
  font-size:15px; line-height:1.4;
}
.chronika-v3-bundle .v3-bundle-saving strong { font-weight:730; }
.chronika-v3-bundle .v3-bundle-saving span { color:var(--theme-muted,var(--ch-muted)); }
.chronika-v3-bundle .v3-bundle-purchase :is(.cl-button,.ch-button,.cc104-primary) {
  width:100%; min-width:0; min-height:48px; margin-top:4px; white-space:normal; text-align:center;
}
.chronika-v3-bundle :is(.v3-bundle-comparison,.v3-bundle-sample) {
  grid-column:1/-1; min-width:0; border-top:1px solid var(--theme-line,var(--ch-line,#b5c7dc)); padding-top:4px;
}
.chronika-v3-bundle :is(.v3-bundle-comparison,.v3-bundle-sample)>summary {
  width:fit-content; min-height:44px; padding:10px 0; cursor:pointer; font-weight:650;
}
.chronika-v3-bundle .v3-bundle-sample .ch-bundle-materials { max-width:480px; margin:8px auto; }
html body .ch-program-offers:has(.chronika-v3-bundle) { grid-template-columns:minmax(0,1fr); }
/* A long native select label must not enlarge the scrollable page in WebKit. */
#ch-pricing-topic { overflow:hidden; text-overflow:ellipsis; }

/* Static WebP accents for the approved content and account states. */
.ch-3d-pair {
  display:flex;
  align-items:center;
  gap:clamp(8px,2vw,18px);
  min-inline-size:0;
}
.ch-3d-pair > :not(.ch-3d-illustration) { min-inline-size:0; }
.ch-3d-illustration {
  display:block;
  inline-size:var(--ch-3d-size,56px);
  max-inline-size:28%;
  block-size:auto;
  aspect-ratio:1;
  object-fit:contain;
  flex:0 0 auto;
  pointer-events:none;
}
.ch-3d-illustration--camera { --ch-3d-size:clamp(64px,9vw,88px); }
.ch-3d-illustration--medal { --ch-3d-size:64px; max-inline-size:none; }
.ch-3d-illustration--mic { --ch-3d-size:48px; }
.ch-3d-illustration--bell { --ch-3d-size:44px; }
.ch-3d-illustration--binoculars { --ch-3d-size:40px; }
.ch-3d-illustration--watch { --ch-3d-size:32px; max-inline-size:none; }
.cv101-chapters-heading > .ch-3d-pair { gap:6px; }
#practice-content .bank-filter-summary--illustrated {
  position:static;
  inline-size:auto;
  block-size:auto;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
  margin:8px 0;
}

.pf115-purchase.v3-bundle-dialog .modal-cover {
  display:grid; grid-template-columns:minmax(0,1fr) clamp(76px,24vw,144px); align-items:center; gap:14px;
}
.v3-bundle-dialog .modal-cover h2 { margin:0; }
.v3-bundle-dialog .modal-cover p { margin:6px 0 0; }
.v3-bundle-dialog .modal-cover img { display:block; width:100%; height:auto; }
html body .v3-bundle-dialog .purchase-price .price-current {
  font-size:clamp(34px,5vw,50px); line-height:1.05; letter-spacing:-.025em;
}

@media(max-width:720px) {
  html body :is(#formats,.cc104,.ch-program-offers) .chronika-v3-bundle {
    grid-template-columns:minmax(0,1fr) clamp(82px,26vw,168px)!important;
    grid-template-areas:"copy book" "purchase purchase";
  }
}
:is(.public-site,html[data-client-surface="website"] body) :is(.cl-start-check-route .cl-button,.cp145-start-check a.ch-button,#program .ch-atlas-all) {
  border-radius:var(--preview-radius-capsule,999px);
  background:var(--ch-action-bg)!important; color:var(--ch-blue-ink)!important;
  border-color:transparent!important;
}
:is(.public-site,html[data-client-surface="website"] body) :is(.cl-start-check-route .cl-button,.cp145-start-check a.ch-button,#program .ch-atlas-all):hover {
  background:var(--ch-action-hover)!important;
}
:is(.public-site,html[data-client-surface="website"] body) :is([data-history-hero] a,.cl-start-check-route .cl-button,.cp145-start-check a.ch-button,#program .ch-atlas-all):focus-visible {
  outline:3px solid var(--ch-focus);outline-offset:3px;
}
:is(.public-site,html[data-client-surface="website"] body) .chronika-learning .cl-options label:has(input:checked){
  background:var(--ch-subtle)!important;border-color:var(--ch-link);color:var(--ch-ink);
}
:is(.public-site,html[data-client-surface="website"] body) .chronika-learning .cl-options label:has(input:checked)>span{color:var(--ch-ink)}
:is(.public-site,html[data-client-surface="website"] body) .chronika-learning .cl-options label:has(input:checked) .cl-choice-number{color:var(--ch-muted)}
/* Interaction motion follows the state owner. Text remains fully opaque. */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion-static]) :is(.public-site,html[data-client-surface="website"] body) :is(.cl-ad-actions .btn,.ht144-topic,.cl-embedded-timeline button,#program .ch-atlas-periods button,.pf115-order-actions .btn){
    transition:scale var(--ch-feedback) var(--ch-ease),background-color var(--ch-focus-time) var(--ch-ease),border-color var(--ch-focus-time) var(--ch-ease);
  }
  html:not([data-motion-static]) :is(.public-site,html[data-client-surface="website"] body) :is(.cl-ad-actions .btn,.ht144-topic,.cl-embedded-timeline button,#program .ch-atlas-periods button,.pf115-order-actions .btn):not([disabled],[aria-disabled="true"]):active{scale:.975}
  html:not([data-motion-static]) :is(.public-site,html[data-client-surface="website"] body) :is([data-history-hero] a,.cl-ad-actions .btn,.ht144 summary,.cl-embedded-timeline button,#program .ch-atlas-periods button,.pf115-order-actions .btn):focus-visible{
    outline:3px solid var(--ch-focus);outline-offset:3px;animation:ch-focus-settle var(--ch-focus-time) var(--ch-ease) both;
  }
  html:not([data-motion-static]) :is(.public-site,html[data-client-surface="website"] body) .ht144[open]>.ht144-panel{animation:ch-state-enter var(--ch-state-time) var(--ch-ease) both}
  html[data-client-surface="website"]:not([data-motion-static]) #modal-backdrop:not([hidden])>.modal{animation:ch-sheet-enter var(--ch-sheet-time) var(--ch-ease) both}
  html[data-client-surface="website"]:not([data-motion-static]) .pf115-order[data-order-state="paid"] .pf115-order-mark{animation:ch-state-confirm var(--ch-sheet-time) var(--ch-ease) both}
}
@keyframes ch-focus-settle {from{outline-offset:6px}to{outline-offset:3px}}
@keyframes ch-state-enter {from{translate:0 5px}to{translate:0 0}}
@keyframes ch-sheet-enter {from{translate:0 12px;scale:.992}to{translate:0 0;scale:1}}
@keyframes ch-state-confirm {from{scale:.86}to{scale:1}}
@media(forced-colors:active){
  :is(.public-site,html[data-client-surface="website"] body) :is(.cl-start-check-route .cl-button,.cp145-start-check a.ch-button,#program .ch-atlas-all) {
    border-color:ButtonText!important;background:ButtonFace!important;color:ButtonText!important;
  }
}