/* ==========================================================================
   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; }

/* Phone-only parts of the settings list, hidden on the desktop rail. */
.stMe, .stModal__back, .stRail__tx small, .stRail__chev { display: none; }
.stRail__tx { display: contents; }
.stRail__tx b { font-weight: inherit; }

@media (max-width: 52rem) {
  /* PHONE: a navigation stack, not a squeezed dialog (2026-10-25).
     HOME  = who you are + one row per section + sign out, like any phone's
             Settings app. The rail was a 2×3 grid of tabs over a long form,
             and the form you came for started half a screen down.
     PANE  = the chosen section alone, full-screen, back arrow top-left.
     The whole box scrolls (header sticky), so a long form is one scroll. */
  .stModal { padding: 0; place-items: stretch; }
  .stModal__box {
    width: 100%; height: 100dvh; border-radius: 0; border: 0;
    display: block; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-0, #0b0b0f);
  }
  .stModal__top {
    position: sticky; top: 0; z-index: 3; gap: .5rem; justify-content: flex-start;
    padding: .7rem var(--s-4); min-height: 3.5rem;
    background: rgb(11 11 15 / .86); backdrop-filter: blur(14px) saturate(1.4);
  }
  .stModal__top h2 { flex: 1; font-size: 1.35rem; font-weight: 600; }
  .stModal__top .cmxIcon { margin-left: auto; }
  .stModal__back {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: -.5rem;
    border: 0; border-radius: 50%; background: none; color: var(--text-hi); cursor: pointer;
  }
  .stModal__back svg { width: 1.45rem; height: 1.45rem; }
  .stModal__back:active { background: var(--cmx-pane2); }
  .stModal.is-home .stModal__back { display: none; }

  /* The profile card */
  .stMe {
    display: flex; align-items: center; gap: .9rem; width: calc(100% - 2 * var(--s-4));
    margin: var(--s-4) var(--s-4) 0; padding: .9rem 1rem; text-align: left; font: inherit;
    border: 1px solid var(--cmx-hair); border-radius: 1.1rem; cursor: pointer;
    background: linear-gradient(135deg, rgb(240 198 74 / .12), rgb(232 84 74 / .06) 60%, transparent), var(--surface-1);
    -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) var(--ease-out);
  }
  .stMe:active { transform: scale(.98); }
  .stMe__pic { flex: none; display: grid; padding: 2px; border-radius: 50%;
    background: conic-gradient(from 210deg, var(--y-yellow), var(--y-red), var(--y-yellow)); }
  .stMe__pic .ycAv { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid var(--surface-1); }
  .stMe__tx { display: grid; gap: .15rem; min-width: 0; flex: 1; }
  .stMe__tx b { color: var(--text-hi); font-size: 1.1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stMe__tx small { color: var(--text-lo); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The grouped list */
  .stRail {
    display: block; margin: var(--s-4); padding: 0; overflow: hidden;
    border: 1px solid var(--cmx-hair); border-radius: 1.1rem; background: var(--surface-1);
  }
  .stRail__b {
    display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 3.9rem;
    padding: .7rem 1rem; border-radius: 0; box-shadow: none; color: var(--text-hi);
    font-size: var(--fs-body, 1rem); -webkit-tap-highlight-color: transparent;
  }
  .stRail__b { position: relative; }
  .stRail__b + .stRail__b::before {          /* iOS-style hairline, inset past the icon */
    content: ""; position: absolute; top: 0; left: 3.95rem; right: 0; height: 1px; background: var(--cmx-hair);
  }
  .stRail__b.is-on { background: none; box-shadow: none; }
  .stRail__b:active { background: var(--cmx-pane2); }
  .stRail__i {
    flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    border-radius: .6rem; font-size: 1.05rem; background: rgb(240 198 74 / .16);
  }
  .stRail__i--security      { background: rgb(96 165 250 / .18); }
  .stRail__i--community     { background: rgb(62 207 142 / .18); }
  .stRail__i--notifications { background: rgb(232 84 74 / .18); }
  .stRail__i--people        { background: rgb(167 139 250 / .2); }
  .stRail__tx { display: grid; gap: .1rem; flex: 1; min-width: 0; }
  .stRail__tx b { font-weight: 600; }
  .stRail__tx small { display: block; color: var(--text-lo); font-size: var(--fs-xs); font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stRail__chev { display: block; flex: none; width: 1.1rem; height: 1.1rem; color: var(--text-lo); }
  .stRail__b .pdN { margin-left: 0; }

  .stModal__body { padding: var(--s-2) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom)); overflow: visible; }

  /* HOME shows the list and the sign-out card; no section. */
  .stModal.is-home .pdPane { display: none !important; }
  .stModal.is-home .stOut { margin-top: 0; }
  /* PANE hides the list, the card and sign-out, and slides the section in. */
  .stModal:not(.is-home) .stMe,
  .stModal:not(.is-home) .stRail,
  .stModal:not(.is-home) .stOut { display: none; }
  .stModal:not(.is-home) .stModal__body { animation: stPush .28s cubic-bezier(.2,.9,.3,1); }
  .stModal.is-home.is-back .stRail { animation: stPop .28s cubic-bezier(.2,.9,.3,1); }

  /* Cards in a section become grouped panels too — one look across the stack. */
  .stModal__body .pdCard,
  .stModal__body .pdCard + .pdCard {
    margin-top: var(--s-4); padding: var(--s-5) var(--s-4);
    border: 1px solid var(--cmx-hair); border-radius: 1.1rem; background: var(--surface-1);
  }
  .stModal__body .pdCard h2 { font-size: 1.15rem; }
  .stOut { border-radius: 1.1rem; }
}
@keyframes stPush { from { transform: translateX(28%); opacity: 0; } }
@keyframes stPop  { from { transform: translateX(-12%); opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .stModal, .stModal__box, .stModal__body, .stRail { animation: none !important; }
}

/* 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; }

/* ── Profile photo: camera badge, menu and circular crop (photo-edit.js) ── */
.cmpHead__picWrap { position: relative; line-height: 0; justify-self: start; }
.cmpHead__picWrap .cmpHead__zoom { display: none; }   /* the camera takes that corner */
.cmpHead__picWrap > .cmpHead__pic { display: block; }
.cmpHead__cam {
  position: absolute; right: -.1rem; bottom: .05rem; z-index: 2;
  width: 2.35rem; height: 2.35rem; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--y-yellow); color: var(--y-black, #111);
  box-shadow: 0 0 0 3px var(--surface-1), 0 6px 16px -6px rgb(0 0 0 / .7);
  transition: scale .18s var(--ease-spring, ease), background-color .18s;
}
.cmpHead__cam svg { width: 1.15rem; height: 1.15rem; }
.cmpHead__cam:hover, .cmpHead__cam[aria-expanded="true"] { scale: 1.08; background: #ffd966; }
.cmpHead__cam:focus-visible { outline: 2px solid var(--y-yellow); outline-offset: 3px; }
@media (max-width: 40rem) { .cmpHead__picWrap { justify-self: center; } }

.peMenu {
  position: fixed; z-index: 900; width: 15.5rem; padding: .4rem;
  border-radius: var(--radius); border: 1px solid var(--cmx-hair); background: var(--surface-2);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .9); animation: cmxRise .16s var(--ease-out);
}
.peMenu__h { margin: .2rem .6rem .35rem; max-width: none; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-lo); }
.peMenu__it { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .5rem .7rem;
  border: 0; border-radius: var(--radius-sm, 8px); background: none; color: var(--text-hi);
  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.peMenu__it:hover, .peMenu__it:focus-visible { background: var(--surface-1); outline: none; }
.peMenu__it.is-danger { color: var(--y-red-300, #f08a80); }
.peMenu__i { width: 1.3rem; text-align: center; }
.peMenu__cancel { width: 100%; min-height: 2.4rem; margin-top: .2rem; border: 0; border-top: 1px solid var(--cmx-hair);
  background: none; color: var(--text-lo); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
@media (max-width: 46rem) {
  .peMenu { left: .5rem !important; right: .5rem; top: auto !important; bottom: calc(.5rem + env(safe-area-inset-bottom));
    width: auto; padding: .6rem; border-radius: 1.1rem;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .5); animation: rxwUp .24s cubic-bezier(.2,.9,.3,1); }
  .peMenu__it { min-height: 3.1rem; font-size: var(--fs-body, 1rem); }
}

.peCrop .rxw__box { width: min(26rem, 100%); max-height: calc(100dvh - 1rem); overflow-y: auto; }
.peCrop__zoom, .peCrop__hint, .peCrop .fwd__foot { flex: none; }
.peCrop__stage { position: relative; flex: none; width: min(20rem, calc(100% - 2.5rem)); aspect-ratio: 1; margin: var(--s-3) auto 0;
  border-radius: var(--radius); overflow: hidden; cursor: grab; touch-action: none; user-select: none;
  background: repeating-conic-gradient(#2a2a30 0 25%, #1f1f24 0 50%) 0 0 / 20px 20px; }
.peCrop__stage:active { cursor: grabbing; }
.peCrop__stage:focus-visible { outline: 2px solid var(--y-yellow); outline-offset: 3px; }
.peCrop__cv { width: 100%; height: 100%; display: block; }
/* Everything outside the circle is dimmed, exactly like the round picture. */
.peCrop__ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / .6), inset 0 0 0 2px rgb(255 255 255 / .85); }
.peCrop__zoom { display: flex; align-items: center; gap: .7rem; width: min(20rem, calc(100% - 2.5rem)); margin: var(--s-4) auto 0;
  color: var(--text-lo); font-size: 1rem; }
.peCrop__zoom input { flex: 1; min-width: 0; accent-color: var(--y-yellow); }
.peCrop__hint { margin: .6rem auto var(--s-3); width: min(20rem, calc(100% - 2.5rem)); max-width: none; text-align: center;
  font-size: .72rem; line-height: 1.45; color: var(--text-lo); }
.peCrop .fwd__foot { justify-content: flex-end; }
.peCrop .fwd__foot .cmxBtn { min-width: 6rem; justify-content: center; }

.peToast { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 950; translate: -50% 1rem;
  padding: .6rem 1rem; border-radius: 999px; background: var(--surface-2); color: var(--text-hi); border: 1px solid var(--cmx-hair);
  font-size: var(--fs-sm); opacity: 0; transition: opacity .2s, translate .2s; pointer-events: none; }
.peToast.is-on { opacity: 1; translate: -50% 0; }

/* ── Finish setting up (Google sign-ups with missing details) ───────────── */
html:has(.pdDone), html:has(.pdDone) body { overflow: hidden; }
.pdDone { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: var(--s-4);
  background: rgb(5 5 7 / .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: pdDoneFade .25s ease both; }
@keyframes pdDoneFade { from { opacity: 0; } to { opacity: 1; } }
.pdDone__box { width: min(40rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(var(--s-5), 3vw, var(--s-8)); border-radius: 1.25rem; border: 1px solid rgb(240 198 74 / .3);
  background: radial-gradient(120% 60% at 100% 0%, rgb(240 198 74 / .12), transparent 55%), var(--surface-1, #151518);
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / .95); animation: pdDoneIn .38s cubic-bezier(.2,.9,.3,1.1) both; }
.pdDone__head { display: flex; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-5); }
.pdDone__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; font-size: 1.4rem;
  background: linear-gradient(145deg, rgb(240 198 74 / .25), rgb(240 198 74 / .05)); border: 1px solid rgb(240 198 74 / .35); }
.pdDone__head h2 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem);
  letter-spacing: -.02em; color: var(--text-hi); }
.pdDone__head p { margin: 0; max-width: none; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-mid); }
.pdDone__head b { color: var(--text-hi); }
.pdDone__form { display: grid; gap: var(--s-2); }
.pdDone__form .form__grid { gap: var(--s-4); }
.pdDone__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); }
.pdDone__out { font-size: var(--fs-sm); color: var(--text-lo); }
.pdDone__out:hover { color: var(--text-hi); }
@keyframes pdDoneIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 46rem) {
  .pdDone { place-items: end stretch; padding: 0; }
  .pdDone__box { width: 100%; max-height: 94dvh; border-radius: 1.4rem 1.4rem 0 0; border-bottom: 0;
    padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); }
  .pdDone__foot { flex-direction: column-reverse; align-items: stretch; }
  .pdDone__foot .btn { justify-content: center; }
  .pdDone__out { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .pdDone, .pdDone__box { animation: none; } }

