/**
 * @file check-line.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The words beside a check box or a radio dot: the size and colour of the page's own
 *   text, so a choice reads as easily as the sentence around it. The box and the dot are the
 *   browser's, as they are everywhere. Jouni's decision "Check line" (2026-09-26): the look the
 *   Settings tabs drew at the body's size (Packages' app list, Companies, the account dialog).
 *   Drawn as markup: <label class="check-line"><input type="checkbox" /> Words</label>. The label
 *   keeps its own layout (a row, a gap); this part sets only the words.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.4.0 — 2026-09-27 — .check--strong: a choice that decides what a form does (the old app
 *     catalogue's .mz-check), appcat parity (sections-d); additive.
 *   v1.3.0 — 2026-09-27 — .check--ruled: a choice of a list with a rule under it (the old app
 *     catalogue's .protect-row), appcat parity; additive.
 *   v1.2.0 — 2026-09-27 — .check--pill, a framed choice among several on the sun while ticked (the app
 *     catalogue's capability packs); additive, appcat dialogs builder 2.
 *   v1.1.0 — 2026-09-26 — The Check (components/Check.js) and its line's layout (.check, --inline, --hint,
 *     --off), the values most Settings check lines draw (component plan C5).
 *   v1.0.0 — 2026-09-26 — Initial, with the values of the body-size check lines (Archivo 16px 400, ink).
 */

.check-line { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--text); }

/* The Check (components/Check.js) lays its line out itself, with the layout most Settings check
   lines draw (sch-check, pj-share-row, pf-dr-check, cp-check, kp-check, wp-check, flex-row: a row,
   the box level with the words, .5rem between, the whole line pressable). `inline`: several side by
   side in a line of words (ai-radio, sk-check, pj-mm-check, pf-agd-crew-check--inline). With a hint,
   the box stands level with the first line and the hint is a grey line under the words
   (pf-eco-recipe-radio). */
.check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.check--inline { display: inline-flex; margin-right: 1rem; }
.check--hint { align-items: flex-start; }
.check--hint input { margin-top: .3rem; }
.check-words .poster-hint { display: block; margin: 0; }
.check--off { cursor: default; opacity: .6; }

/* `pill` (added by appcat dialogs builder 2): one framed choice among several side by side, on the sun
   while ticked (the old catalogue's capability packs, .pb-pack-item: a 2px ink frame, bold words). */
.check--pill {
  display: inline-flex; gap: .4rem; padding: .3rem .65rem;
  border: var(--shape-frame) solid var(--shape-rule-colour); border-radius: var(--shape-corner-pill);
  background: var(--bg); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold);
  user-select: none;
}
.check--pill:hover { background: var(--surface); }
.check--pill:has(input:checked) { background: var(--shape-chosen-ground); color: var(--on-sun); }
.check--pill input { margin: 0; accent-color: var(--text); }

/* `ruled` (appcat parity): one choice of a list, 12px above and under it and a thin rule under it, the
   words .92rem at 1.5 in the grey with their bold name in ink, the 18px box in ink at the first line's
   top (the old catalogue's .protect-row; its --text-dim is the site's --text-muted). */
.check.check--ruled {
  align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);
  font-size: .92rem; font-weight: var(--font-poster-text-weight); line-height: 1.5; color: var(--text-muted);
}
.check--ruled input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--text); }
.check--ruled strong { color: var(--text); }

/* `strong` (appcat parity, sections-d): a choice that decides what a form does, 14px under what is
   above it, 10px between the 18px ink box and the bold words (the old catalogue's .mz-check). */
.check.check--strong { gap: 10px; margin-top: 14px; font-size: .95rem; font-weight: 800; line-height: normal; }
.check--strong input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); }