/* A Diet Can Be Designed — per-post layer.
 * Loaded after journal.css. Every rule is scoped to this post's body.
 *
 * Two things live here: retheme tokens, and the one instrument this post is the
 * only owner of. The shared inspector components stay in journal.css — they are
 * the house style. The nutrition variant below is scoped to
 * .inspect[data-kind="nutrition"] so the goal and outcome inspectors, which are
 * paired-comparison charts on the same classes, keep the house treatment.
 */

body[data-post="a-diet-can-be-designed"] {
  /* Nordic light: the ground cools and the accent moves from plum to blackcurrant. */
  --ground: #EEF1F0;
  --surface: #E1E7E5;
  --surface-2: #FAFCFB;
  --rule: #C4CDC9;
  --accent: #4C2246;
  --accent-soft: #E4D9E2;
  --amber: #8A4E0C;
  /* One colour per nutrient, held across the whole instrument, so a reader who
     learns that fibre is teal reads the next item's fibre bar without going back
     to the label. The ramp is the newspaper-chart palette: four hues of one
     weight, none of them red — red is spent on the single exception below.
     Reusing --data would make "past its cap" read as a darker green. */
  --nutr-fibre: #1C6E7E;
  --nutr-protein: #0B4F87;
  --nutr-vitc: #A66A00;
  --nutr-iron: #6E4A86;
  --nutr-bar-over: #B3200F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-post="a-diet-can-be-designed"] {
    --ground: #0E1313;
    --surface: #171E1D;
    --surface-2: #0B0F0F;
    --rule: #29322F;
    --accent: #C68FB6;
    --accent-soft: #2B1F2D;
    --amber: #DFA355;
    --nutr-fibre: #5FADBC;
    --nutr-protein: #6FA8DC;
    --nutr-vitc: #E0A83D;
    --nutr-iron: #B398D4;
    --nutr-bar-over: #F0554F;
  }
}
:root[data-theme="dark"] body[data-post="a-diet-can-be-designed"] {
  --ground: #0E1313;
  --surface: #171E1D;
  --surface-2: #0B0F0F;
  --rule: #29322F;
  --accent: #C68FB6;
  --accent-soft: #2B1F2D;
  --amber: #DFA355;
  --nutr-fibre: #5FADBC;
  --nutr-protein: #6FA8DC;
  --nutr-vitc: #E0A83D;
  --nutr-iron: #B398D4;
  --nutr-bar-over: #F0554F;
}

/* ---- the SHOP photo belongs to the explanation, not the shelf ----
 *
 * The shelf keeps its compact line-icon vocabulary. Pointing at an item updates
 * one editorial photograph directly below that food's written explanation,
 * where it can add recognition without making the selector itself heavier.
 */
body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: .75rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}
/* Once the panel sticks to the foot of a phone viewport it has a height budget,
   and a 16/9 photo across the full width spends most of it. Beside the name
   instead: recognisable at 5.5rem, and the bars keep their room. */
@container (max-width: 36rem) {
  body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-id {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-areas: "photo name" "photo note";
    align-content: start;
    column-gap: .7rem;
  }
  body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-name { grid-area: name; }
  body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-note { grid-area: note; }
  body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-photo {
    grid-area: photo;
    margin-top: .15rem;
    aspect-ratio: 1 / 1;
  }
}
body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  opacity: 0;
  filter: saturate(.82) contrast(.96);
  transition: opacity .16s ease-out;
}
body[data-post="a-diet-can-be-designed"] #shop-inspect[data-image-ready="true"] .inspect-photo img {
  opacity: 1;
}
body[data-post="a-diet-can-be-designed"] #shop-inspect[data-idle="true"] .inspect-photo,
body[data-post="a-diet-can-be-designed"] #shop-inspect[data-image-error="true"] .inspect-photo {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-photo img {
    filter: saturate(.7) contrast(.94) brightness(.78);
  }
}
:root[data-theme="dark"] body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-photo img {
  filter: saturate(.7) contrast(.94) brightness(.78);
}
@media (prefers-reduced-motion: reduce) {
  body[data-post="a-diet-can-be-designed"] #shop-inspect .inspect-photo img {
    transition: none;
  }
}

