/**
 * Ariad shell — compact typography (landing, app, index, intelligence pages).
 * Linked after Inter; page-specific <style> may override for edge cases.
 */
:root {
  /* Base body text unified with the brand system (15px body, 13px small,
     12px caption). Internal pages share the same scale as the rest of the site. */
  --ariad-font-base: 15px;
  --ariad-font-sm: 13px;
  --ariad-font-xs: 12px;
  --ariad-font-lg: 15px;
  --ariad-font-title: 22px; /* matches the site-wide h1 (22px regular) */

  /* Nav / back / footer are pinned to the site-wide values and must NOT follow
     the body base (the global nav text is 22px regular on every page). */
  --ariad-site-nav: 22px;
  --ariad-site-back: var(--ariad-font-sm);
  --ariad-site-footer: 14px;      /* matches the global footer body/link size */
  --ariad-site-footer-link: 14px;
}

html.ariad-shell {
  font-size: var(--ariad-font-base);
}

body.ariad-shell {
  font-size: var(--ariad-font-base) !important;
  line-height: 1.42;
}

/* Keep layouts from spreading too wide on large screens. */
body.ariad-shell .page {
  /* Wide canvas, but always left aligned (no centering). */
  max-width: 2400px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Nav matches main site (global 22px regular); !important beats compact page <style> blocks */
body.ariad-shell .top-nav,
body.ariad-shell .top-nav a,
body.ariad-shell .nav-logo {
  font-size: var(--ariad-site-nav) !important;
}

/* Nav spacing matches the public pages; only the "Noetic" + "Ariad v0.1"
   pieces inside the logo sit close together (see .nav-logo-ariad). */

body.ariad-shell h1 {
  font-size: var(--ariad-font-title);
  font-weight: 400;
  line-height: 1.28;
  margin: 0 0 8px;
}

body.ariad-shell .hero-subtitle {
  font-size: var(--ariad-font-sm);
  line-height: 1.5;
}

body.ariad-shell .hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
}

body.ariad-shell .back-link {
  font-size: var(--ariad-site-back) !important;
}

body.ariad-shell .launch-btn {
  font-size: 18px; /* matches the site-wide button scale */
  padding: 10px 22px;
}

body.ariad-shell footer {
  font-size: var(--ariad-site-footer) !important;
}

/* ── Ariad rebrand: hero colour #2B1FFF ─────────────────────────────────
   Internal Ariad pages use blue as the primary/hero accent (the marketing
   site keeps Grit orange). Higher specificity than site-shell.css, so these
   win its !important rules. */
body.ariad-shell .button-primary,
body.ariad-shell .launch-btn,
body.ariad-shell .auth-button:not(.secondary),
body.ariad-shell .cta {
  background: #2b1fff !important;
}
body.ariad-shell .button-primary:hover,
body.ariad-shell .launch-btn:hover,
body.ariad-shell .auth-button:not(.secondary):hover {
  background: #2114cc !important;
}
body.ariad-shell .button-primary:disabled {
  color: #ffffff !important;
  opacity: 0.75;
}
body.ariad-shell .top-nav a:hover { color: #2114cc !important; }
body.ariad-shell .nav-logo-ariad { text-decoration-color: #2b1fff; }
body.ariad-shell ::selection { background: rgba(43, 31, 255, 0.18); }
body.ariad-shell input:focus,
body.ariad-shell select:focus,
body.ariad-shell textarea:focus {
  border-color: #5a50ff !important;
  box-shadow: 0 0 0 2px rgba(43, 31, 255, 0.15) !important;
}
body.ariad-shell .beta-pill,
body.ariad-shell .membership-beta { color: #7d73ff !important; }
body.ariad-shell #connectSandboxButton:hover {
  background: rgba(43, 31, 255, 0.08) !important;
  border-color: #5a50ff !important;
}

/* Footer links (e.g. Admin) — same as .admin-footer-link on index */
body.ariad-shell footer a {
  font-size: var(--ariad-site-footer-link) !important;
}

/* ariad-app.html — analysis dashboard */
body.ariad-shell .button-primary {
  font-size: var(--ariad-font-xs);
  padding: 6px 12px;
}

body.ariad-shell .button-secondary {
  font-size: var(--ariad-font-xs);
}

body.ariad-shell .chart-title {
  font-size: var(--ariad-font-xs) !important;
}

body.ariad-shell .chart-legend-item {
  font-size: var(--ariad-font-xs) !important;
}

body.ariad-shell .stat-label {
  font-size: var(--ariad-font-xs) !important;
}

body.ariad-shell .stat-value {
  font-size: calc(var(--ariad-font-base) + 1px) !important;
}

body.ariad-shell .tool-card-title {
  font-size: 18px; /* analysis card headers match the site-wide button scale */
  font-weight: 400;
  margin-bottom: 8px;
}

body.ariad-shell .tool-card-meta {
  font-size: var(--ariad-font-xs);
}

body.ariad-shell .tool-card-link {
  font-size: var(--ariad-font-xs);
}

body.ariad-shell .connection-byline {
  font-size: var(--ariad-font-xs) !important;
}

body.ariad-shell .action-bar .button-secondary {
  font-size: var(--ariad-font-xs);
}

/* Intelligence detail pages — panels & tables.
   Panel prose uses the unified 14px base so it matches the rest of the site;
   dense data tables inside keep their own compact size (below). */
body.ariad-shell .panel {
  font-size: var(--ariad-font-base);
}

body.ariad-shell .panel h2,
body.ariad-shell .panel h3 {
  font-size: var(--ariad-font-lg);
  font-weight: 600;
}

body.ariad-shell table {
  font-size: var(--ariad-font-xs);
}

body.ariad-shell .toolbar label {
  font-size: var(--ariad-font-xs) !important;
}

/* Tight, engineered rounding across Ariad surfaces (brand radius scale). */
body.ariad-shell .panel,
body.ariad-shell .tool-card,
body.ariad-shell .stat-pill,
body.ariad-shell .table-scroll,
body.ariad-shell .connection-byline {
  border-radius: var(--radius-md, 6px) !important;
}
body.ariad-shell .issue-chip,
body.ariad-shell .button-primary,
body.ariad-shell .button-secondary,
body.ariad-shell input,
body.ariad-shell select,
body.ariad-shell textarea {
  border-radius: var(--radius-sm, 4px) !important;
}

/* Ariad app: keep 3 cards per row; additional cards wrap. */
body.ariad-shell #orgHealthToolGrid.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px;
}

@media (max-width: 780px) {
  body.ariad-shell #orgHealthToolGrid.tool-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Ariad app: enforce 3-column stats pills (override any inline/media rules). */
#orgHealthToolGrid .stats-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 420px) {
  #orgHealthToolGrid .stats-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}