/* daily.html — page-only styles. Shared pieces live in components.css. */

/* ==========================================================================
   PROSPEROUSPARTNER CYCLE - Thematic Harmony (Light Parchment Default)
   ========================================================================== */
.pp-cycle-page {
    /* Translucent "glass" surfaces so the base-template background shows through.
       Lower alpha = more see-through. Tune here only. */
    --glass-outer: rgb(var(--tint-paper) / 0.16);
    --glass-section: rgb(var(--tint-white) / 0.32);
    --glass-tile: rgb(var(--tint-white) / 0.45);
    --glass-panel: rgb(var(--tint-white) / 0.72);
    --glass-blur: blur(1.5px);
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 48px 16px;
    box-sizing: border-box;
}

/* --- Brand Emblem Block --- */
.brand-hero-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 580px;
    margin: 0 auto 24px auto;
}

.brand-emblem-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 16px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emblem-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.emblem-layer.mid {
    animation: breathGlow 3s ease-in-out infinite;
}

.emblem-layer.top {
    width: 28%;
    height: 28%;
    position: static;
    animation: spinAxis 8s linear infinite;
}

.cycle-main-title {
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--ink-dark);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-family: inherit;
}

/* --- Main Cycle Card Container --- */
.cycle-card-container {
    width: 100%;
    max-width: 540px;
    background: var(--glass-outer);
    border: 1px solid var(--ink-border-wash);
    border-radius: 18px;
    padding: 24px 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: visible;
}

/* ==========================================================================
   1. MECHANICAL SPLIT-FLAP FLIP CLOCK CENTERPIECE
   ========================================================================== */
.flipclock-center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--glass-section);
    border: 1px solid var(--ink-border-wash);
    border-radius: 14px;
    padding: 16px 14px 14px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.flipclock-center-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(179, 136, 47, 0.45), transparent);
}

.flipclock-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(179, 136, 47, 0.1);
    border: 1px solid rgba(179, 136, 47, 0.3);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 12px;
}

.flipclock-date-chip .date-icon {
    width: 14px;
    height: 14px;
    color: var(--ink-gold);
}

.flipclock-date-chip .live-date-val {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--ink-gold);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.flipclock-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    user-select: none;
    perspective: 800px;
}

.flip-unit-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flip-digit-pair {
    display: flex;
    gap: 4px;
}

/* 3D Split-Flap Card Leaf */
.flip-card-leaf {
    position: relative;
    width: clamp(34px, 7.5vw, 44px);
    height: clamp(50px, 11vw, 64px);
    background: #141311;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    perspective: 350px;
    transform-style: preserve-3d;
    user-select: none;
}

/* Mechanical Side Hinge Pins */
.flip-card-leaf::before,
.flip-card-leaf::after {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    width: 3.5px;
    height: 6px;
    background: #b3882f;
    border-radius: 1px;
    z-index: 25;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.flip-card-leaf::before { left: -1px; }
.flip-card-leaf::after { right: -1px; }

/* The Center Split Seam across the leaf */
.flip-card-leaf .flip-seam {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #000000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
    z-index: 20;
    pointer-events: none;
}

/* Half Plate Base */
.flip-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #2b2823 0%, #1a1916 100%);
    border: 1px solid rgba(179, 136, 47, 0.35);
    box-sizing: border-box;
}

.flip-half.upper-back,
.flip-half.upper-flap {
    top: 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.8);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    transform-origin: 50% 100%; 
}

.flip-half.lower-back,
.flip-half.lower-flap {
    bottom: 0;
    border-top: 0.5px solid rgb(var(--tint-white) / 0.08);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    transform-origin: 50% 0%; 
}

/* Digit Text Formatting & Alignment across the split seam */
.flip-half .digit-text {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(50px, 11vw, 64px);
    box-sizing: border-box;
    /* Glyph lifted and enlarged so the upper half shows more of the digit
       (less empty space above it). Same box in both halves keeps the seam aligned. */
    padding-bottom: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.05rem, 6vw, 2.75rem);
    font-weight: 900;
    color: #fcf9f2;
    font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    font-variant-numeric: tabular-nums;
}

.flip-half.upper-back .digit-text,
.flip-half.upper-flap .digit-text {
    top: -1px; 
}

.flip-half.lower-back .digit-text,
.flip-half.lower-flap .digit-text {
    bottom: -1px;
}

/* Static Back Plates */
.flip-half.upper-back { z-index: 1; }
.flip-half.lower-back { z-index: 1; }

/* Animated Flaps (Upper flaps forward downward, Lower drops in) */
.flip-half.upper-flap {
    z-index: 8;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateX(0deg);
}

.flip-half.lower-flap {
    z-index: 9;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateX(90deg);
}

