/* Dorax Finance — Accounts on a phone in the summary's look (v321; the markup: features/phone/accounts-land.js). On the forest what the side has,
   its cents small, and what it is made of as one bar (day to day lime, the savings sage) with its legend, what is owed on the cards in red; on the
   page the accounts as rows with no box, a hairline between them, each group's name and total over its rows; how long the savings last as one
   soft row at the end. The page's grey and its colours: look-land.css (--bq-*). */
@media (max-width: 920px) {
  /* ---------- on the page, under the menu (v332: the forest only in the menu, as every tab of the top row) ---------- */
  :root.land-page #view .acl { display: flex; flex-direction: column; gap: 34px; padding: 30px 0 24px; }
  :root.land-page #view .acl-top { display: flex; flex-direction: column; gap: 18px; }
  :root.land-page #view .acl-sum { display: flex; flex-direction: column; gap: 6px; }
  :root.land-page #view .acl-sum small { color: var(--bq-ink-2); font-size: 14px; }
  :root.land-page #view .acl-sum b { color: var(--bq-ink); font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
  :root.land-page #view .acl-sum b .cents { color: var(--bq-ink-3); font-size: 18px; font-weight: 600; letter-spacing: 0; }
  :root.land-page #view .acl-made { display: flex; flex-direction: column; gap: 12px; margin: 0; }
  :root.land-page #view .acl-bar { display: flex; gap: 3px; height: 10px; }
  :root.land-page #view .acl-bar i { display: block; min-width: 6px; border-radius: 3px; transform-origin: left; animation: catv-grow 640ms var(--ease) both; }
  :root.land-page #view .acl-bar i:first-child { border-radius: 999px 3px 3px 999px; }
  :root.land-page #view .acl-bar i:last-child { border-radius: 3px 999px 999px 3px; }
  :root.land-page #view .acl-bar i:only-child { border-radius: 999px; }
  :root.land-page #view .acl-bar i.day, :root.land-page #view .acl-key.day i { background: var(--lk-lime); }
  :root.land-page #view .acl-bar i.sv, :root.land-page #view .acl-key.sv i { background: var(--lk-soft-2); }
  :root.land-page #view .acl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--bq-ink-2); font-size: 13px; }
  :root.land-page #view .acl-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  :root.land-page #view .acl-key i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
  :root.land-page #view .acl-key.cc i { box-shadow: inset 0 0 0 1.5px var(--bq-crit); }      /* owed: a ring, not a part of the bar */
  :root.land-page #view .acl-key b { color: var(--bq-ink); font-weight: 600; }
  :root.land-page #view .acl-key.cc b { color: var(--bq-crit); }
  @media (prefers-reduced-motion: reduce) { :root.land-page #view .acl-bar i { animation: none; } }

  /* ---------- the accounts, by what they are for ---------- */
  :root.land-page #view .acl-page { display: flex; flex-direction: column; gap: 30px; }
  :root.land-page #view .acl-sec { display: flex; flex-direction: column; }
  :root.land-page #view .acl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  :root.land-page #view .acl-h h2 { margin: 0; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land-page #view .acl-h > span { color: var(--bq-ink-2); font-size: 15px; font-weight: 600; text-align: right; }
  :root.land-page #view .acl-h .owe, :root.land-page #view .acl-am.owe { color: var(--bq-crit); }
  :root.land-page #view .acl-rows { display: flex; flex-direction: column; }
  :root.land-page #view .acl-row { all: unset; position: relative; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 0; }
  :root.land-page #view .acl-row + .acl-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--bq-line); }
  :root.land-page #view :is(.acl-row, .acl-free):active { opacity: .7; }
  :root.land-page #view :is(.acl-row, .acl-free):focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 14px; }
  :root.land-page #view .acl-lg { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
  :root.land-page #view .acl-lg .inst { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; font-family: var(--mono); font-size: 12px; font-weight: 600; }      /* a bank's letters in the middle */
  :root.land-page #view .acl-lg .inst img { display: block; width: 40px; height: 40px; border-radius: 50%; }
  :root.land-page #view .acl-lg > .inst:not(.pic):not(.bank), :root.land-page #view .acl-plus, :root.land-page #view .acl-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }      /* no bank: a wallet on its circle */
  :root.land-page #view :is(.acl-lg, .acl-ic) svg { width: 18px; height: 18px; }
  :root.land-page #view .acl-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  :root.land-page #view .acl-t b { overflow: hidden; color: var(--bq-ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  :root.land-page #view .acl-t small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--bq-ink-2); font-size: 12.5px; line-height: 1.35; }
  :root.land-page #view .acl-am { flex: none; color: var(--bq-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }

  /* ---------- how long the savings last: one soft row ---------- */
  :root.land-page #view .acl-free { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land-page #view .acl-free .acl-t b { white-space: normal; line-height: 1.3; }
  :root.land-page #view .acl-go { flex: none; display: grid; color: var(--bq-ink-3); }
  :root.land-page #view .acl-go svg { width: 18px; height: 18px; }
}