/* nimiq.express component styles — split out of app.css (#73) to clear the
   800-line guard. Linked immediately after app.css on both pages, so the
   cascade is byte-identical to the original single file. */
/* ---- status-alert (verbatim from `nq add status-alert`), namespaced ---- */
.nq-status-alert {
  --colors-blue:       oklch(0.5849 0.1438 244.29);
  --colors-blue-400:   oklch(0.9545 0.0167 236.69);
  --colors-blue-500:   oklch(0.9109 0.0327 232.24);
  --colors-green:      oklch(0.6932 0.1245 178.48);
  --colors-green-400:  oklch(0.9637 0.017 187.9);
  --colors-green-500:  oklch(0.9307 0.034 185.2);
  --colors-orange:     oklch(0.7387 0.179 56.67);
  --colors-orange-400: oklch(0.951 0.0221 74.1);
  --colors-orange-500: oklch(0.9396 0.0436 71.7);
  --colors-red:        oklch(0.598 0.1886 30.3);
  --colors-red-400:    oklch(0.9544 0.0166 26.65);
  --colors-red-500:    oklch(0.9112 0.0328 27.11);
  --colors-purple:     oklch(0.4629 0.1027 296.59);
  --colors-purple-400: oklch(0.9494 0.0083 301.35);
  --colors-purple-500: oklch(0.8984 0.0181 300.04);

  background: var(--bg-color);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 8px;
  outline: 1.5px solid var(--ring-color);
  outline-offset: -1.5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.nq-status-alert .alert-title {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0;
  margin-bottom: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: var(--label-color);
}

.nq-status-alert .alert-title::before {
  content: '';
  position: relative;
  display: inline-block;
  mask: var(--icon) no-repeat 100% 100%;
  background-color: var(--text-color);
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: inherit;
  width: 1em;
  height: 1em;
}

.nq-status-alert.note {
  --label-color: color-mix(in oklch, var(--colors-blue) 70%, transparent);
  --text-color: var(--colors-blue);
  --bg-color: var(--colors-blue-400);
  --ring-color: var(--colors-blue-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17"><path stroke="currentColor" stroke-width="1.5" d="m16.824 7.603-3.335-5.92A1.33 1.33 0 0 0 12.335 1H5.666c-.475 0-.915.26-1.153.683l-3.335 5.92a1.397 1.397 0 0 0 0 1.367l3.335 5.92a1.325 1.325 0 0 0 1.153.683h6.668a1.323 1.323 0 0 0 1.154-.683l3.334-5.92c.24-.424.24-.943.002-1.367Z"/><path fill="currentColor" d="M10 12a1 1 0 1 1-2 0V9a1 1 0 0 1 2 0v3Z"/><rect width="2" height="2" x="10" y="7" fill="currentColor" rx="1" transform="rotate(-180 10 7)"/></svg>');
}

.nq-status-alert.warning {
  --label-color: color-mix(in oklch, var(--colors-orange) 70%, transparent);
  --text-color: var(--colors-orange);
  --bg-color: var(--colors-orange-400);
  --ring-color: var(--colors-orange-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 12"><path fill="currentColor" d="M3.818.074a.658.658 0 0 0-.756.108.616.616 0 0 0-.12.736 5.017 5.017 0 0 1 .02 4.628.127.127 0 0 1-.113.063.13.13 0 0 1-.112-.066 2.766 2.766 0 0 1-.288-.789.376.376 0 0 0-.248-.28.393.393 0 0 0-.373.06A4.349 4.349 0 0 0 .327 6.727a4.256 4.256 0 0 0 .07 2.637 3.94 3.94 0 0 0 1.547 1.964 4.09 4.09 0 0 0 2.443.669c2.178 0 3.7-1.08 4.18-2.96.71-2.773-1.033-7.04-4.749-8.962Zm2.44 8.993a1.658 1.658 0 0 1-.618 1.057 1.734 1.734 0 0 1-1.189.365c-.41 0-.809-.14-1.127-.4a1.705 1.705 0 0 1-.6-1.014.246.246 0 0 1 .076-.226.259.259 0 0 1 .236-.063c.258-.004.51-.07.736-.195.225-.123.414-.3.55-.514a1.133 1.133 0 0 0 .234-1.238.247.247 0 0 1 .03-.286.259.259 0 0 1 .284-.072c.494.219.897.592 1.148 1.06a2.33 2.33 0 0 1 .24 1.525Z"/></svg>');
}

.nq-status-alert.tip {
  --label-color: color-mix(in oklch, var(--colors-green) 70%, transparent);
  --text-color: var(--colors-green);
  --bg-color: var(--colors-green-400);
  --ring-color: var(--colors-green-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><path stroke="currentColor" d="M5.5 1.002C3.015 1.002 1 2.921 1 5.288c0 1.223.761 2.327 1.727 3.108.52.42.898 1.02.898 1.689 0 .506.41.917.918.917h1.914c.507 0 .918-.41.918-.917 0-.67.378-1.268.898-1.69C9.24 7.616 10 6.512 10 5.289c0-2.367-2.015-4.286-4.5-4.286Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7 13.002H4"/></svg>');
}

.nq-status-alert.caution {
  --label-color: color-mix(in oklch, var(--colors-red) 70%, transparent);
  --bg-color: var(--colors-red-400);
  --text-color: var(--colors-red);
  --ring-color: var(--colors-red-500);
  --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12"><path fill="currentColor" d="M9.499 8.8c0-.47.12-.93.35-1.34l1.18-2.1a.75.75 0 0 0 .1-.59.79.79 0 0 0-.37-.48.87.87 0 0 0-.63-.1.82.82 0 0 0-.51.36l-1.5 2.23.89-4.6a.74.74 0 0 0-.09-.62.85.85 0 0 0-.87-.36.85.85 0 0 0-.54.35c-.06.1-.1.2-.11.3l-.93 3.89V.78c0-.2-.09-.4-.24-.55a.85.85 0 0 0-.59-.23.85.85 0 0 0-.58.23.76.76 0 0 0-.24.55v4.96l-.93-4.08a.8.8 0 0 0-.66-.64.87.87 0 0 0-.63.13.8.8 0 0 0-.34.53c-.02.1 0 .2.02.31l.89 5.84-1.64-1.36a.86.86 0 0 0-1.16.05.76.76 0 0 0 .04 1.1l2.9 3.65a2.49 2.49 0 0 0 1.79.73h1.93c1.95 0 2.47-1.45 2.47-3.2Z"/></svg>');
}

.nq-status-alert p {
  margin-top: 0;
  margin-bottom: 0.5em;
  overflow-wrap: anywhere;
}
.nq-status-alert p:last-child { margin-bottom: 0; }

/* QR never exceeds the card's inner width on narrow phones. */
.qr-wrap canvas { max-width: 100%; height: auto; }

/* ---- status-screen (Nimiq Hub, verbatim from `nq add status-screen` +
   loading-spinner), namespaced. Composed into the claim flow as the wow moment:
   a short loading beat resolves into the green success end screen. The card has
   no fixed height, so the screen is a self-sized block (not an absolute overlay)
   and the wrapper uses static flow instead of position:absolute. ---- */
.status-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 10px;
  width: 100%;
  margin: 8px 0 0;
  overflow: hidden;
}
.status-screen .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 320px;
  border-radius: 10px;
  padding: 0 16px;
  text-align: center;
}
.status-screen .icon-row,
.status-screen .status-row { width: 100%; text-align: center; }
.status-screen .success .icon-row { margin-top: 16px; }
.status-screen .spacer { padding-top: 24px; }
.status-screen .success .spacer { padding-top: 32px; }

/* Hexagon spinner (loading-spinner component), white on the gradient. */
.status-screen .loading-spinner { color: #fff; }
.status-screen .loading-spinner .big-hex {
  stroke-dashoffset: -40.5;
  animation: loading-spinner-big-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite;
}
.status-screen .loading-spinner .small-hex {
  stroke-dashoffset: 13;
  animation: loading-spinner-small-hex 4s cubic-bezier(0.76, 0.29, 0.29, 0.76) infinite;
}
@keyframes loading-spinner-small-hex {
  0% { stroke-dashoffset: 13 } 17% { stroke-dashoffset: 38.42 }
  33% { stroke-dashoffset: 63.84 } 50% { stroke-dashoffset: 89.25 }
  67% { stroke-dashoffset: 114.66 } 83% { stroke-dashoffset: 140.08 }
  100% { stroke-dashoffset: 165.5 }
}
@keyframes loading-spinner-big-hex {
  0% { stroke-dashoffset: -40.5 } 17% { stroke-dashoffset: -15.08 }
  33% { stroke-dashoffset: 10.33 } 50% { stroke-dashoffset: 35.75 }
  67% { stroke-dashoffset: 61.17 } 83% { stroke-dashoffset: 86.58 }
  100% { stroke-dashoffset: 112 }
}

/* Animated checkmark (checkmark.svg sizing via .nq-icon, 9rem upstream). */
.status-screen .icon-row .nq-icon { margin: auto; color: #fff; }
.status-screen .success .nq-icon { width: 72px; height: 72px; }
.status-screen .ss-title {
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  margin: 24px auto 0;
  max-width: 90%;
}
.status-screen .success .ss-title { font-size: 30px; }
.status-screen .loading .ss-title { font-size: 22px; }
.status-screen .ss-status {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.4;
  margin: 12px auto 0;
  max-width: 85%;
}
/* Honest sub-caption under the measured finality reading: states exactly what the
   number is (client-side, simulated network) so it is never mistaken for mainnet. */
.status-screen .ss-caption {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.4;
  margin: 4px auto 0;
  max-width: 85%;
}
/* Constant, no-lookup contrast line vs the bank baseline. */
.status-screen .ss-contrast { margin-top: 12px; }

/* The success icon-row slides up once on entry (upstream success-title-slide). */
.status-screen.exit-transition .success .icon-row { animation: success-title-slide 1s; }
@keyframes success-title-slide {
  from { transform: translateY(64px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .status-screen.exit-transition .success .icon-row,
  .status-screen .loading-spinner .big-hex,
  .status-screen .loading-spinner .small-hex { animation: none; }
}

/* See details affordance below the success screen. */
.ss-details-toggle {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #0582CA;
  cursor: pointer;
}
.ss-details-toggle:hover { color: #1F2348; }
/* Verifiable transfer trail (#62). Collapsible lifecycle inside "See details"; reuses .text-button + .quote-box / .info-line, so no new chrome. */
.transfer-trail { margin-top: 16px; }
.transfer-trail .text-button { margin-top: 0; }
/* ---- timer (circular countdown, verbatim from `nq add timer`), namespaced.
   The light-blue arc shrinks as the claim window runs down; it turns orange once
   >= 75% has elapsed. Vars (--nimiq-blue/-light-blue/-orange/-ease) come from
   the loaded nimiq-style.min.css. ---- */
.timer {
  width: 3.25rem;
  position: relative;
}
.timer::before {
  content: '';
  padding-top: 100%;
  display: block;
}
.timer svg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
}
.timer circle {
  stroke: var(--nimiq-blue);
  transition: stroke .3s var(--nimiq-ease), opacity .3s var(--nimiq-ease);
}
.timer .filler-circle { opacity: .2; }
.timer .time-circle { opacity: .3; }
.timer.time-shown .time-circle {
  stroke: var(--nimiq-light-blue);
  opacity: 1;
}
.timer.little-time-left .time-circle {
  stroke: var(--nimiq-orange);
  opacity: 1;
}
.timer .countdown {
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--nimiq-light-blue);
  transition: fill .3s var(--nimiq-ease);
}
.timer.little-time-left .countdown { fill: var(--nimiq-orange); }

/* ---- lifecycle panel (sender's post-fund live view) ---- */
.lifecycle {
  margin-top: 20px;
  border-radius: 8px;
  background: rgba(31, 35, 72, 0.04);
  padding: 18px 18px 16px;
}
.lifecycle-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lifecycle .timer { flex: none; width: 56px; }
.lifecycle-status { flex: 1 1 auto; min-width: 0; }
.lifecycle-status-title {
  font-size: 16px;
  font-weight: 700;
  color: #1F2348;
  margin: 0;
  line-height: 1.3;
}
.lifecycle-status-sub {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 35, 72, 0.55);
  margin: 4px 0 0;
}
.lifecycle.is-claimed { background: rgba(33, 188, 165, 0.1); }
.lifecycle.is-claimed .lifecycle-status-title { color: #21BCA5; }
.lifecycle.is-refunded { background: rgba(31, 35, 72, 0.05); }
.lifecycle-norug {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 35, 72, 0.55);
  margin: 14px 0 0;
}

/* ---- cancellation rights + cancel affordance ----
   Honest framing: pre-fund cancel is instant (nothing locked); post-fund cancel
   means the full amount returns automatically by the deadline with no fee. We
   never claim an instant clawback of locked funds. */
.text-button {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #0582CA;
  cursor: pointer;
}
.text-button:hover { color: #1F2348; }
.lifecycle .text-button { margin-top: 14px; }
.cancel-detail { margin-top: 14px; }
.disclosure-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.disclosure-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 35, 72, 0.6);
}
.disclosure-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0582CA;
}

/* ---- quote rate lock ----
   When a quote is shown it is held for a fixed window. A small nq timer (the
   verbatim G5 arc) counts the window down; once it expires the quote is marked
   stale and funding is gated behind a refresh. Honest framing: the demo fee
   model is deterministic so a refreshed quote is identical, but the held window
   is the seam where live FX protection would sit on a real chain. */
.quote-lock {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(5, 130, 202, 0.07);
}
.quote-lock .timer { flex: none; width: 44px; }
.quote-lock-text { flex: 1 1 auto; min-width: 0; }
.quote-lock-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1F2348;
  line-height: 1.3;
}
.quote-lock-sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(31, 35, 72, 0.55);
}
.quote-lock.is-stale { background: rgba(252, 135, 2, 0.08); }
.quote-box.is-stale { opacity: 0.55; }
/* A gated CTA reads as unavailable without inventing a new style. */
.nq-button:disabled,
.nq-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- family wallet (several people) ----
   One flow, several recipients. Each recipient becomes an independent secured
   transfer with its own claim link. The editor reuses the field-label + nq-input
   idiom; the link rows reuse the tx-row, copyable, qr-wrap and timer patterns. */
