/* MoneyWise Operating Layer — iPhone (402 × 874) */
body.mobile{overflow:hidden;background:var(--ground);font-size:14px;
  -webkit-tap-highlight-color:transparent;user-select:none}
#app{height:100vh;display:flex;flex-direction:column}

/* status-bar inset so nothing hides under the notch */
.mhead{flex:none;background:var(--navy);color:#fff;padding:54px 18px 0}
.mhead .top{display:flex;align-items:center;gap:10px;padding-bottom:13px}
.mhead img{height:19px;filter:brightness(0) invert(1)}
.mhead .lay{font-family:var(--ui);font-size:8px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.65)}
.mhead .seat{margin-left:auto;display:flex;align-items:center;gap:7px}
.mhead .seat .nm{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}

/* the cutoff, permanently on screen — it is what the day is against */
.mcut{background:var(--navy-deep);color:#fff;padding:11px 18px 13px;display:flex;align-items:flex-end;gap:12px}
.mcut.warn{background:#8A5A00} .mcut.late{background:#8E0E15}
.mcut .lb{font-family:var(--ui);font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:3px}
.mcut .vl{font-family:var(--ui);font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;line-height:.95}
.mcut .rt{margin-left:auto;text-align:right}
.mcut .rt b{font-family:var(--ui);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;display:block;line-height:1}

.mbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ground)}
.mpad{padding:16px 18px 26px}

/* section head */
.mshd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 0 8px;border-bottom:2px solid var(--navy);margin-bottom:12px}
.mshd h3{margin:0;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--navy)}

/* stat pair */
/* a ledger line, not two tiles */
.mstats{display:flex;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule);
  background:var(--paper);margin-bottom:20px}
.mstat{padding:13px 14px 14px;flex:1;min-width:0}
.mstat+.mstat{border-left:1px solid var(--rule-faint)}
.mstat .k{font-family:var(--ui);font-size:8.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mstat .v{font-family:var(--ui);font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.018em;color:var(--navy);line-height:1.05}
.mstat .f{font-size:10.5px;color:var(--faint);margin-top:5px;line-height:1.35}

/* card — the phone's list unit; taller than the desktop row, thumb-sized */
.card{background:var(--paper);border:1px solid var(--rule-soft);padding:14px 15px;
  margin-bottom:9px;display:block;width:100%;transition:background var(--fast)}
.card:active{background:var(--navy-05)}
.card .ct{font-family:var(--serif);font-size:16.5px;line-height:1.28;color:var(--ink);margin:7px 0 5px}
.card .cs{font-size:11px;color:var(--faint);line-height:1.4}
.card.done{opacity:.5}

/* full-screen detail */
.msub{flex:none;background:var(--paper);border-bottom:1px solid var(--rule);
  padding:11px 14px;display:flex;align-items:center;gap:11px}
.back{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:12px;
  font-weight:600;color:var(--navy)}

/* was → now, stacked for a narrow screen */
.mdiff{border:1px solid var(--rule-soft);background:var(--paper)}
.mdiff .s{padding:12px 14px}
.mdiff .s+.s{border-top:1px solid var(--rule-soft);background:var(--navy-03)}

/* sticky action dock */
.dock{flex:none;background:var(--paper);border-top:1px solid var(--rule);padding:12px 16px 14px;
  display:flex;flex-direction:column;gap:9px}

/* option buttons — big enough for a thumb */
.mopt{display:flex;align-items:center;gap:12px;width:100%;background:var(--paper);
  border:1px solid var(--rule-soft);padding:14px 15px;margin-bottom:8px;text-align:left}
.mopt:active{background:var(--navy-05)}
.mopt .mk{width:17px;height:17px;border:1px solid var(--rule);flex:none;position:relative;background:#fff}
.mopt.rec .mk{border-color:var(--navy)} .mopt.rec .mk::after{content:"";position:absolute;inset:3px;background:var(--navy)}
.mopt .tx{font-family:var(--serif);font-size:16px;color:var(--ink);flex:1;line-height:1.3}

/* bottom tab bar */
.tabs{flex:none;background:var(--paper);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:20px}
.tab{padding:9px 0 7px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.tab .tl{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.tab .ti{width:19px;height:19px;display:block}
.tab.on .tl{color:var(--navy)} .tab.on .ti{color:var(--navy)}
.tab .ti{color:var(--muted)}
.tab .bdg{position:absolute;top:5px;right:50%;margin-right:-21px;background:var(--alert);color:#fff;
  font-family:var(--ui);font-size:9px;font-weight:700;min-width:15px;height:15px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ask, on a phone */
.qcard{background:var(--paper);border:1px solid var(--rule-soft);padding:14px 15px;
  margin-bottom:9px;width:100%;text-align:left;font-family:var(--serif);font-size:16px;
  color:var(--navy);line-height:1.3}
.qcard:active{background:var(--navy-05)}

/* a phone has no visible scrollbar */
.mbody{scrollbar-width:none;-ms-overflow-style:none}
.mbody::-webkit-scrollbar{display:none}

/* five tabs, and Ask promoted into the header */
.tabs.t5{grid-template-columns:repeat(5,1fr)}
.tabs.t5 .tl{font-size:9px;letter-spacing:.04em}
.tabs.t5 .bdg{margin-right:-17px}
.askbtn{margin-left:auto;font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.4);padding:5px 10px}
.askbtn:active{background:rgba(255,255,255,.14)}
.mhead .seat{margin-left:12px}