/* ── Settings → Notifications ─────────────────────────────────────────── */
.pnDev {
  display: flex; align-items: center; gap: .85rem; margin-top: var(--s-4);
  padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--cmx-hair);
  background: var(--cmx-pane);
}
.pnDev__ico { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: 12px; background: var(--surface-2); color: var(--text-lo); }
.pnDev__ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pnDev.is-on { border-color: rgb(62 158 95 / .5); background: rgb(62 158 95 / .08); }
.pnDev.is-on .pnDev__ico { background: rgb(62 158 95 / .2); color: var(--y-green); }
.pnDev.is-blocked { border-color: rgb(232 84 74 / .45); }
.pnDev.is-blocked .pnDev__ico { color: var(--y-red); }
.pnDev__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pnDev__txt b { font-size: var(--fs-sm); color: var(--text-hi); }
.pnDev__txt i { font-style: normal; font-size: var(--fs-xs); color: var(--text-lo); }
.pnNote { margin: .6rem 0 0; padding: .7rem .85rem; border-radius: var(--radius); font-size: var(--fs-xs);
  line-height: 1.55; color: var(--text-mid); background: var(--cmx-pane); border: 1px dashed var(--cmx-hair); }
.pnNote[hidden] { display: none; }
.pnNote.is-flash { border-color: var(--y-yellow); }
.pnTest { margin-top: .7rem; }
.pnTest[hidden] { display: none; }
.pnList { display: grid; gap: .2rem; margin-top: var(--s-3); }
.pnRow {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .5rem; border-radius: var(--radius);
  cursor: pointer; transition: background-color var(--dur) var(--ease-out);
}
.pnRow:hover { background: var(--cmx-pane); }
.pnRow__ico { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-2); font-size: 1.05rem; }
.pnRow__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pnRow__txt b { font-size: var(--fs-sm); color: var(--text-hi); font-weight: 600; }
.pnRow__txt i { font-style: normal; font-size: var(--fs-xs); color: var(--text-lo); line-height: 1.45; }
.pnRow .pdSwitch { flex: none; }
.pnSaved { margin-left: .5rem; font-size: var(--fs-xs); font-weight: 500; color: var(--y-green);
  opacity: 0; transition: opacity .3s; }
