/* Round 27, the moment on the page (r27-moment.js). The layer sits above the page while it plays and then goes;
   the page under it never moves. Colours are the page's own tokens (Paper and Carbon); sizes use the eight-step
   type scale (12, 14, 16, 19, 24, 32, 48, 72). */
.r27-moment{position:fixed;inset:0;z-index:75;pointer-events:none}
.r27-moment-cover{position:absolute;left:0;right:0;bottom:0;background:var(--bg);pointer-events:auto;cursor:default}
.r27-moment-stage{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.r27-m-ring.a,.r27-m-planet.a,.r27-m-glyph.a,.r27-m-house.a{color:var(--pa)}
.r27-m-ring.b,.r27-m-planet.b,.r27-m-glyph.b,.r27-m-house.b{color:var(--pb)}
.r27-m-rim{fill:none;stroke:currentColor;stroke-width:1.65;vector-effect:non-scaling-stroke}
.r27-m-rim-inner{fill:none;stroke:currentColor;stroke-width:.5;stroke-dasharray:1 7;opacity:.3;vector-effect:non-scaling-stroke}
.r27-m-rim-light{fill:none;stroke:currentColor;stroke-width:8;opacity:0;vector-effect:non-scaling-stroke}
:root[data-ground=night] .r27-m-rim-light{opacity:.1}
.r27-m-ticks{fill:none;stroke:var(--muted);stroke-width:.6;opacity:.5;vector-effect:non-scaling-stroke}
.r27-m-dot{fill:var(--bg);stroke:currentColor;stroke-width:1.6}
.r27-m-planet.rising .r27-m-dot,.r27-m-hot{fill:currentColor}
.r27-m-house{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:butt}
/* Threads keep the page's grammar: warmth solid, friction dashed, intensity dotted. */
.r27-m-thread{fill:none;stroke:var(--neutral);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 4}
.r27-m-thread.warm{stroke:var(--warm);stroke-dasharray:none}
.r27-m-thread.demand{stroke:var(--demand);stroke-dasharray:6 5;stroke-linecap:butt}
:root[data-ground=night] .r27-m-thread{stroke-width:2.8}
/* The Rose, in the page's own units and colours; it lands on the answer block's small Rose. */
.r27-m-occlude{fill:var(--bg)}
.r27-m-guide{fill:none;stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.r27-m-petal{fill:currentColor;fill-opacity:.42}
.r27-m-petal.landed{fill-opacity:.88}
.r27-m-petal.warm{color:var(--warm)}.r27-m-petal.demand{color:var(--demand)}.r27-m-petal.neutral{color:var(--neutral)}
.r27-m-centre{fill:var(--bg)}
.r27-m-centre-line{fill:none;stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
/* One caption per thread: on one line under the rings on wide screens, two lines on a phone. */
.r27-moment-caption{position:absolute;margin:0;display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 14px;text-align:center;opacity:0;will-change:opacity,transform}
.r27-moment-theme{font:600 24px/1.15 var(--body);letter-spacing:-.02em}
.r27-moment-theme.warm{color:var(--warm)}.r27-moment-theme.demand{color:var(--demand)}.r27-moment-theme.neutral{color:var(--neutral)}
.r27-moment-pair{font-size:16px;line-height:1.4;color:var(--muted)}
.r27-moment-pair .a{color:var(--pa)}.r27-moment-pair .b{color:var(--pb)}
@media(max-width:700px){.r27-moment-caption{left:20px;right:20px;flex-direction:column;align-items:center;gap:4px}.r27-moment-theme{font-size:19px}.r27-moment-pair{font-size:14px}}

/* "Play it again" beside "Save the picture"; small replays beside the stage and the Rose (review P2-6). */
.r27-moment-again,.r27-small-replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 4px;border:0;background:none;font-size:14px;color:var(--muted)}
.r27-moment-again:hover,.r27-small-replay:hover{color:var(--ink)}
.r27-moment-again svg,.r27-small-replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.r27-threads-replay{position:absolute;top:0;right:0;z-index:2}
.rose-panel header .r27-rose-replay{margin-top:6px}
body:not([data-result-tab=synastry]) :is(.r27-moment-again,.r27-threads-replay),body[data-motion=off] :is(.r27-moment-again,.r27-small-replay){display:none}
@media(prefers-reduced-motion:reduce){.r27-moment-again,.r27-small-replay{display:none}}

/* Stage labels (review P2-12): planet glyphs on the rings, the three strongest arcs named, a heading over the two numbers. */
#r27-stage-glyphs{pointer-events:none}
.r27-stage-glyph.a{color:var(--pa)}.r27-stage-glyph.b{color:var(--pb)}
.r27-stage-glyph circle{fill:var(--bg);stroke:none}
.r27-stage-glyph.inside circle{fill-opacity:.85}
#instruments .instrument-track,#instruments .arc-key{pointer-events:all;cursor:default}
#stage .r27-arc-key{position:static;margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.r27-arc-key .warm{color:var(--warm)}.r27-arc-key .demand{color:var(--demand)}.r27-arc-key .neutral{color:var(--neutral)}
#instruments .r27-arc-label{fill:currentColor;stroke:none;font-family:var(--body);font-weight:600;letter-spacing:.01em;pointer-events:none}
.highlights .r27-highlights-head{grid-column:1/-1;margin:0 0 -4px;font:500 19px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
@media print{.r27-moment,.r27-small-replay,.r27-moment-again{display:none!important}}

/* Round 31 (Astra P19): "Skip to the reading", visible while the moment plays, at the foot of the screen in the
   room the moment's layout keeps free. Outside the aria-hidden layer, so it is announced and keyboard reachable. */
.r27-skip{position:fixed;z-index:76;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);min-height:44px;padding:9px 20px;border:1px solid var(--ink);border-radius:999px;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.2;white-space:nowrap}
.r27-skip:hover{color:var(--ink);background:var(--wash)}
.r27-skip:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* The short answer takes focus after a skip; it is not a control, so it is not outlined. */
#short-reading:focus,#r27-answer:focus{outline:none}
@media print{.r27-skip{display:none!important}}