/* ---- the outcome bars take their row's verdict colour ----
 *
 * Every other mark on a lane row — the dot, the reported figure, the verdict
 * chip — is already coloured by that row's kind. The inspector's bar was the one
 * mark that ignored it and painted flat --data green, so on "Body weight ·
 * Regained" a green bar sat under a red dot, a red +4.6 kg and a red chip. The
 * bar now reads from the same five-way palette, which is the chassis' own, so no
 * new colour enters the page and all three theme states come for free.
 */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-bars[data-verdict="good"] { --lane-bar: var(--good); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-bars[data-verdict="hold"] { --lane-bar: var(--hold); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-bars[data-verdict="part"] { --lane-bar: var(--accent); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-bars[data-verdict="flat"] { --lane-bar: var(--flat); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-bars[data-verdict="null"] { --lane-bar: var(--bad); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-fill {
  background: var(--lane-bar, var(--data));
}
/* The adjusted row is the same measure seen a second way, so it holds the same
   hue at a lower weight rather than dropping to neutral grey. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-row[data-ref="true"] .inspect-fill {
  background: var(--lane-bar, var(--ink-3));
  opacity: .38;
}
/* The printed figure follows the bar, matching the lane row's own number. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="outcome"] .inspect-row:not([data-ref="true"]) .inspect-val {
  color: var(--lane-bar, var(--ink));
}

/* ---- the nutrition bars, in the flat-block idiom ----
 *
 * The house inspector puts the label and the figure on one line above a rounded
 * capsule. This variant reads the way a newspaper chart does: the label sits on
 * its own line, the zero baseline is a drawn rule the bars start from, the
 * blocks are square, and the figure rides at the end of its own bar so the eye
 * lands on length and number together.
 *
 * The scoping selector matters. Three inspectors on this page share
 * .inspect-row; only the nutrition one is a set of independent magnitudes on
 * separate scales. The other two are paired comparisons where the second row is
 * a reference bar, and a label-above-bar layout would pull that pair apart.
 */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-bars { gap: .85rem; }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row { gap: .25rem; }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-label {
  font-weight: 600;
  color: var(--ink-2);
}
/* The figure leaves the top row and moves onto the bar, so the top row is now
   just the label and must not space its one child apart. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row-top {
  display: block;
}
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-track {
  height: 13px;
  border-radius: 0;
  background: none;
  border-left: 1px solid var(--ink);
  overflow: visible;
}
/* Each nutrient keeps its own colour, set from the row's data-nut. The bar and
   the shelf-item legend below both read the same variable, so the key and the
   chart cannot drift apart. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-nut="f"] { --nutr-bar: var(--nutr-fibre); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-nut="pr"] { --nutr-bar: var(--nutr-protein); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-nut="c"] { --nutr-bar: var(--nutr-vitc); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-nut="fe"] { --nutr-bar: var(--nutr-iron); }
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-fill {
  border-radius: 0;
  background: var(--nutr-bar);
}
/* The label carries a swatch of its own bar's colour, so the pairing is legible
   before a reader has traced label to bar. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-label::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .38rem;
  background: var(--nutr-bar);
  vertical-align: baseline;
}
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-missing="true"] .inspect-label::before {
  background: none;
  box-shadow: inset 0 0 0 1px var(--ink-3);
}
/* The figure rides at the end of its own bar. It is not a child of the track, so
   it is anchored against --w, which the instrument sets to the same percentage
   it gives the fill. Absolute placement keeps it out of the flow, which is what
   lets the label above it sit on a line of its own.

   A bar long enough that its figure would run off the column gets data-inside,
   and the figure moves in onto the bar. That is a pixel question, not a
   percentage one — the same 89% bar has room at 50rem and none at 375px — so the
   instrument measures it and sets the attribute. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row {
  position: relative;
}
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-val {
  position: absolute;
  bottom: 0;
  left: calc(var(--w, 0%) + .4rem);
  height: 13px;
  line-height: 13px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  transition: left .28s cubic-bezier(.22, .9, .3, 1);
  /* The figure precedes the track in the DOM, so without this the bar paints
     over it and a figure sitting inside its bar disappears entirely. */
  z-index: 1;
}
/* A bar with no room to its right carries its figure inside instead, in the
   ground colour so it reads against the block. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-inside="true"] .inspect-val {
  left: auto;
  right: .4rem;
  color: var(--surface-2);
}
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-over="true"] .inspect-fill {
  border-radius: 0;
  background: var(--nutr-bar-over);
}
/* No value held is not a zero-length bar. The baseline rule stays, the block
   never appears, and the figure says so in words. */
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-missing="true"] .inspect-track {
  opacity: 1;
  background: repeating-linear-gradient(135deg, var(--rule) 0 3px, transparent 3px 6px);
}
body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-row[data-missing="true"] .inspect-val {
  font-weight: 600;
  font-style: italic;
  color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
  body[data-post="a-diet-can-be-designed"] .inspect[data-kind="nutrition"] .inspect-val { transition: none; }
}

/* "Max sustainability" is the longest control on the page, and two of them side
   by side overflow a phone-width instrument. Setting this picker alone a size
   down keeps the chassis' two-column layout: going to one column instead makes
   the picker five rows tall, and the readout that sticks to the foot of a narrow
   viewport then lands on top of the last two buttons. */
@container (max-width: 30rem) {
  body[data-post="a-diet-can-be-designed"] #dp-picks .pick { font-size: .74rem; }
}