.pnSaved.is-on { opacity: 1; }
@media (max-width: 46rem) {
  .pnDev { flex-wrap: wrap; }
  .pnDev [data-push-device] { width: 100%; justify-content: center; min-height: 2.75rem; }
}
.pnResult { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: var(--radius); font-size: var(--fs-xs); line-height: 1.5; }
.pnResult[hidden] { display: none; }
.pnResult.is-ok { background: rgb(62 158 95 / .12); color: var(--y-green); border: 1px solid rgb(62 158 95 / .35); }
.pnResult.is-bad { background: rgb(232 84 74 / .1); color: #ffb4ad; border: 1px solid rgb(232 84 74 / .35); }
.pnDevs { margin-top: var(--s-4); }
.pnDevs[hidden] { display: none; }
.pnDevs__h { margin: 0 0 .4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-lo); letter-spacing: .04em; text-transform: uppercase; }
.pnDevs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pnDevs__row { display: grid; gap: 2px; padding: .6rem .8rem; border-radius: var(--radius); border: 1px solid var(--cmx-hair);
  border-left-width: 3px; background: var(--cmx-pane); }
.pnDevs__row b { font-size: var(--fs-sm); color: var(--text-hi); }
.pnDevs__row i { font-style: normal; font-size: var(--fs-xs); color: var(--text-lo); overflow-wrap: anywhere; }
.pnDevs__row.is-ok { border-left-color: var(--y-green); }
.pnDevs__row.is-bad { border-left-color: var(--y-red); }
.pnDevs__row.is-new { border-left-color: var(--y-yellow); }
/* Settings → Connections: Message link + Disconnect on each person */
.pdConn { display: flex; align-items: center; gap: .5rem; transition: opacity .25s, transform .25s; }
.pdConn .dmRow { flex: 1; min-width: 0; }
.pdConn__x { flex: none; }
.pdConn__x:hover { color: var(--y-red); border-color: rgb(232 84 74 / .5); }
.pdConn.is-gone { opacity: 0; transform: translateX(12px); }

