/* Muhurtha. Hand-written, no build step, no framework.

   The look is a printed almanac rather than an app: warm paper, hairline rules instead of
   cards and shadows, one ink and one vermillion, and numerals in a light serif at a size
   that lets the eye find a date without reading. Everything that is not a date is small,
   spaced and quiet, so a dense day still reads as calm. */

/* The --mh-* tokens live in theme.css, since the side pane and the hover card read them on every page, not only where this sheet is linked. */

/* Everything is scoped to .mh. The block sits inside the app shell now, so a bare `body`
   or `a` rule here would restyle the blog and the dashboards too. */
.mh {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 96px;
    color: var(--mh-ink);
    font-family: var(--mh-sans);
    font-size: .9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
.mh *, .mh *::before, .mh *::after { box-sizing: border-box; }
.mh a { color: inherit; text-decoration: none; }
.mh h1, .mh h2, .mh h3 { margin: 0; font-weight: 400; }
.mh button, .mh input, .mh select { font: inherit; color: inherit; }
@media (max-width: 640px) { .mh { padding: 0 14px 96px; } }

/* the front-page widget: same tokens, none of the full page's own width/padding — its
   card is the app's, not the almanac's. Header: the day and the place; footer: the sun. */
.mh.landing-mh { max-width: none; margin: 0; padding: 0; border: 1px solid var(--mh-rule); border-radius: var(--mh-r); overflow: hidden; background: var(--mh-paper); }
.mh.landing-mh .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; }
.mh.landing-mh .when { font-size: .875rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh.landing-mh .when .serif { font-size: 1.0625rem; }
.mh.landing-mh .chip { margin: 0; padding: 0; font-size: .75rem; flex: 0 0 auto; }
.mh.landing-mh .chip .city { font-size: 1rem; }
.mh.landing-mh .now { border-top: 1px solid var(--mh-rule); }
.mh.landing-mh .ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; font-size: .7812rem; color: var(--mh-ink-2); }
.mh.landing-mh .ft .more { margin-left: auto; color: var(--mh-accent); font-weight: 500; }
@media (max-width: 480px) { .mh.landing-mh .hd { flex-direction: column; align-items: flex-start; gap: 6px; } .mh.landing-mh .when { white-space: normal; } }

/* the dashboard's strip: the same card with no box around it — the header line carries the sun and the link, the band sits alone
   beneath it, rounded, and the page's own margins are its edges. */
.mh.landing-mh.compact { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.mh.landing-mh.compact .hd { padding: 0 2px 10px; }
.mh.landing-mh.compact .when { white-space: normal; }
.mh.landing-mh.compact .when .more { color: var(--mh-accent); font-weight: 500; white-space: nowrap; }
.mh.landing-mh.compact .now { border-top: 0; border-bottom: 0; border-radius: var(--mh-r); overflow: hidden; }

/* --- labels: the quiet voice everything non-numeric speaks in --- */
.mh .lbl {
    font-size: .625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mh-muted);
    font-weight: 500;
}
.mh .serif { font-family: var(--mh-serif); }
.mh .num { font-variant-numeric: tabular-nums; }
.mh .dim { color: var(--mh-muted); }
.mh .ink2 { color: var(--mh-ink-2); }
.mh .acc { color: var(--mh-accent); }

/* --- the page's own control bar --- */
/* Not a masthead any more. The site title, the nav and the theme picker all live in the
   app navbar above this; what is left is the three questions this page answers -- which
   month, which day, which place. */
.mh .mast {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--mh-rule);
    flex-wrap: wrap;
}
/* The place chip. Set into the rule under the bar rather than sitting on top of it, so it
   reads as part of the page's frame instead of as another button. */
