/* settings.css — the 2.0 Settings pages (#/settings, #/settings/<page>) and
 * Onboarding (#/onboarding). Boards: Settings*, Onboarding.
 *
 * Same rules as shell.css: 2.0 token names only, no raw colours, no
 * prefers-color-scheme, no fixed phone-width px widths (OPEN-QUESTIONS #24),
 * every class v2- prefixed. The shared bottom sheets / confirm dialogs the
 * pages open (language picker, change email, consent, delete) are the
 * app-wide ui.js components and keep their existing styling until Phase 9.
 */

/* ---------- page ---------- */
.v2-set__panel {
  gap: 22px;
}
.v2-set__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.v2-set__group .v2-caption {
  margin-top: -2px;
}
.v2-set__version,
.v2-set__maker {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-dim);
  font-variant-numeric: tabular-nums;
}
/* A row's value takes whatever the label leaves and is never cut off
 * (Randy 2026-10-07, item 16: a fixed 55% cap ellipsized long values with
 * room to spare). When a row is tight the label gives way first (its large
 * shrink factor — it wraps, down to its longest word: min-width: auto),
 * then the value wraps onto a second line, right-aligned. */
.v2-settings .v2-row__text {
  flex-shrink: 100;
  min-width: auto;
}
.v2-settings .v2-row__value {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
/* A little air above and below a label/value row that wraps to two lines
 * (a one-line row is still sized by its min-height). */
.v2-settings .v2-row:has(> .v2-row__value) {
  padding-block: 6px;
}
.v2-settings button.v2-row {
  cursor: pointer;
}
.v2-settings button.v2-row:disabled {
  opacity: 0.6;
}
/* "Clear Ask conversation" (Privacy & security; v226, Randy's mockup): the
   row's control is a raised trash button — AT REST the Meetings tag /
   project chips' exact look (css/detail.css .v2-dtag: --s-card fill,
   --raised-line border, --sh-raised = the lighter top edge + the soft drop)
   with the section ink on the glyph; PRESSED (:active, and .is-pressed while
   the confirm is up) the Create button's exact look (css/shell.css
   .v2-nav__create: --accent fill, --on-accent glyph), sunk 2 px with the
   shadow flattened; RUNNING (:disabled) the settings disabled look. The
   42 × 36 visual carries a 44 × 44 hit area (::after). No raw hex: the red
   stays for the confirm dialog's destructive button. */
.v2-set__trashbtn {
  position: relative;
  width: 42px;
  height: 36px;
  border-radius: 11px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  color: var(--accent-ink);
  cursor: pointer;
}
.v2-set__trashbtn::after {
  content: "";
  position: absolute;
  inset: -4px -1px;
}
.v2-set__trashbtn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.v2-set__trashbtn:active,
.v2-set__trashbtn.is-pressed {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: none;
  transform: translateY(2px);
}
.v2-set__trashbtn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* ---------- the switch (button role=switch; 46×28, accent when on) ---------- */
.v2-sw {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--s-track);
  transition: background-color 160ms ease;
  cursor: pointer;
}
.v2-sw::after {
  /* 44px hit target around the 28px track */
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.v2-sw__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--on-accent);
  box-shadow: var(--sh-raised);
  transition: transform 160ms ease;
}
.v2-sw.is-on {
  background: var(--accent);
}
.v2-sw.is-on .v2-sw__knob {
  transform: translateX(18px);
}
.v2-sw.no-anim,
.v2-sw.no-anim .v2-sw__knob {
  transition: none;
}
/* Skeleton (cold cache): neither on nor off — no knob, a quiet pulse. */
.v2-sw:not(.is-on):not(.is-off) {
  background: transparent;
  border: 1.5px solid var(--strip-line);
  cursor: default;
}
.v2-sw:not(.is-on):not(.is-off) .v2-sw__knob {
  width: 6px;
  height: 6px;
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  background: var(--t-dim);
  box-shadow: none;
  animation: v2-set-pulse 1.2s ease-in-out infinite;
}
@keyframes v2-set-pulse {
  50% {
    opacity: 0.35;
  }
}
.v2-sw:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* ---------- interruption-alert pills (row with the pills underneath) ---------- */
.v2-set__stack {
  flex-wrap: wrap;
  row-gap: 10px;
  padding-top: 11px;
  padding-bottom: 13px;
}
.v2-set__stack .v2-row__text {
  flex-basis: 100%;
}
.v2-set__pills {
  flex: 1 1 100%;
  display: flex;
  gap: 7px;
}
.v2-set__pill {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  border-radius: 17px;
  background: var(--s-chip);
  border: 1px solid var(--raised-line);
  color: var(--t-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
}
.v2-set__pill.is-on {
  background: var(--accent-tint);
  border-color: var(--accent-tint-line);
  color: var(--accent-ink);
  font-weight: 660;
}

/* ---------- name rows ---------- */
.v2-set__name {
  min-height: 48px;
}
.v2-set__name .v2-row__text {
  flex: none;
}
.v2-set__namebtn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: right;
  font: inherit;
  font-size: 15px;
  color: var(--t-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.v2-set__namebtn.is-empty {
  color: var(--accent-ink);
  font-weight: 600;
}
.v2-set__name .lineedit {
  flex: 1 1 auto;
  min-width: 0;
}
/* The sign-in email wraps after the @ first (account.js emailHtml). */

/* ---------- manage account (decision 29) ---------- */
.v2-set__manage {
  display: flex;
  flex-direction: column;
  padding: 13px 13px 0;
}
.v2-set__logout {
  height: 50px;
  border: 0;
  border-radius: 25px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 12px var(--accent-glow), inset 0 1px 0 var(--glow-inset);
  font: inherit;
  font-size: 15.5px;
  font-weight: 680;
  cursor: pointer;
}
/* The hairline between Log out and the warning (batch 15 §4; the board's
 * divider, decision 29): the rows-card rule, spanning the card's content —
 * the card's own 13px padding is its inset — 14px below the button, the
 * warning's own 14px above the text. */
.v2-set__manage > .v2-rule {
  margin: 14px 0 0;
}
.v2-set__warning {
  margin: 14px 2px 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-muted);
}
.v2-set__delete {
  height: 50px;
  border: 0;
  background: none;
  color: var(--danger);
  font: inherit;
  font-size: 15px;
  font-weight: 640;
  cursor: pointer;
}

/* ---------- plan ---------- */
.v2-set__usage {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 13px 13px;
}
.v2-set__usagetop {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.v2-set__usagelabel {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--t-primary);
}
.v2-set__usagevalue {
  font-size: 15px;
  font-weight: 680;
  color: var(--t-primary);
  font-variant-numeric: tabular-nums;
}
.v2-set__usageof {
  font-weight: 500;
  color: var(--t-muted);
}
.v2-set__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--s-track);
  overflow: hidden;
}
.v2-set__fill {
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}
/* Batch 20 §1 (Randy 2026-10-16): the hours bar is ONE track of up to three
 * segments — Meetings, Journal, Recipes — with a small gap between them and
 * the unused part of the track muted (the track itself); under it a legend
 * of coloured dots + the time per skill.
 * Batch 21 §1 (Randy 2026-10-17, approved from the interactive mockup): the
 * segments carry NO radius of their own — the rounded track (.v2-set__bar,
 * overflow hidden) clips them, so the left end follows the track's rounding,
 * the right end of the last coloured segment is flat, and at the full limit
 * the colour reaches the track's rounded right end. A nonzero share is never
 * thinner than 2 px (a hidden zero share draws nothing). The legend always
 * lists all three skills (core.js). The imports bar keeps its rounded fill.
 * Batch 22 §1 (Randy 2026-10-17): the gap between segments is 1 px — still
 * visible, the colours never touch. */
