/* ============================================================
 * Titaness composites — cards, panels, page shell, top nav
 *
 * Sits on top of tokens.css + primitives.css in the cascade. Provides
 * the layout-level visual language: how the chassis frames the page,
 * how containers nest, how the top nav looks.
 *
 * Cards and panels follow the strict source-side rule:
 *   - .card is a TOP-LEVEL container (border + radius + optional
 *     glass + optional hover-lift).
 *   - .panel is NESTED INSIDE a card (input shells, stat tiles,
 *     <thead> rows, ghost button fills, figure-title strips).
 *     Never appears as a top-level surface.
 * ============================================================ */


/* ============================================================
 * Page shell — content width container
 * ============================================================ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

main {
  padding: 32px 24px 64px;
  min-height: calc(100vh - 56px);
}

/* When main is inside a container-y page, use this combo */
main.container {
  padding: 32px 0 64px;
}


/* ============================================================
 * Top nav — chassis bar
 *
 * Sticky top bar with the brand + nav links. Uses bg-card with a
 * subtle border-bottom so it sits above the mesh background.
 * ============================================================ */

nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 56px;
  background: rgba(17, 36, 54, 0.85);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}

/* Top-left of the nav: just the Theia G30 mark.  The previous
   `nav::before` Titaness pseudo-element and the .brand-wordmark span
   were dropped — the icon is the brand mark and a "Titaness" word
   next to it was redundant.  Accessible name is on the anchor's
   aria-label. */
.brand-link {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  text-decoration: none;
}
.brand-link:hover {
  background: transparent;
}

/* User-email span — appears when authenticated. Push it to the right. */
nav > span {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

nav a {
  color: var(--body);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
nav a:hover {
  background: var(--bg-panel);
  color: var(--teal);
}

/* The logout form is inlined into the nav. Trim its button's chrome. */
nav form button {
  padding: 6px 12px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--body);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
nav form button:hover {
  background: var(--bg-panel);
  color: var(--danger);
  transform: none;  /* override .btn:hover lift */
}


/* ============================================================
 * Cards
 *
 * Primary content container. Always at a "top level" within main.
 * Optionally combine with .glass and/or .hover-lift (defined in
 * tokens.css).
 * ============================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 16px;
}

.card-sm {
  padding: 12px 16px;
}

.card-lg {
  padding: 28px 32px;
}

.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: -4px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.card-header h1,
.card-header h2,
.card-header h3 {
  margin: 0;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}


/* ============================================================
 * Panels
 *
 * Secondary container. NESTED INSIDE a card. Used for input field
 * wrappers, stat tiles, <thead> rows, figure-title strips, ghost
 * button fills. Never a top-level surface.
 * ============================================================ */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}

.panel-sm {
  padding: 8px 12px;
}


/* ============================================================
 * Page header — h1 + supporting text + optional actions
 *
 * Sits at the top of main, above the first card. Use for landing,
 * run-list, dataset-detail page intros.
 * ============================================================ */

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.page-header h1 {
  margin: 0;
  font-size: 24px;
}
.page-header .subtitle {
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 0;
}
.page-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ============================================================
 * Banner — full-width alert above content
 *
 * Used by dataset_detail.html for the curation banner. Provides
 * variants matching the message types.
 * ============================================================ */

.banner {
  padding: 14px 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  margin: 0 0 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.banner-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
/* min-width: 0 lets this flex child shrink below its content's intrinsic
   width; without it a long unbreakable child (status-detail logs, S3 keys)
   forces the banner wider than the page. */
.banner-body { flex: 1; min-width: 0; }
.banner-body p { margin: 0; }
.banner-body p + p { margin-top: 6px; }
.banner-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.banner-warning {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.30);
}
.banner-warning .banner-icon { color: var(--warning); }

.banner-info {
  background: rgba(96, 165, 250, 0.06);
  border-color: rgba(96, 165, 250, 0.30);
}
.banner-info .banner-icon { color: var(--info); }

.banner-danger {
  background: rgba(248, 113, 113, 0.06);
  border-color: rgba(248, 113, 113, 0.30);
}
.banner-danger .banner-icon { color: var(--danger); }

.banner-success {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.30);
}
.banner-success .banner-icon { color: var(--success); }


/* ============================================================
 * Auth-page surface — narrow, centred card for login / signup /
 * password reset. No mesh-bg (chassis skips it pre-login), so the
 * card sits on the plain bg-primary.
 * ============================================================ */

.auth-card {
  max-width: 420px;
  margin: 80px auto;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auth-card h1 {
  text-align: center;
  margin: 0 0 20px;
}
.auth-card p {
  font-size: 13px;
}
.auth-card form button[type="submit"] {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.auth-card .secondary {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}


/* ============================================================
 * List + grid utilities
 * ============================================================ */

.cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stack-lg { gap: 16px; }
.stack-sm { gap: 4px; }

.muted { color: var(--muted); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }