/* ═══════════════════════════════════════════════════════════════
   MY STATS — dashboard styling
   Loads after shared/css/pages.css, which holds the rest of the My Stats layout
   (hero, profile, dog picker); this file owns the stats section.
   Tokens come from shared/css/core.css.
   ═══════════════════════════════════════════════════════════════ */

/* Per-game accents, borrowed from the homepage's plate accents so a card is
   identifiable before its title is read. */
.ms-stats {
  --pawdle-accent:     #C98526;
  --connect-accent:    #BF4E1C;
  --pawpaths-accent:   #5C7647;
}

/* The inner wrapper owns the gutter. shared/css/pages.css also pads the section, and
   the two together left only 302px of card inside a 390px phone. */
.ms-stats { padding-inline: 0 }

.ms-stats .ms-stats-inner {
  max-width: 1440px;
  padding-inline: clamp(18px, 5vw, 72px);
}

.ms-stats .ms-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Cross-game strip ─────────────────────────────────────────
   Four figures: four across on desktop, two by two on smaller screens. */
.ms-stats .ms-crossgame-box {
  margin-top: 30px;
  padding: 24px clamp(18px, 2.4vw, 30px) 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.ms-stats .ms-crossgame-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 18px;
}

.ms-stats .ms-cg-label {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ms-stats .ms-stats-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:18px }
.ms-stats .ms-stats-feedback p { flex:1; min-width:180px; margin:0; color:var(--ink-soft); font-size:.875rem; line-height:1.5 }
.dp-dark .ms-stats .ms-stats-feedback p { color:var(--cream-mute) }
.ms-stats .ms-cg-item { min-width:0 }
.ms-stats .ms-cg-val { overflow-wrap:anywhere }

.ms-stats .ms-cg-val {
  margin-top: 7px;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Game cards ───────────────────────────────────────────────
   Two across on desktop, never four: four narrow columns cannot hold a
   label and a value on one line. */
.ms-stats .ms-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ms-stats .ms-game-box {
  position: relative;
  padding: 0 clamp(18px, 2.4vw, 28px) 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}

/* The accent is the card's identity, so it is the one place colour is spent. */
.ms-stats .ms-game-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--line-firm));
}
.ms-stats .ms-game-box--pawdle     { --accent: var(--pawdle-accent) }
.ms-stats .ms-game-box--connect    { --accent: var(--connect-accent) }
.ms-stats .ms-game-box--pawpaths   { --accent: var(--pawpaths-accent) }
.ms-stats .msg-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted) }
.dp-dark .ms-stats .msg-note { color: var(--cream-mute) }

.ms-stats .ms-game-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.ms-stats .ms-game-name-lbl {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}
.ms-stats a.ms-game-name-lbl:hover { color: var(--accent) }

.ms-stats .ms-game-meta {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Stat rows ────────────────────────────────────────────────
   The value has to outweigh its label: this page exists for the numbers. */
.ms-stats .ms-sec-lbl-inner {
  margin: 18px 0 8px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent, var(--muted));
}

.ms-stats .msg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}