/* Active Flip State: Top half flips forward down towards viewer */
.flip-card-leaf.is-flipping .upper-flap {
    animation: flipForwardTop 0.18s cubic-bezier(0.45, 0, 1, 1) forwards;
}

.flip-card-leaf.is-flipping .lower-flap {
    animation: flipForwardBottom 0.18s cubic-bezier(0, 0, 0.55, 1) 0.17s forwards;
}

@keyframes flipForwardTop {
    0% {
        transform: rotateX(0deg);
        filter: brightness(1);
    }
    100% {
        transform: rotateX(-90deg);
        filter: brightness(0.55);
    }
}

@keyframes flipForwardBottom {
    0% {
        transform: rotateX(90deg);
        filter: brightness(1.3);
    }
    100% {
        transform: rotateX(0deg);
        filter: brightness(1);
    }
}

.flip-colon {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ink-gold);
    margin: 0 1px 16px 1px;
    animation: colonPulse 1s ease-in-out infinite;
    user-select: none;
}

@keyframes colonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.flip-unit-tag {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--ink-gold);
    text-transform: uppercase;
    margin-top: 6px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   2. FLAME HUD - Energy Resonance & Boost (dual-ring flame display)
   Centre:  "[Today]% ➔ [Boosted]%" with icy / fiery burning text
   Inner:   blue flames pointing inward from the white band
   Band:    luminous white track with the PP Code revolving along it
   Outer:   red flames + embers erupting outward
   Flames, smoke and sparks are a WebGL shader on <canvas> (pp-flame-hud
   script; Canvas 2D fallback); the band and rotating code are SVG so the
   text stays crisp at any size.
   ========================================================================== */