.v2-set__bar--split {
  display: flex;
  gap: 1px;
}
.v2-set__seg {
  flex: 0 0 auto;
  height: 6px;
  min-width: 2px;
  border-radius: 0;
}
.v2-set__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: -2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--t-body);
  font-variant-numeric: tabular-nums;
}
.v2-set__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.v2-set__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.v2-set__seg--journal,
.v2-set__dot--journal {
  background: var(--journal);
}
.v2-set__seg--recipes,
.v2-set__dot--recipes {
  background: var(--cookbook);
}
/* APPROVED EXCEPTION (Randy, batch 20 §1, 2026-10-16): on Settings › Plan
 * ONLY, the usage bars and their legend dots use the SOFT DARK-THEME values
 * in BOTH themes — #FF6B9A pink, #6C7CFF blue, #FFA42B amber. The blue and
 * the amber are --journal / --cookbook already (one value in both themes);
 * the pink is the dark block's --meetings, which no token exposes in light,
 * so it is the ONE raw hex in a 2.0 stylesheet, scoped to this segment and
 * dot (functions/test/shell.mjs pins the exception). Not the wordmark, not
 * any other surface. */
.v2-set__seg--meetings,
.v2-set__dot--meetings {
  background: #FF6B9A;
}
.v2-set__resets {
  margin: 0;
  font-size: 12px;
  color: var(--t-muted);
}
/* Batch 19 §5: the caption directly under each meter — the house caption
 * look (shell.css .v2-caption: 12 px, muted) inside the panel. */
.v2-set__usagenote {
  margin: -2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-muted);
}
/* Batch 19 §5: the recipe-imports meter is the Cookbook amber of the
 * current theme, whatever section Settings was opened from. */
.v2-set__fill--imports {
  background: var(--cookbook);
}
.v2-set__warn {
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--r2-card);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  color: var(--accent-ink);
  font-size: 12.5px;
  line-height: 1.42;
}
.v2-set__upgrade {
  height: 44px;
  border-radius: 22px;
  border: 1.5px solid var(--accent-tint-line);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
}

/* ---------- tags + vocabulary chips ---------- */
.v2-set__tagcard {
  display: flex;
  flex-direction: column;
}
.v2-set__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 13px;
  position: relative;
}
.v2-set__chipwrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.v2-set__chip {
  font: inherit;
  font-size: 13px;
  font-weight: 570;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-set__chip.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.v2-set__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: 5px;
  /* surface + row text: .v2-pop (shell.css) */
}
.v2-set__menuitem {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--t-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.v2-set__menuitem svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.v2-set__menuitem.is-danger {
  color: var(--accent-ink);
}
.v2-set__vchip {
  gap: 4px;
  padding-right: 4px;
}
.v2-set__vchipx {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.v2-set__vchipx::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.v2-set__vchipx svg {
  width: 13px;
  height: 13px;
}
.v2-set__empty {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: 13.5px;
  color: var(--t-muted);
}
.v2-set__empty.is-error {
  color: var(--danger);
}
.v2-set__notice {
  margin: 0 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--danger);
}

/* ---------- about (the Acknowledgements disclosure) ---------- */
.v2-set__faq > summary {
  list-style: none;
  cursor: pointer;
}
.v2-set__faq > summary::-webkit-details-marker {
  display: none;
}
.v2-set__faq > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--t-chevron);
  border-bottom: 2px solid var(--t-chevron);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.v2-set__faq[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.v2-set__faqa {
  margin: 0;
  padding: 0 13px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-muted);
}
.v2-set__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-set__prose {
  padding: 4px 15px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--t-body);
}
.v2-set__prose p {
  margin: 12px 0;
}
.v2-set__byline {
  color: var(--t-muted);
  font-style: italic;
}

/* ==========================================================================
 * Onboarding (board Onboarding)
 * ========================================================================== */
.v2-ob {
  background: var(--s-page);
  min-height: 100%;
  padding: 0 22px calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  gap: 0;
  max-width: 36rem;
  margin: 0 auto;
}
/* The space above the title (under the Dynamic Island): HALVED on
 * 2026-10-06 (item 22) — was 54px…12vh. Nothing sits in it any more.
 * Shorter phones halve it again (below). */
.v2-ob__top {
  flex: 1 1 auto;
  min-height: 27px;
  max-height: 6vh;
}
/* Skip (2026-10-05; moved under Save 2026-10-06, item 22): a quiet text
 * button, centred below the primary action. */
