/* ─── healthdb · mobile shell atoms ──────────────────────────────────
   Shared classes for the phone layouts (MOBILE_HANDOFF_SPEC.md §0):
   the bottom tab bar, the coach FAB, bottom sheets, and the small
   set of atoms the phone compositions reuse (.hd-btn, .seg, .chips,
   .pill, .badge, .skel). Tokens come from base.html (--bg, --accent…);
   the few the atoms need beyond those are defined here for both
   themes. Everything under the 720px query is phone-only; the atoms
   themselves work at any width.

   ".hd-btn" rather than ".btn": base.html's .btn is the desktop
   button and Tailwind's play CDN may also emit one. */

/* The two Tailwind preflight rules the phone layout depends on, so
   it stands on its own (and renders the same in the offline browser
   tests, where the Tailwind CDN is stubbed). No-ops under preflight. */
*, ::before, ::after { box-sizing: border-box; }
html, body { margin: 0; }

:root {
  --onaccent: #fff;
  --amber-soft: #f0e3c8; --red-soft: #f0d9d4;
}
.dark {
  --onaccent: #16171a;
  --amber-soft: #3a3320; --red-soft: #3a2622;
}

/* ── atoms ── */
.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.hd-btn:hover { border-color: var(--text-muted); }
.hd-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }
.hd-btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.dark .hd-btn.primary:hover { background: var(--accent); border-color: var(--accent); opacity: .9; }
.hd-btn.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.dark .hd-btn.accent { color: var(--accent); }
.hd-btn.ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.hd-btn.danger { color: var(--bad); border-color: rgba(176,74,58,.4); }
.hd-btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.hd-btn.xs { min-height: 32px; padding: 0 10px; font-size: 12px; border-radius: 9px; font-weight: 500; }
.hd-btn.block { width: 100%; }
.hd-btn.dashed { border-style: dashed; font-weight: 500; color: var(--text-soft); }
.hd-btn:disabled { opacity: .55; cursor: default; }

.seg { display: flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; }
.seg > button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; padding: 0 4px; cursor: pointer; }
.seg > button.on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg.accent > button.on { background: var(--accent); color: var(--onaccent); }

.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; padding: 4px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; cursor: default; }
button.pill { cursor: pointer; }
.pill.warn { color: var(--warn); background: var(--amber-soft); border-color: rgba(176,122,26,.3); }
.pill.good { color: var(--good); background: rgba(47,138,85,.1); border-color: rgba(47,138,85,.3); }
.pill.bad { color: var(--bad); background: var(--red-soft); border-color: rgba(176,74,58,.3); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.badge.good { background: rgba(47,138,85,.12); color: var(--good); }
.badge.warn { background: rgba(176,122,26,.14); color: var(--warn); }
.badge.bad { background: rgba(176,74,58,.12); color: var(--bad); }
.badge.neutral { background: var(--bg-soft); color: var(--text-muted); }

.dot.good { background: var(--good); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.neutral { background: var(--border-strong); }

.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.eyebrow.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: .1em; font-size: 10.5px; }

.skel { display: block; background: linear-gradient(90deg, var(--bg-soft), var(--border), var(--bg-soft)); background-size: 200% 100%; border-radius: 8px; animation: hd-skel 1.4s linear infinite; }
@keyframes hd-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Numeric field with a unit suffix inside the box (phone forms). */
.hd-num { position: relative; display: block; min-width: 0; }
.hd-num > input { width: 100%; }
.hd-num > .unit { display: none; }
@media (max-width: 720px) {
  .hd-num > input { padding-right: 36px; }
  .hd-num > input::placeholder { color: transparent; }
  .hd-num > .unit { display: block; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); pointer-events: none; }
}

/* ── bottom tab bar ── */
.m-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(58px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom); background: color-mix(in oklab, var(--bg-elev) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-top: 1px solid var(--border); grid-template-columns: repeat(4, 1fr); }
@supports not (background: color-mix(in oklab, red 50%, blue)) { .m-tabbar { background: var(--bg-elev); } }
.m-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; font-family: inherit; font-size: 10.5px; font-weight: 500; color: var(--text-muted); background: none; border: 0; border-radius: 12px; padding: 4px 0; text-decoration: none; cursor: pointer; }
.m-tab svg { width: 24px; height: 24px; }
.m-tab.on { color: var(--accent-ink); }
.dark .m-tab.on { color: var(--accent); }
.m-tab.on svg { stroke-width: 2; }

/* ── FAB ── */
.m-fab { display: none; position: fixed; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 45; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--accent); color: var(--onaccent); border: 0; font-family: inherit; font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.22); cursor: pointer; }
.m-fab .aidot { width: 8px; height: 8px; border-radius: 50%; background: var(--onaccent); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.m-fab .m-fab-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--onaccent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }

/* ── sheets ──
   Phone: a scrim and a bottom-anchored panel with a grab handle, a
   head, a scrolling body and an optional pinned foot. Visibility is
   Alpine's (`x-show` + `x-cloak`), so the resting display here is the
   *shown* state — a `display: none` default would beat x-show. */
.m-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; }
.m-sheet { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--bg); color: var(--text); border-radius: 22px 22px 0 0; max-height: 88dvh; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.m-sheet-grab { display: block; width: 36px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 8px auto 4px; flex: none; touch-action: none; }
.m-sheet-grab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 28px; }
.m-sheet-head { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; flex: none; }
.m-sheet-title { font-size: 17px; font-weight: 600; }
.m-sheet-meta { font-size: 12px; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sheet-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none; }
.m-sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.m-sheet-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg); flex: none; }
.m-sheet-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Sheet list rows (the More sheet, action sheets). */
.m-list { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 0 4px 0 16px; }
.m-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font-family: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.m-list-row:first-child { border-top: 0; }
.m-list-row.active { color: var(--accent-ink); font-weight: 500; }
.dark .m-list-row.active { color: var(--accent); }
.m-list-row.danger { color: var(--bad); }
.m-list-row .chev { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); flex: none; }
.m-list-row .chev svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .m-tabbar { display: grid; }
  .m-fab { display: inline-flex; }
  body.hd-sheet-open { overflow: hidden; }
  /* Explicit page padding (the Tailwind px-4 / py-6 values) so pages
     that bleed to the edges with negative margins never overflow. */
  main.page-main { padding: 24px 16px calc(96px + env(safe-area-inset-bottom)) !important; }
  /* Corner toasts sit above the tab bar, not under it. */
  .toast-region { bottom: calc(74px + env(safe-area-inset-bottom)); right: 12px; left: 12px; max-width: none; }
}
@media (min-width: 720.02px) {
  .m-tabbar, .m-fab, .hd-phone { display: none !important; }
}
@media (max-width: 720px) {
  .hd-desk { display: none !important; }
}

/* ── modals → sheets (phone) ──
   The centered modal cards (log / goal / plan-detail / session-detail
   / activity) keep their markup and HTMX targets; ≤720px the backdrop
   pins them to the bottom edge as a sheet with a grab handle, and the
   form's save/cancel row becomes the pinned foot. The shells carry
   inline desktop styles, hence the !important here. */
.m-sheet-grab.hd-phone { position: relative; margin: 6px auto 2px; }
@media (max-width: 720px) {
  .ln-backdrop, .pd-backdrop, .sd-backdrop, .activity-modal-backdrop {
    align-items: flex-end !important; justify-content: stretch !important;
    padding: 0 !important; overflow: hidden !important;
  }
  .hd-sheet {
    position: relative; box-sizing: border-box; width: 100% !important; max-width: none !important;
    max-height: 88dvh !important; overflow: auto !important;
    border-radius: 22px 22px 0 0 !important; border-width: 1px 0 0 !important;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,.25) !important;
    -webkit-overflow-scrolling: touch;
  }
  .hd-sheet .ln-head { position: sticky; top: 0; background: var(--bg-elev); padding: 4px 0 8px; margin-bottom: 8px !important; z-index: 2; }
  .hd-sheet .ln-x { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border) !important; border-radius: 10px; background: var(--bg-elev) !important; font-size: 20px !important; padding: 0 !important; }
  .hd-sheet .pd-close, .hd-sheet .sd-close, .hd-sheet .activity-modal-close { top: 8px; right: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); padding: 0; }
  .hd-sheet .pd-head, .hd-sheet .sd-head { margin-right: 44px; margin-top: 8px; }
  .hd-sheet .activity-modal-close { position: static; flex: none; }
  /* Pinned save / cancel foot (log + goal forms). */
  .hd-sheet .ln-actions {
    position: sticky; bottom: calc(-12px - env(safe-area-inset-bottom)); z-index: 2;
    margin: 12px -16px calc(-12px - env(safe-area-inset-bottom));
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-elev); border-top: 1px solid var(--border);
    gap: 8px;
  }
  .hd-sheet .ln-actions .ln-btn { flex: 1; min-height: 44px; font-size: 14px; font-weight: 600; border-radius: 12px; }
  .hd-sheet .ln-actions .ln-btn-primary { flex: 2; }
}

/* Hover-revealed actions are always visible where there is no hover. */
@media (hover: none) {
  .acw-fact-acts { opacity: 1; }
}