/* figures.css -- the nine section figures.
 *
 * EVERY COLOUR IS A CUSTOM PROPERTY ALREADY DEFINED IN app.css, so dark mode
 * costs nothing here and cannot drift out of parity: there is not one hard-coded
 * hex in this file except the period bar's per-graha colours, and those arrive
 * from the payload (`spans[].colour`) rather than from CSS at all.
 *
 * NOTHING HERE ENCODES GOOD OR BAD. --deep and --sunk read as "this one" and
 * "not this one", the way the ashtakavarga grid's shading reads as "more than
 * average". A reader must not be able to infer a verdict from a fill, because
 * the verdict belongs to the section's own cited words. The one exception is
 * the prevalence bar, where rarity IS the quantity being drawn, and even there
 * the percentage is printed beside every bar.
 */

.fig-wrap { margin: 14px 0 4px; }

.fig {
  display: block; width: 100%; height: auto; max-width: 360px;
  margin: 0 auto; overflow: visible;
}
.fig.run-win { max-width: 100%; min-height: 160px; }

/* ---- the shared frame ---------------------------------------------------- */
.fig .f-wash {
  font-family: Fraunces, Georgia, serif; font-size: 30px;
  fill: var(--ink); opacity: .045; letter-spacing: .08em;
}
.fig .f-mark {
  font-size: 7px; letter-spacing: .1em; fill: var(--faint); opacity: .6;
}
.fig .f-title {
  font-size: 11px; font-weight: 600; fill: var(--ink);
}
.fig .f-foot { font-size: 9px; fill: var(--faint); }

/* ---- rings: the twelve bhavas and the twenty-seven stars ----------------- */
.fig .f-seg { fill: var(--sunk); stroke: var(--card); stroke-width: 1.5; }
.fig .f-seg-on { fill: var(--deep-soft); }
.fig .f-seg-lagna { stroke: var(--deep); stroke-width: 2; }
.fig .f-hub { fill: var(--card); stroke: var(--hair); stroke-width: 1; }
.fig .f-hn { font-size: 11px; font-weight: 600; fill: var(--body); }
.fig .f-sg { font-size: 8px; letter-spacing: .04em; fill: var(--faint); }
.fig .f-pin {
  font-size: 9px; font-weight: 700; fill: var(--deep); letter-spacing: .03em;
}
.fig .f-starn { font-size: 10px; font-weight: 700; fill: var(--deep); }
/* The pada, drawn as the quarter of the star it is. --brass because it is a
   subdivision of the marked segment and must not read as a second finding. */
.fig .f-pada { fill: var(--brass); }
/* The link across the hub: a house joined to where its ruler stands. */
.fig .f-link { stroke: var(--deep); stroke-width: 1.5; opacity: .75; }
.fig .f-link-a { fill: var(--card); stroke: var(--deep); stroke-width: 1.5; }
.fig .f-link-b { fill: var(--deep); }
.fig .f-c1 { font-size: 13px; font-weight: 600; fill: var(--ink); }
.fig .f-c2 { font-size: 10px; fill: var(--faint); }

/* ---- strips and rows: a position along a line ---------------------------- */
/* THE FOUNDER'S NOTE WAS "very plain, same thing repeating thrice", and the
   cause was four ring figures in one reading. Where the quantity IS a position
   or a distance -- 24th of 27 stars, six houses on -- a line shows it and a
   circle hides it, because on a circle both are angles. These classes are the
   line idiom, and only ONE figure is still a ring. */
.fig .f-cell { fill: var(--sunk); stroke: var(--card); stroke-width: 1; }
.fig .f-cell-on { fill: var(--deep-soft); stroke: var(--deep); stroke-width: 1.5; }
.fig .f-tick { stroke: var(--line); stroke-width: 1; }
.fig .f-padan { font-size: 11px; fill: var(--faint); font-weight: 600; }
.fig .f-padan-on { fill: var(--deep); }
/* The bracket that carries the count. It is the claim, so it takes --deep. */
.fig .f-span-arc { fill: none; stroke: var(--deep); stroke-width: 1.5; }

