/* Dorax Finance — the owner's panels that explain, in the v6 look (v433; the markup: features/phone/r6-why.js): "You can spend" opened and every
   notice of the bell. The whole screen on the page's black #070808 (no forest, no sheet); its top row: ‹ when it came from the bell, its name, ×;
   the figure and its pill as on the summary v4; cards #121414 with their edge of light; round tinted icons; lime flat; at the thumb, in lime.
   Only while its body is on screen (the owner on a phone: r6Mine). */
@media (max-width: 920px) {
  /* ---------- the frame ---------- */
  #overlay .drawer:has(> .body.r6-why) {
    --ink: #EFF1F6; --ink-2: rgba(239, 241, 246, .66); --ink-3: rgba(239, 241, 246, .52); --line: rgba(239, 241, 246, .08); --focus: #9FD182;
    top: 0; max-height: none; height: 100dvh; padding-top: var(--safe-t); border: 0; border-radius: 0; background: #070808; color: #EFF1F6;
  }
  #overlay .drawer:has(> .body.r6-why) > .grab { display: none; }
  #overlay .drawer:has(> .body.r6-why) :focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }
  #overlay .drawer:has(> .body.r6-why) > header { align-items: center; gap: 10px; min-height: 72px; padding: 12px 16px 6px; border: 0; background: #070808; }
  #overlay .drawer:has(> .body.r6-why) > header h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  #overlay .drawer:has(> .body.r6-why) > header :is([data-a="close"], .dr-back) { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; 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: #EFF1F6; }
  #overlay .drawer:has(> .body.r6-why) > header :is([data-a="close"], .dr-back) svg { width: 17px; height: 17px; }
  #overlay .drawer:has(> .body.r6-why) > header .dr-back-slot:empty { display: none; }

  /* ---------- the body, on the page ---------- */
  #overlay .r6-why { display: flex; flex-direction: column; gap: 0; padding: 0 16px 28px; background: #070808; color: #EFF1F6; overflow-x: hidden; }
  #overlay :is(.r6-why, .r6wy-foot) .press { transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); -webkit-tap-highlight-color: transparent; }
  #overlay :is(.r6-why, .r6wy-foot) .press:active { transform: scale(.965); }
  /* a notice's name is a sentence ("Transacciones sin categoría", "Supermercado: te pasaste del límite"): two lines rather than cut */
  #overlay .drawer:has(> .body.r6wy-is) > header h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 20px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  #overlay .r6-why h2 { margin: 0 0 12px; color: #EFF1F6; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
  #overlay .r6wy-sec { display: flex; flex-direction: column; margin-top: 30px; }
  #overlay .r6wy-card { margin: 0; padding: 4px 16px; list-style: none; border: 1px solid transparent; border-radius: 28px; background: var(--r6-face, 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, var(--r6-rim, 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 top: the figure, its pill, its line (as the summary v4's), or a notice's art and what is going on ---------- */
  #overlay .r6wy-top { display: flex; flex-direction: column; align-items: flex-start; padding-top: 10px; }
  #overlay .r6wy-fig { display: flex; align-items: baseline; gap: 8px; color: rgba(239, 241, 246, .55); font-size: 16px; }
  #overlay .r6wy-fig b { margin-right: 6px; color: #EFF1F6; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
  #overlay .r6wy-fig.neg b { color: #FF8A80; }
  #overlay .r6wy-pill { display: inline-flex; align-items: center; min-height: 28px; margin-top: 12px; padding: 4px 12px; box-sizing: border-box; border-radius: 999px; background: rgba(159, 209, 130, .14); color: #C9E9B6; font-size: 13px; font-weight: 500; line-height: 1.35; }
  #overlay .r6wy-pill.neg { background: rgba(255, 138, 128, .14); color: #FFB3AC; }
  #overlay .r6wy-say { margin: 12px 0 0; color: rgba(239, 241, 246, .6); font-size: 14.5px; line-height: 1.45; }
  #overlay .r6wy-split { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
  #overlay .r6wy-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; transform-origin: 0 50%; animation: r6wy-grow .9s cubic-bezier(.2, .9, .25, 1) .15s both; }
  #overlay .r6wy-bar > i { min-width: 6px; }
  #overlay :is(.r6wy-bar, .r6wy-legend) i.held { background: rgba(239, 241, 246, .22); }
  #overlay :is(.r6wy-bar, .r6wy-legend) i.free { background: #9FD182; }
  @keyframes r6wy-grow { from { transform: scaleX(0); } }
  #overlay .r6wy-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: rgba(239, 241, 246, .6); font-size: 13.5px; }
  #overlay .r6wy-legend > span { display: inline-flex; align-items: center; gap: 7px; }
  #overlay .r6wy-legend i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
  #overlay .r6wy-legend b { color: #EFF1F6; font-weight: 500; }
  /* a notice: its art in a round tint of its level, then what is going on */
  #overlay .r6wy-top.is { gap: 18px; }
  #overlay .r6wy-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(159, 209, 130, .12); color: #9FD182; }
  #overlay .r6wy-art.warn { background: rgba(247, 210, 122, .13); color: #F7D27A; }
  #overlay .r6wy-art.neg { background: rgba(255, 138, 128, .13); color: #FF8A80; }
  #overlay .r6wy-art :is(svg, .obj, img) { width: 36px; height: 36px; }
  #overlay .r6wy-what { margin: 0; color: rgba(239, 241, 246, .82); font-size: 17px; line-height: 1.5; }
  #overlay .r6wy-what b { color: #EFF1F6; font-weight: 500; }
  #overlay .r6wy-what b.num { font-weight: 600; }
  #overlay .r6wy-what b.num.neg { color: #FF8A80; }      /* v519: the figure in 600, coral below zero */
  #overlay .r6wy-is .r6wy-sec > h2 { font-size: 17px; }

  /* ---------- the rows: steps, ways to solve it ---------- */
  #overlay .r6wy-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(239, 241, 246, .07); color: rgba(239, 241, 246, .85); }
  #overlay .r6wy-ic svg { width: 19px; height: 19px; }
  #overlay .r6wy-ic.ok { background: rgba(159, 209, 130, .14); color: #9FD182; }
  #overlay .r6wy-ic.neg { background: rgba(255, 138, 128, .14); color: #FF8A80; }
  #overlay .r6wy-st, #overlay .r6wy-fix { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 8px 0; box-sizing: border-box; }
  #overlay .r6wy-st + .r6wy-st, #overlay .r6wy-fix + .r6wy-fix { border-top: 1px solid rgba(239, 241, 246, .07); }
  #overlay .r6wy-st-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  #overlay .r6wy-st-t b { color: #EFF1F6; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
  #overlay .r6wy-st-t small { color: rgba(239, 241, 246, .55); font-size: 13px; line-height: 1.35; }
  #overlay .r6wy-st-v { flex: none; color: #EFF1F6; font-size: 15.5px; font-weight: 500; }
  #overlay .r6wy-st.out .r6wy-st-v { color: rgba(239, 241, 246, .62); }
  #overlay .r6wy-st.later .r6wy-st-v { color: rgba(239, 241, 246, .4); font-weight: 400; }
  #overlay .r6wy-st:is(.left, .miss) .r6wy-st-t b { font-weight: 500; }
  #overlay .r6wy-st:is(.left, .miss) .r6wy-st-v { font-size: 17px; font-weight: 500; }
  #overlay .r6wy-st.miss .r6wy-st-v { color: #FF8A80; }
  #overlay .r6wy-div { display: flex; align-items: center; gap: 10px; margin: 14px 4px 0; color: rgba(239, 241, 246, .6); font-size: 14.5px; }
  #overlay .r6wy-div b { color: #EFF1F6; font-weight: 500; }
  #overlay .r6wy-note { display: flex; align-items: flex-start; gap: 10px; margin: 12px 4px 0; color: rgba(239, 241, 246, .5); font-size: 13.5px; line-height: 1.45; }
  #overlay .r6wy-note svg { flex: none; margin-top: 1px; color: rgba(239, 241, 246, .4); }
  #overlay .r6wy-fix { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 10px 0; }
  #overlay .r6wy-fix + .r6wy-fix { border-top: 1px solid rgba(239, 241, 246, .07); }
  #overlay .r6wy-fix .r6wy-ic { background: rgba(159, 209, 130, .12); color: #9FD182; }
  #overlay .r6wy-chev { flex: none; display: grid; color: rgba(239, 241, 246, .45); }

  /* ---------- the month's split (the plan uses more than comes in), as Plan's ---------- */
  #overlay .r6wy-month { padding: 16px 16px 6px; }
  #overlay .r6wy-in { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  #overlay .r6wy-in small { color: rgba(239, 241, 246, .55); font-size: 13.5px; }
  #overlay .r6wy-in b { color: #EFF1F6; font-size: 16px; font-weight: 500; }
  #overlay .r6wy-mbar { display: flex; gap: 3px; height: 10px; margin-top: 14px; border-radius: 999px; overflow: hidden; }
  #overlay .r6wy-mbar > i { min-width: 6px; }
  #overlay .r6wy-month ul { margin: 6px 0 0; padding: 0; list-style: none; }
  #overlay .r6wy-month li { display: flex; align-items: center; gap: 12px; min-height: 48px; }
  #overlay .r6wy-month li + li { border-top: 1px solid rgba(239, 241, 246, .07); }
  #overlay .r6wy-month li > i { flex: none; width: 11px; height: 11px; border-radius: 50%; }
  #overlay .r6wy-sp-t { flex: 1 1 auto; min-width: 0; color: #EFF1F6; font-size: 15px; }
  #overlay .r6wy-sp-t .num { color: rgba(239, 241, 246, .5); font-size: 13.5px; }
  #overlay .r6wy-month li > b { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  #overlay .r6wy-month .s1 { background: #6AAFA2; }
  #overlay .r6wy-month .s2 { background: #9FD182; }
  #overlay .r6wy-month .s3 { background: #2A7465; }

  /* ---------- the days without spending (challenges.view.js: nsInvite), in one card ---------- */
  #overlay .r6wy-ns { margin-top: 24px; }
  #overlay .r6wy-ns .ns-invite { margin: 0; padding: 18px 16px; border: 1px solid transparent; border-radius: 28px; background: var(--r6-face, none), linear-gradient(#121414, #121414) padding-box, var(--r6-rim, 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); }
  #overlay .r6wy-ns .ns-invite h3 { margin: 4px 0 6px; color: #EFF1F6; font-size: 15px; font-weight: 500; }
  #overlay .r6wy-ns .ns-invite .note { margin: 0 0 12px; color: rgba(239, 241, 246, .58); font-size: 13.5px; line-height: 1.45; }
  #overlay .r6wy-ns .ns-invite .btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; font-size: 14.5px; font-weight: 500; }
  #overlay .r6wy-ns .ns-invite .btn svg { width: 16px; height: 16px; }

  /* ---------- at the thumb ---------- */
  #overlay .drawer > footer.r6wy-foot { position: relative; display: flex; gap: 10px; padding: 12px 16px calc(24px + var(--safe-b)); border: 0; background: #070808; box-shadow: 0 -40px 30px -10px #070808; }
  #overlay .r6wy-b { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 18px; border-radius: 999px;
    background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; font-size: 15px; font-weight: 500; text-align: center; }
  #overlay .r6wy-b.go { background: #9FD182; box-shadow: none; color: #101212; }
  #overlay .r6wy-b svg { flex: none; width: 18px; height: 18px; }
  @media (prefers-reduced-motion: reduce) { #overlay .r6wy-bar { animation: none; } #overlay :is(.r6-why, .r6wy-foot) .press { transition: none; } }
}