/* KOACH-BUILD-STAMP: S333-B3-COMPONENTS */ /* S333-B3: piece 9, the open dropdown list (C652, My Account tab switcher). Prior S332-B9: Today tag neutral outline. Prior S332-B3. */
/*
 * koach-components.css -- THE SHARED PIECES every light page is built from (S332, owner 2026-10-22).
 * Every value comes from koach-tokens.css; change the look there, not here. Markup for these pieces is produced by
 * the helpers in koach-ui.php so every page writes them the same way.
 * Rules (claude/koach-design-quality-checklist-v2.md):
 *   R1 a white page of full-width sections, separated ONLY by the grey band; rows divided by visible lines; no cards.
 *   R2 every control has a 3:1 edge; a selection = red edge + tint.
 *   R3 red = action only; status = word + icon chip.
 *   N1/N2 information that belongs to a title sits on its line; nothing wraps into an orphan; rows truncate first.
 *   N5 desktop mirrors phone: same pieces, wider rows, the 960 column.
 * Opt-in: every selector starts at body.koach-light. ASCII only. Lowercase koach.
 */

/* ---- 1. SECTION: full width, the grey band above it, the section padding inside ---- */
body.koach-light .kl-sec {
  border-top: var(--kl-band-h) solid var(--kl-band);
  border-image: linear-gradient(var(--kl-band), var(--kl-band)) 1 / var(--kl-band-h) 0 0 0 / 0 100vw;  /* full width */
  padding: var(--kl-sec-pad) var(--kl-side);
  background: var(--kl-page);
}
body.koach-light .kl-sec--flush { padding-top: 0; padding-bottom: 0; }          /* a section that is only rows */
body.koach-light .kl-sec--last { border-bottom: var(--kl-band-h) solid var(--kl-band); }
body.koach-light .kl-col { max-width: var(--kl-col); margin-left: auto; margin-right: auto; }
@media (min-width: 821px) { body.koach-light .kl-sec { padding-left: 0; padding-right: 0; } }

/* ---- 2. SECTION HEADING ROW: title + its meta on ONE line (N1) ---- */
body.koach-light .kl-sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 var(--kl-sp-head) 0;
}
body.koach-light .kl-sec-h__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
body.koach-light .kl-sec-h__title h2, body.koach-light .kl-sec-h h2 { margin: 0; font-size: var(--kl-fs-h2); font-weight: 700; line-height: 1.25; color: var(--kl-ink); }
body.koach-light .kl-sec-h__meta { font-size: var(--kl-fs-small); color: var(--kl-ink2); white-space: nowrap; }

/* ---- 3. LIST: rows divided by visible lines; one line per row (N2) ---- */
body.koach-light .kl-list { border-top: 1px solid var(--kl-line-row); margin: 0; padding: 0; list-style: none; }
body.koach-light .kl-li {
  display: flex; align-items: center; gap: 12px; min-height: var(--kl-h-row);
  border-bottom: 1px solid var(--kl-line-row); font-size: var(--kl-fs-body); color: var(--kl-ink);
  text-decoration: none;
}
body.koach-light .kl-sec--flush .kl-list { border-top: 0; }
body.koach-light .kl-sec--flush .kl-li:last-child { border-bottom: 0; }
body.koach-light a.kl-li:hover { background: var(--kl-open); }
body.koach-light .kl-li__lead { flex: 0 0 auto; min-width: 52px; font-weight: 700; color: var(--kl-ink2); }
body.koach-light .kl-li__main { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.koach-light .kl-li__main--strong { font-weight: 700; }
body.koach-light .kl-li__end { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
body.koach-light .kl-li--quiet { color: var(--kl-quiet); }
body.koach-light .kl-li--today { background: var(--kl-soft); margin: 0 -12px; padding: 0 12px; font-weight: 700; }
body.koach-light .kl-li--lg { min-height: var(--kl-h-row-lg); }
body.koach-light .kl-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--kl-ink2); }