.v2-ob__skip {
  align-self: center;
  min-height: 44px;
  margin-top: -6px;
  padding: 0 1rem;
  border: 0;
  background: none;
  color: var(--t-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 560;
  cursor: pointer;
}
.v2-ob__skip:disabled {
  opacity: 0.5;
}
.v2-ob__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-ob__h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 720;
  letter-spacing: -0.9px;
  line-height: 1.16;
  color: var(--t-primary);
  text-wrap: pretty;
}
.v2-ob__slash {
  color: var(--t-slash);
}
.v2-ob__word {
  color: var(--meetings-ink);
}
.v2-ob__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--t-muted);
}
.v2-ob__skills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}
.v2-ob__skill {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 15px;
  border-radius: 20px;
  background: var(--s-panel);
  border: 2px solid var(--strip-line);
  text-align: left;
  font: inherit;
  color: var(--t-nav);
  cursor: pointer;
}
.v2-ob__skill.is-on {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--t-primary);
}
.v2-ob__skill[aria-disabled="true"] {
  cursor: default;
}
.v2-ob__orb {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.v2-ob__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.v2-ob__title {
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.35px;
}
/* "Required" on the Meetings row (item 22): very small, light, not bold.
   (Batch 8 §12 dropped it; back while Show Meetings is shelved —
   js/shell/skills.js SHOW_MEETINGS_TOGGLE = false.) */
.v2-ob__req {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t-dim);
  vertical-align: 1px;
}
.v2-ob__sub {
  font-size: 13px;
  line-height: 1.4;
  color: var(--t-muted);
}
.v2-ob__skill.is-on .v2-ob__sub {
  color: var(--accent-ink);
}
.v2-ob__check {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 2px solid var(--strip-line);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex: none;
}
.v2-ob__skill.is-on .v2-ob__check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.v2-ob__themes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}
.v2-ob__themegrid {
  display: flex;
  gap: 12px;
}
.v2-ob__theme {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border-radius: var(--r2-card);
  background: var(--s-panel);
  border: 2px solid var(--strip-line);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.v2-ob__theme.is-on {
  background: var(--meetings-tint);
  border-color: var(--meetings);
}
/* The preview paints with the PREVIEWED theme's tokens (data-theme on the
 * preview element). */
.v2-ob__preview {
  display: block;
  height: 52px;
  border-radius: 11px;
  background: var(--s-page);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  overflow: hidden;
  padding: 8px 9px 0;
  box-sizing: border-box;
}
.v2-ob__pv-bar {
  display: block;
  width: 34%;
  height: 5px;
  border-radius: 3px;
  background: var(--meetings);
  margin-bottom: 6px;
}
.v2-ob__pv-panel {
  display: block;
  height: 29px;
  border-radius: 7px 7px 0 0;
  background: var(--s-panel);
  padding: 6px 6px 0;
  box-sizing: border-box;
}
.v2-ob__pv-card {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--s-chip);
  margin-bottom: 4px;
}
.v2-ob__pv-line {
  display: block;
  width: 62%;
  height: 5px;
  border-radius: 3px;
  background: var(--s-track);
}
.v2-ob__themerow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2-ob__themelabel {
  font-size: 14.5px;
  font-weight: 660;
  color: var(--t-nav);
}
.v2-ob__theme.is-on .v2-ob__themelabel {
  color: var(--t-primary);
}
.v2-ob__radio {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid var(--strip-line);
  box-sizing: border-box;
}
.v2-ob__theme.is-on .v2-ob__radio {
  border: 6px solid var(--meetings);
}
.v2-ob__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  margin-top: auto;
}
/* Shorter phones (390x844 class and below; Randy 2026-10-06 batch 2, item
 * 16), so the head of Skip peeks at the bottom of the first screen:
 *   • the space above the title halves again, safe-area-aware — under a
 *     Dynamic Island (inset 59) the title sits 8px below the inset (~19px
 *     under the island, was ~38px); a plain status bar (inset 20) or none
 *     keeps 27px: 47px − inset, clamped to 8…27px;
 *   • the three section gaps tighten 20 → 16px.
 * 430/440-wide phones already show all of Skip and keep the roomier top
 * (tightening there only left the page top-heavy). */
