/* ============================================================================
   fast.css — VratFuel-only layer on top of styles.css + data.css
   1) the per-site accent (data.css only ships accents for the older ring)
   2) the 3D moonrise hero — pure SVG/CSS, no images, no JS, motion opt-out
   3) the components this site needs: safety and risk notes, the eaten/avoided
      pair, the hold grid, vrat status dots, macro bars, the IF calculator
   Everything below is checked in both light and dark.
   ========================================================================== */

/* ---------------------------------------------------------------- accent */
body[data-site="fast"] { --accent: #a16207; --accent-2: #854d0e; --accent-3: #d9a441; --accent-soft: #fdf5e6; }
:root[data-theme="dark"] body[data-site="fast"] { --accent: #e3b341; --accent-2: #f2cf6b; --accent-3: #ca8a04; --accent-soft: rgba(227, 179, 65, .14); }

body[data-site="fast"] {
  --night:   #1e293b;   /* sky, outer   */
  --night-2: #33415c;   /* sky, centre  */
  --ridge:   #0f172a;
  --ridge-2: #1e2a44;
  --plate:   #e6ddcd;
  --plate-2: #c9bda6;
  --plate-3: #f6f1e6;
  --f-1: #c2410c;       /* pomegranate  */
  --f-2: #d9a441;       /* mango        */
  --f-3: #7c9a3f;       /* guava        */
  --f-4: #f8fafc;       /* milk / curd  */
  --f-5: #ffffff;
  --f-6: #b45309;       /* dates        */
  --ok-line: #15803d;
  --no-line: #b45309;
}
:root[data-theme="dark"] body[data-site="fast"] {
  --night:   #060a15;
  --night-2: #16233d;
  --ridge:   #04070f;
  --ridge-2: #0d1526;
  --plate:   #2a2418;
  --plate-2: #17140e;
  --plate-3: #3b3324;
  --f-4: #cbd5e1;
  --f-5: #e2e8f0;
  --ok-line: #4ade80;
  --no-line: #fbbf24;
}

/* --------------------------------------------------------- the moonrise hero
   Depth comes from stacked ellipses and a contact shadow. Three float groups
   at different periods so the scene never reads as a flat sticker.          */
.fast-scene {
  position: relative;
  width: min(440px, 82vw);
  margin: 26px auto 4px;
  filter: drop-shadow(0 30px 44px rgba(11, 16, 32, .24));
}
:root[data-theme="dark"] .fast-scene { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .75)); }
.fast-scene svg { width: 100%; height: auto; overflow: visible; }

.fs-float-a { animation: fsFloat 9s ease-in-out infinite; transform-origin: center; }
.fs-float-b { animation: fsFloat 11.5s ease-in-out infinite .7s; transform-origin: center; }
.fs-float-c { animation: fsFloat 13.5s ease-in-out infinite 1.5s; transform-origin: center; }
.fs-moon    { animation: fsRise 16s ease-in-out infinite; transform-origin: center; }
.fs-stars   { animation: fsTwinkle 6s ease-in-out infinite; }

