/* ============================================================================
   CTA PANEL — single source of truth.
   Canonical CSS for the sticky document-detail side panel (.cta-panel + the
   4 status variants public/login/controlled/unavailable + button stack + note).
   Self-contained on the token model (--cta-bg light default + dark revalue,
   rules in @layer components). Shared by comp-cta-panel.html and any future
   consumer. Import AFTER colors_and_type.css + _buttons.css.
   ============================================================================ */

/* CTA-panel tokens — dark is a co-located token revalue (notes/architecture.md).
   Buttons now come from the shared _buttons.css component (the old local .btn
   copy was deleted), so the panel gets real hover/pressed/focus/disabled + dark
   button states. cta-panel overrides only .btn (which is layered), so its rules
   are wrapped in @layer components. */
@layer tokens { :root { --cta-bg: #ffffff; } }
@layer theme  { [data-theme="dark"] { --cta-bg: var(--color-bg-subtle); } }

@layer components {

.cta-panel {
  background: var(--cta-bg);
  color: var(--color-fg-default);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.cta-panel__status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 13.5px; line-height: 1.4;
}
.cta-panel__status i { font-size: 18px; flex: none; }
.cta-panel__status strong { display: block; font-weight: 600; margin-bottom: 2px; }
.cta-panel__status small { font-size: 12.5px; opacity: 0.9; display: block; }
.cta-panel__status--public { background: var(--gov-color-success-50); color: var(--gov-color-success-700); }
.cta-panel__status--controlled { background: var(--gov-color-warning-50); color: var(--gov-color-warning-700); }
.cta-panel__status--unavailable { background: var(--gov-color-neutral-100); color: var(--gov-color-neutral-700); }
.cta-panel__status--login { background: var(--gov-color-info-50); color: var(--gov-color-info-700); }

.cta-panel__buttons { display: flex; flex-direction: column; gap: 8px; }
.cta-panel__buttons .btn { justify-content: center; }
.cta-panel__note { font-size: 12px; color: var(--color-fg-secondary); line-height: 1.5; padding-top: 12px; border-top: 1px solid var(--color-border-default); }

/* Favourite ★ row (shared .fav component + copy linking to „Moje knihovna").
   Extracted from the prototype's ui-kit.css (Jun 2026) — comp page + app
   consume the same rule. */
.cta-panel__fav { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-fg-secondary); }
.cta-panel__fav a { color: var(--gov-color-primary-500); }
.cta-panel__fav a:hover { color: var(--gov-color-primary-700); }

/* Buttons come from the shared _buttons.css component now — the local .btn copy
   (partial: no pressed/focus/disabled/dark) was removed. */

} /* end @layer components — cta-panel */