.unified-resonance-card {
    background: var(--glass-section);
    border: 1px solid var(--ink-border-wash);
    border-radius: 14px;
    padding: 16px 12px 14px 12px;
    position: relative;
    overflow: visible;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.resonance-stage {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Square stage; every size inside is relative to its width (cqi).
   No border or background: the flames sit directly on the page. */
.pp-flame-hud {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    isolation: isolate;
}

.hud-flame-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.hud-flame-canvas { z-index: 1; }

/* Centre read-out */
.hud-center {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Boosted on top, up arrow, Today below */
.hud-scores {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6cqi;
}

.hud-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7cqi;
}

.hud-num {
    font-size: 8.4cqi;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.06em 0.04em;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: hudGlowPulse 3.2s ease-in-out infinite alternate;
}

/* Today: white (top) -> dark blue (bottom) */
.hud-num.is-today {
    background-image: linear-gradient(180deg, var(--ink-card-solid) 0%, #8fc4ff 28%, #1f4fd8 62%, #0b2482 100%);
}

/* Boosted: red (top) -> white (bottom) */
.hud-num.is-boost {
    background-image: linear-gradient(180deg, #b3140f 0%, #e0331f 35%, #ff9a86 72%, var(--ink-card-solid) 100%);
    animation-delay: -1.6s;
}

/* Heavy white glow */
@keyframes hudGlowPulse {
    from {
        filter: drop-shadow(0 0 0.04em #ffffff) drop-shadow(0 0 0.14em rgba(255, 255, 255, 0.95))
                drop-shadow(0 0 0.32em rgba(255, 255, 255, 0.75));
    }
    to {
        filter: drop-shadow(0 0 0.06em #ffffff) drop-shadow(0 0 0.22em rgba(255, 255, 255, 1))
                drop-shadow(0 0 0.5em rgba(255, 255, 255, 0.85));
    }
}

.hud-arrow {
    display: inline-block;
    font-size: 5.2cqi;
    font-weight: 900;
    line-height: 1;
    color: #3a3a3c;                 /* greyish black */
    transform: rotate(-90deg);      /* ➔ pointing up: Today -> Boosted */
    filter: drop-shadow(0 0 0.12em #ffffff) drop-shadow(0 0 0.3em rgba(255, 255, 255, 0.85));
    margin: 0.4cqi 0;
}

.hud-label {
    font-size: 2.5cqi;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
}

.hud-label { color: #1f4fd1; }
.hud-label.is-boost { color: #8e0b12; }

.pp-flame-hud.is-dormant .hud-num {
    animation: none;
    filter: none;
    opacity: 0.55;
}

/* Boost + PP Code caption under the HUD: "+26% BOOSTED WITH PP CODE 4827 (i)" */
.trend-surge-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(179, 136, 47, 0.1);
    border: 1px solid rgba(179, 136, 47, 0.3);
    padding: 9px 18px 8px;
    border-radius: 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    text-align: center;
    line-height: 1.2;
}

.trend-surge-chip .surge-line {
    white-space: nowrap;
}

.trend-surge-chip .surge-text,
.trend-surge-chip .surge-label {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ink-cinnabar);
}

.trend-surge-chip .surge-with {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-mountain-wash);
}

.note-pp-code-label {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-gold);
    white-space: nowrap;
}

/* PP Code on its own centred second line */
.surge-code-row {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Invisible twin of the (i) button so the number itself sits dead centre */
.surge-code-row::before {
    content: "";
    width: 8px;
    flex: 0 0 8px;                  
}

/* ---- Movable units (admin flame settings can swap them) ----
   #pp-score-unit (.hud-scores): Boosted / arrow / Today    .pp-code-unit: optional PP Mode title + PP code
   Default: scores in the ring centre, PP code in the chip below. Swapped: the reverse,
   with the scores reading left to right in the chip: Today -> Boosted.
   Text size: --pp-score-scale / --pp-code-scale, set from the admin flame settings. */
.pp-code-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pp-code-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ink-gold);
    white-space: nowrap;
}

.pp-code-title[hidden] { display: none; }

/* PP code: gold with a gradient, wherever it sits */
.note-pp-code-number {
    font-size: calc(clamp(2.1rem, 10vw, 2.8rem) * var(--pp-code-scale, 1));
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    line-height: 1.1;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: transparent;
    background-image: linear-gradient(180deg, #fff1bf 0%, #f2cd6b 30%, #c9962f 62%, #8a5d16 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(122, 82, 18, 0.25));
}

/* PP code in the ring centre (swapped): bigger, with the white HUD glow */
.hud-center .pp-code-unit { gap: 0.8cqi; }

.hud-center .note-pp-code-number {
    font-size: calc(11cqi * var(--pp-code-scale, 1));
    line-height: 1;
    filter: drop-shadow(0 0 0.05em #ffffff) drop-shadow(0 0 0.2em rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 0.4em rgba(255, 255, 255, 0.7));
}

.hud-center .pp-code-title {
    font-size: 2.6cqi;
    letter-spacing: 0.18em;
    filter: drop-shadow(0 0 0.2em #ffffff);
}

/* Score text size in the ring centre */
.hud-center .hud-num { font-size: calc(8.4cqi * var(--pp-score-scale, 1)); }
.hud-center .hud-label { font-size: calc(2.5cqi * var(--pp-score-scale, 1)); }
.hud-center .hud-arrow { font-size: calc(5.2cqi * var(--pp-score-scale, 1)); }

/* ---- Score arrangement (admin setting per location; set as data-layout on #pp-score-unit) ----
   column: bottom -> top   Boosted label, Boosted, up arrow, Today, Today label
   row:    left -> right   Today ➔ Boosted, both labels under their score */
.hud-scores[data-layout="row"] {
    flex-direction: row-reverse;
    align-items: center;
}

.hud-scores[data-layout="row"] .hud-score-block.is-boost { flex-direction: column-reverse; }

.hud-scores[data-layout="row"] .hud-arrow {
    transform: none;                    /* ➔ pointing right: Today -> Boosted */
    margin: 0;
}

.hud-scores[data-layout="column"] .hud-arrow { transform: rotate(-90deg); }   /* pointing up */

/* Ring centre, side by side */
.hud-center .hud-scores[data-layout="row"] { gap: 2cqi; }
/* Side by side needs narrower numbers to stay clear of the inner flames */
.hud-center .hud-scores[data-layout="row"] .hud-num { font-size: calc(6.8cqi * var(--pp-score-scale, 1)); }
.hud-center .hud-scores[data-layout="row"] .hud-arrow { font-size: calc(4.4cqi * var(--pp-score-scale, 1)); }

/* Scores in the chip (swapped) */
.hud-chip-slot {
    display: flex;
    justify-content: center;
}

.hud-chip-slot .hud-scores[data-layout="row"] { gap: 12px; }
.hud-chip-slot .hud-scores[data-layout="column"] { gap: 2px; }

.hud-chip-slot .hud-score-block { gap: 3px; }

.hud-chip-slot .hud-num {
    font-size: calc(clamp(1.7rem, 8vw, 2.2rem) * var(--pp-score-scale, 1));
}

.hud-chip-slot .hud-label {
    font-size: calc(0.62rem * var(--pp-score-scale, 1));
}

.hud-chip-slot .hud-arrow {
    font-size: calc(1.3rem * var(--pp-score-scale, 1));
    margin: 0;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .hud-num { animation: none; }
    .hud-num { filter: drop-shadow(0 0 0.05em #ffffff) drop-shadow(0 0 0.2em rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.42em rgba(255, 255, 255, 0.8)); }
}

/* Slightly tighter outer container on small phones gives the card more room */
@media (max-width: 420px) {
    .pp-cycle-page {
        padding-left: 10px;
        padding-right: 10px;
    }
    .cycle-card-container {
        padding: 16px 12px;
    }
}

/* ==========================================================================
   3. PP CYCLE MODE (PP Power & PP Harmony)
   ========================================================================== */
.cycle-mode-card {
    background: var(--glass-section);
    border: 1px solid var(--ink-border-wash);
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
}

.mode-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mode-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mode-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-dark);
}

/* Button Switcher (PP Power / PP Harmony) */
.mode-switch-group {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.05);
    padding: 3px;
    border-radius: 9px;
    border: 1px solid var(--ink-border-wash);
    gap: 4px;
}

.mode-switch-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-mountain-wash);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mode-switch-btn:hover {
    color: var(--ink-dark);
}

.mode-switch-btn.is-active {
    background: var(--ink-gold);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(179, 136, 47, 0.3);
}

/* ==========================================================================
   4. ALL 9 MODES / TASKS GRID
   ========================================================================== */
.tasks-grid-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.tasks-grid-hint {
    font-size: 0.72rem;
    color: var(--ink-mountain-wash);
}

.archetype-tasks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 480px) {
    .archetype-tasks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
}

.task-card-item {
    background: var(--glass-tile);
    border: 1.5px solid var(--ink-border-wash);
    border-radius: 10px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    text-align: left;
    min-width: 0;
    container-type: inline-size;
}

.task-card-item:hover {
    transform: translateY(-2px);
    border-color: var(--ink-gold);
    box-shadow: 0 4px 12px rgba(179, 136, 47, 0.18);
}

.task-card-item:focus-visible {
    outline: 2px solid var(--ink-gold);
    outline-offset: 2px;
}

/* Active Highlight in PP Harmony Mode: glowing gold border (gentle breathing) */
.task-card-item.is-selected-harmony {
    border-color: var(--ink-gold);
    background: linear-gradient(135deg, rgba(179, 136, 47, 0.12) 0%, rgba(229, 203, 143, 0.18) 100%);
    box-shadow: 0 0 0 1px rgba(229, 203, 143, 0.9), 0 0 10px 1px rgba(229, 203, 143, 0.85), 0 0 22px 3px rgba(179, 136, 47, 0.35);
    animation: ppHarmonyGlow 1.2s ease-in-out infinite alternate;
}

@keyframes ppHarmonyGlow {
    from {
        box-shadow: 0 0 0 1px rgba(229, 203, 143, 0.8), 0 0 7px 0 rgba(229, 203, 143, 0.7), 0 0 16px 2px rgba(179, 136, 47, 0.25);
    }
    to {
        box-shadow: 0 0 0 1px rgba(229, 203, 143, 1), 0 0 14px 2px rgba(229, 203, 143, 0.95), 0 0 28px 5px rgba(179, 136, 47, 0.42);
    }
}

/* Active Highlight in PP Power Mode: a glow that travels round the border.
   ::before = crisp moving light on the border line, ::after = soft halo behind
   the card following the same light. */
@property --pp-power-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.archetype-tasks-grid {
    position: relative;
    isolation: isolate;              
}

.task-card-item.is-recommended-power {
    border-color: transparent;
    background:
        linear-gradient(rgba(179, 136, 47, 0.08), rgba(179, 136, 47, 0.08)),
        linear-gradient(var(--pp-power-solid, var(--ink-card-solid)), var(--pp-power-solid, var(--ink-card-solid)));
}

.task-card-item.is-recommended-power::before,
.task-card-item.is-recommended-power::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    animation: ppPowerOrbit 2.6s linear infinite;
}

.task-card-item.is-recommended-power::before {
    inset: -2px;
    padding: 2.5px;
    background: conic-gradient(from var(--pp-power-angle),
        rgba(179, 136, 47, 0.45) 0deg 200deg,
        #e0a93a 260deg, #fff8dc 305deg, #ffe08a 325deg, #e0a93a 345deg,
        rgba(179, 136, 47, 0.45) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.task-card-item.is-recommended-power::after {
    inset: -4px;
    z-index: -1;
    background: conic-gradient(from var(--pp-power-angle),
        transparent 0deg 220deg,
        rgba(224, 169, 58, 0.9) 280deg, rgba(255, 240, 180, 1) 310deg, rgba(224, 169, 58, 0.9) 340deg,
        transparent 360deg);
    filter: blur(9px);
}

@keyframes ppPowerOrbit {
    to { --pp-power-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .task-card-item.is-selected-harmony,
    .task-card-item.is-recommended-power::before,
    .task-card-item.is-recommended-power::after {
        animation: none;
    }
}

/* Top row: root number floats left, title right-aligned to the card edge.
   Only the first title line sits beside the number, so the second line gets the
   full card width (keeps long words like "Achievement" whole on small phones). */
.task-card-top-row {
    width: 100%;
    display: flow-root;
    margin-bottom: 6px;
    font-size: min(0.8rem, 12cqi);   /* scales with the card width, like the quote */
    line-height: 1.35;
}

.task-root-num {
    float: left;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 1.25em;
    margin-right: 4px;
    border-radius: 5px;
    background: rgba(179, 136, 47, 0.15);
    color: var(--ink-gold);
    font-weight: 800;
    font-size: inherit;
}

/* Always exactly two lines: "Prosperous" / "<Quality>" */
.task-card-title {
    margin: 0;
    text-align: right;
    font-size: inherit;
    font-weight: 800;
    line-height: 1.35;
    color: var(--ink-dark);
}

.task-card-title > span {
    display: block;
    min-height: 1.35em;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .cycle-mode-card {
        padding: 14px 10px;
    }
    .task-card-item {
        padding: 8px 6px;
    }
}

@media (max-width: 359px) {
    .archetype-tasks-grid {
        gap: 5px;
    }
    .task-card-item {
        padding: 7px 5px;
    }
    .task-root-num {
        width: 15px;
        margin-right: 3px;
    }
    .task-card-top-row {
        font-size: min(0.8rem, 12cqi);
    }
}

/* Always three lines tall so every card lines up. The font scales with the
   card's width (10.2cqi) so even the longest quote fits in three lines on
   small phones; capped at the desktop size. */
.task-card-quote {
    font-size: min(0.65rem, 10.2cqi);
    line-height: 1.35;
    min-height: calc(3 * 1.35em);
    color: var(--ink-mountain-wash);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Context Helper Popup & Tooltip System --- */

.context-helper-btn svg {
    width: 15px;
    height: 15px;
}

.context-tooltip {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.context-helper-wrap:hover .context-tooltip,
.context-helper-wrap:focus-within .context-tooltip {
    transform: translateY(-2px);
}

/* Guest Teaser Card */
.guest-teaser-block {
    text-align: center;
    padding: 10px 0;
}

.guest-teaser-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-mountain-wash);
    margin-bottom: 16px;
}

.guest-auth-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-guest-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    background: transparent;
    color: var(--ink-dark);
    border: 1px solid var(--ink-border-wash);
    transition: all 0.2s ease;
}

.btn-guest-login:hover {
    background: rgba(179, 136, 47, 0.08);
    border-color: var(--ink-gold);
}

.btn-guest-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--ink-gold);
    color: #ffffff;
    border: 1px solid var(--ink-gold);
    transition: all 0.2s ease;
}

.btn-guest-signup:hover {
    background: #996e1e;
    border-color: #996e1e;
}

/* Animation Keyframes */
@keyframes breathGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(179, 136, 47, 0.2)); }
    50% { filter: brightness(1.2) drop-shadow(0 0 8px rgba(179, 136, 47, 0.45)); }
}