/* ---- the agreement matrix ----------------------------------------------- */
/* Filled means "this leg speaks to this finding" and empty means it abstained.
   Deliberately NOT a good/bad scale: an abstention is not a failure, and three
   findings resting on one leg is a fact a reader is entitled to see. */
.fig .f-mx { fill: var(--card); stroke: var(--line); stroke-width: 1.5; rx: 2; }
.fig .f-mx-on { fill: var(--deep); stroke: var(--deep); }
.fig .f-colh {
  font-size: 9px; font-weight: 600; fill: var(--faint); letter-spacing: .06em;
}
.fig .f-mxrow { stroke: var(--hair); stroke-width: 1; }
/* The band of houses a rule counts. --sunk, not --deep: it is the RULE, not a
   finding about this reader, and it must not read as a verdict on the houses. */
/* Stroked in the card colour so ADJACENT counted houses stay separate columns.
   The 7th and 8th are both counted and sat next to each other, so without this
   they fused into one wide block and the figure read as a bar chart with two
   bars instead of a band with six columns. */
.fig .f-band-flag { fill: var(--sunk); stroke: var(--card); stroke-width: 1; }
/* Hatched, for the one house our own sources disagree about. A disagreement
   between books is part of the finding and is drawn, not smoothed over. */
.fig .f-band-disp { fill: var(--sunk); stroke: var(--line); stroke-dasharray: 2 3; }

/* ---- the numerology working ---------------------------------------------- */
/* Set like a worked sum on paper, because that is what it is. Householder puts
   the gross volume above the word and the atomic weight below it, so the figure
   is his page, and the reader can add it up themselves -- which is the whole
   reason this one earns its space. Tabular figures so the columns of letter
   values line up under their letters. */
