/**
 * immersive_reader.css
 * 📖 The Immersive Reading mode — the mobile app's QuoteScrollViewScreen: one teaching over a drifting masterpiece, in the
 * path's candlelight, with dark glass and gold controls that hide for a pure painting-and-words view.
 * It builds on the painted shell of world_clock.css (.wc-root, the canvas, the plaque, the --wc-* palette). Every size is
 * calc(N * 1px * var(--u)): --u is 1 at phone size and grows on roomy windows, so the reader keeps the app's proportions.
 */

.ir-root {
    --u: 1;
    --ir-pad-top: calc(78px * var(--u));
    --ir-pad-bottom: calc(272px * var(--u));
    --ir-accent: #ffd700;
    --ir-text: #e8efe6;
    --ir-muted: rgba(243, 233, 210, 0.55);
    --ir-glass-btn: rgba(10, 10, 7, 0.74);
    --ir-glass-line: rgba(255, 210, 122, 0.38);
    z-index: 9000;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

@media (min-width: 700px) and (min-height: 700px) {
    .ir-root { --u: 1.2; }
}

@media (min-width: 1000px) and (min-height: 800px) {
    .ir-root { --u: 1.4; }
}

@media (min-width: 1500px) and (min-height: 1100px) {
    .ir-root { --u: 1.7; }
}

@media (min-width: 2200px) and (min-height: 1300px) {
    .ir-root { --u: 2.1; }
}

/* ---------- the page: quote, author, guidance ---------- */
.ir-stage {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* a long quote fades out before it reaches the title and the controls (the painting itself stays) */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(env(safe-area-inset-top) + var(--ir-pad-top) - 6px * var(--u)), #000 calc(100% - var(--ir-pad-bottom)), transparent calc(100% - var(--ir-pad-bottom) + 56px * var(--u)));
    mask-image: linear-gradient(to bottom, transparent, #000 calc(env(safe-area-inset-top) + var(--ir-pad-top) - 6px * var(--u)), #000 calc(100% - var(--ir-pad-bottom)), transparent calc(100% - var(--ir-pad-bottom) + 56px * var(--u)));
}

.ir-root.is-bare .ir-stage,
.ir-root.has-state .ir-stage {
    -webkit-mask-image: none;
    mask-image: none;
}

.ir-stage::-webkit-scrollbar {
    display: none;
}

.ir-scroll {
    display: flex;
    min-height: 100%;
    padding: calc(env(safe-area-inset-top) + var(--ir-pad-top)) calc(26px * var(--u)) var(--ir-pad-bottom);
}

.ir-swipe {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, calc(680px * var(--u)));
    margin: auto; /* centred when it fits, scrolls from the top when it does not */
    touch-action: pan-y;
}

.ir-swipe:not(.is-dragging) {
    transition: transform 0.45s cubic-bezier(0.2, 1.25, 0.3, 1);
}

.ir-quote-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.ir-numeral-row {
    display: flex;
    align-items: center;
    margin-bottom: calc(22px * var(--u));
}

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

.ir-numeral {
    margin: 0 calc(14px * var(--u));
    font-family: var(--wc-roman);
    font-size: calc(20px * var(--u));
    letter-spacing: calc(4px * var(--u));
    color: var(--wc-gold);
    text-shadow: 0 0 10px rgba(255, 196, 80, 0.6);
}

.ir-quote {
    margin: 0;
    max-width: 100%;
    text-align: center;
    font-family: var(--wc-serif);
    font-size: calc(var(--fs, 27) * 1px * var(--u));
    line-height: calc(var(--lh, 39) * 1px * var(--u));
    color: #f3e9d2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* the phrase being narrated glows; the rest dims while the narrator speaks */
.ir-phrase {
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.ir-quote.is-narrating .ir-phrase.is-active {
    color: #ffe29a;
    text-shadow: 0 0 16px rgba(255, 190, 70, 0.85);
}

.ir-quote.is-narrating .ir-phrase.is-spoken {
    color: rgba(243, 233, 210, 0.82);
}

.ir-quote.is-narrating .ir-phrase.is-upcoming {
    color: rgba(243, 233, 210, 0.42);
}

.ir-author-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: calc(28px * var(--u));
    padding: 0 calc(10px * var(--u));
}

.ir-aline {
    flex: 1;
    max-width: calc(48px * var(--u));
    height: 1px;
    background: rgba(255, 215, 0, 0.45);
}

.ir-author {
    margin: 0 calc(12px * var(--u));
    font-style: normal;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(12.5px * var(--u));
    line-height: 1.35;
    letter-spacing: calc(2.6px * var(--u));
    text-transform: uppercase;
    text-align: center;
    color: var(--wc-gold-warm);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.ir-guidance {
    width: 100%;
    margin-top: calc(30px * var(--u));
    padding: calc(16px * var(--u));
    border-radius: calc(16px * var(--u));
    background: rgba(12, 9, 3, 0.62);
    border: 1px solid rgba(255, 210, 122, 0.28);
    border-left: calc(3px * var(--u)) solid var(--wc-gold);
    transition: opacity 0.32s ease, visibility 0s linear 0s;
}

.ir-guidance[hidden] {
    display: none;
}

.ir-guidance-label {
    margin-bottom: calc(8px * var(--u));
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(10.5px * var(--u));
    letter-spacing: calc(2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

.ir-guidance-text {
    font-style: italic;
    font-size: calc(16px * var(--u));
    line-height: 1.5;
    color: rgba(243, 233, 210, 0.92);
    -webkit-user-select: text;
    user-select: text;
}

/* ---------- speed read ---------- */
.ir-speed {
    display: inline-flex;
    align-items: center;
    gap: calc(8px * var(--u));
    margin-top: calc(20px * var(--u));
    padding: calc(7px * var(--u)) calc(8px * var(--u)) calc(7px * var(--u)) calc(14px * var(--u));
    border-radius: calc(18px * var(--u));
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.92), rgba(120, 72, 8, 0.9));
    border: 1px solid rgba(255, 226, 154, 0.35);
    font-family: var(--wc-sans);
    font-weight: 700;
    font-size: calc(13px * var(--u));
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.ir-speed[hidden] {
    display: none;
}

.ir-speed-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(26px * var(--u));
    height: calc(26px * var(--u));
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    font-size: calc(12px * var(--u));
    color: #fff;
}

/* ---------- first quote: waiting and failure ---------- */
.ir-state {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(14px * var(--u));
    padding: calc(24px * var(--u));
    text-align: center;
    font-size: calc(18px * var(--u));
    color: var(--wc-cream);
    pointer-events: none;
}

.ir-state[hidden] {
    display: none;
}

.ir-state > * {
    pointer-events: auto;
}

.ir-state p {
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.ir-state-sub {
    font-size: calc(14px * var(--u));
    font-style: italic;
    color: var(--wc-cream-soft);
}

.ir-root.has-state .ir-scroll {
    visibility: hidden;
}

.ir-spinner {
    display: inline-block;
    width: calc(14px * var(--u));
    height: calc(14px * var(--u));
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.25);
    border-top-color: var(--wc-gold);
    animation: ir-spin 0.8s linear infinite;
}

.ir-spinner[hidden] {
    display: none;
}

.ir-spinner.is-big {
    width: calc(34px * var(--u));
    height: calc(34px * var(--u));
    border-width: 3px;
}

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

.ir-pill {
    padding: calc(10px * var(--u)) calc(24px * var(--u));
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.5);
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(11px * var(--u));
    letter-spacing: calc(1.6px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

/* ---------- top bar: ☰ · title · ✕, and the eye ---------- */
.ir-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top) + 6px * var(--u)) max(calc(16px * var(--u)), env(safe-area-inset-right)) calc(10px * var(--u)) max(calc(16px * var(--u)), env(safe-area-inset-left));
    pointer-events: none;
}

.ir-top > * {
    pointer-events: auto;
}

.ir-glass {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(44px * var(--u));
    height: calc(44px * var(--u));
    border-radius: 50%;
    background: var(--ir-glass-btn);
    border: 1px solid var(--ir-glass-line);
    color: var(--wc-gold-warm);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}

.ir-glass:active {
    transform: scale(0.94);
}

@media (hover: hover) {
    .ir-glass:hover {
        border-color: rgba(255, 215, 0, 0.7);
    }
}

.ir-glyph {
    font-size: calc(18px * var(--u));
    font-weight: 700;
    line-height: 1;
    color: var(--wc-gold-warm);
}

.ir-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(12px * var(--u));
}