/* ── Sign out, at the end of Settings (2026-10-23) ─────────────────────── */
.stOut {
  margin: var(--s-8, 2rem) 0 var(--s-4, 1rem); padding: var(--s-5, 1.25rem);
  border-radius: 14px; border: 1px solid rgb(232 84 74 / .28);
  background: rgb(232 84 74 / .06);
}
.stOut__who { margin: 0 0 .25rem; color: var(--text-mid); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.stOut__who b { color: var(--text-hi); }
.stOut__note { margin: 0 0 var(--s-4, 1rem); color: var(--text-lo); font-size: var(--fs-xs, .78rem); }
.stOut__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.stOut__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--y-red); color: #fff; border-color: transparent;
}
.stOut__btn:hover { background: var(--y-red-700, #c43c32); color: #fff; }
.stOut__btn svg { width: 1.05rem; height: 1.05rem; }
.stOut__all {
  border: 0; background: none; padding: .4rem 0; cursor: pointer;
  color: var(--text-lo); font: inherit; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px;
}
.stOut__all:hover { color: var(--y-red); }
@media (max-width: 30rem) { .stOut__btn { width: 100%; justify-content: center; } }

/* ══ YOUR SPACE — the dashboard shortcuts (2026-10-23) ═════════════════════
   A "Continue learning" banner when there is a course, then a grid of tiles:
   4 across on a desktop, 2 on a phone. Each tile carries a live count. */
.ys { margin: var(--s-6, 1.5rem) 0 var(--s-8, 2rem); }
.ys__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--s-4, 1rem); flex-wrap: wrap; }
.ys__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); letter-spacing: -.01em; color: var(--text-hi); }
.ys__head p { margin: 0; color: var(--text-lo); font-size: var(--fs-sm); }

