/* Pack 18: Sexual Wellness module. Tokens only. Breakpoints follow R5: 1279, 1023 and 767 px. */

/* privacy strip shown under every module page head */
.sw-priv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: calc(-1 * var(--s2)) 0 var(--s4);
  border: 1px solid color-mix(in srgb, var(--m-sexual-wellness) 22%, var(--border)); border-radius: var(--r);
  background: color-mix(in srgb, var(--m-sexual-wellness) 5%, var(--surface)); font-size: 12.5px; color: var(--text-2); }
.sw-priv .icon { width: 16px; height: 16px; color: var(--m-sexual-wellness-ink); flex-shrink: 0; }
.sw-priv strong { color: var(--m-sexual-wellness-ink); }
.sw-priv .grow { flex: 1 1 260px; min-width: 0; }
@media (max-width: 767px) { .sw-priv { align-items: flex-start; } .sw-priv .btn { width: 100%; justify-content: center; } }

/* module tabs strip */
.sw-tabs { margin-bottom: var(--s4); }

/* masked patient label in lists */
.sw-pt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sw-pt .sw-ini { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--grey-tint); color: var(--grey-ink); flex-shrink: 0; }
.sw-pt strong { font-size: 13.5px; font-weight: 600; color: var(--text); display: block; }
.sw-pt small { display: block; font-size: 12px; color: var(--muted); }
a.sw-pt:hover strong { color: var(--primary-ink); text-decoration: underline; }

/* score chips and recorded change */
.sw-score { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.sw-score small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.sw-chg { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--grey-tint); color: var(--grey-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-note { font-size: 12px; color: var(--muted); }
.sw-note .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* R4 two lenses block */
.sw-lens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.sw-lens > a, .sw-lens > div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.sw-lens > a:hover { border-color: var(--primary); }
.sw-lens b { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--text); }
.sw-lens span { font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 1023px) { .sw-lens { grid-template-columns: minmax(0, 1fr); } }

/* small stat rows (label left, number right) */
.sw-rows { display: grid; gap: 0; }
.sw-rows > a, .sw-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); min-height: 38px; }
.sw-rows > :last-child { border-bottom: 0; }
.sw-rows b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; text-align: right; min-width: 0; }
.sw-rows > a > span, .sw-rows > div > span { min-width: 0; }
.sw-rows > a:hover span { color: var(--primary-ink); text-decoration: underline; }
@media (max-width: 1023px) { .sw-rows > a { min-height: var(--tap); } }

/* today list */
.sw-day { display: grid; gap: 0; }
.sw-day > a { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.sw-day > a:last-child { border-bottom: 0; }
.sw-day .tm { font-size: 12.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sw-day .what { min-width: 0; font-size: 13px; }
.sw-day .what small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 767px) { .sw-day > a { grid-template-columns: 62px minmax(0, 1fr); } .sw-day > a .pill { grid-column: 2; justify-self: start; } }

/* journey steps on the consultation and program records */
.sw-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sw-journey > span { display: grid; gap: 2px; padding: 10px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--muted); min-width: 0; }
.sw-journey > span b { font-size: 12.5px; color: var(--text); }
.sw-journey > span.done { background: var(--ok-tint); border-color: transparent; }
.sw-journey > span.done b { color: var(--ok-ink); }
.sw-journey > span.on { border-color: var(--m-sexual-wellness); box-shadow: inset 0 0 0 1px var(--m-sexual-wellness); }
@media (max-width: 1023px) { .sw-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sw-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-journey > span:last-child { grid-column: 1 / -1; } }

