/* GL01 / GL16–26. Presentation layers do not change text, targets or flow geometry. */
:root {--gi-interactions-css-ready:1}
html[data-okg-design] :is(.select-menu,.public-select-menu,.search-results-popover,.info-popover,.site-info-popover,.calendar-occasion-preview)[data-okg-material],
html[data-okg-design] :is(.select-menu,.public-select-menu,.search-results-popover,.info-popover,.site-info-popover,.calendar-occasion-preview) {
  background:rgb(246 249 248 / .96);background-image:none;color:var(--okg-text,#22333c);
  border:1px solid var(--aeria-border,#738993);box-shadow:var(--aeria-highlight),var(--aeria-shadow);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
}
html[data-okg-reduced-transparency="true"][data-okg-design] :is(.select-menu,.public-select-menu,.search-results-popover,.info-popover,.site-info-popover,.calendar-occasion-preview),
html[data-theme="contrast"][data-okg-design] :is(.select-menu,.public-select-menu,.search-results-popover,.info-popover,.site-info-popover,.calendar-occasion-preview) {
  background:var(--okg-surface,#f6f9f8);backdrop-filter:none;-webkit-backdrop-filter:none
}
.info-popover[data-placement="top"]::before {top:auto;bottom:-6px;border:0;border-right:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
:is(.select-trigger,.public-select-trigger)::after {transition:transform 160ms ease}
:is(.select-trigger,.public-select-trigger)[aria-expanded="true"]::after {transform:translateY(-25%) rotate(225deg)}
html[data-okg-design] :is(.select-option,.public-select-option):not(:disabled):is(:hover,:focus-visible) {background:#dce8e4;color:#22333c}
html[data-okg-design] :is(.select-option,.public-select-option)[aria-selected="true"] {background:#eae6f0;color:#382065;box-shadow:inset 3px 0 0 #543099}
html[data-okg-design] :is(.select-option,.public-select-option):focus-visible {outline:2px solid var(--okg-focus,#543099);outline-offset:-3px}
html[data-okg-design] :is(.select-option,.public-select-option):disabled {opacity:.5;cursor:not-allowed}
.audience-tasks>a {transition:background-color 160ms,border-color 160ms;position:relative}
html[data-okg-design] .audience-tasks>a:is(:hover,:focus-visible) {background:linear-gradient(110deg,#dfe9e2b8,#d2e1e9a8);box-shadow:inset 0 1px 0 #ffffffe0}
.audience-benefit {min-block-size:210px}
.audience-preview[data-glass-preview] {display:flex;gap:8px;align-items:center}
.audience-preview[data-glass-preview]>svg {width:30px;height:30px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5}
.gi-tabs {position:relative;isolation:isolate}
.gi-active-marker {position:absolute;pointer-events:none;z-index:0;left:0;top:0;border:1px solid #91abae;
  border-radius:12px;background:linear-gradient(130deg,#f9fcfbeb,#dce9e5e6);box-shadow:inset 0 1px 0 #fff;
  transition:transform 200ms cubic-bezier(.22,1,.36,1),width 200ms,height 200ms,opacity 160ms}
.gi-active-marker[data-cross-row="true"] {transition:opacity 160ms}
.gi-tabs>:not(.gi-active-marker) {position:relative;z-index:1}
html[data-okg-design] .gi-tabs>:is(.active,[aria-selected="true"],[aria-current="page"]) {background:transparent;box-shadow:none}
html[data-okg-design] .gi-card {transition:border-color 180ms,box-shadow 180ms}
html[data-okg-design] .gi-card:is(:hover,:focus-within) {border-color:#86a9aa;box-shadow:inset 0 1px 0 #fff,0 8px 20px -16px #26454b80}
html[data-okg-design] a.gi-card {transition:transform 180ms,border-color 180ms,box-shadow 180ms}
@media(hover:hover) and (pointer:fine) {a.gi-card:hover {transform:translateY(-2px)}}
.gi-primary {position:relative;isolation:isolate;overflow:hidden}
.gi-primary::before {content:"";position:absolute;pointer-events:none;inset:-90% -45%;z-index:-1;
  background:linear-gradient(105deg,transparent 40%,#ffffff35 50%,transparent 60%);transform:translateX(-85%)}
.gi-primary:not(:disabled):not([aria-busy="true"]):is(:hover,:focus-visible)::before {animation:gi-shine 340ms cubic-bezier(.22,1,.36,1) both}
.gi-primary:not(:disabled):active {box-shadow:inset 0 2px 5px #0003;transition:box-shadow 120ms}
@keyframes gi-shine {to{transform:translateX(85%)}}
html[data-okg-design] #authForm :is(input,textarea):focus-visible {outline:3px solid var(--okg-focus,#543099);outline-offset:2px;box-shadow:inset 0 0 0 1px #fff,0 0 0 1px #91abae}
html[data-okg-design] #authForm :is(input,textarea):is([aria-invalid="true"],.invalid) {border-color:var(--okg-danger,#a12a36)}
html[data-okg-design] #authForm input:autofill {border-color:var(--okg-border-strong);box-shadow:inset 0 0 0 1px var(--okg-border-strong)}
.topic-step-number {transition:background-color 180ms,box-shadow 180ms;position:relative}
.topic-step[open] .topic-step-number {background:#dce8e4;box-shadow:inset 0 1px 0 #fff;color:#22333c}
.topic-step[open] .topic-step-number::after {content:"";position:absolute;left:5px;right:5px;bottom:0;height:2px;background:var(--okg-accent,#543099);transform-origin:left;animation:gi-step-line 500ms ease-out both}
@keyframes gi-step-line {from{transform:scaleX(0)}to{transform:scaleX(1)}}
.okg-topic-scene {position:relative}
.gi-topic-art {position:absolute;pointer-events:none;right:8px;top:8px;width:clamp(60px,18%,100px);height:auto;z-index:1;filter:drop-shadow(0 5px 5px #22333c20)}
.gi-topic-art .gi-topic-light {animation:gi-topic-light 24s ease-in-out infinite;transform-origin:center}
@keyframes gi-topic-light {0%,100%{opacity:.4;transform:translateX(-3px)}50%{opacity:.85;transform:translateX(3px)}}
html[data-gm-paused="true"] .gi-topic-art .gi-topic-light {animation-play-state:paused}
#calendarGrid .day[data-glass-selected="true"] {background:#dce8e4;box-shadow:inset 0 0 0 2px #61898d}
#calendarGrid .day[aria-current="date"] .daynum {text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
#calendarGrid .day:is(:hover,:focus-visible),#calendarSideList .calendar-side-row:is(:hover,:focus-visible) {outline:2px solid #86a9aa;outline-offset:-2px}
#calendarGrid .day:focus-visible,#calendarSideList .calendar-side-row:focus-visible {outline:3px solid var(--okg-focus,#543099);outline-offset:2px}
@media(max-width:480px) {.gi-topic-art{width:60px;right:6px;top:6px}.audience-benefit{min-block-size:0}}
html[data-okg-reduced-motion="true"] :is(.gi-active-marker,.gi-card,.audience-tasks>a,.topic-step-number,.select-trigger,.public-select-trigger),
html[data-okg-reduced-motion="true"] :is(.gi-primary,.topic-step-number)::before,
html[data-okg-reduced-motion="true"] .topic-step-number::after {transition:none!important;animation:none!important}
html[data-okg-reduced-motion="true"] .gi-topic-art .gi-topic-light {animation:none}
html[data-okg-reduced-motion="true"] a.gi-card:hover {transform:none}
@media(prefers-reduced-motion:reduce) {
  :is(.gi-active-marker,.gi-card,.audience-tasks>a,.topic-step-number) {transition:none!important}
  :is(.gi-primary,.topic-step-number)::before,.topic-step-number::after,.gi-topic-art .gi-topic-light {animation:none!important}
  a.gi-card:hover {transform:none}
}
@media(prefers-reduced-transparency:reduce) {
  html[data-okg-design] :is(.select-menu,.public-select-menu,.search-results-popover,.info-popover,.site-info-popover,.calendar-occasion-preview) {background:var(--okg-surface,#f6f9f8);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(forced-colors:active) {
  .gi-topic-art,.gi-primary::before {display:none}
  .gi-active-marker {background:Highlight;border-color:Highlight}
  html[data-okg-design] .gi-tabs>:is(.active,[aria-selected="true"],[aria-current="page"]) {color:HighlightText}
  html[data-okg-design] :is(.select-menu,.public-select-menu,.search-results-popover,.info-popover,.site-info-popover,.calendar-occasion-preview) {background:Canvas;color:CanvasText;border-color:CanvasText;backdrop-filter:none}
}

/* Foreground selected-control fills must not conceal the shared moving marker. */
html[data-okg-design] .gi-tabs>:is(button,a)[aria-selected="true"][data-okg-material],
html[data-okg-design] .gi-tabs>:is(button,a)[aria-current="page"][data-okg-material] {background:transparent;background-image:none;box-shadow:none}
.gi-topic-art[data-gi-visible="false"] .gi-topic-light,
html[data-gi-hidden="true"] .gi-topic-art .gi-topic-light {animation-play-state:paused}

/* GL17: link the expanded step's existing number to its own small illustration. */
.topic-step-content {position:relative}
.gi-step-illustration {position:absolute;left:24px;top:0;width:20px;height:20px;pointer-events:none;color:#456b70}
.gi-step-illustration svg {display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.gi-step-illustration::before {content:"";position:absolute;left:9px;bottom:100%;width:2px;height:16px;background:#779c9e;transform-origin:top}
.topic-step[open] .gi-step-illustration::before {animation:gi-step-link 500ms ease-out both}
@keyframes gi-step-link {from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-width:700px){.gi-step-illustration{display:none}}
html[data-okg-reduced-motion="true"] .gi-step-illustration::before {animation:none}
@media(prefers-reduced-motion:reduce){.gi-step-illustration::before{animation:none!important}}

html[data-okg-reduced-motion="true"] :is(.select-trigger,.public-select-trigger)::after {transition:none}
@media(prefers-reduced-motion:reduce){:is(.select-trigger,.public-select-trigger)::after{transition:none}}

.gi-active-marker[data-no-motion="true"] {transition:none}