/* The nutrient layer's components (Direction D, universal build): per-serving tiles .t5, "share of a day's need" rows .vm2, the toggle .seg2,
   the fruit / vegetable card .b4, the kidney panel .kid, the surgeon / doctor line .ban, the question-and-answer list .qa.
   Copied from directions/D-universal.html (absolute mockup positions turned into flow layout). Tokens only; no new colours except the nutrient dots below. */
:root{ --n-carb:#B86E00; --n-k:#B86E00; --n-vc:#1E8A4C; --n-zinc:#7E4F78; --n-mg:#5F7419; --n-na:#A8432F; --n-sugar:#A8700F;
  /* the five main tiles: one vivid colour each (28 Oct, owner: "more colourful"); fill and number are mixed from it, so a tile has only one source colour */
  --n-t-energy:#F26B0F; --n-t-protein:#22A06B; --n-t-carb:#F0AE00; --n-t-fat:#E5484D; --n-t-fibre:#7FA51C }

/* per serving / per 100 g toggle */
.seg2{margin:14px auto 0;width:210px;height:34px;border-radius:17px;background:var(--sunk);display:grid;grid-template-columns:1fr 1fr;padding:3px;font-size:12px;font-weight:500;color:var(--muted)}
.seg2 button{display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--muted);font-weight:500;font-size:12px;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.seg2 button.on{background:#fff;color:var(--text);box-shadow:var(--sh)}

/* five tiles */
.tiles5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 14px 0}
.t5{position:relative;background:#fff;border-radius:16px;padding:12px 4px 9px;text-align:center;box-shadow:var(--sh);overflow:hidden}
.t5::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.t5 b{display:block;font-size:17px;font-weight:600;letter-spacing:-.3px;line-height:1.1}
.t5 b small{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0}
.t5 span{display:block;margin-top:3px;font-size:11px;color:var(--muted)}

/* colourful tiles: soft tint of the tile's own colour, a vivid strip on top, number and label in a deep tone of the same colour (contrast is checked by tools/contrast_audit.mjs) */
.tiles5 .t5,.tiles4 .tile{background:color-mix(in srgb,var(--c) 26%,#fff);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 16px -8px color-mix(in srgb,var(--c) 55%,transparent)}
.tiles5 .t5::before{height:5px}
.tiles5 .t5 b,.tiles4 .tile .val{color:#140C04}
.tiles5 .t5 b small,.tiles5 .t5 span,.tiles4 .tile .lbl,.tiles4 .tile .of{color:#1E140A}
.tiles4 .tile .lbl i{width:9px;height:9px;border-radius:50%}
.tiles4 .tile .bar{background:color-mix(in srgb,var(--c) 32%,#fff)}
.tiles4.tz .val{color:var(--muted)}

/* share of a day's need */
.ps2{margin:22px 20px 0;font-size:12px;font-weight:500;color:var(--muted)}
.vms{margin:8px 14px 0;background:#fff;border-radius:22px;padding:6px 16px 6px;box-shadow:var(--sh)}
.vm2{padding:6px 0 7px}
.vm2 .r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:400}
.vm2 .r span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.vm2 .r small{font-size:11px;color:var(--muted)}
.vm2 .r em{font-style:normal;font-size:11px;color:var(--muted);margin-left:8px;display:inline-block;min-width:34px;text-align:right}
.vm2 .na{color:var(--muted);font-size:11.5px}
.vm2 .bar,.fb .bar{height:5px;margin-top:5px}
.vms-more{border-top:1px solid var(--border);margin-top:2px}
.vms-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 0 7px;font-size:12.5px;font-weight:500;color:var(--atext);text-align:left}
.vms-toggle i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-3px 3px 0 0;transition:transform .3s var(--ease)}
.vms-toggle[aria-expanded=true] i{transform:rotate(-135deg);margin-top:3px}
.vms-toggle.alone{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:12px 16px;width:auto;margin:0 14px;display:flex}
.fv-more .vms-toggle.alone{width:calc(100% - 28px)}
.fine2{margin:8px 22px 0;font-size:11.5px;line-height:1.45;color:var(--muted)}

/* fruit / vegetable card (B4) */
.fv .vrow{margin-top:10px}
.b4{margin:14px 14px 0;background:#fff;border-radius:28px;box-shadow:var(--sh);padding:14px 0 10px}
.b4 .bh{display:flex;align-items:center;gap:14px;padding:0 18px}
.b4 .bh img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(80,40,10,.3));flex:none}
.b4 .bh b{display:block;font-size:20px;font-weight:600;letter-spacing:-.2px}
.b4 .bh small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.b4 .bg{padding:8px 18px 4px;display:flex;align-items:baseline;gap:12px}
.b4 .bg b{font-size:44px;font-weight:600;color:var(--good-t);letter-spacing:-1px;line-height:1}
.b4 .bg span{font-size:12.5px;color:var(--muted);max-width:215px;line-height:1.35}
.fb{padding:4px 18px 6px}
.fb .vm2{padding:6px 0 7px}
.fv-more{margin-top:12px}
.fv-more .more-nums{margin-top:4px}
.fv-more .ps2:first-child{margin-top:14px}

/* kidney panel */
.kid{margin:14px 14px 0;background:var(--avoid-bg);border-radius:26px;padding:14px 18px 12px}
.kid .kh{font-size:14px;font-weight:600;color:var(--avoid-t);margin-bottom:8px}
.kr{display:grid;grid-template-columns:1fr auto auto;column-gap:10px;align-items:center;font-size:13px;padding:5px 0}
.kr b{font-weight:500;font-variant-numeric:tabular-nums}
.kr .bar{grid-column:1/4;height:5px;margin-top:6px;background:rgba(255,255,255,.7)}
.kr .bar.red b{background:var(--avoid-d)}
.kr .bar.grn b{background:var(--good-d)}
.band{font-style:normal;height:22px;padding:0 10px;border-radius:11px;font-size:11px;font-weight:500;display:flex;align-items:center;color:#fff}
.band.hi{background:var(--avoid-t)}
.band.lo{background:#177A40}
.band.mi{background:var(--sunk);color:var(--text)}
.kid .fine{margin-top:6px;font-size:11px;color:var(--muted);line-height:1.4}
.kid .dfirst{margin-top:6px;font-weight:500;color:var(--avoid-t);font-size:12px}
.kid .src{margin:8px 0 0;color:var(--muted)}

/* similar choices */
.minis-wrap .ps2{margin-top:18px}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 14px 0}
.mini{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:10px 14px;display:flex;align-items:center;gap:12px;color:inherit}
.mini img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(80,40,10,.28));flex:none}
.mini b{display:block;font-size:14px;font-weight:600}
.mini .mg{display:block;font-size:24px;font-weight:600;color:var(--good-t);letter-spacing:-.5px;line-height:1.1}
.mini small{display:block;font-size:11px;color:var(--muted)}

/* doctor / surgeon line (condition pages) */
.ban{margin:6px 14px 0;min-height:42px;border-radius:21px;background:var(--tint);display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--atext);box-shadow:0 0 0 1px rgba(226,87,15,.14) inset}
.ban img{width:24px;height:24px;object-fit:contain;flex:none}
.whofor{margin:10px 20px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.bandh{margin:20px 20px 6px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--atext);text-transform:uppercase}

/* question and answer list (paedsqa) */
.qa-intro{margin:12px 20px 0;font-size:14px;line-height:1.45;color:var(--muted)}
.qa-g{margin-top:18px}
.qa-g h2{margin:0 20px 8px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--atext);text-transform:uppercase}
.qa-item{background:#fff;border-radius:20px;box-shadow:var(--sh);margin:0 14px 8px;overflow:hidden}
.qa-item button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;text-align:left;font-size:14.5px;font-weight:500;line-height:1.35;color:var(--text)}
.qa-item button i{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px;transition:transform .3s var(--ease)}
.qa-item button[aria-expanded=true] i{transform:rotate(-135deg);margin-top:3px}
.qa-a{padding:0 16px 14px;font-size:14px;line-height:1.5;color:var(--text)}
.qa-a .src-line{margin-top:8px;font-size:11.5px;color:var(--muted)}
.qa-flags{margin:0 14px;background:var(--avoid-bg);border-radius:22px;padding:12px 16px}
.qa-flags li,.qa-not li{list-style:none;position:relative;padding:5px 0 5px 18px;font-size:13.5px;line-height:1.4}
.qa-flags li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--avoid-d)}
.qa-not{margin:0 14px;background:#fff;border-radius:22px;padding:12px 16px;box-shadow:var(--sh)}
.qa-not li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--border-in)}
.qa-flags,.qa-not{padding-left:16px}

/* Telugu: nothing under 13 px (NTR is thin, one weight) */
html.te :is(.ps2,.fine2,.vm2 .r small,.vm2 .r em,.vm2 .na,.t5 b small,.t5 span,.b4 .bh small,.b4 .bg span,.mini small,.kid .fine,.band,.vms-toggle,.seg2 button,.whofor,.bandh,.qa-g h2,.qa-a .src-line){font-size:13px}
html.te :is(.vm2 .r,.kr,.kid .dfirst,.ban){font-size:13.5px}
html.te .band.hi{background:#8F1A14}
html.te .band.lo{background:#0E5230}
html.te .kid .kh,html.te .kid .dfirst{color:#7F1B15}
html.te .t5 b{font-size:16px}
html.te .t5{padding:11px 3px 8px}

/* inside a sheet (plate item) the page margins are not needed */
.sheet .tiles5,.sheet .vms,.sheet .vms-toggle.alone{margin-left:0;margin-right:0}
.sheet .ps2,.sheet .fine2{margin-left:2px;margin-right:2px}