@keyframes fsFloat   { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes fsRise    { 0%, 100% { transform: translateY(3px) } 50% { transform: translateY(-6px) } }
@keyframes fsTwinkle { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

@media (prefers-reduced-motion: reduce) {
  .fs-float-a, .fs-float-b, .fs-float-c, .fs-moon, .fs-stars { animation: none; }
}

.fast-cap {
  max-width: 44ch;
  margin: 14px auto 0;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------- the YMYL armour band
   AAA+++ §6.5.2. This was a red-filled alert box with a warning triangle.
   The substance was right and the register was wrong: a scary banner over a
   page that is telling a reader their observance may not be safe FOR THEM
   reads as liability panic, and panic is not how you get read. It is now the
   shared hairline-ruled .ymyl band with the fasting-specific sentence set
   inside it, so the page carries one calm note instead of two loud ones.
   The .safety selector is retired; nothing emits it. */
.ymyl { max-width: 780px; margin: 24px auto 0; text-align: left; }
.ymyl p { font-size: .89rem; line-height: 1.62; color: var(--ink-2); }
.ymyl .armour-2 { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.ymyl .armour-2 b { color: var(--ink); font-weight: 650; }
.ymyl a { font-weight: 600; }

/* per-observance risk block */
.risk {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.risk h2 { font-size: 1.05rem; font-weight: 750; letter-spacing: -.025em; margin-bottom: 8px; }
.risk h2::after { content: none; }
.risk p { color: var(--ink-2); font-size: .95rem; line-height: 1.65; }
.risk-links { margin-top: 12px; font-size: .84rem; }
.risk-links a { font-weight: 600; }

/* the no-times note — same words everywhere it appears */
.notimes {
  max-width: 780px; margin: 22px auto 0; padding: 18px 22px; text-align: left;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: var(--radius);
}
.notimes h2 { font-size: .95rem; font-weight: 750; letter-spacing: -.02em; margin-bottom: 6px; color: var(--accent-2); }
:root[data-theme="dark"] .notimes h2 { color: var(--accent); }
.notimes h2::after { content: none; }
.notimes p { font-size: .88rem; line-height: 1.6; color: var(--ink-2); }

/* --------------------------------------------------- eaten / set aside pair */
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.card h3 { font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.card ul { margin: 0; padding-left: 0; list-style: none; }
.card li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.card li::before { position: absolute; left: 0; top: -1px; font-weight: 800; }
.ok-card { border-top: 3px solid var(--ok-line); }
.ok-card h3 { color: var(--ok-line); }
.ok-card li::before { content: "+"; color: var(--ok-line); }
.no-card { border-top: 3px solid var(--no-line); }
.no-card h3 { color: var(--no-line); }
.no-card li::before { content: "—"; color: var(--no-line); }

/* -------------------------------------------------------------- hold grid */
.holdgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.hold {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.hold h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.hold h3 svg { width: 18px; height: 18px; flex: none; }
.hold p { font-size: .92rem; line-height: 1.62; color: var(--ink-2); }

/* -------------------------------------------------------- vrat status dots */
.vs {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 8px; vertical-align: baseline; flex: none;
}
.vs-yes     { background: #16a34a; }
.vs-varies  { background: #d97706; }
.vs-no      { background: #b91c1c; }
.vs-context { background: #64748b; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-top: 18px; font-size: .8rem; color: var(--muted); }

.vrat-flag {
  max-width: 760px; margin: 18px auto 0; padding: 14px 20px; text-align: left;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  border-left: 4px solid var(--line-2);
}
.vrat-flag b { display: block; font-size: .95rem; font-weight: 700; }
.vrat-flag span { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; }
.vf-yes     { border-left-color: #16a34a; }
.vf-yes b   { color: #15803d; }
.vf-varies  { border-left-color: #d97706; }
.vf-varies b{ color: #b45309; }
.vf-no      { border-left-color: #b91c1c; }
.vf-no b    { color: #b91c1c; }
.vf-context { border-left-color: #64748b; }
:root[data-theme="dark"] .vf-yes b    { color: #4ade80; }
:root[data-theme="dark"] .vf-varies b { color: #fbbf24; }
:root[data-theme="dark"] .vf-no b     { color: #fca5a5; }

/* intensity badge in the observance index */
.int {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface-2);
}
.int-none     { border-color: #94a3b8; color: #64748b; }
.int-light    { border-color: #16a34a; color: #15803d; }
.int-moderate { border-color: #d97706; color: #b45309; }
.int-high     { border-color: #ea580c; color: #c2410c; }
.int-extreme  { border-color: #b91c1c; color: #b91c1c; background: color-mix(in srgb, #b91c1c 10%, var(--surface-2)); }
:root[data-theme="dark"] .int-light    { color: #4ade80; }
:root[data-theme="dark"] .int-moderate { color: #fbbf24; }
:root[data-theme="dark"] .int-high     { color: #fdba74; }
:root[data-theme="dark"] .int-extreme  { color: #fca5a5; }

/* ------------------------------------------------------------- macro bar */
.macro { margin: 20px 0 0; }
.macro-bar {
  display: flex; height: 16px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.macro-bar span { display: block; height: 100%; }
.macro-bar .m-p { background: #2563eb; }
.macro-bar .m-c { background: var(--accent); }
.macro-bar .m-f { background: #16a34a; }
.macro-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: .84rem; color: var(--ink-2); }
.macro-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }
.macro-key b { font-variant-numeric: tabular-nums; }
.macro-key .k-p i { background: #2563eb; }
.macro-key .k-c i { background: var(--accent); }
.macro-key .k-f i { background: #16a34a; }

/* ------------------------------------------------------- serving assumption */
.assume {
  display: flex; gap: 11px; align-items: flex-start;
  max-width: 760px; margin: 16px auto 0; padding: 13px 18px; text-align: left;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.55; color: var(--ink-2);
}
.assume svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }

/* --------------------------------------------------------- prose additions */
.lead-p { font-size: 1.06rem; line-height: 1.68; color: var(--ink-2); font-weight: 500; }
.glist { margin: 0 0 8px; padding-left: 0; list-style: none; }
.glist li { position: relative; padding-left: 22px; margin-bottom: 10px; line-height: 1.62; color: var(--ink-2); }
.glist li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; line-height: 1.62; color: var(--ink-2); }
.prose p { margin-bottom: 13px; color: var(--ink-2); line-height: 1.68; }
.alt { font-weight: 600; opacity: .85; }

/* ------------------------------------------------------- the IF calculator */
.calc select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.calc select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-note { margin-top: 14px; font-size: .86rem; color: var(--muted); line-height: 1.55; }
table.data td small { font-size: .72rem; color: var(--muted); display: block; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .safety, .notimes { padding: 15px 17px; }
  .card, .hold, .risk { padding: 17px 18px; }
  .fast-cap { font-size: .76rem; }
}

/* ============================================================================
   THE PANCHANG ARC — VratFuel's set piece (AAA+++ §5)

   Drawing hand: almanac printing. One hairline horizon rule with end serifs,
   a finely dotted sun path above it, a shallow trough below it for the night,
   vertical station hairlines, and the observed span STRUCK OVER the path in a
   heavier stroke. Fine rules, an arc, marked stations — nothing else. No
   gradient, no shadow, no fill, no animation (so reduced-motion and CLS are
   satisfied by construction, and the whole drawing survives JS being off).

   Deliberately unlike every sibling: rectilinear bezels are sehat, katori
   units are thali, square terminals are move, 1.6px round is yoga, and the
   printed clinic grid belongs to grow.
   ========================================================================== */
.panchang { margin: 26px auto 0; max-width: 760px; }
.panchang svg { display: block; width: 100%; height: auto; overflow: visible; }
.panchang figcaption {
  margin-top: 10px; font-size: .84rem; line-height: 1.6; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 9px;
}

/* the horizon rule and its end serifs — the almanac's baseline */
.pa-rule path { fill: none; stroke: var(--line-2); stroke-width: 1; }
/* the sun's own path: printed fine and dotted, because it is the grid the
   argument is drawn on, not the argument */
.pa-path { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }

/* the observed span, struck over the path */
.pa-observed { fill: none; stroke: var(--accent-deep); stroke-width: 2.4; stroke-linecap: butt; }
.pa-observed.dry { stroke-width: 3.2; }
/* permitted-food days are not abstention and must not be drawn as it */
.pa-restricted { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; }
.pa-dot { fill: var(--accent-deep); }

/* stations: a hairline dropped from the path to the rule, a small station dot */
.pa-mark path { fill: none; stroke: var(--line-2); stroke-width: .75; }
.pa-mark circle { fill: var(--ink-2); }
.pa-dev { font-family: var(--sans); font-size: 12px; font-weight: 500; fill: var(--ink-2); }
.pa-rom {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; fill: var(--muted);
}
.pa-moon path { fill: var(--muted); opacity: .55; }
.pa-vigil path { fill: none; stroke: var(--muted); stroke-width: .75; stroke-dasharray: 2 3; }
.pa-cont path { fill: none; stroke: var(--accent-deep); stroke-width: 2.4; stroke-dasharray: 6 5; }
.pa-key .pa-dev { font-size: 15px; fill: var(--ink); }

/* ---- the almanac entry line (the Devanagari-ready date row) --------------
   No new font: body[data-cluster="india"] already carries Noto Sans
   Devanagari in the --sans stack for the whole cluster, so the script costs
   zero requests and sits on the same baseline as the Roman line. */
.pa-row { max-width: 780px; margin: 22px auto 0; text-align: left; border-top: 1px solid var(--line); padding-top: 12px; }
.pa-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 6px 0 0; }
.pa-script { font-family: var(--sans); font-size: 1.32rem; font-weight: 600; color: var(--ink); letter-spacing: 0; line-height: 1.35; }
.pa-rom-name { font-family: var(--serif); font-size: 1.06rem; color: var(--ink-2); }
.pa-meta { margin-top: 8px; text-transform: uppercase; }
.pa-meta .sep { color: var(--faint); }
.pa-cadence { margin-top: 8px; font-size: .88rem; line-height: 1.6; color: var(--muted); max-width: 60ch; }

/* ---- the home page's small multiple: the four shapes of a fasting day ---- */
.pa-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 22px; margin: 20px 0 4px;
}
.pa-mini figcaption {
  margin-top: 4px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.pa-mini .pa-script { font-family: var(--sans); font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-right: 4px; }
.pa-mini svg { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  .pa-dev { font-size: 14px; }
  .pa-rom { font-size: 11px; }
  .pa-script { font-size: 1.14rem; }
  .ymyl, .notimes { padding-left: 0; padding-right: 0; }
}