/* Dorax Finance — the owner's Tips in the "v6" look (v349, features/phone/r6-tips.js; the canvas "Tips-V6"): its own top on the page, the videos as
   tall cards to slide, the kinds as chips (the one chosen muted white), each change under its day with its kind's colour, its reactions round
   (muted white once given), your ideas in one card with its band. Nothing at the foot. Its tabs at the top: the owner's wheel (look-r6-top.css).
   Over the phone's Tips (look-land-tips.css), whose classes it keeps. The frame: look-r6-pages.css. */
@media (max-width: 920px) {
  :root.r6.r6-pg #view .r6-tips { gap: 32px; padding: 10px 0 28px; }

  /* ---------- its own top: what Tips is, in its words ---------- */
  :root.r6.r6-pg #view .r6-tip-top { gap: 4px; }
  :root.r6.r6-pg #view .r6-tip-top .tips-title { color: #EFF1F6; font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
  :root.r6.r6-pg #view .r6-tip-top p { color: rgba(239, 241, 246, .6); font-size: 14.5px; }

  /* ---------- a section's head: its name at 22 px, the way further in lime at the right ---------- */
  :root.r6.r6-pg #view .r6-tip-sec { gap: 12px; }
  :root.r6.r6-pg #view .r6-tip-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  :root.r6.r6-pg #view .r6-tip-sh h2 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6-tip-sh.col { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; min-height: 0; }
  :root.r6.r6-pg #view .r6-tip-sh.col label { color: rgba(239, 241, 246, .55); font-size: 14px; }
  :root.r6.r6-pg #view .r6-tips .tips-link { color: #9FD182; font-size: 14.5px; }
  :root.r6.r6-pg #view .r6-tips .tips-link:focus-visible { outline-color: #9FD182; }

  /* ---------- the videos: tall cards, each its poster with the edge of light, the lime play in the middle, how long it lasts ---------- */
  :root.r6.r6-pg #view .r6-tip-vids { gap: 12px; padding: 2px 16px 4px; scroll-snap-type: x mandatory; }
  :root.r6.r6-pg #view .r6-tip-vid { width: 164px; gap: 10px; }
  :root.r6.r6-pg #view .r6-tip-pic { height: 216px; border: 1px solid transparent; border-radius: 28px; background: var(--r6-face), linear-gradient(#121414, #121414) padding-box, var(--r6-rim); box-shadow: none; }
  :root.r6.r6-pg #view .r6-tip-pic img { border-radius: 27px; }
  :root.r6.r6-pg #view .r6-tip-pic .tips-play { width: 52px; height: 52px; background: #9FD182; color: #101212; box-shadow: none; }
  :root.r6.r6-pg #view .r6-tip-pic .tips-play svg { width: 20px; height: 20px; fill: currentColor; }
  :root.r6.r6-pg #view .r6-tip-pic > small { right: 12px; bottom: 12px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; background: rgba(7, 8, 8, .85); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-tip-vid .tips-vt small { color: #9FD182; font-size: 12.5px; }
  :root.r6.r6-pg #view .r6-tip-vid .tips-vt b { color: #EFF1F6; font-size: 15.5px; }
  :root.r6.r6-pg #view .r6-tip-vid:focus-visible { outline-color: #9FD182; border-radius: 28px; }

  /* ---------- what is new: the kinds as chips, the one chosen muted white ---------- */
  :root.r6.r6-pg #view .r6-tip-kinds .tips-k { gap: 8px; padding: 0 16px; background: #121414; box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .1); color: #EFF1F6; font-size: 14px; font-weight: 500; transition: background-color .25s ease, color .25s ease; }
  :root.r6.r6-pg #view .r6-tip-kinds .tips-k small { font-size: 12.5px; font-weight: 500; }
  :root.r6.r6-pg #view .r6-tip-kinds .tips-k[aria-pressed="true"] { background: #D9DCE1; box-shadow: none; color: #101212; }
  :root.r6.r6-pg #view .r6-tip-kinds .tips-k:focus-visible { outline-color: #9FD182; }
  :root.r6.r6-pg #view .r6-tips .tips-feed { gap: 0; }
  /* a day: its date in small capitals; its changes one under the other, a hairline between them */
  :root.r6.r6-pg #view .r6-tip-date { margin: 0; padding: 18px 2px 4px; color: rgba(239, 241, 246, .5); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
  :root.r6.r6-pg #view .r6-tip { gap: 14px; padding: 14px 0 12px; }
  :root.r6.r6-pg #view .r6-tip + .r6-tip::before { left: 0; background: rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-tip-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(159, 209, 130, .12); color: #9FD182; }
  :root.r6.r6-pg #view .r6-tip-ic svg { width: 18px; height: 18px; }
  :root.r6.r6-pg #view .r6-tip-ic:is(.better, .planned) { background: rgba(106, 175, 162, .14); color: #8FD3C5; }
  :root.r6.r6-pg #view .r6-tip-ic.fix { background: rgba(247, 210, 122, .14); color: #F7D27A; }
  :root.r6.r6-pg #view .r6-tip-ic:is(.news, .open, .declined) { background: rgba(239, 241, 246, .07); color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-tip-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  :root.r6.r6-pg #view .r6-tip-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  :root.r6.r6-pg #view .r6-tip-h h4 { margin: 0; min-width: 0; color: #EFF1F6; font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
  :root.r6.r6-pg #view .r6-tip-h .tips-new { font-size: 12px; font-weight: 500; color: #9FD182; }
  /* its kind: a small tag at the right, in the kind's colour */
  :root.r6.r6-pg #view .r6-tag6 { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(159, 209, 130, .16); color: #9FD182; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-tag6:is(.better, .planned) { background: rgba(106, 175, 162, .18); color: #8FD3C5; }
  :root.r6.r6-pg #view .r6-tag6.fix { background: rgba(247, 210, 122, .16); color: #F7D27A; }
  :root.r6.r6-pg #view .r6-tag6:is(.news, .open, .declined) { background: rgba(239, 241, 246, .1); color: rgba(239, 241, 246, .8); }
  :root.r6.r6-pg #view .r6-tip-t > p { margin: 0; color: rgba(239, 241, 246, .68); font-size: 14px; line-height: 1.45; }
  :root.r6.r6-pg #view .r6-tip-t > p.tips-reply b { color: #EFF1F6; }
  /* its reactions: round, muted white once given; the way to try it in lime at the right */
  :root.r6.r6-pg #view .r6-tip .tips-foot { column-gap: 6px; margin: 2px 0 0; }
  :root.r6.r6-pg #view .r6-tip .tips-foot .wn-react { gap: 6px; }
  :root.r6.r6-pg #view .r6-tip .tips-foot .wn-r { min-width: 44px; height: 44px; padding: 0; border-radius: 22px; color: rgba(239, 241, 246, .55); transition: background-color .25s ease, color .25s ease, transform .12s ease-out; }
  :root.r6.r6-pg #view .r6-tip .tips-foot .wn-r:has(b) { padding: 0 12px 0 11px; }
  :root.r6.r6-pg #view .r6-tip .tips-foot .wn-r.on { background: #D9DCE1; color: #101212; }
  :root.r6.r6-pg #view .r6-tip .tips-foot .wn-r:focus-visible { outline-color: #9FD182; }
  :root.r6.r6-pg #view .r6-tip .tips-go { color: #9FD182; font-size: 14px; }
  :root.r6.r6-pg #view .r6-tips .tips-more { align-self: flex-start; margin-left: 54px; }
  :root.r6.r6-pg #view .r6-tips .tips-none { color: rgba(239, 241, 246, .6); }

  /* ---------- your ideas: one card to write in, its band with who reads them and Send ---------- */
  :root.r6.r6-pg #view .r6-tip-write { display: flex; flex-direction: column; }
  :root.r6.r6-pg #view .r6-tip-write .tips-field { min-height: 120px; padding: 18px 20px; border-radius: 0; background: transparent; box-shadow: none; color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-tip-write .tips-field::placeholder { color: rgba(239, 241, 246, .45); }
  :root.r6.r6-pg #view .r6-tip-write:focus-within { box-shadow: inset 0 0 0 2px rgba(159, 209, 130, .5); }
  :root.r6.r6-pg #view .r6-tip-write .tips-send { gap: 12px; padding: 10px 10px 10px 20px; border-top: 1px solid rgba(239, 241, 246, .07); background: rgba(255, 255, 255, .025); }
  :root.r6.r6-pg #view .r6-tip-write .tips-send small { flex: 1 1 auto; min-width: 0; color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-tip-go { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
    border-radius: 999px; background: #9FD182; color: #101212; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .25s ease, color .25s ease; }
  :root.r6.r6-pg #view .r6-tip-go svg { width: 16px; height: 16px; stroke-width: 2.3; }
  /* nothing written yet: Send waits, quiet */
  :root.r6.r6-pg #view .r6-tip-write:has(.tips-field:placeholder-shown) .r6-tip-go:not(.busy) { background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .45); }
  :root.r6.r6-pg #view .r6-tip-go.busy { background: rgba(159, 209, 130, .16); color: #9FD182; }
  :root.r6.r6-pg #view .r6-tip-go:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.r6.r6-pg #view .r6-tip-hint { gap: 12px; margin: 0; padding: 4px 2px; color: rgba(239, 241, 246, .7); font-size: 14px; }
  :root.r6.r6-pg #view .r6-tip-hint .r6-tip-ic svg { width: 18px; height: 18px; }
  /* yours, and what others suggested: in one card, a hairline between them */
  :root.r6.r6-pg #view .r6-tips :is(.tips-mine, .tips-board) { gap: 4px; margin-top: 4px; }
  :root.r6.r6-pg #view .r6-tip-ideas { gap: 0; }
  :root.r6.r6-pg #view .r6-tip-ideas .idea { gap: 14px; padding: 16px 18px; border-radius: 0; background: transparent; box-shadow: none; }
  :root.r6.r6-pg #view .r6-tip-ideas .idea + .idea { border-top: 1px solid rgba(239, 241, 246, .07); }
  :root.r6.r6-pg #view .r6-tip-ideas .idea h3 { color: #EFF1F6; font-size: 15.5px; }
  :root.r6.r6-pg #view .r6-tip-ideas :is(.idea-body, .idea-meta) { color: rgba(239, 241, 246, .62); }
  :root.r6.r6-pg #view .r6-tip-ideas .idea-vote { min-height: 56px; border-radius: 18px; background: rgba(239, 241, 246, .07); box-shadow: none; color: rgba(239, 241, 246, .7); }
  :root.r6.r6-pg #view .r6-tip-ideas .idea-vote b { color: #EFF1F6; }
  :root.r6.r6-pg #view .r6-tip-ideas .idea-vote[aria-pressed="true"] { background: #D9DCE1; color: #101212; }
  :root.r6.r6-pg #view .r6-tip-ideas .idea-vote[aria-pressed="true"] b { color: #101212; }
  :root.r6.r6-pg #view .r6-tip-ideas .idea-reply b { color: #EFF1F6; }

  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view :is(.r6-tip-kinds .tips-k, .r6-tip .tips-foot .wn-r, .r6-tip-go) { transition: none; } }
}