/* ---- 4. STATUS CHIP: word + icon, never red (R3) ---- */
body.koach-light .kl-status {
  display: inline-flex; align-items: center; gap: 6px; height: var(--kl-h-chip); padding: 0 10px;
  border-radius: var(--kl-r-chip); font-size: var(--kl-fs-chip); font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--kl-st-neutral-bg); color: var(--kl-st-neutral-tx);
}
body.koach-light .kl-status svg { width: 14px; height: 14px; flex: 0 0 auto; }
body.koach-light .kl-status--block { background: var(--kl-st-block-bg); color: var(--kl-st-block-tx); }
body.koach-light .kl-status--attn  { background: var(--kl-st-attn-bg);  color: var(--kl-st-attn-tx); }
body.koach-light .kl-status--ok    { background: var(--kl-st-ok-bg);    color: var(--kl-st-ok-tx); }
body.koach-light .kl-status--info  { background: var(--kl-st-info-bg);  color: var(--kl-st-info-tx); }
body.koach-light .kl-status--plain { background: transparent; padding: 0; height: auto; }   /* "Done" inline in a row */
body.koach-light .kl-status--plain.kl-status--ok { color: var(--kl-ok); }
body.koach-light .kl-tag-today { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--kl-r-chip); background: var(--kl-ctrl-bg); color: var(--kl-ink); border: 1px solid var(--kl-line-ctrl); font-size: 12px; font-weight: 700; white-space: nowrap; } /* S332 walk-5: neutral outline -- dark is reserved for "blocks training" (R3) */
body.koach-light .kl-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--kl-r-chip); background: var(--kl-badge-bg); color: var(--kl-badge-tx); font-size: 12px; font-weight: 700; }

/* ---- 5. CONTROLS: 3:1 edge (R2); selection = red edge + tint ---- */
body.koach-light .kl-ctrl-edge { background: var(--kl-ctrl-bg); border: var(--kl-w-ctrl) solid var(--kl-line-ctrl); box-sizing: border-box; }
body.koach-light .kl-ctrl-edge.is-selected, body.koach-light .kl-ctrl-edge[aria-checked="true"], body.koach-light .kl-ctrl-edge[aria-pressed="true"] { background: var(--kl-sel-bg); border: 2px solid var(--kl-red); color: var(--kl-red-press); font-weight: 700; }

/* ---- 6. INSET NOTE (koach's note, "the Join button appears ..."): soft tint, no box edge ---- */
body.koach-light .kl-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--kl-r-field); background: var(--kl-soft); font-size: var(--kl-fs-small); color: var(--kl-ink2); }
body.koach-light .kl-note b, body.koach-light .kl-note__who { font-size: 13px; font-weight: 700; color: var(--kl-ink2); }

/* ---- 7. STAT ROW: numbers split by vertical lines, no boxes ---- */
body.koach-light .kl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
body.koach-light .kl-stat { display: flex; align-items: center; gap: 14px; padding: 4px 24px; border-left: 1px solid var(--kl-line-row); color: var(--kl-ink); text-decoration: none; }
body.koach-light .kl-stat:first-child { border-left: 0; padding-left: 0; }
body.koach-light .kl-stat__icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
body.koach-light .kl-stat__num { display: block; font-size: 28px; font-weight: 700; line-height: 1; }
body.koach-light .kl-stat__label { display: block; margin-top: 4px; font-size: var(--kl-fs-small); color: var(--kl-ink2); }
@media (max-width: 820px) {
  body.koach-light .kl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  body.koach-light .kl-stat { padding: 4px 12px; }
  body.koach-light .kl-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---- 8. INITIALS (person rows): light circle, first initial red, second ink (avatar standard, light canvas) ---- */
body.koach-light .kl-initials { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--kl-soft); border: 1px solid var(--kl-line-row); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
body.koach-light .kl-initials span:first-child { color: var(--kl-red); }

/* ---- 9. OPEN DROPDOWN LIST (a tab switcher's menu, S333-B3, C652): the same light list as Nutrition's -- white,
   the 3:1 control edge, the floating shadow; items grey, the current one ink with its red dot; 44px rows ---- */
body.koach-light .kac-tab-dd-list {
  background: var(--kl-page); border: var(--kl-w-ctrl) solid var(--kl-line-ctrl); border-radius: var(--kl-r-field);
  box-shadow: var(--kl-sh-float); padding: 4px;
}
body.koach-light .kac-tab-dd-item { min-height: var(--kl-h-tap); color: var(--kl-ink2); font-size: var(--kl-fs-body); border-radius: 8px; }
body.koach-light .kac-tab-dd-item + .kac-tab-dd-item { border-top: 1px solid var(--kl-line-row); border-radius: 0; }
body.koach-light .kac-tab-dd-item:hover { background: var(--kl-open); }
body.koach-light .kac-tab-dd-item.on { background: transparent; color: var(--kl-ink); font-weight: 700; }
body.koach-light .kac-tab-dd-item.on::before { background: var(--kl-red); }