/* landing.css — styles for the model library landing page (index.html).
 * Loaded after tokens.css + base.css. WS7 Stage F extracted these verbatim from
 * index.html's inline <style>; the tokens are now shared with the model runner. */

/* The landing page fills the viewport so the footer sits at the bottom on short
   pages (the runner leaves this off — it always fills via its flex workspace). */
body { min-height: 100vh; }

/* ---- Header ----------------------------------------------------------- */
.landing-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
/* .brand-mark (the Magnolia logo) is styled in base.css and shared with the runner. */
.brand-name { font-size: 15px; font-weight: 700; white-space: nowrap; }
.brand-name span { color: var(--muted); font-weight: 500; }
.header-controls { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.nav-link {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm);
}
.nav-link:hover { color: var(--fg); background: var(--hover); }
.nav-link.active { color: var(--fg); }
#auth-slot { display: flex; align-items: center; gap: var(--space-2); }
#auth-user { font-size: 13px; color: var(--muted); }

/* ---- Page frame (shared by landing + about) --------------------------- */
.page {
  flex: 1; max-width: 1400px; width: 100%; margin: 0 auto;
  padding: var(--space-5) var(--space-5) 64px;
}
/* The model-library landing lays out as a left nav column + the card grid.
   (The About page reuses .page as a plain centered block, so this is scoped.) */
.landing-page {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-5);
  align-items: start;
}
.landing-main { min-width: 0; }
.hero { text-align: center; margin: 24px 0 28px; }
.hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.hero p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* ---- Left navigation sidebar (filters + resources) -------------------- */
.landing-sidebar {
  position: sticky; top: 71px; align-self: start;
  display: flex; flex-direction: column; gap: var(--space-4);
  max-height: calc(100vh - 87px); overflow-y: auto; scrollbar-width: thin;
}
.side-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.side-panel-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

/* Search box + its meta row (count + clear), stacked in the nav column. */
.search-wrap { position: relative; width: 100%; }
.search-wrap .search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#search-input {
  width: 100%; height: 34px; padding: 0 10px 0 32px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none;
}
#search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.search-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.model-count { font: var(--font-mono); color: var(--muted); white-space: nowrap; }
#btn-clear-filters {
  font-size: 12px; font-weight: 600; padding: 5px 10px; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
}
#btn-clear-filters:hover { color: var(--fg); background: var(--hover); }
.filter-rows { display: flex; flex-direction: column; gap: var(--space-3); }
/* Label on its own line (flex-basis 100%), pills wrap in the row beneath it. */
.filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- Dataset templates panel ------------------------------------------ */
.template-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.template-link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--accent); text-decoration: none; padding: 5px 6px; border-radius: var(--radius-sm);
}
.template-link:hover { background: var(--hover); }
.template-link svg { flex: none; }
.templates-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.filter-row-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); flex-basis: 100%; margin-bottom: 2px;
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer; user-select: none;
}
.filter-pill:hover { color: var(--fg); border-color: var(--muted); }
.filter-pill.active { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--accent); }
.filter-pill .pill-icon { width: 13px; height: 13px; display: inline-flex; }
.filter-pill .pill-icon svg { width: 100%; height: 100%; }

/* ---- Card grid -------------------------------------------------------- */
#model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.model-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.model-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(0,0,0,.10); transform: translateY(-2px);
}
.model-card.card-hidden { display: none; }
.card-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--line);
}
.card-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm);
  border: 1px solid currentColor; display: flex; align-items: center; justify-content: center;
  padding: 5px; opacity: .9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.card-icon svg { width: 100%; height: 100%; }
.card-header-text { display: flex; flex-direction: column; gap: 2px; }
.card-category { font: var(--font-mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; font: var(--font-mono); font-size: 10px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-dot.pulse { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.25} }
.card-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.card-title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.card-publication {
  display: flex; gap: 8px; padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px;
}
.card-publication.none { color: var(--muted); font-style: italic; align-items: center; }
.pub-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-title { color: var(--fg); line-height: 1.4; }
.pub-meta { color: var(--muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px; }
.pub-authors { font-weight: 600; color: var(--fg); }
.pub-journal { font-style: italic; }
.pub-doi { font: var(--font-mono); font-size: 11px; color: var(--accent); text-decoration: none; word-break: break-all; }
.pub-doi:hover { text-decoration: underline; }
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line);
}
.card-version { font: var(--font-mono); font-size: 11px; color: var(--muted); }
.open-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-fg); text-decoration: none;
}
.open-btn:hover { filter: brightness(1.05); }
.open-btn.disabled { opacity: .45; pointer-events: none; background: transparent; color: var(--muted); border-color: var(--line); }

/* ---- Grid states ------------------------------------------------------ */
.grid-loading, .grid-error, .grid-empty {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  padding: 56px 16px; color: var(--muted); font: var(--font-mono);
}
.grid-error { color: var(--error); }

/* ---- Login dialog ----------------------------------------------------- */
dialog.login {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
  background: var(--surface); color: var(--fg); width: min(360px, 92vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
dialog.login::backdrop { background: rgba(0,0,0,.45); }
dialog.login form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
dialog.login h2 { margin: 0; font-size: 17px; }
dialog.login p.sub { margin: 0; color: var(--muted); font-size: 13px; }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
dialog.login input {
  width: 100%; padding: 8px 10px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.login-msg { margin: 0; color: var(--error); font-size: 13px; min-height: 1em; }
.login-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.login-actions .open-btn { border: 1px solid var(--accent); cursor: pointer; }

/* ---- Footer ----------------------------------------------------------- */
.page-footer {
  border-top: 1px solid var(--line); padding: 18px var(--space-5);
  text-align: center; font: var(--font-mono); color: var(--muted); line-height: 1.7;
}

/* Narrow viewports: the nav column stacks above the grid and stops being sticky,
   so the model cards get the full width. */
@media (max-width: 820px) {
  .landing-page { grid-template-columns: 1fr; gap: var(--space-4); }
  .landing-sidebar { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  .header-controls .nav-link { display: none; }
}

/* ---- About page ------------------------------------------------------- */
.about { max-width: 760px; margin: 0 auto; }
.about-hero { margin-top: 12px; }
.about-section { margin: 0 0 26px; }
.about-section h2 {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 8px; color: var(--fg);
}
.about-section p { margin: 0 0 10px; color: var(--fg); font-size: 15px; line-height: 1.75; }
.about-section p:last-child { margin-bottom: 0; }
.about-back { margin-top: 32px; font-size: 14px; }
.about-back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.about-back a:hover { text-decoration: underline; }