/* ACGS Life mobile-first visual system. One smartphone UI at all viewport widths.
 * Wide desktop windows present the same phone interface centered for review.
 * Do not introduce a second desktop layout during Phase 1.
 */
:root { --phone-max: 460px; --touch-target: 44px; }
html { min-width: 0; -webkit-text-size-adjust: 100%; }
body { min-width: 0; background: #e8efea; }
#app { min-height: 100dvh; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #65957b; outline-offset: 2px; }
/* One app viewport, including on desktop: mobile is the design source. */
.shell { display: block; width: min(100%, var(--phone-max)); min-height: 100dvh; margin-inline: auto; background: #f6f8f5; box-shadow: 0 0 44px rgba(27,65,51,.08); }
.side { display: none; }
.main { width: 100%; max-width: none; padding: 22px 17px calc(100px + env(safe-area-inset-bottom)); }
.topline { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.topline .pill { font-size: .67rem; }
.main h1 { font-size: clamp(1.74rem, 7.8vw, 2.26rem); overflow-wrap: break-word; }
.main h2 { font-size: 1.4rem; }
.grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.span7, .span5, .span6, .span12 { grid-column: 1; min-width: 0; }
.card { border-radius: 17px; padding: 19px 17px; min-width: 0; }
.cardhead, .summaryline { min-width: 0; }
.cardhead > div, .summaryline > * { min-width: 0; }
.summaryline { flex-wrap: wrap; overflow-wrap: anywhere; }
.hero { margin: 15px 0 21px; min-height: 168px; padding: 23px 20px; }
.hero:after { font-size: 58px; right: 6px; bottom: 2px; }
.hero h1 { padding-right: 18px; }
.formgrid { grid-template-columns: 1fr; gap: 0; }
.field input, .field select, .field textarea { min-height: var(--touch-target); font-size: 16px; border-radius: 12px; }
.btn, .login-option, .ai-explain { min-height: var(--touch-target); }
.task { min-height: 55px; }
.task input[type='checkbox'] { width: 22px; height: 22px; flex: none; }
.metric { font-size: clamp(1.72rem, 8vw, 2.2rem); overflow-wrap: anywhere; }
/* Bottom navigation: phone widths down to 320px, five tappable items. */
.mobile-nav { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 2px; position: fixed; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); width: min(100%, var(--phone-max)); background: rgba(255,255,255,.98); border-top: 1px solid #e4eae5; box-shadow: 0 -8px 32px #203f4020; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); z-index: 5; }
.mobile-nav button { min-width: 0; min-height: 48px; font-size: .64rem; line-height: 1.2; padding: 4px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: #637d73; font-weight: 750; border-radius: 10px; }
.mobile-nav button.active { background: #e2f1e8; color: #1a5a45; }
.mobile-nav button span { font-size: 1.32rem; line-height: 1; }
.mobile-nav button:focus-visible { outline: 3px solid #65957b; outline-offset: -2px; }
.toast { position: fixed; left: max(14px, calc((100% - var(--phone-max))/2 + 14px)); right: max(14px, calc((100% - var(--phone-max))/2 + 14px)); bottom: calc(82px + env(safe-area-inset-bottom)); max-width: none; }