/* ==========================================================================
   ACCOUNT DASHBOARD
   Loaded alongside community.css, which supplies .cmxBtn, .cmpChip, .dmRow and
   .dmReq — reused rather than reimplemented.

   THE TOKENS ARE DECLARED HERE, NOT INHERITED.
   community.css scopes --cmx-hair and friends to `.page-cmx, .page-cmp`, and
   this page sets neither body class. So every `var(--cmx-hair)` resolved to
   nothing, every `border: 1px solid var(--cmx-hair)` was invalid, and every
   card computed to border-width: 0 — the borders were simply absent and the
   page still rendered, which is exactly how this class of bug survives review.
   An undefined custom property invalidates the WHOLE declaration, silently.

   Declaring them on .pdWrap makes this file self-sufficient: it no longer
   depends on a class it does not set.
   ========================================================================== */

.pdWrap {
  --cmx-hair:  rgb(255 255 255 / .09);
  --cmx-pane:  rgb(255 255 255 / .04);
  --cmx-pane2: rgb(255 255 255 / .07);

  position: relative; z-index: 1;
  max-width: 68rem; margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-20);
}

.pdFlash {
  margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5);
  border-radius: var(--radius); font-size: var(--fs-sm); line-height: var(--lh-body);
  border: 1px solid var(--cmx-hair); background: var(--cmx-pane); color: var(--text-mid);
}
.pdFlash--ok  { border-color: rgb(62 158 95 / .45); color: var(--y-green); }
.pdFlash--err { border-color: rgb(232 84 74 / .45); color: var(--y-red); }

/* ── identity card ───────────────────────────────────────────────────── */
.pdHead {
  position: relative; border-radius: var(--radius-lg);
  border: 1px solid var(--cmx-hair); background: var(--surface-1);
}
.pdHead__banner {
  height: 6.5rem;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  overflow: hidden;
  background:
    radial-gradient(120% 180% at 12% 0%, rgb(240 198 74 / .3), transparent 58%),
    radial-gradient(90% 160% at 88% 10%, rgb(232 84 74 / .16), transparent 60%),
    var(--surface-2);
}
.pdHead__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-5); align-items: start;
  padding: 0 var(--s-6) var(--s-6); margin-top: -2.6rem;
}

/* The picture IS the button. A file input plus a separate submit is two clicks
   for one intention, and people pick a photo then leave without pressing it. */
.pdPic { margin: 0; }
.pdPic__label {
  position: relative; display: block; width: 7rem; height: 7rem;
  border-radius: 50%; cursor: pointer; overflow: visible;
  box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 5px var(--cmx-hair);
  transition: box-shadow var(--dur) var(--ease-out);
}
.pdPic__label:hover, .pdPic__label:focus-within {
  box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 6px rgb(240 198 74 / .75);
}
.pdPic__img {
  width: 7rem; height: 7rem; border-radius: 50%;
  object-fit: cover; object-position: 50% 30%; display: block;
}
.pdPic__init {
  width: 7rem; height: 7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--y-yellow), #c79a1e);
  color: var(--y-black); font-family: var(--font-display); font-size: 2rem; font-weight: 600;
}
.pdPic__edit {
  position: absolute; right: 0; bottom: .15rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--y-yellow); color: var(--y-black);
  box-shadow: 0 0 0 3px var(--surface-1);
}
.pdPic__edit svg { width: 1rem; height: 1rem; }
.pdPic__label.is-busy { opacity: .5; pointer-events: none; }

.pdHead__id { min-width: 0; padding-top: 3rem; }
.pdHead__name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500;
  color: var(--text-hi); margin: 0; line-height: 1.05; }
.pdHead__at { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  margin: .35rem 0 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-ink); }
.pdHead__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; }
.pdHead__act { display: grid; gap: var(--s-2); padding-top: 3rem; width: 13rem; }
.pdHead__act .cmxBtn { width: 100%; }
.pdMuted { color: var(--text-lo); }
.pdN {
  min-width: 1.25rem; padding: .05rem .35rem; border-radius: var(--radius-pill);
  background: var(--y-yellow); color: var(--y-black);
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
}

