/* ── Vedic Horā — /geopolitical/timeline, the month timeline ─────────────
   Page-scoped. Optical-glass material and the existing tokens in styles.css
   :root only — no new colour system, no new type scale, no external font.

   ONE COLOUR RULE GOVERNS THIS PAGE: nothing here uses --good or --bad.
   A mundane direction is not a polarity. A war falling more often inside a
   window is not good news and a market crash is not bad luck, so the page is
   not permitted to tint either. Every reading is carried by a SHAPE and a WORD
   in the neutral ink tones, which is also why it survives red-green colour
   blindness: the measured deutan ΔE between --good and --bad is 0.8, so any
   design that leaned on those two would say nothing at all to those readers.
   Four readings, four distinct shapes, four distinct words, one ink family.

   CONTRAST: --ink-faint (#7c879b) measures well below the 4.5:1 AA floor on
   this glass, so NO text on this page may sit on it. That includes the three
   shared classes site.css puts on --ink-faint that this page renders text
   with: .note and .disclaimer-box (lifted below as .gm-noted/.gm-boxed) and
   .stat-l, the stat-tile labels — one of which carries "this month is not in
   the record", a sentence a reader must be able to read. All three are lifted
   to --ink-soft here, scoped to this page's stylesheet so no other page moves.
   --ink-faint survives only as a hairline/marker tint. No new colour is
   introduced — these are the existing :root tokens. */

/* ── The standing no-forecast line ───────────────────────────────────── */
.gm-standing {
  margin: 18px 0 0; padding: 14px 18px;
  border: 1px dashed var(--hair); border-radius: 14px;
  color: var(--ink-soft); font-size: .88rem; line-height: 1.66;
  background: rgba(255, 255, 255, .22);
}
.gm-err { word-break: break-word; }

/* ── Month selector ──────────────────────────────────────────────────── */
.gm-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  padding: 16px 18px; margin-bottom: 20px;
}
.gm-steps { display: flex; align-items: center; gap: 8px; }
.gm-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; padding: 10px 16px;
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
  text-decoration: none; color: var(--ink); border-radius: 13px;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: background .25s, color .25s;
}
.gm-step:hover { background: rgba(255, 255, 255, .7); }
.gm-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-step.is-off { opacity: .38; cursor: not-allowed; }
.gm-step[aria-busy="true"] { opacity: .5; cursor: progress; }
.gm-submit { font-size: .86rem; font-weight: 600; }
.gm-month-label {
  min-width: 8.6em; text-align: center;
  font-weight: 600; font-size: 1.02rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gm-field { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; color: var(--ink-soft); }
.gm-field select {
  font: inherit; font-size: .9rem; color: var(--ink);
  min-height: 46px; padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, .5);
}
.gm-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-msg { min-height: 1.2em; margin: 0 0 14px; font-size: .84rem; color: var(--ink-soft); }
.gm-msg.is-bad { color: var(--bad); }

/* ── Where the month stands with respect to the record ───────────────── */
.gm-standing-band { margin-bottom: 34px; }
.gm-status { padding: 22px 24px; margin-bottom: 0; border-left: 3px solid var(--hair); }
/* The three states differ in the WEIGHT of their left rule, not in hue: a
   month that is outside the record is a fact about coverage, not a warning. */
.gm-status-outside { border-left-width: 6px; }
.gm-status-empty { border-left-style: dashed; }
.gm-status-h { margin: 0 0 10px; font-size: 1.06rem; color: var(--ink); font-weight: 650; }
.gm-status p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.7; }
.gm-status-extra { margin-top: 10px !important; color: var(--ink-soft) !important; font-size: .87rem !important; }

/* ── The day ruler and the day strips ────────────────────────────────── */
.gm-ruler-wrap { padding: 12px 22px 10px; margin-bottom: 14px; }
.gm-ruler-cap {
  display: block; margin-bottom: 7px;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.gm-ruler, .gm-strip {
  display: grid; grid-template-columns: repeat(var(--gm-days, 31), 1fr); gap: 2px;
}
.gm-ruler span {
  font-size: .68rem; line-height: 1.1; text-align: center; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; overflow: visible; white-space: nowrap;
}
.gm-strip { margin: 12px 0 12px; }
.gm-strip span {
  height: 15px; border-radius: 3px;
  background: rgba(120, 150, 200, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
/* A day the condition held on. Ink, not a signal colour. */
.gm-strip span.on {
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* A single dated moment reads as a tick rather than a band. */
.gm-row-moment .gm-strip span.on {
  background: none;
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--ink) 62%, transparent);
}

/* ── Timeline rows ───────────────────────────────────────────────────── */
.gm-rows { display: grid; gap: 16px; }
.gm-row { padding: 20px 22px 18px; margin-bottom: 0; }
.gm-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.gm-row-head h3 { margin: 0; font-size: 1rem; font-weight: 650; color: var(--ink); flex: 1 1 14em; }
.gm-when {
  font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  white-space: normal;
}
.gm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--hair); background: rgba(255, 255, 255, .3);
  white-space: nowrap;
}
/* Each tag also carries a leading glyph, so the kind of row is not conveyed by
   the word alone for a reader skimming, and not by colour for anyone. Every
   tag glyph is DISTINCT from every reading-mark glyph below: eclipse is a
   ringed dot (not the flat mark's empty ring), ingress is a chevron (not the
   not-tested mark's hollow diamond). One glyph, one meaning, page-wide. */