/* session progress dots */
.sw-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-dots i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); display: inline-grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--surface); }
.sw-dots i.done { background: var(--m-sexual-wellness); border-color: var(--m-sexual-wellness); color: #fff; }
.sw-dots i.rev { border-style: dashed; }
.sw-dots i.rev.done { background: var(--m-sexual-wellness-ink); border-style: solid; }

/* questionnaire items in the editor and in the record dialog */
.sw-q { display: grid; gap: 10px; }
.sw-qi { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; background: var(--surface); min-width: 0; }
.sw-qi .qh { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sw-qi .qh strong { font-size: 13.5px; }
.sw-qi .qn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--grey-tint); color: var(--grey-ink); font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.sw-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-opts span { font-size: 12px; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); }
.sw-opts span.on { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; }
@media (max-width: 1023px) { .sw-opts span { min-height: 36px; display: inline-flex; align-items: center; } }

/* score total box in dialogs */
.sw-total { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border); }
.sw-total b { font-size: 22px; font-variant-numeric: tabular-nums; }

/* distribution of recorded change (outcomes) */
.sw-dist { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; padding-top: 6px; }
.sw-dist a, .sw-dist > div { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; height: 100%; text-align: center; min-width: 0; }
.sw-dist .col { align-self: end; background: color-mix(in srgb, var(--m-sexual-wellness) 70%, #fff); border-radius: 4px 4px 0 0; min-height: 2px; }
.sw-dist .n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sw-dist .lab { font-size: 11px; color: var(--muted); line-height: 1.2; }

/* who can see (care team) */
.sw-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sw-team > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); min-width: 0; flex-wrap: wrap; }
@media (max-width: 1023px) { .sw-team { grid-template-columns: minmax(0, 1fr); } }

/* setup step list */
.sw-steps { display: grid; gap: 4px; }
.sw-steps a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); font-size: 13px; color: var(--text-2); min-height: 40px; }
.sw-steps a.on { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.sw-steps a b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; border: 1px solid var(--border-strong); background: var(--surface); flex-shrink: 0; }
.sw-steps a.done b { background: var(--ok); border-color: var(--ok); color: #fff; }
.sw-steps a.done b .icon { width: 12px; height: 12px; }
@media (max-width: 1023px) { .sw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-steps a { min-height: var(--tap); } }
@media (max-width: 767px) { .sw-steps { grid-template-columns: minmax(0, 1fr); } }

/* settings rows */
.sw-set { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sw-set:last-child { border-bottom: 0; }
.sw-set .grow { min-width: 0; }
.sw-set strong { font-size: 13.5px; }
.sw-set p { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.sw-set .ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 767px) { .sw-set { flex-wrap: wrap; } .sw-set .ctl { width: 100%; justify-content: flex-start; } }

/* preview of what people without access see */
.sw-mask { display: grid; gap: 6px; padding: 12px; border-radius: var(--r); border: 1px dashed var(--border-strong); background: var(--surface-2); font-size: 13px; }
.sw-mask .row { gap: 8px; }

/* threshold value */
.sw-few { color: var(--muted); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.card-b .sw-note { margin-top: 10px; }

/* card header links are tap targets on touch widths (pack 18 pages only) */
@media (max-width: 1023px) {
  body[data-page^="18-"] .card-h > a.link, body[data-page^="18-"] .card-f a.link { min-height: var(--tap); display: inline-flex; align-items: center; }
}

/* setup layout: steps | form | progress. Under 1280 progress moves above the form. */
.sw-setup { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: var(--s4); align-items: start; }
.sw-setup > * { min-width: 0; }
@media (max-width: 1279px) {
  .sw-setup { grid-template-columns: minmax(0, 1fr); }
  .sw-setup .sw-s-prog { order: 2; } .sw-setup .sw-s-form { order: 3; } .sw-setup .sw-s-steps { order: 1; }
}
.sw-illus { font-size: 11.5px; color: var(--muted-2); margin: calc(-1 * var(--s2)) 0 var(--s3); }

/* pack 18 pages: side columns don't stretch their cards; fields keep their natural height */
body[data-page^="18-"] .grid > .stack { align-content: start; }
body[data-page^="18-"] .form-grid .field { align-content: start; }

body[data-page^="18-"] .card-b > .who + .kv { margin-top: 12px; }