/* ════════════════════════════════════════════════════════════════════════════
   settings-topics.css — Settings → Notifications & Privacy: "Email & Privacy"
   (the stop levels) and "What we contact you about" (email topics as a grouped
   checklist). Member portal only (index.html; the Events portal has no Settings).

   Design: Gate A round 5, S14 (approved by Paul 2026-10-12), built on round 4's
   S12v4 stop levels (approved; server LIVE 2026-10-06). Ported from the preview's
   preview-member*.css (.mp-* / .mp4-* / .mp5-*) as one `.stp-*` family; the
   markup is settings.js (_tpEmailCard / _tpTopicsCard).

   WHY HERE, NOT oecta-components.css. The canonical shared base is admin's
   oecta-components.css, and the member copy must equal what admin has PUSHED
   (sync-design-base-from-admin.sh --check, verify-design-base-sync.mjs). The
   console design system already has a checkbox and an accordion (admin's
   .con-check / .con-details), but the member portal does not load the console
   layer, and these parts are member-only today — the same pattern as
   support-design.css, expenses-design.css and salary-grid-member.css. Promote
   them into .oecta-* the first time a second surface needs them.

     §1  the locked line above the groups, and the "Saved" status line
     §2  the group disclosure (header button, count, dots, panel)
     §3  a topic line: a real checkbox, or a read-only "Always sent" line
     §4  All on / All off / Undo
     §5  search (shown above 12 topics)
     §6  the Email & Privacy card: the Stop switch, the stopped notes, the
         Fully unsubscribed row, and the typed FULL UNSUBSCRIBE screen
     §7  the live dark-mode input reset (style2.css), beaten on purpose
     §8  round 6 (Paul, 2026-10-14): the rule + worked example, and the two
         sections — "Kinds of email" (flat, always open) then "Subjects"
   Tokens only, no 1px sectioning lines (tonal surface shifts), dark mode
   through body.dark-mode's token remap.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── §1 the locked line, and the status line ──────────────────────────────── */
.stp-always {
  display: flex; align-items: center; gap: var(--oecta-space-sm);
  margin: 0 0 var(--oecta-space-sm); padding: var(--oecta-space-sm) var(--oecta-space-md);
  border-radius: var(--oecta-radius-md); background: color-mix(in srgb, var(--oecta-primary-container) 9%, transparent);
  font-size: var(--oecta-text-md); line-height: 1.45; color: var(--oecta-on-surface);
}
.stp-always .material-icons-outlined { flex: none; font-size: 20px; color: var(--oecta-primary-text); }
.stp-saved {
  display: flex; align-items: flex-start; gap: var(--oecta-space-sm);
  margin: 0 0 var(--oecta-space-lg); padding-inline: var(--oecta-space-md);
  font-size: var(--oecta-text-base); line-height: 1.45; color: var(--oecta-on-surface-variant);
}
.stp-saved .material-icons-outlined { flex: none; font-size: 18px; color: var(--oecta-on-surface-variant); }
.stp-saved.is-saved { color: var(--oecta-on-surface); font-weight: 600; }
.stp-saved.is-saved .material-icons-outlined { color: var(--oecta-success-text); }
.stp-saved.is-error { color: var(--oecta-on-surface); font-weight: 600; }
.stp-saved.is-error .material-icons-outlined { color: var(--oecta-error-text); }
.stp-loading { margin: 0; padding: var(--oecta-space-md); font-size: var(--oecta-text-base); color: var(--oecta-on-surface-variant); }

