/*
 * Freekeek UI Foundation v1 — shared, opt-in components.
 * Legacy styling remains in app.css; Channels and Marketplace keep their
 * scoped experience sheets. Use fk-* for new/migrated views only.
 * Theme aliases reference existing app.css variables in explicit or auto mode.
 */
:root {
  --fk-text: var(--ink);
  --fk-text-secondary: var(--ink-soft);
  --fk-text-muted: var(--muted);
  --fk-canvas: var(--paper);
  --fk-surface: var(--surface);
  --fk-border: var(--hair);
  --fk-brand: var(--keek);
  --fk-brand-strong: var(--keek-deep);
  --fk-brand-tint: var(--keek-tint);
  --fk-success: var(--green);
  --fk-danger: var(--coral);
  --fk-radius-sm: 10px;
  --fk-radius-md: 14px;
  --fk-radius-lg: 20px;
  --fk-shadow-card: 0 3px 18px rgba(16, 45, 80, .045);
  --fk-space-1: 4px;
  --fk-space-2: 8px;
  --fk-space-3: 12px;
  --fk-space-4: 16px;
  --fk-space-5: 20px;
  --fk-space-6: 24px;
  --fk-on-brand: #fff;
  --fk-transition: 160ms ease;
}
html[data-theme="dark"] { --fk-on-brand: #14212e; --fk-shadow-card: 0 4px 22px rgba(0,0,0,.22); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { --fk-on-brand: #14212e; --fk-shadow-card: 0 4px 22px rgba(0,0,0,.22); }
}

/* Navigation and global page title — small, compatible refinements only. */
.fk-skip-link {
  position: fixed; z-index: 250; top: 8px; left: 8px;
  padding: 10px 14px; background: var(--fk-surface); color: var(--fk-text);
  border: 2px solid var(--fk-brand); border-radius: var(--fk-radius-sm);
  transform: translateY(-160%); transition: transform var(--fk-transition);
}
.fk-skip-link:focus { transform: translateY(0); }
.shell > .main { min-width: 0; }
.rail-nav-card { border-radius: var(--fk-radius-md); }
.rail-nav-card .nav-link { border-radius: var(--fk-radius-sm); }
.rail-nav-card .nav-link:focus-visible { outline-offset: -2px; }
.app-topbar-col-feed { gap: 12px; }
.app-topbar-title { flex: 0 1 auto; max-width: 100%; }
.app-topbar-title .fk-topbar-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head h1 { color: var(--fk-text); }
.page-head h1.fk-headline-in-topbar {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important;
  clip-path: inset(50%) !important; border: 0 !important;
}
.page-head.fk-page-head-only-title { margin: 0; min-height: 0; }

/* Layout / typography. */
.fk-container { min-width: 0; width: 100%; max-width: 1480px; margin-inline: auto; }
.fk-stack { display: grid; gap: var(--fk-space-4); min-width: 0; }
.fk-grid { display: grid; gap: var(--fk-space-3); min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fk-space-3); min-width: 0; }
.fk-section { min-width: 0; }
.fk-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--fk-brand); }
.fk-display { font-family: var(--display); font-size: clamp(29px, 3vw, 42px); font-weight: 800; letter-spacing: -.038em; line-height: 1.1; color: var(--fk-text); margin: 0; }
.fk-section-title { margin: 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 750; letter-spacing: -.025em; color: var(--fk-text); }
.fk-subtitle { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--fk-text-muted); }
.fk-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--fk-space-3); margin-block: 0 var(--fk-space-3); }

/* Surface patterns shared with hubs, without changing .chx or .mkx styles. */
.fk-panel, .fk-card {
  min-width: 0; background: var(--fk-surface); border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-md); box-shadow: var(--fk-shadow-card);
}
.fk-panel { padding: var(--fk-space-5); }
.fk-card { overflow: hidden; }
.fk-card__body { padding: var(--fk-space-4); }
.fk-card--interactive { transition: border-color var(--fk-transition), box-shadow var(--fk-transition), transform var(--fk-transition); }
.fk-card--interactive:hover { border-color: color-mix(in srgb, var(--fk-brand) 35%, var(--fk-border)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fk-divider { border: 0; border-top: 1px solid var(--fk-border); margin-block: var(--fk-space-4); }
.fk-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--fk-border); border-radius: 999px; padding: 4px 9px; color: var(--fk-text-muted); background: var(--fk-canvas); font-size: 11px; font-weight: 650; line-height: 1.35; }

/* Actions. Explicit fk-btn avoids side effects in current .btn components. */
.fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 15px; font: 700 13px/1.35 var(--body);
  cursor: pointer; border: 1px solid var(--fk-border); border-radius: var(--fk-radius-sm);
  background: var(--fk-surface); color: var(--fk-text); text-decoration: none;
  transition: background var(--fk-transition), border-color var(--fk-transition), transform var(--fk-transition);
}
.fk-btn svg { width: 16px; height: 16px; }
.fk-btn:hover { background: var(--fk-canvas); border-color: color-mix(in srgb, var(--fk-brand) 35%, var(--fk-border)); }
.fk-btn--primary { background: var(--fk-brand); color: var(--fk-on-brand); border-color: var(--fk-brand); }
.fk-btn--primary:hover { background: var(--fk-brand-strong); color: var(--fk-on-brand); border-color: var(--fk-brand-strong); }
.fk-btn--quiet { background: transparent; color: var(--fk-brand); border-color: transparent; }
.fk-btn--sm { padding: 6px 11px; min-height: 34px; font-size: 12px; }
.fk-btn:disabled, .fk-btn[aria-disabled="true"] { opacity: .52; cursor: not-allowed; transform: none; }

/* Reusable filters and inputs — no global form reset. */
.fk-filter-panel { padding: var(--fk-space-4); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-md); background: var(--fk-surface); }
.fk-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--fk-space-3); }
.fk-field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; font: inherit; }
.fk-field__label { font-size: 12px; font-weight: 750; color: var(--fk-text-secondary); }
.fk-input, .fk-select, .fk-textarea {
  width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px;
  border: 1px solid var(--fk-border); border-radius: var(--fk-radius-sm);
  background: var(--fk-surface); color: var(--fk-text); font: 500 13px/1.45 var(--body);
  transition: border-color var(--fk-transition), box-shadow var(--fk-transition);
}
.fk-input::placeholder, .fk-textarea::placeholder { color: var(--fk-text-muted); opacity: .85; }
.fk-input:focus, .fk-select:focus, .fk-textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--fk-brand) 28%, transparent);
  outline-offset: 0; border-color: var(--fk-brand);
}
.fk-textarea { min-height: 110px; resize: vertical; }
.fk-input[aria-invalid="true"], .fk-select[aria-invalid="true"], .fk-textarea[aria-invalid="true"] { border-color: var(--fk-danger); }
.fk-field__hint { font-size: 11px; color: var(--fk-text-muted); }
.fk-field__error { font-size: 11px; color: var(--fk-danger); }
.fk-filter-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.fk-tabs { display: flex; overflow-x: auto; gap: 4px; padding: 5px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius-md); background: var(--fk-surface); scrollbar-width: thin; }
.fk-tabs > a, .fk-tabs > button { flex: 0 0 auto; border: 0; border-radius: var(--fk-radius-sm); padding: 8px 11px; background: transparent; color: var(--fk-text-muted); font: 700 12px/1.4 var(--body); cursor: pointer; }
.fk-tabs > .active, .fk-tabs > [aria-current="page"], .fk-tabs > [aria-selected="true"] { background: var(--fk-brand-tint); color: var(--fk-brand-strong); }

/* Empty, feedback and loading states. */
.fk-empty { min-width: 0; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 26px; text-align: center; border: 1px dashed var(--fk-border); border-radius: var(--fk-radius-md); background: var(--fk-surface); }
.fk-empty__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--fk-radius-md); background: var(--fk-brand-tint); color: var(--fk-brand); }
.fk-empty__icon svg { width: 23px; height: 23px; }
.fk-empty h2, .fk-empty h3 { margin: 0; color: var(--fk-text); font-size: 16px; }
.fk-empty p { color: var(--fk-text-muted); max-width: 55ch; font-size: 13px; margin: 0; }
.fk-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.fk-status { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius-sm); background: var(--fk-surface); color: var(--fk-text); font-size: 13px; }
.fk-status--info { background: var(--fk-brand-tint); border-color: color-mix(in srgb, var(--fk-brand) 22%, var(--fk-border)); }
.fk-status--success { background: var(--green-tint); border-color: color-mix(in srgb, var(--fk-success) 22%, var(--fk-border)); }
.fk-status--error { border-color: color-mix(in srgb, var(--fk-danger) 30%, var(--fk-border)); color: var(--fk-danger); }
.fk-skeleton { min-height: 16px; border-radius: 8px; background: linear-gradient(100deg, var(--fk-canvas) 30%, color-mix(in srgb, var(--fk-border) 45%, var(--fk-surface)) 50%, var(--fk-canvas) 70%); background-size: 200% 100%; animation: fk-skeleton-pulse 1.6s linear infinite; }
@keyframes fk-skeleton-pulse { to { background-position-x: -200%; } }

@media (max-width: 1024px) {
  .fk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .fk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-filter-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .fk-grid, .fk-grid--3, .fk-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .fk-toolbar, .fk-section-head { align-items: stretch; }
  .fk-panel { padding: var(--fk-space-4); }
  .fk-filter-actions { justify-content: stretch; }
  .fk-filter-actions > .fk-btn { flex: 1 1 auto; }
  .fk-btn { min-height: 44px; }
  .app-topbar-col-feed { min-width: 0; flex: 1 1 auto; }
  .app-topbar-title { min-width: 0; font-size: 14px; }
  .app-topbar-col-aside { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fk-skeleton { animation: none; }
  .fk-btn, .fk-card--interactive, .fk-skip-link { transition: none; }
  .fk-card--interactive:hover { transform: none; }
}