.ms-stats .msg-label {
  font-family: var(--f-sans);
  font-size: .84rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.ms-stats .msg-val {
  font-family: var(--f-sans);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ms-stats .msg-val.hi { color: var(--accent, var(--rust)) }

.ms-stats .msg-divider {
  height: 1px;
  margin: 14px 0 2px;
  background: var(--line);
}

.ms-stats .msg-empty {
  padding: 26px 0 14px;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
}
/* The same loading voice the games use, in the card's own accent. */
.ms-stats .msg-loading {
  padding: 26px 0 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--accent, var(--muted));
}
.ms-stats .msg-empty a {
  color: var(--accent, var(--rust));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Guess distribution ───────────────────────────────────────
   Kept from the old page: the clearest thing on it, and it reports
   solves by guess count, never a win total. */
.ms-stats .ms-dist {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ms-stats .ms-dist-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px;
}

.ms-stats .ms-dist-n,
.ms-stats .ms-dist-count {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ms-stats .ms-dist-count { text-align: right }

.ms-stats .ms-dist-track {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.ms-stats .ms-dist-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, var(--rust));
  min-width: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .ms-stats .ms-dist-fill { transition: width .5s cubic-bezier(.16, .84, .44, 1) }
}

/* ── Responsive ───────────────────────────────────────────────
   Three breakpoints, each fixing a specific measured failure:
   the four-up strip becomes two columns below 1100, the game cards
   stack below 760, and phone cards tighten below 620. */
@media (max-width: 1100px) {
  .ms-stats .ms-crossgame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Two columns hold down to about 760, where a card is still wider than the
   phone card that already works. Below that, one column. */
@media (max-width: 760px) {
  .ms-stats .ms-game-grid { grid-template-columns: minmax(0, 1fr); gap: 16px }
}

/* Four games make a long phone page whatever happens, so the card itself is
   tightened rather than hiding numbers behind a tap. */
@media (max-width: 620px) {
  .ms-stats .ms-crossgame-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 18px }
  .ms-stats .ms-crossgame-box { border-radius: var(--r-md); padding: 18px 16px 20px; margin-top: 24px }
  .ms-stats .ms-game-grid { gap: 14px; margin-top: 16px }
  .ms-stats .ms-game-box { border-radius: var(--r-md); padding: 0 16px 18px }
  .ms-stats .ms-game-hd { padding: 18px 0 12px }
  .ms-stats .ms-game-name-lbl { font-size: 1.25rem }
  .ms-stats .ms-game-meta { font-size: .6rem }
  .ms-stats .ms-sec-lbl-inner { margin: 14px 0 4px }
  .ms-stats .msg-row { padding: 7px 0; gap:10px }
  .ms-stats .msg-label { font-size: .85rem; line-height:1.4 }
  .ms-stats .msg-val { font-size: 1rem }
  .ms-stats .msg-divider { margin: 10px 0 0 }
  .ms-stats .ms-dist { margin-top: 14px; padding-top: 12px; gap: 4px }
  .ms-stats .ms-dist-track { height: 7px }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
.dp-dark .ms-stats .ms-crossgame-box,
.dp-dark .ms-stats .ms-game-box { background: var(--night-2); border-color: var(--night-line) }
.dp-dark .ms-stats .ms-cg-label { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-cg-val { color: var(--cream) }
.dp-dark .ms-stats .ms-game-hd { border-color: var(--night-line) }
.dp-dark .ms-stats .ms-game-name-lbl { color: var(--cream) }
.dp-dark .ms-stats .ms-game-meta { color: var(--cream-mute) }
.dp-dark .ms-stats .msg-label { color: rgba(244,234,214,.78) }
.dp-dark .ms-stats .msg-val { color: var(--cream) }
.dp-dark .ms-stats .msg-divider { background: var(--night-line) }
.dp-dark .ms-stats .msg-empty { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-dist { border-color: var(--night-line) }
.dp-dark .ms-stats .ms-dist-n,
.dp-dark .ms-stats .ms-dist-count { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-dist-track { background: var(--night-line) }

/* Guest portraits are examples, not selectable controls. */
.ms-dog-picker--preview .ms-dog-choice{ cursor:default; transition:none }
.ms-dog-picker--preview .ms-dog-choice:hover{ transform:none }
.ms-dog-picker--preview .ms-dog-choice:hover img{ border-color:var(--line) }
.dp-dark .ms-dog-picker--preview .ms-dog-choice:hover img{ border-color:var(--night-line) }

/* ══════════════════════════════════════════════════════════════════════
   Pass 3 — three clearly separate kinds of figure
   Current weekly competition · Lifetime statistics · Competition history
   (and, for a guest, what this one device has counted).
   ══════════════════════════════════════════════════════════════════════ */
.ms-stats .ms-block{ margin-top:clamp(36px,5vw,56px) }
.ms-stats .ms-block + .ms-block{ padding-top:clamp(28px,4vw,44px); border-top:1px solid var(--line) }
.ms-stats .ms-block-kicker{
  display:block; font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--rust-deep);
}
.ms-stats .ms-block-title{
  margin:6px 0 4px; font-family:var(--f-display); font-weight:600; letter-spacing:-.015em; line-height:1.15;
  font-size:clamp(1.35rem,2.3vw,1.8rem); color:var(--ink);
}
.ms-stats .ms-block-sub{ margin:0 0 4px; max-width:64ch; font-size:.9rem; line-height:1.55; color:var(--ink-soft) }
.ms-stats .ms-block-title + .ms-block-sub{ margin-top:0 }
.ms-stats .ms-block > div:last-child, .ms-stats .ms-block > .ms-week-grid{ margin-top:18px }
.ms-stats .ms-block > .ms-block-sub + .ms-crossgame-box{ margin-top:22px }
.ms-stats--guest .ms-block-sub{ margin-bottom:0 }
.ms-stats--guest > .ms-stats-inner > .ms-block-sub{ margin-top:2px }

/* Standing / record cards: the game's accent is the only colour spent. */
.ms-stats .ms-week-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px }
.ms-stats .ms-week-card{
  position:relative; overflow:hidden; padding:20px clamp(16px,2vw,22px) 18px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
}
.ms-stats .ms-week-card::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--accent,var(--line-firm)) }
.ms-stats .ms-week-card.ms-game-box--pawdle{ --accent:var(--pawdle-accent) }
.ms-stats .ms-week-card.ms-game-box--connect{ --accent:var(--connect-accent) }
.ms-stats .ms-week-card.ms-game-box--pawpaths{ --accent:var(--pawpaths-accent) }
.ms-stats .ms-week-name{ margin:0 0 14px; font-family:var(--f-display); font-weight:600; font-size:1.2rem; letter-spacing:-.012em; color:var(--ink) }
.ms-stats .ms-week-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 }
.ms-stats .ms-week-figs dt{
  margin:0 0 6px; font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.ms-stats .ms-week-figs dd{
  margin:0; font-family:var(--f-display); font-weight:600; font-size:1.55rem; line-height:1.05;
  letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.ms-stats .ms-week-figs--four{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.ms-stats .ms-week-figs dd.hi{ color:var(--accent,var(--rust)) }
.ms-stats .ms-week-figs dd small{ font-family:var(--f-sans); font-size:.72rem; font-weight:500; letter-spacing:0; color:var(--muted) }
.ms-stats .ms-week-figs .ms-medal-dd{ display:flex; align-items:center; gap:7px }
.ms-stats .ms-week-none{ margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-soft) }
/* Card footer: a solid play button when there's no result yet, then a quiet
   link to the board whose arrow is its only ornament. */
.ms-stats .ms-week-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:16px }
.ms-stats .ms-week-play{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border:1px solid var(--accent,var(--rust)); border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--accent,var(--rust)) 12%, transparent); color:var(--ink);
  font-size:.82rem; font-weight:600; text-decoration:none;
  transition:background-color .2s var(--e-out), transform .2s var(--e-out);
}
.ms-stats .ms-week-play:hover{ background:color-mix(in srgb, var(--accent,var(--rust)) 22%, transparent); transform:translateY(-1px) }
.ms-stats .ms-week-link{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:.82rem; font-weight:600; color:var(--ink-soft); text-decoration:none;
  transition:color .2s var(--e-out);
}
.ms-stats .ms-week-link span{ color:var(--accent,var(--rust)); transition:transform .25s var(--e-out) }
.ms-stats .ms-week-link:hover{ color:var(--ink) }
.ms-stats .ms-week-link:hover span{ transform:translateX(3px) }
.ms-stats .ms-week-play:focus-visible, .ms-stats .ms-week-link:focus-visible{ outline:2px solid var(--accent,var(--rust)); outline-offset:3px; border-radius:var(--r-pill) }