.mh .chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 2px 7px;
    margin-bottom: -13px;
    border: 0;
    border-bottom: 2px solid var(--mh-accent);
    border-radius: 0;          /* Oat rounds every button; this one is a rule, not a chip. */
    background: transparent;
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}
.mh .chip .pin {
    align-self: center;
    color: var(--mh-accent);
    flex: 0 0 auto;
}
.mh .chip .city {
    font-family: var(--mh-serif);
    font-size: 1.3125rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh .chip .zone {
    font-size: .625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mh-muted);
    white-space: nowrap;
    flex: 0 0 auto;
}
.mh .chip:hover .city { color: var(--mh-accent); }
.mh .chip:hover .zone { color: var(--mh-ink-2); }
.mh .mast nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Body copy that is not a heading and not a datum: instructions, notes, caveats. */
.mh .note {
    font-size: .7812rem;
    line-height: 1.6;
    color: var(--mh-ink-2);
    margin: 10px 0 0;
}

.mh .btn {
    border: 1px solid var(--mh-rule);
    background: transparent;
    border-radius: var(--mh-r);
    padding: 6px 11px;
    font-size: .75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.mh .btn:hover { border-color: var(--mh-ink-2); background: var(--mh-paper-2); }
.mh .btn.on { border-color: var(--mh-ink); background: var(--mh-ink); color: var(--mh-paper); }
.mh .btn.accent { border-color: var(--mh-accent); color: var(--mh-accent); }
.mh .btn.accent:hover { background: var(--mh-accent); color: var(--mh-paper); }
/* .accent sets a colour after .on sets a background, so the active Subscribe button came
   out dark red on dark. Both classes at once needs its own rule. */
.mh .btn.accent.on {
    border-color: var(--mh-accent);
    background: var(--mh-accent);
    color: var(--mh-paper);
}
.mh .btn.ghost { border-color: transparent; padding: 6px 8px; }

/* --- the now band: hora, muhurta and the two limbs that are running --- */
.mh .now {
    display: grid;
    grid-template-columns: minmax(200px, 1.05fr) repeat(3, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--mh-rule);
    background: var(--mh-paper-2);
}
.mh .now > div { padding: 15px 18px; border-left: 1px solid var(--mh-rule-2); min-width: 0; }
.mh .now > div:first-child { border-left: 0; background: var(--mh-accent-soft); }
.mh .now .big {
    font-family: var(--mh-serif);
    font-size: 1.5625rem;
    line-height: 1.15;
    margin-top: 5px;
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.mh .now .big .glyph { font-size: 1.3125rem; color: var(--mh-accent); }
.mh .now .mid { font-family: var(--mh-serif); font-size: 1.125rem; margin-top: 5px; line-height: 1.2; }
.mh .now .meta { font-size: .75rem; color: var(--mh-muted); margin-top: 4px; }
.mh .now .bar {
    height: 2px;
    background: var(--mh-rule);
    margin-top: 9px;
    overflow: hidden;
    border-radius: 2px;
}
.mh .now .bar i { display: block; height: 100%; background: var(--mh-accent); }
@media (max-width: 860px) {
    .mh .now { grid-template-columns: 1fr 1fr; }
    .mh .now > div:nth-child(3) { border-left: 0; }
    .mh .now > div:nth-child(n + 3) { border-top: 1px solid var(--mh-rule-2); }
}
@media (max-width: 380px) {
    .mh .now { grid-template-columns: 1fr; }
    .mh .now > div { border-left: 0; }
    .mh .now > div + div { border-top: 1px solid var(--mh-rule-2); }
}

/* --- month grid --- */
.mh .monthbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 0 12px;
    flex-wrap: wrap;
}
.mh .monthbar h2 { font-family: var(--mh-serif); font-size: 1.5rem; }
.mh .monthbar .yr { color: var(--mh-muted); font-weight: 300; }
.mh .monthbar .season { margin-top: 3px; }

.mh .dow {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--mh-ink);
    border-bottom: 1px solid var(--mh-rule);
}
.mh .dow div { padding: 7px 9px; text-align: left; }