/* ── stats ───────────────────────────────────────────────────────────── */
.pdStats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3); margin: var(--s-4) 0;
}
.pdStat {
  padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--cmx-hair); background: var(--cmx-pane);
  text-decoration: none; transition: border-color var(--dur) var(--ease-out),
                                     background-color var(--dur) var(--ease-out);
}
.pdStat:hover { border-color: rgb(240 198 74 / .4); background: var(--cmx-pane2); }
.pdStat b { display: block; font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: 500; color: var(--text-hi); line-height: 1; }
.pdStat span { font-size: var(--fs-xs); color: var(--text-lo); }
.pdStat--key { border-color: rgb(240 198 74 / .35); }
.pdStat--key b { color: var(--accent-ink); }

/* ── tabs ────────────────────────────────────────────────────────────── */
.pdTabs {
  display: flex; gap: .25rem; margin: var(--s-6) 0 var(--s-4);
  padding: .3rem; border-radius: var(--radius-pill);
  border: 1px solid var(--cmx-hair); background: var(--cmx-pane);
  overflow-x: auto; scrollbar-width: none;
}
.pdTabs::-webkit-scrollbar { display: none; }
.pdTab {
  flex: 1; white-space: nowrap; padding: .55rem 1rem;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-lo);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.pdTab:hover { color: var(--text-hi); }
.pdTab.is-on { background: var(--y-yellow); color: var(--y-black); }

/* Every pane is rendered; only one is shown.
   :target is the NO-SCRIPT fallback: with JavaScript off, #security still
   reaches the right section on the live dashboard.

   ONCE THE SCRIPT IS RUNNING IT OWNS VISIBILITY, and .js-pd says so. Both
   selectors matched at the same time otherwise — a stale fragment kept its
   pane open via :target while the script had put .is-on somewhere else, and
   two sections rendered stacked on top of each other. Two mechanisms deciding
   the same thing is one too many; this hands it to the script the moment the
   script exists. */
.pdPane { display: none; }
.pdPane.is-on, .pdPane:target { display: grid; gap: var(--s-4); }
.js-pd .pdPane:not(.is-on) { display: none; }

/* ── cards + forms ───────────────────────────────────────────────────── */
.pdCard {
  padding: var(--s-6); border-radius: var(--radius-lg);
  border: 1px solid var(--cmx-hair); background: var(--surface-1);
}
.pdCard h2 {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
  color: var(--text-hi); margin: 0 0 var(--s-2);
}
.pdCard__note { margin: 0 0 var(--s-5); font-size: var(--fs-sm); color: var(--text-lo);
  line-height: var(--lh-body); max-width: 62ch; }
.pdCard__note b { color: var(--text-mid); }

.pdForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pdForm--otp { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
.pdForm__foot { grid-column: 1 / -1; display: flex; gap: var(--s-3); flex-wrap: wrap; }

.pdField { display: grid; gap: .35rem; min-width: 0; }
.pdField > span { font-size: var(--fs-xs); color: var(--text-lo); font-weight: 600; }
.pdField input, .pdField textarea {
  width: 100%; padding: .75rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--cmx-hair); background: var(--surface-0); color: var(--text-hi);
  font: inherit; font-size: var(--fs-sm); outline: none;
  transition: border-color var(--dur) var(--ease-out);
}
.pdField textarea { resize: vertical; line-height: var(--lh-body); }
.pdField input:focus, .pdField textarea:focus { border-color: var(--y-yellow); }
.pdField--ro input { background: transparent; color: var(--text-lo); cursor: not-allowed; }
.pdErr { font-style: normal; font-size: var(--fs-xs); color: var(--y-red); }

/* Availability, as you type. Never hard-blocks the submit — the server
   re-checks at request AND verify time, and a client that disagrees loses. */
.pdCheck { font-style: normal; font-size: var(--fs-xs); min-height: 1em; color: var(--text-lo); }
.pdCheck.is-free    { color: var(--y-green); }
.pdCheck.is-taken,
.pdCheck.is-invalid,
.pdCheck.is-locked  { color: var(--y-red); }
.pdCheck.is-same    { color: var(--text-lo); }
.pdCheck.is-busy    { color: var(--text-lo); opacity: .7; }
.cmxBtn.is-dim { opacity: .55; }

