/* Dorax Finance — the company's other screens as the household's own v6 pages (v473; owner, 2026-11-01: "Si", to moving the company's Transactions,
   Accounts, Calendar, Categories, Imports and Reports, its forms and the sheets Pay bills and Record payment to the new design; features/phone/r6-co.js:
   R6_CO_SHARED). The household's sheets draw them (look-r6-tx.css, -accounts, -calendar, -cats, -reports, -misc, -pages); here only the company's
   colours: its white where the household has its lime as an accent (a link, a chosen day, the month shown, what is done, the main button), the ink in
   light (the variables --co-hi and --co-on: look-r6-company.css, tools/r6-light-hand.css). Lime stays where it says money came in, and where a figure
   is good news, as on the company's summary. Every rule starts with :root.in-app.r6.r6-co, one step stronger than the household's it changes (in the
   light sheet too, where this file comes before some of theirs: tools/r6-light.py). */
@media (max-width: 920px) {
  /* ---------- the pages' shared parts: a new one's row, the count on the filter at the thumb ---------- */
  :root.in-app.r6.r6-co #view :is(.bp-new, .bp-chip) { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view :is(.bp-new, .bp-chip) svg { color: var(--co-hi); }
  :root.in-app.r6.r6-co :is(#view, #r6-foot) .r6-dock .r6-db.go .r6-n { background: var(--co-on); color: var(--co-hi); }

  /* ---------- Transactions: "Sort" in the row of what has no category ---------- */
  :root.in-app.r6.r6-co #view .r6-tx .txl-go { color: var(--co-hi); }
  /* a long name on a day's second line and after stays within its column: since v478 the household's own sheet (look-r6-tx.css), both sides */

  /* ---------- Accounts: the line of what the company has, every day in its white, the savings a shade of it ---------- */
  :root.in-app.r6.r6-co #view :is(.r6-acc-line > .day, .r6-acc-keys .day i) { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view :is(.r6-acc-line > .sv, .r6-acc-keys .sv i) { background: rgba(239, 241, 246, .38); }
  :root.in-app.r6.r6-co #view .r6-acc-add .r6-acc-w { color: var(--co-hi); }

  /* ---------- Calendar: today's tag and ring, the days with something, the tightest day, what can be spent until the end ---------- */
  :root.in-app.r6.r6-co #view .r6cal-tag.now { background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co #view .r6cal-c > i.on { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6cal-c.today { box-shadow: inset 0 0 0 1.5px var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6cal-flag { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6cal-free:not(.neg) { background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .75); }
  :root.in-app.r6.r6-co #view .r6cal-free:not(.neg) :is(svg, b) { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view :is(.r6cal-exact .cll-go, .r6cal-checks .cal-check-go, .r6cal-more, .r6cal-pill b) { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6cal-mark:not(.neg) .r6cal-pin { background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co #view .r6cal-mark:not(.neg) .r6cal-pill { background: rgba(239, 241, 246, .08); color: rgba(239, 241, 246, .75); }

  /* ---------- Categories: what has one in its white; no rules, their note quiet ---------- */
  :root.in-app.r6.r6-co #view .r6-cat-line > i.ok { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-cat-co { margin: 30px 2px 0; color: rgba(239, 241, 246, .55); font-size: 13.5px; line-height: 1.45; }

  /* ---------- Reports: the month shown in its white; how it was paid, its way named in white; what we noticed ---------- */
  :root.in-app.r6.r6-co #view :is(.r6-top, .bq-hero) .rq-col.on i { background: var(--co-hi); box-shadow: 0 0 14px rgba(239, 241, 246, .3); }
  :root.in-app.r6.r6-co #view :is(.r6-top, .bq-hero) .rq-col.zero i { background: none; box-shadow: inset 0 0 0 1.5px rgba(239, 241, 246, .55); }
  :root.in-app.r6.r6-co #view :is(.r6-top, .bq-hero) .rq-col.on small { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-sc-h small.k { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-obs p > span:first-child { background: rgba(239, 241, 246, .1); color: #EFF1F6; }

  /* ---------- Imports: how to get the statement, a link in its white; the review's buttons (the app's primary, look-land.css: --lk-pop) and the end ---------- */
  :root.in-app.r6.r6-co #view .ipl6 .ipl-how { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view { --lk-pop: var(--co-hi); --lk-pop-hi: var(--co-hi); --lk-pop-ink: var(--co-on); --primary: var(--co-hi); --primary-ink: var(--co-on); --cta: var(--co-hi); --cta-ink: var(--co-on); }
  :root.in-app.r6.r6-co #view .ip-dec button[aria-pressed="true"][data-op="accept"] { background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co #view .r6ip-n { background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co #view .r6ip-ls > i b.l { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6ip-f.go .r6ip-fi { background: rgba(var(--co-rgb), .1); color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6ip-f.go > b { color: var(--co-hi); }

  /* ---------- Debts (v477, the household's v6 Debts on the company's book, features/phone/r6-debts.js): the month out, the chosen debt's ring,
     each one's way out and its month, what is paid off, in its white (the household's lime there is its accent, not money in) ---------- */
  :root.in-app.r6.r6-co #view .r6-debt-out.pos b { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-debt-oi { background: rgba(var(--co-rgb), .1); color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-dr:focus-visible { outline-color: var(--co-hi); }
  :root.in-app.r6.r6-co #view :is(.r6-dr.paid .r6-dr-v, .r6-dr-b small) { color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-dr.paid .r6-dr-tr i { background: rgba(var(--co-rgb), .45); }
  :root.in-app.r6.r6-co #view .r6-dr-tr em.end { background: var(--co-hi); }

  /* ---------- the company's own form, "Your company" (features/phone/r6-co.js: r6CoForm), on the household's v6 forms (look-r6-add.css) ---------- */
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-cf { background: rgba(var(--co-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--co-rgb), .2); color: var(--co-hi); }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-kinds .tfl-row { justify-content: space-between; min-height: 52px; }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-kinds .tfl-l { flex: 1 1 auto; width: auto; max-width: none; color: #EFF1F6; font-size: 15px; }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-ok { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-ok svg { width: 16px; height: 16px; stroke-width: 2.6; }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-off { align-items: center; gap: 12px; min-height: 64px; text-align: left; }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-off .tfl-l { flex: 1 1 auto; width: auto; max-width: none; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-off .tfl-l b { color: #EFF1F6; font-size: 15px; font-weight: 500; }
  :root.in-app.r6.r6-co #overlay .r6co-form .r6co-off .tfl-l small { color: rgba(239, 241, 246, .55); font-size: 13px; line-height: 1.4; white-space: normal; }

  /* ---------- the panels the household's v6 still opens in the look before (a chart, a subcategory's name, a fixed cost being changed, where
     the calendar's figure comes from): their main button and their accent the company's (look-land-panels.css draws them with these) ---------- */
  :root.in-app.r6.r6-co #overlay { --lk-pop: var(--co-hi); --lk-pop-hi: var(--co-hi); --lk-pop-ink: var(--co-on); --bq-accent: var(--co-hi); --bq-mint: rgba(var(--co-rgb), .1); }
  /* v524: a company's account opened on the household's side (features/phone/r6-acct.js: r6CoaOn): the company's white on its panel alone, the
     household's page beside it as it is (the rules: look-r6-co-overlay.css, .drawer.r6-coa) */
  :root.in-app.r6 #overlay > .drawer.r6-coa { --co-hi: #EFF1F6; --co-on: #101212; --co-rgb: 239, 241, 246; --lk-pop: var(--co-hi); --lk-pop-hi: var(--co-hi); --lk-pop-ink: var(--co-on); --bq-accent: var(--co-hi); --bq-mint: rgba(var(--co-rgb), .1); }

  /* ---------- how a figure of the summary is counted (features/dashboard/kpi-explain.js, the app's own panel): as the household's v6 sheets
     (look-r6-misc.css: .r6-sheet): from the foot, square at the top, no grab bar, the name and × in glass, its main button the company's ---------- */
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) { border: 0; border-radius: 0; background: #121414; box-shadow: 0 -1px 0 rgba(239, 241, 246, .12), 0 -30px 60px -10px rgba(0, 0, 0, .7); color: #EFF1F6; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > .grab { display: none; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > header { padding-top: 16px; border: 0; background: none; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > header h2 { color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > header [data-a="close"] { border: 0; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > header [data-a="close"]:focus-visible { outline: 2px solid var(--co-hi); outline-offset: 3px; }
  :root.in-app.r6.r6-co #overlay .body.kx { background: none; color: #EFF1F6; }
  :root.in-app.r6.r6-co #overlay .body.kx .kx-big { color: #EFF1F6; font-size: 34px; font-weight: 400; letter-spacing: -.02em; }
  :root.in-app.r6.r6-co #overlay .body.kx :is(.kx-say, .kx-note) { color: rgba(239, 241, 246, .62); }
  :root.in-app.r6.r6-co #overlay .body.kx .kx-sec h3 { color: rgba(239, 241, 246, .55); }
  :root.in-app.r6.r6-co #overlay .body.kx .kx-track { background: rgba(239, 241, 246, .08); }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > footer { border: 0; background: none; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > footer .btn.primary { min-height: 54px; border: 0; border-radius: 999px; background: var(--co-hi); box-shadow: none; color: var(--co-on); font-weight: 500; }
  :root.in-app.r6.r6-co #overlay .drawer.pop:has(> .body.kx) > footer .btn.ghost { color: rgba(239, 241, 246, .7); }
}
@media (max-width: 920px) {
  /* v481: Imports' how-to on the company's side, the household's v6 page (features/phone/r6-tours.js): its button the company's */
  :root.in-app.r6.r6-co .r6tv-go { background: var(--co-hi); color: var(--co-on); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
  :root.in-app.r6.r6-co .r6tv :is(button, a, input):focus-visible { outline-color: var(--co-hi); }
}
@media (max-width: 920px) {
  /* v524: Imports after the file, the household's v6 steps (features/imports/imports.v6.js): Import chosen, the focus and what is done in the
     company's white (money that came in stays lime) */
  :root.in-app.r6.r6-co #view .seg.i6-dec button[aria-pressed="true"][data-op="accept"] { background: var(--co-hi); color: var(--co-on); }
  :root.in-app.r6.r6-co #view :is(.i6-q, .seg.i6-dec button):focus-visible, :root.in-app.r6.r6-co #view :is(button.i6-row:focus-visible, .i6-sel:focus-within, .i6-cat:focus-within) { outline-color: var(--co-hi); }
  :root.in-app.r6.r6-co #view .i6-ok svg { color: var(--co-hi); }
}