/* ============================================================================
   thali.css — ThaliFacts-only layer on top of styles.css + data.css
   1) the per-site accent (data.css ships accents for the older ring members)
   2) the 3D thali hero — pure SVG/CSS, no images, no JS
   3) macro bars, serving cards and the meal-builder table
   ========================================================================== */

/* ---------------------------------------------------------------- accent
   AAA+++ 2026-07-31. This file used to override --accent with a magenta
   (#db2777 light / #f472b6 dark) that predates the ring. Because thali.css
   loads AFTER data.css, that override beat the per-site accent in
   datasite.css §19 — so the page body painted magenta while the netbar dot,
   the theme-color meta and the whole India cluster painted the registry's
   terracotta #A8471B. Two accents on one page is the opposite of measured,
   and the magenta was never run through contrast-check.mjs. The override is
   gone: --site-accent (terracotta, warm-band Cluster I) now derives
   --accent / --accent-deep / --accent-wash for the whole site, and the dark
   cut #E28A5C from §19 applies at night. Nothing here re-tints it. */

body[data-site="thali"] {
  --spice-1: #e8a33d;   /* dal / besan  */
  --spice-2: #c2410c;   /* sabzi        */
  --spice-3: #7c9a3f;   /* saag         */
  --spice-4: #f1f5f9;   /* rice / curd  */
  --spice-5: #b91c1c;   /* achaar       */
  --plate:   #dbe3ee;
  --plate-2: #b9c4d6;
  --plate-3: #f4f7fc;
  /* The hero's cooked food, as tokens rather than literals. Geometry is
     untouched; only the pigment moves, so the drawing survives dark mode
     without a single pure white in it (§5: "retint strokes to --ink-2,
     never pure white"). */
  --rice:    #ffffff;
  --rice-2:  #e2e8f0;
  --roti:    #f0d5a3;
  --roti-2:  #e6c68f;
  --roti-3:  #c9a065;
  --th-shadow: rgba(11, 16, 32, .16);
  --th-shadow-2: rgba(11, 16, 32, .20);
  --th-gloss: rgba(255, 255, 255, .28);
  --th-gloss-2: rgba(255, 255, 255, .30);
}
:root[data-theme="dark"] body[data-site="thali"] {
  --plate:   #3A342B;   /* warm basalt steel, not the old cool slate */
  --plate-2: #26221C;
  --plate-3: #4A4337;
  --spice-4: #C7C1B4;   /* the rice/curd katori: --ink-2, never white */
  --rice:    #C7C1B4;
  --rice-2:  #9C968A;
  --roti:    #B79150;
  --roti-2:  #9A7940;
  --roti-3:  #6E5730;
  --th-shadow:   rgba(0, 0, 0, .48);
  --th-shadow-2: rgba(0, 0, 0, .58);
  --th-gloss:    rgba(237, 233, 223, .10);
  --th-gloss-2:  rgba(237, 233, 223, .12);
}

/* ------------------------------------------------------------ 3D thali hero
   A layered SVG plate with six katoris. Depth comes from stacked ellipses and
   a soft contact shadow; life comes from a very slow float on three separate
   groups so the scene never reads as a flat sticker. Motion is opt-out.     */
.thali-scene {
  position: relative;
  width: min(430px, 78vw);
  margin: 26px auto 4px;
  filter: drop-shadow(0 32px 44px rgba(11, 16, 32, .22));
}
:root[data-theme="dark"] .thali-scene { filter: drop-shadow(0 32px 48px rgba(0, 0, 0, .7)); }
.thali-scene svg { width: 100%; height: auto; overflow: visible; }

.th-float-a { animation: thFloat 9s ease-in-out infinite; transform-origin: center; }
.th-float-b { animation: thFloat 11s ease-in-out infinite .8s; transform-origin: center; }
.th-float-c { animation: thFloat 13s ease-in-out infinite 1.6s; transform-origin: center; }
.th-steam   { animation: thSteam 4.2s ease-in-out infinite; transform-origin: center; }
.th-steam-2 { animation: thSteam 5.1s ease-in-out infinite 1.3s; transform-origin: center; }

