/* ============================================================
   Fly GACA — Library page (library.html)
   Load order: tokens.css -> base.css -> library.css
   ============================================================ */

/* --- Header + search --- */
.library-head {
  position: relative; overflow: hidden;
  padding-block: var(--space-10) var(--space-8);
  border-block-end: 1px solid var(--border);
}
.library-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 360px at 92% -10%, rgba(45,110,138,0.18), transparent 70%);
  pointer-events: none;
}
.library-head .container { position: relative; }
.library-head h1 { font-size: var(--fs-h1); margin-block: var(--space-3) var(--space-4); }
.library-head .lead { max-width: 54ch; }
.library-head .lead strong { color: var(--text); }

.search-box {
  position: relative; margin-block-start: var(--space-6);
  max-width: 640px;
}
.search-box .search-icon {
  position: absolute; inset-inline-start: 1.05rem; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--text-dim);
  pointer-events: none;
}
.search-box input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.2rem 0.95rem 3rem;
  color: var(--text); font-size: var(--fs-base);
}
.search-box input::placeholder { color: var(--text-dim); }
.search-box input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.search-box input:focus { border-color: var(--teal-bright); }

/* --- Library body --- */
.library-body { padding-block: var(--space-8) var(--space-12); }

/* Category filter chips */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block-end: var(--space-5);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 0.42rem 0.85rem;
  background: transparent;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-pill);
  color: var(--text-muted); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--teal-bright); color: var(--text); }
.filter-chip[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.filter-chip .count { opacity: 0.7; }

.results-meta {
  color: var(--text-dim); font-size: var(--fs-sm);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  margin-block-end: var(--space-5);
}

/* Document grid */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-4);
}

.doc-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.doc-card:hover {
  border-color: var(--teal-bright);
  background: var(--surface-raised);
  transform: translateY(-3px);
  color: var(--text);
}
.doc-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-block-end: var(--space-3);
}
.part-badge {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); letter-spacing: 0.06em;
  color: var(--accent-bright);
  background: rgba(45,110,138,0.18);
  border: 1px solid rgba(74,156,184,0.30);
  padding: 0.26rem 0.6rem; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.doc-cat {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); text-align: end;
}
.doc-card-title {
  font-size: 1.05rem; font-weight: var(--fw-bold);
  line-height: var(--lh-snug); letter-spacing: -0.01em;
  flex: 1 0 auto; margin-block-end: var(--space-4);
}
.doc-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.doc-pages { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-xs); }
.doc-view {
  color: var(--link); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.doc-card:hover .doc-view { color: var(--accent-bright); }

/* Empty state */
.empty-state {
  text-align: center; padding-block: var(--space-10);
  color: var(--text-muted);
}
.empty-state p { margin-block-end: var(--space-4); }

/* Footnote */
.library-note {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  color: var(--text-dim); font-size: var(--fs-sm);
  max-width: 70ch; line-height: var(--lh-snug);
}

/* --- Section tabs (Regulations / Aerodromes / Charts) --- */
.lib-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block-start: var(--space-6);
}
.lib-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  padding: 0.6rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-pill);
  color: var(--text-muted); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.lib-tab:hover { border-color: var(--teal-bright); color: var(--text); }
.lib-tab[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.lib-tab .tab-count {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 0.08rem 0.42rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10); color: inherit;
}
.lib-tab[aria-pressed="false"] .tab-count { background: var(--falcon-night); }

/* --- AIP "not for operational use" notice --- */
.aip-notice {
  background: rgba(200,160,74,0.07);
  border: 1px solid rgba(200,160,74,0.28);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-5);
  color: var(--text-muted); font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.aip-notice strong { color: var(--gold); }

/* --- ICAO badge variant --- */
.part-badge.icao { letter-spacing: 0.12em; }

/* --- Map call-to-action (aerodromes tab) --- */
.map-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-block-end: var(--space-5);
  padding: 0.6rem 1.05rem;
  background: var(--surface); border: 1px solid var(--border-bright);
  border-radius: var(--radius-pill);
  color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.map-cta:hover { border-color: var(--teal-bright); color: var(--accent-bright); }
.map-cta svg { width: 17px; height: 17px; color: var(--accent); }

/* --- Data load error --- */
.lib-load-error {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.lib-load-error strong { color: var(--text); }
.lib-load-error p { color: var(--text-muted); max-width: 56ch; margin-inline: auto; }
.lib-load-error p + p { margin-block-start: var(--space-3); }

/* --- Full-text search results --- */
.doc-grid.hits { grid-template-columns: 1fr; gap: var(--space-3); }
.search-hit {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.search-hit:hover {
  border-color: var(--teal-bright); background: var(--surface-raised); color: var(--text);
}
.hit-top { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-2); }
.hit-ref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-bright); }
.hit-heading { font-weight: var(--fw-bold); font-size: 1rem; margin-block-end: var(--space-2); }
.hit-snippet { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
mark {
  background: rgba(200,160,74,0.32); color: var(--text);
  border-radius: 2px; padding: 0 0.12em;
}

@media (max-width: 480px) {
  .doc-grid { grid-template-columns: 1fr; }
}