/* Dorax Finance — the household's summary on a phone in the light theme, "Bosque" (owner, 2026-10-11: "lleva esa a cabo en resumen, exactamente lo
   que me muestras"; the design is the second row of the canvas "Dorax móvil estilo landing"). It replaces, on that page, the landing look of v174
   ("commit el estilo landing solo en resumen para verlo live"), which kept the page's parts and only changed their colours.
   app/shell.js (applyTheme) puts .land on the page's root on a phone, in the light theme, on the household's summary; the markup of the parts is
   features/phone/bosque.js. The other pages, the dark theme, the company's side and a computer keep their look.
   Colours (owner, 2026-10-12: "usa este verde por favor", with the reference's statistics and exchange screens; measured on them; then the same
   morning the day's card was #004134 for an hour, then "el background de gastar hoy igual que el de la barra superior, que se mezclen"): the deep green
   #112622 for the block and the day's figure in it, its lime #B6DD62, a pale lime #E8F3D2 for the goals, its cool grey page #E9EDEC with white
   cards and #DDE3E1 hairlines; on the deep green the words are white, #B5C2BE when quieter. (Before, the brand's forest #163300 and lime #9FD182.)
   Only this page wears them for now. */
/* The look's colours, as words (v194, owner, 2026-10-12: "el modo oscuro me lleva al diseño viejo": the look has a dark version too). The forest
   (#112622) and the lime (#B6DD62) are the same in both; what the page is made of changes: its grey, its cards, its words and hairlines, the light
   circles, the colour of what is chosen. In the dark theme (.land-dark, app/shell.js) the page is a green so deep it reads as black, the cards a
   step lighter, the words light; what was deep green on the light page (a link, an icon, a bar) is lime, and a choice is lime with deep green words,
   as on the forest. */
/* The look's two colours and what goes with them, as words (v214): the household's forest and lime here; the company's side redefines them
   (css/look/look-land-co.css), so every part of the look wears the side it is on. */
:root {
  --lk-deep: #112622; --lk-deep-rgb: 17, 38, 34; --lk-deep-2: #1F332F;
  --lk-lime: #B6DD62; --lk-lime-rgb: 182, 221, 98; --lk-lime-hi: #C4E57A; --lk-lime-lo: #A6CE52; --lk-lime-2: #9FD182;
  --lk-soft: #B5C2BE; --lk-soft-2: #8FA19C; --lk-on: #F1F4EE; --lk-on-2: #D6DCCF; --lk-mint: #E8F3D2;
  /* the accent on a light surface (the page, a card, a panel): the household's lime with deep green words; the company's light theme has the
     forest with white words there (look-land-co.css) */
  --lk-pop: var(--lk-lime); --lk-pop-ink: var(--lk-deep); --lk-pop-hi: var(--lk-lime-hi); --lk-pop-lo: var(--lk-lime-lo);
}
:root.land {
  --bq-page: #E9EDEC; --bq-page-glass: rgba(233, 237, 236, .92); --bq-card: #FFFFFF; --bq-card-2: #F3F6F5; --bq-card-3: #E3E9E7;
  --bq-ink: #0E0F0C; --bq-ink-2: #454745; --bq-ink-3: #5F625D; --bq-line: #DDE3E1; --bq-line-2: #C9D2CF; --bq-grab: #C3C9BD; --bq-track: #E3E8DD;
  --bq-circle: #EDF1F0; --bq-circle-2: #DFE6E4; --bq-mint: #E8F3D2; --bq-mint-ink-2: #3B5534;
  --bq-accent: var(--lk-deep); --bq-pick-bg: var(--lk-deep); --bq-pick-ink: var(--lk-lime); --bq-pick-ink-2: #FFFFFF;
  --bq-in: #2F6B1C; --bq-crit: #D03238; --bq-warn: #B87A00; --bq-late: #B42318; --bq-late-bg: #FDE7E4;
  --bq-glass: rgba(255, 255, 255, .72); --bq-glass-line: rgba(var(--lk-deep-rgb), .08); --bq-glass-hi: rgba(255, 255, 255, .7); --bq-glass-ink: #0E0F0C; --bq-glass-icon: var(--lk-deep);
  --bq-glass-pick: rgba(var(--lk-deep-rgb), .08); --bq-glass-hover: rgba(var(--lk-deep-rgb), .05); --bq-glass-press: rgba(var(--lk-deep-rgb), .1); --bq-area: rgba(var(--lk-deep-rgb), .06); --bq-bar-track: rgba(var(--lk-deep-rgb), .12);
}
/* v301 (owner, 2026-10-27: "siento que es muy verde… como WhatsApp, el logo verde pero la app no es toda verde"; then "muy gris" for an all-grey
   one, and the canvas "Días de libertad: el panel", M4, chosen): the page and its cards a warm near-black, neither grey nor green; the forest only
   in the block at the top (and the side bar on a computer), the lime in small pieces (icons on a lime-tinted circle, links, bars, the main
   buttons). Before: a green so deep it read as black (#0B1412), cards #15221F, circles #1F302B.
   v323 (owner, 2026-10-27: "el background de las pantallas el oscuro es negro o otro color? por que no se ve negro negro en mi iphone", then
   "Negro puro en todo"): the page pure black #000000 (before: #0E0F0C, which a phone's OLED screen shows as a lit dark grey). v324 (owner, the
   same day: "me quedo con 1", the cards as the canvas M4 shows them): the cards keep M4's dark with a touch of green, #181B15, on the black. */
:root.land.land-dark {
  --bq-page: #000000; --bq-page-glass: rgba(0, 0, 0, .92); --bq-card: #181B15; --bq-card-2: #1E211B; --bq-card-3: #272B23;
  --bq-ink: #EEF2EF; --bq-ink-2: #B8BCB1; --bq-ink-3: #969B90; --bq-line: rgba(255, 255, 255, .08); --bq-line-2: rgba(255, 255, 255, .16); --bq-grab: rgba(255, 255, 255, .22); --bq-track: rgba(255, 255, 255, .12);
  --bq-circle: #2A3120; --bq-circle-2: #343C28; --bq-mint: #252D18; --bq-mint-ink-2: #C9DDA6;
  --bq-accent: var(--lk-lime); --bq-pick-bg: var(--lk-lime); --bq-pick-ink: var(--lk-deep); --bq-pick-ink-2: var(--lk-deep);
  --bq-in: var(--lk-lime); --bq-crit: #FF8A80; --bq-warn: #F5C04A; --bq-late: #FF8A80; --bq-late-bg: rgba(255, 138, 128, .14);
  --bq-glass: rgba(24, 27, 21, .72); --bq-glass-line: rgba(255, 255, 255, .1); --bq-glass-hi: rgba(255, 255, 255, .06); --bq-glass-ink: #EEF2EF; --bq-glass-icon: #EEF2EF;
  --bq-glass-pick: rgba(255, 255, 255, .12); --bq-glass-hover: rgba(255, 255, 255, .07); --bq-glass-press: rgba(255, 255, 255, .16); --bq-area: rgba(var(--lk-lime-rgb), .08); --bq-bar-track: rgba(255, 255, 255, .12);
  color-scheme: dark;
}
@media (max-width: 920px) {
  /* ---------- the page: sage, as the home page ---------- */
  /* the page itself (behind the app's column, which paints its own grey) is the block's green: Safari on an iPhone paints the strip behind the clock
     and the battery with the page's own colour, not with the theme-color of app/shell.js, so with the grey there it was a grey band over the green
     block (owner, 2026-10-12, with a screenshot: "¿por qué se ve así el borde superior?") */
  /* and only at the top: under the app, at the foot, the page's own grey (owner, 2026-10-12, with a screenshot: "there is a weird space in the
     bottom": the installed app on an iPhone can be left shorter than the screen after the keyboard has been up, app/viewport-heal.js, and the
     forest showed there as a band) */
  html.in-app.land { background: var(--bq-page) linear-gradient(var(--lk-deep), var(--lk-deep)) top / 100% 50% no-repeat; }
  html.in-app.land body { background: transparent; }
  :root.land .work { --bg: var(--bq-page); --glass: var(--bq-page-glass); background: var(--bq-page); }

  /* ---------- the forest block at the top: the panel, the balance and the month's row (on a phone the top bar lays its rows out on the page,
     base/responsive.css: display: contents, so each row paints the block). Inside it the theme's words and lines are light on dark. ---------- */
  :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);
    --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); --on-dark: #FFFFFF; color: #FFFFFF;
  }
  :root.land .topbar > .navbar, :root.land .topbar > .bar-bal, :root.land .topbar > .pagehead { background: var(--lk-deep); }
  :root.land .topbar > .navbar { border-bottom: 0; box-shadow: 0 -60vh 0 0 var(--lk-deep); }      /* pulled down past the top, the same forest shows above it */
  :root.land.scrolled .topbar > .navbar { border-radius: 0; box-shadow: 0 -60vh 0 0 var(--lk-deep), 0 8px 20px -12px rgba(14, 15, 12, .45); }
  :root.land .topbar > .pagehead { margin: 0 0 16px; padding-bottom: 24px; border-radius: 0; }      /* square at its foot (owner, 2026-10-12: "quita los bordes de abajo de la barra superior") */
  :root.land .topbar > .pagehead.bare { height: 24px; padding: 0; }
  /* with "You can spend" first, the block goes straight on into it: the day's figure is in the block, on the block's own green, and the lime strip
     hangs from the block's foot, flush with it (owner, 2026-10-12: "que la lista lima encaje perfecta con la de arriba"; "el background de gastar hoy
     igual que el de la barra superior, que se mezclen") */
  :root.land:is(.pm-view-free1, #pm-0) .topbar > .pagehead { margin-bottom: 0; padding-bottom: 0; }
  :root.land #view > .bq-free:first-child { margin-top: -4px; }      /* the page's 4 px above its first part (base/responsive.css) */

  /* who is using it: the photo or the first letter on lime; the round buttons light on the forest */
  :root.land .bar-who .bw-t small { color: var(--lk-soft); }
  :root.land .bar-who .bw-t b { color: #FFFFFF; }
  :root.land .bar-who .avatar { width: 44px; height: 44px; box-shadow: none; }
  :root.land .bar-who .avatar.bq-init { display: grid; place-items: center; border-radius: 50%; background: var(--lk-lime); color: var(--lk-deep); font-size: 17px; font-weight: 700; line-height: 1; }
  :root.land .navbar .bell, :root.land .more-btn, :root.land .navbar .side-flip { width: 44px; height: 44px; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); color: #FFFFFF; }
  :root.land .navbar .bell .count { background: var(--lk-lime); color: var(--lk-deep); box-shadow: 0 0 0 2px var(--lk-deep); }
  :root.land .bar-who:focus-visible, :root.land .navbar .bell:focus-visible, :root.land .more-btn:focus-visible, :root.land .navbar .side-flip:focus-visible, :root.land .bar-bal .bb-link:focus-visible, :root.land .bar-bal .bb-eye:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }

  /* the net balance: large and white, its cents quieter */
  :root.land .topbar > .bar-bal { padding-top: 24px; }      /* more room above the net balance (owner, 2026-10-12: "agrega más espacio entre el saldo neto y los elementos de encima"; it was 8 px) */
  :root.land .bar-bal .bb-link small { color: var(--lk-soft); font-size: 14px; font-weight: 500; }
  :root.land .bar-bal .bb-link b { color: #FFFFFF; font-weight: 600; letter-spacing: -.045em; }
  :root.land .bar-bal .bb-link b:not(.long) { font-size: clamp(26px, 7.4vw, 28px); line-height: 1.1; }      /* smaller (owner, 2026-10-12: "son muy grandes"; it was up to 46 px, then 36 until v289: "disminuye el tamaño de los números principales como el de saldo neto"); whole on a 320 px phone too */
  :root.land .bar-bal .bb-link b .cents { color: var(--lk-soft); opacity: 1; font-size: .5em; letter-spacing: 0; }
  :root.land .bar-bal .bb-link b.neg { color: #FF8A80; }
  :root.land .bar-bal .bb-eye { color: var(--lk-soft); }

  /* the month and Journey: light pills on the forest */
  :root.land .pagehead .month.m-ph { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
  :root.land .pagehead .m-ph button { color: var(--lk-soft); }
  :root.land .pagehead .m-ph button:disabled { color: rgba(255, 255, 255, .3); }
  :root.land .pagehead .m-ph button:active:not(:disabled) { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
  @media (hover: hover) and (pointer: fine) { :root.land .pagehead .m-ph button:hover:not(:disabled) { background: rgba(255, 255, 255, .14); color: #FFFFFF; } }
  :root.land .pagehead .m-ph .m-slide { color: rgba(255, 255, 255, .6); }
  :root.land .pagehead .m-ph .m-slide.mid { color: #FFFFFF; font-weight: 600; }
  :root.land .jr-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #FFFFFF; font-weight: 600; }
  :root.land .jr-btn svg { color: var(--lk-lime); }
  :root.land .jr-btn b { background: rgba(var(--lk-lime-rgb), .2); color: var(--lk-lime); }
  @media (hover: hover) and (pointer: fine) { :root.land .jr-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #FFFFFF; } }
  :root.land .topbar .m-back .btn.primary { background: var(--lk-lime); border-color: var(--lk-lime); color: var(--lk-deep); }

  :root.land #view .bq-free { margin-left: -16px; margin-right: -16px; }      /* "You can spend": the block's whole width */
  :root.land #view > .bq-free + .bq-acts { margin-top: -8px; }      /* right under the card, 16 px, as designed */
  :root.land .bq-row { margin: 0 -16px; padding: 2px 16px 4px; }      /* a row to swipe, from edge to edge of the screen */
}
/* ---------- the summary's parts, on a phone and (v199) on a computer (its layout: look-land-desk.css) ---------- */
  /* ---------- "You can spend": the card half on the block ---------- */
  :root.land #view .bq-free { position: relative; z-index: 2; display: flex; flex-direction: column; color: #FFFFFF; }
  :root.land .bq-free-top { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 18px; background: var(--lk-deep); }
  :root.land .bq-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--lk-soft); font-size: 13px; font-weight: 500; line-height: 1.2; }      /* no pill: the words and the green dot, as the net balance's label (owner, 2026-10-12: "no lo hagas un pill, quítale los bordes, deja solo la letra con el punto verde") */
  :root.land .bq-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lk-lime); }
  :root.land .bq-free .fu-big { color: var(--lk-soft); font-size: 14px; font-weight: 500; line-height: 1; }
  :root.land .bq-free .fu-n { color: #FFFFFF; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-right: 3px; }      /* under the net balance's size, so the two do not compete (owner, 2026-10-12; it was 56, then 40 px) */
  :root.land .bq-free-foot { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin: 0 16px; padding: 10px 10px 10px 18px; border-radius: 0 0 24px 24px; background: var(--lk-lime); color: var(--lk-deep); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  :root.land .bq-free-foot:active { background: var(--lk-lime-lo); }
  :root.land .bq-free-foot:focus-visible { outline: 2px solid var(--lk-deep); outline-offset: -4px; }
  :root.land .bq-say { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
  :root.land .bq-say::first-letter { text-transform: uppercase; }
  :root.land .bq-say b { font-weight: 700; color: inherit; }      /* the strip's deep green: the app's "b" rule (--ink-strong) made the amount light on lime in the dark theme (owner, 2026-10-12) */
  :root.land .bq-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lk-deep); color: var(--lk-lime); }
  :root.land .bq-go svg { width: 18px; height: 18px; stroke-width: 2.4; }

  /* ---------- four round buttons in one white bar ---------- */
  :root.land .bq-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 14px 8px 12px; border-radius: 28px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  :root.land .bq-acts button { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; min-height: 80px; border-radius: 18px; color: var(--bq-ink); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; -webkit-tap-highlight-color: transparent; transition: transform var(--t1) ease-out; }
  :root.land .bq-acts button:active { transform: scale(.94); }
  :root.land .bq-acts button:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land .bq-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bq-circle); color: var(--bq-accent); }
  :root.land .bq-ico svg { width: 21px; height: 21px; }
  :root.land .bq-ico.on { background: var(--lk-pop); color: var(--lk-pop-ink); }      /* deep green on lime in both themes (v195: in the dark one its icon was lime on lime) */

  /* ---------- a section's heading: the name, and the way to its page ---------- */
  :root.land .bq-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  :root.land .bq-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }      /* with the page's 24 px, 26 px above a heading, as designed */
  :root.land .bq-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  :root.land .bq-h h2 { margin: 0; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
  :root.land .bq-sub { color: var(--bq-ink-2); font-size: 13px; }
  :root.land .bq-more { display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 44px; color: var(--bq-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
  :root.land .bq-more svg { width: 16px; height: 16px; stroke-width: 2.2; }
  :root.land .bq-empty span { color: var(--bq-ink-2); font-size: 14px; }
  :root.land .bq-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: 24px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); }
  /* To pay (2026-10-24): next month's bills due within a week, under their month, apart from this month's and its total */
  :root.land .bq-next-h { margin: 12px 0 0; color: var(--bq-ink-2); font-size: 14px; font-weight: 600; letter-spacing: 0; }
  :root.land .bq-empty.sm { padding: 12px 16px; }
  /* a row to swipe sideways, from edge to edge of the screen */
  :root.land .bq-row { list-style: none; display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  :root.land .bq-row::-webkit-scrollbar { display: none; }
  :root.land .bq-row > li { flex: none; scroll-snap-align: start; }

  /* ---------- the accounts: round logos ---------- */
  :root.land .bq-accs { gap: 8px; }
  :root.land .bq-acc { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; text-align: center; -webkit-tap-highlight-color: transparent; }
  :root.land .bq-acc:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; border-radius: 14px; }
  :root.land .bq-acc:active .bq-mark { transform: scale(.94); }
  :root.land .bq-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); transition: transform var(--t1) ease-out; }
  :root.land .bq-mark .inst { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; font-size: 13px; }
  :root.land .bq-mark .inst img { width: 40px; height: 40px; border-radius: 50%; }
  :root.land .bq-mark .inst svg { width: 20px; height: 20px; }
  :root.land .bq-acc-n { max-width: 100%; overflow: hidden; color: var(--bq-ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- what there is to pay: small cards ---------- */
  :root.land .bq-bills { gap: 10px; margin-top: 4px; align-items: flex-start; }      /* each card as tall as what it says */
  :root.land .bq-bill { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; width: 156px; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 24px; background: var(--bq-card); box-shadow: inset 0 0 0 1px var(--bq-line); color: var(--bq-ink); -webkit-tap-highlight-color: transparent; transition: transform var(--t1) ease-out; }
  :root.land .bq-bill:active { transform: scale(.97); }
  :root.land .bq-bill:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land .bq-bill-t { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  :root.land .bq-bill .bq-ico { width: 40px; height: 40px; }
  :root.land .bq-bill .bq-ico svg { width: 19px; height: 19px; }
  :root.land .bq-bill .bq-ico:has(> img) { overflow: hidden; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }      /* a cost's picture or brand (v257) */
  :root.land .bq-bill .bq-ico > img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
  :root.land .bq-bill .bq-ico .inst { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; font-size: 13px; }
  :root.land .bq-bill .bq-ico .inst img { width: 40px; height: 40px; border-radius: 50%; }
  :root.land .bq-bill.first .bq-ico { background: var(--lk-deep); color: var(--lk-lime); }
  :root.land .bq-due { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 4px 9px; border-radius: 999px; background: var(--bq-circle); color: var(--bq-accent); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  :root.land .bq-bill.first .bq-due { background: var(--lk-pop); color: var(--lk-pop-ink); font-weight: 700; }
  :root.land .bq-due.late, :root.land .bq-bill.first .bq-due.late { background: var(--bq-late-bg); color: var(--bq-late); }
  :root.land .bq-bill-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.25; }
  :root.land .bq-bill-v { color: var(--bq-ink-2); font-size: 13px; line-height: 1.3; }

  /* ---------- a tile that opens its details, and a bar (v301: the days of freedom and the goals are css/look/look-land-stack.css; before, a ring
     beside the goals on mint) ---------- */
  :root.land .bq-tile { all: unset; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer; display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; padding: 16px; border-radius: 26px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--t1) ease-out; }
  :root.land .bq-tile:active { transform: scale(.98); }
  :root.land .bq-tile:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
  :root.land .bq-tile-h { font-size: 14px; font-weight: 600; }
  :root.land .bq-bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--bq-bar-track); }
  :root.land .bq-bar i { display: block; height: 100%; border-radius: 999px; background: var(--bq-accent); }

  /* ---------- the day's fact: one quiet line with the lime dot ---------- */
  :root.land .ins-strip .ins-say { color: var(--bq-ink-2); }
  :root.land .ins-strip .ins-say::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--lk-pop); box-shadow: 0 0 0 3px rgba(var(--lk-lime-rgb), .3); vertical-align: 1px; }
  :root.land .ins-strip .ins-m, :root.land .ins-strip .ins-ar { color: var(--bq-accent); }
  :root.land .ins-strip .ins-pg { display: none; }      /* one line, as designed; the others still come with a swipe */

  /* ---------- the other parts (the month as planned, the latest transactions…): the same headings, their cards white ---------- */
  :root.land #view .card.part-out > .part-h h2.sec { min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--bq-ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  :root.land #view .card.part-out > .part-h h2.sec::before { display: none; }
  :root.land #view .card.part-out > .part-h .btn.sm.go { min-height: 44px; padding: 0 2px 0 8px; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--bq-accent); font-size: 14px; font-weight: 600; }
  :root.land #view .card.part-out > .part-h .btn.sm.go svg { color: var(--bq-accent); }
  :root.land #view .mc-ask { border-radius: 24px; }

