/* Dorax Finance — what a figure is made of, in the owner's v6 (v505; features/phone/r6-kpi.js). The frame is the v6 sheet's (look-r6-panels.css:
   .r6-old.r6o-sheet); the blocks are the Calendar's "where it comes from" (.r6pn-card, .r6pn-row): words #EFF1F6 and their quiet .6, the blocks
   rgba(239, 241, 246, .05) on #121414, hairlines .07; lime #9FD182 for money in and a share kept, coral #FF8A80 for what is taken away or goes over
   the plan, amber #F7D27A for a change the wrong way (as Reports' arrow). Bars 8 px (as the summary's, look-r6-home4.css). Type: the figure 30/600,
   the parts' titles 17/500, the rows 15/500 (tools/r6-type.py). The company's colours: tools/r6-co.py; light: tools/r6-light.py and
   tools/r6-light-hand.css; the computer, a dialog in the middle: css/desk6/desk6-panels.css. */
@media (max-width: 920px) {
  :root.land #overlay .drawer.r6-old > .body.r6-kx { display: flex; flex-direction: column; gap: 0; padding: 6px 20px 26px; }

  /* ---------- the top: what it is, the figure, one sentence ---------- */
  :root.land #overlay .r6kx-top { display: flex; flex-direction: column; gap: 4px; }
  :root.land #overlay .r6kx-top > small { color: rgba(239, 241, 246, .6); font-size: 14px; line-height: 1.35; }
  :root.land #overlay .r6kx-top > b { color: #EFF1F6; font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; }
  :root.land #overlay .r6kx-top > b .cents { opacity: 1; color: rgba(239, 241, 246, .45); font-size: .6em; font-weight: 500; letter-spacing: 0; }
  :root.land #overlay .r6kx-top > b.neg { color: #FF8A80; }
  :root.land #overlay .r6kx-top > b.neg .cents { color: rgba(255, 138, 128, .7); }
  :root.land #overlay .r6kx-top > p { margin: 8px 0 0; color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.45; }

  /* ---------- a part: its title in words, its rows or bars in one block ---------- */
  :root.land #overlay .r6kx-sec { display: flex; flex-direction: column; margin-top: 28px; }
  :root.land #overlay .r6kx-sec > h3 { margin: 0 0 12px; color: #EFF1F6; font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; text-transform: none; }
  :root.land #overlay .r6kx-row { min-height: 56px; }
  :root.land #overlay .r6kx-row .r6pn-rt :is(b, small) { white-space: normal; overflow-wrap: anywhere; }      /* a long name on two lines, not cut */
  :root.land #overlay .r6kx-row.neg .r6pn-rv { color: #FF8A80; }
  :root.land #overlay .r6kx-row.in .r6pn-rv { color: #9FD182; }
  :root.land #overlay .r6kx-row.late .r6pn-rt small { color: #FF8A80; }
  :root.land #overlay .r6kx-card > .r6kx-row.total { border-top: 1px solid rgba(239, 241, 246, .16); }
  :root.land #overlay .r6kx-row.total :is(.r6pn-rt b, .r6pn-rv) { color: #EFF1F6; font-weight: 600; }
  :root.land #overlay .r6kx-row.total.neg .r6pn-rv { color: #FF8A80; }

  /* ---------- bars: the name and amount, the bar under them ---------- */
  :root.land #overlay .r6kx-bar { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100%; min-height: 66px; padding: 12px 0; color: #EFF1F6; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .r6kx-bar + .r6kx-bar { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.land #overlay button.r6kx-bar { cursor: pointer; transition: opacity .2s ease-out; }
  :root.land #overlay button.r6kx-bar:active { opacity: .7; }
  :root.land #overlay button.r6kx-bar:focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; border-radius: 12px; }
  :root.land #overlay .r6kx-bh { display: flex; align-items: center; gap: 12px; min-width: 0; }
  :root.land #overlay .r6kx-n { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #EFF1F6; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.land #overlay .r6kx-n .dot { display: inline-block; width: 10px; height: 10px; margin: 0 10px 1px 0; border-radius: 50%; vertical-align: middle; }
  :root.land #overlay .r6kx-bh > b { flex: none; color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.land #overlay .r6kx-track { position: relative; display: flex; gap: 3px; height: 8px; border-radius: 4px; background: rgba(239, 241, 246, .08); overflow: hidden; }
  :root.land #overlay .r6kx-track > :is(i, em) { display: block; flex: none; height: 100%; border-radius: 4px; }
  :root.land #overlay .r6kx-track > i.q { background: rgba(239, 241, 246, .45); }
  :root.land #overlay .r6kx-track > i.in { background: #9FD182; }
  :root.land #overlay .r6kx-track > i.go { background: #9FD182; }
  :root.land #overlay .r6kx-track > i.plan { background: #2A7465; }
  :root.land #overlay .r6kx-track > i.over { background: #FF8A80; }
  :root.land #overlay .r6kx-track.split > i { min-width: 6px; }
  :root.land #overlay .r6kx-track.split > em { min-width: 6px; background: #FF8A80; }
  :root.land #overlay .r6kx-meter { margin-top: 4px; }

  /* ---------- the words: under a bar, alone, or how it compares ---------- */
  :root.land #overlay .r6kx-note { margin: 0; color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.45; }
  :root.land #overlay .r6kx-note b { color: #EFF1F6; font-weight: 500; }
  :root.land #overlay .r6kx-note b.pos { color: #9FD182; }
  :root.land #overlay .r6kx-note b.neg { color: #FF8A80; }
  :root.land #overlay .r6kx-meter + .r6kx-note { margin-top: 12px; font-size: 14px; }
  :root.land #overlay .r6kx-sec + .r6kx-note { margin-top: 14px; }
  :root.land #overlay .r6kx-vs { display: flex; align-items: center; gap: 8px; margin: 0; color: #EFF1F6; font-size: 15px; line-height: 1.4; }
  :root.land #overlay .r6kx-vs svg { flex: none; width: 15px; height: 15px; stroke-width: 2.4; }
  :root.land #overlay .r6kx-vs.up svg { color: #9FD182; }
  :root.land #overlay .r6kx-vs.down svg { color: #F7D27A; }
  :root.land #overlay .r6kx-was { color: rgba(239, 241, 246, .5); }
  :root.land #overlay .r6kx-vs + .r6kx-note { margin-top: 8px; }

  /* ---------- the way further: a flat button at the thumb (two at most); over the frame's own buttons (look-r6-panels.css: .r6-old .btn:not(…)) ---------- */
  :root.land #overlay .drawer.r6-old.r6o-sheet > footer .btn.r6kx-go:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { justify-content: center; gap: 6px; min-height: 52px; width: 100%; border: 0; border-radius: 999px; background: rgba(239, 241, 246, .08); box-shadow: none; color: #EFF1F6; font-size: 15px; font-weight: 500; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.land #overlay .drawer.r6-old > footer .btn.r6kx-go svg { width: 16px; height: 16px; color: rgba(239, 241, 246, .6); }
  :root.land #overlay .drawer.r6-old > footer .btn.r6kx-go:active { transform: scale(.97); }
  :root.land #overlay .drawer.r6-old > footer .btn.r6kx-go:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { :root.land #overlay .drawer.r6-old.r6o-sheet > footer .btn.r6kx-go:not(.primary):not(.danger):not(.ghost):not(.linkbtn):hover { background: rgba(239, 241, 246, .12); } :root.land #overlay button.r6kx-bar:hover .r6kx-n { color: rgba(239, 241, 246, .8); } }
  @media (prefers-reduced-motion: reduce) { :root.land #overlay :is(button.r6kx-bar, .drawer.r6-old > footer .btn.r6kx-go) { transition: none; } :root.land #overlay .drawer.r6-old > footer .btn.r6kx-go:active { transform: none; } }
}