/* ============================================================================
   🧙 THE SAGE HUB (website) — the mobile app's AskSageHubScreen, SageLoadingScreen (the waiting room) and the two
   answer screens, as full-screen painted pages: dark glass and gold over a drifting masterpiece, like the World Clock
   and the Hall of Wisdom. Built on the painted-canvas shell of world_clock.css (.wc-root, .wc-canvas, .wc-header,
   .wc-icon-btn, .wc-bg-toggle, .wc-plaque …); this file adds the pages themselves. The compact choice sheet and the
   floating pill stay in ask_the_sage.css. Script: static/js/ask_the_sage.js (page root: #awgSageHub).
   Every size is written as calc(N * var(--u)): --u is 1 up to a laptop and grows on big screens.
   ============================================================================ */

.wc-root.sh-root {
    --u: 1;
    --sh-header: calc(env(safe-area-inset-top, 0px) + 56px * var(--u));
    --sh-column: calc(760px * var(--u));
    --sh-column-answer: calc(860px * var(--u));
    --sh-side: calc(16px * var(--u));
    --sh-glass: rgba(8, 10, 7, 0.74);
    --sh-glass-deep: rgba(6, 8, 6, 0.86);
    z-index: 10050; /* over the painted overlays (9000) and the site's modals (10000): the Sage opens from the reader too */
    -webkit-user-select: text;
    user-select: text;
    font-variant-numeric: lining-nums; /* the web serif's figures are old-style by default: "3-500" would read "3-5oo" */
}

@media (min-width: 640px) {
    .wc-root.sh-root { --sh-side: calc(24px * var(--u)); }
}

@media (min-width: 1800px) and (min-height: 1000px) {
    .wc-root.sh-root { --u: 1.18; }
}

@media (min-width: 2400px) and (min-height: 1300px) {
    .wc-root.sh-root { --u: 1.45; }
}

@media (min-width: 3400px) and (min-height: 1900px) {
    .wc-root.sh-root { --u: 1.95; }
}

.wc-root.sh-root:not(.is-open) {
    pointer-events: none;
}

/* the answer's words can be selected and copied; the controls cannot */
.sh-root button,
.sh-header,
.sh-segment {
    -webkit-user-select: none;
    user-select: none;
}

/* a little more of the painting shows through than behind the clock: the cards are glass, the gaps are not */
.sh-root .wc-veil-dark {
    background: linear-gradient(to bottom, rgba(3, 6, 4, 0.82) 0%, rgba(3, 6, 4, 0.46) 24%, rgba(3, 6, 4, 0.5) 62%, rgba(3, 6, 4, 0.92) 100%);
}

/* classic look: the screens' original dark gradients (the waiting room of the Sage keeps its blue) */
.wc-root.sh-root.is-classic {
    background: linear-gradient(180deg, #0a0a0a 0%, #16213e 50%, #0f0f1e 100%);
}

.wc-root.sh-root.is-classic[data-view="loading"][data-kind="sage"] {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* in the waiting room the classic look keeps its golden dust */
.wc-root.sh-root.is-classic[data-view="loading"] .wc-canvas {
    display: block;
}

.wc-root.sh-root.is-classic[data-view="loading"] .wc-paintings,
.wc-root.sh-root.is-classic[data-view="loading"] .wc-veil {
    display: none;
}

/* a calm veil over the waiting room's painting (the app's own): light at the top so the masterpiece shows, deepest behind the words */
.sh-veil-wait {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(3, 6, 4, 0.08) 0%, rgba(3, 6, 4, 0.5) 36%, rgba(3, 6, 4, 0.56) 72%, rgba(3, 6, 4, 0.74) 100%);
    transition: opacity 0.7s ease;
}

.sh-root[data-view="loading"] .sh-veil-wait {
    opacity: 1;
}

.sh-root.is-classic .sh-veil-wait {
    display: none;
}

/* ---------- layout: the scrolling page, the pinned actions, the floating header ---------- */
.sh-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.sh-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 210, 122, 0.4) transparent;
    scrollbar-gutter: stable both-edges; /* the column does not shift when a tab makes the page long enough to scroll */
}

.sh-scroll::-webkit-scrollbar {
    width: 8px;
}

/* the page takes the focus when a view opens, so the arrow and page keys scroll it: no ring around the whole screen */
.wc-root .sh-scroll:focus,
.wc-root .sh-scroll:focus-visible {
    outline: none;
}

.sh-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255, 210, 122, 0.35);
}

.sh-content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--sh-header) + 8px * var(--u)) max(var(--sh-side), env(safe-area-inset-right, 0px))
        calc(32px * var(--u) + env(safe-area-inset-bottom, 0px)) max(var(--sh-side), env(safe-area-inset-left, 0px));
}

.sh-column {
    flex: none;
    width: min(var(--sh-column), 100%);
}

.sh-column--answer {
    width: min(var(--sh-column-answer), 100%);
}

/* the waiting room, the errors and the login gate sit in the middle of the page (auto margins: a tall one still scrolls) */
.sh-wait,
.sh-column--center {
    margin-block: auto;
}

/* the header floats over the page; the page fades into the dark as it slides beneath the glass buttons */
.sh-header-shade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: calc(var(--sh-header) + 34px * var(--u));
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(3, 6, 4, 0.97) 0, rgba(3, 6, 4, 0.95) var(--sh-header), rgba(3, 6, 4, 0) 100%);
}

