/* ============================================================================
   diet.css — DietPlanIndia site layer.
   Sits on top of the shared styles.css + data.css. No images, no webfonts
   beyond the shared Inter, no JS libraries. All motion is opt-out.
   ========================================================================== */

body[data-site="diet"] { --accent: #65a30d; --accent-2: #4d7c0f; --accent-3: #a3e635; --accent-soft: #f2f8e6; }
:root[data-theme="dark"] body[data-site="diet"] { --accent: #a3e635; --accent-2: #bef264; --accent-3: #84cc16; --accent-soft: rgba(163, 230, 53, .14); }

/* ========================================================================
   THE PLATE QUADRANT CHART — this site's own drawing hand.
   AAA+++ §5 (diet row). Deliberately NOT ThaliFacts' hand: thali owns the
   illustrated object (filled katoris, drawn rotis, food colours). This is the
   other half of the same clinic — flat sectors, ONE hairline weight, ruled
   labels, a percent ruler round the rim. Ink over illustration.
   No motion of its own: the entrance is the shared .reveal, and the drawing
   is complete server-side with JavaScript off. Fixed aspect ratio, so it
   reserves its box before paint and costs nothing in CLS.
   ====================================================================== */
.platechart {
  --pg-grain:   color-mix(in srgb, var(--accent) 78%, var(--paper));
  --pg-pulse:   color-mix(in srgb, var(--accent) 48%, var(--paper));
  --pg-veg:     color-mix(in srgb, var(--accent) 26%, var(--paper));
  --pg-protein: color-mix(in srgb, var(--ink) 34%, var(--paper));
  --pg-extras:  color-mix(in srgb, var(--ink) 14%, var(--paper));
  margin: var(--s4) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .platechart {
  --pg-grain:   color-mix(in srgb, var(--accent) 62%, var(--paper));
  --pg-pulse:   color-mix(in srgb, var(--accent) 38%, var(--paper));
  --pg-veg:     color-mix(in srgb, var(--accent) 20%, var(--paper));
  --pg-protein: color-mix(in srgb, var(--ink) 40%, var(--paper));
  --pg-extras:  color-mix(in srgb, var(--ink) 18%, var(--paper));
}
.pc-in { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--s4); align-items: center; padding: var(--s4) 0 var(--s3); }
.pc-dial { min-width: 0; }
.pc-dial svg { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; }

/* the drawing itself: one fill weight, one hairline weight, nothing else */
.platechart .pf { fill: var(--paper-2); }
.platechart .pe { fill: none; stroke: var(--line-2); stroke-width: 1; }
.platechart .pq { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
.platechart .pg { stroke: var(--paper); stroke-width: 1.5; }
.platechart .pg-grain   { fill: var(--pg-grain); }
.platechart .pg-pulse   { fill: var(--pg-pulse); }
.platechart .pg-veg     { fill: var(--pg-veg); }
.platechart .pg-protein { fill: var(--pg-protein); }
.platechart .pg-extras  { fill: var(--pg-extras); }
.platechart .pr { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; fill: var(--faint); }
.platechart .pc-n { font-family: var(--mono); font-size: 30px; font-weight: 600; fill: var(--ink); letter-spacing: -.01em; }
.platechart .pc-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; fill: var(--muted); }

.pc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin: 10px 0 0;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.pc-legend .pc-o, .pc-legend .pc-i { width: 14px; height: 8px; border: 1px solid var(--line-2); flex: none; }
.pc-legend .pc-o { background: var(--pg-grain); }
.pc-legend .pc-i { background: var(--pg-veg); }

/* ruled label column — a clinic handout's key, not a chart legend */
.plate-key { list-style: none; margin: 0; padding: 0; min-width: 0; }
.plate-key li { display: grid; grid-template-columns: 10px minmax(120px, 1.6fr) repeat(3, minmax(58px, .8fr));
  gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.plate-key li:last-child { border-bottom: 1px solid var(--line); }
.plate-key .pk-sw { width: 10px; height: 10px; border: 1px solid var(--line-2); align-self: center; }
.pk-grain   .pk-sw { background: var(--pg-grain); }
.pk-pulse   .pk-sw { background: var(--pg-pulse); }
.pk-veg     .pk-sw { background: var(--pg-veg); }
.pk-protein .pk-sw { background: var(--pg-protein); }
.pk-extras  .pk-sw { background: var(--pg-extras); }
.plate-key .pk-name { font-weight: 650; color: var(--ink); font-size: .95rem; }
.plate-key .pk-name em { display: block; font-style: normal; font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.plate-key .pk-fig { text-align: right; }
.plate-key .pk-fig b { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.plate-key .pk-fig i { display: block; font-style: normal; font-family: var(--mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-top: 1px; }

.platechart figcaption { padding: 0 0 var(--s3); }
.pc-read { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.65; max-width: var(--measure); }
.pc-read b { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .pc-in { grid-template-columns: 1fr; gap: var(--s3); }
  .pc-dial { max-width: 320px; margin: 0 auto; }
  .plate-key li { grid-template-columns: 10px 1fr repeat(3, minmax(50px, auto)); gap: 8px; }
  .plate-key .pk-name em { display: none; }
}

/* ------------------------------------------------------- product handoffs
   §7: furniture, not a link in a sentence. Exempt from the contextual link
   caps precisely because it is visibly a door and not a citation. */
.handoff { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: var(--s4) 0 0; }
.ho { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--line-2);
  transition: border-color var(--t-fast) var(--ease-out); }
.ho:hover { border-color: var(--line-2); border-left-color: var(--accent); }
.ho-out { border-left-color: var(--accent); background: var(--accent-wash); }
.ho .ho-k { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.ho .ho-t { font-weight: 650; color: var(--ink); font-size: 1rem; }
.ho .ho-t::after { content: " →"; color: var(--muted); }
.ho .ho-w { color: var(--ink-2); font-size: .87rem; line-height: 1.5; }

/* --------------------------------------------------------------- macro bar */
.macro { margin-top: 18px; }
.macro-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.macro-bar span { display: block; }
.m-p { background: #0891b2; } .m-c { background: var(--accent); } .m-f { background: #f59e0b; }
.macro-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 11px; font-size: .84rem; color: var(--muted); }
.macro-key span { display: inline-flex; align-items: center; gap: 7px; }
.macro-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.k-p i { background: #0891b2; } .k-c i { background: var(--accent); } .k-f i { background: #f59e0b; }
.macro-key b { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- day card */
.daycard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 16px 6px; margin-bottom: 22px; box-shadow: var(--shadow-xs); scroll-margin-top: 20px; }
.dayhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dayhead h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.dayhead h3 span { color: var(--muted); font-weight: 500; }
.daysum { font-size: .9rem; color: var(--muted); }
.daysum b { color: var(--ink); font-weight: 750; }
.daysum span { opacity: .45; margin: 0 2px; }

table.data.plan td.mt { text-align: left; min-width: 250px; }
.mcell { display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.mname { font-weight: 650; color: var(--ink); }
.mitems { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.mitems em { font-style: normal; opacity: .7; }
a.dish { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
a.dish:hover { color: var(--accent-2); }
.sumnote { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.est { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-2); border-radius: 4px; padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
:root[data-theme="dark"] .est { color: var(--accent); }

/* ------------------------------------------------------------------- misc */
.qty-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.qty-strip a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface); font-size: .88rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.qty-strip a:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }

/* YMYL band — §6.5.2. This used to be an amber-bordered alert box with a
   warning triangle, which is exactly the shape the spec forbids: a scary
   banner over a food figure reads as liability panic and costs more trust than
   it buys. The band is now the shared hairline-ruled note from data.css §20.15
   and this file only holds it apart from what follows it. */
.ymyl { max-width: var(--measure); }
.ymyl p { margin: 0; }
.ymyl a { color: var(--ink-2); }
.ymyl-2 { border-top: 0; margin-top: calc(var(--s4) * -1 + 2px); }

.formula { font-family: var(--mono); font-size: .875rem; line-height: 1.7;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-wash); padding: 14px 18px; margin: 0 0 20px; overflow-x: auto; white-space: pre;
  font-variant-numeric: tabular-nums lining-nums; }
.formula p { margin: 4px 0; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* §3.2 — one elevating shadow per identity, and a day card is not the object
   asking for action. These were riding the old --shadow-xs ramp. */
.daycard, .plate { box-shadow: none; }

/* the sources table's second line: publisher, in the spec voice */
table.data th small { display: block; margin-top: 3px; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .04em; font-weight: 400; color: var(--muted); line-height: 1.5; text-transform: none; }
table.data td.spec { white-space: nowrap; color: var(--muted); }

dl.pts { margin: 0; }
dl.pts dt { font-weight: 750; color: var(--ink); margin-top: 20px; }
dl.pts dt:first-child { margin-top: 0; }
dl.pts dd { margin: 6px 0 0; color: var(--ink-2); line-height: 1.72; }

.conf { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: capitalize; }
.conf.chigh { background: #16a34a1f; color: #15803d; }
.conf.cmedium { background: #f59e0b22; color: #b45309; }
.conf.cmediumlow { background: #64748b22; color: #475569; }
:root[data-theme="dark"] .conf.chigh { color: #4ade80; }
:root[data-theme="dark"] .conf.cmedium { color: #fbbf24; }
:root[data-theme="dark"] .conf.cmediumlow { color: #cbd5e1; }

/* --------------------------------------------------------- guide plates */
.plates { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.plate { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 17px 18px; box-shadow: var(--shadow-xs); }
.plate.worse { border-top: 3px solid #ef4444; }
.plate.better { border-top: 3px solid var(--accent); }
.plate h3 { margin: 0 0 12px; font-size: 1rem; font-weight: 750; }
.plate ul { list-style: none; margin: 0; padding: 0; }
.plate li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.plate li:last-child { border-bottom: 0; }
.plate li em { font-style: normal; color: var(--muted); font-size: .84rem; }
.plate li b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptot { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--line-2); font-size: .9rem; color: var(--muted); }
.ptot b { font-size: 1.3rem; color: var(--ink); font-weight: 800; }
.ptot span { opacity: .4; margin: 0 4px; }

@media (max-width: 640px) {
  .daycard { padding: 13px 12px 4px; }
  table.data.plan td.mt { min-width: 200px; }
}