@keyframes spinAxis {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Daily Commitment & Midnight Expiry Styling
   ========================================================================== */
.daily-commitment-panel {
    width: 100%;
    max-width: 480px;
    margin: 16px auto 10px auto;
    padding: 20px 20px 16px 20px;
    background: var(--glass-panel);
    border: 1px solid var(--ink-border-wash);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(179, 136, 47, 0.12);
    box-sizing: border-box;
    text-align: center;
    animation: commitmentFadeIn 0.35s ease-out;
}

@keyframes commitmentFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.commitment-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.commitment-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-gold);
    margin-bottom: 4px;
}

.commitment-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink-dark);
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.commitment-tagline {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-mountain-wash);
    margin: 0 0 16px 0;
    max-width: 380px;
}

.btn-activate-cycle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #b3882f 0%, #d49033 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(179, 136, 47, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-activate-cycle:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(179, 136, 47, 0.45);
    transform: translateY(-1px);
}

.btn-activate-cycle:active {
    transform: scale(0.98);
}

.activate-icon-pulse {
    display: inline-flex;
    font-size: 1rem;
    animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.25); opacity: 1; }
}

.commitment-aux-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 0.72rem;
    color: var(--ink-mountain-wash);
}

.btn-test-reset-cycle {
    background: transparent;
    border: none;
    color: var(--ink-mountain-wash);
    font-size: 0.72rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.15s ease;
}

