/* ── Monthly muhūrta almanac ───────────────────────────────────────────
   Vedic Horā वैदिक होरा — page-scoped styles for views/muhurta-monthly.ejs.

   Optical-glass material and the existing tokens from styles.css only. No new
   colour is introduced and no new type scale: --good / --bad / --ink* / --hair
   / --accent / --radius are the whole palette (mixed only with each other),
   and the cards sit on the same .card .glass surfaces every other page uses.
   The month/year/stepper control is the SHARED picker (/month-picker.css);
   this sheet styles only what is specific to the almanac.

   POLARITY IS ALWAYS COLOUR + SHAPE + LABEL. The measured deutan ΔE between
   --good and --bad is 0.8, so a reader with red-green colour blindness sees no
   colour difference at all between "named" and "set aside". Each of the four
   verdicts therefore carries its own SHAPE (filled disc / slashed ring /
   hollow ring / hollow ring with a horizontal bar) and its own WORD, and the
   word is always rendered — never replaced by the mark. Removing the colour
   from this file entirely would leave the page fully readable; that is the
   test it is built to pass.

   CONTRAST FLOOR. Raw --ink-faint (#7c879b) is 3.62:1 against the resolved
   white of a card — below the 4.5:1 AA floor for small text. Every SMALL
   piece of text on this page therefore uses the pair
       color: var(--ink-soft);                                   (7.53:1)
       color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink)); (5.53:1)
   — the mix where color-mix() exists, the darker plain token where it does
   not. Both clear AA; --ink-faint itself is kept only for non-text strokes,
   where the 3:1 graphics floor applies (3.62:1 passes). */

/* ── Controls around the shared picker ─────────────────────────────── */
/* The city and undertaking selects ride inside the shared .mp form as extra
   .mp-field members. month-picker.css sets their label colour to raw
   --ink-faint, which fails AA at that size — page-scoped floor: */
.mp .mp-field {
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mp .mp-legend {
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mp-step:focus-visible, .mp-field select:focus-visible, .mp-go:focus-visible,
.mm-why > summary:focus-visible, #mmLabel:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.mm-hint {
  margin: 0 0 8px; font-size: .8rem;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-status {
  min-height: 1.3em; margin: 0 0 16px; font-size: .84rem;
  color: var(--ink-soft);
}

/* ── Month header strip ─────────────────────────────────────────────── */
.mm-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 0 0 6px;
}
.mm-head h2 { margin: 0; font-size: 1.3rem; color: var(--ink); }
.mm-head .mm-where { font-size: .9rem; color: var(--ink-soft); }
.mm-adhika {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink); border: 1px solid var(--hair); background: rgba(255,255,255,.5);
}
.mm-adhika-note { margin: 8px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.62; }

