/* Dorax Finance — Categories & rules on a phone, v327 (features/phone/categories-land.js): under the menu, on the page, what has no category as one
   line; the categories as rows with no box, each with its drawing on its colour; the rules as one quiet row. A category on its own screen: what
   went out in it, its limits, its subcategories, its rules, its latest transactions; a name in a short sheet. The page's own colours (--bq-*). */
@media (max-width: 920px) {
  :root.land .catl { display: flex; flex-direction: column; gap: 30px; padding: 22px 0 24px; }
  :root.land .catl-sort { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--lk-lime) 16%, transparent); color: var(--bq-accent); font-size: 14px; font-weight: 600; transition: transform 120ms ease-out; }
  :root.land .catl-sort svg { width: 16px; height: 16px; }
  :root.land .catl-sort:active { transform: scale(.97); }
  :root.land .catl-sort:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land :is(.catl, #overlay .catv, #overlay .catn) .catl-sec, :root.land #overlay .catv-sec { display: flex; flex-direction: column; }
  :root.land :is(.catl, #overlay) .catl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  :root.land :is(.catl, #overlay) .catl-h h2 { margin: 0; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land :is(.catl, #overlay) .catl-h > span { color: var(--bq-ink-3); font-size: 13px; }
  :root.land :is(.catl, #overlay) .catl-rows { display: flex; flex-direction: column; }
  :root.land :is(.catl, #overlay) .catl-row { all: unset; position: relative; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 10px 0; }
  :root.land :is(.catl, #overlay) .catl-row + .catl-row::before, :root.land :is(.catl, #overlay) .catl-rule + .catl-rule::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: 1px; background: var(--bq-line); }
  :root.land :is(.catl, #overlay) .catl-row:active { opacity: .7; }
  :root.land :is(.catl, #overlay) .catl-row:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 14px; }
  :root.land :is(.catl, #overlay) .catl-row .cg.lg { width: 40px; height: 40px; }
  :root.land :is(.catl, #overlay) .catl-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  :root.land :is(.catl, #overlay) .catl-t b { overflow: hidden; color: var(--bq-ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  :root.land :is(.catl, #overlay) .catl-t b.mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; white-space: normal; }
  :root.land :is(.catl, #overlay) .catl-t small { color: var(--bq-ink-2); font-size: 12.5px; line-height: 1.4; }
  :root.land :is(.catl, #overlay) .catl-go { flex: none; display: grid; color: var(--bq-ink-3); }
  :root.land :is(.catl, #overlay) .catl-go svg { width: 18px; height: 18px; }
  :root.land :is(.catl, #overlay) .catl-am { flex: none; color: var(--bq-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
  :root.land :is(.catl, #overlay) .catl-am.none { color: var(--bq-ink-3); }
  :root.land :is(.catl, #overlay) .catl-am.in { color: var(--bq-in); }
  :root.land :is(.catl, #overlay) .catl-rule { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; }
  :root.land :is(.catl, #overlay) .catl-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }
  :root.land :is(.catl, #overlay) .catl-ic svg { width: 18px; height: 18px; }
  :root.land :is(.catl, #overlay) .catl-note { margin: 4px 0 0; color: var(--bq-ink-3); font-size: 13px; line-height: 1.5; }

  /* ---------- a category on its own screen ---------- */
  :root.land #overlay .catv { display: flex; flex-direction: column; gap: 34px; padding: 4px 16px 28px; }
  :root.land #overlay .catv-top { display: flex; align-items: center; gap: 16px; }
  :root.land #overlay .catv-ic { all: unset; flex: none; display: grid; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .catv-ic:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land #overlay .cg.xl { width: 60px; height: 60px; }
  :root.land #overlay .cg.xl svg { width: 28px; height: 28px; }
  :root.land #overlay .catv-what { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  :root.land #overlay .catv-what small { color: var(--bq-ink-2); font-size: 14px; }
  :root.land #overlay .catv-what b { color: var(--bq-ink); font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; }
  :root.land #overlay .catv-what b .cents { color: var(--bq-ink-3); font-size: 18px; letter-spacing: 0; }
  :root.land #overlay .catv-top + .catv-sub { margin: -24px 0 0; color: var(--bq-ink-2); font-size: 13.5px; line-height: 1.45; }
  :root.land #overlay .catv-lim { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; gap: 10px; margin-top: -14px; }
  :root.land #overlay .catv-lim:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 4px; border-radius: 12px; }
  :root.land #overlay .catv-bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--bq-bar-track); }
  :root.land #overlay .catv-bar.sm { width: 96px; height: 4px; }
  :root.land #overlay .catv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lk-lime); transform-origin: left; animation: catv-grow 640ms var(--ease) 120ms both; }
  :root.land #overlay .catv-bar.warn i { background: var(--bq-warn); }
  :root.land #overlay .catv-bar.crit i { background: var(--bq-crit); }
  @keyframes catv-grow { from { transform: scaleX(0); } to { transform: none; } }
  :root.land #overlay .catv-lim-t { display: flex; justify-content: space-between; gap: 12px; color: var(--bq-ink-2); font-size: 13.5px; }
  :root.land #overlay .catv-lim-t b { color: var(--bq-accent); font-weight: 600; }
  :root.land #overlay .catv-sl { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
  :root.land #overlay .catv-sl small { font-size: 12px; white-space: nowrap; }
  :root.land #overlay .catv-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-left: 54px; }
  :root.land #overlay .catv-more small { color: var(--bq-ink-3); font-size: 12.5px; }
  :root.land #overlay .catv-link { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--bq-accent); font-size: 14px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  :root.land #overlay .catv-link svg { width: 15px; height: 15px; }
  :root.land #overlay .catv-link:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 10px; }
  :root.land #overlay .catv-dd { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land #overlay .catv-dd b { color: var(--bq-ink); font-size: 14px; font-weight: 700; line-height: 1; }
  :root.land #overlay .catv-dd small { color: var(--bq-ink-3); font-size: 10px; font-weight: 600; text-transform: uppercase; }
  :root.land #overlay .catv-foot { display: flex; gap: 8px; }
  :root.land #overlay .catv-foot .btn { min-height: 52px; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; }
  :root.land #overlay .catv-foot .btn.primary { flex: 1.3 1 0; }
  :root.land #overlay .catv-foot .btn:not(.primary) { flex: 1 1 0; }
  :root.land #overlay .catv-foot .btn svg { width: 17px; height: 17px; }
  :root.land #overlay .drawer:has(.catv) .cvl-more { background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); }
  :root.land #overlay .drawer:has(.catv) .cvl-menu .umenu-item.danger, :root.land #overlay .drawer:has(.catv) .cvl-menu .umenu-item.danger svg { color: var(--bq-crit); }

  /* ---------- a name ---------- */
  :root.land #overlay .catn { display: flex; flex-direction: column; gap: 22px; padding: 4px 16px 20px; }
  :root.land #overlay .catn-more { display: flex; flex-direction: column; gap: 10px; }
  :root.land #overlay .catn-del { align-self: flex-start; min-height: 44px; gap: 8px; color: var(--bq-crit); }
  :root.land #overlay .catn-del svg { width: 16px; height: 16px; }

  @media (prefers-reduced-motion: reduce) { :root.land .catl-sort, :root.land #overlay .catv-bar i { transition: none; animation: none; } }
}