.pdCurrent { margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--text-lo); }
.pdCurrent b { color: var(--text-mid); font-family: var(--font-mono); }
.pdOk { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--y-green); }
.pdLocked {
  margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); border: 1px dashed rgb(240 198 74 / .35);
  font-size: var(--fs-sm); color: var(--text-mid);
}
.pdLocked b { color: var(--accent-ink); }

/* The two email stages, drawn. A flow with an invisible halfway point is one
   people abandon at the halfway point. */
.pdSteps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3); list-style: none; margin: 0 0 var(--s-5); padding: 0;
  counter-reset: pdstep;
}
.pdSteps li {
  counter-increment: pdstep;
  padding: var(--s-3) var(--s-4) var(--s-3) 2.6rem; position: relative;
  border-radius: var(--radius); border: 1px solid var(--cmx-hair);
  font-size: var(--fs-xs); color: var(--text-lo); line-height: 1.5;
}
.pdSteps li::before {
  content: counter(pdstep);
  position: absolute; left: .75rem; top: .8rem;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); color: var(--text-lo);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
}
.pdSteps li i { font-style: normal; color: var(--text-mid); font-family: var(--font-mono); font-size: .6rem; }
.pdSteps li.is-on { border-color: rgb(240 198 74 / .45); background: rgb(240 198 74 / .06); }
.pdSteps li.is-on::before { background: var(--y-yellow); color: var(--y-black); }
.pdSteps li.is-done::before { content: '✓'; background: var(--y-green); color: var(--y-white); }

/* ── choices ─────────────────────────────────────────────────────────── */
.pdChoice { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pdChoice legend {
  padding: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-lo); text-transform: uppercase; letter-spacing: .08em;
}
.pdOpt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--cmx-hair); background: var(--cmx-pane);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.pdOpt:hover { background: var(--cmx-pane2); }
.pdOpt input { margin-top: .2rem; accent-color: var(--y-yellow); width: 1rem; height: 1rem; }
.pdOpt:has(input:checked) { border-color: rgb(240 198 74 / .55); background: rgb(240 198 74 / .07); }
.pdOpt b { display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--text-hi); }
.pdOpt i { display: block; margin-top: .25rem; font-style: normal;
  font-size: var(--fs-xs); color: var(--text-lo); line-height: var(--lh-body); }
.pdOpt i b { display: inline; color: var(--text-mid); font-size: inherit; }
.pdOpt__tag {
  display: inline-block; margin: 0; padding: .1rem .4rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-lo);
  font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}

/* ── switch ──────────────────────────────────────────────────────────── */
.pdSwitch { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.pdSwitch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdSwitch__track {
  width: 2.6rem; height: 1.5rem; border-radius: var(--radius-pill); flex: none;
  background: var(--surface-2); border: 1px solid var(--cmx-hair); position: relative;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pdSwitch__track i {
  position: absolute; top: .15rem; left: .15rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--text-lo);
  transition: translate var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out);
}
.pdSwitch input:checked + .pdSwitch__track { background: rgb(240 198 74 / .3); border-color: var(--y-yellow); }
.pdSwitch input:checked + .pdSwitch__track i { translate: 1.1rem 0; background: var(--y-yellow); }
.pdSwitch input:focus-visible + .pdSwitch__track { outline: 2px solid var(--y-yellow); outline-offset: 2px; }
.pdSwitch__txt { font-size: var(--fs-sm); color: var(--text-hi); }