/* ── The four verdict marks ─────────────────────────────────────────── */
.mm-mark {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-weight: 600; font-size: .7rem; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.mm-mark::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none; }
/* Named — a filled disc. */
.mm-mark.named { color: var(--good); color: color-mix(in srgb, var(--good) 74%, var(--ink)); }
.mm-mark.named::before { background: currentColor; }
/* Set aside — a ring crossed by a diagonal. */
.mm-mark.barred { color: var(--bad); color: color-mix(in srgb, var(--bad) 78%, var(--ink)); }
.mm-mark.barred::before {
  border: 1.6px solid currentColor;
  background: linear-gradient(135deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
/* Not named — an empty ring. Silence, drawn as silence. It is the faintest of
   the four ON PURPOSE, but never below the AA floor: --ink-faint raw is
   3.62:1, so it wears the same floor pair as the other small text. */
.mm-mark.unnamed {
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-mark.unnamed::before { border: 1.6px solid currentColor; background: none; }
/* Cannot be decided — a ring crossed by a horizontal bar, so it is distinct
   from "set aside" by shape as well as by colour and word. */
.mm-mark.undecided { color: var(--ink-soft); }
.mm-mark.undecided::before {
  border: 1.6px solid currentColor;
  background: linear-gradient(180deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}

/* ── Legend ─────────────────────────────────────────────────────────── */
.mm-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px 26px; margin: 0; }
.mm-legend > div { display: grid; gap: 4px; }
.mm-legend p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-soft); }

/* ── Day cards ──────────────────────────────────────────────────────── */
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.mm-day { padding: 20px 22px 18px; margin-bottom: 0; }
.mm-day[hidden] { display: none; }
.mm-date {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid var(--hair);
}
.mm-date .mm-num { font-size: 1.5rem; font-weight: 650; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.mm-date .mm-wd { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.mm-date .mm-iso {
  margin-left: auto; font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}

/* The limbs the day was decided from. */
.mm-limbs { margin: 0 0 14px; display: grid; gap: 7px; }
.mm-limb { display: grid; grid-template-columns: 6.2rem 1fr; gap: 10px; align-items: baseline; }
.mm-limb dt {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-limb dd { margin: 0; font-size: .88rem; color: var(--ink); line-height: 1.5; }
/* The pakṣa + tithi-family line and the nakṣatra GROUP — the stated reason
   behind most verdicts, so it must clear AA, not merely decorate. */
.mm-limb dd small {
  display: block; font-size: .74rem; margin-top: 1px;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}

/* The windows. Abhijit is favourable except on Budhavāra; the three eighths
   are not — and each carries its mark, not just its colour. */
.mm-windows { margin: 0 0 14px; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.3); border: 1px solid var(--hair); }
.mm-windows > h4 {
  margin: 0 0 8px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-win { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; }
.mm-win + .mm-win { margin-top: 5px; }
.mm-win .mm-win-name { color: var(--ink-soft); min-width: 6.4rem; }
.mm-win .mm-win-time { color: var(--ink); font-variant-numeric: tabular-nums; }
.mm-win .mm-mark { font-size: .62rem; margin-left: auto; }

/* The twelve undertakings. */
.mm-acts-h {
  margin: 0 0 8px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
/* Grouped by verdict: one line per verdict that occurred, its mark, then the
   undertakings it applied to. The mark still carries colour + shape + word, so
   the grouping is never the only thing distinguishing favourable from adverse. */
.mm-acts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mm-acts > li {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid rgba(120,150,200,.14);
}
.mm-acts > li:last-child { border-bottom: none; }
.mm-acts .mm-act-names { font-size: .85rem; color: var(--ink); line-height: 1.55; }

/* The focused undertaking, lifted onto the face of the card with its reasons. */
.mm-focus {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 14px;
  background: rgba(255,255,255,.42); border: 1px solid var(--hair);
}
.mm-focus h4 {
  margin: 0 0 6px; font-size: .92rem; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.mm-focus h4 .dev {
  font-size: .8rem; font-weight: 500;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-act-why { margin: 0; padding: 0; list-style: none; }
.mm-act-why li { font-size: .8rem; line-height: 1.6; color: var(--ink-soft); }
.mm-act-why li + li { margin-top: 5px; }
.mm-fixed {
  font-size: .72rem; font-weight: 500;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}

/* Tally — a count of undertakings, never a mark for the day. */
.mm-tally {
  margin: 0 0 10px; font-size: .76rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}

/* Per-day notes: the adhika-māsa pointer, and the assumed-day warning. */
.mm-notes { list-style: none; margin: 0 0 10px; padding: 0; }
.mm-notes li { font-size: .78rem; line-height: 1.58; color: var(--ink-soft); }
.mm-notes li + li { margin-top: 5px; }
.mm-flag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
  font-size: .64rem; letter-spacing: .04em; color: var(--bad);
  border: 1px solid rgba(192,69,95,.35);
}

/* "Why" disclosure — every reason for every one of the twelve. */
.mm-why { border-top: 1px solid var(--hair); padding-top: 10px; }
.mm-why > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: .8rem; font-weight: 600; color: var(--ink-soft);
}
.mm-why > summary::-webkit-details-marker { display: none; }
.mm-why > summary::after {
  content: "+"; margin-left: auto; font-size: 1.05rem;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-why[open] > summary::after { content: "\2212"; }
.mm-why-body { margin: 4px 0 0; }
.mm-why-body > div { padding: 9px 0; border-top: 1px solid rgba(120,150,200,.14); }
.mm-why-body > div:first-child { border-top: none; }
.mm-why-body h5 { margin: 0 0 5px; font-size: .82rem; color: var(--ink); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.mm-why-body p { margin: 0 0 4px; font-size: .8rem; line-height: 1.58; color: var(--ink); }
.mm-why-body .mm-applied { margin: 0; font-size: .76rem; color: var(--ink-soft); }
.mm-why-body ul { margin: 0; padding-left: 15px; }
.mm-why-body li { font-size: .79rem; line-height: 1.58; color: var(--ink-soft); }
.mm-why-body li + li { margin-top: 4px; }
.mm-why-body .mm-div { margin-top: 5px; padding-left: 11px; border-left: 2px solid var(--hair); }
.mm-why-body .mm-div p { margin: 0; font-size: .78rem; line-height: 1.56; color: var(--ink-soft); }
.mm-why-body .mm-div-h {
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; display: block; margin-bottom: 3px;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}

/* ── Reading bands ──────────────────────────────────────────────────── */
.mm-defs { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.mm-defs > li { padding: 15px 19px; margin-bottom: 0; }
.mm-defs b { display: block; color: var(--ink); font-size: .94rem; margin-bottom: 5px; font-weight: 600; }
.mm-defs span { color: var(--ink-soft); font-size: .87rem; line-height: 1.66; }
/* The twelve undertakings, described once. Two columns on a wide screen so the
   term and its rule read as a pair; one column on a phone. */
.mm-actref { margin: 8px 0 0; display: grid; grid-template-columns: 8.5rem 1fr; gap: 6px 14px; }
.mm-actref dt {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; padding-top: 2px;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
}
.mm-actref dd { margin: 0; font-size: .85rem; line-height: 1.64; color: var(--ink-soft); }
@media (max-width: 700px) {
  .mm-actref { grid-template-columns: 1fr; gap: 2px; }
  .mm-actref dd { margin-bottom: 8px; }
}

.mm-named { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mm-named li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: .88rem; line-height: 1.6; }
/* A non-text stroke: the 3:1 graphics floor applies and --ink-faint (3.62:1)
   clears it. */
.mm-named li::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px;
  border: 1.6px solid var(--ink-faint);
  background: linear-gradient(135deg, transparent 43%, var(--ink-faint) 43% 57%, transparent 57%);
}

/* ── Phone. No horizontal PAGE scroll at 390px: everything reflows, and
      nothing here is wider than its column. The picker's own reflow lives in
      /month-picker.css; only this page's extra fields are handled here. ── */
@media (max-width: 700px) {
  .mm-grid { grid-template-columns: 1fr; gap: 14px; }
  .mm-day { padding: 17px 16px 15px; }
  .mm-limb { grid-template-columns: 5.4rem 1fr; gap: 8px; }
  .mm-acts > li { grid-template-columns: 1fr; }
  .mm-win { flex-wrap: wrap; }
  .mm-win .mm-mark { margin-left: 0; }
}
@media (max-width: 560px) {
  /* Below the picker's own breakpoint every mp-field is full-width; the print
     button joins the stack rather than floating on a line of its own. */
  #mmPrint { flex-basis: 100%; margin-left: 0; }
}

/* ── Print — a real almanac sheet. Black on white, no glass, no chrome,
      and every disclosure open so a printed page cannot say less than the
      screen did. ───────────────────────────────────────────────────────── */
@media print {
  .mm-status, .mm-hint, .env { display: none !important; }
  .mm-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mm-day, .mm-defs > li {
    background: #fff !important; box-shadow: none !important;
    border: .5pt solid #999 !important; break-inside: avoid; padding: 8px 10px;
  }
  .mm-day::before, .mm-day::after, .mm-defs > li::before, .mm-defs > li::after { display: none !important; }
  .mm-num, .mm-wd, .mm-limb dd, .mm-acts .mm-act-names { color: #111 !important; }
  .mm-limb dt, .mm-iso, .mm-tally, .mm-notes li, .mm-acts .mm-act-why li { color: #333 !important; }
  .mm-windows { background: #f4f4f4 !important; border-color: #999 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mm-why[open] > summary::after, .mm-why > summary::after { content: "" !important; }
  .mm-why > summary { min-height: 0; }
  /* Force every disclosure open in print. A closed <details> is hidden by the
     UA stylesheet on the ::details-content PSEUDO-ELEMENT (content-visibility:
     hidden), NOT on this page's .mm-why-body child — overriding the child
     alone printed every card with its reasons silently missing. The pseudo-
     element is the gate, so the pseudo-element is what is overridden; the
     child rule stays for engines that hid the content by display instead, and
     the page script also sets `open` on every details in beforeprint for
     engines that expose neither. */
  .mm-why:not([open])::details-content {
    content-visibility: visible !important;
    display: block !important;
  }
  .mm-why > .mm-why-body { display: block !important; }
  .mm-mark { color: #111 !important; }
  .mm-mark.named::before { background: #111 !important; border: none !important; }
  .mm-mark.barred::before { border: 1pt solid #111 !important; background: linear-gradient(135deg, transparent 43%, #111 43% 57%, transparent 57%) !important; }
  .mm-mark.unnamed::before { border: 1pt solid #111 !important; background: none !important; }
  .mm-mark.undecided::before { border: 1pt solid #111 !important; background: linear-gradient(180deg, transparent 43%, #111 43% 57%, transparent 57%) !important; }
}