/* The payment sheet: Graphite and gold, the world dineraya.com shipped
   in (its DESIGN.md is the source of the tokens). Loaded only by pages
   rendered in embed mode, so the full-page flow keeps its own look until
   the buyer screens get their own pass. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #111113;
  --ink-hover: #2a2a2e;
  --ink-2: #4c4c55;
  --ink-3: #5f5f68;
  --ground: #fbfbfa;
  --card: #fff;
  --line: #e8e8e4;
  --line-strong: #d6d6d1;
  --gold: #c7860f;
  --gold-selection: #f6e2b4;
  --ok: #157a4a;
  --warn: #8a5300;
}

html, body { margin: 0; background: var(--card); }
body { font: 15px/1.45 "Onest", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; caret-color: var(--gold); }
::selection { background: var(--gold-selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

[dnr-sheet] { box-sizing: border-box; min-height: 100dvh; display: flex; flex-direction: column; padding: 22px 22px 20px; }
[dnr-sheet-region] { display: flex; flex-direction: column; flex: 1; }

[dnr-sheet-top] { display: flex; align-items: center; gap: 12px; }
[dnr-sheet-av] { width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
[dnr-sheet-top] b { display: block; font-weight: 620; font-size: 15.5px; }
[dnr-sheet-top] small { display: block; font-size: 13px; color: var(--ink-3); }
[dnr-sheet-close] { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f1ee; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
[dnr-sheet-close]:hover { background: #e8e8e4; color: var(--ink); }
[dnr-sheet-close] .icon { width: 16px; height: 16px; }

[dnr-sheet-amt] { margin: 22px 0 4px; font-size: 40px; font-weight: 650; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
[dnr-sheet-summary] { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; }

[dnr-sheet-rows] { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
[dnr-sheet-rows] li { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
[dnr-sheet-rows] .icon { width: 17px; height: 17px; color: var(--ink-3); }
[dnr-sheet-rows] [dnr-v] { margin-left: auto; color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
[dnr-sheet-rows] + [dnr-sheet-rows] { border-top: 0; }
[dnr-sheet-rows] select { margin-left: auto; max-width: 62%; font: inherit; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 30px 7px 10px; background: var(--card); }

[dnr-sheet-note] { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); min-height: 1.45em; }
[dnr-sheet-note][data-tone="warn"] { color: var(--warn); }
[dnr-sheet-foot] { margin-top: auto; padding-top: 18px; }

[dnr-sheet-pay] { width: 100%; height: 52px; border: 0; border-radius: 16px; background: var(--ink); color: #fff; font: 600 16px/1 "Onest", system-ui, sans-serif; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: background-color .2s, opacity .2s; }
[dnr-sheet-pay]:hover { background: var(--ink-hover); }
[dnr-sheet-pay]:disabled { opacity: .45; cursor: not-allowed; }
[dnr-sheet-pay][data-state="paid"] { background: var(--ok); opacity: 1; }
[dnr-sheet-pay] .icon { width: 20px; height: 20px; }
/* A press being sent: the button keeps its colour and turns a spinner. */
[dnr-sheet-pay][aria-busy="true"], [dnr-sheet-pay][aria-busy="true"]:disabled { opacity: 1; cursor: progress; background: var(--ink); }
[dnr-spin] { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.28); border-top-color: #fff; animation: dnr-spin .8s linear infinite; }
@keyframes dnr-spin { to { transform: rotate(360deg); } }
[dnr-sr] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

[dnr-sheet-alt] { width: 100%; margin-top: 10px; height: 42px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); color: var(--ink); font: 600 14.5px/1 "Onest", system-ui, sans-serif; cursor: pointer; }
[dnr-sheet-alt]:hover { border-color: var(--ink); }
[dnr-sheet-host] { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; }
[dnr-sheet-host] .icon { width: 13px; height: 13px; }

[dnr-sheet-window] p { color: var(--ink-2); margin: 18px 0 0; }

@media (prefers-reduced-motion: reduce) {
  [dnr-sheet-pay] { transition: none; }
  [dnr-spin] { animation-duration: 2.4s; }
}

/* Short frames (a phone on its side, a small laptop window): the guard
   only lets Pay work while the whole confirmation is on screen, so the
   sheet tightens until it fits rather than scrolling part of itself
   out of view. */