/* minmax(0,...) not 1fr: a bare 1fr floors at the content's own width, and "Uttara
   Bhadrapada" is wider than a seventh of a phone, so the grid would push past the viewport
   instead of letting the ellipsis do its job. */
.mh .grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-left: 1px solid var(--mh-rule-2);
}
.mh .cell {
    border-right: 1px solid var(--mh-rule-2);
    border-bottom: 1px solid var(--mh-rule-2);
    min-height: 106px;
    padding: 8px 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    background: var(--mh-shukla);
    transition: background .15s;
}
.mh .cell.krishna { background: var(--mh-krishna); }
.mh .cell.pad { background: transparent; }
.mh .cell:not(.pad):hover { background: var(--mh-accent-soft); }
.mh .cell .top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.mh .cell .d {
    font-family: var(--mh-serif);
    font-size: 1.4375rem;
    font-weight: 300;
    line-height: 1;
}
.mh .cell.sun .d { color: var(--mh-accent); }
.mh .cell .phase { font-size: .75rem; color: var(--mh-muted); line-height: 1; }
.mh .cell .vmy { font-size: .75rem; line-height: 1; color: var(--mh-muted); }
.mh .cell[data-vmy=nasa] .vmy { color: var(--mh-accent); }
.mh .cell .fest { font-size: .75rem; line-height: 1; margin-left: auto; letter-spacing: 1px; }
/* The tithi name fits a desktop cell and does not fit a seventh of a phone. Printed
   almanacs solve this the same way: the number carries the day, the name is one tap away
   on the day page, and the moon glyph already says which fortnight it belongs to. */
.mh .cell .ti {
    font-size: .75rem;
    margin-top: 6px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh .cell .t-num { display: none; letter-spacing: .02em; }
.mh .cell .nk {
    font-size: .7188rem;
    color: var(--mh-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh .cell .tm { font-size: .6562rem; color: var(--mh-muted); margin-top: auto; padding-top: 5px; }
.mh .cell.today { box-shadow: inset 0 0 0 1.5px var(--mh-accent); }
.mh .cell.today .d { color: var(--mh-accent); font-weight: 400; }
.mh .cell .mark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mh-gold);
}
@media (max-width: 720px) {
    .mh .cell { min-height: 84px; padding: 6px 5px 7px; }
    .mh .cell .d { font-size: 1.125rem; }
    .mh .cell { overflow: hidden; }
    .mh .cell .top { flex-wrap: wrap; gap: 2px 3px; justify-content: flex-start; }
    .mh .cell .fest { letter-spacing: 0; }
    .mh .cell .ti { font-size: .6875rem; margin-top: 4px; color: var(--mh-ink-2); }
    .mh .cell .t-word { display: none; }
    .mh .cell .t-num { display: inline; }
    .mh .cell .nk {
        font-size: .625rem;
        white-space: normal;
        line-height: 1.25;
        max-height: 2.5em;
    }
    .mh .cell .tm { display: none; }
    .mh .dow div { padding: 6px 4px; font-size: .5625rem; }
}

/* --- day view --- */
.mh .dayhead { padding: 26px 0 18px; border-bottom: 1px solid var(--mh-rule); }
.mh .dayhead .row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.mh .dayhead .dnum {
    font-family: var(--mh-serif);
    font-size: 4.25rem;
    font-weight: 300;
    line-height: 0.86;
    letter-spacing: -0.02em;
}
.mh .dayhead .vara { font-family: var(--mh-serif); font-size: 1.5625rem; line-height: 1.1; }
.mh .dayhead .gdate { margin-top: 4px; }
.mh .dayhead .era { margin-top: 12px; font-size: .7812rem; color: var(--mh-ink-2); line-height: 1.7; }
.mh .dayhead .era b { font-weight: 500; color: var(--mh-ink); }
.mh .daynav { display: flex; gap: 6px; margin-left: auto; align-items: center; }

.mh .cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 40px;
    align-items: start;
}
@media (max-width: 900px) { .mh .cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.mh section.blk { padding: 22px 0 4px; border-bottom: 1px solid var(--mh-rule-2); }
.mh section.blk > h3 { margin-bottom: 12px; }

/* rows of name + time, the almanac's basic unit */
.mh .rows { display: flex; flex-direction: column; }
.mh .rw {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--mh-rule-2);
}
.mh .rw:first-child { border-top: 0; }
.mh .rw .k { flex: 0 0 84px; }
.mh .rw .v { flex: 1; min-width: 0; font-family: var(--mh-serif); font-size: 1rem; line-height: 1.35; }
.mh .rw .v small { font-family: var(--mh-sans); font-size: .7188rem; color: var(--mh-muted); }
.mh .rw .t { font-size: .7812rem; color: var(--mh-ink-2); white-space: nowrap; }
.mh .rw.live .v { color: var(--mh-accent); }
.mh .rw .seq { display: flex; flex-direction: column; gap: 3px; }
.mh .rw .seq span.past { color: var(--mh-muted); }