.wc-root .sh-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: var(--sh-header);
    gap: calc(10px * var(--u));
    padding: calc(env(safe-area-inset-top, 0px) + 6px * var(--u)) max(var(--sh-side), env(safe-area-inset-right, 0px))
        calc(6px * var(--u)) max(var(--sh-side), env(safe-area-inset-left, 0px));
    pointer-events: none;
}

.sh-header > * {
    pointer-events: auto;
}

.sh-root .wc-icon-btn {
    width: calc(44px * var(--u));
    height: calc(44px * var(--u));
}

.sh-root .wc-icon-btn svg {
    width: calc(22px * var(--u));
    height: calc(22px * var(--u));
}

.sh-root .wc-back svg {
    width: calc(24px * var(--u));
    height: calc(24px * var(--u));
}

.sh-root .sh-close {
    color: var(--wc-gold);
}

.sh-root .sh-close svg {
    width: calc(20px * var(--u));
    height: calc(20px * var(--u));
}

.sh-root .wc-toggle-caption {
    right: calc(52px * var(--u));
    font-size: max(calc(10px * var(--u)), 10px);
}

/* the classic header keeps the glass back button (the hub does in the app) */
.wc-root.sh-root.is-classic .wc-back {
    width: calc(44px * var(--u));
    height: calc(44px * var(--u));
    border: 1px solid rgba(255, 210, 122, 0.38);
    background: rgba(10, 10, 7, 0.74);
    color: var(--wc-gold);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.sh-header-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sh-head-kicker,
.sh-head-mode {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--wc-mono);
    text-transform: uppercase;
}

