/* The horoscope, inside the almanac's own column: every colour is an --mh- token (so both themes follow), every stroke a hairline. Every horoscope page links
   this; the board adds jy-board, jy-transit and jy-jaimini, and every page jy-primer and the core's pane.css (vr/jyotisha/kit/assets.py). */

.mh.jy { max-width: 1240px; }
/* the board (and any grid page given .jy-wide) takes most of a desktop window; the side margins grow with it, and 1024 px and phones keep 20/14 px */
.mh.jy.jy-wide { max-width: 1800px; }
@media (min-width: 701px) { .mh.jy.jy-wide { padding-left: clamp(20px, calc(5vw - 40px), 64px); padding-right: clamp(20px, calc(5vw - 40px), 64px); } }
/* today's pañcāṅga above the chart: the page's own width and left edge, not the dashboard's narrow centred column */
.mh.jy #mh-strip { max-width: none; margin: 8px 0 22px; padding: 0; }
/* the almanac's own band splits by the window; beside the reference pane the page is narrower than that, so split by the column too */
@container jy (max-width: 760px) {
    .mh.jy #mh-strip .now { grid-template-columns: 1fr 1fr; }
    .mh.jy #mh-strip .now > div:nth-child(3) { border-left: 0; }
    .mh.jy #mh-strip .now > div:nth-child(n + 3) { border-top: 1px solid var(--mh-rule-2); }
}
.mh.jy .jy-mast { align-items: flex-end; gap: 14px 24px; flex-wrap: wrap; }
.mh.jy .jy-mast > div:first-child { min-width: 0; }
.mh.jy .jy-name { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.mh.jy .jy-sub { font-size: .7812rem; color: var(--mh-ink-2); margin-top: 3px; }
.mh.jy select { border: 1px solid var(--mh-rule); border-radius: var(--mh-r); background-color: var(--mh-paper); padding: 5px 8px; font-size: .8125rem; }
.mh.jy .jy-mast nav { gap: 6px 8px; }
.mh.jy .jy-mast .names { margin-left: 4px; }
/* one weight for every button in a mast: the hairline, never a boxed one beside a bare one */
.mh.jy .jy-mast .btn.ghost { border-color: var(--mh-rule); padding: 6px 11px; }

/* the board's mast: the chart's name, then one row of three groups that wrap as units — which chart and its tools, the learning actions,
   the display switches (right-aligned while they fit on the row) */
/* the mast is its own layer above the board, so anything that opens from it sits over the cards */
.mh.jy .jy-bmast { flex-direction: column; align-items: stretch; gap: 14px; position: relative; z-index: 20; }
.mh.jy .jy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.mh.jy .jy-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mh.jy .jy-which { position: relative; flex-wrap: nowrap; max-width: 100%; }
.mh.jy .jy-disp { margin-left: auto; gap: 4px 22px; }
.mh.jy .jy-disp .names { margin-left: 0; }
.mh.jy .jy-mast .btn, .mh.jy .jy-which select.jy-sel { height: 30px; line-height: 1rem; }
.mh.jy .jy-mast .btn { display: inline-flex; align-items: center; gap: 6px; }
.mh.jy .jy-mast .btn .jy-bic { flex: none; color: var(--mh-ink-2); }
.mh.jy .jy-mast .btn.accent .jy-bic, .mh.jy .jy-mast .btn:hover .jy-bic { color: inherit; }
/* the grid: three across, two on a tablet, one on a phone — by the column's own width, so it follows the reference pane as it opens and is dragged */
.mh.jy { container: jy / inline-size; }
/* the long lists keep a row of panels level on a wide screen instead of stretching it by a thousand pixels (off the board, where the card folds) */
@media (min-width: 701px) { .mh.jy .jy-dasha, .mh.jy .jy-yogas { max-height: 560px; overflow-y: auto; padding-right: 6px; } }
/* a card's lead (KP's introduction and ayanāṁśa switch, the forecast's and varṣaphala's controls) runs across a wide card's columns (jy-board.css) */
.mh.jy .jy-kpc > :nth-child(-n + 4), .mh.jy .jy-fctl, .mh.jy .jy-vctl, .mh.jy .jy-slot .jy-when { column-span: all; }
/* the picker is the panel's heading, so it wears the heading's small capitals and no box */
.mh.jy select.jy-pick { border: 0; border-bottom: 1px solid var(--mh-rule); border-radius: 0; background: transparent; padding: 2px 18px 4px 0; max-width: 100%;
    font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-ink-2); cursor: pointer; }
