/* The side pane (pane.js, vr/core/pane.py) and what opens it: doors, glossary terms, the hover card. */

/* the reference pane: a citation opened beside the page on a wide screen (pane.js), the page narrowed to make room; hairlines only */
:root { --rp-w: clamp(420px, 42vw, 720px); }
#ref-pane { display: none; }
@media (min-width: 1024px) {
    html.ref-open body { padding-right: var(--rp-w); }
    html.ref-open #ref-pane { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: var(--rp-w); z-index: 60;
        background: var(--mh-paper); color: var(--mh-ink); border-left: 1px solid var(--mh-rule); }
}
#ref-pane #rp-in { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
#ref-pane .rp-grip { position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; z-index: 2; cursor: col-resize; touch-action: none; }
#ref-pane .rp-grip::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .15s; }
#ref-pane .rp-grip:hover::after, #ref-pane .rp-grip:focus-visible::after, html.rp-drag #ref-pane .rp-grip::after { background: var(--mh-accent); width: 2px; left: 3px; }
#ref-pane .rp-grip:focus-visible { outline: none; }
html.rp-drag, html.rp-drag * { cursor: col-resize !important; user-select: none !important; }
html.rp-drag #ref-pane #rp-in { pointer-events: none; }
:is(#ref-pane, .rp-still) .rp-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: var(--mh-paper);
    border-bottom: 1px solid var(--mh-rule); font-family: var(--mh-sans); font-size: .7812rem; }