.sh-head-kicker {
    font-weight: 700;
    font-size: max(calc(12px * var(--u)), 11px);
    letter-spacing: calc(3px * var(--u));
    color: var(--wc-gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.sh-head-mode {
    margin-top: calc(3px * var(--u));
    font-size: max(calc(9.5px * var(--u)), 9.5px);
    letter-spacing: calc(1.8px * var(--u));
    color: var(--wc-label);
}

/* a phone: three round buttons leave the title little room, so its second line may wrap */
@media (max-width: 420px) {
    .sh-head-kicker { letter-spacing: 2px; }

    .sh-head-mode {
        white-space: normal;
        line-height: 1.25;
        letter-spacing: 1.2px;
    }
}

/* ---------- title plaque ---------- */
.sh-title-block {
    padding: 0 calc(8px * var(--u));
    margin-bottom: calc(22px * var(--u));
    text-align: center;
}

.sh-title-block--answer {
    padding: 0 calc(6px * var(--u));
    margin-bottom: calc(18px * var(--u));
}

.sh-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(10px * var(--u));
}

.sh-rule {
    flex: none;
    width: calc(46px * var(--u));
    height: 1px;
    background: rgba(255, 215, 0, 0.55);
}

.sh-mark {
    margin: 0 calc(14px * var(--u));
    font-family: var(--wc-serif);
    font-size: calc(15px * var(--u));
    line-height: 1;
    color: var(--wc-gold);
    text-shadow: 0 0 10px rgba(255, 196, 80, 0.6);
}

.sh-title,
.sh-headline {
    font-family: var(--wc-serif);
    font-weight: 400;
    font-size: calc(31px * var(--u));
    line-height: 1.23;
    letter-spacing: 0;
    text-align: center;
    color: var(--wc-cream);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.sh-headline {
    font-size: calc(26px * var(--u));
    line-height: 1.27;
}

.sh-subtitle {
    margin-top: calc(6px * var(--u));
    font-family: var(--wc-mono);
    font-size: max(calc(10px * var(--u)), 10px);
    line-height: 1.5;
    letter-spacing: calc(1.8px * var(--u));
    text-transform: uppercase;
    text-align: center;
    color: var(--wc-label);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.sh-subheadline {
    margin-top: calc(8px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(15.5px * var(--u));
    line-height: 1.42;
    text-align: center;
    color: var(--wc-cream-soft);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
}

/* ---------- glass ---------- */
.sh-card {
    padding: calc(14px * var(--u));
    margin: 0 0 calc(24px * var(--u));
    border-radius: calc(18px * var(--u));
    background: var(--sh-glass);
    border: 1px solid var(--wc-hairline);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}

.sh-section-title {
    display: flex;
    align-items: center;
    margin: calc(2px * var(--u)) 0 calc(12px * var(--u));
}

.sh-section-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: max(calc(11px * var(--u)), 11px);
    line-height: 1.4;
    letter-spacing: calc(2.2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.sh-section-line {
    flex: 1;
    height: 1px;
    margin-left: calc(10px * var(--u));
    background: rgba(255, 215, 0, 0.3);
}

.sh-section + .sh-section {
    margin-top: calc(10px * var(--u));
}

/* ---------- the hub: random teaching ⇄ your question ---------- */
.sh-segment {
    display: flex;
    gap: calc(4px * var(--u));
    padding: calc(4px * var(--u));
    margin-bottom: calc(12px * var(--u));
    border-radius: calc(18px * var(--u));
    background: rgba(6, 8, 6, 0.78);
    border: 1px solid var(--wc-hairline);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}

.sh-tab {
    flex: 1;
    min-width: 0;
    min-height: calc(42px * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(7px * var(--u));
    padding: calc(10px * var(--u)) calc(8px * var(--u));
    border-radius: calc(14px * var(--u));
    border: 1px solid transparent;
    font-family: var(--wc-mono);
    font-size: max(calc(10.5px * var(--u)), 10.5px);
    letter-spacing: calc(1.5px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sh-tab.is-active {
    font-weight: 700;
    color: var(--wc-gold);
    border-color: rgba(255, 215, 0, 0.55);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.24), rgba(255, 170, 40, 0.06)), rgba(34, 27, 7, 0.7);
}

@media (hover: hover) {
    .sh-tab:not(.is-active):hover {
        color: var(--wc-gold-warm);
        background: rgba(255, 215, 0, 0.06);
    }
}

.sh-tab-icon {
    flex: none;
    width: calc(16px * var(--u));
    height: calc(16px * var(--u));
}

.sh-tab-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 380px) {
    .sh-tab {
        gap: 5px;
        padding-inline: 6px;
        letter-spacing: 0.8px;
    }
}

.sh-icon {
    display: block;
    width: 100%;
    height: 100%;
}

.sh-random {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--u));
    border-left: calc(3px * var(--u)) solid var(--wc-gold);
}

.sh-random-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(34px * var(--u));
    height: calc(34px * var(--u));
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--wc-gold);
}

.sh-random-mark .sh-icon {
    width: calc(16px * var(--u));
    height: calc(16px * var(--u));
}

.sh-random-text {
    flex: 1;
    min-width: 0;
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(16px * var(--u));
    line-height: 1.44;
    color: var(--wc-cream);
}

.sh-hint {
    margin-bottom: calc(12px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(15px * var(--u));
    line-height: 1.47;
    color: var(--wc-cream-soft);
}

.sh-frame {
    padding: calc(12px * var(--u)) calc(14px * var(--u)) calc(8px * var(--u));
    border-radius: calc(14px * var(--u));
    background: rgba(3, 5, 3, 0.62);
    border: 1px solid rgba(255, 210, 122, 0.3);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sh-frame:focus-within {
    border-color: rgba(255, 215, 0, 0.7);
    background: rgba(12, 10, 4, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.12);
}

.wc-root .sh-input {
    display: block;
    width: 100%;
    min-height: calc(92px * var(--u));
    max-height: calc(180px * var(--u));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    resize: none;
    overflow-y: auto;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--wc-serif);
    font-size: calc(17px * var(--u));
    line-height: calc(25px * var(--u));
    letter-spacing: 0;
    color: var(--wc-cream);
    caret-color: var(--wc-gold);
}

.sh-input::placeholder {
    color: rgba(243, 233, 210, 0.5);
    opacity: 1;
}

.sh-counter {
    display: block;
    margin-top: calc(6px * var(--u));
    text-align: right;
    font-family: var(--wc-mono);
    font-size: max(calc(10px * var(--u)), 10px);
    letter-spacing: calc(1px * var(--u));
    color: var(--wc-label);
}

.sh-counter.is-over {
    color: #fca5a5;
}

.sh-q-error {
    margin-top: calc(10px * var(--u));
    font-family: var(--wc-serif);
    font-size: calc(14.5px * var(--u));
    line-height: 1.4;
    color: #fca5a5;
}

.sh-q-error:empty {
    display: none;
}

.sh-q-error-title {
    margin-right: calc(4px * var(--u));
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: max(calc(10px * var(--u)), 10px);
    letter-spacing: calc(1.6px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

/* ---------- the four consultations ---------- */
.sh-council-names {
    margin: calc(-4px * var(--u)) 0 calc(12px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(14.5px * var(--u));
    line-height: 1.45;
    color: var(--wc-cream-soft);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
}

.sh-action {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: calc(15px * var(--u)) calc(14px * var(--u));
    margin: 0 0 calc(12px * var(--u));
    border-radius: calc(20px * var(--u));
    overflow: hidden;
    background: var(--sh-glass);
    border: 1px solid var(--wc-hairline);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    text-align: left;
    color: var(--wc-cream);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.sh-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 226, 154, 0.12), rgba(255, 226, 154, 0));
}

.sh-action:active:not(:disabled) {
    transform: scale(0.985);
}

@media (hover: hover) {
    .sh-action:not(:disabled):hover {
        transform: translateY(-2px);
        border-color: rgba(255, 215, 0, 0.7);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 196, 80, 0.14);
    }

    .sh-action:not(:disabled):hover .sh-chevron {
        transform: translateX(3px);
    }
}

.sh-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* a gold-framed medallion; its tint glows inside, so each consultation keeps its own colour */
.sh-medal {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: calc(50px * var(--u));
    height: calc(50px * var(--u));
    margin-right: calc(14px * var(--u));
    border-radius: 50%;
    overflow: hidden;
    background: rgba(10, 10, 7, 0.8);
    border: 1px solid rgba(255, 210, 122, 0.45);
    color: var(--wc-gold-warm);
}

.sh-medal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tint, rgba(255, 215, 0, 0.3));
}

.sh-medal .sh-icon {
    position: relative;
    width: calc(23px * var(--u));
    height: calc(23px * var(--u));
}

