/* ===========================================================================
   Supplements — components (SUPPLEMENTS-HANDOFF section 2)
   ===========================================================================

   Every class here is td- prefixed and lives inside .td-scope, because the
   spec's tokens join the scoped set rather than forming a second one. The
   existing td- components (Card, Progress bar, Primary button, Segmented
   control, Chip, Info panel, Sheet) are reused as-is and not redefined.

   Values are transcribed from reference/01-supplements-home.html and the
   spec's section 2 tables. Where the two could disagree the reference wins,
   per the spec's own rule.
   =========================================================================== */

/* --- Data tag ------------------------------------------------------------
   Marks content computed from the user's own logs, so personal and general
   content are never mistaken for each other. Always reads "From your logs". */
.td-datatag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--td-accent-tint);
  color: var(--td-accent);
  font-family: var(--td-font-ui);
  font-size: 11px;
  font-weight: 600;
}

/* Eyebrow row that carries a right-aligned tag or text button. */
.td-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* --- General panel -------------------------------------------------------
   The spec is strict about this: every piece of general (non-personal)
   content on these screens sits in one of these. */
.td-general {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--td-general-bg);
  color: var(--td-general-text);
  font-size: 13px;
  line-height: 1.45;
}
.td-general__label { font-weight: 600; }

/* --- Evidence pill -------------------------------------------------------
   Six variants, and the level is always chosen by the reviewed content file,
   never by a model at runtime. */
.td-epill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--td-font-ui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.td-epill--start_here,
.td-epill--strong           { background: var(--td-pill-green-bg); color: var(--td-pill-green-text); }
.td-epill--some,
.td-epill--check_first      { background: var(--td-pill-blue-bg);  color: var(--td-pill-blue-text); }
.td-epill--weak             { background: var(--td-warn-bg);       color: var(--td-warn-pill-text); }
.td-epill--not_well_studied { background: var(--td-track);         color: var(--td-general-text); }

/* --- Nutrient bar row ----------------------------------------------------
   8px tall, not the 10px of the Today card's progress bar. */
.td-nbar { display: flex; flex-direction: column; gap: 6px; }
.td-nbar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}
.td-nbar__label { font-weight: 600; }
.td-nbar__track {
  height: 8px;
  border-radius: 999px;
  background: var(--td-track);
  overflow: hidden;
}
.td-nbar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--td-accent);
}
/* Below 75% of target the fill changes colour rather than the row shouting. */
.td-nbar__fill--low { background: var(--td-low); }

/* --- Numbered section eyebrow -------------------------------------------- */
.td-eyebrow__num { margin-right: 2px; }

/* --- Goal tile ----------------------------------------------------------- */
.td-goalgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.td-goaltile {
  min-height: 64px;
  padding: 0 14px;
  border: 1px solid var(--td-border);
  border-radius: 14px;
  background: var(--td-surface);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--td-ink);
  text-align: left;
  cursor: pointer;
}
.td-goaltile svg { flex: 0 0 auto; color: var(--td-accent); }
.td-goaltile[aria-pressed="true"] {
  border: 2px solid var(--td-accent);
  background: var(--td-accent-tint);
}
.td-goaltile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-goaltile__watching { font-size: 12px; font-weight: 600; color: var(--td-accent); }

/* --- Option card ---------------------------------------------------------- */
.td-optcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--td-surface);
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-card);
}
/* Food always leads "What to try", and the heavier border is how it reads
   as the first option rather than just the top one. */
.td-optcard--first { border: 2px solid var(--td-accent); }
.td-optcard__head {
  display: flex;
  /* 8px and centre, from the reference. The card's own column gap is 10px
     (spec section 2); this inner row is the reference's 8px, and centring is
     what keeps the pill beside a name that wraps to two lines. */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.td-optcard__name { font-size: 15px; font-weight: 600; }
.td-optcard__desc { margin: 0; font-size: 14px; line-height: 1.5; }
.td-optcard__source { font-size: 12px; color: var(--td-muted); }

/* "Why this rating", on a verdict card. Left-aligned under the attribution
   rather than beside it: the card is read top to bottom and this is the last
   thing on it, not a control competing with the pill. */
.td-optcard__why {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
}
/* A caution the content file attaches to an ingredient, inside its card. */
.td-optcard__caution {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--td-bg);
  font-size: 13px;
  line-height: 1.45;
}

/* --- Duplicate panel ------------------------------------------------------ */
.td-dup {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--td-warn-bg);
}
.td-dup svg { flex-shrink: 0; margin-top: 1px; color: var(--td-warn-icon); }
.td-dup p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--td-warn-text);
}

