/* artB.pl — moduły interaktywne. Zachowują paletę i język wizualny istniejącej strony. */
:root {
  --artb-paper: #f2eadb;
  --artb-black: #101010;
  --artb-red: #e33a2e;
  --artb-blue: #174cff;
  --artb-acid: #d9ff3f;
  --artb-grey: #d7d0c3;
}

.form-error {
  border: 2px solid var(--artb-red);
  padding: .8rem 1rem;
  margin: 0 0 1rem;
  font-weight: 800;
}
.form-error:empty { display:none; }

[data-oscylator-form] [data-asset] {
  appearance:none;
  width:100%;
  min-height:48px;
  border:2px solid var(--artb-acid);
  background:var(--artb-black);
  color:var(--artb-acid);
  font:inherit;
  cursor:pointer;
  transition:background-color .12s ease, color .12s ease, transform .12s ease;
}
[data-oscylator-form] [data-asset]:hover { background:#202020; }
[data-oscylator-form] [data-asset][aria-pressed="true"],
[data-oscylator-form] [data-asset].is-active {
  background:var(--artb-acid);
  color:var(--artb-black);
  box-shadow:inset 0 0 0 3px var(--artb-black);
  transform:translate(2px,2px);
}
[data-oscylator-form] [data-asset]:focus-visible {
  outline:4px solid var(--artb-blue);
  outline-offset:3px;
}

.oscylator-result { scroll-margin-top: 90px; margin-top: 4rem; color:var(--artb-black); }
.oscylator-result.is-entering { animation: artb-reveal .45s ease both; }
@keyframes artb-reveal { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }

.osc-result-head { position:relative; border:3px solid var(--artb-black); padding:clamp(1.2rem,3vw,3rem); background:var(--artb-paper); color:var(--artb-black); min-height:0; }
.osc-result-head h2 { font-size:clamp(2.8rem,8vw,7rem); line-height:.85; margin:.4rem 0 1rem; text-transform:uppercase; }
.osc-slogan { font-size:clamp(1.1rem,2vw,1.6rem); max-width:60ch; }
.osc-stamp { display:inline-block; border:4px double var(--artb-red); color:var(--artb-red); padding:.55rem .8rem; font-weight:950; transform:rotate(-2deg); margin-top:1rem; }

.osc-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.osc-plan { border:3px solid var(--artb-black); padding:clamp(1rem,2.5vw,2rem); min-width:0; }
.osc-plan-1991 { background:var(--artb-paper); color:var(--artb-black); }
.osc-plan-2026 { background:var(--artb-blue); color:white; }
.osc-plan header { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid currentColor; padding-bottom:.7rem; }
.osc-plan header span { font-weight:900; letter-spacing:.1em; }
.osc-plan header strong { font-size:clamp(2.6rem,6vw,5rem); line-height:.8; }
.osc-status { font-family:monospace; font-weight:800; }
.osc-plan ol { list-style:none; padding:0; display:grid; gap:1rem; }
.osc-plan li { display:grid; grid-template-columns:2.6rem 1fr; gap:.4rem; line-height:1.35; }
.result-index { font-family:monospace; font-weight:900; }
.osc-disclaimer { font-size:.82rem; opacity:.78; border-top:1px solid currentColor; padding-top:1rem; }
.osc-first-move { background:var(--artb-acid); color:var(--artb-black); padding:1rem; margin-top:1.5rem; }
.osc-first-move span { display:block; font-size:.75rem; font-weight:900; letter-spacing:.1em; }
.osc-first-move strong { display:block; margin-top:.4rem; }

.osc-analysis { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.osc-analysis article { border:2px solid var(--artb-black); padding:1rem; background:var(--artb-paper); color:var(--artb-black); }
.osc-analysis article > span, .quiz-advice span { display:block; font-size:.72rem; font-weight:950; letter-spacing:.12em; margin-bottom:.7rem; }
.osc-analysis ul { padding-left:1.2rem; }
.osc-analysis small { display:block; margin-top:.8rem; opacity:.75; }

.osc-notes { border:2px dashed var(--artb-paper); color:var(--artb-paper); padding:1rem; margin-top:1rem; font-family:monospace; }
.osc-notes p { margin:.35rem 0; }
.osc-score { margin:1rem 0; padding:1rem; background:var(--artb-black); color:white; }
.osc-score-labels { display:flex; justify-content:space-between; gap:1rem; font-weight:900; font-size:.8rem; }
.osc-score-track { height:18px; background:white; margin-top:.7rem; }
.osc-score-track span { display:block; height:100%; background:var(--artb-red); margin-left:auto; }
.osc-actions, .quiz-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.osc-actions button, .quiz-actions button, .quiz-actions a {
  appearance:none; border:2px solid var(--artb-black); background:var(--artb-acid); color:var(--artb-black);
  padding:.9rem 1rem; font:inherit; font-weight:950; text-decoration:none; cursor:pointer;
  box-shadow:4px 4px 0 var(--artb-black);
}
.osc-actions button:focus-visible, .quiz-actions button:focus-visible, .quiz-actions a:focus-visible,
.quiz-answers button:focus-visible { outline:4px solid var(--artb-blue); outline-offset:3px; }
.osc-meta { font-family:monospace; font-size:.78rem; color:var(--artb-paper); opacity:.82; margin-top:1.2rem; }

/* Symulator przelewu */
.transfer-mode-picker { display:grid; gap:.55rem; min-width:min(100%,440px); }
.transfer-mode-hint { color:var(--artb-acid); font:900 .78rem/1.2 monospace; letter-spacing:.12em; }
.transfer-tabs { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.transfer-tabs [data-transfer-mode] {
  appearance:none; min-height:82px; border:3px solid var(--artb-grey); background:var(--artb-black); color:#fff;
  padding:.7rem 1rem; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  box-shadow:5px 5px 0 var(--artb-grey); transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}
.transfer-tabs [data-transfer-mode] small { font:800 .66rem/1 monospace; letter-spacing:.08em; opacity:.8; }
.transfer-tabs [data-transfer-mode] strong { font:900 2rem/1 Anton,Impact,sans-serif; }
.transfer-tabs [data-transfer-mode]:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--artb-grey); }
.transfer-tabs [data-transfer-mode]:focus-visible { outline:4px solid var(--artb-acid); outline-offset:4px; }
.transfer-tabs [data-transfer-mode][aria-pressed="true"], .transfer-tabs [data-transfer-mode].is-active {
  background:var(--artb-acid); color:var(--artb-black); border-color:var(--artb-acid); box-shadow:6px 6px 0 var(--artb-blue);
}
.transfer-tabs [data-transfer-mode]:disabled { cursor:wait; opacity:.78; }
.transfer-terminal { font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.45; }
.transfer-terminal > p { margin:.4rem 0; }
.transfer-timeline { list-style:none; margin:1.2rem 0; padding:0; display:grid; gap:.7rem; }
.transfer-timeline li { display:grid; grid-template-columns:2.6rem minmax(0,1fr); align-items:start; gap:.8rem; opacity:.48; font-family:monospace; }
.transfer-timeline li span { display:grid; place-items:center; min-height:2rem; background:var(--artb-paper); border:2px solid var(--artb-red); color:var(--artb-black)!important; }
.transfer-timeline li strong { padding-top:.25rem; line-height:1.35; overflow-wrap:anywhere; }
.transfer-timeline li.is-complete { opacity:1; }
.transfer-timeline li span { color:var(--artb-red); font-weight:900; }
[data-transfer-progress-wrap] { height:10px; background:var(--artb-grey); overflow:hidden; }
[data-transfer-progress] { display:block; height:100%; width:0; background:var(--artb-blue); transition:width .25s ease; }
[data-transfer-mode][aria-pressed="true"], [data-transfer-mode].is-active { background:var(--artb-blue); color:#fff; }
[data-transfer-replay] { appearance:none; border:3px solid var(--artb-black); background:var(--artb-acid); color:var(--artb-black); padding:1rem 1.25rem; font:900 1rem Inter,sans-serif; text-transform:uppercase; cursor:pointer; box-shadow:6px 6px 0 var(--artb-blue); margin-top:1rem; }
[data-transfer-replay]:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--artb-blue); }
[data-transfer-replay]:focus-visible { outline:4px solid #fff; outline-offset:4px; }
@media(max-width:640px){.transfer-tabs{grid-template-columns:1fr}.transfer-tabs [data-transfer-mode]{min-height:68px}.transfer-mode-picker{width:100%}}
[data-transfer-status] { min-height:2.5em; }

/* Quiz */
.quiz-progress-wrap { margin-bottom:1.5rem; }
.quiz-progress-meta { display:flex; justify-content:space-between; gap:1rem; font-family:monospace; font-weight:850; }
.quiz-progress { height:14px; background:var(--artb-grey); border:2px solid var(--artb-black); margin-top:.6rem; }
.quiz-progress > span { display:block; height:100%; width:0; background:var(--artb-red); transition:width .25s ease; }
.quiz-card { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); border:3px solid var(--artb-black); background:var(--artb-paper); }
.quiz-image { position:relative; min-height:460px; background:var(--artb-blue); overflow:hidden; border-right:3px solid var(--artb-black); }
.quiz-image img { width:100%; height:100%; object-fit:cover; display:block; }
.quiz-image > span { position:absolute; left:1rem; bottom:1rem; background:var(--artb-black); color:white; padding:.5rem .7rem; font-family:monospace; font-weight:850; }
.quiz-copy { padding:clamp(1.2rem,3vw,3rem); }
.quiz-copy h2 { font-size:clamp(1.6rem,3vw,3rem); line-height:1.03; margin:.5rem 0 1.5rem; }
.quiz-answers { display:grid; gap:.75rem; }
.quiz-answers button { display:grid; grid-template-columns:2.6rem 1fr; align-items:start; text-align:left; width:100%; border:2px solid var(--artb-black); background:white; color:var(--artb-black); padding:1rem; cursor:pointer; font:inherit; }
.quiz-answers button:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--artb-black); }
.quiz-answers button.is-selected { background:var(--artb-acid); }
.quiz-answers button > span { display:grid; place-items:center; width:2rem; height:2rem; background:var(--artb-black); color:white; font-weight:950; }
.quiz-answers button strong { line-height:1.3; }