.gm-tag::before { content: ""; width: 8px; height: 8px; flex: none; border: 1.4px solid currentColor; }
.gm-tag-band::before { border-radius: 2px; background: currentColor; }
.gm-tag-eclipse::before {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, currentColor 0 2px, transparent 2.6px);
}
.gm-tag-station::before { border-radius: 0; transform: rotate(45deg); background: currentColor; }
.gm-tag-ingress::before {
  border: none; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  width: 7px; height: 7px; transform: rotate(-45deg); background: none;
}

.gm-force { margin: 0 0 4px; color: var(--ink); font-size: .9rem; line-height: 1.62; }
.gm-lead { margin: 16px 0 8px; color: var(--ink-soft); font-size: .84rem; line-height: 1.6; }
.gm-basis { margin: 14px 0 0; font-size: .79rem; line-height: 1.62; color: var(--ink-soft); }
.gm-basis b { color: var(--ink); font-weight: 650; }
.gm-fine { display: block; margin: 10px 0 0; font-size: .78rem; line-height: 1.6; color: var(--ink-soft); }
.gm-untested {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  margin: 14px 0 0; padding: 13px 16px; border-radius: 12px;
  border: 1px dashed var(--hair); background: rgba(255, 255, 255, .2);
}
.gm-untested > span:last-child { flex: 1 1 16em; color: var(--ink-soft); font-size: .84rem; line-height: 1.62; }

