/* Dorax Finance — the owner's Goals in the "v6" look (v346, features/phone/r6-goals.js; the canvas "Metas-V6"): where what is set aside is, the
   goals as widgets with their own icon in the ring, the funds in one card, the year's expenses as dashed tiles, the 52 weeks as dots. The frame:
   look-r6-pages.css. */
@media (max-width: 920px) {
  :where(:root.r6.r6-pg #view) :is(.r6-gt, .r6-gt-new, .r6-fr, .r6-s52) { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }

  /* ---------- where it is: one bar, a piece each, the names under it ---------- */
  :root.r6.r6-pg #view .r6-where { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 0; }
  :root.r6.r6-pg #view .r6-where-b { display: flex; gap: 3px; height: 16px; }
  :root.r6.r6-pg #view .r6-where-b > i { display: block; min-width: 6px; border-radius: 8px; transform-origin: 0 50%; animation: r6-seg .9s cubic-bezier(.2, .9, .25, 1) both; }
  :root.r6.r6-pg #view .r6-where-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  :root.r6.r6-pg #view .r6-where-l > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.r6.r6-pg #view .r6-where-l small { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; color: rgba(239, 241, 246, .62); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-where-l i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
  :root.r6.r6-pg #view .r6-where-l b { padding-left: 16px; font-size: 15px; font-weight: 500; }
  @keyframes r6-seg { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---------- the goals: widgets two by two ---------- */
  :root.r6.r6-pg #view .r6-gts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :root.r6.r6-pg #view .r6-gt { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; color: #EFF1F6; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6.r6-pg #view .r6-gt.off { opacity: .6; }
  :root.r6.r6-pg #view .r6-gt-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  :root.r6.r6-pg #view .r6-gt-ring { position: relative; flex: none; display: grid; place-items: center; width: 76px; height: 76px; }
  :root.r6.r6-pg #view .r6-gt-ring svg:not(.dxi) { position: absolute; inset: 0; }
  :root.r6.r6-pg #view .r6-gt-ring svg:not(.dxi) circle { fill: none; stroke: rgba(159, 209, 130, .16); stroke-width: 8; }
  :root.r6.r6-pg #view .r6-gt-ring svg:not(.dxi) circle.on { stroke: #9FD182; stroke-linecap: round; animation: r6-arc 1.1s cubic-bezier(.2, .9, .25, 1) .2s both; }
  :root.r6.r6-pg #view .r6-gt-ring .dxi { position: relative; width: 42px; height: 42px; }
  :root.r6.r6-pg #view .r6-gt-h > b { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6-gt-h > b.zero { color: rgba(239, 241, 246, .4); }
  :root.r6.r6-pg #view .r6-gt-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  :root.r6.r6-pg #view .r6-gt-t > b { display: block; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }      /* the name on one line, "…" when it is long */
  :root.r6.r6-pg #view .r6-gt-t > small { color: rgba(239, 241, 246, .62); font-size: 13px; line-height: 1.35; }
  :root.r6.r6-pg #view .r6-gt-t > small > b { color: #EFF1F6; font-weight: 500; }
  :root.r6.r6-pg #view .r6-gt-t > .r6-gt-s { color: rgba(239, 241, 246, .5); font-size: 12.5px; white-space: normal; }
  :root.r6.r6-pg #view .r6-gt-t > .r6-gt-s.warn { color: #F7D27A; }
  :root.r6.r6-pg #view .r6-gt-t > .r6-gt-s.good { color: #9FD182; }
  :root.r6.r6-pg #view .r6-gt-new { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; padding: 18px; border: 1px dashed rgba(239, 241, 246, .22); border-radius: 32px; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-gt-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.r6.r6-pg #view .r6-gt-plus svg { width: 22px; height: 22px; stroke-width: 2.4; }
  :root.r6.r6-pg #view .r6-gt-new > span:last-child { display: flex; flex-direction: column; gap: 4px; }
  :root.r6.r6-pg #view .r6-gt-new b { font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-gt-new small { color: rgba(239, 241, 246, .55); font-size: 12.5px; line-height: 1.35; }
  :root.r6.r6-pg #view :is(.r6-gt, .r6-gt-new, .r6-s52):active { transform: scale(.965); }
  @media (max-width: 374px) { :root.r6.r6-pg #view .r6-gt { padding: 16px; } :root.r6.r6-pg #view .r6-gt-ring { width: 60px; height: 60px; } :root.r6.r6-pg #view .r6-gt-ring svg:not(.dxi) { width: 60px; height: 60px; } :root.r6.r6-pg #view .r6-gt-ring .dxi { width: 34px; height: 34px; } :root.r6.r6-pg #view .r6-gt-h > b { font-size: 17px; } }

  /* ---------- the funds: one card, one row each ---------- */
  :root.r6.r6-pg #view .r6-funds { display: flex; flex-direction: column; }
  :root.r6.r6-pg #view .r6-fr { display: flex; align-items: center; gap: 12px; min-height: 72px; margin: 0 20px 0 16px; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-fr + .r6-fr { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-fr.off { opacity: .6; }
  :root.r6.r6-pg #view .r6-fr-i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; }
  :root.r6.r6-pg #view .r6-fr-i .dxi { width: 44px; height: 44px; }
  :root.r6.r6-pg #view .r6-fr-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.r6.r6-pg #view .r6-fr-t b { display: block; overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-fr-t small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-fr-t small.warn { color: #F7D27A; }
  :root.r6.r6-pg #view .r6-fr-t small.good { color: #9FD182; }
  :root.r6.r6-pg #view .r6-fr > b { flex: none; font-size: 16px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-fr:active { opacity: .7; }

  /* ---------- the year's expenses: dashed tiles to slide ---------- */
  :root.r6.r6-pg #view #yearly { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
  :root.r6.r6-pg #view #yearly h2.sec { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; }
  :root.r6.r6-pg #view .yr-lead { margin: -8px 0 0; color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.r6.r6-pg #view .yr-idea { width: 116px; min-height: 112px; border: 1px dashed rgba(239, 241, 246, .2); border-radius: 26px; background: none; box-shadow: none; color: #EFF1F6; }
  :root.r6.r6-pg #view .yr-idea svg { background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.r6.r6-pg #view .yr-idea small { color: rgba(239, 241, 246, .5); }

  /* ---------- the 52-week challenge: its fifty-two dots ---------- */
  :root.r6.r6-pg #view .r6-s52 { display: flex; flex-direction: column; gap: 16px; padding: 20px; color: #EFF1F6; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6.r6-pg #view .r6-s52-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  :root.r6.r6-pg #view .r6-s52-h > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  :root.r6.r6-pg #view .r6-s52-h b { font-size: 16px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-s52-h small { color: rgba(239, 241, 246, .6); font-size: 13px; line-height: 1.35; }
  :root.r6.r6-pg #view .r6-s52-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  :root.r6.r6-pg #view .r6-s52-v b { color: #9FD182; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6-s52-v small { color: rgba(239, 241, 246, .5); font-size: 12px; }
  :root.r6.r6-pg #view .r6-s52-d { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 7px; }
  :root.r6.r6-pg #view .r6-s52-d i { display: block; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(239, 241, 246, .1); }
  :root.r6.r6-pg #view .r6-s52-d i.on { background: #9FD182; box-shadow: 0 0 8px rgba(159, 209, 130, .6); }
  :root.r6.r6-pg #view .r6-s52-go { display: inline-flex; align-items: center; gap: 4px; color: #9FD182; font-size: 14.5px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-s52-go svg { width: 15px; height: 15px; stroke-width: 2.3; }
  :root.r6.r6-pg #view .g-real { color: rgba(239, 241, 246, .5); font-size: 13px; }
  :root.r6.r6-pg #view .g-real a { color: #9FD182; font-weight: 500; text-decoration: none; }
  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view :is(.r6-where-b > i, .r6-gt-ring circle.on) { animation: none; } :root.r6.r6-pg #view :is(.r6-gt, .r6-s52) { transition: none; } }
}