/* Dorax Finance — "How do I get to…?" (What if) for the owner in the v6 look (v350; the markup: features/phone/r6-whatif.js; the canvas board
   "Que-pasa-si-V6"). The panel is a whole page on the black #070808: its question in the top row with × as a glass circle; the answer on the left
   (the month at 52 px light, its year dimmer, the lime pill, the month without the change); the climb as bars under a dashed line; the changes in
   one card with the edge of light, − and + as glass circles; the button that keeps it lime at the foot, only once something changed.
   Only on the owner's panel (.body.r6wi); the summary's panel keeps look-land-whatif.css. */
@media (max-width: 920px) {
  /* ---------- the page ---------- */
  :root #overlay .drawer:has(> .body.r6wi) {
    top: 0; bottom: 0; height: 100dvh; max-height: none; padding-top: var(--safe-t); border: 0; border-radius: 0;
    background: #070808; color: #EFF1F6;
  }
  :root #overlay .drawer:has(> .body.r6wi) > .grab { display: none; }
  :root #overlay .drawer:has(> .body.r6wi) > header { gap: 12px; padding: 12px 16px 10px; border-bottom: 0; background: transparent; }
  :root #overlay .drawer:has(> .body.r6wi) > header h2 { flex: 1 1 auto; min-width: 0; margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
  :root #overlay .drawer:has(> .body.r6wi) > header [data-a="close"] {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  :root #overlay .drawer:has(> .body.r6wi) > header [data-a="close"]:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }
  :root #overlay .drawer > .body.r6wi { display: flex; flex-direction: column; gap: 0; padding: 4px 16px 28px; background: transparent; color: #EFF1F6; overflow-x: hidden; }

  /* ---------- the answer, on the left ---------- */
  :root #overlay .r6wi .r6wi-ans { display: flex; flex-direction: column; margin-top: 14px; }
  :root #overlay .r6wi .wi-ask { color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.35; }
  :root #overlay .r6wi .wi-when { margin-top: 4px; color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1.02; }
  :root #overlay .r6wi .r6wi-yr { color: rgba(239, 241, 246, .42); font-size: 26px; letter-spacing: -.02em; }
  :root #overlay .r6wi .wi-was { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; color: rgba(239, 241, 246, .6); font-size: 14px; line-height: 1.35; }
  :root #overlay .r6wi .wi-was .gv-pill { align-self: auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(159, 209, 130, .14); color: #9FD182; font-size: 13.5px; font-weight: 500; }
  :root #overlay .r6wi .wi-today { margin-top: 10px; padding: 0; border: 0; color: #EFF1F6; font-size: 14.5px; line-height: 1.4; }

  /* ---------- the climb: what is put aside by each month's end, against the line ---------- */
  :root #overlay .r6wi .r6wi-climb { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 0; }
  :root #overlay .r6wi .r6wi-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); align-items: end; gap: 7px; height: 150px; }
  :root #overlay .r6wi .r6wi-bar { display: block; border-radius: 10px 10px 4px 4px; background: rgba(239, 241, 246, .12); transform-origin: 50% 100%;
    transition: height .5s cubic-bezier(.2, .9, .25, 1), background-color .3s ease, box-shadow .3s ease; }
  :root #overlay .r6wi .r6wi-bar.over { background: rgba(159, 209, 130, .3); }
  :root #overlay .r6wi .r6wi-bar.hit { background: #9FD182; box-shadow: none; }
  :root #overlay .r6wi .r6wi-line { position: absolute; left: 0; right: 0; z-index: 1; height: 0; border-top: 1.5px dashed rgba(239, 241, 246, .4); pointer-events: none; transition: bottom .5s cubic-bezier(.2, .9, .25, 1); }
  :root #overlay .r6wi .r6wi-line small { position: absolute; left: 0; bottom: 5px; color: rgba(239, 241, 246, .6); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
  :root #overlay .r6wi .r6wi-ms { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 7px; }
  :root #overlay .r6wi .r6wi-ms > span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
  :root #overlay .r6wi .r6wi-ms small { color: rgba(239, 241, 246, .5); font-size: 11.5px; font-weight: 500; transition: color .3s ease; }
  :root #overlay .r6wi .r6wi-ms i { display: block; width: 6px; height: 6px; border-radius: 50%; transition: background-color .3s ease, box-shadow .3s ease; }
  :root #overlay .r6wi .r6wi-ms .hit small { color: #9FD182; }
  :root #overlay .r6wi .r6wi-ms .hit i { background: #9FD182; }
  :root #overlay .r6wi .r6wi-ms .base i { box-shadow: inset 0 0 0 1.5px rgba(239, 241, 246, .6); }

  /* ---------- the sections: a heading and a quiet line under it; their card with the edge of light ---------- */
  :root #overlay .r6wi .r6wi-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  :root #overlay .r6wi .r6wi-h { display: flex; flex-direction: column; gap: 3px; }
  :root #overlay .r6wi .r6wi-h h2 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root #overlay .r6wi .r6wi-h small { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root #overlay .r6wi .r6wi-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid transparent; border-radius: 32px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%) padding-box, linear-gradient(#121414, #121414) padding-box,
      linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .06)) border-box; }

  /* ---------- the changes: each a row, − and + as glass circles round its amount ---------- */
  :root #overlay .r6wi .r6wi-lv { position: relative; display: flex; align-items: center; gap: 10px; min-height: 84px; margin: 0 10px 0 18px; }
  :root #overlay .r6wi .r6wi-lv + .r6wi-lv { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root #overlay .r6wi .r6wi-lt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
  :root #overlay .r6wi .r6wi-lt b { color: #EFF1F6; font-size: 15px; font-weight: 500; line-height: 1.3; }
  :root #overlay .r6wi .r6wi-lt small { color: rgba(239, 241, 246, .55); font-size: 12.5px; line-height: 1.35; }
  :root #overlay .r6wi .r6wi-step { flex: none; display: flex; align-items: center; gap: 2px; }
  :root #overlay .r6wi .r6wi-step .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: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #9FD182; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    transition: transform .34s cubic-bezier(.2, .9, .3, 1.25), color .2s ease; }
  :root #overlay .r6wi .r6wi-step .wi-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  :root #overlay .r6wi .r6wi-step .wi-b:active:not([aria-disabled="true"]) { transform: scale(.88); }
  :root #overlay .r6wi .r6wi-step .wi-b[aria-disabled="true"] { color: rgba(239, 241, 246, .3); cursor: default; }
  :root #overlay .r6wi .r6wi-step .wi-b:focus-visible, :root #overlay .r6wi .r6wi-amt:focus-within { outline: 2px solid #9FD182; outline-offset: 2px; }
  :root #overlay .r6wi .r6wi-amt { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 78px; min-height: 44px; border-radius: 12px; cursor: text; color: #EFF1F6; }
  :root #overlay .r6wi .r6wi-amt span { color: rgba(239, 241, 246, .45); font-size: 13px; font-weight: 500; }
  :root #overlay .r6wi .r6wi-amt input { all: unset; box-sizing: border-box; width: 50px; min-height: 44px; color: inherit; font-size: 15px; font-weight: 500; text-align: left; }
  :root #overlay .r6wi .r6wi-amt.on { color: #9FD182; }
  :root #overlay .r6wi .r6wi-amt.on span { color: rgba(159, 209, 130, .7); }

  /* ---------- which goal gets it: rows in one card ---------- */
  :root #overlay .r6wi .r6wi-row { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 12px; min-height: 72px; margin: 0 18px 0 16px; color: #EFF1F6; }
  :root #overlay .r6wi .r6wi-row + .r6wi-row { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root #overlay .r6wi .r6wi-row > svg { flex: none; color: rgba(239, 241, 246, .45); }
  :root #overlay .r6wi .r6wi-row:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; border-radius: 16px; }
  :root #overlay .r6wi .r6wi-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }

  :root #overlay .r6wi .r6wi-note { margin: 20px 0 0; color: rgba(239, 241, 246, .5); font-size: 13px; line-height: 1.5; }

  /* ---------- at the foot, once something changed: the one button that keeps it ---------- */
  :root #overlay .drawer > footer.r6wi-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px calc(20px + var(--safe-b)); border: 0; background: linear-gradient(180deg, rgba(7, 8, 8, 0), #070808 40%); }
  :root #overlay .drawer > footer.r6wi-foot:empty { display: none; }
  :root #overlay .r6wi-foot .r6wi-go { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 52px; padding: 8px 22px 8px 18px; border-radius: 999px;
    background: #9FD182; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #101212;
    font-size: 15px; font-weight: 500; line-height: 1.25; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root #overlay .r6wi-foot .r6wi-go svg { flex: none; width: 19px; height: 19px; }
  :root #overlay .r6wi-foot .r6wi-go:active { transform: scale(.965); }
  :root #overlay .r6wi-foot .r6wi-go:focus-visible { outline: 2px solid #EFF1F6; outline-offset: 3px; }

  @media (max-width: 374px) { :root #overlay .r6wi .wi-when { font-size: 46px; } :root #overlay .r6wi .r6wi-amt { width: 68px; } :root #overlay .r6wi .r6wi-amt input { width: 42px; font-size: 15px; } :root #overlay .r6wi .r6wi-plot, :root #overlay .r6wi .r6wi-ms { gap: 5px; } }
  @media (prefers-reduced-motion: reduce) { :root #overlay .r6wi :is(.r6wi-bar, .r6wi-line, .r6wi-ms small, .r6wi-ms i, .wi-b) { transition: none; } :root #overlay .r6wi-foot .r6wi-go { transition: none; } :root #overlay .r6wi .r6wi-step .wi-b:active:not([aria-disabled="true"]) { transform: none; } }
}