/* Dorax Finance — the owner's Challenges, a page of Goals (v427; the canvas "Desafios-V6"; features/phone/r6-challenges.js): the ones running in cards
   of #121414 with their edge of light, the ones that ended as lines; the lime flat (v415). */
@media (max-width: 920px) {
  :root.r6.r6-pg #view .r6ch { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
  :root.r6.r6-pg #view .r6ch-k { margin: 8px 0 0; color: rgba(239, 241, 246, .42); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
  :root.r6.r6-pg #view .r6ch-k + * { margin-top: -2px; }
  :root.r6.r6-pg #view .r6ch-list { display: flex; flex-direction: column; gap: 14px; }

  /* a challenge running: its card */
  :root.r6.r6-pg #view .r6ch-card { display: flex; flex-direction: column; padding: 20px 18px 18px; border: 1px solid transparent; border-radius: 32px; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); }
  :root.r6.r6-pg #view .r6ch-h { display: flex; align-items: center; gap: 12px; }
  :root.r6.r6-pg #view .r6ch-art { flex: none; display: grid; }
  :root.r6.r6-pg #view .r6ch-art svg { width: 44px; height: 32px; }
  :root.r6.r6-pg #view .r6ch-ht { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.r6.r6-pg #view .r6ch-ht h3 { margin: 0; color: #EFF1F6; font-size: 16px; font-weight: 500; }
  :root.r6.r6-pg #view .r6ch-ht small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6ch-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 18px; }
  :root.r6.r6-pg #view .r6ch-fig b { color: #9FD182; font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
  :root.r6.r6-pg #view .r6ch-fig small { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.r6.r6-pg #view .r6ch-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
  :root.r6.r6-pg #view .r6ch-foot > small { flex: 1 1 auto; min-width: 0; color: rgba(239, 241, 246, .7); font-size: 14px; line-height: 1.35; }
  :root.r6.r6-pg #view .r6ch-btn { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; display: inline-flex; align-items: center; gap: 7px; 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; white-space: nowrap; }
  :root.r6.r6-pg #view .r6ch-btn svg, :root.r6.r6-pg #view .r6ch-ok svg { color: #9FD182; stroke-width: 2.6; }
  :root.r6.r6-pg #view .r6ch-btn[aria-pressed="true"] svg path, :root.r6.r6-pg #view .r6ch-d.on svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: r6ch-tick .4s cubic-bezier(.4, 0, .2, 1) .05s forwards; }
  :root.r6.r6-pg #view .r6ch-ok { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #EFF1F6; font-size: 14.5px; font-weight: 500; }
  @keyframes r6ch-tick { to { stroke-dashoffset: 0; } }

  /* the 52 weeks: covered in lime, this one ringed, the rest a faint lime by what each week asks */
  :root.r6.r6-pg #view .r6ch-weeks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; margin-top: 16px; }
  :root.r6.r6-pg #view .r6ch-weeks i { display: block; height: 18px; border-radius: 5px; animation: r6ch-in .3s cubic-bezier(.2, .9, .25, 1) backwards; }
  :root.r6.r6-pg #view .r6ch-weeks i.on { background: #9FD182; }
  :root.r6.r6-pg #view .r6ch-weeks i.now { background: rgba(239, 241, 246, .06); box-shadow: inset 0 0 0 2px #EFF1F6; }
  @keyframes r6ch-in { from { opacity: 0; transform: scale(.7); } }

  /* the days without spending: circles, marked with a check, today ringed */
  :root.r6.r6-pg #view .r6ch-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
  :root.r6.r6-pg #view .r6ch-d { all: unset; box-sizing: border-box; position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 50%; font-size: 13px; font-weight: 500; animation: r6ch-in .3s cubic-bezier(.2, .9, .25, 1) backwards; transition: background-color .35s ease, box-shadow .35s ease; }
  :root.r6.r6-pg #view button.r6ch-d { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.r6.r6-pg #view button.r6ch-d::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }      /* a little more to touch than the circle */
  :root.r6.r6-pg #view .r6ch-d.on { background: #9FD182; color: #101212; }
  :root.r6.r6-pg #view .r6ch-d.on svg { color: #101212; stroke-width: 3; }
  :root.r6.r6-pg #view .r6ch-d.now { background: rgba(239, 241, 246, .06); box-shadow: inset 0 0 0 2px #EFF1F6; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6ch-d.past { background: rgba(239, 241, 246, .05); color: rgba(239, 241, 246, .35); }
  :root.r6.r6-pg #view .r6ch-d.next { box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: rgba(239, 241, 246, .5); }
  :root.r6.r6-pg #view button.r6ch-d.past { box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .22); color: rgba(239, 241, 246, .6); }      /* yesterday, still to mark */

  /* the ones that ended: a line each */
  :root.r6.r6-pg #view .r6ch-pasts { display: flex; flex-direction: column; margin: 0 -16px; }
  :root.r6.r6-pg #view .r6ch-pasts > div + div .r6ch-past { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6ch-past { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 10px 16px; color: #EFF1F6; }
  :root.r6.r6-pg #view button.r6ch-past { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.r6.r6-pg #view button.r6ch-past:active { background: rgba(239, 241, 246, .05); }
  :root.r6.r6-pg #view .r6ch-pt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  :root.r6.r6-pg #view .r6ch-pn { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  :root.r6.r6-pg #view .r6ch-pn b { overflow: hidden; font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6ch-pn small { flex: none; color: rgba(239, 241, 246, .5); font-size: 12.5px; }
  :root.r6.r6-pg #view .r6ch-dots { display: flex; flex-wrap: wrap; gap: 5px; }
  :root.r6.r6-pg #view .r6ch-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(239, 241, 246, .25); }
  :root.r6.r6-pg #view .r6ch-dots i.on { background: rgba(159, 209, 130, .7); box-shadow: none; }
  :root.r6.r6-pg #view .r6ch-pbar { display: block; height: 5px; border-radius: 3px; background: rgba(239, 241, 246, .08); overflow: hidden; }
  :root.r6.r6-pg #view .r6ch-pbar i { display: block; height: 100%; border-radius: 3px; background: rgba(159, 209, 130, .7); }
  :root.r6.r6-pg #view .r6ch-pv { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  :root.r6.r6-pg #view .r6ch-pv b { font-size: 15px; font-weight: 500; }
  :root.r6.r6-pg #view .r6ch-pv small { color: rgba(239, 241, 246, .5); font-size: 12.5px; }
  :root.r6.r6-pg #view .r6ch-chev { flex: none; display: grid; color: rgba(239, 241, 246, .45); }
  :root.r6.r6-pg #view .r6ch-chev svg { width: 16px; height: 16px; }
  :root.r6.r6-pg #view .r6ch-none { margin-top: 12px; }
  :root.r6.r6-pg #view .r6ch :is(button, a):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view :is(.r6ch-weeks i, .r6ch-d) { animation: none; transition: none; } :root.r6.r6-pg #view :is(.r6ch-btn[aria-pressed="true"], .r6ch-d.on) svg path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } :root.r6.r6-pg #view button.r6ch-past { transition: none; } }
}