.mh.jy select.jy-pick:hover { color: var(--mh-accent); border-color: var(--mh-accent); }
.mh.jy .chart { max-width: 560px; }   /* a chart follows its card, never past this: on a wide board a 2-wide card would draw it 800 px */
/* heavier than the almanac's day chart: a horoscope is read cell by cell, and hairline grey on grey was hard going */
.mh.jy .chart .rule { stroke: var(--mh-ink-2); stroke-width: 1.3; }
.mh.jy .chart .rule.la { stroke: var(--mh-accent); stroke-width: 2; }
.mh.jy .chart .sg { fill: var(--mh-ink-2); font-size: 10px; font-weight: 600; }
.mh.jy .chart .sg.ta, .mh.jy .chart .sg.ns { font-size: 12.5px; font-weight: 500; }
.mh.jy .chart .pl { font-size: 13.5px; font-weight: 600; fill: var(--mh-ink); }
.mh.jy .chart .pl .g { fill: var(--mh-ink-2); font-size: 12px; font-weight: 400; }
.mh.jy .chart .pl .dg { fill: var(--mh-ink-2); font-size: 10.5px; font-weight: 500; }
.mh.jy .chart .pl .rx { fill: var(--mh-accent); font-size: 10px; }
/* Mark strength (natal/ui.py strength_toggle, jy-jaimini.js): ▲ strong, ▼ weak after the two letters, drawn always and shown only while the toggle is on */
.mh.jy .chart .pl .sv { display: none; font-size: 8px; font-weight: 400; }
.mh.jy.sv-on .chart .pl .sv { display: inline; }
.mh.jy .chart .pl .sv.strong { fill: var(--mh-accent); }
.mh.jy .chart .pl .sv.weak { fill: var(--mh-ink-2); }
/* Degrees · Nakṣatra (kit/chakra.py nk_toggle, jy-jaimini.js): the star and pāda drawn always, shown in the degree's place while the switch is on */
.mh.jy .chart .pl .nk { display: none; fill: var(--mh-ink-2); font-size: 9.5px; font-weight: 500; letter-spacing: -.02em; }
.mh.jy.nk-on .chart .pl .nk { display: inline; }
.mh.jy.nk-on .chart .pl .dg { display: none; }
.mh.jy .chart .pl.ta .nk { font-size: 8.5px; letter-spacing: 0; }
/* the North diamond's side triangles hold one graha in about 66 units: a Tamil mark and code run wider, so that label steps down a size */
.mh.jy.nk-on .chart.north .pl.ta { font-size: 11px; }
.mh.jy.nk-on .chart.north .pl.ta .g { font-size: 10px; }
.mh.jy.nk-on .chart.north .pl.ta .nk { font-size: 8px; letter-spacing: -.02em; }
.mh.jy .jy-tgl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 2px; margin-top: 6px; }
.mh.jy .chart .jy-tgl .jy-mkt { margin: 0; }
.mh.jy .jy-tgl .names { margin-left: 0; }
.mh.jy .chart .pl.ns, .mh.jy .chart .pl.ta { font-family: var(--font-serif); font-size: 13px; }
.mh.jy .chart .pl.ta { font-family: 'Noto Sans Tamil', var(--mh-sans); }
.mh.jy .jy-tl .ns { font-family: var(--font-serif); }
.mh.jy .chart .la { font-size: 11px; }
.mh.jy .chart .sav { font-family: var(--mh-serif); font-size: 22px; fill: var(--mh-ink); }
.mh.jy .chart .sav.hi { fill: var(--mh-accent); }
.mh.jy .chart .sav.lo { fill: var(--mh-muted); }
.mh.jy .cap { font-size: .7188rem; color: var(--mh-muted); margin-top: 8px; line-height: 1.55; }

