/* Dorax Finance — the owner's Plan in the "v6" look (v346, features/phone/r6-plan.js; the canvas "Plan-V6"): the bills in one card, what comes in
   cut in its parts (v423; it was a ring), the limits as small widgets, the income in one card. The frame: look-r6-pages.css. */
@media (max-width: 920px) {
  /* ---------- the bills: the groups in one card; a hairline between rows from the words on ---------- */
  :root.r6.r6-pg #view .bp-note { min-height: 48px; margin: 0; padding: 0 16px; border-radius: 999px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); }
  :root.r6.r6-pg #view .bp-note > b { color: #9FD182; }
  :root.r6.r6-pg #view .r6-bills { display: flex; flex-direction: column; padding: 0 12px 0 16px; }
  :root.r6.r6-pg #view .r6-bills .bp-grp + .bp-grp { border-top: 1px solid rgba(239, 241, 246, .07); margin: 0 -12px 0 -16px; padding: 0 12px 0 16px; background: rgba(255, 255, 255, .025); }
  :root.r6.r6-pg #view .r6-bills .bp-gh { margin-top: 4px; }
  :root.r6.r6-pg #view .r6-bills .bp-tog { color: rgba(239, 241, 246, .55); }
  :root.r6.r6-pg #view .r6-bills .bp-bulk { color: #9FD182; }
  :root.r6.r6-pg #view .r6-bills .bp-row { min-height: 66px; }
  :root.r6.r6-pg #view .r6-bills .bp-row + .bp-row::before { left: 52px; background: rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-bills :is(.bp-open, .bp-fold) > .cg { background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-bills :is(.bp-open, .bp-fold) > .cg.dx { background: none; box-shadow: none; }
  :root.r6.r6-pg #view .r6-bills .bp-t > b { font-size: 16px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-bills .bp-amt { font-size: 16px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-bills .bp-w.soon { background: linear-gradient(180deg, #C9EDB0, #9FD182); color: #101212; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-bills .bp-check { box-shadow: inset 0 0 0 1.5px rgba(239, 241, 246, .2); color: rgba(239, 241, 246, .6); }
  :root.r6.r6-pg #view .r6-bills .bp-check.on { background: #9FD182; color: #101212; box-shadow: none; }
  :root.r6.r6-pg #view .r6-bills .bp-fold { min-height: 68px; }
  :root.r6.r6-pg #view #paylist > .bp-new { margin-top: 0; }

  /* ---------- what comes in, shared out (v423): one line cut in its parts, then a row for each, as the summary's "Where it went" ---------- */
  :root.r6.r6-pg #view .r6-split { display: flex; flex-direction: column; }
  :root.r6.r6-pg #view .r6-sbar { display: flex; gap: 3px; height: 10px; margin: 20px 18px 4px; border-radius: 999px; overflow: hidden; transform-origin: 0 50%; animation: r6-sgrow .9s cubic-bezier(.2, .9, .25, 1) .15s both; }
  :root.r6.r6-pg #view .r6-sbar > i { min-width: 6px; }
  @keyframes r6-sgrow { from { transform: scaleX(0); } }
  :root.r6.r6-pg #view .r6-sparts { display: flex; flex-direction: column; margin: 0; padding: 4px 18px 6px; list-style: none; }
  :root.r6.r6-pg #view .r6-sparts li { display: flex; align-items: center; gap: 12px; min-height: 52px; }
  :root.r6.r6-pg #view .r6-sparts li + li { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-sparts li > i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
  :root.r6.r6-pg #view .r6-sp-t { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #EFF1F6; font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-sp-t .num { color: rgba(239, 241, 246, .5); font-size: 14px; font-weight: 400; }
  :root.r6.r6-pg #view .r6-sp-v { flex: none; color: #EFF1F6; font-size: 15.5px; font-weight: 500; }
  /* each part its own colour, told apart at a glance: the bills teal, the savings lime (the goals' colour), the limits the day-to-day's green, the rest grey */
  :root.r6.r6-pg #view .r6-split .s1 { background: #6AAFA2; }
  :root.r6.r6-pg #view .r6-split .s2 { background: #9FD182; }
  :root.r6.r6-pg #view .r6-split .s3 { background: #2A7465; }
  :root.r6.r6-pg #view .r6-split .s4 { background: rgba(239, 241, 246, .22); }
  /* nothing coming in yet: the line empty, dashed, and what to do */
  :root.r6.r6-pg #view .r6-split-wait { display: flex; flex-direction: column; gap: 12px; }
  :root.r6.r6-pg #view .r6-sbar-wait { display: block; height: 10px; border: 1.5px dashed rgba(239, 241, 246, .2); border-radius: 999px; }
  :root.r6.r6-pg #view .r6-split-wait p { margin: 0; color: rgba(239, 241, 246, .55); font-size: 14px; line-height: 1.45; }

  /* ---------- the limits: small widgets two by two ---------- */
  :root.r6.r6-pg #view .r6-lims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :root.r6.r6-pg #view .r6-lim { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border: 1px solid transparent; border-radius: 32px;
    background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-lim-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
  :root.r6.r6-pg #view .r6-lim-h > .cg { flex: none; width: 34px; height: 34px; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-lim-h > .cg svg { width: 16px; height: 16px; }
  :root.r6.r6-pg #view .r6-lim-h b { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-lim-v { display: flex; flex-direction: column; gap: 3px; }
  :root.r6.r6-pg #view .r6-lim-v b { font-size: 26px; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-lim-v small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-lbar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(239, 241, 246, .08); }
  :root.r6.r6-pg #view .r6-lbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #9FD182; transform-origin: 0 50%; animation: r6-trk 1.1s cubic-bezier(.2, .9, .25, 1) .3s both; }
  :root.r6.r6-pg #view .r6-lim:is(.warn, .fast) .r6-lbar > i { background: linear-gradient(90deg, #E0A43C, #F7D27A); }
  :root.r6.r6-pg #view .r6-lim.crit .r6-lbar > i { background: #FF8A80; }
  :root.r6.r6-pg #view .r6-lbar > em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(239, 241, 246, .45); }
  :root.r6.r6-pg #view .r6-lim-n { min-height: 17px; color: rgba(239, 241, 246, .5); font-size: 12.5px; line-height: 1.35; }
  :root.r6.r6-pg #view .r6-lim:is(.warn, .fast) .r6-lim-n { color: #F7D27A; }
  :root.r6.r6-pg #view .r6-lim.crit .r6-lim-n { color: #FF8A80; }
  :root.r6.r6-pg #view .r6-lim:active { transform: scale(.965); }
  :root.r6.r6-pg #view .bp-chips { margin-top: 0; }

  /* ---------- the income: one card, "my income changes" on its band ---------- */
  :root.r6.r6-pg #view .r6-ins .bp-ins { padding: 0 20px 0 16px; }
  :root.r6.r6-pg #view .r6-ins .bp-in { min-height: 68px; }
  :root.r6.r6-pg #view .r6-ins .bp-in .gq-ico { background: rgba(159, 209, 130, .14); box-shadow: inset 0 0 0 1px rgba(159, 209, 130, .25); color: #9FD182; }
  :root.r6.r6-pg #view .r6-ins .bp-in + .bp-in::before { left: 52px; background: rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-ins .bp-t > b, :root.r6.r6-pg #view .r6-ins .bp-amt { font-size: 16px; font-weight: 500; }
  :root.r6.r6-pg #view #income-list .r6-ins .pl-lm { padding: 14px 16px 14px 20px; border-top: 1px solid rgba(239, 241, 246, .07); background: rgba(255, 255, 255, .025); }
  :root.r6.r6-pg #view #income-list > .bp-new { margin-top: 0; }
  @keyframes r6-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view :is(.r6-sbar, .r6-lbar > i) { animation: none; } }
}