/* KNOW WHAT YOU'RE REALLY BUYING (2026-11-08), the map piece (next-supply-map.js): the "By ingredient" table on Suppliers > Supply map,
   the flags in "Needs a look", the ingredient in the side panel (tabs, the options side by side, grams in and out, record why) and
   the compact "Your supply" panel on Today. On the v8 tokens and the parts already there; status is an icon and a word, never a pill;
   no coloured edge bars; dark first, light from the same tokens. Type on the scale the tests hold (12, 13, 14, 15, 19, 28). */

.vsm-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vsm-i.pos, .v8ti.pos { color: var(--v8-pos); } .vsm-i.neg { color: var(--v8-neg); } .vsm-i.warn { color: var(--v8-warn); } .vsm-i.mute { color: var(--v8-t3); }
#view .vsm-w.warn { color: var(--v8-warn); } #view .vsm-w.pos { color: var(--v8-pos); } #view .vsm-w.neg { color: var(--v8-neg); } #view .vsm-w.mute { color: var(--v8-t3); }
#view a.vsm-look, #view a.vsm-trow { text-decoration: none; color: var(--v8-t1); }

/* ---------- the place figures, kept as a quiet second row under the five supply figures ---------- */
#view .v8pb-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 12px; border-radius: var(--v8-r-panel, 16px); box-shadow: 0 0 0 1px var(--v8-hair-2); }
#view .v8pb-place { padding: 12px 24px 13px; min-width: 0; }
#view .v8pb-place span { display: block; font-size: 13px; line-height: 1.3; color: var(--v8-t3); }
#view .v8pb-place b { display: block; margin-top: 4px; font-size: 19px; line-height: 1.2; font-weight: 450; color: var(--v8-t2); font-variant-numeric: tabular-nums; }
#view .v8pb-place small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); overflow-wrap: anywhere; }
@media (max-width: 699px) {
  #view .v8pb-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  #view .v8pb-place { padding: 11px 16px; }
}

/* ---------- By ingredient ---------- */
#view .vsm-byi { margin-top: 28px; }
#view .vsm-grp { font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); margin: 0 0 10px; }
#view .vsm-byi .vsm-tbl { border-radius: var(--v8-r-panel, 16px); background: var(--v8-card); border: 1px solid var(--v8-hair); overflow: hidden; }
#view .vsm-byi .vsm-tbl table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
#view .vsm-byi .vsm-tbl col.c1 { width: 25%; } #view .vsm-byi .vsm-tbl col.c2 { width: 14%; } #view .vsm-byi .vsm-tbl col.c4 { width: 13%; } #view .vsm-byi .vsm-tbl col.c5 { width: 14%; } #view .vsm-byi .vsm-tbl col.c6 { width: 16%; } #view .vsm-byi .vsm-tbl col.c7 { width: 0; }
#view .page .vsm-byi .vsm-tbl th { padding: 12px 16px !important; height: auto !important; text-align: left; font: 400 12px/1 var(--v8-mono) !important; color: var(--v8-t3) !important; border-bottom: 1px solid var(--v8-hair) !important; white-space: nowrap; background: transparent !important; letter-spacing: 0 !important; text-transform: none !important; }
#view .page .vsm-byi .vsm-tbl td { padding: 10px 16px !important; height: 58px !important; font-size: 14px !important; line-height: 20px !important; border-bottom: 1px solid var(--v8-hair-2) !important; color: var(--v8-t2); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
#view .page .vsm-byi .vsm-tbl :is(th, td):first-child { padding-left: 20px !important; }
#view .page .vsm-byi .vsm-tbl :is(th, td):last-child { padding-right: 20px !important; }
#view .page .vsm-byi .vsm-tbl tbody tr:last-child td { border-bottom: 0 !important; }
#view .vsm-byi .vsm-tbl tbody tr { cursor: pointer; }
#view .vsm-byi .vsm-tbl tbody tr:hover td, #view .vsm-byi .vsm-tbl tbody tr:focus-visible td { background: color-mix(in srgb, var(--v8-t1) 4%, transparent); }
#view .vsm-byi .vsm-tbl tbody tr:focus-visible { outline: none; }
#view .vsm-byi .vsm-tbl tr.vp-sel td { background: color-mix(in srgb, var(--v8-t1) 7%, transparent); }
#view .vsm-byi .vsm-tbl td.p a { color: var(--v8-t1); text-decoration: none; }
#view .vsm-byi .vsm-tbl td.p a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .page .vsm-byi .vsm-tbl td small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--v8-mono) !important; color: var(--v8-t3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .vsm-byi .vsm-tbl td.vsm-num { font-variant-numeric: tabular-nums; color: var(--v8-t1); text-align: left; }
#view .page .vsm-byi .vsm-tbl td.mute { color: var(--v8-t3); }
#view .vsm-wv { display: inline-flex; align-items: center; gap: 7px; color: var(--v8-t1); }
#view .vsm-wv .vsm-i { width: 15px; height: 15px; }
#view .vsm-byi .vsm-tbl .vsm-c-ph { display: none; }
#view .vsm-foot { margin: 10px 2px 0; font-size: 12px; color: var(--v8-t3); }

