/* ==========================================================================
   MDS v2 «Pro» theme repairs — @layer theme, imported last by app-v1.css.
   Part 1: the Mio app (panel #pet, میوو‌مپ #map). Part 2: site-wide dark-mode repairs.
   - Desktop (≥1100px): 248px labelled rail with the pet, hints and a way
     back to the site; calm surfaces instead of stacked peach gradients.
   - Every card uses theme tokens, so dark mode stays readable (the old
     gradients stayed light in dark mode and hid light text).
   - Two layout fixes found in the v142 audit (club, map).
   Markup and logic are unchanged except the rail's site links (mio-nav-v1.js).
   ========================================================================== */

/* ---------- calm app background (overrides the warm app-mode tint) ---------- */
:root:not([data-theme="dark"]) body.is-mio-app:not(.is-landing) {
  --ds-bg: #f5f3ef;
  --ds-bg-tint: radial-gradient(900px 520px at 100% -10%, rgba(255, 107, 94, .07), transparent 60%), radial-gradient(760px 460px at 0% 0%, rgba(27, 191, 173, .06), transparent 55%);
  background: var(--ds-bg-tint), var(--ds-bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body.is-mio-app { background: var(--ds-bg-tint), var(--ds-bg); background-attachment: fixed; }

/* ---------- token bridge: the panel's --mp-* palette follows the DS in both themes ---------- */
.pn {
  --mp-page: var(--ds-bg);
  --mp-surface: var(--ds-surface-1);
  --mp-surface-2: var(--ds-surface-2);
  --mp-hair: var(--ds-line);
  --mp-hair-2: var(--ds-line-2);
  --mp-shadow: var(--ds-elev-1);
  --mp-ink: var(--ds-ink-1);
  --mp-ink-2: var(--ds-ink-2);
  --mp-muted: var(--ds-ink-3);
  --mp-done: var(--ds-success);
  --mp-done-soft: var(--ds-success-soft);
  --mp-due: var(--ds-warning);
  --mp-due-soft: var(--ds-warning-soft);
  --mp-info: var(--ds-info);
  --mp-info-soft: var(--ds-info-soft);
  --mp-pet: var(--ds-pet);
  --mp-pet-soft: var(--ds-pet-soft);
  --mp-flag: var(--ds-danger);
  --mp-flag-soft: var(--ds-danger-soft);
}

/* ---------- calm surfaces: one card language for the panel and the map ---------- */
body.is-mio-app :is(.pn-head, .pn-visit, .pn-card-box, .pn-overview, .pn-stage-wrap, .mm-head, .mm-preview-gate, .mm-card-box, .mm-ready) {
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-elev-1);
  color: var(--ds-ink-1);
}
body.is-mio-app :is(.pn-visit, .pn-card-box, .pn-overview, .mm-card-box)::before,
body.is-mio-app :is(.pn-visit, .pn-card-box, .pn-overview, .mm-card-box)::after { opacity: 0; }
body.is-mio-app .mm-ready { background: var(--ds-surface-1); }
body.is-mio-app .pn-stage-wrap { padding: 8px; }
body.is-mio-app .pn-stage { border-radius: var(--ds-radius-lg); }
body.is-mio-app .mm-preview-gate { background: var(--ds-ai-soft); border-color: var(--ds-ai-line); }

/* ---------- map: single-column panel when there is no side column ---------- */
.mm-preview-panel--map:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---------- club: the single-column wrapper must not grow past the viewport ---------- */
.cb1-wrap { grid-template-columns: minmax(0, 1fr); }

/* ---------- rail ---------- */
.mio-nav__site { display: none; }

@media (min-width: 1100px) {
  .pet-home-shell:has(> .mio-nav:not([hidden])),
  .mm-page > .container:has(> .mio-nav:not([hidden])) {
    grid-template-columns: 248px minmax(0, 1fr);
    column-gap: clamp(20px, 2.4vw, 36px);
  }
  .mio-nav:not([hidden]) { top: 16px; margin-top: 16px; }
  .mio-nav__bar {
    gap: 4px; padding: 12px;
    background: var(--ds-surface-1);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-elev-1);
    backdrop-filter: none;
  }
  .mio-nav__brand { justify-content: flex-start; gap: 10px; padding: 4px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ds-line); border-radius: 0; }
  .mio-nav__brand-mark { flex: none; }
  .mio-nav__who { display: grid; flex: 1; min-width: 0; }
  .mio-nav__who small { color: var(--ds-ink-3); font: var(--ds-weight-medium) 11px/1.4 var(--ds-font-sans); }
  .mio-nav__who strong { max-width: none; color: var(--ds-ink-1); font: var(--ds-weight-bold) 15px/1.4 var(--ds-font-display); }
  .mio-nav__conn { margin-inline-start: auto; }

  .mio-nav__items { gap: 2px; }
  .mio-nav__item {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 52px; padding: 6px 8px;
    border-radius: var(--ds-radius-md);
    text-align: start;
  }
  .mio-nav__item:hover { background: var(--ds-surface-2); }
  .mio-nav__item[aria-current] { background: var(--ds-action-soft); box-shadow: none; }
  .mio-nav__item[aria-current] .mio-nav__label { color: var(--ds-action-ink); }
  .mio-nav__item[aria-current]::before { inset-block: 12px; inset-inline-start: -12px; width: 3px; background: var(--ds-action); }
  .mio-nav__ic { width: 38px; height: 38px; border-radius: 12px; flex: none; }
  .mio-nav__ic img { width: 32px; height: 32px; }
  .mio-nav__ic--pet { width: 38px; height: 38px; }
  .mio-nav__txt { gap: 1px; }
  .mio-nav__label { max-width: 150px; color: var(--ds-ink-1); font: var(--ds-weight-bold) 14px/1.4 var(--ds-font-sans); }
  .mio-nav__hint { display: block; max-width: 150px; overflow: hidden; color: var(--ds-ink-3); font: var(--ds-weight-regular) 11.5px/1.4 var(--ds-font-sans); text-overflow: ellipsis; white-space: nowrap; }
  .mio-nav__badge { inset-inline-end: -4px; }

  .mio-nav__site { display: grid; gap: 2px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ds-line); }
  .mio-nav__link {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px;
    border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-ink-2);
    font: var(--ds-weight-medium) 13px/1.4 var(--ds-font-sans); text-align: start;
  }
  .mio-nav__link:hover { background: var(--ds-surface-2); color: var(--ds-ink-1); }
  .mio-nav__link svg { width: 18px; height: 18px; color: var(--ds-ink-3); }

  .mio-nav__end { padding-top: 10px; margin-top: 4px; }
  .mio-nav__talk { justify-content: flex-start; gap: 10px; padding: 0 12px; min-height: 44px; font-weight: var(--ds-weight-bold); }
  .mio-nav__talk span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 13px; }
}

