/* ── Gocara (Transits) panel ────────────────────────────────────────────
 *
 * The Transits design arrived with its own token set — a warm gold accent,
 * a translucent white card, 22px radii and a slightly airier spacing scale
 * than the rest of the app. Those tokens are deliberately scoped to
 * #p-transits and the .gc-* tree rather than merged into public/styles.css:
 * the site-wide "optical glass" tokens drive every other surface, and
 * redefining --card or the accent globally to satisfy one panel would
 * restyle the whole product. Everything below therefore cascades from the
 * panel root and stops there.
 *
 * Loaded by /chart and /transits (src/site/pages.js).
 */

#p-transits {
  --gc-text: #1f2937;
  --gc-accent: #e0862d;
  --gc-accent-100: #fdf3e7;
  --gc-accent-300: #f0c48f;
  --gc-accent-700: #b25f12;
  --gc-divider: rgba(31, 45, 74, 0.10);
  --gc-n300: #dde3ee;
  --gc-n400: #c3cbd9;
  --gc-n500: #97a1b3;
  --gc-n600: #6b7688;
  --gc-n700: #54607a;
  --gc-n800: #33405a;

  /* 1.15x of the app's base rhythm — the design's own scale. */
  --gc-1: 5px;
  --gc-2: 9px;
  --gc-3: 14px;
  --gc-4: 18px;
  --gc-5: 23px;
  --gc-6: 28px;
  --gc-8: 46px;

  --gc-card: rgba(255, 255, 255, 0.78);
  --gc-card-edge: 1px solid rgba(255, 255, 255, 0.9);
  --gc-card-shadow: 0 8px 26px rgba(31, 45, 74, 0.07);
  --gc-radius: 22px;

  --gc-head: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --gc-body: "Segoe UI", system-ui, -apple-system, sans-serif;

  color: var(--gc-text);
  font-family: var(--gc-body);
  font-size: 15px;
  line-height: 1.6;
}

/* The app's own dark surface would strand this palette's near-white cards,
 * so the panel carries the light ground the design was drawn on. */
#p-transits .gc-root {
  background: linear-gradient(165deg, #e8ecf6 0%, #f5f7fc 42%, #eaeef8 100%);
  border-radius: var(--gc-radius);
  padding: var(--gc-5) var(--gc-4) var(--gc-6);
  margin: 0 -6px;
}

#p-transits .gc-card {
  background: var(--gc-card);
  border: var(--gc-card-edge);
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-card-shadow);
  padding: var(--gc-6);
}
#p-transits .gc-root > * + * { margin-top: var(--gc-6); }
#p-transits .gc-body > * + * { margin-top: var(--gc-6); }

#p-transits h2.gc-h,
#p-transits h3.gc-h {
  font-family: var(--gc-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--gc-text);
}
#p-transits h2.gc-h { font-size: 27px; }
#p-transits h3.gc-h { font-size: 20px; }

#p-transits .gc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gc-accent-700);
  font-variant-numeric: tabular-nums;
}
#p-transits .gc-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gc-accent-700);
  margin-bottom: var(--gc-2);
}
#p-transits .gc-muted { color: var(--gc-n700); }
#p-transits .gc-fine { font-size: 12px; color: var(--gc-n600); }
#p-transits .gc-num { font-variant-numeric: tabular-nums; }

/* ── header ── */
#p-transits .gc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gc-6);
  flex-wrap: wrap;
}
#p-transits .gc-head h1 {
  font-family: var(--gc-head);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: var(--gc-2) 0 0;
  color: var(--gc-text);
}
#p-transits .gc-who {
  text-align: right;
  font-size: 13px;
  color: var(--gc-n700);
  line-height: 1.7;
}
#p-transits .gc-who .gc-name { color: var(--gc-text); }

#p-transits .gc-lede {
  margin: 0;
  max-width: none;
  text-align: left;
  text-wrap: pretty;
  background: var(--gc-card);
  border: var(--gc-card-edge);
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-card-shadow);
  border-left: 4px solid #7b8fd0;
  padding: var(--gc-4) var(--gc-6);
}

/* ── time controls ── */
#p-transits .gc-controls {
  display: flex;
  gap: var(--gc-6);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--gc-4) var(--gc-6);
}
#p-transits .gc-when {
  font-family: var(--gc-head);
  font-size: 21px;
  min-width: 210px;
  font-variant-numeric: tabular-nums;
}
#p-transits .gc-btns { display: flex; gap: var(--gc-2); align-items: center; }
#p-transits .gc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gc-n600);
}
#p-transits .gc-field--grow { flex: 1 1 260px; }

#p-transits .gc-btn {
  font: inherit;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid rgba(31, 45, 74, 0.12);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(31, 45, 74, 0.08);
  padding: 8px 18px;
  color: var(--gc-n800);
  cursor: pointer;
}
#p-transits .gc-btn:hover { background: #fff; box-shadow: 0 3px 10px rgba(31, 45, 74, 0.12); }
#p-transits .gc-btn--primary {
  color: var(--gc-accent-700);
  border-color: var(--gc-accent-300);
  font-weight: 600;
}
#p-transits .gc-input {
  font: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 999px;
  border: 1px solid rgba(31, 45, 74, 0.12);
  background: rgba(255, 255, 255, 0.85);
  padding: 7px 16px;
  color: var(--gc-text);
}
#p-transits input[type="range"] { accent-color: var(--gc-accent); }
#p-transits :focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 2px; }

/* ── view pills ── */
#p-transits .gc-sechead {
  display: flex;
  gap: var(--gc-4);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gc-divider);
  padding-bottom: var(--gc-3);
}
#p-transits .gc-pills { display: flex; gap: var(--gc-1); flex-wrap: wrap; }
#p-transits .gc-pill {
  font: inherit;
  font-size: 13px;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(31, 45, 74, 0.06);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(31, 45, 74, 0.08);
  font-weight: 400;
  color: var(--gc-n700);
}
#p-transits .gc-pill[aria-pressed="true"] {
  box-shadow: 0 3px 12px rgba(31, 45, 74, 0.13);
  background: #fff;
  border-color: var(--gc-accent-300);
  font-weight: 600;
  color: var(--gc-accent-700);
}

#p-transits .gc-stage {
  display: flex;
  justify-content: center;
  padding: var(--gc-6) 0 var(--gc-3);
}
#p-transits .gc-stage figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#p-transits .gc-stage figcaption {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gc-n600);
  text-align: center;
}
#p-transits .gc-pair { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
#p-transits .gc-legend {
  display: flex;
  gap: var(--gc-6);
  justify-content: center;
  font-size: 12px;
  color: var(--gc-n700);
  flex-wrap: wrap;
  border-top: 1px solid var(--gc-divider);
  padding-top: var(--gc-3);
}
#p-transits .gc-legend .gc-gold { color: var(--gc-accent-700); }
#p-transits .gc-legend .gc-ink { color: var(--gc-n800); }

/* ── positions table ── */
#p-transits .gc-scroll { overflow-x: auto; }
#p-transits table.gc-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
#p-transits table.gc-table th {
  text-align: left;
  border-bottom: 1px solid var(--gc-divider);
  background: transparent;
  color: var(--gc-n600);
  font-weight: 600;
  padding: 8px 12px 8px 0;
  white-space: nowrap;
}
#p-transits table.gc-table td {
  border-bottom: 1px solid rgba(31, 45, 74, 0.06);
  padding: 9px 12px 9px 0;
  color: var(--gc-text);
}
#p-transits table.gc-table td.gc-state { color: var(--gc-accent-700); }
#p-transits table.gc-table td.gc-nowrap { white-space: nowrap; }

/* ── phala cards ── */
#p-transits .gc-readings { display: grid; gap: var(--gc-6); }
#p-transits .gc-reading-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gc-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gc-divider);
  padding-bottom: var(--gc-3);
}
#p-transits .gc-graha { font-family: var(--gc-head); font-size: 29px; }
#p-transits .gc-verdict {
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(31, 45, 74, 0.05);
  border: 1px solid rgba(31, 45, 74, 0.10);
  color: var(--gc-n700);
  white-space: nowrap;
}
#p-transits .gc-verdict--fav {
  background: var(--gc-accent-100);
  border-color: var(--gc-accent-300);
  color: var(--gc-accent-700);
}
#p-transits .gc-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gc-6);
  margin-top: var(--gc-4);
}
#p-transits .gc-two > div + div {
  border-left: 1px solid var(--gc-divider);
  padding-left: var(--gc-6);
}
#p-transits .gc-two p { margin: 0; text-align: left; text-wrap: pretty; }

