/* Dorax Finance — the summary's look on a computer (v199, owner, 2026-10-12: "push updates a la versión de ordenador", then "Todo, como el teléfono"
   and the side bar "Verde bosque"). The parts are the phone's (look-land*.css and features/phone/bosque*.js); here, the computer's frame and layout:
     - the side bar in the forest, the screen in use a lime pill; the top bar the same forest, one row as before (the screen's name, the month, the bell,
       the screen's main button lime);
     - under it the grey page rises over the forest with rounded corners, as the phone's sheet: right under the top bar, or under the screen's own top
       on the forest (the summary's balance and "You can spend", Transactions' figure and chart, the top of Reports);
     - the summary in two columns (features/phone/bosque-desk.js); Transactions' list in a column of its own width; the panels at the right as before,
       in the phone's colours (forest at the top, the grey sheet under it).
   The page's side margins follow the top bar's: 32 px, more on a screen wider than the page (--bq-gut). The company's side and the previous look keep
   theirs. Colours: deep green #112622, lime #B6DD62 (#C4E57A lighter), the page's grey and white cards as on the phone (look-land.css). */
@media (min-width: 921px) {
  :root.land .app { background: var(--bq-page); }
  :root.land .content { --bq-gut: max(32px, calc((100% - var(--page-w)) / 2 + 32px)); max-width: none; padding: 0 0 56px; background: var(--bq-page); }
  :root.land #view > * { margin-inline: var(--bq-gut); }
  :root.land .work { background: var(--bq-page); }
  /* the page's language, on every screen of it (the phone's sheet, look-land-pages.css): white cards with a hairline and 24 px corners, pills */
  :root.land #view {
    --brand: var(--bq-accent); --brand-deep: var(--bq-accent); --link: var(--bq-accent); --focus: var(--bq-accent); --select: var(--bq-mint); --select-ink: var(--bq-accent); --switch-on: var(--bq-accent);
    --line: var(--bq-line); --line-strong: var(--bq-line-2); --surface: var(--bq-card); --surface-2: var(--bq-card-2); --surface-3: var(--bq-card-3); --well: var(--bq-card); --badge: var(--bq-card-3);
    --primary: var(--lk-pop); --primary-ink: var(--lk-pop-ink); --cta: var(--lk-pop); --cta-ink: var(--lk-pop-ink); --bg: var(--bq-page);
  }
  :root.land #view .card { border: 0; border-radius: 24px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land #view .card-h h2, :root.land #view h2.sec { color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land #view .btn { border-radius: 999px; }
  :root.land #view .btn.primary { border-color: var(--lk-pop); background: var(--lk-pop); color: var(--lk-pop-ink); font-weight: 600; }
  @media (hover: hover) and (pointer: fine) { :root.land #view .btn.primary:hover { border-color: var(--lk-pop-hi); background: var(--lk-pop-hi); } }

  /* ---------- the side bar, in the forest ---------- */
  :root.land .rail {
    --bg: var(--lk-deep); --ink-strong: #FFFFFF; --ink: var(--lk-on); --ink-2: var(--lk-soft); --ink-3: var(--lk-soft-2); --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .2); --hover-line: rgba(255, 255, 255, .4);
    --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .08); --surface-3: rgba(255, 255, 255, .08); --select: rgba(255, 255, 255, .08); --badge: rgba(var(--lk-lime-rgb), .18); --btn: rgba(255, 255, 255, .08);
    --brand: var(--lk-lime); --brand-deep: var(--lk-lime); --focus: var(--lk-lime); --warn: var(--lk-lime); --field: rgba(255, 255, 255, .16);
    border-right: 0; background: var(--lk-deep); color: var(--lk-on);
  }
  /* v272 (owner, 2026-10-25: "el sidebar cambia el color del background a #0a1a17"): the side bar a shade deeper than the top bar */
  :root.land .rail { --bg: #0A1A17; background: #0A1A17; }
  :root.land .rail .brand :is(.logo, .logo-mark) { color: #E2F6D5; }      /* logo v2 (2026-10-17): mint letters on forest */
  :root.land .rail .nav a { min-height: 40px; border-radius: 999px; color: var(--lk-soft); font-weight: 500; }
  :root.land .rail .nav a svg { color: var(--lk-soft); }
  :root.land .rail .nav a:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
  :root.land .rail .nav a:hover svg { color: #FFFFFF; }
  :root.land .rail .nav a[aria-current="page"], :root.land .rail .nav a[aria-current="page"]:hover { background: var(--lk-lime); color: var(--lk-deep); font-weight: 600; }      /* the screen in use: a lime pill, as the switches' choice on the forest */
  :root.land .rail .nav a[aria-current="page"] svg { color: var(--lk-deep); }
  :root.land .rail .nav .count { background: rgba(var(--lk-lime-rgb), .2); color: var(--lk-lime); font-weight: 600; }
  :root.land .rail .nav a[aria-current="page"] .count { background: var(--lk-deep); color: var(--lk-lime); }
  :root.land .rail .nav a:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }
  :root.land .rail .nav-rule { background: var(--line); }      /* the side bar's own hairline colour, as before: on the forest */
  :root.land .rail .findbtn { border-color: rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--lk-soft); }
  :root.land .rail .findbtn:hover { border-color: rgba(255, 255, 255, .3); color: #FFFFFF; }
  :root.land .rail .findbtn kbd { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: var(--lk-soft); }
  :root.land .rail-foot { border: 0; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  :root.land .rail .who:hover, :root.land .rail .who[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
  :root.land .rail .who-t small { color: var(--lk-soft-2); }
  /* the menu beside the name stays a light card, in the page's colours */
  :root.land .rail .umenu {
    --bg: var(--bq-card); --lift: var(--bq-card); --ink-strong: var(--bq-ink); --ink: var(--bq-ink); --ink-2: var(--bq-ink-2); --ink-3: var(--bq-ink-3); --line: var(--bq-line); --line-strong: var(--bq-line-2);
    --surface: var(--bq-card); --surface-2: var(--bq-card-2); --surface-3: var(--bq-card-3); --select: var(--bq-circle); --brand: var(--bq-accent); --focus: var(--bq-accent); --btn: var(--bq-card-2); --field: var(--bq-line-2);
    border-color: var(--bq-line); border-radius: 22px; background: var(--bq-card); color: var(--bq-ink);
  }
  :root.land .rail .umenu .seg button[aria-pressed="true"] { background: var(--bq-pick-bg); color: var(--bq-pick-ink); }
  :root.land .rail-toggle { border-color: rgba(255, 255, 255, .2); background: var(--lk-deep); color: var(--lk-soft); }
  :root.land .rail-toggle:hover { border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
  :root.land .rail-toggle:focus-visible { outline-color: var(--lk-lime); }

  /* ---------- the top bar: one forest row, the page's grey rising under it ---------- */
  :root.land .topbar {
    --bg: var(--lk-deep); --glass: var(--lk-deep); --surface: rgba(255, 255, 255, .08); --surface-2: rgba(255, 255, 255, .12); --surface-3: rgba(255, 255, 255, .08); --btn: rgba(255, 255, 255, .08);
    --ink-strong: #FFFFFF; --ink: var(--lk-on); --ink-2: var(--lk-soft); --ink-3: var(--lk-soft-2); --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .24); --hover-line: rgba(255, 255, 255, .4);
    --brand: var(--lk-lime); --brand-deep: var(--lk-lime); --focus: var(--lk-lime); --badge: rgba(255, 255, 255, .1); --select: rgba(var(--lk-lime-rgb), .16);
    margin-bottom: 0; padding-bottom: 42px; border-bottom: 0; background: var(--lk-deep); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: #FFFFFF;
  }
  :root.land .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; border-radius: 0; background: var(--bq-page); pointer-events: none; }      /* square since v272 (owner, 2026-10-25: "quita ese borde redondeado… no me gusta"); rounded 30 px from v199 */
  :root.land .topbar h1 { color: #FFFFFF; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }      /* 20 px, as the bar's title has been since 2026-10-05 */
  :root.land .topbar .month { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); }
  :root.land .topbar .month button { color: var(--lk-soft); } :root.land .topbar .month button:disabled { color: rgba(255, 255, 255, .3); }
  :root.land .topbar .month span { color: #FFFFFF; font-weight: 600; }
  :root.land .topbar .jr-btn { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: #FFFFFF; font-weight: 600; }
  :root.land .topbar .jr-btn svg { color: var(--lk-lime); } :root.land .topbar .jr-btn b { background: rgba(var(--lk-lime-rgb), .2); color: var(--lk-lime); }
  :root.land .topbar .bell { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: #FFFFFF; }
  :root.land .topbar .bell .count { background: var(--lk-lime); color: var(--lk-deep); box-shadow: 0 0 0 2px var(--lk-deep); }
  :root.land .topbar .btn.primary { border-color: var(--lk-lime); background: var(--lk-lime); color: var(--lk-deep); font-weight: 600; }
  :root.land .topbar .btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: #FFFFFF; }
  @media (hover: hover) and (pointer: fine) {
    :root.land .topbar .btn.primary:hover { border-color: var(--lk-lime-hi); background: var(--lk-lime-hi); }
    :root.land .topbar .month button:hover:not(:disabled), :root.land .topbar .jr-btn:hover, :root.land .topbar .bell:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
  }
  :root.land .topbar :focus-visible { outline-color: var(--lk-lime); }
  /* a screen with its own top on the forest: the top bar goes straight on into it, and that top carries the rounded edge */
  :root.land:is(.pm-view-hero, #pm-0) .topbar { padding-bottom: 14px; }
  :root.land:is(.pm-view-hero, #pm-0) .topbar::after { display: none; }
  :root.land #view > :first-child:not(.bq-dhero):not(.bq-hero):not(.bq-tx):not(.dk-hero) { margin-top: 2px; }

  /* ---------- the forest top of a screen: the whole width under the top bar, its content on the page's column ---------- */
  :root.land #view > :is(.bq-dhero, .bq-hero) { position: relative; margin-inline: 0; padding: 8px var(--bq-gut) 62px; background: var(--lk-deep); color: #FFFFFF; }
  :root.land #view > :is(.bq-dhero, .bq-hero)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; border-radius: 0; background: var(--bq-page); }      /* square since v272, as the top bar's */

  /* ---------- the summary: a dashboard's header on the forest (v201: "una versión web", not the phone's parts enlarged) ---------- */
  :root.land #view > .bq-dhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "bal free" "figs free" "acts acts"; align-items: start; gap: 22px 48px; }
  :root.land .bq-dh-l { grid-area: bal; min-width: 0; }
  :root.land .bq-dh-r { grid-area: free; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
  :root.land .bq-dhero .hello { margin: 0 0 14px; }
  :root.land .bq-dhero .hello h2 { margin: 0; color: var(--lk-soft); font-size: 16px; font-weight: 500; letter-spacing: 0; }
  :root.land .bq-dbal { display: flex; align-items: flex-end; gap: 6px; }
  :root.land .bq-dbal .bb-link { display: flex; flex-direction: column; gap: 6px; color: #FFFFFF; text-decoration: none; }
  :root.land .bq-dbal .bb-link small { color: var(--lk-soft); font-size: 14px; font-weight: 500; }
  :root.land .bq-dbal .bb-link b { white-space: nowrap; color: #FFFFFF; font-family: var(--fig); font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
  :root.land .bq-dbal .bb-link b .cents { color: var(--lk-soft); opacity: 1; font-size: .5em; letter-spacing: 0; }
  :root.land .bq-dbal .bb-link b.neg { color: #FF8A80; }
  :root.land .bq-dbal .bb-link:focus-visible, :root.land .bq-dbal .bb-eye:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 3px; border-radius: 12px; }
  :root.land .bq-dbal .bb-eye { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--lk-soft); cursor: pointer; }
  :root.land .bq-dbal .bb-eye:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
  :root.land .bq-dbal .bb-eye svg { width: 20px; height: 20px; }
  /* the month's four figures side by side, a hairline between them; each opens how it is worked out */
  :root.land .bq-dkpis { grid-area: figs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
  :root.land .bq-dk { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 16px 4px 0; border-radius: 12px; }
  :root.land .bq-dk + .bq-dk { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .12); border-radius: 0; }
  :root.land .bq-dk-k { color: var(--lk-soft); font-size: 13px; font-weight: 500; }
  :root.land .bq-dk b { color: #FFFFFF; font-size: 22px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
  :root.land .bq-dk b .cents { color: var(--lk-soft); font-size: .62em; }
  :root.land .bq-dk.neg b { color: #FF8A80; }
  :root.land .bq-dk small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--lk-soft-2); font-size: 12px; line-height: 1.4; }
  :root.land .bq-dk small .pill { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #FFFFFF; font-size: 11.5px; }
  :root.land .bq-dk small .pill.down { background: rgba(var(--lk-lime-rgb), .16); color: var(--lk-lime); } :root.land .bq-dk small .pill.up { background: rgba(255, 138, 128, .16); color: #FF8A80; }
  :root.land .bq-dk:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 4px; }
  @media (hover: hover) and (pointer: fine) { :root.land .bq-dk:hover .bq-dk-k { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; } }
  /* a narrower window: the four figures under the balance and "You can spend", the whole width; narrower still, two by two */
  @media (max-width: 1240px) { :root.land #view > .bq-dhero:not(.bq-dtx) { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); grid-template-areas: "bal free" "figs figs" "acts acts"; gap: 22px 32px; } }
  @media (max-width: 1100px) {
    :root.land .bq-dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    :root.land .bq-dk:nth-child(odd) { padding-left: 0; border-left: 0; }
  }
  /* "You can spend" at the right: the figure on the forest, the lime strip under it as a card */
  :root.land .bq-dh-r .bq-free { margin: 0; }
  :root.land .bq-dh-r .bq-free-top { padding: 0 0 14px; background: none; }
  :root.land .bq-dh-r .bq-free-foot { margin: 0; border-radius: 22px; }
  @media (hover: hover) and (pointer: fine) { :root.land .bq-free-foot:hover { background: var(--lk-lime-hi); } }
  /* the row of buttons: pills, the expense lime, the order of the parts at the right end */
  :root.land .bq-dacts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  :root.land .bq-dact { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 14px; font-weight: 600; transition: background-color 120ms ease-out; }
  :root.land .bq-dact svg { width: 18px; height: 18px; color: var(--lk-lime); }
  :root.land .bq-dact.main { background: var(--lk-lime); box-shadow: none; color: var(--lk-deep); }
  :root.land .bq-dact.main svg { color: var(--lk-deep); }
  :root.land .bq-dact:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { :root.land .bq-dact:hover { background: rgba(255, 255, 255, .14); } :root.land .bq-dact.main:hover { background: var(--lk-lime-hi); } }
  :root.land #view .bq-dacts .btn.d-order-btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { margin-left: auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--lk-soft); font-weight: 500; }
  :root.land #view .bq-dacts .btn.d-order-btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn):hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
  :root.land .bq-dacts .d-order-btn svg { color: var(--lk-soft); }
  /* v202: the accounts' round logos at the right of the row, beside "Reorder" (each opens its panel; its name under the pointer) */
  :root.land .bq-daccs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 0; }
  :root.land #view .bq-dacts .bq-daccs + .btn.d-order-btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { margin-left: 6px; }
  :root.land .bq-daccs .bq-acc { width: auto; gap: 0; border-radius: 50%; }
  :root.land .bq-daccs .bq-mark { width: 44px; height: 44px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: box-shadow 160ms ease-out, transform 120ms ease-out; }
  :root.land .bq-daccs .bq-mark .inst, :root.land .bq-daccs .bq-mark .inst img { width: 32px; height: 32px; min-width: 32px; }
  :root.land .bq-daccs .bq-mark .inst svg { width: 18px; height: 18px; }
  :root.land .bq-daccs .bq-acc-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root.land .bq-daccs .bq-acc:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) { :root.land .bq-daccs .bq-acc:hover .bq-mark { box-shadow: inset 0 0 0 2px var(--lk-lime); } }
  /* what there is to pay (the phone's cards) and the goals (one card each): rows of cards across the page */
  :root.land #view .bq-sec { gap: 10px; }
  :root.land #view :is(.bq-bills, .bq-dgoals) { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-items: stretch; gap: 14px; margin: 2px 0 0; padding: 0; overflow: visible; }      /* as many to a row as fit, the rows even (bosque-desk.js: bqCols) */
  :root.land #view :is(.bq-bills, .bq-dgoals) > li { display: flex; min-width: 0; }
  :root.land #view .bq-bill { width: 100%; height: auto; }
  :root.land .bq-dgoal { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 24px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); }
  :root.land .bq-dgoal .bq-ico { width: 40px; height: 40px; }
  :root.land .bq-dgoal .bq-ico svg { width: 19px; height: 19px; }
  :root.land .bq-dgoal.done .bq-ico { background: var(--lk-pop); color: var(--lk-pop-ink); }
  :root.land .bq-dgoal-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.25; }
  :root.land .bq-dgoal-v { color: var(--bq-ink-2); font-size: 13px; }
  :root.land .bq-dgoal-v b { color: var(--bq-ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
  :root.land .bq-dgoal-s { margin-top: auto; color: var(--bq-ink-2); font-size: 13px; line-height: 1.35; }
  :root.land .bq-dgoal:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land #view :is(.bq-bill, .bq-dgoal) { transition: box-shadow 160ms ease-out, transform 120ms ease-out; }
  :root.land #view :is(.bq-bill, .bq-dgoal):active { transform: scale(.98); }
  @media (hover: hover) and (pointer: fine) { :root.land #view :is(.bq-bill, .bq-dgoal):hover { box-shadow: inset 0 0 0 1px var(--bq-line-2), 0 10px 24px -16px rgba(14, 15, 12, .35); } }
  /* the parts under it: the computer's own, in the page's language (cards white with a hairline, 24 px corners, pills) */
  :root.land #view > .dash-more { width: auto; }      /* "Also for the summary" on the page's column, not over its right margin */
  @media (min-width: 1241px) {      /* three to a row; a last row of two shares the width, a last one alone with the one before it (2 + 2) */
    :root.land #view .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    :root.land #view .dash-grid > * { grid-column: span 2; }
    :root.land #view .dash-grid > :nth-child(3n+1):nth-last-child(2), :root.land #view .dash-grid > :nth-child(3n+1):nth-last-child(2) + *,
    :root.land #view .dash-grid > :nth-child(3n+1):nth-last-child(4), :root.land #view .dash-grid > :nth-child(3n+1):nth-last-child(4) ~ *, :root.land #view .dash-grid > :only-child { grid-column: span 3; }
  }
  :root.land #view .kpi, :root.land #view .card.tile { border: 1px dashed var(--bq-line-2); border-radius: 20px; background: var(--bq-card); box-shadow: none; }      /* the tiles keep their dashed edge */
  :root.land #view .seg { border-color: var(--bq-line); border-radius: 999px; background: var(--bq-card); }
  :root.land #view .seg button { border-radius: 999px; }
  :root.land #view .seg button[aria-pressed="true"], :root.land #view .seg button[aria-pressed="true"]:hover { background: var(--bq-pick-bg); color: var(--bq-pick-ink); font-weight: 600; box-shadow: none; }
  :root.land #view .btn:not(.primary):not(.danger):not(.ghost):not(.linkbtn) { border-color: var(--bq-line); background: var(--bq-card); color: var(--bq-ink); }
  :root.land #view .banner { border: 0; border-radius: 20px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  /* the insight of the day as a computer has it, on the forest (it was the brand's dark green on the light page): the fact white, its name lime */
  :root.land #view .card.ins-pc { --ink: var(--lk-on); --ink-2: var(--lk-soft); --ink-3: var(--lk-soft-2); --line: rgba(255, 255, 255, .14); background: var(--lk-deep); box-shadow: none; color: var(--lk-on-2); }
  :root.land #view .ins-pc .card-h h2 { color: var(--lk-lime); }
  :root.land #view .ins-pc .grow b { color: #FFFFFF; }
  :root.land #view .ins-pc .grow small { color: var(--lk-soft); }
  :root.land #view .ins-pc .fl-ico { border-color: var(--lk-lime); background: var(--lk-lime); color: var(--lk-deep); }
  :root.land #view .ins-pc .ins-mark { color: var(--lk-lime); opacity: .14; }
  :root.land #view .ins-pc .btn:not(.primary) { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #FFFFFF; }
  :root.land #view .ins-pc .btn:not(.primary):hover { background: rgba(255, 255, 255, .14); }
  :root.land #view .ins-pc .ins-dots i { background: rgba(255, 255, 255, .22); } :root.land #view .ins-pc .ins-dots i.on { background: var(--lk-lime); }
  :root.land #view .ins-pc :focus-visible { outline-color: var(--lk-lime); }

  /* ---------- Transactions: a forest header (the switch, the figure, the month; the chart wide at its right), the computer's table under it ---------- */
  :root.land #view > .bq-dtx { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr); grid-template-areas: none; align-items: end; gap: 24px 40px; padding-top: 6px; }
  :root.land .bq-dtx-l { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
  :root.land .bq-dtx .bq-kind { width: 100%; max-width: 380px; }
  :root.land .bq-dtx .bq-sum-v { font-size: 44px; }
  :root.land .bq-dtx-r { min-width: 0; }
  :root.land .bq-dtx .bq-chart { margin: 0; }
  :root.land .bq-dtx .bq-chart figcaption { margin-inline: 0; }
  /* the table in its white card: a row lit under the pointer */
  :root.land #tx-card .search input { min-height: 44px; border-color: var(--bq-line); border-radius: 999px; background-color: var(--bq-card-2); }
  @media (hover: hover) and (pointer: fine) { :root.land #tx-card tbody tr:hover > td { background: var(--bq-card-2); } }

  /* ---------- the other screens: their top on the forest (Reports) or the grey right under the bar; the summary's language in the sheet ---------- */
  :root.land-page #view > .bq-hero { gap: 18px; }
  :root.land #view .card .tbl.dist th { white-space: normal; vertical-align: bottom; }      /* a table in half a page's width (Investments' income of the month): its headings on two lines rather than its last column cut off */

  /* ---------- More: a menu under its button (features/phone/bosque.js: bqMoreAt), not the phone's sheet at the foot of the screen ---------- */
  :root.land #overlay .scrim:has(+ .bq-more-sheet) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root.land #overlay .sheet.bq-more-sheet { left: var(--qm-x, calc(50% - 170px)); right: auto; top: var(--qm-y, 18vh); bottom: auto; width: 340px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 8px; border: 0; border-radius: 22px; background: var(--bq-card); box-shadow: 0 0 0 1px var(--bq-line), 0 24px 60px -18px rgba(14, 15, 12, .4); transform-origin: var(--qm-o, top center); }
  :root.land #overlay.in .sheet.bq-more-sheet { animation: modal-in 180ms var(--ease) both; animation-delay: var(--in-at, 0ms); }
  :root.land #overlay.out .sheet.bq-more-sheet { animation: modal-out 120ms var(--ease-in) both; }
  :root.land #overlay .bq-more-sheet .grab { display: none; }
  :root.land #overlay .sheet.bq-more-sheet > h2 { margin: 6px 10px 6px; color: var(--bq-ink-2); font-size: 13px; font-weight: 500; letter-spacing: 0; }
  :root.land #overlay .bq-more-sheet .g-pick-list { display: flex; flex-direction: column; gap: 0; padding: 0; }
  :root.land #overlay .bq-more-sheet .g-pick-list button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px; border-radius: 14px; color: var(--bq-ink); }
  :root.land #overlay .bq-more-sheet .g-pick-list button:hover { background: var(--bq-card-2); }
  :root.land #overlay .bq-more-sheet .g-pick-list button:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: -2px; }
  :root.land #overlay .bq-more-sheet .fl-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }
  :root.land #overlay .bq-more-sheet .fl-ico svg { width: 18px; height: 18px; color: currentColor; }
  :root.land #overlay .bq-more-sheet .grow { flex: 1 1 auto; min-width: 0; }
  :root.land #overlay .bq-more-sheet .g-pick-list b { display: block; color: var(--bq-ink); font-size: 15px; font-weight: 500; }
  :root.land #overlay .bq-more-sheet .g-pick-list button > svg { flex: none; width: 16px; height: 16px; color: var(--bq-ink-3); }

  /* ---------- the panels at the right: the grey sheet as wide as the panel (a computer's panel has 22 px at its sides) ---------- */
  :root.land #overlay .drawer { border-radius: 28px; box-shadow: 0 24px 60px -24px rgba(14, 15, 12, .45); }
  :root.land #overlay .drawer .bq-sheet { margin: 6px -22px -20px; padding: 10px 22px 24px; }
  :root.land #overlay .drawer > header { padding: 18px 22px 10px; }
  @media (hover: hover) and (pointer: fine) { :root.land #overlay .drawer > header [data-a="close"]:hover { box-shadow: inset 0 0 0 1px var(--bq-line-2); } }

  /* ---------- a contribution's success screen: its words in a column in the middle ---------- */
  :root.land #overlay .gw-win { align-items: center; }
  :root.land #overlay .gw-in, :root.land #overlay .gw-acts { width: min(420px, 100%); }
}