/* Dorax Finance — the owner's Categories in the "v6" look (v349, features/phone/r6-cats.js; the canvas "Categorias-V6"): the share with a category
   and its line of two parts, the categories as widgets in their own colour, the income as one wide widget, the rules as a line, the new category
   and the sorting at the foot. The frame: look-r6-pages.css. */
@media (max-width: 920px) {
  /* its round + of the top bar went down to the thumb, into the dock */
  :root.r6.r6-pg .navbar .bq-new[data-a="catl-new"] { display: none; }

  /* ---------- the top: the share large, the line of what has a category (lime) and what has none (amber) ---------- */
  :root.r6.r6-pg #view .r6-cat-top .r6-cat-pc { color: rgba(239, 241, 246, .42); font-size: .5em; letter-spacing: -.02em; }
  :root.r6.r6-pg #view .r6-cat-line { display: flex; gap: 3px; height: 14px; margin-top: 20px; }
  :root.r6.r6-pg #view .r6-cat-line > i { display: block; min-width: 14px; border-radius: 7px; transform-origin: 0 50%; animation: r6-trk 1s cubic-bezier(.2, .9, .25, 1) .2s both; }
  :root.r6.r6-pg #view .r6-cat-line > i.ok { background: #9FD182; }
  :root.r6.r6-pg #view .r6-cat-line > i.none { background: #F7D27A; animation-delay: .3s; }
  :root.r6.r6-pg #view .r6-cat-top .r6-cat-amb b { color: #F7D27A; }
  :root.r6.r6-pg #view .r6-cat-none { margin: 12px 0 0; color: rgba(239, 241, 246, .55); font-size: 14.5px; line-height: 1.45; }

  /* ---------- the sections ---------- */
  :root.r6.r6-pg #view .r6-cat-sec { margin-top: 30px; }
  :root.r6.r6-pg #view .r6-cat-top + .r6-cat-sec { margin-top: 34px; }
  :root.r6.r6-pg #view .r6-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :root.r6.r6-pg #view .r6-cat-wides { display: flex; flex-direction: column; gap: 12px; }

  /* ---------- a category as a widget: its colour's light at the corner, its drawing, its name, how many large, its subcategories ---------- */
  :root.r6.r6-pg #view .r6-cat-w { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
    min-width: 0; min-height: 44px; padding: 18px; border: 1px solid transparent; border-radius: 32px; color: #EFF1F6;
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), rgba(0, 0, 0, 0) 60%) padding-box, linear-gradient(#121414, #121414) padding-box, var(--r6-rim); }
  :root.r6.r6-pg #view .r6-cat-w > .cg { width: 44px; height: 44px; }
  :root.r6.r6-pg #view .r6-cat-w > .cg svg { width: 20px; height: 20px; }
  :root.r6.r6-pg #view .r6-cat-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.r6.r6-pg #view .r6-cat-t > b { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-cat-t > span { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  :root.r6.r6-pg #view :is(.r6-cat-t > span, .r6-cat-k) > b { font-size: 26px; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
  :root.r6.r6-pg #view :is(.r6-cat-t > span, .r6-cat-k) > small { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-cat-s { overflow: hidden; color: rgba(239, 241, 246, .45); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  :root.r6.r6-pg #view .r6-cat-w.wide { flex-direction: row; align-items: center; padding: 18px 20px 18px 18px; border-radius: 28px; }
  :root.r6.r6-pg #view .r6-cat-w.wide .r6-cat-t { flex: 1 1 auto; gap: 3px; }
  :root.r6.r6-pg #view .r6-cat-w.wide .r6-cat-s { color: rgba(239, 241, 246, .55); font-size: 13px; }
  :root.r6.r6-pg #view .r6-cat-k { flex: none; display: flex; align-items: baseline; gap: 6px; }
  :root.r6.r6-pg #view .r6-cat-w:active { transform: scale(.965); }
  :root.r6.r6-pg #view .r6-cat-w:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }

  /* ---------- the rules: one quiet line ---------- */
  :root.r6.r6-pg #view .r6-cat-rule { display: flex; align-items: flex-start; gap: 14px; padding: 6px 2px; }
  :root.r6.r6-pg #view .r6-cat-ri { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(159, 209, 130, .12); color: #9FD182; }
  :root.r6.r6-pg #view .r6-cat-ri svg { width: 19px; height: 19px; }
  :root.r6.r6-pg #view .r6-cat-rule .r6-cat-t { flex: 1 1 auto; gap: 4px; }
  :root.r6.r6-pg #view .r6-cat-rule .r6-cat-t > b { white-space: normal; }
  :root.r6.r6-pg #view .r6-cat-rule .r6-cat-t > small { color: rgba(239, 241, 246, .6); font-size: 13.5px; line-height: 1.45; white-space: normal; }

  /* ---------- at the foot: how many there are to sort, amber on the lime button ---------- */
  :root.r6.r6-pg .r6-dock .r6-db.go:has(.r6-cat-n) { padding-right: 12px; }
  :root.r6.r6-pg .r6-dock .r6-cat-n { flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: #070808; color: #F7D27A; font-size: 13px; font-weight: 600; }

  @media (prefers-reduced-motion: reduce) { :root.r6.r6-pg #view .r6-cat-line > i { animation: none; } }
}