/* ── Tables ──────────────────────────────────────────────────────────── */
/* Wide content scrolls inside its own box; the PAGE never scrolls sideways. */
.gm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gm-table { width: 100%; min-width: 430px; border-collapse: collapse; font-size: .84rem; }
.gm-table th, .gm-table td {
  text-align: left; vertical-align: top; padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(120, 150, 200, .2);
}
.gm-table th {
  color: var(--ink); font-weight: 650; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.gm-table td { color: var(--ink-soft); line-height: 1.6; }
.gm-table tbody tr:last-child th, .gm-table tbody tr:last-child td { border-bottom: none; }
.gm-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-num b { color: var(--ink); font-weight: 650; }
/* The bracketed rate that follows an event-day count: same unit as the
   baseline column, secondary to the count it derives from. --ink-soft, AA. */
.gm-evpct { color: var(--ink-soft); font-weight: 400; }
/* The link to the machine-readable correlation report the counts come from.
   Inline in fine print, so the negative-margin padding buys it a >=44px touch
   target without moving a single line of text around it. */
.gm-report-link {
  color: var(--ink-soft); text-decoration: underline; word-break: break-all;
  display: inline-block; padding: 14px 4px; margin: -14px -4px;
}
.gm-report-link:hover { color: var(--ink); }
.gm-report-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-events { padding: 8px 18px 4px; margin-bottom: 0; }
.gm-events-table { min-width: 620px; }
.gm-events-table td:first-child { white-space: nowrap; color: var(--ink); font-weight: 600; }
.gm-kind {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; color: var(--ink-soft);
  border: 1px solid var(--hair); background: rgba(255, 255, 255, .28); white-space: nowrap;
}
/* The dataset's own verification rating, surfaced rather than hidden. */
.gm-verify {
  display: inline-block; margin-left: 6px;
  font-size: .72rem; letter-spacing: .03em; color: var(--ink-soft); white-space: nowrap;
}
.gm-verify::before { content: "· "; }
.gm-time { margin-top: 6px; }

/* ── Reading marks: shape + word, never colour alone, never good/bad ─── */
.gm-mark {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 650; font-size: .73rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.gm-mark::before { content: ""; width: 10px; height: 10px; flex: none; }
/* above the baseline — filled disc */
.gm-mark.up { color: var(--ink); }
.gm-mark.up::before { border-radius: 50%; background: currentColor; }
/* below the baseline — slashed ring */
.gm-mark.down { color: var(--ink-soft); }
.gm-mark.down::before {
  border-radius: 50%; border: 1.6px solid currentColor;
  background: linear-gradient(135deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
/* near the baseline, no signal — hollow ring */
.gm-mark.flat { color: var(--ink-soft); }
.gm-mark.flat::before { border-radius: 50%; border: 1.6px solid currentColor; }
/* too few to read — hollow square, a different shape from all three above */
.gm-mark.thin { color: var(--ink-soft); }
.gm-mark.thin::before { border-radius: 2px; border: 1.6px solid currentColor; }
/* not tested by the record at all — hollow diamond */
.gm-mark.none { color: var(--ink-soft); }
.gm-mark.none::before { border-radius: 1px; border: 1.6px solid currentColor; transform: rotate(45deg); }

/* ── Definition lists (coverage, method, limits) ─────────────────────── */
.gm-defs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gm-defs > li { padding: 16px 20px; margin-bottom: 0; }
.gm-defs b { display: block; color: var(--ink); font-size: .94rem; font-weight: 650; margin-bottom: 5px; }
.gm-defs span { color: var(--ink-soft); font-size: .87rem; line-height: 1.66; }

/* ── The fence ───────────────────────────────────────────────────────── */
.gm-never { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.gm-never li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--ink-soft); font-size: .89rem; line-height: 1.6;
}
/* Fence bullets are a flat bar — a glyph used NOWHERE else on the page, so a
   fence line can never be mistaken for a "below the baseline" reading (the
   slashed ring belongs to .gm-mark.down alone). */
.gm-never li::before {
  content: ""; width: 12px; height: 2px; flex: none; margin-top: 10px;
  border-radius: 1px; background: var(--ink-soft);
}

/* ── Quick jumps ─────────────────────────────────────────────────────── */
.gm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 46px; padding: 11px 18px; border-radius: 999px;
  font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  font-variant-numeric: tabular-nums;
}
.gm-chip:hover { color: var(--ink); background: rgba(255, 255, 255, .52); }
.gm-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-chip span { color: var(--ink-soft); font-weight: 500; }

.gm-back { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Three shared classes, lifted to AA on this page only ────────────────
   site.css sets .note, .disclaimer-box and .stat-l in --ink-faint (below AA
   on this glass). On this page they carry the fence, the "no event in this
   month" statement and the stat-tile labels — including "this month is not
   in the record", the sentence that stops the em-dash tile being misread as
   a measured zero. None of them may be the faintest text on the page. Scoped
   (.stat-l via the page-only .stat ancestor) so no other page is affected. */
.gm-noted { color: var(--ink-soft); font-size: .89rem; }
.gm-boxed { color: var(--ink-soft); font-size: .87rem; }
.stat .stat-l { color: var(--ink-soft); }

/* ── Narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .gm-controls { padding: 14px; gap: 10px 12px; }
  .gm-field { flex: 1 1 8em; }
  .gm-field select { width: 100%; }
  .gm-submit { flex: 1 1 100%; }
  .gm-row { padding: 17px 15px 15px; }
  .gm-ruler-wrap { padding: 11px 15px 9px; }
  .gm-strip { gap: 1px; }
  .gm-ruler { gap: 1px; }
  .gm-strip span { height: 17px; border-radius: 2px; }

  /* Tables become one card per row, so nothing has to be scrolled sideways
     to be read on a phone. */
  .gm-scroll { overflow-x: visible; }
  .gm-table { min-width: 0; }
  .gm-table thead { position: absolute; left: -9999px; }
  .gm-table td { display: block; padding: 2px 0; border: none; }
  .gm-table tbody tr { display: block; padding: 11px 0; border-bottom: 1px solid rgba(120, 150, 200, .2); }
  .gm-table tbody tr:last-child { border-bottom: none; }
  .gm-table td::before {
    content: attr(data-label) " · "; color: var(--ink-soft);
    font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  }
  .gm-events { padding: 6px 15px 4px; }
  .gm-events-table { min-width: 0; }
}

/* ── Print: an honest sheet, no glass ────────────────────────────────── */
@media print {
  .gm-controls, .gm-msg, .gm-chips, .gm-back, .env { display: none !important; }
  .gm-row, .gm-status, .gm-defs > li, .gm-ruler-wrap, .gm-events {
    background: #fff !important; box-shadow: none !important;
    border: .5pt solid #bbb !important; break-inside: avoid;
  }
  .gm-strip span { height: 9pt; }
  .gm-strip span.on { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gm-table { min-width: 0; font-size: 8.4pt; }
  .gm-force, .gm-basis, .gm-fine, .gm-table td, .gm-status p { color: #222 !important; }
}