/* tables */
.mh.jy table.tab td.dim, .mh.jy table.tab td .dim { color: var(--mh-muted); font-size: .75rem; }
.mh.jy table.tab th { font-size: .625rem; }
/* the Grahas table: four columns that fit a third of the page */
.mh.jy table.jy-gr td { padding-right: 6px; vertical-align: top; }
.mh.jy table.jy-gr td.nm { font-size: .9062rem; }
.mh.jy table.jy-gr .jy-dg { font-family: var(--mh-sans); font-size: .6562rem; color: var(--mh-accent); letter-spacing: .02em; }
.mh.jy table.jy-gr .jy-ra { white-space: nowrap; }
.mh.jy table.jy-gr .jy-sv { font-family: var(--mh-sans); font-size: .6562rem; color: var(--mh-ink-2); margin-top: 2px; line-height: 1.4; }
.mh.jy table.jy-gr .jy-sv.strong > a { color: var(--mh-accent); }
.mh.jy table.jy-gr .jy-sv .dim { color: var(--mh-muted); }
.mh.jy table.jy-gr .jy-nk { font-size: .7188rem; color: var(--mh-ink-2); overflow-wrap: anywhere; }
.mh.jy table.jy-gr td.num { white-space: nowrap; }
/* the North chart's side triangles are narrow: smaller sign names keep them inside the square */
.mh.jy .chart.north .sg, .mh.jy .chart.north .sg.ns, .mh.jy .chart.north .sg.ta { font-size: 10px; }
.mh.jy table.jy-av { margin-top: 6px; font-size: .75rem; }
.mh.jy table.jy-av th, .mh.jy table.jy-av td { padding: 4px 2px; text-align: center; }
.mh.jy table.jy-av td.nm { text-align: left; font-size: .8125rem; }
.mh.jy table.jy-av td.hi { color: var(--mh-accent); font-weight: 600; }
.mh.jy table.jy-av td.lo { color: var(--mh-muted); }
.mh.jy table.jy-av td.tot { font-weight: 600; border-top: 1px solid var(--mh-rule); }
.mh.jy .jy-bar { height: 3px; background: var(--mh-rule-2); border-radius: 2px; min-width: 60px; }
.mh.jy .jy-bar i { display: block; height: 100%; background: var(--mh-ink-2); border-radius: 2px; }
.mh.jy .jy-bar.weak i { background: var(--mh-accent); }
.mh.jy details.jy-more { margin-top: 10px; }
.mh.jy details.jy-more > summary { font-size: .75rem; color: var(--mh-ink-2); cursor: pointer; padding: 4px 0; }

/* daśā fold-outs: rows like the almanac's, the running period in the accent */
.mh.jy .jy-dasha details > summary, .mh.jy .jy-p { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--mh-rule-2); cursor: pointer; list-style: none; }
.mh.jy .jy-dasha details > summary::-webkit-details-marker { display: none; }
.mh.jy .jy-dasha .l { flex: 1; font-family: var(--mh-serif); font-size: .9375rem; }
.mh.jy .jy-dasha .t { font-size: .75rem; color: var(--mh-ink-2); white-space: nowrap; }
.mh.jy .jy-dasha .sub { padding-left: 16px; }
.mh.jy .jy-dasha .sub .l { font-size: .875rem; }
.mh.jy .jy-dasha .sub .sub .l { font-size: .8125rem; font-family: var(--mh-sans); }
.mh.jy .jy-p { cursor: default; }
.mh.jy .jy-dasha .live > summary .l, .mh.jy .jy-p.live .l { color: var(--mh-accent); }

/* yogas: a heading per kind, then one fold-out row per yoga */
.mh.jy .jy-yk { margin: 14px 0 2px; }
.mh.jy .jy-yk:first-child { margin-top: 0; }
.mh.jy .jy-y > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--mh-rule-2); cursor: pointer; list-style: none; }
.mh.jy .jy-y > summary::-webkit-details-marker { display: none; }
.mh.jy .jy-y .l { font-family: var(--mh-serif); font-size: .9375rem; }
.mh.jy .jy-y .t { font-size: .75rem; color: var(--mh-ink-2); }
.mh.jy .jy-y .cap { margin: 0 0 8px; }
.mh.jy .jy-y.off .l { text-decoration: line-through; color: var(--mh-muted); }

/* the chart form, in the page rather than a dialog */
.mh.jy #jy-form:empty { display: none; }
.mh.jy .jy-form { max-width: 520px; padding: 18px 0 20px; border-bottom: 1px solid var(--mh-rule-2); display: flex; flex-direction: column; gap: 12px; }
.mh.jy .jy-form .jy-ft { font-size: 1.125rem; }
.mh.jy .jy-form label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--mh-ink-2); }
.mh.jy .jy-form input[type=text], .mh.jy .jy-form input:not([type]), .mh.jy .jy-form input[type=date], .mh.jy .jy-form input[type=time] {
    border: 1px solid var(--mh-rule); border-radius: var(--mh-r); background: var(--mh-paper); padding: 8px 10px; font-size: .875rem; color: var(--mh-ink); }