/* The labelled rail takes width; give the app a wider canvas and keep task tiles readable. */
@media (min-width: 1100px) {
  .container.pet-home-shell, .mm-page > .container { width: min(1400px, calc(100% - 48px)); }
}
@media (min-width: 1101px) and (max-width: 1379px) {
  .pn .pn-todo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile bar: calm surface, same tokens ---------- */
@media (max-width: 1099px) {
  body.is-mio-app .mio-nav__bar {
    background: color-mix(in srgb, var(--ds-surface-1) 94%, transparent);
    border: 1px solid var(--ds-line);
    box-shadow: var(--ds-elev-overlay);
  }
  body.is-mio-app .mio-nav__items { background: transparent; box-shadow: none; }
  body.is-mio-app .mio-nav__item[aria-current] { background: var(--ds-action-soft); }
  body.is-mio-app .mio-nav__item[aria-current] .mio-nav__label { color: var(--ds-action-ink); }
}

/* ---------- CTAs: solid action colour (white on the old coral/orange gradients failed AA) ---------- */
.pn :is(.pn-visit-claim, .pn-dash-cta) { background: var(--ds-action); color: var(--ds-on-action); box-shadow: 0 8px 18px -12px rgba(210, 64, 47, .55); }
.pn :is(.pn-visit-claim, .pn-dash-cta):hover { background: var(--ds-action-hover); }

/* ---------- dark: repaint the light surfaces the older panel files hard-code ---------- */
:root[data-theme="dark"] .pn :is(.pn-overline, .pn-soft, .pn-dash-empty, .pn-ring--dash, .pn-todo-meta) {
  background: var(--ds-surface-2);
  border-color: var(--ds-line);
}
:root[data-theme="dark"] .pn .pn-overline { color: var(--ds-ink-2); }
:root[data-theme="dark"] .pn .pn-visit-kicker { color: var(--ds-action-ink); }
:root[data-theme="dark"] .pn .pn-soft { color: var(--ds-ink-1); }
:root[data-theme="dark"] .pn .pn-todo-meta { color: var(--ds-warning); }
:root[data-theme="dark"] .pn .pn-dash-empty p { color: var(--ds-ink-2); }

/* ---------- map: --mm-* ink follows the DS; hard-coded muted copy uses DS ink ---------- */
.mm, .mm-dialog { --mm-ink: var(--ds-ink-1); }
:root[data-theme="dark"] :is(.mm-lead, .mm-how li, .mm-card-box--how span) { color: var(--ds-ink-2); }
:root[data-theme="dark"] .mm-overline { background: var(--ds-surface-2); border-color: var(--ds-line); color: var(--ds-success); }
:root[data-theme="dark"] body.is-mio-app .mm-preview-gate { background: var(--ds-ai-soft); color: var(--ds-ink-1); }
:root[data-theme="dark"] body.is-mio-app .mm-preview-gate strong { color: var(--ds-ink-1); }

/* ---------- small panel CTAs: the orange gradient with white text failed AA ---------- */
.pn .pn-cta { background: var(--ds-action); color: var(--ds-on-action); }
.pn .pn-cta:hover { background: var(--ds-action-hover); }

/* ==========================================================================
   Part 2 — site-wide dark-mode repairs found by the v142 contrast sweep
   (every text pair ≥ AA in both themes on the routes swept).
   ========================================================================== */
/* Shop kind tiles: card follows the theme; the product thumb keeps its white plate. */
.sv1-sub { background: var(--ds-surface-1); }
.sv1-sub img { background: #fff; border-radius: 12px; }
:root[data-theme="dark"] .sv1-sub[aria-pressed="true"] { background: var(--ds-success-soft); }
/* Product cards: English name, category line and the options link. */
:root[data-theme="dark"] :is(.sv2-name__en, .sv2-card small) { color: var(--ds-ink-3); }
:root[data-theme="dark"] .sv139-options { color: var(--ds-success); }
/* Habit presets: white on the dark-mode success tint failed; use the inverse ink. */
:root[data-theme="dark"] .pn .pn-habit-preset.is-on { color: var(--ds-ink-inverse); }

/* Panel (dark): remaining light plates found by the surface sweep. */
:root[data-theme="dark"] .pn :is(.pn-pets, .pn-dash-card, .pn-item.is-due, .pn-mio-tour) {
  background: var(--ds-surface-1);
  border-color: var(--ds-line);
  color: var(--ds-ink-1);
}
:root[data-theme="dark"] .pn :is(.pn-head-top, .pn-head-stat) { background: var(--ds-surface-2); border-color: var(--ds-line); color: var(--ds-ink-2); }
:root[data-theme="dark"] .pn .pn-item.is-due { background: var(--ds-warning-soft); }
:root[data-theme="dark"] .pn .pn-avatar { background: var(--ds-surface-2); }
:root[data-theme="dark"] .pn :is(.pn-account-grid > div, .pn-pet-strip > li) {
  background: var(--ds-surface-2);
  border-color: var(--ds-line);
  color: var(--ds-ink-1);
}
/* Connection strip: the mint gradient stayed light in dark mode. */
:root[data-theme="dark"] .conn-strip { background: var(--ds-surface-1); border-color: var(--ds-line); color: var(--ds-ink-2); }
:root[data-theme="dark"] .conn-strip.is-online { background: color-mix(in srgb, var(--ds-success-soft) 70%, var(--ds-surface-1)); }
:root[data-theme="dark"] .conn-strip.is-offline { background: var(--ds-warning-soft); color: var(--ds-warning); }
/* Calm in light too: the trend cards and pet switcher sit on plain surfaces. */
.pn :is(.pn-pets, .pn-dash-card) { background: var(--ds-surface-1); border-color: var(--ds-line); }
/* Panel head (dark): the edit button and the notification pill kept their white plates. */
:root[data-theme="dark"] .pn .pn-title-edit { background: var(--ds-surface-2); border-color: var(--ds-line); color: var(--ds-ink-2); box-shadow: none; }
:root[data-theme="dark"] .pn .pn-title-edit:hover { color: var(--ds-ink-1); border-color: var(--ds-line-strong); }
:root[data-theme="dark"] .pn .pn-status__pill--btn.is-off { background: var(--ds-surface-2); border-color: var(--ds-line); color: var(--ds-ink-2); }
:root[data-theme="dark"] .pn .pn-status__pill--btn[data-state="denied"] { background: var(--ds-danger-soft); color: var(--ds-danger); }
:root[data-theme="dark"] .pn .pn-visit-trail { background: var(--ds-surface-2); box-shadow: inset 0 0 0 1px var(--ds-line); }
:root[data-theme="dark"] .pn .pn-visit-trail i:not(.is-on) { background: var(--ds-line-strong); box-shadow: none; }
:root[data-theme="dark"] .pn .pn-visit-trail i.is-today { outline-color: var(--ds-ink-1); }