/* Lectano — warstwa komponentów.
   Wymaga wcześniejszego lectano-tokens.css. */

/* === Przycisk główny — wypukła pomarańczowa plama, BIAŁA etykieta === */
.lt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 38px; padding: 0 18px; border-radius: var(--lt-r-md);
  font: 700 13.5px/1 var(--lt-font); color: var(--lt-white);
  border: var(--lt-primary-border); background: var(--lt-grad-primary);
  box-shadow: var(--lt-primary-glow);
  cursor: pointer; white-space: nowrap;
}
.lt-btn--lg { height: 46px; padding: 0 26px; font-size: 15px; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 18px -10px rgba(168,76,0,.75); }
.lt-btn:hover { background: linear-gradient(180deg, #FF9433 0%, #E56800 100%); }
.lt-btn:active { background: linear-gradient(180deg, #E06600 0%, #C25700 100%);
  box-shadow: inset 0 2px 4px rgba(120,54,0,.4); }

/* === Przycisk drugorzędny — obwódka, bez wypełnienia === */
.lt-btn-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--lt-r-md);
  font: 700 13px/1 var(--lt-font); color: var(--lt-ink);
  border: 1.5px solid var(--lt-ink); background: transparent; cursor: pointer;
}
.lt-btn-2:hover { background: var(--lt-surface); }

/* === Przycisk ikonowy === */
.lt-btn-icon {
  width: 40px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--lt-r-md); border: 1px solid var(--lt-border);
  background: var(--lt-white); color: var(--lt-grey); cursor: pointer;
}
.lt-btn-icon:hover { background: var(--lt-surface); color: var(--lt-ink); }

/* === Karta — papierowy gradient, hairline, miękki cień === */
.lt-card {
  border-radius: var(--lt-r-lg); border: 1px solid rgba(26,26,26,.1);
  background: var(--lt-grad-paper); box-shadow: var(--lt-elev-card);
}
.lt-window {
  border-radius: var(--lt-r-xl); overflow: hidden; border: 1px solid rgba(26,26,26,.1);
  background: var(--lt-white); box-shadow: var(--lt-elev-window);
}
.lt-window__head { padding: 14px 22px; border-bottom: 1px solid var(--lt-line-warm);
  background: var(--lt-grad-head); }
.lt-window__foot { padding: 9px 18px; border-top: 1px solid var(--lt-line-warm);
  background: var(--lt-grad-foot); }

/* === Panel wyróżniony (brzoskwinia) — tekst zawsze atramentowy === */
.lt-panel {
  border-radius: var(--lt-r-lg); border: 1px solid rgba(255,122,0,.3);
  background: var(--lt-grad-peach); color: var(--lt-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 26px -18px rgba(255,122,0,.45);
}
.lt-dropzone { border-radius: var(--lt-r-lg); border: 1px dashed rgba(255,122,0,.45);
  background: linear-gradient(180deg, #FFF6EE 0%, #FFEEDF 100%); }

/* === Pastylka narzędzi — WKLĘSŁA, odwrotnie niż przyciski === */
.lt-pill {
  display: flex; align-items: center; gap: 3px; padding: 3px;
  border-radius: 10px; background: var(--lt-white);
  border: 1px solid #E7E2DC; box-shadow: var(--lt-inset-pill);
}
.lt-pill__opt {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px;
  border-radius: 7px; font: 400 13.5px/1 var(--lt-font); color: var(--lt-grey);
  cursor: pointer; white-space: nowrap;
}
.lt-pill__opt:hover { background: var(--lt-surface); color: var(--lt-ink); }
/* Aktywne w pasku narzędzi — czarna plama */
.lt-pill__opt[aria-pressed="true"], .lt-pill__opt.is-active {
  font-weight: 700; color: var(--lt-white); background: var(--lt-grad-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* Aktywne w przełączniku trybu — pomarańczowa plama */
.lt-pill--mode .lt-pill__opt.is-active {
  color: var(--lt-white); border: var(--lt-primary-border);
  background: var(--lt-grad-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* === Plakietka i tag === */
.lt-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border-radius: var(--lt-r-sm); font: 700 10px/1 var(--lt-font);
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--lt-surface); border: 1px solid var(--lt-border); color: var(--lt-grey);
}
.lt-badge--accent { background: var(--lt-grad-peach);
  border-color: rgba(255,122,0,.3); color: var(--lt-ink); }
.lt-tag { padding: 4px 10px; border-radius: var(--lt-r-sm);
  font: 700 11.5px/1.3 var(--lt-font); background: var(--lt-grad-peach);
  border: 1px solid rgba(255,122,0,.3); color: var(--lt-ink); }
.lt-tag--add { font-weight: 400; background: none;
  border: 1px dashed var(--lt-border); color: var(--lt-grey); }

/* === Pasek postępu === */
.lt-progress { height: 5px; border-radius: 999px; background: var(--lt-line-warm);
  position: relative; overflow: hidden; }
.lt-progress > span { position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--lt-orange), var(--lt-orange-deep)); }

/* === Zaznaczony fragment w tekście === */
.lt-mark { background: var(--lt-grad-peach); border-radius: 3px; padding: 2px 4px;
  font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,122,0,.3); }

/* === Karteczka na tablicy === */
.lt-note {
  display: flex; flex-direction: column; gap: 9px; padding: 16px 17px;
  border-radius: var(--lt-r-note); box-shadow: var(--lt-elev-note); color: var(--lt-ink);
}
.lt-note__kicker { font: 700 10px/1 var(--lt-font); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(26,26,26,.55); }
.lt-note__src { font-size: 11.5px; color: rgba(26,26,26,.6); }
.lt-note--wazne     { background: linear-gradient(180deg, var(--lt-tag-wazne-1),    var(--lt-tag-wazne-2)); }
.lt-note--sprawdz   { background: linear-gradient(180deg, var(--lt-tag-sprawdz-1),  var(--lt-tag-sprawdz-2)); }
.lt-note--przyklad  { background: linear-gradient(180deg, var(--lt-tag-przyklad-1), var(--lt-tag-przyklad-2)); }
.lt-note--powtorka  { background: linear-gradient(180deg, var(--lt-tag-powtorka-1), var(--lt-tag-powtorka-2)); }

/* === Pasek zaznaczenia nad tekstem — pływający, wypukły === */
.lt-selbar {
  display: flex; align-items: center; gap: 3px; padding: 7px 9px;
  border-radius: var(--lt-r-lg); border: 1px solid rgba(26,26,26,.1);
  background: var(--lt-grad-paper); box-shadow: var(--lt-elev-float);
}
.lt-selbar__swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(26,26,26,.18); }
.lt-selbar__btn { width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--lt-r-md); color: var(--lt-ink); cursor: pointer; }
.lt-selbar__btn:hover { background: var(--lt-surface); }
.lt-selbar__btn.is-active { color: var(--lt-white); border: var(--lt-primary-border);
  background: var(--lt-grad-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.lt-selbar__sep { width: 1px; align-self: stretch; background: #E7E2DC; margin: 2px 7px; }
.lt-selbar__label { font: 700 12.5px/1 var(--lt-font); color: var(--lt-ink); padding-left: 6px; }

/* === Tło tablicy === */
.lt-board { background-color: #FBF9F6;
  background-image: radial-gradient(circle, #E3DED7 1.1px, transparent 1.1px);
  background-size: 22px 22px; }

@media (pointer: coarse) {
  .lt-pill__opt, .lt-selbar__btn, .lt-btn-icon { min-height: 44px; min-width: 44px; }
}