.pdPeople { display: grid; gap: var(--s-2); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .pdHead__row { grid-template-columns: auto minmax(0, 1fr); }
  .pdHead__act { grid-column: 1 / -1; width: 100%; padding-top: 0;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pdStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdForm { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  .pdWrap { padding: var(--s-5) var(--s-3) var(--s-16); }
  .pdHead__row { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .pdHead__id { padding-top: 0; }
  .pdHead__at, .pdHead__meta { justify-content: center; }
  .pdHead__act { grid-auto-flow: row; }
  .pdCard { padding: var(--s-4); }
  .pdSteps { grid-template-columns: minmax(0, 1fr); }
  .pdTab { padding: .5rem .75rem; font-size: var(--fs-xs); }
  /* 16px — below it iOS zooms the page on focus. */
  .pdField input, .pdField textarea { font-size: 1rem; }
}

/* On the narrowest phones the four tabs do not fit one row, and a horizontally
   scrolling tab strip hides half of them behind a gesture nobody performs — the
   Community tab, which is the one this page exists for, was the one off-screen.
   Two rows of two, all four visible, no scrolling. */
@media (max-width: 26rem) {
  .pdTabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem;
    border-radius: var(--radius); overflow: visible; }
  .pdTab { border-radius: var(--radius); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS DIALOG
   A rail on the left, one section at a time on the right. Big enough to hold a
   form without the form feeling squeezed — a settings modal that is too small
   is why settings end up on their own page.
   ══════════════════════════════════════════════════════════════════════════ */
.stModal {
  position: fixed; inset: 0; z-index: 420;
  display: grid; place-items: center; padding: clamp(.5rem, 3vw, 2rem);
  --cmx-hair:  rgb(255 255 255 / .09);
  --cmx-pane:  rgb(255 255 255 / .04);
  --cmx-pane2: rgb(255 255 255 / .07);
  animation: cmxFadeIn .2s var(--ease-out);
}
.stModal[hidden] { display: none; }
.stModal__veil {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: rgb(3 3 5 / .8); backdrop-filter: blur(10px);
}
.stModal__box {
  position: relative; z-index: 1;
  width: min(62rem, 100%); height: min(46rem, 92dvh);
  display: grid;
  /* The COLUMN is declared, not just the rows. Rows alone leave the implicit
     column at max-content and the widest form stretches the dialog past the
     viewport — the same trap the flashcard popup and the chat shell both hit. */
  grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "rail body";
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--cmx-hair); background: var(--surface-1);
  box-shadow: 0 50px 130px -40px rgb(0 0 0 / .95);
  animation: cmxPeekIn .26s var(--ease-out);
}
.stModal__top {
  grid-area: top; display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--cmx-hair);
  background: var(--cmx-pane);
}
.stModal__top h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 500; color: var(--text-hi); }

.stRail {
  grid-area: rail; display: flex; flex-direction: column; gap: .2rem;
  padding: var(--s-3); border-right: 1px solid var(--cmx-hair);
  background: var(--cmx-pane); overflow-y: auto; min-height: 0;
}
.stRail__b {
  display: flex; align-items: center; gap: var(--s-3);
  padding: .65rem .8rem; border: 0; border-radius: var(--radius);
  background: none; cursor: pointer; font: inherit; text-align: left;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-lo);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.stRail__i { font-size: .95rem; }
.stRail__b:hover { background: var(--cmx-pane2); color: var(--text-hi); }
.stRail__b.is-on { background: var(--surface-1); color: var(--text-hi);
  box-shadow: inset 3px 0 0 var(--y-yellow); }
.stRail__b .pdN { margin-left: auto; }

.stModal__body { grid-area: body; overflow-y: auto; min-height: 0; padding: var(--s-5); }
/* Inside the dialog a card is already on a panel — a second border around it
   is a box in a box. */
.stModal__body .pdCard { border: 0; background: none; padding: 0 0 var(--s-6); }
.stModal__body .pdCard + .pdCard { border-top: 1px solid var(--cmx-hair); padding-top: var(--s-6); }
.stModal__body .pdPane.is-on { display: grid; gap: 0; }

.pdCard--flag {
  margin: var(--s-4) 0 0; border-color: rgb(240 198 74 / .4);
  background: linear-gradient(160deg, rgb(240 198 74 / .08), transparent 70%), var(--surface-1);
}
.pdIco { width: 1rem; height: 1rem; }

@media (max-width: 52rem) {
  /* The rail becomes a scrolling strip across the top. A 15rem sidebar on a
     phone leaves the forms about 180px wide. */
  .stModal { padding: 0; }
  .stModal__box {
    width: 100%; height: 100dvh; border-radius: 0; border: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top" "rail" "body";
  }
  /* A GRID, not a horizontal scroller. Scrolling put Community — the section
     this dialog mostly exists for — off the right edge behind a gesture nobody
     performs. Two rows of two, all four reachable without discovering
     anything. Same fix as the dashboard tab strip, same reason. */
  .stRail {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem;
    overflow: visible; border-right: 0; border-bottom: 1px solid var(--cmx-hair);
  }
  .stRail__b {
    min-width: 0; box-shadow: none; padding: .55rem .6rem; font-size: var(--fs-xs);
    /* A long label truncates rather than pushing its own row wider. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .stRail__b.is-on { box-shadow: inset 0 -2px 0 var(--y-yellow); }
  .stModal__body { padding: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .stModal, .stModal__box { animation: none; }
}

/* A locked field says so. A greyed-out box with no label reads as broken, and
   people retype into it until they conclude the page does not work. */
.pdLockTag {
  font-style: normal; margin-left: .4rem; padding: .05rem .35rem;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-lo);
  font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLBARS
   =========================================================================
   The bright slab in the settings dialog was the raw macOS bar. community.css
   styles scrollbars, but scopes them to `.page-cmx, .page-cmp` — and this page
   sets neither body class, so none of it applied. That is the SECOND bug from
   the same cause on this page (the card borders were the first): styling that
   hangs off a class the page does not set is styling that silently is not
   there. These rules are attached to the elements that actually scroll.

   Both syntaxes, deliberately. `scrollbar-width`/`scrollbar-color` is the
   standard and the only thing Firefox honours; ::-webkit-scrollbar is
   non-standard but is what Chrome and Safari use, and it is the only one of
   the two that can do a gradient, a hover state, or an inset thumb.
   ══════════════════════════════════════════════════════════════════════════ */
.pdWrap, .stModal, .stModal__body, .stRail, .pdPane {
  scrollbar-width: thin;
  scrollbar-color: rgb(240 198 74 / .5) transparent;
}

.stModal__body::-webkit-scrollbar,
.stRail::-webkit-scrollbar,
.pdPane::-webkit-scrollbar,
.pdWrap ::-webkit-scrollbar { width: 10px; height: 10px; }

/* No track. A visible channel behind the thumb is what makes a scrollbar read
   as a piece of chrome bolted onto the design rather than part of it. */
.stModal__body::-webkit-scrollbar-track,
.stRail::-webkit-scrollbar-track,
.pdPane::-webkit-scrollbar-track,
.pdWrap ::-webkit-scrollbar-track { background: transparent; }

/* The thumb is a PILL, not a bar. The trick is the transparent border plus
   background-clip: padding-box — it paints a 6px thumb inside a 10px gutter,
   so the pill floats with air around it instead of butting against the edge.
   Sizing the gutter down instead would give a 6px hit target, which is
   miserable to grab. */
.stModal__body::-webkit-scrollbar-thumb,
.stRail::-webkit-scrollbar-thumb,
.pdPane::-webkit-scrollbar-thumb,
.pdWrap ::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: rgb(240 198 74 / .38);
  transition: background-color var(--dur) var(--ease-out);
}
.stModal__body::-webkit-scrollbar-thumb:hover,
.stRail::-webkit-scrollbar-thumb:hover,
.pdPane::-webkit-scrollbar-thumb:hover,
.pdWrap ::-webkit-scrollbar-thumb:hover {
  background-color: rgb(240 198 74 / .8);
  border-width: 1px;          /* fattens on hover — easier to grab mid-drag */
}
.stModal__body::-webkit-scrollbar-thumb:active,
.pdPane::-webkit-scrollbar-thumb:active { background-color: var(--y-yellow); }

.stModal__body::-webkit-scrollbar-corner,
.pdWrap ::-webkit-scrollbar-corner { background: transparent; }

/* The dialog reserves the gutter whether or not it is scrolling, so switching
   from a short section to a long one does not jog the content sideways. */
.stModal__body { scrollbar-gutter: stable; }

/* A setting fixed by law reads differently from one merely turned off. The
   explanation sits with the control rather than in a help page nobody opens. */
.pdField__lock {
  margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); border: 1px dashed rgb(240 198 74 / .35);
  background: rgb(240 198 74 / .05);
  font-size: var(--fs-xs); color: var(--text-lo); line-height: var(--lh-body);
}
fieldset[disabled] .pdOpt { opacity: .45; cursor: not-allowed; }