.sh-action-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sh-action-title {
    font-family: var(--wc-serif);
    font-size: calc(19px * var(--u));
    line-height: 1.26;
    color: var(--wc-cream);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.sh-action-sub {
    margin-top: calc(4px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(14.5px * var(--u));
    line-height: 1.38;
    color: var(--wc-cream-soft);
}

.sh-chevron {
    flex: none;
    width: calc(20px * var(--u));
    height: calc(20px * var(--u));
    margin-left: calc(8px * var(--u));
    color: var(--wc-gold-warm);
    transition: transform 0.2s ease;
}

/* ---------- guidelines: small caps captions, serif values ---------- */
.sh-guidelines {
    margin: calc(12px * var(--u)) 0 0;
    padding: calc(14px * var(--u)) calc(16px * var(--u)) calc(8px * var(--u));
    border-color: var(--wc-hairline-faint);
}

.sh-guidelines-head {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--u));
    margin-bottom: calc(4px * var(--u));
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: max(calc(11px * var(--u)), 11px);
    line-height: 1.4;
    letter-spacing: calc(2.2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

.sh-guidelines-icon {
    flex: none;
    width: calc(15px * var(--u));
    height: calc(15px * var(--u));
}

.sh-guidelines ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-guideline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: calc(9px * var(--u)) 0;
}

.sh-guideline + .sh-guideline {
    border-top: 1px solid rgba(255, 210, 122, 0.14);
}

.sh-guideline-label {
    margin-bottom: calc(3px * var(--u));
    font-family: var(--wc-mono);
    font-size: max(calc(9.5px * var(--u)), 9.5px);
    letter-spacing: calc(1.6px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.sh-guideline-value {
    font-family: var(--wc-serif);
    font-size: calc(15px * var(--u));
    line-height: 1.4;
    color: var(--wc-cream);
}

.sh-plaque {
    margin-top: calc(18px * var(--u));
}

/* ---------- the waiting room: a gold astrolabe turning around a breathing glow, the lines changing ---------- */
.sh-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(12px * var(--u)) calc(8px * var(--u));
    text-align: center;
}

.sh-astro {
    --emblem: calc(164px * var(--u));
    position: relative;
    flex: none;
    width: var(--emblem);
    height: var(--emblem);
    margin-bottom: calc(4px * var(--u));
}

@media (max-height: 759px) {
    .sh-astro { --emblem: calc(136px * var(--u)); }
}

@media (max-height: 619px) {
    .sh-astro { --emblem: calc(112px * var(--u)); }
}

.sh-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 196, 80, 0.08);
    box-shadow: 0 0 calc(34px * var(--u)) rgba(255, 194, 77, 0.55);
    animation: sh-breathe 5.6s ease-in-out infinite;
}

.sh-glow-mid,
.sh-glow-core {
    position: absolute;
    border-radius: 50%;
}

.sh-glow-mid {
    inset: 13%;
    background: rgba(255, 200, 90, 0.1);
}

.sh-glow-core {
    inset: 25%;
    background: rgba(255, 210, 110, 0.14);
}

.sh-ticks {
    position: absolute;
    inset: 0;
}

.sh-ticks i {
    position: absolute;
    inset: 1%;
    display: flex;
    justify-content: center;
    transform: rotate(var(--a));
}

.sh-ticks i::before {
    content: '';
    width: 1.5px;
    height: calc(6px * var(--u));
    border-radius: 1px;
    background: rgba(255, 217, 138, 0.42);
}

.sh-ticks i.is-major::before {
    width: 2px;
    height: calc(11px * var(--u));
    background: rgba(255, 215, 0, 0.85);
}

.sh-ring {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 215, 0, 0.14);
    border-top-color: rgba(255, 215, 0, 0.95);
    border-right-color: rgba(255, 215, 0, 0.42);
    animation: sh-spin 18s linear infinite;
}

.sh-ring--inner {
    inset: 15%;
    border-width: 1px;
    border-color: rgba(255, 217, 138, 0.1);
    border-bottom-color: rgba(255, 217, 138, 0.75);
    border-left-color: rgba(255, 217, 138, 0.32);
    animation-direction: reverse;
}

.sh-emblem {
    position: absolute;
    inset: 25%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(10, 10, 7, 0.84);
    border: 1px solid rgba(255, 210, 122, 0.55);
    color: var(--wc-gold-warm);
}

.sh-emblem::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 226, 154, 0.24), rgba(255, 226, 154, 0) 70%);
}

.sh-emblem .sh-icon {
    position: relative;
    width: 40%;
    height: 40%;
}

@keyframes sh-breathe {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes sh-spin {
    to { transform: rotate(360deg); }
}

/* the five philosophers: each lights up while the line speaks of them */
.sh-members {
    display: flex;
    justify-content: center;
    gap: calc(10px * var(--u));
    margin-top: calc(14px * var(--u));
}

.sh-member {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(36px * var(--u));
    height: calc(36px * var(--u));
    border-radius: 50%;
    overflow: hidden;
    background: rgba(10, 10, 7, 0.78);
    border: 1px solid rgba(var(--rgb), 0.85);
    color: var(--accent);
    transition: opacity 0.6s ease, border-color 0.6s ease;
}

.sh-member::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--rgb), 0.22);
    transition: background 0.6s ease;
}

.sh-member.is-dim {
    opacity: 0.55;
    border-color: rgba(var(--rgb), 0.32);
}

.sh-member.is-dim::before {
    background: rgba(var(--rgb), 0.06);
}

.sh-member .sh-icon {
    position: relative;
    width: calc(17px * var(--u));
    height: calc(17px * var(--u));
}