@keyframes thFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-7px) }
}
@keyframes thSteam {
  0%       { opacity: 0; transform: translateY(4px) scaleX(.9) }
  35%      { opacity: .55 }
  100%     { opacity: 0; transform: translateY(-16px) scaleX(1.18) }
}
@media (prefers-reduced-motion: reduce) {
  .th-float-a, .th-float-b, .th-float-c, .th-steam, .th-steam-2 { animation: none; }
  .th-steam, .th-steam-2 { opacity: .3; }
}

.thali-cap {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin-top: 10px;
}

/* ------------------------------------------------------------- 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: #e8a33d; }
.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: #e8a33d; }

/* ------------------------------------------------------- serving assumption */
.assume {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: .88rem;
  color: var(--ink-2);
  margin: 18px 0 0;
}
.assume svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent); margin-top: 2px; }
.assume b { color: var(--ink); }

/* ------------------------------------------------------------- burn-it-off */
.burn-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.burn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  box-shadow: var(--shadow-xs);
}
.burn-card .b-v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.burn-card .b-k { font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------ veg/nonveg dot */
.vdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 3px; border: 1.6px solid #16a34a;
  vertical-align: -2px; margin-right: 7px;
}
.vdot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.vdot.nv { border-color: #b91c1c; }
.vdot.nv::after { background: #b91c1c; }

/* --------------------------------------------------------- the meal builder */
.builder { margin-top: 8px; }
.builder table { width: 100%; border-collapse: collapse; }
.builder th, .builder td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: .9rem; text-align: right; }
.builder th:first-child, .builder td:first-child { text-align: left; }
.builder thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.builder input[type="number"] {
  width: 68px; padding: 6px 8px; text-align: right;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem;
}
.builder tfoot td, .builder tfoot th { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--line-2); font-size: 1rem; }
.b-pick {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.b-pick button {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 600;
}
.b-pick button:hover { border-color: var(--accent); color: var(--accent); }
.b-total {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-top: 18px;
}
.b-total div {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px; text-align: center;
}
.b-total b { display: block; font-size: 1.4rem; font-weight: 800; color: var(--accent); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.b-total span { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------- misc bits */
.qty-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qty-strip a {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 6px 14px; font-size: .84rem;
  font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.qty-strip a:hover { border-color: var(--accent); color: var(--accent); }
.hindi { font-weight: 500; color: var(--muted); }
table.data td.pos { color: var(--ok); font-weight: 700; }

/* ============================================================================
   AAA layer — the heritage kitchen ledger
   Three things live here and nowhere else in the ring: the serving-scale set
   piece, the ledger table treatment, and the unit tally. All SVG + CSS.
   ========================================================================== */

/* ---------------------------------------------- the serving-scale set piece */
.scalefig {
  margin: 26px auto 0;
  max-width: 560px;
  text-align: left;
  color: var(--ink);
}
.scalefig svg {
  display: block;
  width: 100%;
  height: auto;              /* fixed viewBox aspect — reserves its own box, CLS 0 */
  overflow: visible;
}
.sf-rule       { stroke: var(--ink); opacity: .38; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sf-div        { opacity: .16; stroke-dasharray: 2 5; }
.sf-eyebrow    { fill: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 700;
                 letter-spacing: .16em; text-transform: uppercase; text-anchor: middle; }
.sf-glass      { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 2;
                 stroke-linecap: round; stroke-linejoin: round; }
.sf-grad       { stroke: var(--ink); stroke-opacity: .32; stroke-width: 1.4; stroke-linecap: round; }
.sf-liquid     { fill: var(--ink); fill-opacity: .10; }
.sf-level      { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.4; stroke-dasharray: 3 4; }
.sf-disc       { fill: var(--accent); fill-opacity: .16; stroke: var(--accent); stroke-width: 1.6; }
.sf-serve      { color: var(--accent); }
.sf-num        { fill: var(--ink); font-family: var(--serif); font-size: 22px;
                 font-weight: 700; letter-spacing: -.02em; text-anchor: middle;
                 font-variant-numeric: tabular-nums; }
.sf-kcal       { fill: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 650;
                 text-anchor: middle; font-variant-numeric: tabular-nums; }
.sf-cap {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.62;
  color: var(--muted);
}
.sf-cap b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .sf-eyebrow { font-size: 13px; letter-spacing: .1em; }
  .sf-kcal    { font-size: 15px; }
}

/* -------------------------------------------------------------- unit tally */
.tally {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 16px 0 0;
  color: var(--accent);
}
.tally .unit-icon { width: 20px; height: 20px; opacity: .85; }
.tally-more { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tally-lab {
  margin-left: 8px; color: var(--muted); font-size: .78rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- the ledger table
   The signature layout move: hairline rules, no fills, tabular figures, and a
   ruled gutter between the description and the figures — a kept book, not a
   dashboard widget. Ledgers do not stripe; they rule.                       */
.tablewrap.ledger { border: 0; border-radius: 0; background: none; box-shadow: none; }
.tablewrap.ledger table.data { border-collapse: collapse; width: 100%; }
.tablewrap.ledger table.data caption {
  text-align: left; padding: 0 0 12px; color: var(--muted);
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--ink); margin-bottom: 0;
}
/* the rule runs the full width of the book; the words stay in the viewport
   even when the table itself scrolls sideways on a phone */
.tablewrap.ledger table.data caption > span,
.tablewrap.builder table.data caption > span {
  position: sticky; left: 0; display: block; max-width: min(100%, 86vw);
}
.tablewrap.ledger table.data thead th {
  background: none; border-bottom: 1px solid var(--line-2); border-top: 0;
  padding: 10px 12px; font-size: .7rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.tablewrap.ledger table.data tbody td,
.tablewrap.ledger table.data tbody th {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  font-variant-numeric: tabular-nums;
  background: none;
}
.tablewrap.ledger table.data tbody tr:last-child td,
.tablewrap.ledger table.data tbody tr:last-child th { border-bottom: 1.5px solid var(--ink); }
.tablewrap.ledger table.data tbody tr:hover td,
.tablewrap.ledger table.data tbody tr:hover th { background: var(--accent-soft); }
/* the ruled gutter: figures live to the right of a single vertical hairline */
.tablewrap.ledger table.data thead th:nth-child(2),
.tablewrap.ledger table.data tbody td:first-of-type { border-left: 1px solid var(--line-2); }
.tablewrap.ledger table.data tbody tr.self th,
.tablewrap.ledger table.data tbody tr.self td { font-weight: 750; color: var(--ink); }
.tablewrap.ledger table.data td.hi { color: var(--accent); font-weight: 750; }

/* ------------------------------------------------------ the calculator handoff
   Product UX, not an SEO link: a stated action with the number it carries. */
.kitchen-handoff { margin-top: 18px; }
.kh-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; text-decoration: none;
  border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--shadow-xs); transition: .18s;
}
.kh-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kh-btn .hb-t { font-weight: 750; color: var(--ink); font-size: 1rem; letter-spacing: -.015em; }
.kh-btn .hb-s { color: var(--muted); font-size: .8rem; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.kh-btn svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
@media (max-width: 560px) {
  .kh-btn { flex-wrap: wrap; }
  .kh-btn .hb-s { margin-left: 0; width: 100%; text-align: left; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-btn, .kh-btn:hover { transition: none; transform: none; }
}

/* ============================================================================
   AAA+++ STUDIO PREMIUM — the site-local mechanics
   Spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §3, §5 (thali row), §6.
   The set pieces above keep their geometry to the pixel. What follows is the
   register around them: warm-basalt survival for the drawing, the entrance
   stack, one elevating shadow, and the answer set as open typography.
   ========================================================================== */

/* ---- the set piece in warm basalt (§5) --------------------------------
   The beaker/serving drawing is inked in --ink at low opacity, which on the
   old cool charcoal was merely dim and on warm basalt would go muddy. Dark
   re-inks it in --ink-2 — the measured, never-pure-white stroke the spec
   calls for. Every dimension, every radius and the area proportion itself
   are computed in build.mjs and are untouched here. */
:root[data-theme="dark"] .sf-rule,
:root[data-theme="dark"] .sf-glass,
:root[data-theme="dark"] .sf-grad,
:root[data-theme="dark"] .sf-level { stroke: var(--ink-2); }
:root[data-theme="dark"] .sf-glass { stroke-opacity: .7; }
:root[data-theme="dark"] .sf-grad  { stroke-opacity: .42; }
:root[data-theme="dark"] .sf-rule  { opacity: .46; }
:root[data-theme="dark"] .sf-liquid { fill: var(--ink-2); fill-opacity: .13; }
:root[data-theme="dark"] .sf-num    { fill: var(--ink-2); }
:root[data-theme="dark"] .scalefig  { color: var(--ink-2); }

/* the unit tally and the icon beside every figure: accent in both modes, and
   the accent already has a dark cut in datasite.css §19 */
:root[data-theme="dark"] .tally .unit-icon { opacity: 1; }

/* ---- the header brand mark, re-inked without touching _shared --------
   BRAND_MARK.thali in globalsite.mjs hard-codes the retired magenta into the
   SVG's fill/stroke ATTRIBUTES, so the lockup was the last magenta object on
   an otherwise terracotta page. Presentation attributes lose to any CSS rule,
   so the two attribute selectors below re-ink it in both modes with no edit
   to the shared master. Logged as a shared-layer request. */
body[data-site="thali"] .brand svg [fill="#db2777"]   { fill: var(--accent); }
body[data-site="thali"] .brand svg [stroke="#db2777"] { stroke: var(--accent); }

/* ---- the mono spec voice on this site's own furniture (§3.4) ---------- */
.sf-eyebrow { font-family: var(--mono); letter-spacing: .14em; }
.tally-lab  { font-family: var(--mono); letter-spacing: .08em; font-weight: 500; }
.thali-cap  { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; }
.tablewrap.ledger table.data caption,
.tablewrap.builder table.data caption { font-family: var(--mono); letter-spacing: .1em; font-weight: 500; }
.b-total span { font-family: var(--mono); letter-spacing: .07em; }
.burn-card .b-k { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; }

/* ---- the answer block, unboxed, with the keel above its kicker (§3.3) --
   Anatomy is keel rule -> kicker -> h2 -> figure, which is the trades pair's
   section grammar. The keel therefore rides the kicker, not the h2, so the
   accent rule is not stranded below the eyebrow it is supposed to introduce. */
.hero .kicker.keel { margin: 26px 0 6px; }
h2.sec.nokeel::before { display: none; }
.hero h2.sec.nokeel { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--ink-2); font-weight: 550; margin: 0 0 10px; }
.answer.aaa .unitfig { align-items: center; gap: 14px; }
.answer.aaa .big.stat-display { display: inline-block; }
.answer.aaa p + p { margin-top: 12px; }
/* The one hairline under the answer, per §4 — the srcline draws it. */
.answer.aaa .macro { margin-top: 22px; }

/* ---- entrance choreography (§3.7) -------------------------------------
   Above the fold only, once, on load: kicker -> h1 -> answer at a 60ms
   stagger. shell() emits the eyebrow and the h1 without class hooks, so
   their two steps are done by selector here; the answer block carries
   .reveal .reveal-3 in the markup. Gated behind no-preference, so a
   reduced-motion or no-JS reader is handed the finished page. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow { animation: aaa-rise var(--t-slow) var(--ease-out) both; }
  .hero h1       { animation: aaa-rise var(--t-slow) var(--ease-out) both; animation-delay: 60ms; }
}

/* ---- elevation: exactly one floating object per page (§3.2) ----------- */
.burn-card { box-shadow: none; }
.kh-btn { box-shadow: var(--shadow-lift); transition: border-color var(--t-fast) var(--ease-out); }
/* never translate on hover: it costs nothing visually and it is the tell of a
   template. The hairline darkening is the whole hover. */
.kh-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); transform: none; }
:root[data-theme="dark"] .kh-btn { box-shadow: none; background: var(--surface); border-color: var(--line-2); }
:root[data-theme="dark"] .kh-btn:hover { border-color: var(--accent); }

/* ---- the method spec inside a narrow measure -------------------------- */
.method { max-width: var(--measure); }
.method li b { color: var(--ink); font-weight: 650; }

/* ---- source lines never crowd the figure they belong to --------------- */
.scalefig .srcline { margin-top: 14px; }
.tablewrap + .srcline { margin-top: 10px; }