/* --- Next-step panel ------------------------------------------------------ */
.td-nextstep {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--td-r-card);
  background: var(--td-ink);
}
.td-nextstep__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--td-on-ink-muted);
}
.td-nextstep__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--td-bg);
}
.td-nextstep__btn {
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--td-bg);
  color: var(--td-ink);
  font-family: var(--td-font-ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ===========================================================================
   Supplements home (section 3)
   =========================================================================== */

.td-supp {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 20px;
  background: var(--td-bg);
}
@media (min-width: 640px) {
  .td-supp { max-width: 640px; margin: 0 auto; }
}

/* Back link, matching the weekly-review detail's treatment: plain accent
   text, no chrome, underline on hover. The page's 22px block gap already
   separates it from the title, so it carries no margin of its own. */
.td-backlink {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--td-accent);
  text-decoration: none;
  cursor: pointer;
}
.td-backlink:hover { text-decoration: underline; }

.td-supp__head { display: flex; flex-direction: column; gap: 6px; }
.td-supp__title {
  margin: 0;
  font-family: var(--td-font-display);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--td-ink);
}
.td-supp__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--td-muted);
}

.td-supp__section { display: flex; flex-direction: column; gap: 10px; }

/* A text button sized to the 44px tap target without adding height to the
   eyebrow line it sits on. */
.td-textbtn {
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--td-accent);
  cursor: pointer;
}

/* The list of products. Rows are dividers-between, none after the last. */
.td-supplist { overflow: hidden; }
.td-supprow {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--td-divider);
}
.td-supprow:last-child { border-bottom: 0; }
.td-supprow__name { font-size: 15px; font-weight: 600; }
.td-supprow__meta { font-size: 13px; color: var(--td-muted); }

/* Pharmacist summary: a label/value line, read at arm's length. */
.td-sumrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--td-divider);
  font-size: 14px;
}
.td-sumrow:last-child { border-bottom: 0; }
.td-sumrow__label { font-weight: 600; }
.td-sumrow__value { color: var(--td-muted); text-align: right; }

/* A list row that opens its edit sheet. Same box as the static row, reset
   from button defaults so the two are indistinguishable until touched. */
.td-supprow--tappable {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  font-family: var(--td-font-ui);
  color: var(--td-ink);
  text-align: left;
  cursor: pointer;
}
.td-supprow--tappable:hover { background: var(--td-accent-tint); }

/* Amount row inside the edit sheet: label, number field, unit. */
.td-editrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--td-divider);
}
.td-editrow:last-child { border-bottom: 0; }
.td-editrow__label { flex: 1 1 auto; font-size: 14px; font-weight: 600; min-width: 0; }
.td-editrow__amount { flex: 0 0 104px; height: 44px; }
.td-editrow__unit { flex: 0 0 auto; font-size: 13px; color: var(--td-muted); min-width: 34px; }

/* Empty state, in place of the list. */
.td-suppempty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.td-suppempty__title { font-size: 15px; font-weight: 600; }
.td-suppempty__body { margin: 0; font-size: 14px; line-height: 1.45; color: var(--td-muted); }

/* Secondary 52px button (the scan entry point, hidden for now). */
.td-btn--secondary {
  height: 52px;
  border: 1px solid var(--td-border);
  border-radius: 14px;
  background: var(--td-surface);
  color: var(--td-ink);
  font-family: var(--td-font-ui);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.td-supp [hidden] { display: none !important; }

/* ===========================================================================
   Check a supplement — components (CHECK-SUPPLEMENT-HANDOFF section 2)

   Values transcribed from reference/01-check-capture.html and
   reference/02-result-verified.html. Everything the spec says to reuse is
   reused untouched: the camera tile, source buttons, Card, evidence pills,
   General panel, data tag, nutrient bar row and warn panel are all the
   existing components.
   =========================================================================== */

/* This screen's camera tile and source buttons differ from the meal-logging
   ones by 2px of gap and a font weight. Scoped here rather than changed on
   the shared classes, so the meal screen is not altered to match a reference
   that isn't its own. */
.td-check-capture .td-camera-tile { gap: 10px; }
.td-check-capture .td-source-btn { font-weight: 600; }
.td-check-capture .td-source-btn svg { width: 16px; height: 16px; }

/* --- Provenance chip -------------------------------------------------------
   Says how we know what this product contains: an exact Canadian licence
   match, a brand-corroborated US record, or nothing but the photograph. */
.td-provchip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--td-font-ui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.td-provchip--verified { background: var(--td-verified-bg); color: var(--td-verified-text); }
.td-provchip--label    { background: var(--td-track);       color: var(--td-general-text); }

/* --- Ingredient list row --------------------------------------------------- */
.td-inglist { overflow: hidden; }
.td-ingrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--td-divider);
}
.td-ingrow:last-child { border-bottom: 0; }
.td-ingrow__name   { font-size: 15px; font-weight: 600; }
.td-ingrow__amount { font-size: 15px; color: var(--td-muted); }
.td-ingbasis       { font-size: 12px; color: var(--td-muted); }