.mh.jy .jy-form .jy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mh.jy .jy-form .hits { margin-top: -6px; }
.mh.jy .jy-form .hits:empty { display: none; }
.mh.jy .jy-form .note { margin-top: -4px; }
.mh.jy .jy-form .jy-btns { display: flex; gap: 8px; }
.mh.jy .jy-err { color: var(--mh-accent); font-size: .8125rem; }

/* phones: one column, the header stacked, wide tables scrolling inside their panel rather than the page */
@media (max-width: 700px) {
    .mh.jy { padding: 0 14px 72px; }
    .mh.jy .jy-mast { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }   /* a wrapping column's line is as wide as its widest child's content, not the header */
    .mh.jy .jy-mast nav { flex-wrap: wrap; gap: 8px; }
    .mh.jy .jy-mast .names { margin-left: 0; }
    .mh.jy .jy-tools { gap: 10px; }
    .mh.jy .jy-which { width: 100%; }
    .mh.jy .jy-disp { margin-left: 0; }
    .mh.jy .jy-name { font-size: 1.3125rem; }
    .mh.jy .jy-form .jy-two { grid-template-columns: 1fr; }
}

/* citations: a link into the book once it is in the library, plain until then */
.mh.jy .jy-cites { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 4px; font-size: .7188rem; }
.mh.jy .jy-cite { color: var(--mh-accent); border-bottom: 1px solid var(--mh-accent-soft); }
.mh.jy .jy-cite.plain { color: var(--mh-muted); border: 0; }

/* the running period, above a daśā's list */
.mh.jy .jy-now { padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--mh-rule); }
.mh.jy .jy-run { margin-top: 6px; }
.mh.jy .jy-run .l { font-family: var(--mh-serif); font-size: 1rem; color: var(--mh-accent); }
.mh.jy .jy-run .t { font-size: .75rem; color: var(--mh-ink-2); }
.mh.jy .jy-read { margin: 2px 0 0; font-size: .8438rem; }

/* houses and the guide's lists */
.mh.jy .jy-bh .hn, .mh.jy .jy-hl .hn { display: inline-block; min-width: 1.6em; font-variant-numeric: tabular-nums; color: var(--mh-muted); }
.mh.jy .jy-bh .occ { color: var(--mh-ink); font-weight: 600; }
/* a house row is a table row: number, name, sign, the lord line, occupants, each in a column of its own width so they line up down the card
   whatever the names' script; a row narrower than the five (a one-column card, a phone) puts the lord line under the name */
.mh.jy .jy-bh { container-type: inline-size; }
.mh.jy .jy-bh > summary { display: grid; grid-template-columns: 1.6em 4.6rem 7rem minmax(0, 1fr) 4.5rem; grid-template-areas: "n l s d o"; gap: 1px 10px; }
.mh.jy .jy-bh > summary > * { min-width: 0; overflow-wrap: break-word; }
.mh.jy .jy-bh > summary > :first-child { grid-area: n; }
.mh.jy .jy-bh > summary > .l { grid-area: l; }
.mh.jy .jy-bh > summary > .sg { grid-area: s; }
.mh.jy .jy-bh > summary > .ld { grid-area: d; }
.mh.jy .jy-bh > summary > .occ { grid-area: o; padding-inline-end: 2px; }   /* the bold marks' ink stays inside the card's edge */
@container (max-width: 30rem) {
    .mh.jy .jy-bh > summary { grid-template-columns: 1.6em 4.6rem minmax(0, 1fr) minmax(0, max-content); grid-template-areas: "n l s o" ". d d d"; }
    .mh.jy .jy-bh > summary > .occ { justify-self: end; text-align: right; max-width: 7rem; }   /* four or five grahas wrap between marks */
}
.mh.jy .jy-bh p { margin: 4px 0; font-size: .8438rem; }
.mh.jy .jy-pp.bad, .mh.jy .jy-pp.bad .num { color: var(--mh-muted); }
.mh.jy .jy-sade { font-size: .8125rem; margin-top: 8px; }
.mh.jy.jy-guide { max-width: 760px; }
.mh.jy .jy-step p { margin: 6px 0; line-height: 1.6; }
.mh.jy .jy-st { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 1.1875rem; }
.mh.jy .jy-sn { font-size: .75rem; color: var(--mh-paper); background: var(--mh-ink-2); border-radius: 50%; width: 22px; height: 22px; display: inline-grid; place-items: center; flex: 0 0 22px; }
.mh.jy .jy-hls { display: flex; flex-direction: column; }
.mh.jy .jy-hl { padding: 6px 0; border-top: 1px solid var(--mh-rule-2); font-size: .8438rem; line-height: 1.5; }
.mh.jy .jy-hl .l { font-family: var(--mh-serif); font-size: .9375rem; }
.mh.jy .jy-hl.off { color: var(--mh-muted); }

