/* Dorax Finance — the owner's close of the month in the v6 look (v403; features/phone/r6-close.js; the canvas "Cerrar-mes-V6"). The page's black
   #070808, text #EFF1F6, lime #9FD182 for the main button and the data, muted white #D9DCE1 for today, coral #FF8A80 for a limit gone over.
   The dots, Back and the step's slide in are Plan my month's (look-r6-misc.css: .r6pg-*). */
@media (max-width: 920px) {
  /* the whole close, its end included: the black page, the month's name small over it */
  :root.land #overlay .drawer:has(> .body.r6mcs) { background: #070808; }
  :root.land #overlay .drawer:has(> .body:is(.r6mcs, .r6mc-body)) > header h2 { color: rgba(239, 241, 246, .55); font-size: 14px; font-weight: 500; letter-spacing: 0; }
  :root.land #overlay .r6mcs { display: flex; flex-direction: column; padding: 18px 16px 28px; overflow-x: hidden; }
  :root.land #overlay .r6mcs ~ .r6-ff .r6-go svg { width: 18px; height: 18px; stroke-width: 2.4; }
  :root.land #overlay .r6mcs-h { margin: 0; color: #EFF1F6; font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; outline: none; }
  :root.land #overlay .r6mcs-lb { margin-top: 26px; color: rgba(239, 241, 246, .6); font-size: 15px; }
  :root.land #overlay .r6mcs-big { margin-top: 4px; color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; animation: r6mcs-rise .4s cubic-bezier(.2, .9, .25, 1) .15s both; }
  :root.land #overlay .r6mcs-big.go { color: #9FD182; }
  :root.land #overlay .r6mcs-big.short { color: #FF8A80; }
  @keyframes r6mcs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* 1 · what came in and went out: two bars on one grid, so the bars start together whatever the words' length */
  :root.land #overlay .r6mcs-flows { margin-top: 28px; }
  :root.land #overlay .r6mcs-fl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; }
  :root.land #overlay .r6mcs-fl > small { color: rgba(239, 241, 246, .6); font-size: 13.5px; }
  :root.land #overlay .r6mcs-fl > b { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6mcs-tr { display: block; height: 12px; border-radius: 6px; background: rgba(239, 241, 246, .07); }
  :root.land #overlay .r6mcs-tr i { display: block; height: 100%; border-radius: 6px; transform-origin: 0 50%; animation: r6mcs-grow .9s cubic-bezier(.2, .9, .25, 1) both; }
  :root.land #overlay .r6mcs-tr i.in { background: #9FD182; }
  :root.land #overlay .r6mcs-tr i.out { background: rgba(239, 241, 246, .42); }
  @keyframes r6mcs-grow { from { transform: scaleX(0); } to { transform: none; } }
  :root.land #overlay .r6mcs-was { margin-top: 14px; color: rgba(239, 241, 246, .5); font-size: 13.5px; }
  /* the limits: a line, then each one a ring closing to how much of it went */
  :root.land #overlay .r6mcs-lh { display: flex; align-items: center; gap: 10px; margin: 34px 0 0; color: #9FD182; }
  :root.land #overlay .r6mcs-lh.over { color: #FF8A80; }
  :root.land #overlay .r6mcs-lh svg { flex: none; stroke-width: 2.4; }
  :root.land #overlay .r6mcs-lh b { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6mcs-lims { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; margin-top: 16px; }      /* two by two; one under the other on a narrow phone, so the names fit */
  :root.land #overlay .r6mcs-lim { display: flex; align-items: center; gap: 12px; min-width: 0; }
  :root.land #overlay .r6mcs-lim svg { flex: none; width: 56px; height: 56px; transform: rotate(-90deg); }
  :root.land #overlay .r6mcs-lim circle { fill: none; stroke: rgba(239, 241, 246, .1); stroke-width: 3.4; }
  :root.land #overlay .r6mcs-lim circle.arc { stroke: #9FD182; stroke-linecap: round; animation: r6mcs-arc 1s cubic-bezier(.2, .9, .25, 1) .45s both; }
  :root.land #overlay .r6mcs-lim.over circle.arc { stroke: #FF8A80; }
  @keyframes r6mcs-arc { from { stroke-dashoffset: 100; } }
  :root.land #overlay .r6mcs-lim > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.land #overlay .r6mcs-lim b { overflow: hidden; color: #EFF1F6; font-size: 14.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6mcs-lim small { color: rgba(239, 241, 246, .55); font-size: 12.5px; }
  :root.land #overlay .r6mcs-lim.over small { color: #FF8A80; }

  /* 2 · the goals */
  :root.land #overlay .r6mcs-set { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 26px; color: rgba(239, 241, 246, .5); font-size: 18px; animation: r6mcs-rise .4s cubic-bezier(.2, .9, .25, 1) .1s both; }
  :root.land #overlay .r6mcs-set b { color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; }
  :root.land #overlay .r6mcs-set.go b { color: #9FD182; }
  :root.land #overlay .r6mcs-say { margin-top: 10px; color: rgba(239, 241, 246, .6); font-size: 14px; }
  :root.land #overlay .r6mcs-gs { display: flex; flex-direction: column; margin-top: 22px; }
  :root.land #overlay .r6mcs-g { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 10px 0; animation: r6mcs-rise .4s cubic-bezier(.2, .9, .25, 1) both; }
  :root.land #overlay .r6mcs-g + .r6mcs-g { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay .r6mcs-g:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; border-radius: 12px; }
  :root.land #overlay .r6mcs-gi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .72); }
  :root.land #overlay .r6mcs-g.ok .r6mcs-gi { background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.land #overlay .r6mcs-g.ok .r6mcs-gi svg { stroke-width: 2.4; }
  :root.land #overlay .r6mcs-gt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  :root.land #overlay .r6mcs-gr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  :root.land #overlay .r6mcs-gr b { overflow: hidden; color: #EFF1F6; font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6mcs-gr b.num { flex: none; font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6mcs-gt small { color: rgba(239, 241, 246, .55); font-size: 12.5px; }
  :root.land #overlay .r6mcs-gb { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(239, 241, 246, .08); }
  :root.land #overlay .r6mcs-gb i { display: block; height: 100%; border-radius: 3px; background: #9FD182; transform-origin: 0 50%; animation: r6mcs-grow .9s cubic-bezier(.2, .9, .25, 1) both; }
  :root.land #overlay .r6mcs-p { margin: 14px 0 0; color: rgba(239, 241, 246, .7); font-size: 15px; line-height: 1.45; }
  :root.land #overlay .r6mcs-link { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 4px; color: #EFF1F6; font-size: 14px; font-weight: 500; }
  :root.land #overlay .r6mcs-link.in { margin-left: 28px; }
  :root.land #overlay .r6mcs-link svg { stroke-width: 2.3; }
  :root.land #overlay .r6mcs-link:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; border-radius: 8px; }

  /* 3 · the month that starts: how much a day, its days */
  :root.land #overlay .r6mcs-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 4px; color: rgba(239, 241, 246, .5); font-size: 18px; animation: r6mcs-rise .4s cubic-bezier(.2, .9, .25, 1) .1s both; }
  :root.land #overlay .r6mcs-day b { color: #EFF1F6; font-size: 52px; font-weight: 300; letter-spacing: -.045em; line-height: 1; }
  :root.land #overlay .r6mcs-when { margin-top: 8px; color: rgba(239, 241, 246, .5); font-size: 13.5px; }
  :root.land #overlay .r6mcs-cal { margin-top: 24px; }
  :root.land #overlay .r6mcs-cal > span { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  :root.land #overlay .r6mcs-cal small { color: rgba(239, 241, 246, .38); font-size: 11px; font-weight: 500; text-align: center; }
  :root.land #overlay .r6mcs-cal i { display: grid; place-items: center; height: 34px; border-radius: 12px; color: rgba(239, 241, 246, .55); font-size: 13px; font-style: normal; font-weight: 500; animation: r6mcs-day .3s cubic-bezier(.2, .9, .25, 1) both; }
  :root.land #overlay .r6mcs-cal i.off { animation: none; }
  :root.land #overlay .r6mcs-cal i.past { background: rgba(239, 241, 246, .04); color: rgba(239, 241, 246, .3); }
  :root.land #overlay .r6mcs-cal i.now { background: rgba(217, 220, 225, .14); box-shadow: inset 0 0 0 2px #D9DCE1; color: #EFF1F6; }
  :root.land #overlay .r6mcs-cal i.go { background: rgba(159, 209, 130, .2); color: #EFF1F6; }
  @keyframes r6mcs-day { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
  :root.land #overlay .r6mcs-plan { display: flex; gap: 10px; margin: 24px 0 0; color: rgba(239, 241, 246, .7); font-size: 14px; line-height: 1.45; }
  :root.land #overlay .r6mcs-plan svg { flex: none; margin-top: 1px; color: #9FD182; }

  /* v535: whether the accounts match their banks (step 1), and what was left over into a goal (step 2): month-close-auto.js */
  :root.land #overlay .r6mcs-bank { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; padding: 14px 16px 6px; border-radius: 20px; background: #121414; border: 1px solid rgba(239, 241, 246, .08); }
  :root.land #overlay .r6mcs-bank:not(.warn) { padding-bottom: 14px; }
  :root.land #overlay .r6mcs-bank p, :root.land #overlay .r6mcs-left p { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: rgba(239, 241, 246, .72); font-size: 14px; line-height: 1.45; }
  :root.land #overlay .r6mcs-bank p svg, :root.land #overlay .r6mcs-left p svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #9FD182; }
  :root.land #overlay .r6mcs-bank.warn p svg { color: #F2C37A; }
  :root.land #overlay .r6mcs-left { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 16px; border-radius: 22px; background: #121414; border: 1px solid rgba(239, 241, 246, .1); }
  :root.land #overlay .r6mcs-left > b { color: #EFF1F6; font-size: 16px; font-weight: 500; }
  :root.land #overlay .r6mcs-left-acts { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  :root.land #overlay .r6mcs-go { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 4px; padding: 0 18px; border-radius: 999px; background: #9FD182; color: #101212; font-size: 15px; font-weight: 600; text-align: center; }
  :root.land #overlay .r6mcs-go:focus-visible, :root.land #overlay .r6mcs-chip:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.land #overlay .r6mcs-left-acts .r6mcs-link { align-self: center; }
  :root.land #overlay .r6mcs-left-goals { display: flex; flex-wrap: wrap; gap: 8px; }
  :root.land #overlay .r6mcs-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(239, 241, 246, .07); color: #EFF1F6; font-size: 14px; }
  :root.land #overlay .r6mcs-chip.on { box-shadow: inset 0 0 0 1.5px #9FD182; }
  :root.land #overlay .r6mcs-chip .dxi { width: 22px; height: 22px; }
  @media (prefers-reduced-motion: reduce) {
    :root.land #overlay :is(.r6mcs-big, .r6mcs-set, .r6mcs-day, .r6mcs-tr i, .r6mcs-lim circle.arc, .r6mcs-g, .r6mcs-gb i, .r6mcs-cal i) { animation: none; }
  }
}