.sh-kicker {
    margin-top: calc(20px * var(--u));
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: max(calc(11px * var(--u)), 11px);
    letter-spacing: calc(3.2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.sh-wait-text {
    max-width: calc(440px * var(--u));
}

.sh-wait-title {
    margin-top: calc(12px * var(--u));
    font-family: var(--wc-serif);
    font-weight: 400;
    font-size: calc(24px * var(--u));
    line-height: 1.3;
    color: var(--wc-cream);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    text-wrap: balance;
}

.sh-wait-sub {
    margin-top: calc(8px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(15.5px * var(--u));
    line-height: 1.42;
    color: var(--wc-cream-soft);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
}

.sh-dots span {
    animation: sh-blink 1.4s infinite both;
}

.sh-dots span:nth-child(2) { animation-delay: 0.2s; }
.sh-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sh-blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

.sh-wait .sh-ornament {
    margin: calc(18px * var(--u)) 0 calc(12px * var(--u));
}

.sh-wait-line {
    min-height: calc(50px * var(--u));
    max-width: calc(380px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(17px * var(--u));
    line-height: 1.45;
    color: var(--wc-cream);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
    text-wrap: balance;
    transition: opacity 0.45s ease;
}

.sh-wait-line.is-out {
    opacity: 0;
}

.sh-wait .sh-pill {
    margin-top: calc(12px * var(--u));
}

/* ---------- buttons, and the panel of an error or the login gate ---------- */
.sh-pill {
    min-height: calc(48px * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--u));
    padding: 0 calc(22px * var(--u));
    border-radius: calc(24px * var(--u));
    background: rgba(10, 10, 7, 0.82);
    border: 1px solid rgba(255, 210, 122, 0.5);
    font-family: var(--wc-serif);
    font-size: calc(16.5px * var(--u));
    line-height: 1.2;
    color: var(--wc-cream);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.sh-pill .sh-icon {
    flex: none;
    width: calc(17px * var(--u));
    height: calc(17px * var(--u));
    color: var(--wc-gold);
}

.sh-pill:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .sh-pill:hover {
        border-color: var(--wc-gold);
        background: rgba(255, 215, 0, 0.1);
    }
}

.sh-pill--gold {
    border-color: transparent;
    background: linear-gradient(135deg, #ffe08a, #f5b83d);
    font-weight: 700;
    color: #1f1606;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
}

.sh-pill--gold .sh-icon {
    color: #1f1606;
}

@media (hover: hover) {
    .sh-pill--gold:hover {
        background: linear-gradient(135deg, #ffe898, #f8c04a);
    }
}

.sh-panel {
    width: min(calc(460px * var(--u)), 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(24px * var(--u));
    border-radius: calc(22px * var(--u));
    background: var(--sh-glass-deep);
    border: 1px solid var(--wc-hairline);
    text-align: center;
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}

.sh-medal--big {
    width: calc(64px * var(--u));
    height: calc(64px * var(--u));
    margin: 0 0 calc(16px * var(--u));
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.5);
    color: var(--wc-gold-warm);
}

.sh-medal--big::before {
    display: none;
}

.sh-medal--big .sh-icon {
    width: calc(28px * var(--u));
    height: calc(28px * var(--u));
}

.sh-panel-title {
    font-family: var(--wc-serif);
    font-weight: 400;
    font-size: calc(23px * var(--u));
    line-height: 1.3;
    color: var(--wc-cream);
    text-wrap: balance;
}

.sh-panel-text {
    margin-top: calc(8px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(16px * var(--u));
    line-height: 1.45;
    color: var(--wc-cream-soft);
}

.sh-panel-text--sub {
    margin-top: calc(12px * var(--u));
    font-style: normal;
    font-size: calc(14.5px * var(--u));
    line-height: 1.5;
    color: rgba(243, 233, 210, 0.66);
}

.sh-panel-actions {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--u));
    margin-top: calc(22px * var(--u));
}

.sh-column--center .sh-plaque {
    text-align: center;
}

/* ---------- an answer: the teaching, then the Sage's words in glass ---------- */
.sh-reference {
    padding: calc(16px * var(--u));
    border-left: calc(3px * var(--u)) solid var(--wc-gold);
}

.sh-label {
    margin-bottom: calc(8px * var(--u));
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: max(calc(10px * var(--u)), 10px);
    line-height: 1.4;
    letter-spacing: calc(2.2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

.sh-reference-text {
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(18px * var(--u));
    line-height: 1.5;
    color: var(--wc-cream);
    overflow-wrap: anywhere;
}

.sh-reference-author {
    margin-top: calc(10px * var(--u));
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: max(calc(11px * var(--u)), 11px);
    line-height: 1.5;
    letter-spacing: calc(2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold-warm);
}

/* Listen to the Sage / the Council: the narrator's voice, or the browser's */
.sh-listen {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--u));
    margin-top: calc(14px * var(--u));
    padding: calc(9px * var(--u)) calc(16px * var(--u)) calc(9px * var(--u)) calc(12px * var(--u));
    border-radius: 999px;
    background: rgba(10, 10, 7, 0.6);
    border: 1px solid rgba(255, 210, 122, 0.45);
    font-family: var(--wc-mono);
    font-size: max(calc(10.5px * var(--u)), 10.5px);
    line-height: 1.2;
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold-warm);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sh-listen-icon {
    flex: none;
    width: calc(18px * var(--u));
    height: calc(18px * var(--u));
}

.sh-listen.is-playing {
    border-color: var(--wc-gold);
    background: rgba(255, 215, 0, 0.14);
}

/* the narrator voice is preparing the next part */
.sh-listen.is-loading .sh-listen-icon {
    animation: sh-pulse 1s ease-in-out infinite;
}

@keyframes sh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (hover: hover) {
    .sh-listen:hover {
        border-color: var(--wc-gold);
    }
}

.sh-understanding {
    padding: calc(16px * var(--u)) calc(16px * var(--u)) calc(4px * var(--u));
    margin-bottom: 0;
}

.sh-short {
    margin-bottom: calc(12px * var(--u));
    font-family: var(--wc-serif);
    font-size: calc(19px * var(--u));
    line-height: 1.48;
    color: #fbe6b2;
}

.sh-rule-line {
    height: 1px;
    margin-bottom: calc(14px * var(--u));
    background: rgba(255, 215, 0, 0.28);
}

.sh-section {
    margin-bottom: calc(24px * var(--u));
}

/* the answer's markdown, typeset for the canvas: cream serif, gold-cream headings, gold bold, gold bullets */
.sh-md {
    font-family: var(--wc-serif);
    font-size: calc(16.5px * var(--u));
    line-height: calc(26px * var(--u));
    color: rgba(243, 233, 210, 0.95);
    overflow-wrap: anywhere;
}

.sh-md-p {
    margin: 0 0 calc(12px * var(--u));
}

.sh-md-h {
    margin: calc(6px * var(--u)) 0 calc(8px * var(--u));
    font-family: var(--wc-serif);
    color: #f6e2ae;
}

.sh-md-h1 { font-size: calc(23px * var(--u)); line-height: 1.3; }
.sh-md-h2 { font-size: calc(21px * var(--u)); line-height: 1.33; }
.sh-md-h3 { font-size: calc(19px * var(--u)); line-height: 1.37; }

.sh-md strong {
    font-weight: 700;
    color: var(--wc-gold-warm);
}

.sh-md em {
    font-style: italic;
    color: var(--wc-cream);
}

.sh-md ul,
.sh-md ol {
    margin: 0 0 calc(8px * var(--u));
    padding: 0;
    list-style: none;
}

.sh-md ol {
    counter-reset: sh-item;
}

.sh-md li {
    position: relative;
    margin: 0 0 calc(6px * var(--u));
    padding-left: calc(26px * var(--u));
}

.sh-md ul > li::before {
    content: '';
    position: absolute;
    left: calc(3px * var(--u));
    top: calc(10px * var(--u));
    width: calc(6px * var(--u));
    height: calc(6px * var(--u));
    background: var(--wc-gold);
    transform: rotate(45deg);
}

.sh-md ol > li {
    counter-increment: sh-item;
}

.sh-md ol > li::before {
    content: counter(sh-item) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(13px * var(--u));
    color: var(--wc-gold);
}

.sh-md blockquote {
    margin: 0 0 calc(12px * var(--u));
    padding: calc(10px * var(--u)) calc(12px * var(--u));
    border-left: 2px solid rgba(255, 215, 0, 0.75);
    border-radius: 4px;
    background: rgba(255, 215, 0, 0.07);
    font-style: italic;
    color: var(--wc-cream);
}

.sh-md hr {
    height: 1px;
    margin: calc(4px * var(--u)) 0 calc(14px * var(--u));
    border: 0;
    background: rgba(255, 210, 122, 0.3);
}

.sh-md code {
    padding: 0 calc(4px * var(--u));
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--wc-mono);
    font-size: 0.86em;
    color: var(--wc-gold-warm);
}

/* daily practices: numbered in Roman numerals */
.sh-practice {
    margin-bottom: calc(10px * var(--u));
}

.sh-practice-head {
    display: flex;
    align-items: flex-start;
    gap: calc(12px * var(--u));
}

.sh-numeral {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(36px * var(--u));
    height: calc(36px * var(--u));
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.55);
    font-family: var(--wc-serif);
    font-size: calc(15px * var(--u));
    line-height: 1;
    color: var(--wc-gold);
}

.sh-practice-heading {
    flex: 1;
    min-width: 0;
}

.sh-practice-title {
    font-family: var(--wc-serif);
    font-weight: 400;
    font-size: calc(18.5px * var(--u));
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--wc-cream);
    overflow-wrap: anywhere;
}

.sh-practice-time {
    display: flex;
    align-items: center;
    gap: calc(5px * var(--u));
    margin-top: calc(4px * var(--u));
    font-family: var(--wc-mono);
    font-size: max(calc(9.5px * var(--u)), 9.5px);
    line-height: 1.5;
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.sh-practice-clock {
    flex: none;
    width: calc(12px * var(--u));
    height: calc(12px * var(--u));
}

.sh-practice-text {
    margin-top: calc(10px * var(--u));
    font-family: var(--wc-serif);
    font-size: calc(16.5px * var(--u));
    line-height: 1.52;
    color: rgba(243, 233, 210, 0.9);
    overflow-wrap: anywhere;
}

/* the 24-hour challenge: gold-lit glass */
.sh-challenge {
    display: flex;
    align-items: flex-start;
    gap: calc(12px * var(--u));
    padding: calc(16px * var(--u));
    border-radius: calc(18px * var(--u));
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 170, 40, 0.04) 50%, rgba(255, 215, 0, 0.1)), rgba(14, 11, 4, 0.8);
    border: 1px solid rgba(255, 215, 0, 0.6);
}

