/* ── toast / tooltip / pomoc ── */
/* TOAST — na SRODKU u dolu (Stan 26.08), wiec ramka jest DOOKOLA, nie z lewej:
   pasek z boku ma sens przy komunikacie dosunietym do krawedzi ekranu, a nie przy takim,
   ktory wisi na srodku. Kolor ramki niesie znaczenie: zielony = zrobione, czerwony = odmowa. */
/* SKALA (Stan 26.08): zielony = praca poszla do przodu, szary = informacja, bursztyn = udalo sie,
   ale uwaga, czerwony = odmowa. DOMYSLNY jest SZARY — dzieki temu czerwien zostaje mocnym
   sygnalem i nie zuzywa sie na „juz w planie" czy podpowiedzi klawiszowe. */
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:#080908; border:1.5px solid rgba(255,255,255,.18); border-radius:12px;
  padding:11px 16px; z-index:60; font-size:12.5px; line-height:1.35;
  box-shadow:0 10px 34px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5);
  max-width:min(560px, 86vw); text-align:left; animation:toast-pop .16s ease-out; }
/* praca poszla do przodu: dodano, przeniesiono, przywrocono do planu */
#toast.ok { border-color:rgba(34,163,78,.85);
  box-shadow:0 10px 34px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(34,163,78,.20); }
/* udalo sie, ale jest o czym pamietac: kolejka poza horyzont, dodane bez surowca */
#toast.warn { border-color:rgba(250,178,25,.85);
  box-shadow:0 10px 34px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(250,178,25,.20); }
/* odmowa — NIC sie nie stalo */
#toast.err { border-color:rgba(208,59,59,.9);
  box-shadow:0 10px 34px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(208,59,59,.22); }
.toast-msg { color:var(--ink2); }
/* druga linia = instrukcja, co zrobic dalej: wytluszczona, z ikona „przytrzymaj" i klawiszem */
/* UWAGA: `gap` dotyczy KAZDEGO elementu flex, a goly tekst obok <span> tworzy wlasne
   anonimowe elementy — dlatego tresc podpowiedzi musi byc opakowana w JEDEN <span>,
   inaczej odstep wskakuje tez przed przecinek. */
.toast-hint { display:flex; align-items:center; gap:7px; margin-top:8px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.10); color:var(--ink); font-weight:800; }
.toast-hint .ico { width:15px; height:15px; flex:none; color:var(--warn); }
.toast-hint .kbd { margin:0 1px; color:var(--ink); border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.07); font-size:10.5px; padding:2px 6px; }
@keyframes toast-pop { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #toast { animation:none; } }

#tooltip { position:fixed; z-index:95; background:#000; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-size:12px; pointer-events:none; max-width:360px; box-shadow:0 8px 24px rgba(0,0,0,.6); }
#tooltip div { padding:1px 0; color:var(--ink2); }
#tooltip div:first-child { color:var(--ink); font-weight:700; }
.modal-scrim { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; display:flex;
  align-items:center; justify-content:center; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px;
  width:560px; max-width:92vw; box-shadow:0 16px 60px rgba(0,0,0,.6); }
.modal h3 { font-size:15px; margin-bottom:10px; }
.modal .sub { color:var(--muted); font-size:11.5px; margin:-6px 0 10px; }
.shortcut-row { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px;
  font-size:12px; color:var(--ink2); padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.shortcut-keys { display:flex; gap:3px; }
.shortcut-keys .kbd { margin:0; font-size:10px; }
.modal h4 { font-size:11px; letter-spacing:.07em; color:var(--muted); margin:12px 0 2px; }
/* JEDNO zdecydowane szarpniecie, nie dwa przebiegi (Stan 26.08: ma brzmiec jak „NIE", nie
   „nie-nie"). Mocniejszy wychyl, krotszy czas i wygaszenie do zera zamiast rownej sinusoidy. */
@keyframes shake {
  0%   { transform:translateX(0); }
  22%  { transform:translateX(-4px); }
  55%  { transform:translateX(3px); }
  80%  { transform:translateX(-1px); }
  100% { transform:translateX(0); }
}
.shake { animation:shake .18s cubic-bezier(.36,.07,.19,.97) 1; }
@media (prefers-reduced-motion: reduce) {
  .block.flash, .shake { animation:none; }
  .block.appear, .chg.appear { animation:none; opacity:1; transform:none; }
}

/* ── okienko długości blokady (⇧B oraz D na blokadzie) ── */
.blkmodal { min-width:330px; max-width:380px; }
.blkrow { display:flex; align-items:center; gap:8px; margin:4px 0 10px; }
.blkrow input { flex:1; background:var(--track); border:1px solid var(--border); border-radius:8px;
  color:var(--ink); font:inherit; font-size:20px; font-weight:800; padding:8px 10px;
  font-variant-numeric:tabular-nums; }
.blkrow input:focus { outline:none; border-color:var(--accent); }
.blkunit { color:var(--muted); font-size:12px; font-weight:700; }
.blkquick { display:flex; flex-wrap:wrap; gap:6px; }
.blkq { background:var(--track); border:1px solid var(--border); border-radius:7px; color:var(--ink2);
  font-size:11px; font-weight:700; padding:4px 9px; }
.blkq:hover { border-color:var(--accent); color:var(--ink); }
.blkhint { color:var(--muted); font-size:11px; margin-top:12px; }