/* a phone: each ingredient on two lines, never a sideways scroll */
@media (max-width: 699px) {
  #view .vsm-byi .vsm-tbl table, #view .vsm-byi .vsm-tbl tbody { display: block; }
  #view .vsm-byi .vsm-tbl colgroup, #view .vsm-byi .vsm-tbl thead { display: none; }
  #view .vsm-byi .vsm-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 16px; border-bottom: 1px solid var(--v8-hair-2); }
  #view .vsm-byi .vsm-tbl tr:last-child { border-bottom: 0; }
  #view .page .vsm-byi .vsm-tbl td, #view .page .vsm-byi .vsm-tbl :is(th, td):first-child, #view .page .vsm-byi .vsm-tbl :is(th, td):last-child { display: block; height: auto !important; padding: 0 !important; border: 0 !important; }
  #view .page .vsm-byi .vsm-tbl td:is(.vsm-c-from, .vsm-c-by, .vsm-c-per, .vsm-c-bk) { display: none; }
  #view .vsm-byi .vsm-tbl .vsm-c-st { text-align: right; }
  #view .vsm-byi .vsm-tbl .vsm-c-ph { display: block; grid-column: 1 / -1; font: 400 12px/1.45 var(--v8-mono); color: var(--v8-t3); white-space: normal; }
  #view .vsm-byi .vsm-tbl .vsm-c-ph span { display: block; overflow-wrap: anywhere; }
}

/* ---------- the ingredient, in the side panel ---------- */
.vsm-tabs { display: inline-flex; gap: 2px; margin: 16px 24px 0; padding: 3px; border-radius: 11px; background: var(--v8-page); box-shadow: 0 0 0 1px var(--v8-hair-2); }
.vsm-tabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--v8-t2); font: 450 13px/1 var(--v8-sans); cursor: pointer; white-space: nowrap; }
.vsm-tabs button:hover { color: var(--v8-t1); }
.vsm-tabs button.on { background: var(--v8-raised); color: var(--v8-t1); box-shadow: 0 0 0 1px var(--v8-hair); }
.vsm-em { font: 400 12px/1 var(--v8-mono); font-style: normal; color: var(--v8-t3); margin-left: 4px; }
.vsm-quiet { margin: 10px 0 0; font-size: 13px; color: var(--v8-t3); }
.vsm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; margin-top: 12px; }
.vsm-opt { display: flex; flex-direction: column; align-items: stretch; text-align: left; min-width: 0; padding: 12px 9px 10px; border-radius: 12px; border: 1px solid var(--v8-hair); background: var(--v8-page); color: var(--v8-t1); font: inherit; cursor: pointer; }
.vsm-opt:hover { border-color: color-mix(in srgb, var(--v8-t1) 22%, transparent); }
.vsm-opt.on { border-color: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-t1) 34%, transparent); background: var(--v8-raised); }
.vsm-opt b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsm-mk { display: block; margin-top: 4px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsm-mk.vsm-mk2 { margin-top: 1px; }
.vsm-pr { display: block; margin-top: 13px; font-size: 28px; line-height: 1; font-weight: 450; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vsm-pr small { font-size: 12px; color: var(--v8-t3); font-weight: 400; margin-left: 3px; letter-spacing: 0; }
.vsm-pr .vsm-noprice { display: inline-block; font-size: 14px; letter-spacing: 0; color: var(--v8-t3); line-height: 28px; }
.vsm-kv { margin-top: 11px; display: grid; gap: 6px; font-size: 12px; color: var(--v8-t2); }
.vsm-kv span { display: flex; align-items: flex-start; gap: 5px; line-height: 1.35; }
.vsm-kv span .vsm-i { margin-top: 1px; }
.vsm-kv .vsm-i { width: 12px; height: 12px; }
.vsm-say { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--v8-hair-2); font-size: 12px; color: var(--v8-t3); }
.vsm-say.warn { color: var(--v8-warn); }
.vp-row .vsm-mini { grid-column: 2; justify-self: start; margin-top: 8px; height: 26px; padding: 0 10px; border-radius: 7px; border: 0; background: var(--v8-raised); color: var(--v8-t1); box-shadow: 0 0 0 1px var(--v8-hair); font: 450 12px/1 var(--v8-sans); cursor: pointer; }
.vp-rt .vsm-mini { display: inline-flex; align-items: center; }
.vsm-mini:hover { background: color-mix(in srgb, var(--v8-t1) 8%, var(--v8-raised)); }
.vsm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vsm-tile { min-height: 46px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--v8-hair); background: var(--v8-page); color: var(--v8-t2); font: 450 13px/1.3 var(--v8-sans); cursor: pointer; }
.vsm-tile.on { border-color: var(--v8-t1); color: var(--v8-t1); background: var(--v8-raised); }
.vsm-fl { display: block; font-size: 13px; color: var(--v8-t2); margin: 16px 0 8px; }
.vsm-fl em { font-style: normal; color: var(--v8-t3); margin-left: 6px; }
.vsm-area { display: block; width: 100%; min-height: 84px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--v8-hair); background: var(--v8-page); color: var(--v8-t1); font: 400 13px/1.5 var(--v8-sans); resize: vertical; box-sizing: border-box; }
.vsm-area:focus { outline: none; border-color: color-mix(in srgb, var(--v8-t1) 40%, transparent); }

/* the dialogs a person writes in */
.vsm-dlg .vsm-for { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.vsm-dlg .vsm-help { margin: 14px 0 0; font-size: 13px; }

.vsm-dlg .vsm-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--v8-t2); }

/* ---------- Today: Your supply, and the word on a Needs you line ---------- */
#view a.vsm-dec { color: var(--v8-warn); text-decoration: none; white-space: nowrap; }
#view a.vsm-dec:hover { text-decoration: underline; text-underline-offset: 3px; }
#view .vsm-today .vsm-lnk { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--v8-t1); text-decoration: none; }
#view .vsm-today .vsm-lnk .vsm-i { width: 14px; height: 14px; color: var(--v8-t2); }
#view .vsm-today .vsm-lnk:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }

@media (max-width: 699px) {
  .vsm-opts { grid-template-columns: 1fr; }
  .vsm-tabs { margin-left: 16px; margin-right: 16px; max-width: calc(100% - 32px); overflow-x: auto; }
}