/* ── §2 groups: one tonal block each, a disclosure header ─────────────────── */
.stp-groups { display: grid; gap: var(--oecta-space-sm); }
.stp-group { border-radius: var(--oecta-radius-lg); background: var(--oecta-surface-low); }
.stp-group.is-open { background: var(--oecta-surface-container); }
.stp-group__h { margin: 0; font: inherit; }
.stp-group__btn {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--oecta-space-sm); row-gap: 2px;
  inline-size: 100%; min-block-size: 56px; box-sizing: border-box; margin: 0;
  padding: var(--oecta-space-sm) var(--oecta-space-lg); border: 0; border-radius: var(--oecta-radius-lg);
  background: transparent; color: var(--oecta-on-surface); text-align: start; cursor: pointer;
  font-family: var(--oecta-font-body);
}
.stp-group__btn:hover { background: color-mix(in srgb, var(--oecta-primary-container) 6%, transparent); }
.stp-group__btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
.stp-group__name { font: 700 var(--oecta-text-lg)/1.25 var(--oecta-font-display); color: var(--oecta-on-surface); }
.stp-group__sep { color: var(--oecta-on-surface-variant); }
.stp-group__count { font-size: var(--oecta-text-md); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--oecta-on-surface-variant); }
.stp-group__btn > .material-icons-outlined {
  margin-inline-start: auto; font-size: 24px; color: var(--oecta-on-surface-variant);
  transition: transform var(--oecta-duration-base) var(--oecta-ease);
}
.stp-group__btn[aria-expanded="true"] > .material-icons-outlined { transform: rotate(180deg); }
/* Dots: decoration only (the words carry the count). A filled navy dot is on. */
.stp-pips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-inline-start: var(--oecta-space-sm); }
.stp-pip {
  inline-size: 8px; block-size: 8px; box-sizing: border-box; border-radius: var(--oecta-radius-round);
  border: 2px solid var(--oecta-on-surface-variant);
}
.stp-pip.is-on { border-color: var(--oecta-primary-container); background: var(--oecta-primary-container); }
.stp-group__panel { padding: 0 var(--oecta-space-sm) var(--oecta-space-sm); }

/* ── §3 a topic line ──────────────────────────────────────────────────────── */
.stp-topic {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--oecta-space-md); align-items: start;
  min-block-size: 44px; box-sizing: border-box; padding: var(--oecta-space-sm);
  border-radius: var(--oecta-radius-md); cursor: pointer;
}
label.stp-topic:hover { background: color-mix(in srgb, var(--oecta-primary-container) 6%, transparent); }
.stp-topic__text { display: grid; gap: 2px; min-inline-size: 0; }
.stp-topic__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oecta-space-xs) var(--oecta-space-sm); }
.stp-topic__name { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--oecta-on-surface); overflow-wrap: anywhere; }
.stp-topic__desc { font-size: var(--oecta-text-base); line-height: 1.4; color: var(--oecta-on-surface-variant); overflow-wrap: anywhere; }
/* The checkbox: native (keyboard, label, form semantics), drawn with tokens. */
.stp-check {
  appearance: none; -webkit-appearance: none; display: grid; place-content: center;
  inline-size: 22px; block-size: 22px; margin: 1px 0 0; padding: 0; box-sizing: border-box;
  border: 2px solid var(--oecta-on-surface-variant); border-radius: var(--oecta-radius-xs);
  background: var(--oecta-surface-lowest); cursor: pointer;
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
.stp-check::after {
  content: ""; inline-size: 6px; block-size: 11px; margin-block-start: -2px;
  border: solid var(--oecta-on-primary-container); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
}
.stp-check:checked { border-color: var(--oecta-primary-container); background: var(--oecta-primary-container); }
.stp-check:checked::after { transform: rotate(45deg) scale(1); }
.stp-check:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
/* Locked: no checkbox, a lock in its place, "Always sent" and the reason. */
.stp-topic--locked { cursor: default; }
.stp-topic__lock { display: grid; place-content: center; inline-size: 22px; block-size: 22px; }
.stp-topic__lock .material-icons-outlined { font-size: 18px; color: var(--oecta-primary-text); }
.stp-lockchip {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--oecta-radius-pill);
  background: color-mix(in srgb, var(--oecta-primary-container) 12%, transparent);
  font-size: var(--oecta-text-xs); font-weight: 600; color: var(--oecta-on-surface);
}
.stp-mark { border-radius: 2px; background: color-mix(in srgb, var(--oecta-accent) 35%, transparent); color: var(--oecta-on-surface); }

