/* Dorax Finance — what a payment and a transaction end with, on the summary's look (v200; features/plan/pay-done.js, features/transactions/tx-done.js;
   owner, 2026-10-12: "la notificación de ahora es un pill que sale de encima de la pantalla, no me gusta, quiero una animación acorde").
     - a bill paid: a receipt that rises from the foot of the screen (on a computer, in the middle of the screen's foot): white paper with a torn foot,
       a lime check drawn on it, the amount, a dashed cut, the month's bills as a bar;
     - money in: the contribution's forest screen (look-land-win.css), with a lime coin instead of the ring and a card to put some of it aside;
     - any other transaction saved: the panel's button turns lime with its check for a moment.
   The summary's colours only: deep green #112622, lime #B6DD62 (#C4E57A lighter), the page's white, hairlines and words (look-land.css). */

/* ---------- a bill paid: its receipt ---------- */
:root.land #overlay .sheet.pd-sheet { padding: 0 12px calc(12px + var(--safe-b)); max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); }
:root.land #overlay .pd-paper {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 20px 30px; border-radius: 28px 28px 6px 6px; background: var(--bq-card); color: var(--bq-ink); text-align: center;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) 50% 0 / 22px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 7px, #000 7.5px) 50% 0 / 22px 100% repeat-x;      /* the torn foot of a receipt */
}
:root.land #overlay .pd-check { width: 64px; height: 64px; margin-bottom: 10px; }
:root.land #overlay .pd-check svg { display: block; width: 100%; height: 100%; overflow: visible; }
:root.land #overlay .pd-check circle { fill: var(--lk-lime); transform-origin: 32px 32px; }
:root.land #overlay .pd-check path { fill: none; stroke: var(--lk-deep); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
:root.land #overlay .pd-h { margin: 0; color: var(--bq-ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
:root.land #overlay .pd-amt { margin: 2px 0 0; color: var(--bq-ink); font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
:root.land #overlay .pd-meta { margin: 2px 0 0; color: var(--bq-ink-2); font-size: 13px; }
:root.land #overlay .pd-cut { width: 100%; height: 0; margin: 18px 0 14px; border: 0; border-top: 1.5px dashed var(--bq-line-2); }
:root.land #overlay .pd-month { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
:root.land #overlay .pd-month-t { display: flex; justify-content: space-between; gap: 10px; color: var(--bq-ink-2); font-size: 13px; }
:root.land #overlay .pd-month-t b { color: var(--bq-ink); font-weight: 600; }
:root.land #overlay .pd-bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--bq-bar-track); }
:root.land #overlay .pd-bar i { display: block; height: 100%; border-radius: 999px; background: var(--bq-accent); }
:root.land #overlay .pd-left { margin: 0; color: var(--bq-ink-2); font-size: 13px; }
:root.land #overlay .pd-left b { color: var(--bq-ink); font-weight: 600; }
:root.land #overlay .pd-left.all { display: flex; align-items: center; gap: 6px; color: var(--bq-ink); font-weight: 600; }
:root.land #overlay .pd-left svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--lk-lime); color: var(--lk-deep); stroke-width: 3; box-sizing: border-box; }
:root.land #overlay .pd-acts { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 20px; }
:root.land #overlay .pd-acts .btn { min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 600; }
:root.land #overlay .pd-acts .btn.primary { border: 0; background: var(--lk-pop); color: var(--lk-pop-ink); }
:root.land #overlay .pd-acts .btn.ghost { min-height: 44px; border: 0; background: none; color: var(--bq-accent); }
:root.land #overlay .pd-acts .btn:focus-visible { outline: 2px solid var(--bq-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { :root.land #overlay .pd-acts .btn.primary:hover { background: var(--lk-pop-hi); } :root.land #overlay .pd-acts .btn.ghost:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 921px) { :root.land #overlay .sheet.pd-sheet { left: calc(50% - 220px); right: auto; bottom: 28px; width: 440px; padding: 0; } }

/* ---------- money in: the coin, and the card to put some aside ---------- */
:root.land #overlay .iw-win { background: radial-gradient(70% 40% at 50% 26%, rgba(var(--lk-lime-rgb), .16), transparent 72%), var(--lk-deep); }
:root.land #overlay .iw-coin { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 18px; border-radius: 50%; background: var(--lk-lime); color: var(--lk-deep); box-shadow: 0 0 0 10px rgba(var(--lk-lime-rgb), .14), 0 0 0 22px rgba(var(--lk-lime-rgb), .06); }
:root.land #overlay .iw-coin svg { width: 40px; height: 40px; stroke-width: 2.4; }
:root.land #overlay .iw-win .gw-h { margin-top: 2px; }
:root.land #overlay .iw-save { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: 22px; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); text-align: left; }
:root.land #overlay .iw-save > b { color: #FFFFFF; font-size: 16px; font-weight: 600; }
:root.land #overlay .iw-save p { margin: 0; color: var(--lk-soft); font-size: 14px; line-height: 1.45; }
:root.land #overlay .iw-save p b { color: #FFFFFF; font-weight: 600; }
:root.land #overlay .iw-save .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--lk-lime); color: var(--lk-deep); font-size: 15px; font-weight: 600; }
:root.land #overlay .iw-save .btn svg { width: 18px; height: 18px; stroke-width: 2.2; }
:root.land #overlay .iw-save .btn:focus-visible { outline: 2px solid var(--lk-lime); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { :root.land #overlay .iw-save .btn:hover { background: var(--lk-lime-hi); } }
/* v535: the goals' shares in one list, what was given */
:root.land #overlay .iw-hand-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
:root.land #overlay .iw-hand-list li { display: flex; justify-content: space-between; gap: 12px; color: #FFFFFF; font-size: 14px; }
:root.land #overlay .iw-hand-list b { font-weight: 600; color: var(--lk-lime); }
:root.land #overlay .iw-handed { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--lk-lime); font-size: 15px; }
:root.land #overlay .iw-handed svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* ---------- any other transaction saved: the panel's button says it ---------- */
:root.land #overlay .btn.td-saved, :root.land #overlay .btn.primary.bq-save.td-saved { background: var(--lk-lime); border-color: var(--lk-lime); color: var(--lk-deep); transition: background-color 160ms ease-out, color 160ms ease-out; }
:root.land #overlay .btn.primary.bq-save.td-saved { background: var(--lk-pop); border-color: var(--lk-pop); color: var(--lk-pop-ink); }      /* v222: the button keeps its colours (the company's forest) */
:root.land #overlay .bq-save.td-saved .bq-save-ico { display: grid; place-items: center; width: 24px; height: 24px; }      /* saved: the check comes in beside "Recorded" */
:root.land #overlay .bq-save.td-saved .bq-save-amt { display: none; }
:root.land #overlay .btn.td-saved:not(.bq-save) { display: inline-flex; align-items: center; gap: 6px; }
:root.land #overlay .btn.td-saved:not(.bq-save) svg { width: 18px; height: 18px; stroke-width: 2.6; }