@media (max-width: 920px) {

  /* ---------- the bar at the foot: frosted glass, floating, as Wise's (owner, 2026-10-12, with a screenshot of Wise's home: "I want my menu to look
     like this in that glass effect, size and everything"; v183–v186 it was a deep green pill as wide as its screens). The screen's width less 16 px
     each side, 58 px tall, 20 px over the screen's foot on an iPhone (inside the home bar's room, as the system's own bars sit); white at 72 % over a
     blur of what scrolls under it, a hairline and a soft shadow; four screens sharing the width, their icons and names in the deep ink; the screen in
     use on a soft grey-green pill as tall as the bar's inside. No round + here (v183: "quita el botón (+) del medio"). Scrolling down it gets
     shorter, the icons alone, their names kept for a screen reader (v183); up, or near the top, whole again (features/phone/bosque.js). ---------- */
  :root.land .content { padding-bottom: calc(96px + var(--safe-b)); }
  :root.land .tabbar { left: 16px; right: 16px; bottom: max(12px, calc(var(--safe-b) - 14px)); display: flex; gap: 0; align-items: stretch; height: 58px; padding: 4px; border: 1px solid var(--bq-glass-line); border-radius: 999px;
    background: var(--bq-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 12px 32px -14px rgba(14, 15, 12, .28), inset 0 1px 0 var(--bq-glass-hi);
    transition: height 280ms var(--ease), bottom 280ms var(--ease); }
  :root.land .tabbar .fab { display: none; }
  :root.land .tabbar :is(a, .tab-more) { position: relative; box-sizing: border-box; flex: 1 1 0; min-width: min-content; min-height: 0; gap: 2px; padding: 0 8px; border-radius: 999px; background: transparent; color: var(--bq-glass-ink); font-size: 12px; font-weight: 500; letter-spacing: 0;
    -webkit-tap-highlight-color: transparent; transition: background 160ms ease-out, transform 160ms ease-out, font-size 200ms var(--ease), gap 200ms var(--ease); }      /* the same share each, more only for a name that needs it ("Transacciones") */
  :root.land .tabbar :is(a, .tab-more)::before { display: none; }
  :root.land .tabbar :is(a, .tab-more) svg { width: 22px; height: 22px; color: var(--bq-glass-icon); }
  :root.land .tabbar :is(a, .tab-more)[aria-current="page"] { background: var(--bq-glass-pick); color: var(--bq-glass-ink); font-weight: 600; }
  :root.land .tabbar :is(a, .tab-more)[aria-current="page"] svg { color: var(--bq-glass-icon); }
  @media (hover: hover) and (pointer: fine) { :root.land .tabbar :is(a, .tab-more):not([aria-current]):hover { background: var(--bq-glass-hover); } }
  :root.land .tabbar :is(a, .tab-more):active { transform: scale(.95); background: var(--bq-glass-press); }
  :root.land .tabbar :focus-visible { outline: 2px solid var(--bq-accent); outline-offset: -2px; }
  /* shorter while the page goes down */
  :root.land.bar-small .tabbar { height: 54px; }      /* its screens still 44 px to tap */
  :root.land.bar-small .tabbar :is(a, .tab-more) { gap: 0; font-size: 0; }
  @media (prefers-reduced-motion: reduce) { :root.land .tabbar, :root.land .tabbar :is(a, .tab-more) { transition: none; } }

  /* ---------- narrow phones: the round buttons at the top a little smaller, so the greeting keeps one line; the bar at the foot a little wider, so
     "Transacciones" keeps its name whole ---------- */
  @media (max-width: 374px) {
    :root.land .navbar .bell, :root.land .more-btn, :root.land .navbar .side-flip { width: 40px; height: 40px; }
    :root.land .bar-who .avatar { width: 40px; height: 40px; }
    :root.land .tabbar { left: 12px; right: 12px; }
    :root.land .tabbar :is(a, .tab-more) { padding-inline: 6px; }
  }
  /* narrower still: a larger text size (app/text-size.js) lays the page out down to 300 px; the five names still whole ("Transactions") */
  @media (max-width: 319px) {
    :root.land .tabbar { left: 8px; right: 8px; }
    :root.land .tabbar :is(a, .tab-more) { padding-inline: 3px; font-size: 11px; }
  }
}