/* Status marks: a coloured glyph (icon, or a dot drawn by ::before) + a letter-spaced capital word (Source Sans 3 subset has no smcp). No tinted pills.
   Fill only for "Teraz" (.chip.filled) and the stamp. Amounts inside a mark keep normal caps (.chip .amt).
   Also: count badge, pending dot, plan word, lock badge, meta pills. */
@layer components {
  .chip {
    --tone: var(--ink-3);
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none; white-space: nowrap;
    font-size: var(--fs-mark); font-weight: 600; line-height: 1; letter-spacing: var(--ls-mark); text-transform: uppercase; color: var(--ink-2);
  }
  .chip .ico { width: 13px; height: 13px; color: var(--tone); }
  .chip .amt, .chip .num, .chip .t { text-transform: none; letter-spacing: 0; font-size: var(--fs-caption); }
  .chip > .dot, .chip > .pending-dot, .chip > .live-dot { color: var(--tone); }
  .chip-good { --tone: var(--good-ink); }
  .chip-warn { --tone: var(--warn); }
  .chip-danger { --tone: var(--danger); color: var(--danger); }
  .chip-info { --tone: var(--info); }
  .chip-muted { --tone: var(--ink-3); }
  .chip-accent { --tone: var(--accent); color: var(--accent); }
  /* a glyph is mandatory: when the mark has no icon, draw the dot */
  .chip:not(:has(.ico, .dot, .pending-dot, .live-dot))::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; }
  .chip.filled { color: var(--paper); background: var(--ink); padding: 4px 8px; border-radius: var(--r-xs); }
  .chip.filled.chip-good { background: var(--good); color: #fff; }
  :root[data-theme="dark"] .chip.filled.chip-good, :root[data-theme="oled"] .chip.filled.chip-good { color: #0d1a12; }

  /* quiet mark for list rows: done = tick + word, planned = nothing (statusMark() in js/ui/components.js) */
  .st-mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-mark); font-weight: 600; line-height: 1; letter-spacing: var(--ls-mark); text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
  .st-mark.good .ico { color: var(--good-ink); }
  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
  .dot.warn { color: var(--warn); }
  .pending-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--paper); flex: none; display: inline-block; }
  .chip .pending-dot { box-shadow: none; width: 8px; height: 8px; }

  /* counters */
  .count-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--ink); color: var(--paper); font: 600 12px/1 var(--font-num); font-style: normal; font-variant-numeric: tabular-nums;
  }
  .count-badge.warn { background: var(--warn); color: #fff; }
  :root[data-theme="dark"] .count-badge.warn, :root[data-theme="oled"] .count-badge.warn { color: #1a1300; }

  /* plan word and lock badge (planPill(), lockBadge() in js/ui/paywall.js) */
  .plan-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-text); font-weight: 600; font-size: 13.5px; color: var(--accent); white-space: nowrap; letter-spacing: .01em; vertical-align: middle; }
  .plan-pill.plan-free { color: var(--ink-2); }
  .lock-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; font-size: var(--fs-mark); font-weight: 600; letter-spacing: var(--ls-mark); text-transform: uppercase; color: var(--ink-2); }
  .lock-badge .ico { color: var(--ink-3); }

  /* meta pills (lesson facts): icon + fact in a soft rounded block */
  .meta-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .meta-pills > span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--rule); font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; }
  .meta-pills > span > .ico { color: var(--ink-3); }
}