.btn-test-reset-cycle:hover {
    color: var(--ink-cinnabar);
}

.cycle-active-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px auto 6px auto;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(179, 136, 47, 0.08);
    border: 1px solid rgba(179, 136, 47, 0.2);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-mountain-wash);
}

.active-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2e7d32;
    box-shadow: 0 0 6px rgba(46, 125, 50, 0.6);
    animation: pulseStatus 2s ease-in-out infinite;
}

@keyframes pulseStatus {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Muted styling on clock when dormant */
.flipclock-center-wrapper.is-dormant .flip-card-leaf {
    border-color: rgba(179, 136, 47, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0.88;
}

.flipclock-center-wrapper.is-dormant .flip-unit-tag {
    opacity: 0.55;
}

/* HUD labels: lighter inks so they stay readable on the dark page */
@media (prefers-color-scheme: dark) {
    .hud-arrow { color: #b8b2a6; }
    .hud-label { color: #7fa4ff; }
    .hud-label.is-boost { color: #ff8a80; }
    /* Brighter gold so the PP code reads on dark cards */
    .note-pp-code-number {
        background-image: linear-gradient(180deg, #fff6d6 0%, #ffd978 32%, #e3ad45 66%, #b37a26 100%);
        filter: drop-shadow(0 0 0.12em rgba(255, 200, 90, 0.35));
    }
    .hud-chip-slot .hud-arrow { color: #d8d2c6; }
    /* In the ring centre a white glow washes the gold out on dark pages: warm glow instead */
    .hud-center .note-pp-code-number {
        filter: drop-shadow(0 0 0.06em rgba(0, 0, 0, 0.6)) drop-shadow(0 0 0.25em rgba(255, 190, 80, 0.45));
    }
    .hud-center .pp-code-title { filter: drop-shadow(0 0 0.15em rgba(0, 0, 0, 0.7)); }
}


/* ==========================================================================
   ADMIN FLAME TUNING (admin / superadmin only)
   Desktop: drawer on the right so the flame ring stays in view.
   Phone: bottom sheet (the ring is scrolled into view above it).
   ========================================================================== */
.flame-tune-toggle {
    position: relative;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px auto 0;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px dashed var(--ink-border-gold, rgba(179, 136, 47, 0.45));
    background: var(--ink-gold-light);
    color: var(--ink-dark);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.flame-tune-toggle:hover { border-style: solid; }

.flame-tune-toggle[aria-expanded="true"] {
    background: var(--ink-gold);
    border-color: var(--ink-gold);
    color: #ffffff;
}

.flame-tune-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ink-accent-red-light, rgba(196, 30, 58, 0.1));
    color: var(--ink-accent-red, #c41e3a);
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.flame-tune-toggle[aria-expanded="true"] .flame-tune-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* Unsaved-changes dot */
.flame-tune-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-accent-red, #c41e3a);
    box-shadow: 0 0 0 2px var(--ink-card-solid, #ffffff);
}

.flame-tune-panel {
    position: fixed;
    z-index: 900;
    top: 84px;
    right: 16px;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 104px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 18px;
    border: 1px solid var(--ink-border-wash);
    background: var(--ink-card-solid, #fffdf8);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    color: var(--ink-dark);
    /* The whole panel scrolls (the button row stays pinned at the bottom), so nothing
       can be squeezed out on short screens or with large system text */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 9rem;        /* keep scrolled-to controls clear of the pinned buttons */
}

.flame-tune-panel[hidden] { display: none; }

.flame-tune-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 6px;
}

.flame-tune-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

.flame-tune-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ink-border-wash);
    background: transparent;
    color: var(--ink-mountain-wash);
    font-size: 0.9rem;
    cursor: pointer;
}

.flame-tune-note {
    margin: 0;
    padding: 0 16px 8px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ink-mountain-wash);
}

.flame-tune-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--ink-gold-light);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.flame-tune-check input,
.flame-switch {
    accent-color: var(--ink-gold);
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
}

.flame-tune-body {
    flex: none;
    padding: 4px 16px 8px;
}

.flame-group {
    margin: 10px 0 0;
    padding: 0;
    border: none;
}

.flame-group-title {
    padding: 0;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-gold);
}

.flame-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ink-border-wash);
}

.flame-label {
    font-size: 0.84rem;
    font-weight: 700;
}

.flame-val {
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink-gold-deep, var(--ink-gold));
}

