/* MahirAI mobile direction V2 — approved reference translated into the existing
   quiet-intelligence system. This layer changes presentation only: routes,
   learning state, consent, entitlements, payments, and the canonical icon stay intact. */

@media (max-width: 899px) {
  body.mode-app {
    background:
      radial-gradient(circle at 8% -8%, color-mix(in srgb, var(--brand2) 9%, transparent), transparent 24rem),
      radial-gradient(circle at 105% 12%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 22rem),
      var(--bg);
  }

  .mahir-workspace-main > .app-header {
    min-height: 72px;
    padding: max(.75rem, env(safe-area-inset-top)) 1rem .65rem;
    background: color-mix(in srgb, var(--card) 88%, transparent) !important;
    border-bottom-color: color-mix(in srgb, var(--line) 76%, transparent) !important;
    -webkit-backdrop-filter: saturate(150%) blur(22px);
    backdrop-filter: saturate(150%) blur(22px);
  }

  .app-header__brand .mahir-mark {
    --mark-size: 42px !important;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    box-shadow: 0 9px 22px rgba(7,20,38,.16);
  }

  .app-header__actions { gap: .4rem !important; }
  .app-header__actions .chip {
    min-height: 36px;
    padding-inline: .65rem;
    border: 1px solid color-mix(in srgb, currentColor 11%, transparent);
    border-radius: 999px;
  }

  .app-header__actions .btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 8px 20px rgba(32,69,112,.07);
  }

  .home-view { padding-top: 1rem; padding-bottom: 8.6rem !important; }
  .home-workspace-header { margin-bottom: 1.05rem; }
  .home-workspace-header__date { color: var(--brand); font-size: .61rem; }
  .home-workspace-header h1 {
    margin-top: .42rem;
    font-size: clamp(1.7rem, 8vw, 2.3rem);
    line-height: 1.06;
    letter-spacing: -.045em;
  }
  .home-workspace-header p { margin-top: .5rem; font-size: .78rem; }

  .today-priority {
    color: var(--ink1);
    background:
      radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--brand2) 13%, transparent), transparent 11rem),
      linear-gradient(145deg, color-mix(in srgb, #eaf8ff 92%, var(--card)), color-mix(in srgb, #e7efff 88%, var(--card)));
    border-color: color-mix(in srgb, var(--brand) 12%, var(--line));
    box-shadow: 0 18px 42px rgba(32,69,112,.11), inset 0 1px 0 rgba(255,255,255,.8);
  }

  .today-priority::before {
    width: 2px;
    background: linear-gradient(180deg, var(--brand2), var(--brand) 76%, transparent);
  }

  .today-priority__label { color: color-mix(in srgb, var(--brand) 82%, var(--ink1)); }
  .today-priority__label i {
    background: var(--brand2);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand2) 12%, transparent);
  }

  .today-priority__time {
    color: var(--ink3);
    background: color-mix(in srgb, var(--card) 76%, transparent);
    border-color: color-mix(in srgb, var(--brand) 8%, var(--line));
  }

  .today-priority__copy > p { color: var(--ink3); }
  .today-priority__action {
    min-height: 48px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 23%, transparent);
  }
  .today-priority__action:focus-visible { outline-color: color-mix(in srgb, var(--brand) 40%, transparent); }

  .today-priority__ring {
    background: conic-gradient(var(--brand2) 0, var(--brand) calc(var(--value) * 1%), color-mix(in srgb, var(--brand) 8%, var(--card)) 0);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand2) 5%, transparent), 0 12px 26px rgba(37,99,235,.11);
  }
  .today-priority__ring::before {
    background: color-mix(in srgb, var(--card) 94%, #eef7ff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 7%, transparent);
  }
  .today-priority__ring small { color: var(--ink4); }

  .today-priority__metrics { border-top-color: color-mix(in srgb, var(--brand) 9%, var(--line)); }
  .today-priority__metric strong { color: var(--ink2); }
  .today-priority__metric span { color: var(--ink4); }

  .home-content-grid { margin-top: 1.35rem; }
  .home-roadmap { border-radius: 24px; box-shadow: 0 14px 34px rgba(32,69,112,.07); }
  .home-roadmap__item { min-height: 74px; }
  .home-brief { border-radius: 24px; }

  body.mode-app nav.fixed {
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-width: 420px;
    margin-inline: auto;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--line) 75%, #fff) !important;
    border-radius: 25px;
    background: color-mix(in srgb, var(--card) 88%, transparent) !important;
    box-shadow: 0 16px 36px rgba(31,60,95,.18);
    transform: none !important;
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    backdrop-filter: saturate(160%) blur(24px);
  }

  body.mode-app nav.fixed > div { gap: 2px; }
  body.mode-app .navbtn {
    min-width: 0;
    min-height: 56px;
    flex: 1 1 0;
    padding: .35rem .15rem !important;
    color: var(--ink4);
    border-radius: 17px;
  }
  body.mode-app .navbtn::before { inset: 0; border-radius: 17px; }
  body.mode-app .navbtn.on { color: #fff; }
  body.mode-app .navbtn.on::before { background: var(--brand); }
  body.mode-app .navbtn .nav-symbol { width: 1.25rem; height: 1.25rem; }
  body.mode-app .navbtn > span:last-child { font-size: 9px !important; }
  body.mode-app #mahir-consent-settings { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 430px) {
  .app-header__actions .chip { padding-inline: .55rem; }
  .today-priority__copy { padding-top: 4.4rem; }
  .today-priority__ring { top: .9rem; right: .9rem; }
  .today-priority__metrics { margin-top: 1rem; }
}

@media (max-width: 350px) {
  .app-header__actions { gap: .25rem !important; }
  .app-header__actions .chip { min-width: 42px; padding-inline: .45rem; }
  body.mode-app nav.fixed { right: 6px; left: 6px; padding: 6px !important; }
  body.mode-app .navbtn > span:last-child { font-size: 8px !important; }
}

[data-theme="dark"] .today-priority {
  color: #f8fbff;
  background:
    radial-gradient(circle at 92% 6%, rgba(34,211,238,.14), transparent 13rem),
    linear-gradient(145deg, #08182b 0%, #0a2037 62%, #0a2942 100%);
  border-color: #173d5b;
  box-shadow: 0 22px 52px rgba(2,8,20,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .today-priority__label { color: #91eafa; }
[data-theme="dark"] .today-priority__time { color: #b9cede; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .today-priority__copy > p { color: #adc1d2; }
[data-theme="dark"] .today-priority__ring::before { background: #0a1c31; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
[data-theme="dark"] .today-priority__ring small { color: #829db4; }
[data-theme="dark"] .today-priority__metrics { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .today-priority__metric strong { color: #f8fbff; }
[data-theme="dark"] .today-priority__metric span { color: #7f9bb2; }

@media (hover: hover) and (pointer: fine) and (max-width: 899px) {
  .today-priority__action:hover { transform: translateY(-1px); box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 27%, transparent); }
  body.mode-app .navbtn:hover { color: var(--ink2); }
  body.mode-app .navbtn.on:hover { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-app .navbtn,
  body.mode-app .navbtn::before,
  .today-priority__action {
    transform: none !important;
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
  }
}