/* --- Headline card ---------------------------------------------------------
   Template-assembled from the flags below it, never free text. */
.td-headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--td-surface);
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-card);
}
.td-headline .td-datatag { align-self: flex-start; }
.td-headline__text { margin: 0; font-size: 15px; line-height: 1.5; }

/* --- Status pill ----------------------------------------------------------- */
.td-statuspill {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--td-font-ui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.td-statuspill--ok     { background: var(--td-verified-bg);  color: var(--td-verified-text); }
.td-statuspill--taking { background: var(--td-pill-blue-bg); color: var(--td-pill-blue-text); }
.td-statuspill--over   { background: var(--td-warn-bg);      color: var(--td-warn-pill-text); }

/* --- Projection row -------------------------------------------------------- */
/* The rule separates one nutrient from the next, so it sits on the item rather
   than on the row: a nutrient and its upper-limit sentence are one thing. */
.td-projitem { border-bottom: 1px solid var(--td-divider); }
.td-projitem:last-child { border-bottom: 0; }
.td-projrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
}
/* The approved upper-limit sentence. Quiet and secondary: the numbers above it
   are this patient's, and this explains the ceiling they are measured against. */
.td-projrow--haslimit { padding-bottom: 6px; }
.td-projrow__limit {
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-muted);
}
.td-projrow__text  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-projrow__name  { font-size: 15px; font-weight: 600; }
.td-projrow__delta { font-size: 13px; color: var(--td-muted); }

/* --- Not-yet-reviewed panel ------------------------------------------------
   Stands in for an evidence card when the content file has no entry. It says
   only that we have not reviewed the ingredient -- never an assessment. */
.td-notreviewed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--td-general-bg);
}
.td-notreviewed__title { font-size: 14px; font-weight: 600; color: var(--td-general-text); }
.td-notreviewed__body  { margin: 0; font-size: 13px; line-height: 1.45; color: var(--td-general-text); }

/* --- Coverage bar row: the existing nutrient bar plus a source breakdown --- */
.td-nbar__breakdown { font-size: 12px; color: var(--td-muted); }

/* --- Result screen shell --------------------------------------------------- */
.td-check { gap: 22px; min-height: 100vh; }
.td-check__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.td-check__heading { display: flex; flex-direction: column; gap: 8px; }
.td-check__brandrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-check__brand { font-size: 14px; color: var(--td-muted); }
.td-check__actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.td-check__savenote { font-size: 13px; color: var(--td-muted); text-align: center; }

/* "How much should I take" sits between the evidence sentence and the caution:
   it is guidance rather than a warning, so it takes the page's own surface
   rather than the caution's tint. */
.td-optcard__intake {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--td-ink);
  background: var(--td-bg);
  border-radius: 10px;
  padding: 9px 11px;
}
.td-optcard__intake b { font-weight: 600; }

/* =============================================================================
   V2 section 2: the scan card.
   =============================================================================
   The 2px accent border and tint fill are the reference's, and they are doing
   the work of the reorder: this is the only bordered-accent element on the
   page, so it reads as the primary action without a banner or a badge. */
.td-scancard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  border: 2px solid var(--td-accent);
  background: var(--td-tint);
  border-radius: 16px;
}
.td-scancard__copy { display: flex; flex-direction: column; gap: 4px; }
.td-scancard__title {
  font-family: var(--td-font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--td-ink);
}
.td-scancard__line {
  font-size: 14px;
  line-height: 1.45;
  color: var(--td-ink);
}
/* .td-btn CARRIES NO HEIGHT ON PURPOSE: every button gets it from a modifier
   (--today is 56px, --sheet is 54px), which is the house pattern. The first
   draft of this rule duplicated flex, centring, gap and width, all of which
   .td-btn already has; stripping those was right, but the height went with them
   and the scan button rendered 22px tall on browser defaults. Height is the one
   declaration this modifier needs to exist for. 54px matches the sheet button,
   which is the nearest primary of the same weight. */
.td-btn--scan { height: 54px; }

/* The one line under "Not sure what you need?", above the tile grid. */
.td-supp__tilelead {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--td-muted);
}

