/* ============================================================================
   Phone layouts for the app pages (below 760px), loaded after each page's own
   styles and motion.css so these rules win without !important where they can.

   The desk layouts are built to fit one screen: fixed heights, percentage
   rows, content scaled to fit. On a phone that clips or squeezes everything,
   so here each page becomes an ordinary scrolling column: one card per row,
   2-up tiles for the small figures, charts kept square, wide tables scrolling
   inside their own card. The app bar, the drawer and the tab bar are in
   nav.css; the page-specific parts are below, one section per page.
   ========================================================================= */

@media (max-width: 760px) {

  /* ── shared ─────────────────────────────────────────────────────────────── */
  html, body { max-width: 100%; }
  body.m-shell { overflow-x: hidden; }
  body.m-shell img, body.m-shell svg, body.m-shell canvas { max-width: 100%; }

  /* ── Kundali Overview ───────────────────────────────────────────────────── */
  body.m-shell .main:has(#dash) { padding: 4px 14px 24px; }
  .main > .topbar { height: auto; padding: 14px 2px 12px; background: none; border: 0; }
  .main > .topbar .topbar-l h1 { font-size: 25px; line-height: 1.15; }
  .main > .topbar .topbar-l p { font-size: 14px; line-height: 1.4; margin-top: 6px; }
  #dash .stat-row {
    height: auto; padding: 0 0 12px; display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
  #dash .stat-row .scard { min-width: 0; flex: none; padding: 12px; gap: 10px; align-items: flex-start; flex-direction: column; }
  #dash .stat-row .scard:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  #dash .content { overflow: visible; padding: 0; gap: 12px; }
  #dash .chart-area { overflow: visible; gap: 12px; }
  #dash .charts-row, #dash .details-row, #dash .bal-row { gap: 12px; }
  #dash .charts-row > .panel:has(.chart-wrap) { min-height: 0; }
  #dash .chart-wrap { aspect-ratio: 280 / 220; height: auto; }
  #dash .panel { border-radius: 16px; }
  #dash .panel-hd { padding: 10px 14px; font-size: 13px; }

  /* ── Overview and the seven score dashboards (index.html) ─────────────── */
  body.m-shell.view-overview .layout, body.m-shell.view-category .layout { padding: 6px 14px 24px; gap: 14px; }
  body.m-shell .dash-row {
    grid-template-columns: 30px minmax(0, 1fr) auto 14px;
    grid-template-areas: "ic nm sc ca" "ic bar bar bar";
    column-gap: 10px; row-gap: 7px; align-items: center; padding: 10px 4px;
  }
  body.m-shell .dash-row-icon { grid-area: ic; align-self: center; }
  body.m-shell .dash-row-name { grid-area: nm; min-width: 0; font-size: 14px; }
  body.m-shell .dash-row-bar { grid-area: bar; width: auto; }
  body.m-shell .dash-row-score { grid-area: sc; font-size: 15px; }
  body.m-shell .dash-row-caret { grid-area: ca; }
  body.m-shell #categorySection .kpi-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.m-shell #categorySection .kpi-strip .kpi-lead { grid-column: 1 / -1; }
  body.m-shell #categorySection .kpi-strip .kpi:not(.kpi-lead) { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; column-gap: 10px; }
  body.m-shell #categorySection .kpi-strip .kpi:not(.kpi-lead) .kpi-img { width: 38px; height: 38px; }
  body.m-shell #categorySection .kpi-strip .kpi:not(.kpi-lead) .kpi-num { font-size: 1.25rem; }
  body.m-shell #categorySection .kpi-strip .kpi:not(.kpi-lead) .kpi-label { font-size: .72rem; line-height: 1.3; }
  body.m-shell #categorySection .kpi-num small, body.m-shell .dash-row-score small { font-size: 12px; }
  /* panel headings and the ranked lists (Top strengths, Boosters) at reading size:
     the desk sets them small to fit one screen, which a phone does not need */
  body.m-shell #categorySection .panel h3 { font-size: 15px; line-height: 1.3; }
  body.m-shell #categorySection .rank-list { gap: 2px; }
  body.m-shell #categorySection .rank-list li { font-size: 14px; gap: 10px; min-height: 38px; }
  body.m-shell #categorySection .rank-score { font-size: 14px; }
  body.m-shell #categorySection .rank { width: 22px; height: 22px; font-size: 12px; }
  body.m-shell #categorySection .rank-img { width: 24px; height: 24px; }
  body.m-shell #categorySection .booster-img { width: 22px; height: 22px; }
  body.m-shell #categorySection .infl h4 { font-size: 15px; }
  body.m-shell #categorySection .infl p { font-size: 13.5px; line-height: 1.45; }
  /* the radar is drawn in its phone geometry (app.js radarGeom) */
  body.m-shell .radar.radar-phone { aspect-ratio: 360 / 300; width: 100%; }
  body.m-shell .radar-phone .radar-label { font-size: 14px; }
  body.m-shell #categorySection .radar-phone .radar-val,
  body.m-shell #overviewSection .radar-phone .radar-val { font-size: 17px; }
  body.m-shell #categorySection.cat-enter .radar-phone .radar-area,
  body.m-shell #overviewSection.ov-enter .radar-phone .radar-area { transform-origin: 180px 150px; }

  /* ── Past Life & Karma ─────────────────────────────────────────────────── */
  body.m-shell .pl-main { padding: 6px 14px 24px; }
  body.m-shell .pl-head { padding-right: 0; gap: 12px; min-height: 0; }
  body.m-shell .pl-head h1 { font-size: 28px; }
  body.m-shell .pl-head .sub { font-size: 14.5px; line-height: 1.45; }
  body.m-shell .acts .row { width: 100%; }
  body.m-shell .acts .row > * { flex: 1 1 auto; }
  body.m-shell .pl-main .kpis { gap: 10px; }
  body.m-shell .pl-main .kpi { flex-direction: column; align-items: flex-start; gap: 8px; height: auto; padding: 12px; }
  body.m-shell .pl-main .kpi img { width: 42px; height: 42px; }
  body.m-shell .pl-main .kpi .l { font-size: 13px; white-space: normal; line-height: 1.3; }
  body.m-shell .pl-main .kpi .v { font-size: 22px; }
  body.m-shell .pl-main .kpi .d { font-size: 12px; white-space: normal; line-height: 1.35; }

  /* ── Manglik ───────────────────────────────────────────────────────────── */
  body.m-shell .mg-main { padding: 6px 14px 24px; }
  body.m-shell .mg-head { flex-wrap: wrap; gap: 12px 14px; }
  body.m-shell .mg-head > div:not(.about) { flex: 1 1 0; min-width: 0; }
  body.m-shell .mg-head h1 { font-size: 26px; }
  body.m-shell .mg-head .sub { font-size: 13.5px; line-height: 1.4; margin-top: 4px; }
  body.m-shell .mg-head .about { flex: 1 1 100%; max-width: none; margin-left: 0; }
  body.m-shell #aboutText { font-size: 13px; line-height: 1.5; }

  /* ── Admin ─────────────────────────────────────────────────────────────── */
  body.m-shell .ad-main { padding: 6px 14px 24px; }
  body.m-shell .ad-shell { padding: 14px; min-height: 0; border-radius: 16px; }
  body.m-shell .ad-head h1 { font-size: 24px; }
  body.m-shell .ad-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  body.m-shell .ad-main .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── pages with their own main column ─────────────────────────────────── */
  body.m-shell .da-main, body.m-shell .md-main, body.m-shell .mm-main, body.m-shell .sv-main { padding: 6px 14px 24px; }

  /* ── Dasha: the five figures as 2-up tiles, the current period across ── */
  body.m-shell #daKpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.m-shell #daKpis > .kpi:first-child { grid-column: 1 / -1; }
  body.m-shell #daKpis > .kpi:not(:first-child) { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  body.m-shell #daKpis > .kpi:not(:first-child) .kpi-v { font-size: 20px; }
  body.m-shell #daKpis .kpi-l, body.m-shell #daKpis .kpi-s { white-space: normal; }

  /* ── Medical: six figures as 2-up tiles ───────────────────────────────── */
  body.m-shell .md-main .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.m-shell .md-main .kpis .kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  body.m-shell .md-main .kpis .kpi img { width: 40px; height: 40px; }
  body.m-shell .md-main .kpis .kpi .lb { font-size: 12.5px; line-height: 1.3; white-space: normal; }
  body.m-shell .md-main .md-head { flex-direction: column; align-items: stretch; }
  body.m-shell .md-main .md-actions { width: 100%; }
  body.m-shell .md-main .md-actions > * { width: 100%; }
}

/* Small phones (iPhone SE, 360px Androids): three layers of side padding —
   page, card, panel — left the radar 234px across at 320px and its labels at
   9px. Trim the outer two and let the radar use the panel's side padding. */
/* ── Phones: nothing smaller than 12px to read, nothing smaller than a
   fingertip to tap. The small "?" and "↗" buttons keep their look and get a
   larger invisible hit area around them instead. ─────────────────────────── */
@media (max-width: 760px) {
  body.m-shell .info-dot, body.m-shell .info-btn, body.m-shell .help,
  body.m-shell .what-btn, body.m-shell .pill-btn, body.m-shell .more { position: relative; }
  body.m-shell .info-dot::after, body.m-shell .info-btn::after, body.m-shell .help::after,
  body.m-shell .what-btn::after, body.m-shell .pill-btn::after, body.m-shell .more::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%); }

  /* Kundali Overview */
  body.m-shell .drishti-btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
  body.m-shell .modal-hd .modal-close { min-width: 44px; min-height: 40px; font-size: 14px; }
  body.m-shell .card-label, body.m-shell .scard-label, body.m-shell .card-desc, body.m-shell .scard-desc,
  body.m-shell .ps-own, body.m-shell .bal-lbl, body.m-shell .bal-pct, body.m-shell #takeaway,
  body.m-shell #modal-subtitle, body.m-shell .hcell-name { font-size: 12px; }
  body.m-shell table th { font-size: 12px; }
  body.m-shell .hplanets { font-size: 11.5px; }   /* nine planets must still fit in one house cell */

  /* Overview and the score dashboards */
  body.m-shell .kpi-label, body.m-shell .ov-h-note, body.m-shell .kv-meta dt, body.m-shell .rank-name { font-size: 12px !important; }
  body.m-shell .kpi-num small { font-size: 12px; }

  /* Dasha */
  body.m-shell .ul-chip, body.m-shell .ms-g { font-size: 12px; }

  /* Manglik: the working, the three references and the bars */
  .mg-main h2 .more { font-size: 13px; min-height: 32px; }
  .mg-main .mid span, .mg-main .lb, .mg-main .work, .mg-main .box p, .mg-main .it span, .mg-main h2 small,
  .mg-main .r .k, .mg-main .r .v, .mg-main .v em, .mg-main .ref b, .mg-main .ref .from, .mg-main .ref .yn,
  .mg-main .ref .why, .mg-main .note, .mg-main .bar-r .nm, .mg-main .bar-r .n, .mg-main .bar-r .note { font-size: 12px !important; }

  /* Marriage Match: the radio buttons and the permission box, finger-sized */
  .mm-main input[type=radio], .mm-main input[type=checkbox] { width: 20px; height: 20px; }
  .mm-main .help { font-size: 14px; }
  .mm-main .tile span { font-size: 12px; }
  .mg-main .checks span { font-size: 12px !important; }
}

