/* parser.tkulesza.eu
 *
 * Ported from the design canvas prototype. Two deliberate departures from it:
 *
 * 1. No webfonts. The prototype pulls Geist and JetBrains Mono from Google. A page where somebody
 *    uploads their bank statement has no business announcing that visit to a third-party CDN, so
 *    the type stack is local and the page makes zero external requests.
 * 2. Hover states live here as classes. The canvas runtime had a `style-hover` attribute; real CSS
 *    does not, and inline styles cannot express :hover.
 */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html, body { margin: 0; padding: 0; background: #030510; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color: #F8FAFC;
}
* { box-sizing: border-box; }
a { color: #67E8F9; text-decoration: none; }
a:hover { color: #A5F3FC; }
::selection { background: #312E81; color: #F8FAFC; }
input, button, select { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #22D3EE; outline-offset: 3px; border-radius: 6px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050816; }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 8px; border: 2px solid #050816; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-spin-rev { to { transform: rotate(-360deg); } }
@keyframes om-beam {
  0% { transform: translateY(-6px); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(150px); opacity: 0; }
}
@keyframes om-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes om-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes om-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes om-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes om-emit {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}
@keyframes om-pulse-out {
  0% { transform: scale(.2); opacity: .55; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- hover states, previously the canvas `style-hover` attribute --- */

.btn-ghost { transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn-ghost:hover { color: #F8FAFC; border-color: rgba(34, 211, 238, 0.45); }

.btn-cta { transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn-cta:hover { background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.5); color: #F8FAFC; }

.btn-remove { transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn-remove:hover { color: #FCA5A5; border-color: rgba(239, 68, 68, 0.45); }

.btn-primary {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(99, 102, 241, 0.44); }
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-indigo { transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn-indigo:hover { background: rgba(99, 102, 241, 0.3); }

.btn-mono { transition: all 200ms ease; }
.btn-mono:hover { border-color: rgba(34, 211, 238, 0.5); }

.tx-row { transition: background 150ms ease; }
.tx-row:hover { background: rgba(99, 102, 241, 0.06); }

/* The drop zone reacts to pointer as well as to drag. */
.drop-zone { transition: all 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.drop-zone:hover { border-color: rgba(34, 211, 238, 0.45); }

/* Screen-reader-only, for labels the design carries visually but not as text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .grid-chart { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Nazwa w nagłówku to pełna domena, a nie siedmioliterowe słowo, więc na wąskim ekranie
   nawigacja przestaje się mieścić. Linki chowamy, przycisk zostaje - to jedyny element
   nawigacji, który cokolwiek robi, reszta to skróty do sekcji tej samej strony. */
@media (max-width: 680px) {
  nav[aria-label="Primary"] a { display: none; }
}