@media (max-height: 560px) {
  [dnr-sheet] { padding: 14px 18px 14px; }
  [dnr-sheet-av] { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
  [dnr-sheet-amt] { margin: 12px 0 2px; font-size: 30px; }
  [dnr-sheet-summary] { margin-bottom: 10px; }
  [dnr-sheet-rows] li { min-height: 38px; padding: 5px 0; font-size: 14px; }
  [dnr-sheet-note] { margin-top: 8px; }
  [dnr-sheet-foot] { padding-top: 10px; }
  [dnr-sheet-pay] { height: 46px; }
  [dnr-sheet-host] { margin-top: 8px; }
}

/* Payment in progress: a ring that turns while the bank confirms, then
   closes into a check. Held for at least a beat, so a fast bank still
   reads as something that happened. */
[dnr-sheet-progress] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 0; }
[dnr-sheet-progress] svg { width: 88px; height: 88px; overflow: visible; }
[dnr-ring-track] { fill: none; stroke: var(--line); stroke-width: 4; }
[dnr-ring-arc] { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 120; transform-origin: 32px 32px; animation: dnr-ring-turn 1s linear infinite; transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1), stroke .3s; }
[dnr-ring-check] { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
[dnr-sheet-progress] p { margin: 0; font-size: 16px; font-weight: 560; color: var(--ink); }
[dnr-sheet-progress][data-state="paid"] [dnr-ring-arc] { animation: none; stroke: var(--ok); stroke-dashoffset: 0; fill: var(--ok); transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1), fill .3s .35s, stroke .3s; }
[dnr-sheet-progress][data-state="paid"] [dnr-ring-check] { animation: dnr-ring-draw .45s .45s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes dnr-ring-turn { to { transform: rotate(360deg); } }
@keyframes dnr-ring-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  [dnr-ring-arc] { animation: none; }
  [dnr-sheet-progress][data-state="paid"] [dnr-ring-check] { animation: none; stroke-dashoffset: 0; }
}

/* The test payment's marker, beside the amount (try.go). */
[dnr-sheet-test] { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #fbf1dc; color: #9d6609; font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }

/* The test payment in a tab of its own, dressed as the sheet it would
   have been over the page (present=sheet, embed.js; graphite.css has the
   same for the payment pages): a ghost of the page behind, the contents
   arriving, and the sheet sliding back down as it leaves. */
html:has(body[dnr-presented]) { background: #0b0b0c; }
body[dnr-presented] { background: #0b0b0c; padding-top: 22px; }
body[dnr-presented]::before { content: ""; position: fixed; inset: 0; background: #c4c4c2; border-radius: 12px; transform-origin: 50% 0; transform: translateY(10px) scale(.94); transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .5s, border-radius .5s; }
body[dnr-presented][data-leaving]::before { transform: none; background-color: #f4f4f2; border-radius: 0; }
body[dnr-presented] [dnr-sheet] { position: relative; background: var(--card); border-radius: 28px 28px 0 0; min-height: calc(100dvh - 22px); transition: transform .46s cubic-bezier(.32,0,.67,0); }
body[dnr-presented][data-leaving] [dnr-sheet] { transform: translateY(calc(100% + 40px)); }
body[dnr-presented] [dnr-sheet-region] > * { animation: dnr-arrive .38s .05s cubic-bezier(.16,1,.3,1) both; }
@keyframes dnr-arrive { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 560px) {
  body[dnr-presented] { padding: 0; min-height: 100dvh; display: grid; place-items: center; }
  body[dnr-presented]::before { transform-origin: 50% 50%; transform: scale(.94); border-radius: 18px; }
  body[dnr-presented] [dnr-sheet] { width: 420px; min-height: 0; height: min(700px, calc(100dvh - 48px)); border-radius: 28px; box-shadow: 0 40px 80px -24px rgba(0,0,0,.55); }
  body[dnr-presented][data-leaving] [dnr-sheet] { transform: translateY(calc(50vh + 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  body[dnr-presented]::before, body[dnr-presented] [dnr-sheet] { transition: none; }
  body[dnr-presented] [dnr-sheet-region] > * { animation: none; }
}