.ysHero {
  position: relative; display: grid; gap: .35rem; margin-bottom: var(--s-4, 1rem);
  padding: 1.1rem 1.25rem; border-radius: 18px; text-decoration: none; overflow: hidden;
  border: 1px solid rgb(240 198 74 / .35);
  background: radial-gradient(120% 140% at 0% 0%, rgb(240 198 74 / .22), transparent 60%), var(--surface-1);
  transition: transform .2s ease, border-color .2s ease;
}
.ysHero:hover { transform: translateY(-2px); border-color: var(--y-yellow); }
.ysHero__k { font-size: var(--fs-xs, .75rem); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.ysHero__t { color: var(--text-hi); font-size: var(--fs-body-lg, 1.1rem); padding-right: 6.5rem; }
.ysHero__bar { height: 6px; border-radius: 6px; background: rgb(255 255 255 / .08); overflow: hidden; margin-top: .3rem; }
.ysHero__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--y-yellow), var(--y-red)); }
.ysHero__m { color: var(--text-lo); font-size: var(--fs-xs, .75rem); }
.ysHero__go {
  position: absolute; right: 1.1rem; top: 1.1rem; padding: .45rem .9rem; border-radius: 999px;
  background: var(--y-yellow); color: var(--y-black); font-size: var(--fs-sm); font-weight: 700;
}

.ys__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ysTile {
  position: relative; display: grid; gap: .75rem; align-content: start;
  min-height: 8.5rem; padding: 1rem; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--surface-line); background: var(--surface-1);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ysTile:hover { transform: translateY(-3px); border-color: rgb(240 198 74 / .55); background: var(--surface-2); }
.ysTile:focus-visible { outline: 2px solid var(--y-yellow); outline-offset: 2px; }
.ysTile__ic {
  width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
  background: rgb(240 198 74 / .14); color: var(--y-yellow);
  transition: background .2s ease, color .2s ease;
}
.ysTile:hover .ysTile__ic { background: var(--y-yellow); color: var(--y-black); }
.ysTile__ic svg { width: 1.3rem; height: 1.3rem; }
.ysTile__t { display: grid; gap: 2px; }
.ysTile__t b { color: var(--text-hi); font-size: var(--fs-body, 1rem); font-weight: 600; }
.ysTile__t span { color: var(--text-lo); font-size: var(--fs-xs, .78rem); line-height: 1.4; }
.ysTile__n {
  position: absolute; top: .85rem; right: .85rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--y-red); color: #fff; font-size: .72rem; font-weight: 700;
}
.ysTile__go { position: absolute; right: 1rem; bottom: .9rem; color: var(--text-lo); transition: transform .2s ease, color .2s ease; }
.ysTile:hover .ysTile__go { color: var(--y-yellow); transform: translateX(3px); }

.theme-light .ysTile, .theme-light .ysHero { box-shadow: 0 1px 2px rgb(28 28 28 / .05), 0 10px 24px -14px rgb(28 28 28 / .18); }

@media (max-width: 52rem) { .ys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
@media (max-width: 30rem) {
  .ysTile { min-height: 7.6rem; padding: .85rem; }
  .ysTile__go { display: none; }
  .ysHero__t { padding-right: 0; }
  .ysHero__go { position: static; justify-self: start; margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .ysTile, .ysHero { transition: none; } }

/* Delete account — a quiet link under Sign out that unfolds (profile/index.php). */
.stDel { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--surface-line, rgb(255 255 255 / .1)); }
.stDel summary { display: inline-block; cursor: pointer; list-style: none; font-size: var(--fs-xs); color: var(--text-lo); text-decoration: underline; text-underline-offset: 3px; }
.stDel summary::-webkit-details-marker { display: none; }
.stDel summary:hover, .stDel[open] summary { color: #e8544a; }
.stDel__body { margin-top: .75rem; display: grid; gap: .6rem; }
.stDel__body p { margin: 0; max-width: 60ch; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-mid); }
.stDel__body b { color: var(--text-hi); }
.stDel__err { color: #e8544a !important; font-weight: 600; }
.stDel__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.stDel__row input { flex: 1 1 10rem; min-width: 0; padding: .55rem .8rem; border-radius: 10px; font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--surface-line, rgb(255 255 255 / .14)); background: transparent; color: var(--text-hi); letter-spacing: .08em; }
.stDel__go { padding: .55rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid #e8544a; background: transparent; color: #e8544a; }
.stDel__go:hover { background: #e8544a; color: #fff; }