/* Dorax Finance — the owner's Investments in the v6 look (v349, features/phone/r6-invest.js): its own parts. The frame (the page black, the
   cards, the heads, the big figure, the two figures, the dock at the foot) is css/look/look-r6-pages.css. */
@media (max-width: 920px) {
  /* ---------- the top: what it gained, the line split by fund and its legend ---------- */
  :root.r6.r6-pg #view .r6i-gain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; color: rgba(239, 241, 246, .72); font-size: 14px; }
  :root.r6.r6-pg #view .r6i-gain svg { flex: none; color: #9FD182; stroke-width: 2.4; }
  :root.r6.r6-pg #view .r6i-gain b { color: #9FD182; font-weight: 500; }
  :root.r6.r6-pg #view .r6i-gain.neg svg, :root.r6.r6-pg #view .r6i-gain.neg b { color: #FF8A80; }
  :root.r6.r6-pg #view .r6i-bar { display: flex; gap: 3px; height: 14px; margin-top: 20px; }
  :root.r6.r6-pg #view .r6i-bar i { display: block; min-width: 6px; border-radius: 7px; transform-origin: 0 50%; animation: r6-trk 1s cubic-bezier(.2, .9, .25, 1) both; }
  :root.r6.r6-pg #view .r6i-leg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  :root.r6.r6-pg #view .r6i-leg > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.r6.r6-pg #view .r6i-leg small { display: flex; align-items: center; gap: 6px; overflow: hidden; color: rgba(239, 241, 246, .6); font-size: 12.5px; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-leg small i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
  :root.r6.r6-pg #view .r6i-leg b { padding-left: 15px; color: #EFF1F6; font-size: 15px; font-weight: 500; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-none h2 { margin: 18px 0 0; color: #EFF1F6; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6i-none p { margin: 8px 0 0; color: rgba(239, 241, 246, .6); font-size: 15px; line-height: 1.45; }

  /* ---------- the sections: more room between them than the frame's ---------- */
  :root.r6.r6-pg #view .r6i-sec { margin-top: 30px; }
  :root.r6.r6-pg #view .r6i-tag { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-tag.warn { background: rgba(247, 210, 122, .16); color: #F7D27A; }
  :root.r6.r6-pg #view .r6i-tag.ok { background: rgba(159, 209, 130, .16); color: #9FD182; }

  /* ---------- a card of rows: the month's income, the funds ---------- */
  :root.r6.r6-pg #view .r6i-rows { display: flex; flex-direction: column; }
  :root.r6.r6-pg #view .r6i-row { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 12px; min-height: 72px; margin: 0 18px 0 16px; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6i-rows .r6i-row { min-height: 76px; }
  :root.r6.r6-pg #view .r6i-row.line { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view div.r6i-row { cursor: default; }
  :root.r6.r6-pg #view .r6i-row:focus-visible { outline: 2px solid #9FD182; outline-offset: -2px; border-radius: 16px; }
  :root.r6.r6-pg #view .r6i-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6i-ic svg { width: 19px; height: 19px; stroke-width: 2; }
  :root.r6.r6-pg #view .r6i-ic.in { background: rgba(159, 209, 130, .14); color: #9FD182; }
  :root.r6.r6-pg #view .r6i-ic.done { background: #9FD182; color: #101212; }
  :root.r6.r6-pg #view .r6i-ic.done svg { stroke-width: 2.6; }
  :root.r6.r6-pg #view .r6i-ic.fund { background: rgba(239, 241, 246, .06); box-shadow: inset 0 0 0 2px var(--c); }
  :root.r6.r6-pg #view .r6i-ic.soft { background: rgba(239, 241, 246, .06); }
  :root.r6.r6-pg #view .r6i-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  :root.r6.r6-pg #view .r6i-t b { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-t small { overflow: hidden; color: rgba(239, 241, 246, .55); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-row.fund .r6i-t small { white-space: normal; line-height: 1.3; }      /* its quotas and average price in full, on two lines if need be */
  :root.r6.r6-pg #view .r6i-am { flex: none; font-size: 16px; font-weight: 500; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  :root.r6.r6-pg #view .r6i-v b { font-size: 16px; font-weight: 500; white-space: nowrap; }
  :root.r6.r6-pg #view .r6i-v small { color: #9FD182; font-size: 12.5px; white-space: nowrap; }
  /* a fund's amount being changed: its field where its figure was */
  :root.r6.r6-pg #view .r6i-in { flex: none; }
  :root.r6.r6-pg #view .r6i-in input { box-sizing: border-box; width: 116px; height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: rgba(239, 241, 246, .06); box-shadow: inset 0 0 0 1.5px #9FD182;
    color: #EFF1F6; font: inherit; font-size: 16px; font-weight: 500; text-align: right; }
  :root.r6.r6-pg #view .r6i-in input:focus { outline: none; }
  /* the band at the card's foot: how it was filled in, or that all of it is recorded */
  :root.r6.r6-pg #view .r6i-band { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px; border-top: 1px solid rgba(239, 241, 246, .07); background: rgba(255, 255, 255, .025);
    color: rgba(239, 241, 246, .6); font-size: 13px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6i-band.ok { color: #9FD182; font-weight: 500; }
  :root.r6.r6-pg #view .r6i-band svg { flex: none; width: 16px; height: 16px; stroke-width: 2.4; }
  :root.r6.r6-pg #view .r6i-note { margin: 0; padding: 0 4px; color: rgba(239, 241, 246, .5); font-size: 12.5px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6i-note .linkbtn { min-height: 44px; color: #9FD182; }

  /* ---------- what it paid: twelve bars, last month lime, this month dashed until recorded ---------- */
  :root.r6.r6-pg #view .r6i-bars { margin: 0; padding: 20px 18px 16px; }
  :root.r6.r6-pg #view .r6i-cols, :root.r6.r6-pg #view .r6i-ml { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
  :root.r6.r6-pg #view .r6i-cols { align-items: end; height: 110px; }
  :root.r6.r6-pg #view .r6i-cols i { display: block; border-radius: 8px; background: rgba(159, 209, 130, .35); transform-origin: 50% 100%; animation: r6-fill .7s cubic-bezier(.2, .9, .25, 1) both; }
  :root.r6.r6-pg #view .r6i-cols i.hi { background: #9FD182; }
  :root.r6.r6-pg #view .r6i-cols i.zero { background: rgba(239, 241, 246, .08); }
  :root.r6.r6-pg #view .r6i-cols i.todo { background: none; box-shadow: inset 0 0 0 1.5px rgba(159, 209, 130, .7); }
  :root.r6.r6-pg #view .r6i-ml { margin-top: 8px; }
  :root.r6.r6-pg #view .r6i-ml small { color: rgba(239, 241, 246, .45); font-size: 11.5px; font-weight: 500; text-align: center; }
  :root.r6.r6-pg #view .r6i-ml small.now { color: #EFF1F6; }

  /* ---------- trying a purchase out, every movement, the fine print ---------- */
  :root.r6.r6-pg #view .r6i-more { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
  :root.r6.r6-pg #view .r6i-sim { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px 16px 14px; border: 1px solid transparent; border-radius: 28px;
    background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6i-sim .r6i-t b { font-size: 15.5px; }
  :root.r6.r6-pg #view .r6i-sim .r6i-t small { white-space: normal; }
  :root.r6.r6-pg #view .r6i-sim:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.r6.r6-pg #view .r6i-mv { min-height: 64px; margin: 0; padding: 0 4px; }
  :root.r6.r6-pg #view .r6i-go { flex: none; display: grid; place-items: center; color: rgba(239, 241, 246, .5); }
  :root.r6.r6-pg #view .r6i-go svg { width: 16px; height: 16px; stroke-width: 2.2; }
  :root.r6.r6-pg #view .r6i-fine { margin: 18px 0 0; color: rgba(239, 241, 246, .45); font-size: 12.5px; line-height: 1.5; }

  /* ---------- the dock: the day it came in, a date field under its words ---------- */
  :root.r6.r6-pg .r6-dock .r6i-day { position: relative; overflow: hidden; }
  :root.r6.r6-pg .r6-dock .r6i-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  :root.r6.r6-pg .r6-dock .r6i-day:focus-within { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.r6.r6-pg .r6-dock .r6-db[disabled] { opacity: .45; cursor: default; }

  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view .r6i-bar i, :root.r6.r6-pg #view .r6i-cols i { animation: none; } }
}