/* Big, easy-to-drag sliders */
.flame-row input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--ink-gold);
    cursor: pointer;
}

.flame-ends {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    margin-top: -4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink-mountain-wash);
}

.flame-row.is-dir { grid-template-columns: 1fr; }

.flame-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--ink-border-wash);
}

.flame-seg button {
    padding: 6px 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-mountain-wash);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.flame-seg button[aria-pressed="true"] {
    background: var(--ink-gold);
    color: #ffffff;
}

.flame-row.is-bool {
    grid-template-columns: 1fr auto;
    cursor: pointer;
}

.flame-bool-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flame-hint {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ink-mountain-wash);
}

.flame-tune-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: auto;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--ink-border-wash);
    background: var(--ink-card-solid, #fffdf8);
}

.flame-tune-status {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink-mountain-wash);
}

/* Only takes space when it has a message */
.flame-tune-status:empty { display: none; }

.flame-tune-status.is-dirty { color: var(--ink-accent-red, #c41e3a); }
.flame-tune-status.is-ok { color: var(--ink-jade, #2e7d5b); }
.flame-tune-status.is-error { color: var(--ink-accent-red, #c41e3a); }

/* Buttons wrap instead of overflowing: Save takes its own line when space is short */
.flame-tune-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flame-tune-actions .flame-btn { flex: 1 1 auto; }
.flame-tune-actions .flame-btn.is-gold { flex: 999 1 auto; }

.flame-btn {
    padding: 9px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.flame-btn.is-ghost {
    border: 1px solid var(--ink-border-wash);
    background: transparent;
    color: var(--ink-dark);
}

.flame-btn.is-gold {
    border: 1px solid var(--ink-gold);
    background: var(--ink-gold);
    color: #ffffff;
}

.flame-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

@media (max-width: 760px) {
    .flame-tune-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        /* About half the screen, but at least 440px on short phones (when they have it) */
        max-height: max(56vh, min(85vh, 440px));
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Leave room so the page can scroll above the sheet */
    body.flame-tuning-open { padding-bottom: max(56vh, min(85vh, 440px)); }
}

/* ==========================================================================
   DAILY SYNERGY CHART (day bars + minute line)
   ========================================================================== */
.synergy-card {
    --syn-bar: rgba(179, 136, 47, 0.34);
    --syn-today: var(--ink-gold);
    --syn-max: var(--ink-jade);
    --syn-min: var(--ink-cinnabar);
    --syn-line: var(--ink-gold);
    --syn-text: var(--ink-muted);
    background: var(--glass-section);
    border: 1px solid var(--ink-border-wash);
    border-radius: 14px;
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.synergy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.synergy-head-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

.synergy-sub {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.synergy-sub:empty { display: none; }

.synergy-year {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--ink-gold-deep, var(--ink-gold));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.synergy-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--ink-border-gold, rgba(179, 136, 47, 0.4));
    background: transparent;
    color: var(--ink-gold-deep, var(--ink-gold));
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.synergy-back:hover { background: var(--ink-gold-light); }
.synergy-back[hidden] { display: none; }

.synergy-stage {
    position: relative;
    height: 210px;
    border-radius: 10px;
    touch-action: pan-y;          /* vertical page scroll stays with the browser; sideways drag and pinch go to the chart */
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    outline: none;
}

.synergy-card.is-minutes .synergy-stage { cursor: crosshair; }
.synergy-card.no-line .synergy-stage { cursor: default; }
.synergy-card.is-dragging .synergy-stage { cursor: grabbing; }

.synergy-stage:focus-visible {
    box-shadow: 0 0 0 2px var(--ink-gold);
}

.synergy-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.syn-bar {
    fill: var(--syn-bar);
    transition: fill 0.15s ease;
}

.syn-bar.is-today { fill: var(--syn-today); }
.syn-bar.is-max { fill: var(--syn-max); }
.syn-bar.is-min { fill: var(--syn-min); }
.syn-bar.is-hover { stroke: var(--ink-dark); stroke-width: 1.5px; }

.syn-score,
.syn-xlabel {
    font-size: 11px;
    text-anchor: middle;
    fill: var(--syn-text);
    font-variant-numeric: tabular-nums;
}

.syn-score { font-weight: 700; fill: var(--ink-dark); }
.syn-xlabel { font-weight: 600; }
.syn-xlabel.is-today { fill: var(--ink-gold-deep, var(--ink-gold)); font-weight: 800; }

.syn-line {
    fill: none;
    stroke: var(--syn-line);
    stroke-width: 1.8px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.syn-area {
    fill: var(--syn-line);
    opacity: 0.12;
}

.syn-now { fill: var(--syn-min); stroke: var(--ink-card-solid, #fff); stroke-width: 1.5px; }

.syn-cross-v,
.syn-cross-h {
    stroke: var(--ink-dark);
    stroke-width: 1px;
    stroke-dasharray: 3 3;
    opacity: 0.55;
}

.syn-cross-dot {
    fill: var(--syn-line);
    stroke: var(--ink-card-solid, #fff);
    stroke-width: 2px;
}

.synergy-tip {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--ink-card-solid, #fff);
    border: 1px solid var(--ink-border-gold, rgba(179, 136, 47, 0.4));
    box-shadow: var(--ink-shadow-md, 0 4px 14px rgba(0, 0, 0, 0.12));
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.synergy-tip[hidden] { display: none; }
.synergy-tip-when { color: var(--ink-muted); font-weight: 600; }
.synergy-tip strong { color: var(--ink-dark); font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.synergy-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.synergy-status[hidden] { display: none; }

.synergy-retry {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--ink-border-gold, rgba(179, 136, 47, 0.4));
    background: var(--ink-card-solid, #fff);
    color: var(--ink-cinnabar);
    font-weight: 800;
    cursor: pointer;
}

.synergy-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.synergy-range {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-dark);
    font-variant-numeric: tabular-nums;
}

.synergy-controls {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.synergy-btn {
    width: 30px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--ink-border-wash);
    background: transparent;
    color: var(--ink-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.synergy-btn:hover:not(:disabled) { background: var(--ink-gold-light); border-color: var(--ink-gold); }
.synergy-btn:disabled { opacity: 0.35; cursor: default; }

.synergy-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.synergy-legend[hidden] { display: none; }
.synergy-legend li { display: inline-flex; align-items: center; gap: 5px; }
.synergy-legend i { width: 10px; height: 10px; border-radius: 3px; }
.synergy-legend i.is-today { background: var(--syn-today); }
.synergy-legend i.is-max { background: var(--syn-max); }
.synergy-legend i.is-min { background: var(--syn-min); }

.synergy-hint {
    margin: 0;
    font-size: 0.7rem;
    color: var(--ink-mountain-wash);
}

@media (max-width: 420px) {
    .synergy-card { padding: 14px 10px 10px; }
    .synergy-stage { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .syn-bar { transition: none; }
}

/* ==========================================================================
   CYCLE SOUND TOGGLE (top right of the resonance card)
   ========================================================================== */
.cycle-sound-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(179, 136, 47, 0.3);
    background: rgba(179, 136, 47, 0.1);
    color: var(--ink-gold);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.cycle-sound-toggle:hover { background: var(--ink-gold-light); }
.cycle-sound-toggle:focus-visible { outline: 2px solid var(--ink-gold); outline-offset: 2px; }
.cycle-sound-toggle .sound-icon { width: 18px; height: 18px; }
.cycle-sound-toggle .sound-icon.is-off,
.cycle-sound-toggle.is-off .sound-icon.is-on { display: none; }
.cycle-sound-toggle.is-off .sound-icon.is-off { display: block; }
.cycle-sound-toggle.is-off { color: var(--ink-muted); background: transparent; }

/* ---- Daily Synergy: y axis, highest / lowest lines, animations ---- */
.syn-yaxis-line {
    stroke: var(--ink-border-gold, rgba(179, 136, 47, 0.4));
    stroke-width: 1px;
}

.syn-ylabel {
    font-size: 11px;
    font-weight: 600;
    text-anchor: end;
    fill: var(--syn-text);
    font-variant-numeric: tabular-nums;
}

.syn-mark {
    stroke-width: 1.3px;
    stroke-dasharray: 5 4;
    opacity: 0.9;
}

.syn-mark.is-max { stroke: var(--syn-max); }
.syn-mark.is-min { stroke: var(--syn-min); }

.syn-mark-label {
    font-size: 10px;
    font-weight: 800;
    text-anchor: end;
    font-variant-numeric: tabular-nums;
}

.syn-mark-label.is-max { fill: var(--syn-max); }
.syn-mark-label.is-min { fill: var(--syn-min); }

/* Bars grow up, score labels fade in after them */
.synergy-svg.syn-anim .syn-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: synGrow 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both;
    animation-delay: var(--d, 0ms);
}

.synergy-svg.syn-anim .syn-score {
    animation: synFade 0.35s ease-out both;
    animation-delay: calc(var(--d, 0ms) + 0.45s);
}

.synergy-svg.syn-anim .syn-marks {
    animation: synFade 0.5s ease-out 0.7s both;
}

@keyframes synGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes synFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Tuning panel: colour and text rows */
.flame-row.is-color,
.flame-row.is-text {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.flame-row.is-text { grid-template-columns: 1fr; }

.flame-color-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.flame-color-pick input[type="color"] {
    width: 38px;
    height: 28px;
    padding: 0 2px;
    border: 1px solid var(--ink-border-wash);
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}

.flame-color-theme {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ink-border-wash);
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.flame-color-theme[aria-pressed="true"] {
    background: var(--ink-gold);
    border-color: var(--ink-gold);
    color: #fff;
}

.flame-text {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--ink-border-wash);
    background: var(--ink-card-solid, #fff);
    color: var(--ink-dark);
    font: inherit;
    font-size: 0.85rem;
}

.flame-text:focus { outline: 2px solid var(--ink-gold); outline-offset: 1px; }

.flame-group-note { margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
    .synergy-svg.syn-anim .syn-bar,
    .synergy-svg.syn-anim .syn-score,
    .synergy-svg.syn-anim .syn-marks { animation: none; }
}

/* Tuning panel scrollbar: same as the admin modal forms (users.css) */
.flame-tune-panel {
    scrollbar-width: thin;                                   /* Firefox */
    scrollbar-color: rgba(179, 136, 47, 0.55) transparent;
}

.flame-tune-panel::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.flame-tune-panel::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
    margin: 18px 0;                     /* clear of the rounded corners */
}

.flame-tune-panel::-webkit-scrollbar-thumb {
    background: rgba(179, 136, 47, 0.45);
    border-radius: 999px;
    border: 3px solid transparent;      /* inset look: thumb floats inside the track */
    background-clip: padding-box;
}

.flame-tune-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(179, 136, 47, 0.75);
    background-clip: padding-box;
}

.flame-tune-panel::-webkit-scrollbar-button { display: none; }