/* Dorax Finance — "What if…?" on a phone in the summary's look (v318; the markup: features/phone/whatif-land.js). On the forest the answer: what it
   asks, the month in large, how much sooner as a lime pill, the month without the change, and how long today's money would last; in the sheet the
   changes, each a row with − and + round its amount; the goals to choose from as rows; the button that keeps it at the foot, only once something
   changed. The parts it shares with a goal's panel (.gv-sec, .gv-pill, .gv-foot, .rv-row) are styled in look-land-goal-view.css and
   look-land-runway-view.css. */
@media (max-width: 920px) {
  /* ---------- the answer, on the forest ---------- */
  :root.land #overlay .wi-land { display: flex; flex-direction: column; gap: 12px; }
  :root.land #overlay .wi-ans { display: flex; flex-direction: column; gap: 8px; }
  :root.land #overlay .wi-ask { color: var(--lk-soft); font-size: 14px; line-height: 1.35; }
  :root.land #overlay .wi-when { color: #FFFFFF; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
  :root.land #overlay .wi-was { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--lk-soft); font-size: 14px; line-height: 1.35; }
  :root.land #overlay .wi-was .gv-pill { padding: 6px 12px; }
  :root.land #overlay .wi-today { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); color: #FFFFFF; font-size: 14.5px; line-height: 1.4; }

  /* ---------- the changes, in the sheet ---------- */
  :root.land #overlay .wi-land .bq-sheet { gap: 26px; padding-bottom: 28px; }
  :root.land #overlay .wi-lvs { display: flex; flex-direction: column; }
  :root.land #overlay .wi-lv { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; }
  :root.land #overlay .wi-lv + .wi-lv::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--bq-line); }
  :root.land #overlay .wi-lv .bp-t > b, :root.land #overlay .wi-lv .bp-w { white-space: normal; }
  :root.land #overlay .wi-lv .bp-w { line-height: 1.35; }
  :root.land #overlay .wi-step { flex: none; display: flex; align-items: center; gap: 2px; }
  :root.land #overlay .wi-b { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-accent); }
  :root.land #overlay .wi-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  :root.land #overlay .wi-b[aria-disabled="true"] { color: var(--bq-ink-3); cursor: default; }
  :root.land #overlay .wi-b { transition: transform 140ms ease, background-color 200ms ease, color 200ms ease; }
  :root.land #overlay .wi-b:active:not([aria-disabled="true"]) { transform: scale(.86); background: color-mix(in srgb, var(--bq-accent) 18%, var(--bq-card)); }      /* v319: a press you can feel */
  :root.land #overlay .wi-foot .btn { transition: transform 140ms ease; }
  :root.land #overlay .wi-foot .btn:active { transform: scale(.97); }
  @media (prefers-reduced-motion: reduce) { :root.land #overlay :is(.wi-b, .wi-foot .btn) { transition: none; } :root.land #overlay .wi-b:active:not([aria-disabled="true"]) { transform: none; } }
  :root.land #overlay .wi-b:focus-visible, :root.land #overlay .wi-amt:focus-within { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land #overlay .wi-amt { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 86px; min-height: 44px; border-radius: 12px; cursor: text; }
  :root.land #overlay .wi-amt span { color: var(--bq-ink-3); font-size: 13px; font-weight: 600; }
  :root.land #overlay .wi-amt input { all: unset; box-sizing: border-box; width: 56px; min-height: 44px; color: var(--bq-ink); font-size: 16px; font-weight: 600; text-align: left; }
  :root.land #overlay .wi-land .wi-pick { gap: 4px; }
  :root.land #overlay .wi-land .wi-pick .gq-h { margin-bottom: 2px; }
  :root.land #overlay .drawer > footer.wi-foot:empty { display: none; }
  :root.land #overlay .wi-foot .btn.primary { flex: 1 1 auto; gap: 8px; }
  :root.land #overlay .wi-foot .btn svg { width: 17px; height: 17px; }
  @media (max-width: 374px) { :root.land #overlay .wi-amt { width: 72px; } :root.land #overlay .wi-amt input { width: 46px; font-size: 15px; } }
}