/* ── §4 All on / All off / Undo ───────────────────────────────────────────── */
.stp-bulk { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--oecta-space-xs); padding-block-end: var(--oecta-space-xs); }
.stp-textbtn {
  display: inline-flex; align-items: center; gap: var(--oecta-space-xs);
  min-block-size: 44px; min-inline-size: 44px; padding-inline: var(--oecta-space-md); margin: 0;
  border: 0; border-radius: var(--oecta-radius-pill); background: transparent;
  font: 600 var(--oecta-text-md)/1.2 var(--oecta-font-body); color: var(--oecta-primary-text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.stp-textbtn .material-icons-outlined { font-size: 18px; }
.stp-textbtn:hover { background: color-mix(in srgb, var(--oecta-primary-container) 8%, transparent); }
.stp-textbtn:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
/* aria-disabled (still focusable, says why when pressed): inactive, so exempt from AA. */
.stp-textbtn[aria-disabled="true"] { opacity: 0.55; text-decoration: none; cursor: default; }
.stp-undo { text-decoration: none; background: color-mix(in srgb, var(--oecta-primary-container) 10%, transparent); }

/* ── §5 search ────────────────────────────────────────────────────────────── */
.stp-search { display: grid; gap: var(--oecta-space-xs); margin-block-end: var(--oecta-space-md); }
.stp-search__label { font-weight: 600; font-size: var(--oecta-text-md); color: var(--oecta-on-surface); }
.stp-search__box { position: relative; display: block; }
.stp-search__box .material-icons-outlined {
  position: absolute; inset-inline-start: var(--oecta-space-md); inset-block-start: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--oecta-on-surface-variant); pointer-events: none;
}
.stp-search__input {
  display: block; inline-size: 100%; box-sizing: border-box; min-block-size: 48px; margin: 0;
  padding: 0 var(--oecta-space-md) 0 calc(var(--oecta-space-md) + 28px);
  border: 0; border-radius: var(--oecta-radius-md); background: var(--oecta-surface-high);
  box-shadow: inset 0 -2px 0 var(--oecta-on-surface-variant);
  font: 400 16px/1.4 var(--oecta-font-body); color: var(--oecta-on-surface);
}
.stp-search__input:focus-visible { outline: 2px solid transparent; background: var(--oecta-surface-lowest); box-shadow: inset 0 -2px 0 var(--oecta-accent), var(--oecta-focus-ring); }
.stp-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.stp-search__count { margin: 0; font-size: var(--oecta-text-base); color: var(--oecta-on-surface-variant); }

/* ── §6 the Email & Privacy card ──────────────────────────────────────────── */
.stp-statusrow { padding-block: var(--oecta-space-xs) var(--oecta-space-sm); }
/* The whole row is the <label> (44px); the input sits over the track, so the
   switch is operable by tap, click and Space, and named by aria-labelledby.
   The knob's side and the word "On"/"Off" carry the state — never colour alone. */
.stp-row { align-items: center; }
.stp-row__label, .stp-row__hint { display: block; }
.stp-switchrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--oecta-space-lg);
  inline-size: 100%; min-block-size: 44px; cursor: pointer;
}
.stp-switch { position: relative; display: inline-flex; flex: none; inline-size: 44px; block-size: 26px; }
.stp-switch__input { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stp-switch__track {
  position: absolute; inset: 0; border-radius: var(--oecta-radius-pill);
  background: var(--oecta-text-muted);
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
.stp-switch__track::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 20px; block-size: 20px; border-radius: var(--oecta-radius-round);
  background: var(--oecta-on-primary); box-shadow: var(--oecta-shadow-xs);
  transition: transform var(--oecta-duration-fast) var(--oecta-ease);
}
.stp-switch__input:checked + .stp-switch__track { background: var(--oecta-primary-container); }
.stp-switch__input:checked + .stp-switch__track::after { transform: translateX(18px); }
.stp-switch__input:focus-visible + .stp-switch__track { box-shadow: var(--oecta-focus-ring); }
.stp-switch__state { min-inline-size: 2.2em; font-size: var(--oecta-text-sm); font-weight: 600; color: var(--oecta-on-surface-variant); }
/* The stopped / fully-unsubscribed note (D26, D30 wording). */
.stp-note {
  display: flex; align-items: flex-start; gap: var(--oecta-space-sm);
  margin: var(--oecta-space-xs) 0 var(--oecta-space-sm); padding: var(--oecta-space-md) var(--oecta-space-lg);
  border-radius: var(--oecta-radius-md); background: color-mix(in srgb, var(--oecta-accent) 16%, transparent);
  font-size: var(--oecta-text-md); line-height: 1.5; color: var(--oecta-on-surface);
}
.stp-note .material-icons-outlined { flex: none; font-size: 20px; margin-block-start: 1px; color: var(--oecta-accent-text); }
.stp-note strong { font-weight: 700; }
.stp-note__body { display: grid; gap: var(--oecta-space-xs); min-inline-size: 0; }
.stp-note__body p { margin: 0; }
.stp-portal { padding-block-start: var(--oecta-space-xs); }
/* A mail link in running text: a 44px-tall target that doesn't move the lines. */
.stp-mail {
  display: inline-block; padding-block: 12px; margin-block: -12px;
  color: var(--oecta-primary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere; border-radius: var(--oecta-radius-xs);
}
.stp-mail:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
/* Fully unsubscribed: the state in words, one button back. */
.stp-fullrow { align-items: center; }
.stp-fullrow .set-row-text { min-inline-size: 0; }
.stp-start {
  min-block-size: 44px; padding-inline: var(--oecta-space-lg);
  background: var(--oecta-primary-container); color: var(--oecta-on-primary-container);
  white-space: normal; text-align: center; max-inline-size: 100%;
  /* .oecta-btn animates "all": the focus ring would fade in from transparent. */
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
/* Before the icon font arrives its ligature is plain text: a 1em box keeps it from widening the row. */
.stp-start .material-icons-outlined, .stp-danger .material-icons-outlined, .stp-ghost .material-icons-outlined { flex: none; inline-size: 1em; overflow: hidden; }
.stp-start .material-icons-outlined { color: var(--oecta-on-primary-container); }
.stp-start:hover { background: var(--oecta-primary-hover); }
.stp-start:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
.stp-onlymember { margin: 0; font-size: var(--oecta-text-base); color: var(--oecta-on-surface-variant); }
/* The small "Full unsubscribe" link under the Stop switch (D32). */
.stp-fulllink { margin: 0; text-align: end; }
.stp-quietlink {
  min-block-size: 44px; padding-inline: var(--oecta-space-sm); border: 0; background: transparent;
  font: 500 var(--oecta-text-base)/1.2 var(--oecta-font-body); color: var(--oecta-on-surface-variant);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--oecta-radius-xs);
}
.stp-quietlink:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
/* The typed FULL UNSUBSCRIBE screen, inside the card. */
.stp-barrier { display: grid; gap: var(--oecta-space-sm); font-size: var(--oecta-text-md); line-height: 1.5; color: var(--oecta-on-surface); }
.stp-barrier p { margin: 0; }
.stp-barrier__h { margin: 0; font: 700 var(--oecta-text-lg)/1.25 var(--oecta-font-display); color: var(--oecta-on-surface); }
.stp-barrier__h:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); border-radius: var(--oecta-radius-xs); }
.stp-barrier__warn {
  display: flex; gap: var(--oecta-space-sm); padding: var(--oecta-space-md); border-radius: var(--oecta-radius-md);
  background: color-mix(in srgb, var(--oecta-error) 10%, transparent);
}
.stp-barrier__warn .material-icons-outlined { flex: none; font-size: 20px; color: var(--oecta-error-text); }
.stp-barrier__form { display: grid; gap: var(--oecta-space-xs); }
.stp-barrier__label { font-weight: 600; }
.stp-word { font-family: var(--oecta-font-mono); font-weight: 600; letter-spacing: 0.02em; }
.stp-barrier__hint, .stp-barrier__why { font-size: var(--oecta-text-base); color: var(--oecta-on-surface-variant); }
.stp-barrier__why { display: flex; align-items: center; gap: var(--oecta-space-xs); }
.stp-barrier__why .material-icons-outlined { font-size: 16px; }
.stp-barrier__input {
  min-block-size: 44px; box-sizing: border-box; inline-size: min(100%, 24rem); padding-inline: var(--oecta-space-md);
  border: 0; border-radius: var(--oecta-radius-md); background: var(--oecta-surface-high);
  box-shadow: inset 0 -2px 0 var(--oecta-on-surface-variant);
  font: 400 16px/1.4 var(--oecta-font-body); color: var(--oecta-on-surface);
}
.stp-barrier__input:focus-visible { outline: 2px solid transparent; background: var(--oecta-surface-lowest); box-shadow: inset 0 -2px 0 var(--oecta-accent), var(--oecta-focus-ring); }
.stp-barrier__acts { display: flex; flex-wrap: wrap; gap: var(--oecta-space-sm); padding-block-start: var(--oecta-space-xs); }
.stp-danger, .stp-ghost { min-block-size: 44px; white-space: normal; max-inline-size: 100%; transition: background var(--oecta-duration-fast) var(--oecta-ease); }
.stp-danger { background: var(--oecta-error); color: var(--oecta-on-primary); }
.stp-danger[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.stp-ghost { background: transparent; color: var(--oecta-primary-text); }
.stp-danger:focus-visible, .stp-ghost:focus-visible { outline: 2px solid transparent; box-shadow: var(--oecta-focus-ring); }
/* Real Settings colours under AA (settings.js _injectStyles injects after this sheet,
   so these carry the pane id): the green "is-ok" chip text is 4.0:1, and both chips keep
   their light-mode text in dark mode. */
#set-pane .set-card .set-card-head .material-icons-outlined { color: var(--oecta-accent-text, #92400e); }
body.dark-mode #set-pane .set-card .set-card-head .material-icons-outlined { color: var(--oecta-accent, #fea520); }
#set-pane .set-card .set-status-chip.is-ok { color: var(--oecta-on-surface); }
#set-pane .set-card .set-status-chip.is-ok .material-icons-outlined { color: #166534; }
#set-pane .set-card .set-status-chip.is-warn { color: var(--oecta-accent-text, #92400e); }
#set-pane .set-card .set-status-chip.is-warn .material-icons-outlined { color: var(--oecta-accent-text, #92400e); }
body.dark-mode #set-pane .set-status-chip.is-warn { color: var(--oecta-accent-text); }
body.dark-mode #set-pane .set-status-chip.is-warn .material-icons-outlined { color: var(--oecta-accent-text); }
body.dark-mode #set-pane .set-card .set-status-chip.is-ok .material-icons-outlined { color: var(--oecta-success-text); }

/* ── §7 the live dark-mode input reset ────────────────────────────────────────
   style2.css (Inputs, ~line 93) sets EVERY input's background, border colour
   and focus shadow with !important under body.dark-mode. That flattens the
   drawn checkbox and replaces its focus ring. Like the font-reset gotcha, the
   only way past it is a scoped selector AND !important. */
body.dark-mode .stp-check { background: var(--oecta-surface-lowest) !important; border-color: var(--oecta-on-surface-variant) !important; box-shadow: none !important; }
body.dark-mode .stp-check:checked { background: var(--oecta-primary-container) !important; border-color: var(--oecta-primary-container) !important; }
body.dark-mode .stp-check:focus:not(:focus-visible) { box-shadow: none !important; }
body.dark-mode .stp-check:focus-visible { box-shadow: var(--oecta-focus-ring) !important; }
body.dark-mode .stp-search__input { background: var(--oecta-surface-high) !important; border-color: transparent !important; box-shadow: inset 0 -2px 0 var(--oecta-on-surface-variant) !important; }
body.dark-mode .stp-search__input:focus-visible { background: var(--oecta-surface-lowest) !important; box-shadow: inset 0 -2px 0 var(--oecta-accent), var(--oecta-focus-ring) !important; }
body.dark-mode .stp-barrier__input { background: var(--oecta-surface-high) !important; border-color: transparent !important; box-shadow: inset 0 -2px 0 var(--oecta-on-surface-variant) !important; }
body.dark-mode .stp-barrier__input:focus-visible { background: var(--oecta-surface-lowest) !important; box-shadow: inset 0 -2px 0 var(--oecta-accent), var(--oecta-focus-ring) !important; }

@media (prefers-reduced-motion: reduce) {
  .stp-group__btn > .material-icons-outlined, .stp-check, .stp-danger, .stp-ghost, .stp-start,
  .stp-switch__track, .stp-switch__track::after { transition: none; }
}
/* Phone: the count drops under the name; the chevron spans both lines. */
@media (max-width: 480px) {
  .stp-group__btn {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name name icon" "count pips icon"; padding-inline: var(--oecta-space-md);
  }
  .stp-group__name { grid-area: name; }
  .stp-group__sep { display: none; }
  .stp-group__count { grid-area: count; }
  .stp-pips { grid-area: pips; }
  .stp-group__btn > .material-icons-outlined { grid-area: icon; }
  .stp-group__panel { padding-inline: var(--oecta-space-xs); }
  .stp-bulk { justify-content: flex-start; }
  .stp-fullrow { flex-wrap: wrap; row-gap: var(--oecta-space-sm); }
  .stp-fullrow .set-row-control { flex: 1 1 100%; }
  .stp-fullrow .stp-start { inline-size: 100%; }
}

/* ── §8 kinds + subjects (round 6) ────────────────────────────────────────────
   Shown only once the office marks a topic as a kind (settings.js _tpSplit);
   before that the card is round 5's grouped list and none of this applies. */
.stp-rule {
  margin: 0 0 var(--oecta-space-sm);
  font-size: var(--oecta-text-md); line-height: 1.45; color: var(--oecta-on-surface);
}
.stp-example {
  margin: 0 0 var(--oecta-space-md); padding: var(--oecta-space-sm) var(--oecta-space-md);
  border-radius: var(--oecta-radius-md); background: var(--oecta-surface-low);
  font-size: var(--oecta-text-base); line-height: 1.5; color: var(--oecta-on-surface-variant);
}
.stp-example strong { color: var(--oecta-on-surface); font-weight: 600; }
.stp-example__label {
  display: block; margin-block-end: 2px;
  font: 700 var(--oecta-text-sm)/1.3 var(--oecta-font-body); color: var(--oecta-on-surface);
}
.stp-sect { margin-block-end: var(--oecta-space-lg); }
.stp-sect__h { margin: 0 0 var(--oecta-space-xs); font: 700 var(--oecta-text-lg)/1.25 var(--oecta-font-display); color: var(--oecta-on-surface); }
.stp-sect__sub { margin: 0 0 var(--oecta-space-sm); font-size: var(--oecta-text-base); line-height: 1.45; color: var(--oecta-on-surface-variant); }
.stp-kinds__list {
  display: grid; padding: var(--oecta-space-xs) var(--oecta-space-sm);
  border-radius: var(--oecta-radius-lg); background: var(--oecta-surface-low);
}
/* Under "Subjects" the groups are one step down (h5), so their names sit a size below the section heading. */
.stp-subjects .stp-group__name { font-size: var(--oecta-text-md); }
@media (max-width: 768px) {
  .stp-kinds__list { padding-inline: var(--oecta-space-xs); }
}