/* Medals */
.ms-medal{
  display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%;
  font-family:var(--f-mono); font-size:.68rem; font-weight:600; line-height:1; color:#2B1D0E;
  border:1px solid rgba(43,29,14,.28);
}
.ms-medal--gold{ background:linear-gradient(145deg,#F2D480,#C99A2E) }
.ms-medal--silver{ background:linear-gradient(145deg,#ECE9E2,#A9A59A) }
.ms-medal--bronze{ background:linear-gradient(145deg,#DDA06C,#9C5A2C) }

/* Competition history */
.ms-stats .ms-hist-total{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 40px; padding:20px clamp(16px,2.4vw,28px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
}
.ms-stats .ms-hist-figure, .ms-stats .ms-hist-medal{ display:flex; align-items:baseline; gap:10px }
.ms-stats .ms-hist-medals{ display:flex; gap:clamp(14px,3vw,30px) }
.ms-stats .ms-hist-medal{ flex-direction:column; align-items:center; gap:4px }
.ms-stats .ms-hist-num{ font-family:var(--f-display); font-weight:600; font-size:1.9rem; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink) }
.ms-stats .ms-hist-medal .ms-hist-num{ font-size:1.5rem }
.ms-stats .ms-hist-figure{ flex-direction:column; align-items:flex-start; gap:6px }
.ms-stats .ms-hist-lbl{ font-family:var(--f-mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.ms-stats .ms-hist-total + .ms-week-grid{ margin-top:16px }
.ms-stats .ms-hist-list{ margin-top:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper) }
.ms-stats .ms-hist-list summary{ min-height:48px; padding:0 18px; display:flex; align-items:center; cursor:pointer; font-size:.9rem; font-weight:600; color:var(--ink) }
.ms-stats .ms-hist-list ul{ list-style:none; margin:0; padding:0 18px 8px }
.ms-stats .ms-hist-list li a{
  display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:44px;
  border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-soft);
}
.ms-stats .ms-hist-list li a:hover{ color:var(--rust) }
.ms-stats .ms-hist-place{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-variant-numeric:tabular-nums }

/* Guest: today's Daily 3 and the account-vs-device explanation */
.ms-today-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.ms-today-list li{
  display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); color:var(--ink-soft);
}
.ms-today-list li.is-done{ color:var(--ink); border-color:var(--line-firm) }
.ms-today-mark{ flex:none; width:20px; text-align:center; font-weight:700; color:var(--muted) }
.ms-today-list li.is-done .ms-today-mark{ color:var(--moss) }
.ms-today-name{ font-weight:600; font-size:.95rem }
.ms-today-state{ margin-left:auto; font-size:.74rem; color:var(--muted); text-align:right }
.ms-stats .ms-today-next{ margin-top:16px }
.ms-gp-help{ margin:10px 0 0; font-size:.84rem; line-height:1.55; color:rgba(31,21,12,.72) }
.ms-gp-help--center{ margin-top:18px; text-align:center }
.ms-gp-confirm{ margin-top:14px; padding:14px 16px; border:1px solid var(--rust); border-radius:var(--r-md) }
.ms-gp-confirm p{ margin:0 0 4px; font-size:.88rem; line-height:1.5 }
.ms-account--guest .ms-account-inner{ text-align:left }
.ms-limits{ list-style:none; margin:16px 0 14px; padding:0; display:grid; gap:12px; text-align:left }
.ms-limits li{ padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-md); font-size:.9rem; line-height:1.55 }
.ms-limits b{ font-weight:700 }

@media (max-width:900px){
  .ms-stats .ms-week-grid{ grid-template-columns:minmax(0,1fr) }
  .ms-today-list{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:620px){
  .ms-stats .ms-week-card{ border-radius:var(--r-md); padding:18px 16px 14px }
  .ms-stats .ms-week-figs dd{ font-size:1.4rem }
  .ms-stats .ms-hist-total{ border-radius:var(--r-md); padding:16px; gap:16px 28px }
  .ms-stats .ms-block{ margin-top:32px }
  .ms-stats .ms-block + .ms-block{ padding-top:28px }
}

/* Dark mode */
.dp-dark .ms-stats .ms-block + .ms-block{ border-color:var(--night-line) }
.dp-dark .ms-stats .ms-block-kicker{ color:var(--amber) }
.dp-dark .ms-stats .ms-block-title, .dp-dark .ms-stats .ms-week-name,
.dp-dark .ms-stats .ms-week-figs dd, .dp-dark .ms-stats .ms-hist-num{ color:var(--cream) }
.dp-dark .ms-stats .ms-block-sub, .dp-dark .ms-stats .ms-week-none{ color:rgba(244,234,214,.78) }
.dp-dark .ms-stats .ms-week-figs dt, .dp-dark .ms-stats .ms-hist-lbl{ color:var(--cream-mute) }
.dp-dark .ms-stats .ms-week-figs dd.hi{ color:var(--accent,var(--amber)) }
.dp-dark .ms-stats .ms-week-figs dd small{ color:var(--cream-mute) }
.dp-dark .ms-stats .ms-week-card, .dp-dark .ms-stats .ms-hist-total,
.dp-dark .ms-stats .ms-hist-list, .dp-dark .ms-today-list li, .dp-dark .ms-limits li{ background:var(--night-2); border-color:var(--night-line) }
.dp-dark .ms-stats .ms-hist-list summary{ color:var(--cream) }
.dp-dark .ms-stats .ms-hist-list li a{ border-color:var(--night-line); color:rgba(244,234,214,.78) }
.dp-dark .ms-stats .ms-hist-list li a:hover{ color:var(--amber) }
.dp-dark .ms-today-list li{ color:rgba(244,234,214,.78) }
.dp-dark .ms-today-list li.is-done{ color:var(--cream); border-color:rgba(244,234,214,.28) }
.dp-dark .ms-today-state, .dp-dark .ms-today-mark{ color:var(--cream-mute) }
.dp-dark .ms-gp-help{ color:rgba(244,234,214,.72) }
.dp-dark .ms-gp-confirm{ border-color:var(--amber) }
.dp-dark .ms-limits li{ color:rgba(244,234,214,.86) }
.dp-dark .ms-stats--guest .ms-game-box--pawdle .ms-game-meta{ color:var(--cream-mute) }
.dp-dark .ms-stats .ms-week-link{ color:var(--cream-mute) }
.dp-dark .ms-stats .ms-week-link:hover{ color:var(--cream) }
.dp-dark .ms-stats .ms-week-play{ color:var(--cream) }

.ms-acct-delete{margin:18px 0 0;font-size:.85rem}
.ms-acct-delete button{background:none;border:0;padding:6px 0;color:var(--rust-deep);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.ms-delete-dialog{max-width:440px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;margin:auto;padding:24px;border:1px solid var(--line-firm);border-radius:var(--r-lg);background:var(--paper);color:var(--ink)}
.ms-delete-dialog::backdrop{background:rgba(21,14,8,.7)}
.ms-delete-dialog h2{margin:0 0 12px;font-size:1.3rem}
.ms-delete-dialog p{margin:0 0 12px;font-size:.92rem;line-height:1.5}
.ms-delete-dialog .ms-acct-pick-label,.dp-dark .ms-delete-dialog .ms-acct-pick-label{color:var(--ink)}
.ms-delete-dialog .ms-acct-input,.dp-dark .ms-delete-dialog .ms-acct-input{background:var(--paper-2);color:var(--ink);border-color:var(--line-firm)}
.ms-delete-ack{display:flex;align-items:flex-start;gap:10px;margin:14px 0;color:var(--ink);font:600 .88rem/1.45 var(--f-sans);cursor:pointer}
.ms-delete-ack input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--rust-deep)}
.ms-delete-dialog .ms-acct-actions{margin-top:16px}
.ms-delete-go{background:var(--rust-deep);color:var(--cream);border-color:var(--rust-deep)}