/* public/css/10-oracle.css — The Oracle section
 *
 * Part of the old public/oracle.css, which reached 4,761 lines. Split at its own section
 * boundaries; no rule was reordered, reindented or rewritten, so the cascade is unchanged.
 * THE FILES ARE ORDER-DEPENDENT. index.html links them in numeric order and that order is the
 * cascade — concatenating them in it reproduces the original file byte for byte, which is
 * asserted in test/stylesheet.test.js. Renumbering or reordering the <link> tags changes which
 * rules win.
 *
 * The ask flow and its three numbered steps, the colour gate, the offering gate, the sigil and
 * its idle animation, the arcane dividers, and the reading history.
 */
        /* ======================
           ORACLE STYLES
           ====================== */

        .oracle-section {
            margin-bottom: 0.8rem;
        }
        .oracle-header {
            text-align: center;
            margin-bottom: 1.2rem;
        }
        .oracle-header h2 {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--accent-purple);
            letter-spacing: 0.08em;
            text-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
            margin-bottom: 0;
        }
        .oracle-submit {
            align-self: flex-end;
            padding: 0.45rem 1.2rem;
            background: rgba(167, 139, 250, 0.08);
            border: 1px solid var(--accent-purple);
            border-radius: 2px;
            color: var(--accent-purple);
            font-family: var(--mono);
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
        }
        .oracle-submit:hover { background: rgba(167, 139, 250, 0.15); box-shadow: 0 0 12px rgba(167,139,250,0.2); }
        .oracle-submit:disabled { opacity: 0.4; cursor: not-allowed; }

        /* Oracle response */
        .oracle-response-card {
            position: relative;
            background: linear-gradient(135deg, rgba(255, 140, 50, 0.05) 0%, rgba(12, 14, 26, 0.9) 100%);
            border: 1px solid rgba(255, 140, 50, 0.14);
            border-radius: 14px;
            padding: 1rem 1.2rem;
            margin-bottom: 0.8rem;
            animation: fadeIn 0.4s ease both;
        }
        .oracle-tts-btn {
            display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.25rem 0.6rem; background: rgba(167,139,250,0.06);
            border: 1px solid var(--accent-cyan); border-radius: 3px;
            color: var(--accent-cyan); font-family: var(--mono);
            font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
            cursor: pointer; transition: all 0.2s ease;
        }
        .oracle-tts-btn:hover { background: rgba(167,139,250,0.12); }
        .oracle-tts-btn.playing { background: rgba(167,139,250,0.12); }
        .planet-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.2rem 1rem;
            font-size: 0.75rem;
        }
        .planet-row {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0;
        }
        .planet-name { color: var(--text-dim); }
        .planet-sign { color: var(--text-secondary); }
        .planet-sign.retrograde { color: var(--accent-red); }

        /* Oracle history */
        .oracle-history-card {
            background: var(--bg-card-alt);
            border: 1px solid var(--border);
            border-radius: 2px;
            padding: 1rem;
            margin-bottom: 0.8rem;
        }
        .oracle-history-card h3 {
            font-size: 0.65rem;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 0.6rem;
        }
        .oracle-past-entry {
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(20, 24, 37, 0.4);
            font-size: 0.88rem;
        }
        .oracle-past-entry:last-child { border-bottom: none; }
        .oracle-past-q { color: var(--text-dim); font-style: italic; margin-bottom: 0.2rem; font-size: 0.82rem; }
        .oracle-past-q::before { content: '> '; color: var(--accent-purple); opacity: 0.62; font-style: normal; }
        .oracle-past-a { color: var(--text-secondary); line-height: 1.6; }
        .oracle-past-meta { font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.24rem; opacity: 0.82; }
        /* .oracle-past-card { text-align: center; padding: 0.6rem 0; margin-bottom: 0.4rem; border-bottom: 1px solid rgba(167,139,250,0.15); } */
        .oracle-past-card-emoji { font-size: 2.2rem; margin-bottom: 0.3rem; }

        /* Oracle loading state */
        .oracle-loading {
            text-align: center;
            padding: 1.5rem 0;
            color: var(--text-dim);
            font-size: 0.8rem;
        }
        .oracle-loading .spinner {
            display: inline-block; width: 16px; height: 16px;
            border: 1px solid var(--border); border-top-color: var(--accent-purple);
            border-radius: 50%; animation: spin 0.8s linear infinite;
        }
        .oracle-error {
            font-size: 0.82rem;
            color: var(--accent-red);
            padding: 0.5rem 0;
            opacity: 0.9;
        }

        .oracle-usage {
            margin-top: 0.45rem;
            font-size: 0.7rem;
            line-height: 1.55;
            letter-spacing: 0.03em;
            color: var(--text-secondary);
            text-transform: none;
            max-width: 38ch;
            margin-left: auto;
            margin-right: auto;
        }
        .oracle-usage.limited {
            color: var(--accent-red);
        }
        /* .oracle-source-tag {
            display: inline-block;
            font-size: 0.62rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 0.1rem 0.4rem;
            border-radius: 2px;
            font-family: var(--mono);
            vertical-align: middle;
            margin-left: 0.3rem;
        }
        .oracle-source-tag.roo { background: rgba(52,211,153,0.1); border: 1px solid var(--accent-green); color: var(--accent-green); }
        .oracle-source-tag.gemini { background: rgba(167,139,250,0.08); border: 1px solid var(--accent-purple); color: var(--accent-purple); } */

        /* Oracle polling progress */
        .oracle-polling-bar {
            height: 2px;
            background: var(--border);
            border-radius: 1px;
            overflow: hidden;
            margin-top: 0.8rem;
        }
        .oracle-polling-bar .fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-purple), var(--accent-green));
            transition: width 0.3s ease;
        }
        .oracle-polling-status {
            font-size: 0.72rem;
            color: var(--text-secondary);
            margin-top: 0.3rem;
            font-family: var(--mono);
        }
        .oracle-fallback-btn {
            display: inline-block;
            margin-top: 0.5rem;
            padding: 0.3rem 0.8rem;
            background: rgba(167, 139, 250, 0.06);
            border: 1px solid var(--accent-purple);
            border-radius: 2px;
            color: var(--accent-purple);
            font-family: var(--mono);
            font-size: 0.62rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
        }
        .oracle-fallback-btn:hover { background: rgba(167, 139, 250, 0.12); }

        /* ======================
           COLOUR GATE — V10.8
           ====================== */
        .colour-gate {
            text-align: center;
            padding: 1.5rem 0;
            border: none;
            border-radius: 0;
            background: transparent;
            margin-bottom: 1.2rem;
        }
        .colour-gate-icon {
            display: block;
            font-size: 1.8rem;
            margin-bottom: 0.6rem;
            opacity: 0.7;
        }
        .colour-gate-prompt {
            font-size: 0.76rem;
            color: var(--text-secondary);
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-bottom: 0.6rem;
            display: block;
        }
        .colour-gate-hint {
            font-size: 0.69rem;
            color: var(--text-secondary);
            opacity: 0.82;
            margin-bottom: 1rem;
            font-style: italic;
        }
        .colour-gate-slots {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            margin-bottom: 1.2rem;
        }
        .colour-gate-slot {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px dashed rgba(167, 139, 250, 0.35);
            background: rgba(167, 139, 250, 0.04);
            transition: all 0.25s ease;
            cursor: pointer;
            position: relative;
        }
        .colour-gate-slot.filled {
            border-style: solid;
            border-color: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }
        .colour-gate-slot.filled:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }
        .colour-gate-slot-num {
            position: absolute;
            bottom: -16px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.62rem;
            color: var(--text-dim);
            opacity: 0.5;
        }
        .colour-gate-palette {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            max-width: 300px;
            margin: 0 auto 1rem;
        }
        .colour-gate-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.15);
            cursor: pointer;
            transition: all 0.15s ease;
            position: relative;
        }
        .colour-gate-btn:hover {
            transform: scale(1.15);
            border-color: rgba(255,255,255,0.5);
            box-shadow: 0 0 12px currentColor;
        }
        .colour-gate-btn:active { transform: scale(0.95); }
        .colour-gate-btn[data-colour="red"]    { background: #e53e3e; color: #e53e3e; }
        .colour-gate-btn[data-colour="yellow"] { background: #ecc94b; color: #ecc94b; }
        .colour-gate-btn[data-colour="green"]  { background: #38a169; color: #38a169; }
        .colour-gate-btn[data-colour="blue"]   { background: #3182ce; color: #3182ce; }
        .colour-gate-btn[data-colour="purple"] { background: #805ad5; color: #805ad5; }
        .colour-gate-btn[data-colour="white"]  { background: #e2e8f0; color: #e2e8f0; }
        .colour-gate-msg {
            font-size: 0.74rem;
            color: var(--text-secondary);
            letter-spacing: 0.06em;
            min-height: 1.2rem;
            transition: color 0.3s;
        }
        .colour-gate-msg.error { color: var(--accent-red); opacity: 0.8; }
        .colour-gate-msg.success { color: var(--accent-green); }
        .colour-gate-reset {
            font-size: 0.66rem;
            color: var(--text-secondary);
            opacity: 0.62;
            cursor: pointer;
            margin-top: 0.3rem;
            display: none;
        }
        .colour-gate-reset:hover { opacity: 0.8; }
        /* ── The one way past the gate that is not the code ──
              Deliberately the quietest thing in this box: it is an exception, not an
              alternative, and anything with the weight of a button beside the colour slots
              would read as "or just click here", which is the opposite of what a gate is for.
              So it wears the reset link's treatment rather than the palette buttons'.
              A real <button> rather than a styled div, because it performs an action and has to
              be reachable from a keyboard — the gate is the one screen where somebody who
              cannot use the colour picker most needs the way out. */
        .colour-gate-birthday {
            margin-top: 0.6rem;
            padding: 0;
            background: none;
            border: none;
            font-family: inherit;
            font-size: 0.66rem;
            color: var(--text-secondary);
            opacity: 0.62;
            cursor: pointer;
        }
        .colour-gate-birthday:hover { opacity: 0.85; }
        @keyframes colourGateShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-4px); }
            40% { transform: translateX(4px); }
            60% { transform: translateX(-3px); }
            80% { transform: translateX(3px); }
        }
        .colour-gate-shake {
            animation: colourGateShake 0.4s ease;
        }

        /* ══════ FRAMING CHIPS — step 1 ══════
              The five taps that replaced a required textarea. Wrapping chips rather than the
              offering's 2-column grid, because these are sentences of very different lengths
              ("I feel stuck" against "I'm waiting on something") and a grid would either
              stretch the short ones across half the modal or wrap the long ones to two lines
              in a box sized for one. Flex-wrap lets each be its own width, which also stops
              them reading as a rigid multiple-choice question — they are prompts, and the
              textarea underneath is still open.

              Borrows .offering-btn's palette on purpose: same modal, same gesture (tap to
              choose one), so they should look like siblings rather than two design systems
              a step apart. */
        .framing-options {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.4rem;
            margin-bottom: 0.6rem;
        }
        .framing-btn {
            padding: 0.42rem 0.7rem;
            border: 1px solid rgba(167, 139, 250, 0.18);
            border-radius: 999px;
            background: rgba(167, 139, 250, 0.04);
            color: var(--text-secondary);
            font-family: var(--mono);
            font-size: 0.68rem;
            line-height: 1.2;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .framing-btn:hover {
            background: rgba(167, 139, 250, 0.12);
            border-color: rgba(167, 139, 250, 0.4);
            color: var(--text-primary);
        }
        .framing-btn:active { transform: scale(0.96); }
        .framing-btn.selected {
            border-color: var(--accent-purple);
            background: rgba(167, 139, 250, 0.15);
            color: var(--text-primary);
            box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
        }

        /* ======================
           OFFERING GATE — V10.7
           ====================== */
        .offering-gate {
            text-align: center;
            padding: 1.2rem 1rem;
            animation: fadeIn 0.5s ease both;
        }
        .offering-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            max-width: 320px;
            margin: 0 auto;
        }
        .offering-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            padding: 0.65rem 0.6rem;
            border: 1px solid rgba(167, 139, 250, 0.18);
            border-radius: 8px;
            background: rgba(167, 139, 250, 0.04);
            color: var(--text-primary);
            font-family: var(--mono);
            font-size: 0.72rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .offering-btn:hover {
            background: rgba(167, 139, 250, 0.12);
            border-color: rgba(167, 139, 250, 0.4);
        }
        .offering-btn:active { transform: scale(0.96); }
        .offering-btn.selected {
            border-color: var(--accent-purple);
            background: rgba(167, 139, 250, 0.15);
            box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
        }
        .offering-text {
            font-size: 0.68rem;
            color: var(--text-secondary);
            letter-spacing: 0.06em;
            font-family: var(--mono);
        }

        /* ======================
           ARCANE DIVIDERS — V13
           ====================== */
        .arcane-divider {
            text-align: center;
            margin: 1.2rem 0;
            font-size: 0.75rem;
            color: rgba(167,139,250,0.6);
            letter-spacing: 0.3em;
            opacity: 0.62;
        }
        .divider-line {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin: 1.8rem 0;
            opacity: 0.62;
        }
        .divider-line::before, .divider-line::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--accent-purple), transparent);
        }
        .divider-line span {
            font-size: 0.62rem;
            color: var(--text-dim);
            letter-spacing: 0.3em;
        }
        .offering-accepted {
            margin-top: 0.8rem;
            animation: fadeIn 0.5s ease both;
        }
        .offering-accepted-text {
            font-size: 0.68rem;
            color: var(--accent-purple);
            letter-spacing: 0.1em;
            opacity: 0.8;
        }

        /* ======================
           SIGIL IDLE ANIMATION — V11
           ====================== */
        @keyframes sigilOuterRotate {
            from { transform: rotate(0deg); }
            to   { transform: rotate(-360deg); }
        }
        @keyframes sigilOrbitMoon {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes sigilOrbitDiamond {
            from { transform: rotate(0deg); }
            to   { transform: rotate(-360deg); }
        }
        @keyframes sigilOrbitTriangle {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes sigilPulse {
            0%, 100% { opacity: 0.22; }
            50%       { opacity: 0.40; }
        }
        .sigil-outer-ring {
            transform-origin: 120px 120px;
            animation: sigilOuterRotate 30s linear infinite;
            opacity: 0.95;
            filter: drop-shadow(0 0 10px rgba(94,234,212,0.25));
        }
        .sigil-orbit-dot {
            transform-origin: 120px 120px;
        }
        .sigil-orbit-dot.orbit-moon {
            animation: sigilOrbitMoon 30s linear infinite;
        }
        .sigil-orbit-dot.orbit-diamond {
            animation: sigilOrbitDiamond 18s linear infinite;
        }
        .sigil-orbit-dot.orbit-triangle {
            animation: sigilOrbitTriangle 12s linear infinite;
        }
        .sigil-idle-pulse {
            animation: sigilPulse 4s ease-in-out infinite;
        }
        .sigil-wrapper {
            opacity: 0.75;
        }

        /* 3-part reading sections */

        /* ══ The Ask flow — three numbered steps, all on one screen ══
              Replaces a reveal sequence where each step only existed once you'd cleared the
              one before, so you couldn't see the shape of the thing until you were nearly
              through it. Numbers instead of reveals: the flow is legible immediately, and the
              only thing that changes is which steps are ticked. */
        .ask-step {
            position: relative;
            padding: 0 0 1rem 0;
        }
        .ask-step + .ask-step { padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.05); }
        .ask-step-head {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .ask-step-num {
            flex-shrink: 0;
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 0.66rem;
            font-weight: 600;
            color: var(--text-dim);
            border: 1px solid rgba(255,255,255,0.14);
            transition: all 0.25s ease;
        }
        .ask-step-title {
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        /* Ticked off. The number becomes a check so the eye can count what's left at a glance
           without reading any of it. */
        .ask-step.done .ask-step-num {
            color: var(--bg-deep);
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
            font-size: 0;
        }
        .ask-step.done .ask-step-num::after { content: '✓'; font-size: 0.7rem; font-weight: 700; }
        .ask-step.done .ask-step-title { color: var(--text-dim); }
        .ask-step.active .ask-step-num {
            color: var(--accent-purple);
            border-color: var(--accent-purple);
            box-shadow: 0 0 12px rgba(167,139,250,0.35);
        }
        .ask-step.active .ask-step-title { color: var(--accent-purple); }
        /* Held the sigil without paying — say which step is missing rather than ignoring the
           touch, which is what it used to do. */
        @keyframes askNudge {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        .ask-step-nudge { animation: askNudge 0.35s ease-in-out 1; }
        .ask-step-nudge .ask-step-num {
            border-color: var(--accent-amber);
            color: var(--accent-amber);
        }
        .ask-step .about-you-input { margin-top: 0.5rem; }
        /* Rounded like everything else on the page now — the 2px corners here were the last
           trace of the older, squarer chrome, and inside a 16px-radius modal they read as
           unfinished rather than as a deliberate contrast. */
        .optional-question-textarea {
            width: 100%;
            box-sizing: border-box;
            background: var(--bg-deep);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            font-family: var(--mono);
            font-size: 0.82rem;
            padding: 0.55rem 0.7rem;
            resize: none;
            min-height: 2.8rem;
            max-height: 6rem;
            line-height: 1.5;
            transition: border-color 0.2s;
        }
        .optional-question-textarea::placeholder { color: var(--text-dim); font-style: italic; }
        .optional-question-textarea:focus { outline: none; border-color: rgba(167,139,250,0.45); }

        /* (arcane-divider-v10 removed — consolidated into .arcane-divider above) */

        /* Compass linked badge */