/* Pack 20: Weight Management module. Tokens only.
   Breakpoints follow R5: 1279, 1023 and 767 px. */

/* period and filter bar under the tabs */
.w20-period { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: calc(-1 * var(--s2)) 0 var(--s4); }
.w20-period .filter { height: 34px; }
.w20-asof { font-size: 12px; color: var(--muted); margin-left: auto; }
@media (max-width: 767px) {
  .w20-period { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--s4)); padding-right: var(--s4); }
  .w20-period .filter { height: 40px; flex-shrink: 0; }
  .w20-asof { display: none; }
}

/* notes, deltas */
.w20-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.w20-note .icon { flex-shrink: 0; margin-top: 2px; }
.w20-d { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.w20-d.up { color: var(--ok-ink); }
.w20-d.down { color: var(--bad-ink); }

/* compact figures */
.w20-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.w20-stat { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
a.w20-stat:hover { border-color: var(--primary-tint-2); background: var(--primary-tint); }
.w20-stat .lbl { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.w20-stat b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.25; }
.w20-stat small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 1023px) { a.w20-stat { min-height: var(--tap); } }

/* patient link with a second line */
.w20-pl { display: grid; gap: 1px; min-width: 0; }
.w20-pl strong { font-size: 13.5px; color: var(--text); font-weight: 600; }
.w20-pl small { font-size: 12px; color: var(--muted); }
a.w20-pl:hover strong { color: var(--primary-ink); text-decoration: underline; }

/* monthly visits left: one dot per included visit */
.w20-cms { display: grid; gap: 3px; }
.w20-cm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.w20-cm .dots { display: inline-flex; gap: 3px; }
.w20-cm .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--m-weight); background: var(--surface); display: block; }
.w20-cm .dots i.on { background: var(--m-weight); }
.w20-cm .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* billing month strip on the program page */
.w20-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.w20-month { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 4px; background: var(--surface); min-width: 0; }
.w20-month.open { border-color: var(--m-weight); box-shadow: inset 0 3px 0 var(--m-weight); }
.w20-month.closed { background: var(--surface-2); }
.w20-month .k { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.w20-month b { font-size: 13.5px; color: var(--text); }
.w20-month small { font-size: 12px; color: var(--muted); }

/* ledger table cells */
.w20-ledger td.r, .w20-ledger th.r { font-variant-numeric: tabular-nums; }
.w20-neg { color: var(--bad-ink); }
.w20-pos { color: var(--ok-ink); }

/* retention cohort grid (scrolls inside its own area, first column pinned: R5 V02) */
.w20-coh-wrap { overflow-x: auto; }
.w20-coh { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; min-width: 640px; }
.w20-coh th { font-size: 11px; color: var(--muted-2); font-weight: 600; text-align: center; padding: 4px; white-space: nowrap; }
.w20-coh th.lab, .w20-coh td.lab { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-right: 10px; white-space: nowrap; }
.w20-coh td { text-align: center; border-radius: 6px; padding: 0; min-width: 52px; height: 40px; }
.w20-coh td a { display: grid; place-items: center; height: 40px; border-radius: 6px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.w20-coh td a:hover { outline: 2px solid var(--primary-tint-2); }
.w20-coh td.na { color: var(--muted-2); background: var(--surface-2); }
.w20-coh td.h5 a { background: color-mix(in srgb, var(--m-weight) 62%, var(--surface)); }
.w20-coh td.h4 a { background: color-mix(in srgb, var(--m-weight) 44%, var(--surface)); }
.w20-coh td.h3 a { background: color-mix(in srgb, var(--m-weight) 30%, var(--surface)); }
.w20-coh td.h2 a { background: color-mix(in srgb, var(--m-weight) 18%, var(--surface)); }
.w20-coh td.h1 a { background: color-mix(in srgb, var(--m-weight) 8%, var(--surface)); }

/* progress graph */
.w20-prog text { font-size: 11px; fill: var(--muted); }
.w20-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.w20-legend span { display: inline-flex; gap: 6px; align-items: center; }
.w20-legend i { width: 18px; height: 0; border-top: 2.2px solid var(--m-weight); display: inline-block; }
.w20-legend i.goal { border-top: 2px dashed var(--ok); }

/* "recorded, not a claim" banner */
.w20-recorded { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; }
.w20-recorded .icon { color: var(--muted); margin-top: 2px; flex-shrink: 0; }

/* money split bar */
.w20-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-sunk); gap: 2px; }
.w20-split i { display: block; height: 100%; background: var(--c); min-width: 3px; }
.w20-rows { display: grid; }
.w20-rows > a, .w20-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.w20-rows > a:hover { background: var(--surface-2); }
.w20-rows .amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.w20-rows .tot { border-bottom: 0; border-top: 2px solid var(--border-strong); font-weight: 700; }
.w20-sq { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; margin-right: 8px; }
@media (max-width: 1023px) { .w20-rows > a { min-height: var(--tap); } }

/* worklist rows on the dashboard */
.w20-wl { display: grid; }
.w20-wl > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.w20-wl > a:last-child { border-bottom: 0; }
.w20-wl .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); }
.w20-wl strong { display: block; font-size: 13.5px; color: var(--text); }
.w20-wl small { display: block; font-size: 12px; color: var(--muted); }
.w20-wl .n { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
a.w20-wl-i:hover strong { color: var(--primary-ink); }

/* settings rows (same shape as pack 06 feature rows) */
.w20-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 230px) 64px; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.w20-feat:last-child { border-bottom: 0; }
.w20-feat .nm { display: grid; gap: 2px; min-width: 0; }
.w20-feat .nm strong { font-size: 13.5px; }
.w20-feat .nm span { font-size: 12.5px; color: var(--muted); }
.w20-feat .key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted-2); }
.w20-feat .dep { font-size: 12px; color: var(--text-2); display: grid; gap: 3px; }
.w20-feat .sw { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.w20-feat.locked { background: var(--surface-2); }
.w20-feat .lockwhy { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); display: flex; gap: 6px; align-items: flex-start; margin-top: -4px; }
@media (max-width: 767px) {
  .w20-feat { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; gap: 8px 12px; }
  .w20-feat .dep { grid-column: 1 / -1; order: 3; }
  .w20-feat .sw { grid-row: 1; grid-column: 2; }
}
@media (max-width: 1023px) { .w20-feat .switch { width: 52px; height: 30px; border-radius: 15px; } }

/* setup layout */
.w20-setup { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s4); align-items: start; }
@media (max-width: 1279px) { .w20-setup { grid-template-columns: minmax(0, 1fr); } .w20-setup > aside { order: -1; } }
.w20-meter { height: 8px; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; }
.w20-meter i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
@media (max-width: 767px) { .w20-stickyfoot { position: sticky; bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); background: var(--surface); padding: 10px 0; border-top: 1px solid var(--line); z-index: 5; } .w20-stickyfoot .btn { width: 100%; } }

/* key-value pairs that keep labels readable */
.w20-kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; margin: 0; }
.w20-kv dt { color: var(--muted); }
.w20-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { .w20-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .w20-kv dd { margin-bottom: 8px; } }

/* 20-06 section switcher: scrolls sideways inside its own strip on narrow screens */
.w20-segs { max-width: 100%; min-width: 0; overflow-x: auto; }
/* Fields in a two-column form keep their natural height when a neighbour has a hint (same fix as pack 19) */
body[data-page^="20-"] .form-grid > .field > .select, body[data-page^="20-"] .form-grid > .field > .input { align-self: start; }