.sh-challenge-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(38px * var(--u));
    height: calc(38px * var(--u));
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.6);
    color: var(--wc-gold);
}

.sh-challenge-mark .sh-icon {
    width: calc(20px * var(--u));
    height: calc(20px * var(--u));
}

.sh-challenge-text {
    flex: 1;
    min-width: 0;
    font-family: var(--wc-serif);
    font-size: calc(18px * var(--u));
    line-height: 1.5;
    color: #fbe6b2;
    overflow-wrap: anywhere;
}

/* reflection questions */
.sh-prompt {
    display: flex;
    align-items: flex-start;
    gap: calc(8px * var(--u));
    padding: calc(13px * var(--u)) calc(14px * var(--u));
    margin-bottom: calc(8px * var(--u));
    border-radius: calc(16px * var(--u));
    background: var(--sh-glass);
    border: 1px solid var(--wc-hairline-faint);
}

.sh-diamond {
    flex: none;
    width: calc(6px * var(--u));
    height: calc(6px * var(--u));
    margin: calc(10px * var(--u)) calc(5px * var(--u)) 0 calc(4px * var(--u));
    background: var(--wc-gold);
    transform: rotate(45deg);
}

.sh-prompt-text {
    flex: 1;
    min-width: 0;
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(16.5px * var(--u));
    line-height: 1.52;
    color: var(--wc-cream);
    overflow-wrap: anywhere;
}

