/* Pack 22: Hair Restoration. Tokens only. Breakpoints follow R5: 1279, 1023 and 767 px. */

/* module sub navigation strip under the page head */
.hr-sub { margin-top: calc(-1 * var(--s2)); }

/* milestone track: one step per milestone, status in words and colour */
.hr-track { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0; position: relative; }
.hr-step { display: grid; gap: 4px; justify-items: center; text-align: center; position: relative; padding: 0 4px; min-width: 0; }
.hr-step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--border); z-index: 0; }
.hr-step:first-child::before { display: none; }
.hr-step.done::before, .hr-step.late::before { background: color-mix(in srgb, var(--m-hair) 55%, #fff); }
.hr-step .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-strong); color: var(--muted); position: relative; z-index: 1; }
.hr-step.done .dot { background: var(--m-hair); border-color: var(--m-hair); color: #fff; }
.hr-step.late .dot { background: var(--warn-tint); border-color: var(--warn); color: var(--warn-ink); }
.hr-step.due .dot { border-color: var(--m-hair); color: var(--m-hair-ink); background: color-mix(in srgb, var(--m-hair) 10%, #fff); }
.hr-step.overdue .dot, .hr-step.missed .dot { border-color: var(--bad); color: var(--bad-ink); background: var(--bad-tint); }
.hr-step strong { font-size: 13px; }
.hr-step small { font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 767px) {
  .hr-track { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hr-step { grid-template-columns: 32px 1fr; justify-items: start; text-align: left; column-gap: 10px; row-gap: 0; }
  .hr-step .dot { grid-row: span 3; }
  .hr-step::before { display: none; }
}

/* photo grid: milestone rows by angle columns */
.hr-grid { display: grid; grid-template-columns: 120px repeat(var(--a, 6), minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.hr-grid .hd { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); align-self: end; padding-bottom: 2px; }
.hr-grid .rl { display: grid; gap: 2px; align-content: center; font-size: 13px; }
.hr-grid .rl small { color: var(--muted); font-size: 12px; }
.hr-ph { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); border: 1px dashed var(--border-strong); background: linear-gradient(135deg, var(--surface-sunk), var(--surface-2)); display: grid; place-items: center; text-align: center; padding: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.3; min-width: 0; }
a.hr-ph:hover { border-color: var(--m-hair); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-hair) 14%, #fff); }
.hr-ph .icon { width: 18px; height: 18px; margin: 0 auto 2px; color: var(--muted-2); }
.hr-ph.missing { background: var(--bad-tint); border-color: var(--bad-line); color: var(--bad-ink); }
.hr-ph.empty { background: var(--surface); }
.hr-ph.big { aspect-ratio: 4 / 3; font-size: 13px; }
.hr-ph .tag { position: absolute; left: 6px; top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); }
.hr-ph .pair { position: absolute; right: 6px; top: 6px; }
@media (max-width: 1279px) { .hr-grid { grid-template-columns: 96px repeat(var(--a, 6), minmax(0, 1fr)); gap: 6px; } .hr-ph { font-size: 11px; } }
@media (max-width: 1023px) {
  .hr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-grid .hd { display: none; }
  .hr-grid .rl { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
  .hr-grid .rl:first-of-type { border-top: 0; padding-top: 0; }
  .hr-ph .lbl-a { display: block; }
}
@media (max-width: 767px) { .hr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hr-ph .lbl-a { display: none; font-weight: 600; color: var(--text-2); }

/* side by side comparison */
.hr-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.hr-compare .pane { display: grid; gap: 8px; min-width: 0; }
.hr-compare .cap { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 767px) { .hr-compare { grid-template-columns: minmax(0, 1fr); } }

/* metadata comparison table rows */
.hr-meta { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 12px; font-size: 13px; align-items: center; }
.hr-meta .h { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted-2); }
.hr-meta .k { color: var(--muted); }
@media (max-width: 767px) {
  .hr-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hr-meta .h { display: none; }
  .hr-meta .k { grid-column: 1 / -1; font-weight: 600; color: var(--text-2); margin-top: 6px; }
}

/* plan line items */
.hr-items { display: grid; gap: 0; }
.hr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 13.5px; }
.hr-item:last-child { border-bottom: 0; }
.hr-item .amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hr-item small { display: block; color: var(--muted); font-size: 12px; }
.hr-item.total { font-weight: 700; border-top: 1px solid var(--border); border-bottom: 0; }
@media (max-width: 767px) { .hr-item { grid-template-columns: minmax(0, 1fr) auto; } .hr-item .q { grid-column: 1 / -1; order: 3; font-size: 12px; color: var(--muted); } }

/* compact count rows that each open their records */
.hr-counts { display: grid; gap: 2px; }
.hr-counts a, .hr-counts > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13.5px; }
.hr-counts a:hover { background: var(--surface-2); }
.hr-counts b { font-variant-numeric: tabular-nums; }
.hr-counts .t { display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.hr-counts .total { border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; padding-top: 10px; font-weight: 700; }
@media (max-width: 1023px) { .hr-counts a { min-height: var(--tap); } }

/* attention list */
.hr-att { display: grid; gap: 0; }
.hr-att a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.hr-att a:last-child { border-bottom: 0; }
.hr-att .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.hr-att strong { display: block; font-size: 13.5px; }
.hr-att small { display: block; font-size: 12px; color: var(--muted); }
.hr-att a:hover strong { color: var(--primary-ink); text-decoration: underline; }

/* setup and settings section list */
.hr-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.hr-sec:last-child { border-bottom: 0; }
.hr-sec strong { font-size: 13.5px; }
.hr-sec small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.hr-sec .r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767px) { .hr-sec { grid-template-columns: minmax(0, 1fr); } .hr-sec .r { justify-content: flex-start; } }

/* "clinical use only" banner tag */
.hr-restrict { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--bad-ink); background: var(--bad-tint); border-radius: var(--r-pill); padding: 4px 10px; }
.hr-restrict .icon { width: 14px; height: 14px; }

/* switches: 44 px tap target under 1024 (R5 V06), the track stays visually the same size */
@media (max-width: 1023px) {
  body[data-page^="22-"] .switch { width: 46px; height: 44px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; background-clip: padding-box; border-radius: 22px; }
  body[data-page^="22-"] .switch::after { top: 4px; left: 4px; width: 16px; height: 16px; }
  body[data-page^="22-"] .switch.on::after { left: 26px; }
  body[data-page^="22-"] .hr-sec .r .input { width: 96px; }
}

/* keep short record numbers (T-2001) on one line */
.hr-nw { white-space: nowrap; }

/* grid cells size to the row, not to their own aspect ratio, so a cell with a longer reason never widens its column */
.hr-grid > .hr-ph { aspect-ratio: auto; min-height: 68px; }
/* steps with an extra pill (angle missing) must not push their label up or down */
.hr-step { align-content: start; }
/* the lock icon sits inline with its reason */
.hr-sec small .icon { display: inline-block; vertical-align: -2px; margin-right: 2px; }