.fig .f-nlet {
  font-size: 12px; font-weight: 600; fill: var(--ink); letter-spacing: .02em;
}
.fig .f-nval {
  font-size: 11px; fill: var(--body); font-variant-numeric: tabular-nums;
}
.fig .f-nrule { stroke: var(--hair); stroke-width: 1; }
.fig .f-nrule-tot { stroke: var(--line); stroke-width: 1.5; }
.fig .f-nsub {
  font-size: 11px; font-weight: 600; fill: var(--body);
  font-variant-numeric: tabular-nums;
}
.fig .f-nchain {
  font-size: 12px; fill: var(--body); font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.fig .f-nfig {
  font-family: Fraunces, Georgia, serif; font-size: 15px; font-weight: 700;
  fill: var(--deep);
}
.fig .f-core { fill: var(--card); stroke: var(--line); stroke-width: 1.4; }
.fig .f-core-same { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2.2; }
.fig .f-core-solo { fill: var(--card); stroke: var(--line); stroke-width: 1.4; }
.fig .f-core-n {
  font-family: Fraunces, Georgia, serif; font-size: 15px; font-weight: 700;
  fill: var(--ink); font-variant-numeric: tabular-nums;
}

/* ---- the shadow points on the zodiac ------------------------------------- */
.fig .f-pt { fill: var(--card); stroke: var(--faint); stroke-width: 1.5; }
.fig .f-pt-on { fill: var(--deep); stroke: var(--deep); }
.fig .f-ptl { font-size: 8px; fill: var(--body); }

/* ---- the three little dosha wheels --------------------------------------- */
.fig .f-mini { fill: var(--sunk); stroke: var(--hair); stroke-width: 1; }
.fig .f-mini-on { fill: var(--deep-soft); stroke: var(--deep); }
.fig .f-dot { fill: var(--line); }
.fig .f-dot-on { fill: var(--accent); }
.fig .f-minin { font-size: 15px; font-weight: 700; fill: var(--ink); }
.fig .f-minil { font-size: 9px; fill: var(--body); }
.fig .f-miniv { font-size: 8px; fill: var(--faint); letter-spacing: .04em; }

/* ---- measured prevalence ------------------------------------------------- */
.fig .f-rowl { font-size: 10px; fill: var(--ink); }
.fig .f-rowv { font-size: 10px; font-weight: 600; fill: var(--body); }
.fig .f-bar { fill: var(--deep); }
.fig .f-track { fill: var(--sunk); }
.fig .f-min { stroke: var(--ink); stroke-width: 1.5; }
.fig .f-band-very_good { fill: var(--deep); }
.fig .f-band-good { fill: var(--deep-soft); }
.fig .f-band-very_bad { fill: var(--sunk); stroke: var(--ink); stroke-width: 1; }
.fig .f-band-bad { fill: var(--sunk); stroke: var(--ink); stroke-width: 1;
  stroke-dasharray: 2 2; }
/* Rarity is the quantity, so it is the one place a scale is meaningful. Even
   here the number is printed, so the bands are a repeat and not the message. */
.fig .f-band-rare { fill: var(--deep); }
.fig .f-band-mid { fill: var(--deep-soft); stroke: var(--deep); stroke-width: 1; }
.fig .f-band-common { fill: var(--sunk); stroke: var(--line); stroke-width: 1; }

/* ---- the running sub-period --------------------------------------------- */
/* The elapsed fill arrives from the payload (the ruling graha's own colour, the
   same one the wide bar at the top of the reading uses) so the two agree at a
   glance without this file knowing the palette. */
.fig .f-elapsed { stroke: none; opacity: .9; }
.fig .f-now { stroke: var(--accent); stroke-width: 2; }
.fig .f-nowl {
  font-size: 9px; font-weight: 700; fill: var(--accent); letter-spacing: .04em;
}

/* ---- the three legs ----------------------------------------------------- */
.fig .f-leg { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.fig .f-leg-on { stroke: var(--deep); stroke-width: 2; stroke-dasharray: none; }
.fig .f-node { fill: var(--sunk); stroke: var(--line); stroke-width: 1; }
.fig .f-node-on { fill: var(--deep-soft); stroke: var(--deep); stroke-width: 2; }
.fig .f-nodel {
  font-size: 10px; font-weight: 600; fill: var(--faint); letter-spacing: .04em;
}
.fig .f-nodel-on { fill: var(--deep); }
.fig .f-nodef { font-size: 9px; fill: var(--faint); }

/* ---- the muhurta strip -------------------------------------------------- */
.fig .f-strip { fill: var(--sunk); stroke: var(--hair); stroke-width: 1; }
.fig .f-grid { stroke: var(--hair); stroke-width: 1; }
.fig .f-win { fill: var(--deep); opacity: .85; }

/* ---- vastu: the nine zones as a plan ------------------------------------ */
/* THE ONE PLACE IN THIS FILE WHERE A FILL DOES CARRY A VERDICT, and it is
   allowed here for a reason no other figure can claim: a vastu finding IS a
   grading -- prohibited, correct, or raised as a note -- and it arrives from the
   corpus already graded and cited. figures.js does not decide it. Even so the
   grading WORD is printed inside every graded cell, so nothing depends on a
   colour being seen, on a mono printer, or on a reader who cannot tell --accent
   from --ok. A cell no finding names gets no fill and no word at all.
   The three families also differ in STROKE -- solid heavy, dashed, solid light
   -- so the plan survives being read in greyscale. */
.fig .f-vz { fill: var(--sunk); stroke: var(--card); stroke-width: 1.5; cursor: help; }
/* Answered but ungraded: an outlined box, because it is present and the figure
   has nothing to say about it. Unanswered stays a recessed --sunk block. */
.fig .f-vz-on { fill: var(--card); stroke: var(--line); }
.fig .f-vz-flag {
  fill: color-mix(in srgb, var(--accent) 40%, var(--card));
  stroke: var(--accent); stroke-width: 2.6;
}
.fig .f-vz-note {
  fill: color-mix(in srgb, var(--warn) 44%, var(--card));
  stroke: var(--warn); stroke-width: 2.2;
}
.fig .f-vz-ok {
  fill: color-mix(in srgb, var(--ok) 40%, var(--card));
  stroke: var(--ok); stroke-width: 2.2;
}
.fig .f-vzd {
  font-size: 11px; font-weight: 700; fill: var(--ink); letter-spacing: .04em;
}
.fig .f-vzr { font-size: 9.5px; fill: var(--body); }
.fig .f-vzn { font-size: 8.5px; fill: var(--faint); }
.fig .f-vzg { font-size: 8px; font-weight: 600; letter-spacing: .03em; }
.fig .f-vzg-flag { fill: var(--accent); }
.fig .f-vzg-note { fill: var(--warn); }
.fig .f-vzg-ok { fill: var(--ok); }
/* "faces", in the corner of the zone the building faces. --deep and not
   --accent: the facing is a fact about the house, not a verdict on it. */
.fig .f-vzf {
  font-size: 8px; font-weight: 700; fill: var(--deep); letter-spacing: .06em;
}
.fig .f-vfl { stroke: var(--deep); stroke-width: 2; }
.fig .f-vfh { fill: var(--deep); }
/* RESULT page only: Duarte star, NOW/SHOULD, element, impact share.
   Intake stays a picker. .f-now is already the running-period stroke. */
.fig .f-star-k {
  font-size: 8px; font-weight: 700; fill: var(--accent); letter-spacing: .12em;
}
.fig .f-star { font-size: 22px; font-weight: 700; fill: var(--accent); }
.fig .f-star-sub { font-size: 9px; fill: var(--body); }
.fig .f-ask { font-size: 9px; fill: var(--body); }
.fig .f-el {
  font-size: 8px; font-weight: 600; fill: var(--deep); letter-spacing: .04em;
}
.fig .f-contrast-now {
  fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5;
}
.fig .f-contrast-should {
  fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1.5;
}
.fig .f-imp-track { fill: var(--sunk); stroke: none; }
.fig .f-imp { fill: var(--warn); }
.fig .f-imp-flag { fill: var(--accent); }
.fig .f-ninth {
  font-family: Fraunces, Georgia, serif;
  font-size: 28px; font-weight: 560; letter-spacing: -.03em;
}
.fig .f-ninth-d {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; fill: var(--faint);
}
.fig .f-ninth-flag { fill: var(--accent); }
.fig .f-ninth-note { fill: var(--warn); }
.fig .f-ninth-ok { fill: var(--ok); }
/* The small plans: where a flagged room is, and where it is preferred. */
.fig .f-vm { fill: var(--sunk); stroke: var(--card); stroke-width: 1; }
.fig .f-vm-on { fill: var(--deep); }
.fig .f-vm-now { fill: none; stroke: var(--accent); stroke-width: 2; }

/* ---- the first screen's hero -------------------------------------------- */
/* Quiet on purpose. It sits above three input boxes and its job is to say what
   kind of thing this is, not to compete with the field the reader has to fill
   in. Everything is --line and --sunk: no accent, nothing that reads as a
   finding, because there is no finding yet. */
.fig.hero { max-width: 340px; margin: 4px auto 10px; }
.fig .f-hero-box { fill: var(--sunk); stroke: var(--line); stroke-width: 1; }
.fig .f-hero-l { stroke: var(--line); stroke-width: 1; }
.fig .f-hero-seg { fill: var(--sunk); stroke: var(--card); stroke-width: 1.5; }
.fig .f-hero-span { fill: var(--sunk); stroke: var(--card); stroke-width: 1; }
.fig .f-hero-span-on { fill: var(--line); }
.fig .f-hero-c {
  font-size: 9px; fill: var(--faint); letter-spacing: .04em;
}
.fig .f-hero-foot { font-size: 9px; fill: var(--faint); }

/* ---- the closing card on the last screen -------------------------------- */
.finish-card { text-align: center; }
.finish-card .finish-mark {
  width: 92px; margin: 2px auto 8px; opacity: .9;
}
.finish-card .finish-mark svg { display: block; width: 100%; height: auto; }
.finish-card h2 { margin: 0 0 6px; }

/* PRINT AND PDF. The figures are vector, so they are already the right thing
   on paper -- but the wash is a screen device and a 4.5% fill prints as grey
   mud on some drivers. */
@media print {
  .fig .f-wash { display: none; }
  .fig { max-width: 320px; }
}