/* =============================================================================
   Hard caution (spec section 7).
   =============================================================================
   An ingredient whose answer is a warning rather than a rating. It carries no
   evidence pill, and the caution sits ABOVE the description so a reader who
   stops after one line has read the warning. The treatment is louder than
   .td-optcard__caution because that one annotates a rating, while this one
   replaces it. */
.td-optcard--hardcaution {
  border: 1.5px solid var(--td-warn);
}
.td-hardcaution {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border-radius: 12px;
  /* The existing warn tokens, not a new colour. --td-low-tint was invented in
     the first draft and does not exist; it fell through to a hard-coded hex,
     which would have survived a theme change while nothing around it did. */
  background: var(--td-warn-bg);
}
.td-hardcaution__title {
  font-family: var(--td-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--td-warn-icon);
}
.td-hardcaution__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--td-ink);
}

/* The per-purpose ratings on a hard-caution card. Deliberately quiet: they sit
   below the warning panel, separated by a rule, so the card still reads as a
   caution that happens to carry ratings rather than as a rating card with a
   note attached. Tokens only, no new colours. */
.td-hardcaution__levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--td-divider);
}
.td-hardcaution__level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--td-font-ui);
  font-size: 13px;
  color: var(--td-muted);
}

/* Condition rows under an evidence card. Indented and ruled off, so the card
   still reads as one ingredient with a summary rating that then breaks down,
   rather than as several cards crammed together. */
.td-condrows {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--td-divider);
}
.td-condrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.td-condrow:first-child { margin-top: 0; }
.td-condrow__label {
  font-family: var(--td-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--td-ink);
}
.td-condrow__line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-muted);
  margin-top: 3px;
}
/* A caution belonging to one condition, in the same tint the card-level one
   uses so a warning reads as a warning wherever it sits. */
.td-condrow__caution {
  margin: 6px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--td-warn-bg);
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-ink);
}
.td-condrow__limit {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--td-muted);
}

/* The "Sold for N things" count beside the "Is it worth taking" eyebrow. */
.td-eyebrow__count {
  font-size: 13px;
  color: var(--td-muted);
}

/* =============================================================================
   V2 step 5: "Good product, wrong problem."
   =============================================================================
   The --low border is the reference's, and it is the only place on this screen
   that colour carries an argument rather than a status. */
.td-wrongprob {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border: 2px solid var(--td-warn);
  border-radius: 16px;
  background: var(--td-surface);
}
.td-wrongprob__title {
  font-family: var(--td-font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--td-ink);
}
.td-wrongprob__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--td-ink);
}
/* Their own figures, in the accent, because this is the half of the argument
   that comes from their data rather than from the content file. */
.td-wrongprob__figures {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--td-accent);
}

/* The food-first card in "What would move this" carries the accent border the
   reference gives it: this is the thing being recommended. */
.td-optcard--startshere {
  border: 2px solid var(--td-accent);
}

/* =============================================================================
   V2 section 3: per-item actions on a tile, and "Why this rating".
   ============================================================================= */
.td-itemactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.td-scanpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--td-ink);
  border-radius: 999px;
  background: var(--td-surface);
  color: var(--td-ink);
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.td-why { display: flex; flex-direction: column; gap: 18px; }
.td-why__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.td-why__name { font-family: var(--td-font-ui); font-size: 17px; font-weight: 600; color: var(--td-ink); }
.td-why__block { display: flex; flex-direction: column; gap: 6px; }
.td-why__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--td-ink); }

/* =============================================================================
   V2 section 5: the decision, and what was decided last time.
   ============================================================================= */
.td-decide {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  border: 2px solid var(--td-accent);
  background: var(--td-tint);
  border-radius: 16px;
}
.td-decide__q {
  font-family: var(--td-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--td-ink);
}
.td-decide__row { display: flex; gap: 10px; }
.td-decide__btn { flex: 1; height: 48px; font-size: 15px; }

/* The prior decision, at the top of a re-scan. Muted on purpose: it is context
   for the answer below, not the answer. */
.td-prior {
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--td-bg);
}
.td-prior__text { font-size: 13px; line-height: 1.45; color: var(--td-muted); }

/* Not-yet-reviewed, one ingredient per row with its purpose line. */
.td-notreviewed__list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 10px; }
.td-notreviewed__row  { display: flex; flex-direction: column; gap: 2px; }
.td-notreviewed__name { font-size: 14px; font-weight: 600; color: var(--td-ink); }
.td-notreviewed__amt  { font-weight: 400; color: var(--td-muted); }
.td-notreviewed__note { font-size: 13px; line-height: 1.45; color: var(--td-muted); }