@media (max-width: 380px) {
  body.m-shell.view-overview .layout, body.m-shell.view-category .layout { padding-left: 10px; padding-right: 10px; }
  body.m-shell .cat-dash { padding-left: 12px; padding-right: 12px; }
  body.m-shell .radar-panel .radar-wrap { margin-left: -8px; margin-right: -8px; }
}

/* ── Phones, the last few labels under 12px (found in a full sweep) ─────────
   Overview's per-reading cards, Kundali's planet states and yoga list,
   Medical's body map and lifestyle cards, Past Life's film heading. */
@media (max-width: 760px) {
  body.m-shell #overviewSection .ovp-hd, body.m-shell #overviewSection .ovp-note,
  body.m-shell #overviewSection .ovp-val small, body.m-shell #overviewSection .ovp-val em { font-size: 12px !important; }

  body.m-shell .ps-retro, body.m-shell .ps-retro-debil, body.m-shell .ps-exalt, body.m-shell .ps-debil,
  body.m-shell .yi-st, body.m-shell .yi2-desc, body.m-shell .yoga-footer a { font-size: 12px; }
  /* the yogas link was 15px tall: a fingertip-sized hit area, same look */
  body.m-shell .yoga-footer a { position: relative; display: inline-block; }
  body.m-shell .yoga-footer a::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }

  body.m-shell .cal .t, body.m-shell .cal .t span, body.m-shell .org .note,
  body.m-shell .lf p, body.m-shell .film-kicker, body.m-shell .cta small { font-size: 12px; }
}

/* ── Phones: the last sweep (Top Strengths rows, form fields, small labels) ─ */
@media (max-width: 760px) {
  /* Top Strengths / Areas to Improve open their reading: a finger-sized row */
  body.m-shell li[data-mode][role="button"] { min-height: 40px; align-items: center; }
  /* iPhone zooms the whole page into any field under 16px: keep them at 16 */
  body.m-shell input:not([type=checkbox]):not([type=radio]):not([type=range]),
  body.m-shell select, body.m-shell textarea { font-size: 16px !important; }
}

/* ── Phones: one size for section titles across the app (they ran from 14px
   on the dashboards and Manglik to 18px on Medical) ─────────────────────── */
@media (max-width: 760px) {
  body.m-shell #overviewSection h3, body.m-shell #categorySection h3 { font-size: 16px !important; }
  .mg-main h2 { font-size: 16px !important; }
}