.ir-title-text {
    max-width: 100%;
    animation: none; /* the site's headings pulse a gold glow */
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(13px * var(--u));
    letter-spacing: calc(3px * var(--u));
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--wc-gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.ir-title-sub {
    margin: calc(3px * var(--u)) 0 0;
    max-width: 100%;
    font-family: var(--wc-mono);
    font-size: calc(9px * var(--u));
    letter-spacing: calc(2.2px * var(--u));
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ir-muted);
}

.ir-eye {
    position: absolute;
    z-index: 31;
    top: calc(env(safe-area-inset-top) + 62px * var(--u));
    right: max(calc(16px * var(--u)), env(safe-area-inset-right));
}

.ir-eye .ir-eye-on {
    display: none;
}

.ir-eye svg {
    display: block;
    width: calc(21px * var(--u));
    height: calc(21px * var(--u));
}

.ir-root.is-bare .ir-eye .ir-eye-on {
    display: block;
}

.ir-root.is-bare .ir-eye .ir-eye-off {
    display: none;
}

.ir-root.is-bare .ir-eye {
    background: rgba(7, 12, 9, 0.55);
    border-color: rgba(255, 210, 122, 0.3);
}

.ir-root.has-menu .ir-eye {
    display: none;
}

/* hidden interface: only the painting, the words and the eye remain */
.ir-top,
.ir-bottom,
.ir-guidance {
    transition: opacity 0.32s ease, visibility 0s linear 0s;
}

.ir-root.is-bare .ir-top,
.ir-root.is-bare .ir-bottom,
.ir-root.is-bare .ir-guidance {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.ir-root.is-bare.has-menu .ir-top {
    opacity: 1;
    visibility: visible;
}

.ir-root.has-menu .ir-bottom,
.ir-root.has-insights .ir-bottom,
.ir-root.has-share .ir-bottom {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---------- bottom: plaque, actions, dock ---------- */
.ir-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: min(100%, calc(580px * var(--u)));
    margin: 0 auto;
    padding: 0 calc(16px * var(--u)) calc(env(safe-area-inset-bottom) + 12px * var(--u));
    pointer-events: none;
}

.ir-bottom > * {
    pointer-events: auto;
}

.ir-plaque-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--u));
    margin-bottom: calc(10px * var(--u));
}

.ir-plaque {
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}

.ir-actions {
    display: flex;
    justify-content: center;
    gap: calc(22px * var(--u));
    margin-bottom: calc(40px * var(--u)); /* clear of the Listen medallion, which rises above the dock, and its halo */
}

.ir-round {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(52px * var(--u));
    height: calc(52px * var(--u));
    border-radius: 50%;
    background: var(--ir-glass-btn);
    border: 1px solid var(--ir-glass-line);
    color: var(--wc-gold-warm);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ir-round[hidden] {
    display: none;
}

.ir-round::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 226, 154, 0.2), rgba(255, 226, 154, 0) 60%);
    pointer-events: none;
}

.ir-round:active {
    transform: scale(0.94);
}

.ir-round svg {
    position: relative;
    display: block;
    width: calc(24px * var(--u));
    height: calc(24px * var(--u));
}

.ir-round[aria-expanded="true"] {
    border-color: var(--wc-gold);
    background: rgba(255, 215, 0, 0.16);
}

.ir-favorite .ir-heart-on,
.ir-favorite.is-active .ir-heart-off {
    display: none;
}

.ir-favorite.is-active .ir-heart-on {
    display: block;
}

.ir-favorite.is-active {
    color: #ff4d61;
    border-color: rgba(255, 92, 110, 0.75);
    background: rgba(255, 77, 97, 0.14);
}

.ir-favorite.is-pop svg {
    animation: ir-pop 0.3s ease;
}

@keyframes ir-pop {
    50% { transform: scale(1.3); }
}

.ir-dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px * var(--u)) calc(12px * var(--u));
    border-radius: calc(28px * var(--u));
    background: rgba(7, 12, 9, 0.8);
    border: 1px solid var(--wc-hairline);
}

.ir-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--u));
    min-width: 0;
    padding: calc(12px * var(--u)) calc(4px * var(--u));
    border-radius: calc(18px * var(--u));
    border: 1px solid transparent;
    transition: background 0.2s ease, transform 0.15s ease;
}

.ir-nav:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .ir-nav:hover {
        background: rgba(255, 215, 0, 0.08);
    }
}

.ir-nav-primary {
    background: rgba(255, 215, 0, 0.14);
    border-color: rgba(255, 215, 0, 0.45);
}

.ir-nav-arrow {
    flex: none;
    font-family: var(--wc-sans);
    font-weight: 300;
    font-size: calc(28px * var(--u));
    line-height: calc(28px * var(--u));
    color: var(--wc-gold-warm);
}

.ir-nav-primary .ir-nav-arrow {
    color: var(--wc-gold);
}

.ir-nav-label {
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
    font-family: var(--wc-mono);
    font-size: calc(10.5px * var(--u));
    line-height: 1.2;
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--ir-text);
}

.ir-nav-primary .ir-nav-label {
    font-weight: 700;
    color: var(--wc-gold);
}

/* the Listen medallion rises above the dock */
.ir-medallion-wrap {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(-30px * var(--u)) calc(10px * var(--u)) 0;
}

.ir-medallion-core {
    position: relative;
    width: calc(68px * var(--u));
    height: calc(68px * var(--u));
}

.ir-halo {
    position: absolute;
    left: calc(-6px * var(--u));
    top: calc(-6px * var(--u));
    width: calc(80px * var(--u));
    height: calc(80px * var(--u));
    border-radius: 50%;
    border: 2px solid var(--ir-accent);
    opacity: 0.18;
    pointer-events: none;
}

.ir-root.is-listening .ir-halo {
    animation: ir-halo 2.8s ease-in-out infinite;
}

@keyframes ir-halo {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.22); }
}

.ir-medallion {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to bottom, #3a2a08, #120c02);
    border: 2px solid var(--wc-gold);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
}

.ir-listen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--wc-gold);
}

.ir-listen svg {
    display: block;
    width: calc(30px * var(--u));
    height: calc(30px * var(--u));
}

.ir-listen .ir-i-stop,
.ir-listen.is-playing .ir-i-play {
    display: none;
}

.ir-listen.is-playing .ir-i-stop {
    display: block;
}

.ir-listen-ring {
    position: absolute;
    inset: calc(5px * var(--u));
    display: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.25);
    border-top-color: var(--wc-gold);
    animation: ir-spin 0.8s linear infinite;
}

.ir-listen.is-loading .ir-listen-ring {
    display: block;
}

.ir-medallion-label {
    margin-top: calc(6px * var(--u));
    font-family: var(--wc-mono);
    font-size: calc(9px * var(--u));
    letter-spacing: calc(1.6px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold-warm);
}

/* ---------- the swipe hint (plays when the interface hides): ‹ ——•—— › ---------- */
.ir-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 34px * var(--u));
    z-index: 22;
    display: none;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.ir-hint.is-playing {
    display: flex;
    animation: ir-hint-life 4.4s linear both;
}

.ir-hint-row {
    display: flex;
    align-items: center;
}

.ir-hint-chev {
    width: calc(26px * var(--u));
    text-align: center;
    font-family: var(--wc-sans);
    font-weight: 300;
    font-size: calc(36px * var(--u));
    line-height: calc(36px * var(--u));
    color: var(--wc-gold-warm);
    text-shadow: 0 0 10px rgba(255, 196, 80, 0.75);
}

.ir-hint-track {
    position: relative;
    width: calc(176px * var(--u));
    height: calc(34px * var(--u));
    margin: 0 calc(6px * var(--u));
    display: flex;
    align-items: center;
}

.ir-hint-thread {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.62), rgba(255, 215, 0, 0));
    transform-origin: center;
}

.ir-hint-ember {
    position: absolute;
    left: calc(50% - 17px * var(--u));
    top: 0;
    width: calc(34px * var(--u));
    height: calc(34px * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
}

.ir-hint-trail {
    position: absolute;
    top: calc(16px * var(--u));
    width: calc(60px * var(--u));
    height: 2px;
    border-radius: 1px;
    opacity: 0;
}

.ir-hint-trail-l {
    left: calc(17px * var(--u));
    background: linear-gradient(to right, rgba(255, 226, 154, 0.85), rgba(255, 215, 0, 0));
}

.ir-hint-trail-r {
    right: calc(17px * var(--u));
    background: linear-gradient(to right, rgba(255, 215, 0, 0), rgba(255, 226, 154, 0.85));
}

.ir-hint-ripple,
.ir-hint-halo,
.ir-hint-glow {
    position: absolute;
    border-radius: 50%;
}

.ir-hint-ripple {
    left: calc(6px * var(--u));
    top: calc(6px * var(--u));
    width: calc(22px * var(--u));
    height: calc(22px * var(--u));
    border: 1.5px solid var(--wc-gold-warm);
    opacity: 0;
}

.ir-hint-halo {
    left: calc(4px * var(--u));
    top: calc(4px * var(--u));
    width: calc(26px * var(--u));
    height: calc(26px * var(--u));
    background: rgba(255, 215, 0, 0.12);
}

.ir-hint-glow {
    left: calc(10px * var(--u));
    top: calc(10px * var(--u));
    width: calc(14px * var(--u));
    height: calc(14px * var(--u));
    background: rgba(255, 226, 154, 0.4);
}

.ir-hint-core {
    position: relative;
    width: calc(7px * var(--u));
    height: calc(7px * var(--u));
    border-radius: 50%;
    background: #fff6dc;
    box-shadow: 0 0 6px 1px var(--wc-gold);
}

.ir-hint-caption {
    margin: calc(4px * var(--u)) 0 0;
    font-family: var(--wc-mono);
    font-size: calc(9.5px * var(--u));
    letter-spacing: calc(2.4px * var(--u));
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 217, 138, 0.82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* ~4.4 s: wait for the controls to fade, rise in, glide left, right and back to the centre, ripple, fade away */
@keyframes ir-hint-life {
    0%, 4.5% { opacity: 0; transform: translateY(calc(10px * var(--u))); }
    17.3% { opacity: 1; transform: none; animation-timing-function: linear; }
    85.5% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(calc(-6px * var(--u))); }
}

.ir-hint.is-playing .ir-hint-thread { animation: ir-hint-thread 4.4s linear both; }
.ir-hint.is-playing .ir-hint-ember { animation: ir-hint-sweep 4.4s linear both; }
.ir-hint.is-playing .ir-hint-trail-l { animation: ir-hint-trail-l 4.4s linear both; }
.ir-hint.is-playing .ir-hint-trail-r { animation: ir-hint-trail-r 4.4s linear both; }
.ir-hint.is-playing .ir-hint-ripple { animation: ir-hint-ripple 4.4s linear both; }
.ir-hint.is-playing .ir-hint-chev-l { animation: ir-hint-chev-l 4.4s linear both; }
.ir-hint.is-playing .ir-hint-chev-r { animation: ir-hint-chev-r 4.4s linear both; }
.ir-root.is-hinting .ir-swipe { animation: ir-hint-nudge 4.4s linear both; }

@keyframes ir-hint-thread {
    0%, 4.5% { transform: scaleX(0.2); }
    17.3%, 100% { transform: scaleX(1); }
}

@keyframes ir-hint-sweep {
    0%, 19.5% { translate: 0 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    33.6%, 36.8% { translate: calc(-74px * var(--u)) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    59.5%, 62.7% { translate: calc(74px * var(--u)) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    76.8%, 100% { translate: 0 0; }
}

@keyframes ir-hint-nudge {
    0%, 19.5% { translate: 0 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    33.6%, 36.8% { translate: calc(-10px * var(--u)) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    59.5%, 62.7% { translate: calc(10px * var(--u)) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    76.8%, 100% { translate: 0 0; }
}

@keyframes ir-hint-trail-l {
    0%, 19.5% { opacity: 0; }
    26.6% { opacity: 1; }
    33.6%, 62.7% { opacity: 0; }
    69.8% { opacity: 1; }
    76.8%, 100% { opacity: 0; }
}

@keyframes ir-hint-trail-r {
    0%, 36.8% { opacity: 0; }
    48.2% { opacity: 1; }
    59.5%, 100% { opacity: 0; }
}

@keyframes ir-hint-ripple {
    0%, 76.8% { opacity: 0; transform: scale(0.5); }
    79.5% { opacity: 0.8; }
    98.4%, 100% { opacity: 0; transform: scale(2.8); }
}

@keyframes ir-hint-chev-l {
    0%, 19.5% { opacity: 0.5; translate: 0 0; }
    33.6%, 36.8% { opacity: 1; translate: calc(-5px * var(--u)) 0; }
    59.5%, 62.7% { opacity: 0.32; translate: 0 0; }
    76.8%, 100% { opacity: 0.5; translate: 0 0; }
}

@keyframes ir-hint-chev-r {
    0%, 19.5% { opacity: 0.5; translate: 0 0; }
    33.6%, 36.8% { opacity: 0.32; translate: 0 0; }
    59.5%, 62.7% { opacity: 1; translate: calc(5px * var(--u)) 0; }
    76.8%, 100% { opacity: 0.5; translate: 0 0; }
}

/* ---------- Quote Insights sheet ---------- */
.ir-insights {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(100%, calc(660px * var(--u)));
    max-height: 78%;
    margin: 0 auto;
    border-radius: calc(26px * var(--u)) calc(26px * var(--u)) 0 0;
    background: linear-gradient(to bottom, rgba(24, 17, 5, 0.94), rgba(3, 6, 4, 0.98));
    border: 1px solid var(--wc-hairline);
    border-bottom: 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    transform: translateY(105%);
    transition: transform 0.25s ease;
}

.ir-insights.has-related {
    max-height: 86%;
}

.ir-insights.is-open {
    transform: none;
}

.ir-insights[hidden],
.ir-menu[hidden],
.ir-share[hidden],
.ir-tutorial[hidden] {
    display: none;
}

.ir-sheet-handle {
    flex: none;
    width: calc(44px * var(--u));
    height: calc(4px * var(--u));
    margin: calc(10px * var(--u)) auto calc(2px * var(--u));
    border-radius: 2px;
    background: rgba(255, 215, 0, 0.4);
}

.ir-insights-scroll {
    padding: calc(8px * var(--u)) calc(18px * var(--u)) calc(env(safe-area-inset-bottom) + 18px * var(--u));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}

.ir-sheet-title {
    margin: 0 0 calc(14px * var(--u));
    animation: none;
    text-align: center;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(13px * var(--u));
    letter-spacing: calc(2.6px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

.ir-insight-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10px * var(--u));
}

.ir-insight-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4px * var(--u));
    min-width: 0;
    padding: calc(14px * var(--u)) calc(34px * var(--u)) calc(14px * var(--u)) calc(14px * var(--u));
    border-radius: calc(16px * var(--u));
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.28);
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ir-insight-card[aria-expanded="true"] {
    border-color: var(--wc-gold);
    background: rgba(255, 215, 0, 0.14);
}

@media (hover: hover) {
    .ir-insight-card:hover {
        border-color: rgba(255, 215, 0, 0.6);
    }
}

.ir-insight-icon {
    font-size: calc(22px * var(--u));
    line-height: 1.1;
}

.ir-insight-title {
    font-size: calc(16px * var(--u));
    line-height: 1.2;
    color: #f3e9d2;
}

.ir-insight-hint {
    font-family: var(--wc-mono);
    font-size: calc(9.5px * var(--u));
    line-height: 1.35;
    letter-spacing: calc(1.2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.ir-insight-chev {
    position: absolute;
    right: calc(10px * var(--u));
    bottom: calc(12px * var(--u));
    color: var(--wc-gold-warm);
}

.ir-insight-chev svg {
    display: block;
    width: calc(16px * var(--u));
    height: calc(16px * var(--u));
}

.ir-chev-open {
    display: none;
}

.ir-insight-card[aria-expanded="true"] .ir-chev-closed {
    display: none;
}

.ir-insight-card[aria-expanded="true"] .ir-chev-open {
    display: block;
    transform: rotate(180deg);
}

.ir-related {
    margin-top: calc(12px * var(--u));
}

.ir-related[hidden] {
    display: none;
}

.ir-related-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--u));
    padding: calc(18px * var(--u)) 0;
    text-align: center;
    font-size: calc(15px * var(--u));
    color: var(--wc-cream-soft);
}

.ir-related-state p {
    margin: 0;
}

.ir-chips {
    display: flex;
    gap: calc(8px * var(--u));
    padding-bottom: calc(10px * var(--u));
    overflow-x: auto;
    scrollbar-width: none;
}

.ir-chips::-webkit-scrollbar,
.ir-related-row::-webkit-scrollbar {
    display: none;
}

.ir-chip {
    flex: none;
    padding: calc(7px * var(--u)) calc(14px * var(--u));
    border-radius: 999px;
    background: rgba(8, 10, 7, 0.6);
    border: 1px solid var(--wc-hairline-faint);
    font-family: var(--wc-mono);
    font-size: calc(10.5px * var(--u));
    letter-spacing: calc(1px * var(--u));
    white-space: nowrap;
    color: rgba(232, 239, 230, 0.7);
}

.ir-chip.is-active {
    border-color: rgba(255, 215, 0, 0.6);
    background: rgba(255, 215, 0, 0.14);
    color: var(--wc-gold-warm);
}

.ir-related-row {
    display: flex;
    gap: calc(10px * var(--u));
    padding-bottom: calc(6px * var(--u));
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.ir-related-card {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--u));
    width: calc(236px * var(--u));
    padding: calc(14px * var(--u));
    border-radius: calc(16px * var(--u));
    background: rgba(8, 10, 7, 0.7);
    border: 1px solid var(--wc-hairline-faint);
    text-align: left;
    scroll-snap-align: start;
    transition: border-color 0.2s ease;
}

@media (hover: hover) {
    .ir-related-card:hover {
        border-color: rgba(255, 215, 0, 0.5);
    }
}

.ir-related-tier {
    font-family: var(--wc-mono);
    font-size: calc(9px * var(--u));
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.ir-related-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: calc(15px * var(--u));
    line-height: 1.4;
    color: #f3e9d2;
}

.ir-related-author {
    margin-top: auto;
    font-family: var(--wc-mono);
    font-size: calc(10px * var(--u));
    letter-spacing: calc(1px * var(--u));
    color: var(--wc-gold-warm);
}

.ir-read-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--u));
    width: 100%;
    margin-top: calc(12px * var(--u));
    padding: calc(12px * var(--u)) calc(16px * var(--u));
    border-radius: calc(16px * var(--u));
    background: linear-gradient(to right, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.35);
    font-size: calc(15px * var(--u));
    color: var(--wc-gold-warm);
}

.ir-read-all svg {
    display: block;
    width: calc(18px * var(--u));
    height: calc(18px * var(--u));
}

.ir-read-all i {
    font-style: normal;
    font-size: calc(22px * var(--u));
    line-height: 1;
}

.ir-knowledge {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(118px * var(--u)), 1fr));
    gap: calc(10px * var(--u));
    margin-top: calc(12px * var(--u));
}

.ir-knowledge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4px * var(--u));
    padding: calc(12px * var(--u)) calc(8px * var(--u));
    border-radius: calc(14px * var(--u));
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.18);
    text-align: center;
}

.ir-knowledge-icon {
    font-size: calc(20px * var(--u));
    line-height: 1.1;
}

.ir-knowledge-label {
    font-family: var(--wc-mono);
    font-size: calc(9.5px * var(--u));
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.ir-knowledge-value {
    font-size: calc(15px * var(--u));
    font-weight: 400;
    line-height: 1.25;
    color: #f3e9d2;
    overflow-wrap: anywhere;
}

.ir-painting-card {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--u));
    margin-top: calc(12px * var(--u));
    padding: calc(14px * var(--u));
    border-radius: calc(12px * var(--u));
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.22);
}

.ir-painting-card .ir-knowledge-icon {
    font-size: calc(24px * var(--u));
}

.ir-painting-info {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--u));
    min-width: 0;
}

.ir-painting-title {
    font-size: calc(17px * var(--u));
    font-weight: 400;
    line-height: 1.25;
    color: #f3e9d2;
}

.ir-painting-meta {
    font-family: var(--wc-mono);
    font-size: calc(10.5px * var(--u));
    letter-spacing: calc(1px * var(--u));
    color: var(--ir-muted);
}

.ir-close-btn {
    display: block;
    width: 100%;
    margin-top: calc(14px * var(--u));
    padding: calc(13px * var(--u));
    border-radius: calc(16px * var(--u));
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4);
    text-align: center;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(11px * var(--u));
    letter-spacing: calc(1.8px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

/* ---------- the ☰ menu: topics, collections (wisdom paths), authors, speed read ---------- */
.ir-menu {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    justify-content: center;
    background: rgba(3, 6, 4, 0.78);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ir-menu.is-open {
    opacity: 1;
}

.ir-menu-panel {
    display: flex;
    flex-direction: column;
    width: min(100%, calc(760px * var(--u)));
    min-height: 0;
    padding: calc(env(safe-area-inset-top) + 66px * var(--u)) calc(16px * var(--u)) calc(env(safe-area-inset-bottom) + 14px * var(--u));
}

.ir-menu-title {
    margin: 0 0 calc(14px * var(--u));
    animation: none;
    text-align: center;
    font-family: var(--wc-serif);
    font-size: calc(22px * var(--u));
    letter-spacing: normal;
    text-transform: none;
    color: #f3e9d2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.ir-tabs {
    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);
}

.ir-tab {
    flex: 1;
    min-height: calc(40px * var(--u));
    padding: calc(8px * var(--u));
    border-radius: calc(14px * var(--u));
    border: 1px solid transparent;
    text-align: center;
    font-family: var(--wc-mono);
    font-size: calc(10.5px * var(--u));
    letter-spacing: calc(1.5px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.ir-tab.is-active {
    border-color: rgba(255, 215, 0, 0.55);
    background: rgba(34, 27, 7, 0.7);
    font-weight: 700;
    color: var(--wc-gold);
}

.ir-menu-body {
    flex: 1;
    min-height: 0;
    padding: calc(4px * var(--u)) 0 calc(14px * var(--u));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}

.ir-topics,
.ir-paths {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--u)), 1fr));
    gap: calc(10px * var(--u));
}

.ir-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--u));
    min-height: calc(92px * var(--u));
    padding: calc(14px * var(--u)) calc(10px * var(--u));
    border-radius: calc(18px * var(--u));
    background: var(--wc-glass);
    border: 1px solid var(--wc-hairline);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.ir-topic:active,
.ir-path:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .ir-topic:hover,
    .ir-path:hover {
        border-color: rgba(255, 215, 0, 0.6);
    }
}

.ir-topic-icon {
    font-size: calc(28px * var(--u));
    line-height: 1;
}

.ir-topic-name {
    font-size: calc(15px * var(--u));
    line-height: 1.2;
    text-align: center;
    color: #f3e9d2;
}

.ir-path {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(8px * var(--u));
    min-height: calc(116px * var(--u));
    padding: calc(14px * var(--u)) calc(10px * var(--u));
    border-radius: calc(18px * var(--u));
    background: rgba(8, 10, 7, 0.74);
    background: linear-gradient(135deg, color-mix(in srgb, var(--a) 50%, transparent), rgba(6, 5, 3, 0.72), color-mix(in srgb, var(--b) 42%, transparent));
    border: 1px solid var(--wc-hairline);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.ir-path.is-current {
    border-color: var(--wc-gold);
}

.ir-path-mark {
    position: absolute;
    top: calc(8px * var(--u));
    right: calc(10px * var(--u));
    font-style: normal;
    font-size: calc(12px * var(--u));
    color: var(--wc-gold);
}

.ir-path-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50px * var(--u));
    height: calc(50px * var(--u));
    border-radius: 50%;
    background: rgba(10, 10, 7, 0.8);
    border: 1px solid rgba(255, 210, 122, 0.45);
    font-size: calc(24px * var(--u));
    line-height: 1;
    box-shadow: 0 0 14px color-mix(in srgb, var(--b) 50%, transparent);
}

.ir-path-name {
    font-size: calc(14.5px * var(--u));
    line-height: 1.2;
    text-align: center;
    color: #f3e9d2;
}

.ir-path-rule {
    width: calc(28px * var(--u));
    height: 1px;
    background: rgba(255, 215, 0, 0.45);
}

.ir-soon {
    padding: calc(40px * var(--u)) 0;
    text-align: center;
    font-size: calc(16px * var(--u));
    font-style: italic;
    color: var(--wc-cream-soft);
}

/* an account without Premium: choosing a Topic or a Collection is Premium only, so each card wears a small gem */
.ir-topics.is-locked .ir-topic::after,
.ir-paths.is-locked .ir-path::after {
    content: '';
    position: absolute;
    top: calc(8px * var(--u));
    right: calc(9px * var(--u));
    width: calc(14px * var(--u));
    height: calc(14px * var(--u));
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd98a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.5h11.6L22 9.4 12 21 2 9.4l4.2-5.9z'/%3E%3Cpath d='M2 9.4h20M8.8 3.5 7.4 9.4 12 21l4.6-11.6-1.4-5.9'/%3E%3C/svg%3E");
    opacity: 0.85;
    pointer-events: none;
}

.ir-speed-toggle {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--u));
    width: 100%;
    padding: calc(14px * var(--u)) calc(16px * var(--u));
    border-radius: calc(18px * var(--u));
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4);
    text-align: left;
}

