/* Mobile design system: one type scale, 44px touch targets and the shared fixes for phones.
   Loaded after styles.css and cards.css, so these rules win over the older per-screen rules. */

:root {
  --m-touch: 44px;        /* smallest tap target */
  --m-fs-page: 20px;      /* page title */
  --m-fs-section: 17px;   /* section title */
  --m-fs-body: 15px;      /* body text */
  --m-fs-label: 14px;     /* form labels and list rows */
  --m-fs-button: 15px;    /* buttons */
  --m-fs-small: 12px;     /* secondary text; nothing smaller than this */
}

/* Inputs are never below 16px: iOS zooms the page when a smaller field gets focus. */
input, select, textarea { font-size: 16px; }

@media (max-width: 719px) {
  /* Type scale: titles and secondary text */
  .page h1, .page h2 { font-size: var(--m-fs-page); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .page h3 { font-size: var(--m-fs-section); font-weight: 700; line-height: 1.35; }
  .page small, .auth-hero small, .confirm-sheet small, .install-prompt-modal small { font-size: var(--m-fs-small); }
  .preg-lact-label, .preg-system-tag, .path-step, .sheet-stats span, .ix-mid small, .skin-facts small,
  .goal-streak small, .badge-mini small, .tool-tile { font-size: var(--m-fs-small); }
  .ob-title { font-size: 24px; }
  .auth-hero h1 { font-size: 24px; }
  .topbar-title { font-size: var(--m-fs-page); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }

  /* Bold is for titles only: text in lists and cards uses a lighter weight */
  .page b, .page strong, .auth-hero b { font-weight: 600; }

  /* Long names wrap instead of being cut off, so the full text is always visible */
  .q-type { white-space: normal; overflow: visible; text-overflow: clip; }
  .chip { max-width: 100%; white-space: normal; text-align: start; line-height: 1.3; }
  .lib-stat { min-width: 0; gap: 10px; padding: 10px; }
  .lib-stat b { width: 44px; height: 44px; font-size: 17px; border-radius: 12px; }
  .lib-stat span, .lib-stat small { overflow-wrap: normal; word-break: keep-all; hyphens: none; font-size: 13px; line-height: 1.3; min-width: 0; }

  /* Touch targets: every tappable control is at least 44px high (icon buttons also 44px wide) */
  button:is(.btn, .btn-sm, .pill-btn, .chip, .chip-tab, .pick-btn, .lang-toggle, .stat-pill,
    .icon-btn, .eye-btn, .install-close, .choice-item, .lp-install),
  a:is(.btn, .btn-sm, .pill-btn, .chip, .chip-tab, .pick-btn, .see-all, .lp-install) {
    min-height: var(--m-touch);
  }
  button:is(.icon-btn, .eye-btn, .install-close) { min-width: var(--m-touch); }
  a.see-all { display: inline-flex; align-items: center; min-height: var(--m-touch); }
  .auth-card a { display: inline-flex; align-items: center; min-height: var(--m-touch); }

  /* Chip tabs are always tappable, whether they are buttons or labels around a checkbox */
  .chip-tab { min-height: var(--m-touch) !important; }
  a.icon-btn, a.stat-pill { min-height: var(--m-touch); }
  a.icon-btn { min-width: var(--m-touch); }
  .land-hero h1, .lp-hero h1 { font-size: 26px; }
  .lp-brand, .ob-body a, .auth-page small, .auth-card small { min-height: var(--m-touch); }
  .ob-body a, .auth-page small, .auth-card small { display: inline-flex; align-items: center; font-size: var(--m-fs-small); }
  .install-prompt-modal small, .install-prompt-modal span { font-size: var(--m-fs-small); }

  /* Form controls: 16px so iOS does not zoom, and nothing overrides that */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

  /* Auth hero: the mascot overlaps the box on purpose, so it must not be cut off */
  .auth-hero.swoosh { overflow: visible; }

  /* Subject cards grow with their text */
  .subject-card { height: auto; }

  /* Bold for titles only: headings inside the tools and the IV and pregnancy screens use a lighter weight */
  .page h4, .iv-row b, .iv-group b, .iv-sub, .iv-step h4, .preg-rule h1, .preg-badge, .prog-dot { font-weight: 700; }

  /* Numbers and initials stay inside the scale; list names wrap instead of being cut */
  .goal-row .goal-streak small { font-size: var(--m-fs-small); }
  .lib-stat b, .podium-step { font-size: var(--m-fs-page); }
  .avatar { font-size: var(--m-fs-page); }
  .flip-generic, .flip-front b { font-size: var(--m-fs-page); }
  .dose-large { font-size: 24px; }
  .page li > b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .fda-badge, .stage-n, .podium-step { font-weight: 700; }

  .install-bar-close { width: var(--m-touch); height: var(--m-touch); }

  /* Leaderboard names and pregnancy labels wrap instead of being cut or squeezed */
  .podium-col b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .fda-badge { flex-shrink: 0; max-width: 100%; text-align: center; line-height: 1.3; }
  .preg-system-tag { border-radius: 12px; line-height: 1.4; padding: 4px 10px; text-align: start; }
  .profile-id .avatar { font-size: var(--m-fs-page); }

  /* Switch: the track stays 30px high, the tappable area is 44px */
  .switch { height: var(--m-touch); padding-block: 7px; background-clip: content-box; }
  .switch span { top: 10px; }

  /* Landing page: the brand and section titles fit the same scale */
  .lp-brand { font-size: 18px; }
  .lp-section-title, .lp-band h2, .land-band h2 { font-size: var(--m-fs-page); }
  .lp-stats b { font-size: var(--m-fs-page); }

  /* Auth hero grows with its text instead of cutting it */
  .auth-hero { height: auto; min-height: 0; }

  /* Choice sheet: the list scrolls and the close button always stays inside the screen */
  .choice-sheet { max-height: 80vh; max-height: 80dvh; overflow: hidden; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .choice-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .choice-sheet > .btn { flex-shrink: 0; }
  .confirm-sheet.choice-sheet { max-height: 80vh; max-height: 80dvh; }

  /* Long confirmation sheets scroll on short screens */
  .confirm-sheet { max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
}

/* Short phones (568px high): the onboarding illustration gives up height so the text and buttons fit */
@media (max-width: 719px) and (max-height: 700px) {
  .ob-visual { min-height: 180px; padding-top: 56px; padding-bottom: 12px; }
  .ob-art { zoom: .58; }
  .ob-body { gap: 8px; padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Very narrow phones (320px): the long pregnancy category label may wrap */
@media (max-width: 340px) {
  .fda-badge { flex-shrink: 1; min-width: 0; }
}

/* Native edges on phones: the status-bar area and the home-indicator area are white, whatever page is
   behind them, and the bottom navigation is a full-width bar that sits on the bottom edge (no floating
   capsule with a cream gap below it). */
@media (max-width: 1099px) {
  html, body { background: #ffffff; }
  body::before, body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    pointer-events: none;
  }
  body::before { top: 0; height: env(safe-area-inset-top, 0px); }
  body::after { bottom: 0; height: env(safe-area-inset-bottom, 0px); }
  .bottom-nav {
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: #ffffff;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
}
.board-me { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Search: the scanner is a small icon inside the search capsule */
.search-scanner-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
.search-scanner-btn span { display: none; }

/* Scanner: the header wraps inside the screen, and suggestion chips are big enough to tap */
.scanner-header { flex-wrap: wrap; min-width: 0; }
.scanner-header-text { min-width: 0; overflow-wrap: anywhere; }
.pill-chip { min-height: 44px; display: inline-flex; align-items: center; }
.scanner-page > *, .scanner-card { min-width: 0; }
.scanner-header h1 { flex-wrap: wrap; overflow-wrap: anywhere; }
#barcode-reader, .scanner-viewport-wrap { max-width: 100% !important; overflow: hidden; }
#barcode-reader video { max-width: 100% !important; height: auto !important; }
.scanner-controls { flex-wrap: wrap; }
.scanner-hint { overflow-wrap: anywhere; }

/* Scanner camera: the library draws its own video and canvas inside the reader; they must fit the box exactly */
#barcode-reader { position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; left: auto !important; right: auto !important; transform: none !important; }
#barcode-reader > div, #barcode-reader video, #barcode-reader canvas { position: relative !important; left: 0 !important; right: auto !important; transform: none !important; max-width: 100% !important; width: 100% !important; height: auto !important; margin: 0 auto !important; }

/* Scanner camera on phones: a compact strip the width of the card, the video filling it */
@media (max-width: 719px) {
  .scanner-viewport-wrap { aspect-ratio: auto; height: 130px; max-height: 130px; }
  #barcode-reader, #barcode-reader > div { height: 100% !important; }
  #barcode-reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* Scanner camera: everything the library draws is pinned inside the box, whatever size the real camera is */
.scanner-viewport-wrap { position: relative; overflow: hidden; contain: paint; }
#barcode-reader { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; overflow: hidden !important; }
#barcode-reader > div { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
#barcode-reader video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#barcode-reader canvas, #qr-shaded-region { display: none !important; }
#scanner-manual-form { display: flex; gap: 8px; min-width: 0; }
#scanner-manual-form input { flex: 1; min-width: 0; }
#scanner-manual-form .btn { flex-shrink: 0; }

/* Profile header: Capcy instead of the name's letters, and the email and plan as two clear rows */
.profile-bot { width: 84px; height: 84px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; overflow: hidden; border: 3px solid #ffffff; }
.profile-bot svg { width: 66px; height: auto; margin-top: 14px; }
.profile-meta { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
.profile-email, .profile-plan { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14px; max-width: 100%; }
.profile-email { background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.profile-email span { overflow-wrap: anywhere; min-width: 0; }
.profile-plan { background: var(--orange-soft); border: 1px solid var(--orange-line); color: var(--orange-deep); font-weight: 600; }
.profile-plan.is-premium { background: var(--grad); border-color: transparent; color: #ffffff; }

/* Pharmacist Duels: Mobile-first compact layout & small font sizing */
.duel-page, .duel-play-page, .duel-finish-page { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 540px; margin: 0 auto; padding-bottom: 28px; }
.duel-hero-card { padding: 14px 16px; background: #ffffff; border-radius: var(--radius-md, 16px); border: 1px solid var(--line, #e2e8f0); }
.duel-hero-head { display: flex; align-items: center; gap: 12px; }
.duel-mascot { flex-shrink: 0; }
.duel-hero-titles { min-width: 0; flex: 1; }
.duel-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--orange-deep, #e65100); background: var(--orange-soft, #fff3e0); padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.duel-title { font-size: 16px !important; margin: 0; font-weight: 700; line-height: 1.3; }
.duel-sub { font-size: 12px !important; margin: 3px 0 0; line-height: 1.35; color: var(--ink-2); }

.duel-stats-bar { display: flex; align-items: center; justify-content: space-around; padding: 12px 14px; background: #ffffff; border-radius: var(--radius-md, 16px); border: 1px solid var(--line, #e2e8f0); }
.duel-stat-col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; text-align: center; }
.duel-stat-num { font-size: 16px; font-weight: 700; color: var(--ink, #1c1b19); }
.duel-stat-wins { color: var(--ok, #2f9e5b); }
.duel-stat-losses { color: var(--bad, #e5484d); }
.duel-stat-winrate { color: var(--orange, #f95e08); }
.duel-stat-lbl { font-size: 11px; font-weight: 500; }
.duel-stat-sep { width: 1px; height: 26px; background: var(--line, #e2e8f0); }
.duel-show-more-wrap { margin-top: 4px; }

.duel-actions-card { padding: 14px 16px; background: #ffffff; border-radius: var(--radius-md, 16px); border: 1px solid var(--line, #e2e8f0); display: flex; flex-direction: column; gap: 10px; }
.duel-actions-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.duel-actions-title { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.duel-btn-primary { height: 42px; font-size: 13.5px; font-weight: 600; gap: 8px; border-radius: 10px; }
.duel-divider { display: flex; align-items: center; text-align: center; color: var(--muted, #94a3b8); font-size: 11px; }
.duel-divider::before, .duel-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--line, #e2e8f0); }
.duel-divider span { padding: 0 10px; }
.duel-search-box { position: relative; display: flex; align-items: center; width: 100%; }
.duel-search-ico { position: absolute; inset-inline-start: 12px; color: var(--muted, #94a3b8); pointer-events: none; display: flex; align-items: center; }
.duel-search-input { width: 100%; height: 40px; border-radius: 10px; border: 1.5px solid var(--line, #e2e8f0); padding: 0 12px; padding-inline-start: 36px; font-size: 13px !important; background: var(--bg, #f8fafc); transition: border-color .15s ease, background .15s ease; }
.duel-search-input:focus { border-color: var(--orange, #f95e08); background: #ffffff; outline: none; }
.duel-search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-height: 200px; overflow-y: auto; border-top: 1px solid var(--line, #e2e8f0); padding-top: 8px; }
.duel-user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bg, #f8fafc); border-radius: 8px; }
.duel-user-info b { font-size: 12.5px; display: block; }
.duel-user-info small { font-size: 11px; color: var(--muted); }

.push-ctrl-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.duel-history-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.duel-history-head h2 { font-size: 13px !important; font-weight: 600; display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); }
.duel-history-list { display: flex; flex-direction: column; gap: 8px; }
.duel-empty-card { padding: 16px; text-align: center; background: #ffffff; border-radius: 12px; border: 1px solid var(--line, #e2e8f0); }
.duel-item-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #ffffff; border-radius: 12px; border: 1px solid var(--line, #e2e8f0); }
.duel-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.duel-avatar-wrap { width: 32px; height: 32px; border-radius: 50%; background: var(--orange-soft, #ffe8d6); display: grid; place-items: center; color: var(--orange-deep, #f95e08); flex-shrink: 0; }
.duel-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duel-item-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.duel-item-details { display: flex; align-items: center; gap: 6px; }
.duel-item-details .badge { font-size: 10px; padding: 2px 6px; }
.duel-item-score { font-size: 11px; }

/* Duel Play Question Screen */
.duel-progress-wrap { width: 100%; height: 4px; background: var(--line, #e2e8f0); border-radius: 999px; overflow: hidden; }
.duel-progress-bar { height: 100%; background: var(--grad, #f95e08); transition: width .3s ease; }
.duel-q-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; }
.duel-q-counter { font-size: 12px; font-weight: 600; }
.duel-question-card { padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.duel-question-prompt { font-size: 15px !important; line-height: 1.45; font-weight: 700; margin: 0; }
.duel-q-visual { display: flex; justify-content: center; align-items: center; padding: 10px; margin: 2px 0 6px; background: var(--bg, #f8fafc); border-radius: 12px; }
.duel-q-visual svg { max-width: 120px; max-height: 90px; }
.duel-choices-list { display: flex; flex-direction: column; gap: 8px; }
.duel-choice-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line, #e2e8f0); background: #ffffff; text-align: start; cursor: pointer; transition: all .15s ease; min-height: 44px; }
.duel-choice-btn:active { transform: scale(0.98); }
.duel-choice-letter { width: 24px; height: 24px; border-radius: 50%; background: var(--bg, #f1f5f9); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.duel-choice-text { font-size: 13px; font-weight: 600; flex: 1; }
.duel-choice-btn.choice-correct { background: #ecfdf5 !important; border-color: #10b981 !important; color: #065f46 !important; }
.duel-choice-btn.choice-correct .duel-choice-letter { background: #10b981; color: #ffffff; }
.duel-choice-btn.choice-wrong { background: #fff1f2 !important; border-color: #f43f5e !important; color: #9f1239 !important; }
.duel-choice-btn.choice-wrong .duel-choice-letter { background: #f43f5e; color: #ffffff; }

/* Duel Finish Result Screen */
.duel-finish-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; gap: 10px; }
.duel-finish-title { font-size: 18px !important; font-weight: 700; margin: 0; }
.duel-finish-score { font-size: 24px; color: var(--orange-deep, #f95e08); margin: 0; }
.duel-finish-time { font-size: 12px; margin: 0; }
.duel-finish-verdict { font-size: 14px; padding: 8px 14px; border-radius: 8px; background: #f8fafc; width: 100%; }
.duel-finish-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }

/* Matching board on mobile: compact, normal word wrapping, light font weight */
@media (max-width: 719px) {
  .match { gap: 6px !important; }
  .match-col { gap: 6px !important; }
  .match-item {
    min-height: 38px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-width: 1.5px !important;
    border-radius: 8px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.25 !important;
  }
}

/* In-app floating notification banner */
.notif-floating-banner {
  position: fixed;
  top: 14px;
  inset-inline-start: 14px;
  inset-inline-end: 14px;
  max-width: 420px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 99999;
  transform: translateY(-130%);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease;
  opacity: 0;
  pointer-events: auto;
}
.notif-floating-banner.visible {
  transform: translateY(0);
  opacity: 1;
}
.notif-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange-soft, #ffe8d6);
  color: var(--orange-deep, #f95e08);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.notif-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.notif-banner-body b {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.notif-banner-body p {
  font-size: 11.5px;
  margin: 0;
  color: var(--ink-2, #475569);
  line-height: 1.3;
}
.notif-banner-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  padding: 4px;
}

/* Admin Custom Notification Broadcast Form */
.admin-broadcast-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.admin-broadcast-form .form-field { display: flex; flex-direction: column; gap: 6px; }
.admin-broadcast-form label { font-size: 12.5px; color: var(--ink-2, #475569); }
.admin-input, .admin-textarea { width: 100%; border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 12px; font-size: 13.5px !important; background: var(--bg, #f8fafc); color: var(--ink, #0f172a); transition: border-color .15s ease, background .15s ease; resize: vertical; }
.admin-input:focus, .admin-textarea:focus { border-color: var(--orange, #f95e08); background: #ffffff; outline: none; }
.admin-broadcast-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }