/* ====================================================================
 * tools-batch-b.css - shared styling for /genome, /cognitive, /meditate
 *
 * Three Tools surfaces that mirror the iOS Tools tab pages onto the
 * web. They share visual language with /log, /doctor, /trends - same
 * card vocabulary, same auth-gate hero, same sign-in form. Page-
 * specific bits live in their own scoped block at the bottom.
 *
 * Tokens come from /styles/main.css; this file only adds layout +
 * components specific to these three pages. Don't put anything here
 * that other Tools surfaces (bio-age / what-if / log / doctor) might
 * also need - promote it into main.css instead.
 *
 * Layout convention: every page has
 *   - .tb-hero   (auth gate / page intro)
 *   - .tb-shell  (signed-in app body)
 *   - .tb-card   (rounded card unit, slightly lighter shadow than .card)
 *   - .tb-status (live region for inline status messages)
 * ==================================================================== */

/* ────────────────────────────────────────────────────────────────────
 * Shared shell + auth gate
 * ────────────────────────────────────────────────────────────────────*/

.tb-main {
  padding-top: 64px;
  padding-bottom: 96px;
  min-height: 70vh;
}

.tb-hero {
  padding: 48px 0 24px;
}

.tb-hero h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  margin: 8px 0 12px;
}

.tb-hero .lede {
  color: var(--text-secondary, #5a6a78);
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.55;
}

.tb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #07564F);
  background: rgba(7, 86, 79, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
}

.tb-pill-dot {
  width: 6px;
  height: 6px;
  background: var(--accent, #07564F);
  border-radius: 50%;
}

.tb-auth-card {
  margin-top: 28px;
  padding: 28px;
  border-radius: 18px;
  background: var(--card, white);
  box-shadow: 0 6px 24px rgba(15, 30, 40, 0.06);
  max-width: 460px;
}

.tb-auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  color: var(--text-primary, #0f1e28);
}

.tb-auth-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #d6dde2;
  border-radius: 10px;
  background: #f7f9fa;
  margin-bottom: 14px;
  transition: border-color 0.15s, background 0.15s;
}

.tb-auth-input:focus {
  outline: none;
  border-color: var(--accent, #07564F);
  background: var(--card, white);
}

.tb-auth-status {
  margin-top: 12px;
  font-size: 14px;
  min-height: 18px;
  color: var(--text-secondary, #5a6a78);
}

.tb-auth-status.is-error { color: #b3261e; }
.tb-auth-status.is-success { color: #1b6e3a; }

.tb-auth-fineprint {
  font-size: 13px;
  color: var(--text-secondary, #5a6a78);
  margin-top: 10px;
  line-height: 1.45;
}

.tb-shell {
  padding-top: 32px;
}

.tb-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.tb-page-head h1 {
  font-size: clamp(24px, 4vw, 34px);
  margin: 0 0 4px;
}

.tb-page-head .tb-sub {
  font-size: 15px;
  color: var(--text-secondary, #5a6a78);
}

.tb-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tb-user-email {
  font-size: 13px;
  color: var(--text-secondary, #5a6a78);
}

/* Cards */

.tb-card {
  background: var(--card, white);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 3px 14px rgba(15, 30, 40, 0.05);
  border: 1px solid rgba(15, 30, 40, 0.04);
}

.tb-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.tb-card-head h2 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
}

.tb-card-sub {
  font-size: 13px;
  color: var(--text-secondary, #5a6a78);
}

.tb-banner {
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
}

.tb-banner.is-info {
  background: rgba(7, 86, 79, 0.06);
  color: var(--accent-dark, #07564F);
}

.tb-banner.is-warning {
  background: rgba(244, 162, 97, 0.12);
  color: #8a4a16;
}

.tb-banner.is-error {
  background: rgba(179, 38, 30, 0.08);
  color: #8a1f17;
}

.tb-banner.is-success {
  background: rgba(27, 110, 58, 0.08);
  color: #155a2c;
}

.tb-status {
  font-size: 14px;
  min-height: 20px;
  color: var(--text-secondary, #5a6a78);
}

/* ────────────────────────────────────────────────────────────────────
 * /genome - DNA upload + report
 * ────────────────────────────────────────────────────────────────────*/

.gn-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  border: 2px dashed #d6dde2;
  border-radius: 16px;
  background: #f7f9fa;
  text-align: center;
}

.gn-uploader.is-dragging { border-color: var(--accent, #07564F); background: rgba(7, 86, 79, 0.04); }

.gn-uploader input[type="file"] { display: none; }

.gn-uploader-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(7, 86, 79, 0.08);
  color: var(--accent, #07564F);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  font-size: 24px;
}

.gn-uploader-title {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
}

.gn-uploader-sub {
  color: var(--text-secondary, #5a6a78);
  font-size: 14px;
  max-width: 38ch;
  line-height: 1.5;
}

.gn-supported-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.gn-supported-chip {
  background: var(--card, white);
  border: 1px solid #e3e8eb;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary, #5a6a78);
}

.gn-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
}

.gn-progress-bar {
  width: 100%;
  height: 6px;
  background: #eef1f3;
  border-radius: 999px;
  overflow: hidden;
}

.gn-progress-fill {
  height: 100%;
  background: var(--accent, #07564F);
  width: 0%;
  transition: width 0.3s;
}

.gn-progress-step {
  font-size: 14px;
  color: var(--text-secondary, #5a6a78);
}

.gn-summary {
  font-size: 15px;
  line-height: 1.55;
}

.gn-summary p { margin: 0 0 12px; }

.gn-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.gn-cat {
  border-radius: 12px;
  padding: 14px 16px;
  background: #f7f9fa;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(15, 30, 40, 0.04);
}

.gn-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gn-cat-label {
  font-size: 13px;
  color: var(--text-secondary, #5a6a78);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.gn-cat-headline {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary, #0f1e28);
}

.gn-cat-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.gn-cat-light.protective { background: #2e8b57; }
.gn-cat-light.average    { background: #888; }
.gn-cat-light.elevated   { background: #e0a458; }
.gn-cat-light.high       { background: #d24c3a; }

.gn-cat-level-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gn-cat-level-pill.protective { background: rgba(46, 139, 87, 0.14); color: #1f6940; }
.gn-cat-level-pill.average    { background: rgba(120, 120, 120, 0.14); color: #555; }
.gn-cat-level-pill.elevated   { background: rgba(224, 164, 88, 0.18); color: #8a5414; }
.gn-cat-level-pill.high       { background: rgba(210, 76, 58, 0.16); color: #8a2e22; }

.gn-finding {
  border-top: 1px solid #eef1f3;
  padding: 14px 0;
}

.gn-finding:first-child { border-top: 0; padding-top: 0; }

.gn-finding-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.gn-finding-name {
  font-weight: 700;
  font-size: 15px;
}

.gn-finding-gene {
  font-size: 12px;
  color: var(--text-secondary, #5a6a78);
}

.gn-genotype {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 14px;
  background: #eef1f3;
  padding: 2px 8px;
  border-radius: 6px;
}

.gn-finding-headline {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary, #0f1e28);
}

.gn-finding-interpretation {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, #5a6a78);
}

.gn-recs {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #5a6a78);
}

.gn-recs li { margin-bottom: 4px; }

.gn-disclaimer {
  margin-top: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-secondary, #5a6a78);
  background: #f7f9fa;
  border-radius: 12px;
  line-height: 1.5;
}

.gn-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.gn-cat-filter button {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid #d6dde2;
  border-radius: 999px;
  background: var(--card, white);
  cursor: pointer;
  font-weight: 500;
}

.gn-cat-filter button.is-active {
  background: var(--accent, #07564F);
  color: white;
  border-color: var(--accent, #07564F);
}

/* ────────────────────────────────────────────────────────────────────
 * /cognitive - test battery
 * ────────────────────────────────────────────────────────────────────*/

.cg-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cg-test-tile {
  background: var(--card, white);
  border-radius: 14px;
  padding: 18px;
  border: 1px solid rgba(15, 30, 40, 0.06);
  box-shadow: 0 1px 4px rgba(15, 30, 40, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cg-test-tile.is-done { background: #f7f9fa; opacity: 0.85; }

.cg-test-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.cg-test-icon.reaction { background: #07564F; }
.cg-test-icon.recall   { background: #4a76b4; }
.cg-test-icon.spatial  { background: #5d4ab4; }
.cg-test-icon.symbol   { background: #d24c3a; }

.cg-test-title { font-weight: 700; font-size: 16px; margin: 0; }
.cg-test-subtitle { font-size: 13px; color: var(--text-secondary, #5a6a78); margin: 0; }
.cg-test-meta { font-size: 12px; color: var(--text-secondary, #5a6a78); }

.cg-test-tile button {
  margin-top: auto;
}

.cg-runner {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 40, 0.94);
  z-index: 50;
  display: grid;
  place-items: center;
  color: white;
  text-align: center;
  padding: 24px;
}

.cg-runner-inner {
  max-width: 560px;
  width: 100%;
}

.cg-runner h2 {
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 8px;
}

.cg-runner .cg-instructions {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 20px;
}

.cg-runner .cg-target {
  font-size: clamp(48px, 8vw, 88px);
  font-weight: 800;
  margin: 24px 0;
  letter-spacing: 0.02em;
}

.cg-runner .cg-instruction-line {
  font-size: 18px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.cg-runner .cg-tap-button {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: none;
  background: var(--card, white);
  color: #07564F;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 30px rgba(255, 255, 255, 0.3);
  transition: transform 0.1s, background 0.15s;
}

.cg-runner .cg-tap-button:active { transform: scale(0.96); }
.cg-runner .cg-tap-button.is-go { background: #5cd49b; color: #0f1e28; }
.cg-runner .cg-tap-button.is-wait { background: rgba(255, 255, 255, 0.5); cursor: not-allowed; }
.cg-runner .cg-tap-button.is-cooldown { background: #f4a261; color: #4a2a08; }

.cg-runner .cg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
}

.cg-runner .cg-grid-cell {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.cg-runner .cg-grid-cell.is-flashing {
  background: #5cd49b;
  border-color: #5cd49b;
  transform: scale(1.05);
}

.cg-runner .cg-grid-cell.is-tapped {
  background: rgba(92, 212, 155, 0.4);
  border-color: rgba(92, 212, 155, 0.6);
}

.cg-runner .cg-grid-cell.is-wrong {
  background: rgba(210, 76, 58, 0.55);
  border-color: rgba(210, 76, 58, 0.7);
}

.cg-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

.cg-word {
  background: var(--card, white);
  color: #0f1e28;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
}

.cg-recall-input {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 16px;
  margin-bottom: 12px;
}

.cg-recall-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.cg-recall-input:focus { outline: none; border-color: white; background: rgba(255, 255, 255, 0.12); }

.cg-recall-tag {
  background: var(--card, white);
  color: #07564F;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

.cg-symbol-pair {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}

.cg-symbol-cell {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.cg-symbol-cell.is-key { background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

.cg-symbol-prompt {
  font-size: 60px;
  margin: 16px 0;
  font-weight: 700;
}

.cg-symbol-buttons {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 10px;
  justify-content: center;
}

.cg-symbol-buttons button {
  width: 80px;
  height: 60px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

.cg-symbol-buttons button:hover { background: rgba(255, 255, 255, 0.16); }

.cg-runner-actions {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.cg-result-pill {
  display: inline-block;
  background: rgba(92, 212, 155, 0.18);
  color: #5cd49b;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  margin: 8px 0;
}

.cg-result-summary {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0;
  line-height: 1.5;
}

.cg-history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #eef1f3;
  align-items: baseline;
}

.cg-history-row:first-child { border-top: 0; }

.cg-history-date { font-size: 13px; color: var(--text-secondary, #5a6a78); }
.cg-history-score { font-size: 16px; font-weight: 700; }
.cg-history-tier {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef1f3;
  color: var(--text-secondary, #5a6a78);
  font-weight: 600;
}

.cg-history-tier.tier-exceptional { background: rgba(46, 139, 87, 0.18); color: #1f6940; }
.cg-history-tier.tier-above       { background: rgba(74, 118, 180, 0.16); color: #324d7a; }
.cg-history-tier.tier-average     { background: rgba(120, 120, 120, 0.14); color: #555; }
.cg-history-tier.tier-below       { background: rgba(224, 164, 88, 0.18); color: #8a5414; }
.cg-history-tier.tier-low         { background: rgba(210, 76, 58, 0.16); color: #8a2e22; }

/* ────────────────────────────────────────────────────────────────────
 * /meditate - generator + player
 * ────────────────────────────────────────────────────────────────────*/

.md-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 600px) {
  .md-pickers { grid-template-columns: 1fr; }
}

.md-picker-group h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #5a6a78);
  font-weight: 700;
}

.md-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.md-option {
  padding: 10px 14px;
  border: 1px solid #d6dde2;
  border-radius: 10px;
  background: var(--card, white);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}

.md-option:hover { border-color: var(--accent, #07564F); }

.md-option.is-active {
  background: var(--accent, #07564F);
  color: white;
  border-color: var(--accent, #07564F);
}

.md-cta-row {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.md-paywall {
  background: linear-gradient(135deg, rgba(7, 86, 79, 0.06), rgba(244, 162, 97, 0.06));
  border: 1px solid rgba(7, 86, 79, 0.2);
  padding: 22px;
  border-radius: 16px;
  text-align: center;
}

.md-paywall h3 { margin: 0 0 8px; font-size: 18px; }
.md-paywall p { color: var(--text-secondary, #5a6a78); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }

.md-player {
  background: linear-gradient(135deg, #0a3d3a 0%, #07564F 100%);
  color: white;
  border-radius: 18px;
  padding: 26px;
}

.md-player h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.md-player .md-meta { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; }

.md-audio-wrap audio { width: 100%; margin: 8px 0; }

.md-script {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}

.md-script-toggle {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}

.md-script-toggle:hover { background: rgba(255, 255, 255, 0.08); }

.md-no-audio-banner {
  margin-top: 12px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
}

.md-history {
  margin-top: 24px;
}

.md-history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #eef1f3;
  align-items: baseline;
}

.md-history-row:first-of-type { border-top: 0; }

.md-history-date { font-size: 13px; color: var(--text-secondary, #5a6a78); }
.md-history-focus {
  text-transform: capitalize;
  font-weight: 600;
  font-size: 14px;
}
.md-history-duration { font-size: 13px; color: var(--text-secondary, #5a6a78); }

/* ────────────────────────────────────────────────────────────────────
 * Buttons sized for these tools - re-uses .btn from main.css
 * ────────────────────────────────────────────────────────────────────*/

.tb-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tb-hidden { display: none !important; }

.tb-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: tb-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes tb-spin {
  to { transform: rotate(360deg); }
}

.tb-spinner.is-dark {
  border-color: rgba(7, 86, 79, 0.2);
  border-top-color: var(--accent, #07564F);
}