/* Dorax Finance — the owner's payments and a debt's Delete in the v6 look (v434; features/phone/r6-forms.js, r6-more.js). The forms are the v6 add
   screens (look-r6-add.css: the black page, the amount at 52 px, the rows with hairlines, the keys and the lime bar at the foot); here only what
   they add: the thing paid as a card on the cards' grey with its edge of light, the piece this payment takes lit in lime (amber, flat, past the
   plan), and a quiet coral Delete under a debt being changed. Nothing here leans on :root.r6: the colours are written out. */
@media (max-width: 920px) {
  /* ---------- the thing paid: a card ---------- */
  :root.land #overlay .r6-fp-card { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding: 16px 18px 15px; border: 1px solid transparent; border-radius: 24px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 55%) padding-box, linear-gradient(#121414, #121414) padding-box,
      linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .06)) border-box; }
  :root.land #overlay .r6-fp-h { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; color: rgba(239, 241, 246, .7); font-size: 14.5px; line-height: 1.35; }
  :root.land #overlay .r6-fp-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6-fp-card.debt .r6-fp-h > span { white-space: normal; }      /* a long name: the line wraps, what it owes is never cut */
  :root.land #overlay .r6-fp-h b { color: #EFF1F6; font-weight: 500; }
  :root.land #overlay .r6-fp-h .cg { flex: none; width: 32px; height: 32px; }
  :root.land #overlay .r6-fp-h .cg svg { width: 16px; height: 16px; }
  :root.land #overlay .r6-fp-bar { display: flex; height: 10px; overflow: hidden; border-radius: 5px; background: rgba(239, 241, 246, .08); }
  :root.land #overlay .r6-fp-bar[hidden] { display: none; }
  :root.land #overlay .r6-fp-card.debt .r6-fp-bar { background: rgba(255, 138, 128, .3); }      /* what it owes, coral; this payment's piece of it, lime */
  :root.land #overlay .r6-fp-bar i { display: block; flex: none; height: 100%; transition: width .5s cubic-bezier(.2, .9, .25, 1), background-color .3s ease; }
  :root.land #overlay .r6-fp-bar .a { background: rgba(239, 241, 246, .32); }
  :root.land #overlay .r6-fp-bar .b { background: #9FD182; }
  :root.land #overlay .r6-fp-bar .b.over { background: #F7D27A; }
  :root.land #overlay .r6-fp-t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; color: rgba(239, 241, 246, .55); font-size: 13.5px; }
  :root.land #overlay .r6-fp-t > span { white-space: nowrap; }
  :root.land #overlay .r6-fp-t .r { margin-left: auto; text-align: right; }
  :root.land #overlay .r6-fp-t .r.done { color: #9FD182; font-weight: 500; }
  :root.land #overlay .r6-fp .tfl-pay { padding: 6px 0 12px; }
  :root.land #overlay .r6-fp .tfl-field + .r6-note { margin-top: -6px; }

  /* ---------- a goal that keeps its currency: why, under its account ---------- */
  :root.land #overlay .r6-goal .r6-held { margin: 8px 0 4px; }

  /* ---------- a debt being changed: Delete, quiet and coral, apart from the lime ---------- */
  :root.land #overlay .r6-del { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; align-self: center; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    color: #FF8A80; font-size: 15px; font-weight: 500; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25), background-color .2s; }
  :root.land #overlay .r6-del:active { transform: scale(.97); background: rgba(255, 138, 128, .1); }
  :root.land #overlay .r6-del:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    :root.land #overlay .r6-fp-bar i, :root.land #overlay .r6-del { transition: none; }
  }
}
/* v439: a kept income paid every two weeks, with pays recorded: each pay is their average, shown, not typed (features/phone/r6-pay.js) */
@media (max-width: 920px) {
  :root.land #overlay .r6-pay .r6-pay-avg { cursor: default; }
  :root.land #overlay .r6-pay .r6-pay-avgsay { display: block; margin-top: 6px; color: rgba(239, 241, 246, .55); font-size: 13px; line-height: 1.4; }
}