.mode-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(31, 35, 72, 0.05);
}
.mode-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgba(31, 35, 72, 0.6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mode-tab.is-active {
  background: #fff;
  color: #1F2348;
  box-shadow: inset 0 0 0 1.5px rgba(5, 130, 202, 0.25);
}

.family-recipient {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 35, 72, 0.07);
}
.family-recipient:first-child { border-top: none; padding-top: 0; }
.family-recipient-fields {
  display: flex;
  gap: 12px;
}
.family-field { flex: 1 1 0; min-width: 0; }
.family-field .field-label { margin-top: 0; }
.family-recipient .fr-remove { margin-top: 8px; font-size: 13px; }

.family-links { margin-top: 8px; }
.family-link {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(31, 35, 72, 0.04);
}
.family-link:first-child { margin-top: 12px; }
.family-link-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.family-link-head .timer { flex: none; width: 36px; }
.family-link .qr-wrap { margin: 14px 0 10px; }
.family-link.is-claimed { outline: 1.5px solid rgba(33, 188, 165, 0.35); outline-offset: -1.5px; }
.family-link.is-claimed .tx-meta { color: #21BCA5; }
.family-link.is-refunded { opacity: 0.7; }

/* ---- recurring sends (payday autopilot) ----
   A saved repeat plus a reminder, stored on this device only. Plan rows reuse
   the tx-row idiom; the due prompt reuses the quote-box + status-alert + button
   patterns. Nothing here moves money on its own. */
.plan-row { align-items: center; }
.plan-row.is-due .tx-side .tx-meta { color: #1F2348; font-weight: 700; }
.plan-row + .rec-cancel-btn { margin-top: 4px; font-size: 13px; }
.plan-due {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(31, 35, 72, 0.04);
}
.plan-due:first-child { margin-top: 12px; }
.plan-due .quote-box { margin-top: 0; }
.plan-due .rec-skip-btn { margin-top: 10px; font-size: 13px; }

/* Demo reset — quiet secondary chrome under "Your transfers". A hairline divider
   separates it from the list so it never competes with the primary Send action.
   No new palette; reuses the navy tokens used elsewhere. */
.reset-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(31, 35, 72, 0.07);
}
.reset-row .nq-button-s { margin-top: 0; }
.reset-row .fine-print { margin-top: 8px; }
#reset-confirm:not(:empty) { margin-top: 16px; }

/* Narrow-phone hardening (Nimiq Pay runs on phones; 360-390px primary target).
   Trim card padding so content keeps comfortable margins and never overflows. */
@media (max-width: 400px) {
  body { padding: 20px 12px 40px; }
  .card { padding: 24px 20px; }
}
@media (max-width: 360px) {
  body { padding: 16px 10px 36px; }
  .card { padding: 20px 16px; }
  .title { font-size: 24px; }
  .hero-amount { font-size: 34px; }
  .status-screen .success .ss-title { font-size: 26px; }
  .status-screen .wrapper { min-height: 300px; }
  .mode-tab { font-size: 13px; padding: 10px 4px; }
  .family-recipient-fields { flex-direction: column; gap: 0; }
}