/* The food questionnaire's styles, in ONE file because it is drawn in two
 * apps — the registry's patient app and Dr Upma's — from one module. Two copies
 * of a stylesheet drift exactly as two copies of a food table do, and the day
 * they do the same questionnaire looks like two different things to the same
 * person.
 *
 * It leans on four variables both pages already define: --line, --card,
 * --muted and --green-2. Everything else is stated here, because the two
 * palettes are not the same and a colour borrowed from one would be wrong in
 * the other.
 *
 * 44px touch targets throughout — a thumb on a phone, not a mouse.
 */
/* --- the food questionnaire --- */
.dii-result{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 1rem}
.dii-read{flex:1;min-width:9rem}
.dii-score{font-size:2rem;font-weight:800;line-height:1}
.dii-band{font-weight:700;margin-top:.15rem}
.dii-count{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.dii-ref{font-size:.72rem;color:var(--muted);margin-top:.35rem;line-height:1.35}
.dii-due{font-size:.8rem;font-weight:600;color:var(--green);margin-top:.4rem;line-height:1.35}
.dii-due:empty{display:none}
/* A CATEGORY HEADING THAT SAYS HOW FAR THROUGH IT YOU ARE.
   Ten categories and thirty-four foods: without this the only progress on
   screen is one number at the top, and "how much more of this is there" is the
   question that decides whether somebody finishes. The count is on the heading
   and the whole heading goes green when that category is done — a small,
   frequent, honest reward, and a way to see at a glance which block was
   skipped. Not sticky: the gauge above already is, and two things stuck to the
   top of a phone leave very little list. */
.dii-h{font-weight:700;margin:1rem 0 .35rem;font-size:.9rem;
  display:flex;align-items:baseline;gap:.5rem}
.dii-h .dii-hn{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.dii-cat.done > .dii-h{color:#14532d}
.dii-cat.done > .dii-h .dii-hn{color:#2E9B73}
.dii-cat.done > .dii-h .dii-hn::after{content:'';display:inline-block;width:.32rem;height:.6rem;
  margin-left:.4rem;vertical-align:.02rem;border:solid #2E9B73;border-width:0 2px 2px 0;
  transform:rotate(40deg)}
/* THE TICK IS DRAWN, SO IT IS TURNED — and a rotated box still occupies its
   own un-rotated width in the layout, which on a flex heading already pushed to
   the right edge by margin-left:auto was three pixels of sideways drag on the
   whole category. Taken out of the flow: it is a mark beside a number, not a
   thing the row has to make room for. */
.dii-cat.done > .dii-h .dii-hn{position:relative;padding-right:.85rem}
.dii-cat.done > .dii-h .dii-hn::after{position:absolute;right:.15rem;top:.15rem;margin-left:0}
/* A row of the questionnaire. The rule down its left edge and the drawn tick
   say "this one is done" — thirty-four of these go past under one thumb and
   otherwise the only record of what has been answered is the patient's memory.
   Neither is the sole signal: the frequency they picked is a filled chip. */
/* No negative margin. It pulled the row out of its container to sit the rule
   flush with the edge, which made every row 0.55rem WIDER than what holds it —
   invisible while the chips were ragged pills that never reached the right
   edge, and 3px of sideways drag the moment they became a full-width grid.
   The rule is inset instead, which looks the same and cannot overflow. */
.dii-food{padding:.5rem 0 .5rem .5rem;border-top:1px solid var(--line);
  border-left:3px solid transparent;transition:border-color .2s}
.dii-food[data-answered="true"]{border-left-color:#2E9B73}
.dii-food[data-answered="true"] .dii-name b::after{content:'';display:inline-block;
  width:.36rem;height:.68rem;margin-left:.45rem;vertical-align:.02rem;
  border:solid #2E9B73;border-width:0 2px 2px 0;transform:rotate(40deg)}
.dii-name b{font-size:.95rem}
.dii-sub{display:block;font-size:.75rem;color:var(--muted)}
/* SIX ANSWERS, LAID OUT AS SIX EQUAL BOXES rather than six ragged pills.
   This is the control a patient touches thirty-four times, and wrapped pills of
   different widths put the same answer in a different place on every row — so
   the eye has to re-read all six each time instead of learning where "Daily"
   lives. A grid of equal columns is the same six answers in the same six places
   on every row, and it CANNOT overflow sideways, because the columns are
   fractions of what is there. Three across on a phone, six in a row once
   there is width for it. */
.dii-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-top:.45rem}
@media (min-width:560px){ .dii-chips{grid-template-columns:repeat(6,minmax(0,1fr))} }
/* 44px targets — a thumb on a phone, not a mouse. */
.dii-chip,.dii-flag{font:inherit;font-size:.78rem;min-height:44px;padding:.4rem .3rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  line-height:1.2;text-align:center;transition:background .12s,border-color .12s}
.dii-flag{border-radius:999px;padding:.5rem .8rem}
.dii-chip[aria-pressed="true"],.dii-flag[aria-pressed="true"]{background:#14532d;color:#fff;
  border-color:#14532d;font-weight:700;box-shadow:0 0 0 3px rgba(20,83,45,.14)}
.dii-flag{margin:0 .3rem .3rem 0}
/* The block itself, which is a card rather than a fold — the dial stays up. */
.diicard{border:1px solid var(--line);border-radius:14px;background:var(--card);
  margin-bottom:.7rem;padding:1rem 1.1rem}
/* THE GAUGE THAT STAYS WITH YOU.
 *
 * His words, 12 Aug 2026: "when we are entering the food, the dark [dial]
 * totally disappears from the field. Can we do something on it so that when we
 * are filling each and every column, we have a visual idea of how it's
 * behaving."
 *
 * `sticky`, not `fixed`: it flows in the document, so it takes its own space
 * and nothing underneath has to be padded out from behind it. It sticks only
 * for as long as the card it lives in is on screen, which is exactly the length
 * of the food list — past the end of the questionnaire it scrolls away by
 * itself. It is 44px-ish tall and covers nothing that has to be read.
 *
 * It carries the number, the band AND how far through the list you are: under
 * the 25-parameter floor there is no number to show, and "12 of 34 answered"
 * with a bar filling is the only honest thing to put in its place. */
/* HIS SECOND REPORT ON IT, 13 Aug: "the dial when we are filling comes very
   fade." It did. The strip was var(--card) on a card that is also var(--card),
   with a 1px var(--line) border — #d8e5da, a colour chosen to be almost
   invisible — and a soft shadow. White on white with a whisper of a rule round
   it: pinned to the top of a scrolling white list it read as nothing at all.
   A gauge you have to look for is a gauge that is not doing its job, which is
   the same fault as the one it was built to fix, in a milder form.
   Solid now: its own tint, a real border in the brand green, a shadow with
   something in it, and a needle and a number heavy enough to read while a thumb
   is moving. The palette is the questionnaire's own, so it still looks like the
   same instrument as the big dial rather than a warning. */
/* WHERE IT STICKS TO depends on what is already stuck there.
 *
 * His report, 13 Aug 2026, from the registry: "when we open it in the main app,
 * again the dial disappears — it should stay on the screen while you're filling
 * the form." It did stay on the patient's app and it did not here, and the
 * reason is the chrome, not the strip: the REGISTRY has a sticky green header
 * at top:0, so a strip also stuck at top:0 slides straight underneath it and is
 * gone. The patient app has no such header, which is exactly why this was
 * invisible until it was opened somewhere else.
 *
 * So the offset is a variable each page sets rather than a number written into
 * a stylesheet three apps share. Nought by default — the patient app and the
 * diet app have nothing above it — and the registry sets it from the header's
 * MEASURED height, so a bar that grows a line still has the strip below it. */
.dii-mini{position:sticky;top:var(--dii-stick,0px);z-index:4;display:flex;align-items:center;gap:.6rem;
  padding:.4rem .6rem;border:2px solid #2E9B73;border-radius:12px;background:#EAF4EE;
  box-shadow:0 4px 14px rgba(20,83,45,.18)}
.dii-mini[hidden]{display:none}
.dii-mini-dial{width:66px;height:38px;flex:none}
.dii-mini-read{display:flex;align-items:baseline;gap:.4rem;min-width:0}
.dii-mini-read b{font-size:1.25rem;font-weight:800;line-height:1;color:#14532d;
  font-variant-numeric:tabular-nums}
.dii-mini-read span{font-size:.78rem;font-weight:700;color:#2c4a38;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dii-mini-prog{margin-left:auto;flex:none;text-align:right}
.dii-mini-prog span{display:block;font-size:.7rem;font-weight:600;color:#3c5a48}
.dii-mini-prog i{display:block;width:66px;height:6px;margin-top:.28rem;border-radius:999px;
  background:#CBE3D5;overflow:hidden}
.dii-mini-prog u{display:block;height:100%;width:0;border-radius:999px;background:#14532d;
  text-decoration:none;transition:width .3s}
/* A drawn mark, never an emoji: an emoji is a different picture on every phone
   and a screen reader says its name out loud in the middle of the heading. */
.dii-ico{width:18px;height:18px;flex:none;color:var(--green-2)}
/* "My food" — the menu that opens, underneath the dial. */
.dii-foods{border:1px solid var(--line);border-radius:12px;margin-top:.8rem;overflow:hidden}
.dii-foods > summary{list-style:none;cursor:pointer;padding:.85rem .9rem;font-weight:600;
  display:flex;align-items:center;gap:.55rem;min-height:44px}
.dii-foods > summary::-webkit-details-marker{display:none}
.dii-foods > summary::after{content:'›';margin-left:auto;color:var(--green-2);
  transform:rotate(90deg);transition:transform .2s}
.dii-foods[open] > summary::after{transform:rotate(-90deg)}
.dii-sum{font-weight:400;font-size:.78rem;color:var(--muted)}
.dii-foods-body{padding:0 .9rem .9rem}
/* The button that asks for the advice. It exists only after the answers have
   gone up, and pressing it closes the food list and brings the dial into view. */
.dii-ask{font:inherit;font-weight:700;min-height:44px;padding:.6rem 1.1rem;margin:.6rem 0 .1rem;
  border:1px solid #14532d;border-radius:10px;background:#fff;color:#14532d;cursor:pointer;width:100%}
.dii-tip{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;font:inherit;
  font-size:.9rem;cursor:pointer;min-height:44px;padding:.55rem .7rem;border-radius:10px;
  background:#F1F6F2;border:1px solid transparent;margin:.3rem 0}
.dii-tip b{flex:1}
.dii-delta{font-variant-numeric:tabular-nums;font-weight:700;color:#2E9B73;font-size:.82rem}
/* Tier 1 is on outcome evidence, not on what it does to the index — so it is
   labelled rather than numbered. */
.dii-first{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#14532d;background:#DCEBE1;border-radius:999px;padding:.2rem .5rem;white-space:nowrap}
.dii-tip[aria-pressed="true"]{border-color:#2E9B73;background:#E6F3EC}
/* The rest of them, behind a fold rather than gone. */
.dii-more{margin:.3rem 0}
.dii-more > summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;
  font-size:.85rem;color:var(--green-2);font-weight:600}
.dii-more > summary::-webkit-details-marker{display:none}
.dii-more > summary::after{content:' ⌄';margin-left:.3rem}
.dii-more[open] > summary::after{content:' ⌃'}
.dii-proj{font-size:.9rem;font-weight:700;color:#2E9B73;min-height:1.2em;margin-top:.2rem}
.dii-save{font:inherit;font-weight:700;min-height:44px;padding:.6rem 1.1rem;margin-top:.9rem;
  border:none;border-radius:10px;background:#14532d;color:#fff;cursor:pointer}
.dii-note{font-size:.82rem;color:var(--muted);margin-top:.4rem}
/* EVERYTHING THAT TAKES A TAP SHOWS WHERE THE KEYBOARD IS. The browser's own
   ring is removed by neither of these two apps, but a rounded chip on a white
   card gives it almost nothing to draw against, so it is stated. */
.dii-chip:focus-visible,.dii-flag:focus-visible,.dii-tip:focus-visible,
.dii-save:focus-visible,.dii-ask:focus-visible,
.dii-foods > summary:focus-visible,.dii-more > summary:focus-visible{
  outline:3px solid #2E9B73;outline-offset:2px}
/* A needle that swings is telling the patient their diet moved the number. A
   patient who has asked their phone for less movement is told the same thing
   without the swing — the number, the band and the angle are all still there. */
@media (prefers-reduced-motion:reduce){
  #dii-needle,#dii-preview,#dii-mini-needle,.dii-mini-prog u,.dii-food,
  .dii-foods > summary::after{transition:none !important}
}

/* Where they have come from, under where they are.
   His ask, 14 Aug 2026: "later on you should be able to pull maybe a graph from
   this, that your food habits are improving." The dial gives today's number and
   says nothing about direction — which is the whole point of asking again at
   fifteen days, a month, six months and a year. Drawn only when there are two
   readings to join; one dot is not a trend. */
.dii-trend{margin-top:.7rem;padding:.6rem .7rem;border:1px solid #D7E3DC;border-radius:12px;background:#F7FBF8}
.dii-trend-h{font-weight:700;font-size:.9rem;color:#14532d;margin-bottom:.2rem}
.dii-trend-svg{display:block;width:100%;height:auto}
.dii-trend-say{font-size:.85rem;color:#3C4A55;margin-top:.15rem}
.dii-trend-say b{color:#14532d}

/* The name of the thing. Only the patient's app asks for it — her console and
   the registry already sit inside a titled card, and printing it twice is
   worse than not printing it. His report, 14 Aug 2026, on the block arriving at
   the top of the first screen: "should be labelled, otherwise it has no meaning
   what it is." */
.dii-title{font-size:1.15rem;font-weight:700;color:#14532d;margin:0 0 .15rem}
.dii-title-sub{font-size:.86rem;line-height:1.45;color:#5B6B7A;margin:0 0 .7rem}