.quiz-result { border:3px solid var(--artb-black); padding:clamp(1.3rem,4vw,4rem); background:var(--artb-paper); position:relative; }
.quiz-result h2 { font-size:clamp(3rem,9vw,8rem); line-height:.82; margin:.7rem 0 1rem; max-width:11ch; }
.quiz-result-stamp { display:inline-block; border:4px double var(--artb-red); color:var(--artb-red); padding:.6rem .8rem; font-weight:950; transform:rotate(-2deg); }
.quiz-points { display:flex; align-items:baseline; gap:.6rem; }
.quiz-points strong { font-size:5rem; line-height:1; }
.quiz-points span { font-family:monospace; font-weight:900; }
.quiz-result-lead { font-size:clamp(1.1rem,2vw,1.5rem); max-width:58ch; line-height:1.45; }
.quiz-advice { background:var(--artb-acid); border:2px solid var(--artb-black); padding:1rem; margin:1.4rem 0; }
.quiz-traits { display:grid; gap:.8rem; max-width:800px; margin:1.5rem 0; }
.quiz-trait > div:first-child { display:flex; justify-content:space-between; font-family:monospace; font-weight:850; }
.quiz-trait-bar { height:10px; background:var(--artb-grey); }
.quiz-trait-bar span { display:block; height:100%; background:var(--artb-blue); }
.quiz-legal { font-size:.8rem; opacity:.7; max-width:70ch; }

@media (max-width: 820px) {
  .osc-result-grid, .osc-analysis, .quiz-card { grid-template-columns:1fr; }
  .quiz-image { min-height:260px; border-right:0; border-bottom:3px solid var(--artb-black); }
  .quiz-progress-meta { font-size:.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}