@media (max-height: 880px) {
  .v2-ob__top {
    min-height: clamp(8px, calc(47px - env(safe-area-inset-top, 0px)), 27px);
  }
  .v2-ob__skills,
  .v2-ob__themes,
  .v2-ob__foot {
    padding-top: 16px;
  }
}
.v2-ob__foot .v2-caption {
  margin: 0;
  text-align: center;
}
.v2-ob__save {
  height: 52px;
  border: 0;
  border-radius: 26px;
  background: var(--meetings);
  color: var(--on-accent);
  box-shadow: 0 0 12px var(--meetings-glow), inset 0 1px 0 var(--glow-inset);
  font: inherit;
  font-size: 16px;
  font-weight: 680;
  cursor: pointer;
}
.v2-ob__save:disabled {
  opacity: 0.7;
}

/* ---------- Skills rows, two lines (Randy 2026-10-03) ----------
 * Journal / Cookbook: "<Skill> Settings ›" (the link), and directly under it,
 * indented under the name, "Show <Skill>" with its switch — always visible. */
.v2-skillrow__show {
  margin-left: calc(13px + 28px + 12px);
  width: auto;
  padding-left: 0;
  min-height: 44px;
  border-top: 1px solid var(--strip-line);
}
/* Saved state not known yet: keep the switch's space, show nothing (never a
   guessed position — it would flash once the read lands). */
.v2-skillrow__show.is-pending .v2-toggle {
  visibility: hidden;
}
/* 6e: Cookbook Settings on a device that has never read them — same rule
 * for its switches and segmented controls. */
.v2-row.is-pending .v2-toggle,
.v2-row.is-pending .v2-seg {
  visibility: hidden;
}
/* Batch 18 §6b: the plan meter before its first known answer — the label
 * and the empty track stay, the figures ("— of 30h", "Resets …") show
 * nothing until the real values are known. Both themes: visibility only. */
.v2-set__usage.is-pending .v2-set__usagevalue,
.v2-set__usage.is-pending .v2-set__resets,
.v2-set__usage.is-pending .v2-set__legend {
  visibility: hidden;
}
.v2-skillrow__show .v2-row__label {
  font-size: 14.5px;
  color: var(--t-body);
}
/* Batch 8 §12: the last skill still on — its switch is disabled and a short
   muted note under the label says why. */
.v2-skillrow__note {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-muted);
}
.v2-skillrow__show.is-locked .v2-toggle {
  opacity: 0.55;
}
.v2-ob__lastnote {
  margin: 8px 4px 0;
}

/* ---------- rows with a second line (2026-10-06 item 7) ----------
 * A row's text that wraps to two or three lines filled the row edge to edge
 * (the row has no vertical padding, only a min-height). Settings rows with a
 * sub line get the breathing room the single-line rows have. */
.v2-settings .v2-row.has-sub {
  padding-block: 11px;
}
.v2-settings .v2-row__sub {
  line-height: 1.35;
}

/* ---------- "How your recordings are processed" (#/settings/privacy/processing) ----------
 * The approved disclosure markup (consent.js disclosureCardsHtml, also the
 * legacy consent screen's) restyled for a 2.0 page: 2.0 cards, accent-tint
 * glyph orbs, the 2.0 text ramp. Scoped, so #/consent is untouched. */
.v2-set__consenthead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 0;
}
/* Shield beside the title, as on #/consent (Randy 2026-10-07, item 15). */
.v2-set__consenttitlerow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-set__consentorb {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.v2-set__consentorb svg {
  width: 1.45rem;
  height: 1.45rem;
}
.v2-set__consenttitle {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--t-primary);
  text-wrap: balance;
}
.v2-set__consentlede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--t-muted);
}
.v2-set__consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.v2-set__consent .consent__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: var(--s-card);
  border: 1px solid var(--raised-line);
  box-shadow: var(--sh-raised);
  border-radius: var(--r2-card);
  text-align: left;
}
.v2-set__consent .consent__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.v2-set__consent .consent__glyph svg {
  width: 1.125rem;
  height: 1.125rem;
}
.v2-set__consent .consent__vendor {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--t-label);
}
.v2-set__consent .consent__what {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t-muted);
}
.v2-set__consent .consent__what strong {
  color: var(--t-primary);
  font-weight: 650;
}
.v2-set__consent .consent__fine {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: var(--t-muted);
}
.v2-set__consent .consent__lockglyph {
  flex: none;
  margin-top: 1px;
}
.v2-set__consent .consent__lockglyph svg {
  width: 14px;
  height: 14px;
}