/* hora ribbon */
.mh .ribbon { display: flex; gap: 2px; margin: 4px 0 12px; }
.mh .ribbon i {
    flex: 1;
    height: 22px;
    background: var(--mh-rule-2);
    border-radius: 1px;
    position: relative;
}
.mh .ribbon i.night { background: var(--mh-rule); }
.mh .ribbon i.on { background: var(--mh-accent); }

.mh .horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
@media (max-width: 520px) { .mh .horas { grid-template-columns: 1fr; } }
.mh .hr {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 6px 0;
    border-top: 1px solid var(--mh-rule-2);
    font-size: .8125rem;
}
.mh .hr .g { width: 15px; color: var(--mh-muted); font-size: .8125rem; }
.mh .hr .n { flex: 1; }
.mh .hr .t { color: var(--mh-muted); font-size: .75rem; white-space: nowrap; }
.mh .hr.on { color: var(--mh-accent); }
.mh .hr.on .g, .mh .hr.on .t { color: var(--mh-accent); }
.mh .hr.on .n { font-weight: 600; }
.mh .hr.night .g { opacity: .55; }

/* muhurta strip */
.mh .mus { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 1px; background: var(--mh-rule-2); border: 1px solid var(--mh-rule-2); }
.mh .mu { background: var(--mh-paper); padding: 6px 8px; font-size: .7188rem; line-height: 1.35; }
.mh .mu b { display: block; font-weight: 500; font-size: .75rem; }
.mh .mu .t { color: var(--mh-muted); font-size: .6562rem; }
.mh .mu.good { background: var(--mh-accent-soft); }
.mh .mu.bad { color: var(--mh-muted); }
.mh .mu.on { outline: 1.5px solid var(--mh-accent); outline-offset: -1.5px; }
.mh .mu .no { color: var(--mh-muted); font-weight: 400; }
.mh .mu-part { margin: 12px 0 5px; }
.mh .mu-part:first-child { margin-top: 0; }

/* Captions under a block's heading: how the block is computed, and where to read more. */
.mh .blk > .cap { font-size: .7188rem; color: var(--mh-muted); margin: 0 0 10px; line-height: 1.55; }
.mh .blk > .rows + .cap { margin-top: 12px; }
.mh h3.sub { margin-top: 14px; }

/* The month grid's legend: one wrapped line of what each mark means. */
.mh .legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; text-transform: none; letter-spacing: .02em; font-size: .6875rem; line-height: 1.5; }

/* small key/value tables */
.mh .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px 20px; }
.mh .kv > div { min-width: 0; }
.mh .kv .v { font-family: var(--mh-serif); font-size: 1rem; margin-top: 2px; }
.mh .kv .v small { font-family: var(--mh-sans); font-size: .6875rem; color: var(--mh-muted); }

.mh table.tab { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.mh table.tab th {
    text-align: left;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mh-muted);
    font-weight: 500;
    padding: 0 8px 6px 0;
    border-bottom: 1px solid var(--mh-rule);
}
.mh table.tab td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--mh-rule-2); }
.mh table.tab td.g { width: 18px; color: var(--mh-muted); }
.mh table.tab td.nm { font-family: var(--mh-serif); font-size: .9375rem; }
.mh table.tab td.nm small, .mh .rw .v small { font-family: var(--mh-sans); font-size: .7188rem; color: var(--mh-muted); }
.mh table.fest td.kind { font-size: .7188rem; color: var(--mh-muted); }
.mh table.fest td a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mh-rule-2); }
.mh .fsearch input {
    width: 100%;
    border: 1px solid var(--mh-rule);
    background: var(--mh-paper-2);
    border-radius: var(--mh-r);
    padding: 9px 11px;
    margin-bottom: 14px;
}

.mh .warn { color: var(--mh-accent); }
.mh .pill {
    display: inline-block;
    border: 1px solid var(--mh-rule);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mh-muted);
}
.mh .pill.acc { border-color: var(--mh-accent); color: var(--mh-accent); }

/* --- names in Tamil: the word in its own font, the switch as two words under a rule --- */
.mh .ta { font-family: 'Noto Sans Tamil', var(--mh-sans); }
.mh .names { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 10px; font-size: .6562rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mh-muted); }
.mh .names a { padding: 5px 0 3px; border-bottom: 2px solid transparent; }
.mh .names a.on { color: var(--mh-ink); border-bottom-color: var(--mh-accent); }
.mh .names a:hover { color: var(--mh-accent); }

/* --- the day's rasi chakra: hairlines, one tint, no fills --- */
.mh .chart { max-width: 380px; margin: 2px 0 14px; }
.mh .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.mh .chart .rule { stroke: var(--mh-rule); stroke-width: 1; fill: none; }
.mh .chart .rule.la { stroke: var(--mh-accent); }
.mh .chart .moon { fill: var(--mh-accent-soft); }
.mh .chart text { fill: var(--mh-ink); font-family: var(--mh-sans); }
.mh .chart .sg { fill: var(--mh-muted); font-size: 10px; letter-spacing: .02em; }
.mh .chart .sg.ta { font-size: 11px; letter-spacing: 0; }
.mh .chart .sg.ns { font-size: 11px; letter-spacing: 0; text-transform: none; }
.mh .chart .ns { font-family: var(--font-serif); }
.mh .chart .pl { font-size: 12.5px; }
.mh .chart .pl .g { fill: var(--mh-muted); font-size: 11px; }
.mh .chart .la { fill: var(--mh-accent); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.mh .chart .ctr { fill: var(--mh-ink-2); font-size: 11px; text-anchor: middle; }
.mh .chart .ctr.serif { font-family: var(--mh-serif); font-size: 15px; fill: var(--mh-ink); }
.mh .chart .cap { font-size: .7188rem; color: var(--mh-muted); margin-top: 10px; line-height: 1.55; }
.mh .chart.north .sg .no { fill: var(--mh-ink-2); font-size: 10px; letter-spacing: 0; }
.mh .chart.north .rule { stroke-linejoin: miter; }

/* --- the day's lagnas: the rāśi rising, one row each, the current one in the accent --- */
.mh .lagnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
@media (max-width: 520px) { .mh .lagnas { grid-template-columns: 1fr; } }
.mh .lg { display: flex; align-items: baseline; gap: 9px; padding: 8px 0; border-top: 1px solid var(--mh-rule-2); font-size: .8125rem; }
.mh .lg .g { width: 15px; color: var(--mh-muted); font-size: .8125rem; }
.mh .lg .n { flex: 1; min-width: 0; }
.mh .lg .n small { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mh-muted); }
.mh .lg .t { color: var(--mh-muted); font-size: .75rem; white-space: nowrap; }
.mh .lg.on { color: var(--mh-accent); }
.mh .lg.on .g, .mh .lg.on .t { color: var(--mh-accent); }
.mh .lg.on .n { font-weight: 600; }
.mh .lagnas + .cap { font-size: .7188rem; color: var(--mh-muted); margin: 10px 0 14px; line-height: 1.55; }