.ir-speed-toggle.is-active {
    background: rgba(184, 134, 11, 0.3);
    border-color: var(--wc-gold);
}

.ir-speed-bolt {
    font-size: calc(24px * var(--u));
}

.ir-speed-copy {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--u));
    min-width: 0;
}

.ir-speed-copy strong {
    font-family: var(--wc-sans);
    font-size: calc(15px * var(--u));
    color: var(--wc-gold);
}

.ir-speed-copy span {
    font-family: var(--wc-sans);
    font-size: calc(12.5px * var(--u));
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- share as image ---------- */
.ir-share {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16px * var(--u));
    background: rgba(3, 6, 4, 0.74);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ir-share.is-open {
    opacity: 1;
}

.ir-share-panel {
    width: min(100%, calc(540px * var(--u)));
    max-height: 100%;
    overflow-y: auto;
    padding: calc(20px * var(--u));
    border-radius: calc(24px * var(--u));
    background: linear-gradient(to bottom, rgba(24, 17, 5, 0.96), rgba(3, 6, 4, 0.98));
    border: 1px solid var(--wc-hairline);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.ir-share-sub {
    margin: calc(-6px * var(--u)) 0 calc(14px * var(--u));
    text-align: center;
    font-size: calc(14px * var(--u));
    font-style: italic;
    color: var(--wc-cream-soft);
}

.ir-formats {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--u));
}

.ir-formats.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

.ir-format {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--u));
    padding: calc(10px * var(--u));
    border-radius: calc(16px * var(--u));
    background: var(--wc-glass);
    border: 1px solid var(--wc-hairline);
    text-align: left;
    transition: border-color 0.2s ease;
}

@media (hover: hover) {
    .ir-format:hover {
        border-color: rgba(255, 215, 0, 0.6);
    }
}

.ir-format-preview {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: calc(96px * var(--u));
    aspect-ratio: var(--ratio);
    padding: calc(8px * var(--u));
    border-radius: calc(8px * var(--u));
    background-color: #0a0a07;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 210, 122, 0.3);
    box-shadow: inset 0 0 0 100vmax rgba(3, 6, 4, 0.4);
    overflow: hidden;
}

.ir-format-preview > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-align: center;
    font-size: calc(7.5px * var(--u));
    line-height: 1.3;
    color: #f3e9d2;
}

.ir-format.is-story .ir-format-preview {
    height: calc(120px * var(--u));
}

.ir-format.is-landscape .ir-format-preview {
    height: auto;
    width: calc(150px * var(--u));
}

.ir-format-copy {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--u));
    min-width: 0;
}

.ir-format-copy strong {
    font-size: calc(17px * var(--u));
    font-weight: 400;
    color: #f3e9d2;
}

.ir-format-copy span {
    font-family: var(--wc-mono);
    font-size: calc(9.5px * var(--u));
    line-height: 1.4;
    letter-spacing: calc(1px * var(--u));
    text-transform: uppercase;
    color: var(--wc-label);
}

.ir-share-busy {
    margin: calc(12px * var(--u)) 0 0;
    text-align: center;
    font-family: var(--wc-mono);
    font-size: calc(11px * var(--u));
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold-warm);
}

.ir-share-busy[hidden] {
    display: none;
}

/* ---------- first-use tutorial ---------- */
.ir-tutorial {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px * var(--u));
    background: rgba(3, 6, 4, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.ir-tutorial.is-open {
    opacity: 1;
}

.ir-tutorial-card {
    width: min(100%, calc(380px * var(--u)));
    padding: calc(28px * var(--u)) calc(22px * var(--u)) calc(22px * var(--u));
    border-radius: calc(26px * var(--u));
    background: linear-gradient(to bottom, rgba(44, 31, 7, 0.95), rgba(8, 6, 2, 0.97));
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.ir-tutorial-card :where(p, h2) {
    margin: 0;
}

.ir-tutorial-ornament {
    margin-bottom: calc(10px * var(--u));
    font-size: calc(14px * var(--u));
    letter-spacing: calc(4px * var(--u));
    color: var(--wc-gold);
}

.ir-tutorial-title {
    animation: none;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: calc(15px * var(--u));
    letter-spacing: calc(2.4px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold);
}

.ir-tutorial-sub {
    margin: calc(8px * var(--u)) 0 calc(18px * var(--u));
    font-style: italic;
    font-size: calc(16px * var(--u));
    color: var(--wc-cream-soft);
}

.ir-tutorial-gestures {
    display: flex;
    justify-content: center;
    gap: calc(28px * var(--u));
    margin-bottom: calc(16px * var(--u));
}

.ir-tutorial-gestures span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6px * var(--u));
}

.ir-tutorial-gestures i {
    font-style: normal;
    font-size: calc(26px * var(--u));
}

.ir-tutorial-gestures b {
    font-family: var(--wc-mono);
    font-weight: 400;
    font-size: calc(10.5px * var(--u));
    letter-spacing: calc(1.4px * var(--u));
    text-transform: uppercase;
    color: var(--ir-text);
}

.ir-tutorial-tap {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--u));
    margin-bottom: calc(10px * var(--u));
    padding: calc(10px * var(--u)) calc(14px * var(--u));
    border-radius: calc(14px * var(--u));
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-align: left;
    font-size: calc(15px * var(--u));
    color: #f3e9d2;
}

.ir-tutorial-tap i {
    font-style: normal;
    font-size: calc(24px * var(--u));
}

.ir-tutorial-keys {
    margin-bottom: calc(14px * var(--u));
    font-family: var(--wc-mono);
    font-size: calc(9.5px * var(--u));
    letter-spacing: calc(1px * var(--u));
    color: var(--wc-label);
}

