/*! patch-553.css — v553 (552 carried forward + Gemini v551 judged adds)
 * Section 1 = patch-552.css verbatim except dial .ph-svg 20px → 28px (Gemini P1-01).
 * Section 2 = new blocks tagged "553: …". Load AFTER patch-548.css.
 * ---- original 552 header follows ----
 * patch-552.css — preview 552a
 * Load AFTER patch-548.css. Each block is tagged "552: S-xx" and can be deleted on its own.
 * Scope: S-07 dial card, S-22 teach chips (desktop only), S-30 optional ★ hit area.
 * Does not touch: 手机教程 (rt-phone-tutorial), teaching images, --fs* vars, brand colour, footers.
 */

/* ---------- 552: S-07 模拟拨号 — restore the component's dark phone screen ----------
 * Root cause: patch-548 §17 "P0-7 Cards / grid unify" sets
 *   body.elder-mode .card { background: var(--surface) !important }
 * which also hits <div class="card pad phone-card"> in ElderDial, so the component's
 * white / #7dd3fc text sits on white. We only give the dark gradient back to that one card.
 */
html.rt-elder-dial body.elder-mode .elder-main .card.phone-card,
html.rt-elder-dialer body.elder-mode .elder-main .card.phone-card {
  background: linear-gradient(160deg, #1c2b3a, #0e1a26) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* belt-and-braces: text inside the dark card keeps the component's own light colours
   even if a later generic "strong/small/button colour" rule reaches it */
html.rt-elder-dial body.elder-mode .elder-main .phone-card :is(.ph-name, .cf-name, .bk-mid strong),
html.rt-elder-dialer body.elder-mode .elder-main .phone-card :is(.ph-name, .cf-name, .bk-mid strong) { color: #fff !important; }
html.rt-elder-dial body.elder-mode .elder-main .phone-card .ph-hint,
html.rt-elder-dialer body.elder-mode .elder-main .phone-card .ph-hint { color: rgba(255,255,255,.80) !important; }
html.rt-elder-dial body.elder-mode .elder-main .phone-card :is(.bk-mid small, .call-face small),
html.rt-elder-dialer body.elder-mode .elder-main .phone-card :is(.bk-mid small, .call-face small) { color: rgba(255,255,255,.75) !important; }
html.rt-elder-dial body.elder-mode .elder-main .phone-card .bk-item,
html.rt-elder-dialer body.elder-mode .elder-main .phone-card .bk-item {
  background: rgba(255,255,255,.10) !important; color: #fff !important; border: 0 !important;
}
/* "未拨位" placeholder digits: component uses #ffffff59 (~3:1 on dark). Nudge to ~5:1, still
   clearly dimmer than typed (.done = #fff) and current (.on = #7dd3fc) digits. */
html.rt-elder-dial body.elder-mode .elder-main .phone-card .dial-num,
html.rt-elder-dialer body.elder-mode .elder-main .phone-card .dial-num { color: rgba(255,255,255,.62) !important; }

/* ---------- 552: S-07b 模拟拨号 — stray giant "X" over the keypad ----------
 * The big hexagon-X is NOT a teaching image: it is the inline <svg class="ph-svg"> icon of
 * the 「删除」 key (and the 挂断 button). ElderDial's scoped CSS never sizes .ph-svg, so it
 * renders at intrinsic/auto size and spills over the * key. Size it like an inline icon.
 */
html.rt-elder-dial body.elder-mode .elder-main :is(.dk-del, .call-btn) > svg.ph-svg,
html.rt-elder-dialer body.elder-mode .elder-main :is(.dk-del, .call-btn) > svg.ph-svg {
  /* 553: P1-01 Gemini — 20px → 28px, still scoped to 删除/挂断 */
  width: 28px !important; height: 28px !important;
  min-width: 0 !important; max-width: 28px !important; max-height: 28px !important;
  flex: 0 0 28px !important; position: static !important; display: inline-block !important;
  vertical-align: middle !important;
}

/* ---------- 552: S-22 教学 hub category chips — desktop: last chip (「安全」) cut off ----------
 * patch-548 (@min-width:1024) puts search (flex 0 0 320px) + 8 chips (nowrap, flex:1 1 0) on
 * one row; real chip min-content + 548 §2 font sizes don't fit and the row overflows.
 * Fix: let the chip group wrap onto a 2nd line instead of being clipped. ≤768 is untouched
 * (390 retest: already OK). 手机教程 excluded.
 */
@media (min-width: 769px) {
  html.rt-elder.rt-teach-hub:not(.rt-phone-tutorial) body.elder-mode .elder-main .zj-tut-bar .zj-tut-cats {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    overflow: visible !important;
    row-gap: 8px !important;
  }
  html.rt-elder.rt-teach-hub:not(.rt-phone-tutorial) body.elder-mode .elder-main .zj-tut-bar .zj-tut-cats > button {
    flex: 1 0 auto !important;
    min-width: 64px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 552: S-30 (OPTIONAL, low priority) home tile ★ pin: 36×36 → 44×44 hit area ----------
 * Visual size unchanged; an invisible ::after extends the tap target 4px each side.
 * Delete this block if it causes mis-taps on the tile underneath.
 */
html.rt-elder-home body.elder-mode .page > .grid .g-card .zg-pin::after {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
}


/* ======================= 553 additions ======================= */

/* ---------- 553: P3-01 计算器 / 我的用药 — desktop ≥1024 too wide ----------
 * ElderCalc ships 520px@≥900 and ElderMyMeds 1200px@≥900 on .page-head/.card; at 1440 the
 * patch-548 shell makes them read as full-width strips. Constrain the page root's direct
 * children only (not nested cards, not .v407-back). Mobile/tablet untouched.
 */
@media (min-width: 1024px) {
  html.rt-elder-calc body.elder-mode .elder-main > * > :is(.page-head, .card, .teach-bar),
  html.rt-elder-my-meds body.elder-mode .elder-main > * > :is(.page-head, .card, .mm-hero) {
    max-width: 560px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* 553: P1-04 demo badge removed 2026-11-04 — real geo live via patch-555 */

/* 553: calc skip button NOT shipped (component teaching loop; see FULLSTACK-HANDOFF-553.md). */