/* --- subscribe --- */
.mh .sub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
@media (max-width: 820px) { .mh .sub-grid { grid-template-columns: 1fr; gap: 20px; } }
.mh .layers { display: flex; flex-direction: column; gap: 0; }
.mh .layer {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid var(--mh-rule-2);
    cursor: pointer;
    align-items: flex-start;
}
.mh .layer input { margin-top: 3px; accent-color: var(--mh-accent); }
.mh .layer b { font-weight: 500; font-size: .875rem; }
.mh .layer span { display: block; font-size: .75rem; color: var(--mh-muted); line-height: 1.45; }
.mh .url {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: stretch;
}
.mh .url input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--mh-rule);
    background: var(--mh-paper-2);
    border-radius: var(--mh-r);
    padding: 9px 11px;
    font-family: ui-monospace, "Fira Code", monospace;
    font-size: .7188rem;
}
.mh ol.steps { margin: 8px 0 0; padding-left: 18px; font-size: .8125rem; color: var(--mh-ink-2); line-height: 1.75; }
.mh ol.steps code {
    font-family: ui-monospace, "Fira Code", monospace;
    font-size: .7188rem;
    background: var(--mh-paper-2);
    padding: 1px 5px;
    border-radius: 2px;
}

/* --- place picker --- */
/* margin: auto puts the modal back in the middle of the window (Tailwind's reset zeroes it, which pinned it to the top-left corner), and the
   header is a plain block even inside the front-page card, whose own .hd is a flex row */
.mh dialog.place {
    margin: auto;
    border: 1px solid var(--mh-rule);
    border-radius: 6px;
    background: var(--mh-paper);
    color: var(--mh-ink);
    padding: 0;
    width: min(440px, calc(100vw - 28px));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}
.mh dialog.place::backdrop { background: rgba(28, 25, 23, .38); }
:is(.mh, .mh.landing-mh.compact) dialog.place .hd { display: block; padding: 16px 18px 12px; border-bottom: 1px solid var(--mh-rule-2); }
.mh dialog.place .bd { padding: 14px 18px 18px; }
.mh dialog.place input[type=text] {
    width: 100%;
    border: 1px solid var(--mh-rule);
    background: var(--mh-paper-2);
    border-radius: var(--mh-r);
    padding: 9px 11px;
    font-size: .875rem;
}
.mh .hits { list-style: none; margin: 10px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.mh .hits li { padding: 9px 2px; border-top: 1px solid var(--mh-rule-2); cursor: pointer; font-size: .8438rem; }
.mh .hits li:hover { color: var(--mh-accent); }
.mh .hits li small { display: block; color: var(--mh-muted); font-size: .7188rem; }

.mh footer.foot {
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--mh-rule);
    font-size: .7188rem;
    color: var(--mh-muted);
    line-height: 1.7;
}
.mh footer.foot a { border-bottom: 1px solid var(--mh-rule); }
.mh .ns { font-family: var(--font-serif); }   /* a name written in the reader's script other than Latin or Tamil: the app's serif stack carries the Noto family */

.mh .pk-tab td.pk-r { font-weight: 600; }
.mh .pk-tab td.pk-d { color: var(--muted-foreground); }
.mh .pk-tab tr.pk.on td { background: color-mix(in srgb, var(--mh-accent-soft, var(--muted)) 60%, transparent); }
.mh .pk-tab .pk-me { background: color-mix(in srgb, var(--mh-accent-soft, var(--muted)) 35%, transparent); }