.ir-tutorial-dismiss {
    font-family: var(--wc-mono);
    font-size: calc(10.5px * var(--u));
    letter-spacing: calc(1.6px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold-warm);
}

/* ---------- the site's "+1 Energy" levelling pop-up never shows over the reader (the energy is still counted) ---------- */
html.ir-open .energy-notification {
    display: none !important;
}

/* ---------- toast ---------- */
.ir-toast {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 236px * var(--u));
    z-index: 70;
    max-width: min(92%, calc(520px * var(--u)));
    padding: calc(10px * var(--u)) calc(18px * var(--u));
    border-radius: 999px;
    background: rgb(9, 11, 8);
    border: 1px solid rgba(255, 210, 122, 0.4);
    text-align: center;
    font-family: var(--wc-mono);
    font-size: calc(10.5px * var(--u));
    line-height: 1.4;
    letter-spacing: calc(1.2px * var(--u));
    text-transform: uppercase;
    color: var(--wc-gold-warm);
    opacity: 0;
    transform: translate(-50%, calc(10px * var(--u)));
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.ir-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ir-root.is-bare .ir-toast,
.ir-root.has-sheet .ir-toast {
    bottom: calc(env(safe-area-inset-bottom) + 90px * var(--u));
}

/* ---------- compact: landscape phones and short windows ---------- */
@media (max-height: 560px) {
    .ir-root {
        --ir-pad-top: calc(60px * var(--u));
        --ir-pad-bottom: calc(176px * var(--u));
    }

    .ir-plaque-row {
        display: none;
    }

    .ir-actions {
        gap: calc(14px * var(--u));
        margin-bottom: calc(34px * var(--u));
    }

    .ir-round {
        width: calc(42px * var(--u));
        height: calc(42px * var(--u));
    }

    .ir-round svg {
        width: calc(21px * var(--u));
        height: calc(21px * var(--u));
    }

    .ir-dock {
        padding: calc(8px * var(--u)) calc(12px * var(--u));
    }

    .ir-nav {
        padding: calc(8px * var(--u)) calc(4px * var(--u));
    }

    .ir-toast {
        bottom: calc(env(safe-area-inset-bottom) + 176px * var(--u));
    }
}

/* a wide and short window (a phone on its side): the actions stand in a column at the edge, the dock keeps the bottom */
@media (max-height: 560px) and (min-width: 620px) {
    .ir-root {
        --ir-pad-bottom: calc(138px * var(--u));
    }

    .ir-bottom {
        width: 100%;
        padding-left: max(calc(16px * var(--u)), env(safe-area-inset-left));
        padding-right: max(calc(16px * var(--u)), env(safe-area-inset-right));
    }

    .ir-dock {
        width: min(100%, calc(560px * var(--u)));
        margin: 0 auto;
    }

    .ir-actions {
        position: absolute;
        right: max(calc(16px * var(--u)), env(safe-area-inset-right));
        bottom: calc(env(safe-area-inset-bottom) + 12px * var(--u));
        flex-direction: column;
        gap: calc(10px * var(--u));
        margin: 0;
    }

    .ir-toast {
        bottom: calc(env(safe-area-inset-bottom) + 136px * var(--u));
    }
}

@media (max-width: 380px) {
    .ir-nav-label {
        letter-spacing: calc(0.6px * var(--u));
    }

    .ir-actions {
        gap: calc(16px * var(--u));
    }
}

/* ---------- the entry buttons on the page: the wisdom card's pills and the profile's shortcuts ---------- */
.aws-listen-row {
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ir-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--at-gold-dim, rgba(255, 215, 0, 0.55));
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.06);
    color: var(--at-gold, #ffd700);
    font-family: var(--at-mono, 'Space Mono', 'Courier New', monospace);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backdrop-filter: var(--at-blur, blur(12px));
    backdrop-filter: var(--at-blur, blur(12px));
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ir-open-btn:hover {
    border-color: var(--at-gold, #ffd700);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.25);
    transform: translateY(-1px);
}

.ir-open-btn:focus-visible {
    outline: 2px solid var(--at-gold, #ffd700);
    outline-offset: 3px;
}

.ir-open-icon {
    font-size: 1rem;
    line-height: 1;
}

.profile-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.profile-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 14px;
    background: rgba(255, 215, 0, 0.08);
    color: var(--at-gold, #ffd700);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.profile-shortcut:hover {
    border-color: var(--at-gold, #ffd700);
    background: rgba(255, 215, 0, 0.14);
}

.profile-shortcut-icon {
    font-size: 1.2rem;
}

/* ---------- reduced motion: nothing moves, the hint only fades ---------- */
@media (prefers-reduced-motion: reduce) {
    .ir-swipe:not(.is-dragging),
    .ir-insights,
    .ir-menu,
    .ir-share,
    .ir-tutorial,
    .ir-glass,
    .ir-round,
    .ir-toast {
        transition: none;
    }

    .ir-root.is-listening .ir-halo {
        animation: none;
        opacity: 0.5;
    }

    .ir-root.is-hinting .ir-swipe,
    .ir-hint.is-playing .ir-hint-thread,
    .ir-hint.is-playing .ir-hint-ember,
    .ir-hint.is-playing .ir-hint-trail-l,
    .ir-hint.is-playing .ir-hint-trail-r,
    .ir-hint.is-playing .ir-hint-ripple,
    .ir-hint.is-playing .ir-hint-chev-l,
    .ir-hint.is-playing .ir-hint-chev-r {
        animation: none;
    }

    .ir-hint.is-playing {
        animation: ir-hint-still 3.6s ease both;
    }

    @keyframes ir-hint-still {
        0% { opacity: 0; }
        20%, 80% { opacity: 1; }
        100% { opacity: 0; }
    }
}