:is(#ref-pane, .rp-still) .rp-nav { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
/* the ritual page's reading bar, compact and unboxed in the pane's own bar */
:is(#ref-pane, .rp-still) .rp-tools > div { position: static; margin: 0; }
:is(#ref-pane, .rp-still) .rp-tools .rd-tools { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; gap: 6px; }
:is(#ref-pane, .rp-still) .rp-pn, :is(#ref-pane, .rp-still) .rp-full, :is(#ref-pane, .rp-still) .rp-x { color: var(--mh-ink-2); text-decoration: none; }
:is(#ref-pane, .rp-still) .rp-pn:hover, :is(#ref-pane, .rp-still) .rp-full:hover, :is(#ref-pane, .rp-still) .rp-x:hover { color: var(--mh-accent); }
:is(#ref-pane, .rp-still) .rp-x { font-size: 1.25rem; line-height: 1; padding: 0 2px; background: none; border: 0; cursor: pointer; }
:is(#ref-pane, .rp-still) .rp-body { padding: 18px 22px 96px; }
:is(#ref-pane, .rp-still) .rp-at { margin-right: 6px; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-accent); }
:is(#ref-pane, .rp-still) .rp-title { font-family: var(--mh-serif); font-size: 1.25rem; line-height: 1.3; }
:is(#ref-pane, .rp-still) .rp-title .bk-num { display: inline; }
:is(#ref-pane, .rp-still) .rp-desc { margin: 4px 0 10px; font-family: var(--mh-sans); font-size: .7812rem; color: var(--mh-ink-2); }
:is(#ref-pane, .rp-still) .rp-wait { padding: 22px; color: var(--mh-muted); }
:is(#ref-pane, .rp-still) .bk-text > * { padding-left: 12px; border-left: 2px solid transparent; }
:is(#ref-pane, .rp-still) .lyrics-section { margin-left: 0; margin-right: 0; padding-left: 12px; border-left: 2px solid transparent; }
:is(#ref-pane, .rp-still) .bk-text { font-family: 'Literata', var(--font-serif), serif; }
:is(#ref-pane, .rp-still) .bk-text .pg { margin-right: 4px; font-size: .72rem; color: var(--mh-muted); }
:is(#ref-pane, .rp-still) .rp-hit { border-left-color: var(--mh-accent); animation: rp-hit 2.4s ease-out; }
@keyframes rp-hit { from { background: var(--mh-accent-soft); } to { background: transparent; } }
/* doors: a graha, rāśi, nakṣatra, house or yoga printed on the board opens its item (the side pane, or a new tab on a phone); no underline,
   the accent on hover and focus; in a chart the whole mark takes the hit, not only the painted strokes of its letters */
.mh.jy a.jy-door { color: inherit; cursor: pointer; text-decoration: none; border-radius: 2px; }
.mh.jy a.jy-door:hover, .mh.jy a.jy-door:focus-visible { color: var(--mh-accent); }
.mh.jy a.jy-door:focus-visible { outline: 1px dotted var(--mh-accent); outline-offset: 1px; }
.mh.jy svg a.jy-door { cursor: pointer; outline: none; }
.mh.jy svg a.jy-door text { pointer-events: bounding-box; }
.mh.jy svg a.jy-door:hover text, .mh.jy svg a.jy-door:hover tspan, .mh.jy svg a.jy-door:focus-visible text, .mh.jy svg a.jy-door:focus-visible tspan,
.mh.jy svg text a.jy-door:hover, .mh.jy svg text a.jy-door:focus-visible { fill: var(--mh-accent); }
.mh.jy svg a.jy-door:focus-visible text { text-decoration: underline; }
.mh.jy .jy-tl a.jy-door text, .mh.jy .jy-tl a.jy-door path { pointer-events: auto; }
.mh.jy .jy-tl a.jy-door:hover path.seg { fill: var(--mh-accent-soft); }

/* the item in the side pane: the horoscope's own column rules, without its page margins */
:is(#ref-pane, .rp-still) .mh.jy { max-width: none; margin: 0; padding: 0; font-size: .875rem; }
:is(#ref-pane, .rp-still) .jy-ip .jy-ip-sec { margin-top: 20px; }
:is(#ref-pane, .rp-still) .jy-ip .lbl { margin-bottom: 6px; }
:is(#ref-pane, .rp-still) .rp-back { background: none; border: 0; padding: 0; cursor: pointer; color: var(--mh-ink-2); font: inherit; }
:is(#ref-pane, .rp-still) .rp-back:hover { color: var(--mh-accent); }

/* terms: a glossary word, item or method named in prose links to its page (the side pane on a wide screen), a dotted hairline under it and
   the ink unchanged, so a paragraph still reads as prose. The quick-info card (#jy-tq, pane.js) shows its definition on hover, desktop only. */
a.jy-term { color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--primary) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
a.jy-term:hover, a.jy-term:focus-visible { color: var(--mh-accent); text-decoration-style: solid; }
a.jy-term:focus-visible { outline: 1px dotted var(--mh-accent); outline-offset: 1px; }
#jy-tq { position: fixed; z-index: 90; max-width: min(340px, calc(100vw - 16px)); padding: 10px 12px 9px; background: var(--mh-paper); color: var(--mh-ink);
    border: 1px solid var(--mh-rule); border-radius: var(--mh-r); box-shadow: 0 8px 22px color-mix(in srgb, var(--foreground) 8%, transparent); font: .8125rem/1.5 var(--mh-sans); }
#jy-tq[hidden] { display: none; }
#jy-tq .jy-tq-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 3px; }
#jy-tq .jy-tq-n { font-family: var(--mh-serif); font-size: .9375rem; }
#jy-tq .jy-tq-a { color: var(--mh-muted); font-size: .75rem; }
#jy-tq .jy-tq-d { margin: 0; color: var(--mh-ink-2); }
#jy-tq .jy-tq-f { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--mh-rule-2); font-size: .75rem; }
#jy-tq .jy-tq-o { color: var(--mh-accent); text-decoration: none; }
#jy-tq .jy-tq-o:hover { text-decoration: underline; }
#jy-tq .jy-tq-k { color: var(--mh-muted); letter-spacing: .03em; }
@media (hover: none) { #jy-tq { display: none !important; } }
:is(#ref-pane, .rp-still) .jy-tdef { font-size: 1.0625rem; line-height: 1.5; }
/* a graha's star in the chart on screen, leading its hover card and its item pane (primer/items.py nak_line) */
#jy-tq .jy-nkl { margin: 0 0 4px; color: var(--mh-ink); }
:is(#ref-pane, .rp-still) .jy-nkl { margin: 4px 0 6px; font-family: var(--mh-sans); font-size: .8438rem; color: var(--mh-ink); }