.sh-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(2px * var(--u));
}

.sh-footer-text {
    padding: 0 calc(12px * var(--u));
    font-family: var(--wc-serif);
    font-style: italic;
    font-size: calc(14px * var(--u));
    line-height: 1.45;
    text-align: center;
    color: var(--wc-label);
    text-wrap: balance;
}

.sh-footer-text--council {
    font-size: calc(15.5px * var(--u));
    line-height: 1.48;
    color: var(--wc-cream-soft);
}

.sh-footer .sh-plaque {
    margin-top: calc(14px * var(--u));
}

/* a wide screen: the words are read from further away, so they get a little larger */
@media (min-width: 900px) {
    .sh-reference-text { font-size: calc(19px * var(--u)); }
    .sh-short { font-size: calc(20px * var(--u)); }
    .sh-md,
    .sh-practice-text,
    .sh-prompt-text { font-size: calc(17.5px * var(--u)); }
    .sh-md { line-height: calc(28px * var(--u)); }
    .sh-challenge-text { font-size: calc(19px * var(--u)); }
}

/* ---------- the Council of 5: the five emblems, then a glass card edged in each philosopher's colour ---------- */
.sh-emblems {
    display: flex;
    justify-content: center;
    gap: calc(8px * var(--u));
    margin-top: calc(12px * var(--u));
}

.sh-emblem-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(30px * var(--u));
    height: calc(30px * var(--u));
    border-radius: 50%;
    overflow: hidden;
    background: rgba(10, 10, 7, 0.78);
    border: 1px solid rgba(var(--rgb), 0.75);
    color: var(--accent);
}

.sh-emblem-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--rgb), 0.16);
}

.sh-emblem-dot .sh-icon {
    position: relative;
    width: calc(14px * var(--u));
    height: calc(14px * var(--u));
}

/* the gradient each philosopher's card has always had tints the glass */
.sh-philosopher {
    padding: calc(16px * var(--u)) calc(16px * var(--u)) calc(4px * var(--u));
    margin: 0 0 calc(16px * var(--u));
    border-radius: calc(20px * var(--u));
    background: linear-gradient(135deg, rgba(var(--from), 0.3), rgba(var(--to), 0.16)), var(--sh-glass);
    border: 1px solid var(--wc-hairline);
    border-left: calc(3px * var(--u)) solid var(--accent);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}

.sh-philosopher-head {
    display: flex;
    align-items: center;
}

.sh-medal--accent {
    width: calc(46px * var(--u));
    height: calc(46px * var(--u));
    margin-right: calc(12px * var(--u));
    border-color: rgba(var(--rgb), 0.75);
    color: var(--accent);
    font-size: calc(22px * var(--u));
    line-height: 1;
}

.sh-medal--accent::before {
    background: rgba(var(--rgb), 0.2);
}

.sh-philosopher-info {
    flex: 1;
    min-width: 0;
}

.sh-philosopher-name {
    font-family: var(--wc-serif);
    font-weight: 400;
    font-size: calc(21px * var(--u));
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--wc-cream);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.sh-philosopher-tradition {
    margin-top: calc(2px * var(--u));
    font-family: var(--wc-mono);
    font-size: max(calc(9.5px * var(--u)), 9.5px);
    line-height: 1.5;
    letter-spacing: calc(1.6px * var(--u));
    text-transform: uppercase;
    color: var(--accent);
}

.sh-philosopher .sh-rule-line {
    margin: calc(14px * var(--u)) 0;
    background: rgba(var(--rgb), 0.32);
}

/* ---------- Save & Done, pinned at the bottom ---------- */
.sh-actions {
    flex: none;
    padding: calc(10px * var(--u)) max(var(--sh-side), env(safe-area-inset-right, 0px))
        calc(12px * var(--u) + env(safe-area-inset-bottom, 0px)) max(var(--sh-side), env(safe-area-inset-left, 0px));
    background: rgba(4, 6, 4, 0.9);
    border-top: 1px solid var(--wc-hairline-faint);
}

.sh-actions[hidden] {
    display: none;
}