/* graha states: flags under each graha in the Grahas panel, their fold-out, the daśā lord's strength (ui_states.py) */
.mh.jy .jy-fls { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; cursor: pointer; }
.mh.jy .jy-fl { font-family: var(--mh-sans); font-size: .6562rem; color: var(--mh-ink-2); border-bottom: 1px dotted var(--mh-rule); line-height: 1.4; }
.mh.jy .jy-fl.asta, .mh.jy .jy-fl.war { color: var(--mh-accent); }
.mh.jy .jy-fl.av { color: var(--mh-muted); }
.mh.jy .jy-str { padding: 8px 0; border-top: 1px solid var(--mh-rule); scroll-margin-top: 60px; }
.mh.jy .jy-sth .l { font-family: var(--mh-serif); font-size: .9375rem; margin-right: 8px; }
.mh.jy .jy-sth .t { font-size: .7188rem; color: var(--mh-accent); }
.mh.jy .jy-stp { font-size: .7812rem; line-height: 1.55; margin-top: 3px; }
.mh.jy .jy-stp .dim { color: var(--mh-muted); }
.mh.jy .jy-stp .l { font-style: italic; }
.mh.jy .jy-dstr { margin-top: 6px; }
.mh.jy .jy-dstr .jy-read { font-size: .7812rem; margin-top: 3px; }
.mh.jy .jy-how { font-size: .75rem; line-height: 1.5; margin: 6px 0 0; }
.mh.jy .jy-how .l { font-family: var(--mh-serif); font-size: .8438rem; }
.mh.jy .jy-how .jy-cites { display: inline; }
.mh.jy .jy-up { color: var(--mh-accent); font-weight: 600; }
.mh.jy .jy-dn { color: var(--mh-ink-2); }

/* a rendered note: the Notes card's and the notebook's */
.mh.jy .jy-nv { font-size: .875rem; line-height: 1.55; margin-top: 3px; overflow-wrap: anywhere; }
.mh.jy .jy-nv p { margin: 0 0 6px; }
.mh.jy .jy-nv ul, .mh.jy .jy-nv ol { margin: 0 0 6px 1.2em; list-style: revert; }
.mh.jy .jy-nv a { color: var(--mh-accent); text-decoration: underline; text-underline-offset: 2px; }
.mh.jy .jy-nv code { font-size: .7812rem; background: var(--mh-paper-2); padding: 0 3px; border-radius: 2px; }
.mh.jy .jy-nv h3, .mh.jy .jy-nv h4, .mh.jy .jy-nv h5 { font-family: var(--mh-serif); font-size: .9375rem; margin: 4px 0; }
.mh.jy .jy-saved { font-size: .6875rem; color: var(--mh-muted); }
/* the chart's details: sex, birth-time accuracy, residence, notes (data.py), and the Strī Jātaka notes (stri.py) */
.mh.jy .jy-form input[type=number], .mh.jy .jy-form select, .mh.jy .jy-form textarea { font: inherit; font-size: .875rem; color: var(--mh-ink); background: var(--mh-paper);
    border: 1px solid var(--mh-rule); border-radius: var(--mh-r); padding: 8px 10px; }
.mh.jy .jy-form textarea { resize: vertical; }
.mh.jy .jy-form .jy-sex { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.mh.jy .jy-form .jy-sex legend { font-size: .75rem; color: var(--mh-ink-2); padding: 0; width: 100%; margin-bottom: 2px; }
.mh.jy .jy-form label.jy-rad { flex-direction: row; align-items: center; gap: 6px; font-size: .875rem; color: var(--mh-ink); }
.mh.jy .jy-form details > label, .mh.jy .jy-form details > .note, .mh.jy .jy-form details > .btn { margin-top: 10px; }
.mh.jy .jy-det .jy-add { color: var(--mh-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mh.jy .jy-notes { white-space: pre-line; font-size: .8438rem; max-width: 60ch; }
.mh.jy .jy-stri { margin: 10px 0 4px; padding-left: 10px; border-left: 2px solid var(--mh-accent-soft, var(--mh-rule)); }
.mh.jy .jy-stri p { margin: 4px 0; }