/* Dorax Finance — the floating notices in the look (v215; owner, 2026-10-13: "también actualiza las curiosidades y los avisos flotantes al nuevo
   estilo visual que tenemos"). Every notice that comes up over the page (features/ahead/curios.view.js draws them all): a curiosity (and its small
   signal on a phone), a milestone cheered, the question about notifications, the app lock, where Household | Company is switched, pay day.
   They keep what made them notices (2026-10-10, the iPhone's notification): a card of their own over the page, 24 px corners, the page blurred behind,
   the mark at the left where a notification has its app's icon, the title, the words, the source quieter. What changes is the look's: the card is
   the summary's forest block (#112622), its words white and its quieter words the block's grey-green; the mark is one of Dorax's things on the
   look's lime circle (js/ui/art.js); the main button lime with forest words, as the block's own buttons. On the company's side the look's lime is
   white (css/look/look-land-co.css): a white circle and a white button. The look before (tests/pw.js: oldLook) keeps the iPhone's grey. */
:root.land .curio {
  --nt-bg: rgba(var(--lk-deep-rgb), .96); --nt-line: rgba(255, 255, 255, .09); --nt-ink: #FFFFFF; --nt-ink-2: var(--lk-soft);
  gap: 14px; padding: 16px 12px 16px 16px; border-radius: 24px; border: 1px solid var(--nt-line); background: var(--nt-bg); color: #FFFFFF;
  -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px);
  box-shadow: 0 26px 50px -22px rgba(var(--lk-deep-rgb), .7), 0 2px 8px rgba(var(--lk-deep-rgb), .16);
}
:root.land.land-dark .curio { --nt-bg: rgba(33, 37, 29, .97); --nt-line: rgba(255, 255, 255, .12); box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .8); }
/* the mark: a thing on the lime circle */
:root.land .curio .fl-ico.nt-art { flex: none; display: block; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; }
:root.land .curio .fl-ico.nt-art .obj { width: 100%; height: 100%; --obj-bg: var(--lk-lime); --obj-ink: var(--lk-deep); --obj-fill: var(--lk-lime-2); }
:root.land.side-co .curio .fl-ico.nt-art .obj { --obj-fill: var(--lk-mint); }
/* the words */
:root.land .curio .grow { gap: 5px; }
:root.land .curio b, :root.land .curio .cu-open b { color: #FFFFFF; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
:root.land .curio p { color: var(--lk-on-2); font-size: 14.5px; line-height: 1.45; }
:root.land .curio small { color: var(--lk-soft); font-size: 12.5px; }
/* the buttons: the main one lime (white on the company's side) with forest words; another on the block's glass; "not now" quieter */
:root.land .curio .row { gap: 8px; margin-top: 8px; }
:root.land .curio .btn { border-radius: 999px; min-height: 40px; padding: 0 16px; font-weight: 600; }
:root.land .curio .btn.primary { background: var(--lk-lime); border-color: var(--lk-lime); color: var(--lk-deep); box-shadow: none; }
:root.land .curio .btn.primary:hover { background: var(--lk-lime-hi); border-color: var(--lk-lime-hi); }
:root.land .curio .btn:not(.primary):not(.ghost) { background: rgba(255, 255, 255, .1); border-color: transparent; color: #FFFFFF; }
:root.land .curio .btn:not(.primary):not(.ghost):hover { background: rgba(255, 255, 255, .16); }
:root.land .curio .btn.ghost { background: transparent; border-color: transparent; color: var(--lk-soft); }
:root.land .curio .btn.ghost:hover { color: #FFFFFF; }
:root.land .curio .x { flex: none; width: 40px; min-width: 40px; min-height: 40px; margin: -10px -6px 0 0; padding: 0; display: inline-grid; place-items: center; color: var(--lk-soft); }
/* the close button sits in the corner, over the title's end, so the words and the two answers take the card's width (an answer and "Not now" on one line) */
:root.land .curio:not(.sig) { position: relative; padding-right: 16px; }
:root.land .curio:not(.sig) > .x { position: absolute; top: 8px; right: 8px; margin: 0; }
/* the words flow round the close button: a float the size of its corner at the top of the words (the title and, when the title is one short line,
   the first line under it keep clear of it) */
:root.land .curio:not(.sig) .grow { display: block; }
:root.land .curio:not(.sig) .grow::before { content: ""; float: right; width: 28px; height: 30px; }
:root.land .curio:not(.sig) .grow > b { display: block; }
:root.land .curio:not(.sig) .grow > p { margin: 5px 0 0; }
:root.land .curio:not(.sig) .grow > small { display: block; margin-top: 6px; }
:root.land .curio:not(.sig) .grow > .row { margin-top: 12px; }
:root.land .curio .btn.ghost:not(.x) { padding: 0 10px; }
:root.land .curio .x svg { width: 15px; height: 15px; }
:root.land .curio :is(.btn, .cu-open):focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 2px; }
/* a phone: the curiosity's small signal, a pill of the same forest with its lightbulb */
@media (max-width: 920px) {
  :root.land .curio { padding: 14px 10px 14px 14px; }
  :root.land .curio:not(.sig) { padding-right: 14px; } :root.land .curio:not(.sig) > .x { top: 6px; right: 6px; }
  :root.land .curio .btn { min-height: 44px; }
  :root.land .curio .x { min-width: 44px; min-height: 44px; width: 44px; }
  :root.land .curio.sig { gap: 2px; padding: 5px 6px 5px 6px; border-radius: 999px; }
  :root.land .curio.sig .cu-open { gap: 10px; }
  :root.land .curio.sig .fl-ico.nt-art { width: 36px; height: 36px; }
  :root.land .curio.sig .in-see { color: var(--lk-lime); font-weight: 600; }
  :root.land.side-co .curio.sig .in-see { color: #FFFFFF; }
  :root.land .curio.sig .cu-open > svg { color: var(--lk-soft); }
  :root.land .curio.sig .x { margin: 0; }
}

/* putting the app on the home screen (features/install): the banner at the very top of a phone, on the forest block it sits on */
:root.land .install-bar { background: var(--lk-deep); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #FFFFFF; }
:root.land .install-bar b { color: #FFFFFF; } :root.land .install-bar small { color: var(--lk-soft); }
:root.land .install-bar .ins-app { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
:root.land .install-bar .btn.primary { border-radius: 999px; background: var(--lk-lime); border-color: var(--lk-lime); color: var(--lk-deep); box-shadow: none; }
:root.land .install-bar .x { color: var(--lk-soft); }

/* the toast ("Saved.", "Deleted. Undo"): the same forest card, its button lime (white on the company's side) */
:root.land #toast { --nt-bg: rgba(var(--lk-deep-rgb), .96); --nt-line: rgba(255, 255, 255, .09); --nt-ink: #FFFFFF; --nt-link: var(--lk-lime); border-radius: 24px;
  box-shadow: 0 18px 40px -18px rgba(var(--lk-deep-rgb), .7), 0 2px 6px rgba(var(--lk-deep-rgb), .14); }
:root.land.land-dark #toast { --nt-bg: rgba(33, 37, 29, .97); --nt-line: rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
:root.land #toast button:focus-visible { outline-color: var(--lk-lime); }
/* a phone: the toast drops in at the top, over the forest block; white there, as the look's cards, so it does not melt into the block */
@media (max-width: 920px) {
  :root.land:not(.land-dark) #toast { --nt-bg: rgba(255, 255, 255, .97); --nt-line: rgba(var(--lk-deep-rgb), .08); --nt-ink: #0E0F0C; --nt-link: var(--lk-deep); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); }
  :root.land.land-dark #toast { --nt-bg: rgba(44, 49, 39, .97); --nt-line: rgba(255, 255, 255, .16); }
  :root.land #toast button { font-weight: 600; }
}