/* Dorax Finance — the panels the owner's v6 still opened in the look before, in it (v479; features/phone/r6-panels.js): the spending chart and where
   the Calendar's figure comes from as the household's v6 sheets (look-r6-misc.css: .r6-sheet): from the foot, square at the top, no grab bar, the
   name at 20 px and × in glass, on #121414; their figures, rows and chart in the v6 colours. A subcategory opened, a category renamed and a fixed
   cost changed are the v6 forms (look-r6-add.css); here only what they add. The company's colours: tools/r6-co.py (look-r6-co-overlay.css); light:
   tools/r6-light.py and tools/r6-light-hand.css (the sheet white, its blocks #EFEFEF). */
@media (max-width: 920px) {
  /* ---------- the sheet ---------- */
  :root.land #overlay .drawer:has(> .body.r6-pn) { box-sizing: border-box; max-height: 90vh; border: 0; border-radius: 0; background: #121414; box-shadow: 0 -1px 0 rgba(239, 241, 246, .12), 0 -30px 60px -10px rgba(0, 0, 0, .7); color: #EFF1F6; }
  :root.land #overlay .drawer:has(> .body.r6-pn) > .grab { display: none; }
  :root.land #overlay .drawer:has(> .body.r6-pn) > header { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 16px 4px 20px; border: 0; background: none; }
  :root.land #overlay .drawer:has(> .body.r6-pn) > header h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .drawer:has(> .body.r6-pn) > header :is([data-a="close"], .dr-back) { all: unset; box-sizing: border-box; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; 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; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .drawer:has(> .body.r6-pn) > header :is([data-a="close"], .dr-back) svg { width: 17px; height: 17px; }
  :root.land #overlay .drawer:has(> .body.r6-pn) > header :is([data-a="close"], .dr-back):active { transform: scale(.94); }
  :root.land #overlay .drawer:has(> .body.r6-pn) > header :is([data-a="close"], .dr-back):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.land #overlay .drawer > .body.r6-pn { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px calc(28px + var(--safe-b, 0px)); background: none; color: #EFF1F6; overflow-x: hidden; }

  /* ---------- the spending chart: the figure, how it compares, the month added up ---------- */
  :root.land #overlay .r6pn-big { display: flex; flex-direction: column; gap: 4px; }
  :root.land #overlay .r6pn-big small { color: rgba(239, 241, 246, .6); font-size: 14px; }
  :root.land #overlay .r6pn-big b { color: #EFF1F6; font-size: 40px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
  :root.land #overlay .r6pn-big b .cents { opacity: 1; color: rgba(239, 241, 246, .45); font-size: .5em; letter-spacing: 0; }
  :root.land #overlay .r6-txc .bq-cmp { align-self: flex-start; min-height: 32px; margin-top: 12px; padding: 6px 13px; border-radius: 999px; background: rgba(239, 241, 246, .08); color: #EFF1F6; font-size: 13px; font-weight: 500; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet { align-self: stretch; margin: 18px -20px 0; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .g { stroke: rgba(239, 241, 246, .07); }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .g0 { stroke: rgba(239, 241, 246, .16); }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .ax { fill: rgba(239, 241, 246, .5); font-size: 12px; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .area { fill: rgba(159, 209, 130, .08); }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .before { stroke: rgba(239, 241, 246, .38); opacity: 1; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .now { stroke: #9FD182; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .bq-mk path { stroke: rgba(239, 241, 246, .24); }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .bq-mk circle { fill: #121414; stroke: #9FD182; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .bq-mk rect { fill: #9FD182; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .bq-mk text { fill: #101212; font-weight: 500; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet svg:focus-visible { outline-color: #9FD182; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet figcaption { margin: 8px 20px 0; color: rgba(239, 241, 246, .6); font-size: 12.5px; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .lg.now::before { background: #9FD182; }
  :root.land #overlay .r6-txc .bq-chart.on-sheet .lg.before::before { border-top-color: rgba(239, 241, 246, .45); }
  :root.land #overlay .r6pn-none { margin: 18px 0 0; color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.45; }

  /* ---------- where the Calendar's figure comes from: the day, its rows in one card, what they add up to ---------- */
  :root.land #overlay .r6pn-lead { margin: 0 0 14px; color: rgba(239, 241, 246, .6); font-size: 14px; }
  :root.land #overlay .r6pn-card { display: flex; flex-direction: column; padding: 0 18px; border-radius: 24px; background: rgba(239, 241, 246, .05); }
  :root.land #overlay .r6pn-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; box-sizing: border-box; }
  :root.land #overlay .r6pn-row + .r6pn-row { border-top: 1px solid rgba(239, 241, 246, .07); }
  /* v528: a card's invoice among them opens what makes it up (r6-panels.js: r6CalCard): the same row, pressed */
  :root.land #overlay button.r6pn-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .2s ease-out; }
  :root.land #overlay .r6pn-row + button.r6pn-row, :root.land #overlay button.r6pn-row + .r6pn-row { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay button.r6pn-row:active { opacity: .7; }
  :root.land #overlay button.r6pn-row:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; border-radius: 12px; }
  :root.land #overlay .r6pn-rt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.land #overlay .r6pn-rt b { overflow: hidden; color: #EFF1F6; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6pn-rt small { overflow: hidden; color: rgba(239, 241, 246, .58); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6pn-rt small.cal-fc { white-space: normal; }      /* v526: a card's open invoice in where the Calendar's figure comes from: its day and what is already charged, whole */
  :root.land #overlay .r6pn-rv { flex: none; color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6pn-rv.in { color: #9FD182; }
  :root.land #overlay .r6pn-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 0 4px; }
  :root.land #overlay .r6pn-total > b:first-child { color: rgba(239, 241, 246, .7); font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6pn-total > b.num { color: #9FD182; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
  :root.land #overlay .r6pn-total > b.num.neg { color: #FF8A80; }

  /* ---------- the v6 forms these open (look-r6-add.css): the way back to the panel they came from, as their × ---------- */
  :root.land #overlay .drawer:has(> .body.r6-add) > header .dr-back { all: unset; box-sizing: border-box; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; 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; }
  :root.land #overlay .drawer:has(> .body.r6-add) > header .dr-back svg { width: 17px; height: 17px; }
  :root.land #overlay .drawer:has(> .body.r6-add) > header .dr-back:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  /* a subcategory: its transactions' row and its deletion under the name */
  :root.land #overlay .r6-catn .tfl-rows { margin-top: 22px; }
  :root.land #overlay .r6-catn .tfl-row { justify-content: space-between; min-height: 56px; }
  :root.land #overlay .r6-catn .tfl-row .tfl-l { flex: 1 1 auto; width: auto; max-width: none; color: #EFF1F6; font-size: 15px; }
  :root.land #overlay .r6-catn .r6-note { margin-top: 14px; }
  /* a fixed cost changed: what a new amount does, under its bar */
  :root.land #overlay .r6-line .r6-lchg { margin: 12px 0 0; }

  /* ---------- v483: a card's payment (r6-forms.js: r6CardPayForm): the card's bank beside what it owes ---------- */
  :root.land #overlay .r6-fp-card.card .r6-fp-h > span:last-child { white-space: normal; }
  :root.land #overlay .r6-fp-bk { flex: none; display: grid; }
  :root.land #overlay .r6-fp-bk :is(.inst, .inst img) { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; font-size: 11px; }
  /* ---------- v483: the due days (r6DueDaysForm): each group its name, its bills a row each with the day at the right ---------- */
  :root.land #overlay .r6-dd .r6-dd-say { margin: 4px 0 6px; }
  :root.land #overlay .r6-dd-g { display: flex; flex-direction: column; margin-top: 22px; }
  :root.land #overlay .r6-dd-g > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
  :root.land #overlay .r6-dd-g > h3 > svg { width: 18px; height: 18px; color: rgba(239, 241, 246, .6); }
  :root.land #overlay .r6-dd-r { min-height: 64px; }
  :root.land #overlay .r6-dd-r + .r6-dd-r { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay .r6-dd-r .r6-dd-t { flex: 1 1 auto; width: auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.land #overlay .r6-dd-r .r6-dd-t b { overflow: hidden; color: #EFF1F6; font-size: 15.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6-dd-r .r6-dd-t small { overflow: hidden; color: rgba(239, 241, 246, .55); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6-dd-r .tfl-v { flex: none; color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6-dd-r .tfl-v.soft { color: rgba(239, 241, 246, .45); }
  :root.land #overlay .r6-dd-g .r6-note { margin-top: 10px; }

  /* ---------- v483: the rest of the panels in the look before (r6-panels.js: .r6-old), drawn as the v6 ones ---------- */
  :root.land #overlay .drawer.r6-old {
    --bq-page: #070808; --bq-ink: #EFF1F6; --bq-ink-2: rgba(239, 241, 246, .6); --bq-ink-3: rgba(239, 241, 246, .45); --bq-card: rgba(239, 241, 246, .06); --bq-card-2: #121414; --bq-card-3: rgba(239, 241, 246, .08);
    --bq-line: rgba(239, 241, 246, .12); --bq-line-2: rgba(239, 241, 246, .2); --bq-accent: #9FD182; --bq-crit: #FF8A80; --bq-mint: rgba(159, 209, 130, .12); --bq-pick-bg: #D9DCE1; --bq-pick-ink: #101212;
    --bq-circle: rgba(239, 241, 246, .08); --lk-pop: #9FD182; --lk-pop-hi: #9FD182; --lk-pop-ink: #101212;
    --surface: var(--bq-card); --surface-2: var(--bq-card-2); --surface-3: var(--bq-card-3); --well: var(--bq-card); --badge: var(--bq-card-3); --line: var(--bq-line); --line-strong: var(--bq-line-2); --field: var(--bq-line-2);
    --brand: var(--bq-accent); --link: var(--bq-accent); --focus: var(--bq-accent); --ring: var(--bq-accent); --primary: var(--lk-pop); --primary-ink: var(--lk-pop-ink); --cta: var(--lk-pop); --cta-ink: var(--lk-pop-ink);
    --select: var(--bq-mint); --select-ink: var(--bq-accent); --switch-on: var(--bq-accent); --btn: var(--bq-card); --btn-line: var(--bq-line); --ink: #EFF1F6; --muted: rgba(239, 241, 246, .6);
    border: 0; border-radius: 0; color: #EFF1F6; }
  :root.land #overlay .drawer.r6-old.r6o-form { top: 0; bottom: 0; height: 100dvh; max-height: none; padding-top: var(--safe-t, 0px); box-sizing: border-box; background: #070808; }
  :root.land #overlay .drawer.r6-old.r6o-sheet { box-sizing: border-box; max-height: 90vh; background: #121414; box-shadow: 0 -1px 0 rgba(239, 241, 246, .12), 0 -30px 60px -10px rgba(0, 0, 0, .7); }
  :root.land #overlay .drawer.r6-old > .grab { display: none; }
  :root.land #overlay .drawer.r6-old > header { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 16px 16px 4px 20px; border: 0; background: none; }
  :root.land #overlay .drawer.r6-old > 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: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }      /* v520: a long name on two lines, not cut ("¿Movimientos entre tus cuentas?") */
  :root.land #overlay .drawer.r6-old > header :is([data-a="close"], .dr-back) { all: unset; box-sizing: border-box; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; 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; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .drawer.r6-old > header :is([data-a="close"], .dr-back) svg { width: 17px; height: 17px; }
  :root.land #overlay .drawer.r6-old > header :is([data-a="close"], .dr-back):active { transform: scale(.94); }
  :root.land #overlay .drawer.r6-old > header :is([data-a="close"], .dr-back):focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.land #overlay .drawer.r6-old > .body { background: none; color: #EFF1F6; }
  :root.land #overlay .drawer.r6-old.r6o-form > .body { flex: 1 1 auto; padding: 10px 20px 24px; }
  :root.land #overlay .drawer.r6-old :is(.note, p.muted, .muted) { color: rgba(239, 241, 246, .6); }
  :root.land #overlay .drawer.r6-old .field > label, :root.land #overlay .drawer.r6-old .field > .lbl { color: rgba(239, 241, 246, .6); font-size: 13px; font-weight: 500; }
  :root.land #overlay .drawer.r6-old :is(input[type=text], input[type=email], input[type=search], input[type=number], input[type=date], select, textarea) { min-height: 52px; border: 0; border-radius: 16px; background-color: rgba(239, 241, 246, .06); box-shadow: none; color: #EFF1F6; font-size: 16px; }
  :root.land #overlay .drawer.r6-old textarea { padding: 12px 16px; }
  :root.land #overlay .drawer.r6-old :is(input, select, textarea):focus { border: 0; box-shadow: inset 0 0 0 2px #9FD182; }
  :root.land #overlay .drawer.r6-old .btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { min-height: 44px; border: 0; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; font-weight: 500; }
  :root.land #overlay .drawer.r6-old .body .btn.primary { min-height: 44px; border: 0; background: #9FD182; color: #101212; font-weight: 500; box-shadow: none; }
  /* the foot: one main button at the thumb; the Cancel or Close beside it is the × at the top (v519: a foot drawn inside the body too, as an
     account's form has it) */
  :root.land #overlay .drawer.r6-old > footer, :root.land #overlay .drawer.r6-old > .body > footer { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 20px calc(16px + var(--safe-b, 0px)); border: 0; background: transparent; }
  :root.land #overlay .drawer.r6-old > footer .btn.primary, :root.land #overlay .drawer.r6-old > .body > footer .btn.primary { justify-content: center; min-height: 54px; width: 100%; border: 0; border-radius: 999px; background: #9FD182; color: #101212; font-size: 15px; font-weight: 500; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
  :root.land #overlay .drawer.r6-old > footer .btn.primary:active, :root.land #overlay .drawer.r6-old > .body > footer .btn.primary:active { transform: scale(.97); }
  :root.land #overlay .drawer.r6-old > footer :is(.btn.ghost.spacer, .btn.ghost[data-a="close"], .btn[data-a="close"]:not(.primary)), :root.land #overlay .drawer.r6-old > .body > footer :is(.btn.ghost.spacer, .btn.ghost[data-a="close"], .btn[data-a="close"]:not(.primary)) { display: none; }
  :root.land #overlay .drawer.r6-old > footer .btn.ghost:not(.spacer), :root.land #overlay .drawer.r6-old > .body > footer .btn.ghost:not(.spacer) { min-height: 44px; justify-content: center; border: 0; background: none; color: rgba(239, 241, 246, .7); }
  :root.land #overlay .drawer.r6-old > footer .btn.ghost.danger, :root.land #overlay .drawer.r6-old > .body > footer .btn.ghost.danger { color: #FF8A80; }
  :root.land #overlay .drawer.r6-old > footer:not(.r6q-foot):not(:has(> .btn:not(.spacer):not([data-a="close"]))), :root.land #overlay .drawer.r6-old > .body > footer:not(:has(> .btn:not(.spacer):not([data-a="close"]))) { display: none; }      /* nothing left in it but Close (v520: the v6 sheets' own foot, r6-old.js, is theirs) */
}