/* ── three-up grid ── */
#p-transits .gc-grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gc-6);
}
#p-transits .gc-rows { display: grid; gap: var(--gc-3); }
#p-transits .gc-row {
  display: flex;
  gap: var(--gc-3);
  align-items: baseline;
  border-bottom: 1px solid var(--gc-divider);
  padding-bottom: var(--gc-2);
}
#p-transits .gc-row .gc-rname { min-width: 78px; font-family: var(--gc-head); font-size: 17px; }
#p-transits .gc-row .gc-rtext { font-size: 13px; color: var(--gc-n700); font-variant-numeric: tabular-nums; }
#p-transits .gc-sade-status {
  font-family: var(--gc-head);
  font-size: 21px;
  color: var(--gc-accent-700);
  margin-bottom: var(--gc-2);
}
#p-transits .gc-dasha-row {
  display: flex;
  justify-content: space-between;
  gap: var(--gc-3);
  border-bottom: 1px solid var(--gc-divider);
  padding-bottom: var(--gc-2);
  font-variant-numeric: tabular-nums;
}
#p-transits .gc-dasha-row .gc-lvl {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gc-n600);
}
#p-transits .gc-dasha-row .gc-lord { font-family: var(--gc-head); font-size: 18px; }
#p-transits .gc-dasha-row .gc-span { font-size: 13px; color: var(--gc-n700); }

/* ── ingresses ── */
#p-transits .gc-ing {
  display: grid;
  grid-template-columns: 96px minmax(170px, 210px) 110px 1fr;
  gap: var(--gc-4);
  align-items: baseline;
  border-bottom: 1px solid var(--gc-divider);
  padding-bottom: var(--gc-3);
  font-variant-numeric: tabular-nums;
}
#p-transits .gc-ing .gc-iname { font-family: var(--gc-head); font-size: 19px; }
#p-transits .gc-ing span:not(.gc-iname) { font-size: 13px; }
#p-transits .gc-ing .gc-imove,
#p-transits .gc-ing .gc-imean { color: var(--gc-n700); }
#p-transits .gc-ing .gc-imean { text-wrap: pretty; }

#p-transits .gc-method {
  margin: var(--gc-6) 0 0;
  font-size: 12px;
  color: var(--gc-n600);
  padding: 0 var(--gc-2);
  max-width: 80ch;
}

/* ── states ── */
#p-transits .gc-empty { text-align: center; padding: var(--gc-8) var(--gc-4); }
#p-transits .gc-empty h2 { font-family: var(--gc-head); font-weight: 600; font-size: 24px; margin: 0 0 var(--gc-2); }
#p-transits .gc-empty p { margin: 0 auto var(--gc-4); max-width: 46ch; color: var(--gc-n700); }
#p-transits .gc-err { color: #8f2d2d; }
#p-transits .gc-body[data-busy="1"] { opacity: 0.55; transition: opacity 120ms linear; }
#p-transits .gc-live {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gc-n600);
}
#p-transits .gc-live[data-live="1"] { color: var(--gc-accent-700); }

@media (max-width: 720px) {
  #p-transits .gc-ing { grid-template-columns: 1fr; gap: var(--gc-1); }
  #p-transits .gc-head h1 { font-size: 30px; }
  #p-transits .gc-who { text-align: left; }
  #p-transits .gc-card { padding: var(--gc-4); }
  #p-transits .gc-two > div + div { border-left: 0; padding-left: 0; }
  #p-transits .gc-controls { gap: var(--gc-3); }
}

@media (prefers-reduced-motion: reduce) {
  #p-transits .gc-body[data-busy="1"] { transition: none; }
}

@media print {
  #p-transits .gc-root { background: #fff; padding: 0; margin: 0; }
  #p-transits .gc-card,
  #p-transits .gc-lede { box-shadow: none; border: 1px solid #d8dde8; background: #fff; break-inside: avoid; }
  #p-transits .gc-controls,
  #p-transits .gc-pills,
  #p-transits .gc-live { display: none !important; }
  #p-transits .gc-readings > article { break-inside: avoid; }
}