.sh-actions-inner {
    width: min(var(--sh-column-answer), 100%);
    margin: 0 auto;
}

.sh-actions-row {
    display: flex;
    gap: calc(10px * var(--u));
}

.sh-btn {
    flex: 1;
    min-width: 0;
    min-height: calc(50px * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--u));
    padding: calc(6px * var(--u)) calc(10px * var(--u));
    border-radius: calc(25px * var(--u));
    font-family: var(--wc-serif);
    font-size: calc(16.5px * var(--u));
    line-height: 1.15;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.sh-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.sh-btn-icon {
    flex: none;
    width: calc(18px * var(--u));
    height: calc(18px * var(--u));
}

.sh-btn-label {
    min-width: 0;
    text-wrap: balance;
}

.sh-save {
    flex: 1.4;
    background: rgba(10, 10, 7, 0.82);
    border: 1px solid rgba(255, 210, 122, 0.5);
    color: var(--wc-cream);
}

.sh-save .sh-btn-icon {
    color: var(--wc-gold);
}

.sh-save.is-saved {
    border-color: rgba(255, 215, 0, 0.8);
    background: rgba(40, 32, 8, 0.86);
}

.sh-save:disabled:not(.is-saved) {
    opacity: 0.75;
    cursor: progress;
}

@media (hover: hover) {
    .sh-save:not(:disabled):hover {
        border-color: var(--wc-gold);
        background: rgba(255, 215, 0, 0.1);
    }
}

.sh-done {
    border: 0;
    background: linear-gradient(135deg, #ffe08a, #f5b83d);
    font-weight: 700;
    color: #1f1606;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.35);
}

@media (hover: hover) {
    .sh-done:hover {
        background: linear-gradient(135deg, #ffe898, #f8c04a);
    }
}

.sh-notice {
    margin-bottom: calc(10px * var(--u));
    padding: calc(10px * var(--u)) calc(14px * var(--u));
    border-radius: calc(12px * var(--u));
    font-family: var(--wc-serif);
    font-size: calc(14.5px * var(--u));
    line-height: 1.4;
}

.sh-notice--info {
    border: 1px solid rgba(255, 210, 122, 0.4);
    background: rgba(255, 215, 0, 0.08);
    color: var(--wc-cream);
}

.sh-notice--error {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.sh-notice-link {
    margin-left: calc(8px * var(--u));
    padding: 0;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    color: var(--wc-gold);
}

/* ---------- entrance: the page's blocks rise one after the other ---------- */
.sh-content.is-entering .sh-column > * {
    animation: sh-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.sh-content.is-entering .sh-column > :nth-child(2) { animation-delay: 45ms; }
.sh-content.is-entering .sh-column > :nth-child(3) { animation-delay: 90ms; }
.sh-content.is-entering .sh-column > :nth-child(4) { animation-delay: 135ms; }
.sh-content.is-entering .sh-column > :nth-child(5) { animation-delay: 180ms; }
.sh-content.is-entering .sh-column > :nth-child(n+6) { animation-delay: 225ms; }

@keyframes sh-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- a phone: the painting drifts behind every card, and blurring it again and again is heavy,
   so the glass gets a little more body instead ---------- */
@media (max-width: 639px), (pointer: coarse) {
    .sh-card,
    .sh-segment,
    .sh-action,
    .sh-panel,
    .sh-philosopher {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .sh-card,
    .sh-action {
        background: rgba(8, 10, 7, 0.84);
    }

    .sh-philosopher {
        background: linear-gradient(135deg, rgba(var(--from), 0.3), rgba(var(--to), 0.16)), rgba(8, 10, 7, 0.84);
    }
}

/* the long reading cards of an answer are not blurred on any screen: text on glass needs no frost, and a tall blurred
   card over a moving painting is the most expensive thing on the page */
.sh-reference,
.sh-understanding,
.sh-practice,
.sh-philosopher {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.sh-reference,
.sh-understanding,
.sh-practice {
    background: rgba(8, 10, 7, 0.8);
}

.sh-philosopher {
    background: linear-gradient(135deg, rgba(var(--from), 0.3), rgba(var(--to), 0.16)), rgba(8, 10, 7, 0.82);
}

@media (max-width: 360px) {
    .sh-title { font-size: calc(27px * var(--u)); }
    .sh-btn { font-size: calc(15px * var(--u)); }
}

/* ---------- classic look: purple-free dark glass, no painting ---------- */
.sh-root.is-classic .sh-plaque {
    display: none;
}

.sh-root.is-classic .sh-header-shade {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.94) 0, rgba(10, 10, 10, 0.86) var(--sh-header), rgba(10, 10, 10, 0) 100%);
}

/* ---------- reduced motion: nothing turns, rises or breathes ---------- */
@media (prefers-reduced-motion: reduce) {
    .sh-glow,
    .sh-ring,
    .sh-dots span,
    .sh-listen.is-loading .sh-listen-icon {
        animation: none;
    }

    .sh-content.is-entering .sh-column > * {
        animation: none;
    }

    .sh-wait-line,
    .sh-member,
    .sh-member::before {
        transition: none;
    }

    .sh-action,
    .sh-pill,
    .sh-btn,
    .sh-chevron {
        transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    }

    .sh-action:hover,
    .sh-action:active,
    .sh-pill:active,
    .sh-btn:active {
        transform: none;
    }

    .sh-action:hover .sh-chevron {
        transform: none;
    }
}