/* ==========================================================================
   My Charts — Dawn Vedic
   Sunrise palette, temple serif + geometric sans.
   Structure/content unchanged; presentation only.
   Loaded last on charts.html so it wins over glass / brand / cosmic layers.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600;700&display=swap");

body.charts-page {
  --charts-sky-top: #FFF6EA;
  --charts-sky-mid: #FBDDB6;
  --charts-maroon: #6E1F2B;
  --charts-maroon-ink: #4A1620;
  --charts-maroon-deep: #3C1219;
  --charts-gold: #C89B3C;
  --charts-gold-soft: #E8C77E;
  --charts-ivory: #FFFBF3;
  --charts-ivory-2: #FFF4E3;
  --charts-charcoal: #3B2E2A;
  --charts-muted: #7A6A61;
  --charts-line: rgba(110, 31, 43, 0.14);
  --charts-rust: #A34A3A;
  --charts-rust-soft: #F3E0D8;
  --charts-shadow: 0 18px 40px -18px rgba(74, 22, 32, 0.22);
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--charts-charcoal);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(240, 168, 92, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 100% 20%, rgba(200, 155, 60, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--charts-sky-top) 0%, #F6F1E7 42%, #FEFAF3 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

body.charts-page .charts-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8rem 1.25rem 4rem;
  position: relative;
  z-index: 1;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
body.charts-page .charts-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.85rem) !important;
  border-radius: 20px !important;
  border: 1px solid var(--charts-line) !important;
  background: var(--charts-ivory) !important;
  background-image: none !important;
  box-shadow: var(--charts-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--charts-charcoal) !important;
}

/* Sunrise arc watermark */
body.charts-page .charts-hero::before {
  content: "";
  position: absolute;
  top: -42%;
  right: -8%;
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(240, 168, 92, 0.35) 0%, rgba(232, 199, 126, 0.12) 38%, transparent 62%),
    repeating-conic-gradient(
      from 0deg,
      rgba(200, 155, 60, 0.07) 0deg 6deg,
      transparent 6deg 18deg
    );
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 42%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 42%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

/* Thin mandala ring (restrained) */
body.charts-page .charts-hero::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 6%;
  width: min(160px, 28vw);
  height: min(160px, 28vw);
  border-radius: 50%;
  border: 1px solid rgba(200, 155, 60, 0.28);
  box-shadow:
    inset 0 0 0 12px rgba(200, 155, 60, 0.04),
    0 0 0 18px rgba(110, 31, 43, 0.03);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

body.charts-page .charts-hero > * {
  position: relative;
  z-index: 1;
}

body.charts-page .charts-hero .eyebrow {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--charts-gold) !important;
}

body.charts-page .charts-hero h1 {
  margin: 0.35rem 0 0.65rem;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2.15rem, 4vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--charts-maroon-deep) !important;
}

body.charts-page .charts-hero p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--charts-muted) !important;
}

/* Maroon primary CTA */
body.charts-page .charts-hero #charts-add.button-primary,
body.charts-page .charts-hero .button-primary {
  flex-shrink: 0;
  min-height: 2.85rem;
  padding: 0 1.45rem;
  border: 1px solid var(--charts-maroon) !important;
  border-radius: 999px !important;
  background: var(--charts-maroon) !important;
  background-image: linear-gradient(165deg, #8A2A3A 0%, var(--charts-maroon) 55%, var(--charts-maroon-ink) 100%) !important;
  color: #F8E9D2 !important;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  box-shadow:
    0 8px 22px -8px rgba(74, 22, 32, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition:
    transform 160ms ease,
    box-shadow 200ms ease,
    background 200ms ease,
    border-color 160ms ease;
}

body.charts-page .charts-hero #charts-add.button-primary:hover,
body.charts-page .charts-hero .button-primary:hover {
  transform: translateY(-1px);
  border-color: var(--charts-maroon-ink) !important;
  background: var(--charts-maroon-ink) !important;
  background-image: linear-gradient(165deg, #9A3446 0%, var(--charts-maroon) 40%, var(--charts-maroon-ink) 100%) !important;
  color: #FFF8EC !important;
  box-shadow:
    0 0 0 4px rgba(200, 155, 60, 0.22),
    0 14px 32px -10px rgba(74, 22, 32, 0.55) !important;
}

body.charts-page .charts-hero #charts-add.button-primary:focus-visible,
body.charts-page .charts-hero .button-primary:focus-visible {
  outline: 3px solid var(--charts-gold) !important;
  outline-offset: 3px;
}

/* Count line */
body.charts-page .charts-status {
  min-height: 1.5rem;
  margin: 0 0 1.1rem;
  padding: 0 0.15rem;
  font-family: "Jost", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--charts-muted) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
body.charts-page .charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

body.charts-page .charts-grid > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px dashed var(--charts-line);
  background: var(--charts-ivory);
  color: var(--charts-muted);
  font-family: "Jost", sans-serif;
  text-align: center;
}

/* ── Chart cards ──────────────────────────────────────────────────────── */
body.charts-page .chart-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.25rem 1.2rem !important;
  border: 1px solid var(--charts-line) !important;
  border-radius: 18px !important;
  background: var(--charts-ivory) !important;
  background-image: none !important;
  box-shadow: var(--charts-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--charts-charcoal) !important;
  transition: border-color 180ms ease, box-shadow 200ms ease, transform 160ms ease;
}

/* Gold → maroon top edge (natal-map frame echo) */
body.charts-page .chart-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--charts-maroon), var(--charts-gold), #F0A85C);
  pointer-events: none;
  z-index: 1;
}

body.charts-page .chart-card:hover {
  border-color: rgba(110, 31, 43, 0.28) !important;
  box-shadow: 0 20px 44px -16px rgba(74, 22, 32, 0.28) !important;
  transform: translateY(-2px);
}

body.charts-page .chart-card.is-selected {
  border-color: rgba(200, 155, 60, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(200, 155, 60, 0.25),
    var(--charts-shadow) !important;
}

body.charts-page .chart-card.is-locked,
body.charts-page .chart-card.is-analysis-locked {
  border-style: dashed !important;
  opacity: 0.88;
}

body.charts-page .chart-card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  padding-bottom: 0.85rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(200, 155, 60, 0.35);
}

body.charts-page .chart-card h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--charts-maroon-deep) !important;
}

body.charts-page .chart-card__name {
  margin: 0.75rem 0 0.95rem;
  font-family: "Jost", sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--charts-charcoal) !important;
}

/* Jewel-toned status pills */
/* Layout-only wrapper. It is reset explicitly because its class contains the
   substring "badge", so the site-wide [class*="badge"] tag rules would
   otherwise paint the container itself, drawing a filled box behind the
   two badges it holds. */
body.charts-page .chart-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.charts-page .chart-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  box-shadow: none !important;
  background-image: none !important;
}

/* Primary — solid maroon jewel */
body.charts-page .chart-badge--primary {
  color: #F8E9D2 !important;
  background: var(--charts-maroon) !important;
  background-image: none !important;
  border-color: var(--charts-maroon) !important;
}

/* Selected — warm amber wash with a single gold hairline. The previous
   treatment paired a gold border with an inset ring of nearly the same
   colour, which read as a heavy double outline against the ivory card. */
body.charts-page .chart-badge--selected,
body.charts-page .chart-badge:not(.chart-badge--primary):not(.chart-badge--locked) {
  color: #7A4A0B !important;
  background: rgba(232, 163, 61, 0.16) !important;
  border: 1px solid rgba(200, 155, 60, 0.55) !important;
  box-shadow: none !important;
}

/* Locked — muted, still on-palette */
body.charts-page .chart-badge--locked {
  color: var(--charts-muted) !important;
  background: var(--charts-ivory-2) !important;
  border: 1px solid var(--charts-line) !important;
}

/* Meta grid */
body.charts-page .chart-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 0.9rem;
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 0.875rem;
  flex: 1 1 auto;
}

body.charts-page .chart-card dt {
  color: var(--charts-muted) !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

body.charts-page .chart-card dd {
  margin: 0;
  color: var(--charts-charcoal) !important;
  font-weight: 500;
}

/* Action row — soft ivory + maroon hairline → solid maroon hover */
body.charts-page .chart-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(110, 31, 43, 0.1);
}

body.charts-page .chart-card__actions button {
  border: 1px solid rgba(110, 31, 43, 0.28) !important;
  border-radius: 999px !important;
  background: var(--charts-ivory) !important;
  background-image: none !important;
  color: var(--charts-maroon) !important;
  padding: 0.42rem 0.78rem;
  font-family: "Jost", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: none !important;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

body.charts-page .chart-card__actions button:hover {
  background: var(--charts-maroon) !important;
  background-image: none !important;
  border-color: var(--charts-maroon) !important;
  color: #F8E9D2 !important;
  box-shadow: 0 6px 16px -6px rgba(74, 22, 32, 0.45) !important;
  transform: translateY(-1px);
}

body.charts-page .chart-card__actions button:focus-visible {
  outline: 3px solid var(--charts-gold) !important;
  outline-offset: 2px;
}

/* Delete — muted terracotta, distinct but on-palette */
body.charts-page .chart-card__actions button[data-action="delete"] {
  color: var(--charts-rust) !important;
  border-color: rgba(163, 74, 58, 0.4) !important;
  background: var(--charts-rust-soft) !important;
}

body.charts-page .chart-card__actions button[data-action="delete"]:hover {
  background: var(--charts-rust) !important;
  border-color: var(--charts-rust) !important;
  color: #FFF8F5 !important;
}

body.charts-page .chart-card__locked-note {
  margin: 0.9rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(200, 155, 60, 0.28);
  background: var(--charts-ivory-2);
  color: var(--charts-muted) !important;
  font-family: "Jost", sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ── Dialog (Add / Edit) — same dawn language ─────────────────────────── */
body.charts-page .chart-dialog {
  width: min(680px, calc(100% - 2rem));
  border: 1px solid var(--charts-line) !important;
  border-radius: 18px !important;
  padding: 0;
  background: var(--charts-ivory) !important;
  color: var(--charts-charcoal);
  box-shadow: 0 28px 70px -20px rgba(74, 22, 32, 0.4) !important;
  font-family: "Jost", sans-serif;
}

body.charts-page .chart-dialog::backdrop {
  background: rgba(60, 18, 25, 0.45);
  backdrop-filter: blur(3px);
}

body.charts-page .chart-dialog form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1.35rem;
}

body.charts-page .chart-dialog label {
  display: grid;
  gap: 0.35rem;
  color: var(--charts-muted);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
}

body.charts-page .chart-dialog input,
body.charts-page .chart-dialog select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--charts-line);
  border-radius: 10px;
  font: inherit;
  color: var(--charts-charcoal);
  background: #FFFEFB;
}

body.charts-page .chart-dialog input:focus-visible,
body.charts-page .chart-dialog select:focus-visible {
  outline: 3px solid rgba(200, 155, 60, 0.55);
  outline-offset: 1px;
  border-color: var(--charts-gold);
}

body.charts-page .chart-dialog__header,
body.charts-page .chart-dialog__wide,
body.charts-page .chart-dialog__note,
body.charts-page .chart-dialog__actions {
  grid-column: 1 / -1;
}

body.charts-page .chart-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.35rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(200, 155, 60, 0.35);
}

body.charts-page .chart-dialog__header h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--charts-maroon-deep) !important;
}

body.charts-page .chart-dialog__header button {
  border: 0;
  background: transparent;
  color: var(--charts-muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}

body.charts-page .chart-dialog__header button:hover {
  color: var(--charts-maroon);
}

body.charts-page .chart-dialog__header button:focus-visible {
  outline: 3px solid var(--charts-gold);
  outline-offset: 2px;
}

body.charts-page .chart-dialog__note {
  margin: 0;
  color: var(--charts-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

body.charts-page .chart-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

body.charts-page .chart-dialog .button-primary {
  border: 1px solid var(--charts-maroon) !important;
  background: var(--charts-maroon) !important;
  color: #F8E9D2 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px -8px rgba(74, 22, 32, 0.5) !important;
}

body.charts-page .chart-dialog .button-primary:hover {
  background: var(--charts-maroon-ink) !important;
  box-shadow:
    0 0 0 3px rgba(200, 155, 60, 0.22),
    0 10px 24px -8px rgba(74, 22, 32, 0.5) !important;
}

body.charts-page .chart-dialog .button-secondary {
  border: 1px solid rgba(110, 31, 43, 0.28) !important;
  background: var(--charts-ivory) !important;
  color: var(--charts-maroon) !important;
  border-radius: 999px !important;
}

body.charts-page .chart-dialog .button-secondary:hover {
  background: var(--charts-maroon) !important;
  color: #F8E9D2 !important;
}

body.charts-page .chart-dialog .button-primary:focus-visible,
body.charts-page .chart-dialog .button-secondary:focus-visible {
  outline: 3px solid var(--charts-gold) !important;
  outline-offset: 2px;
}

/* Birthplace search */
body.charts-page .chart-geo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

body.charts-page .chart-geo-row .button {
  min-height: 2.75rem;
  flex: 0 0 auto;
}

body.charts-page .chart-geo-status {
  margin: 0;
  color: var(--charts-muted);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
}

body.charts-page .chart-geo-status.is-error {
  color: var(--charts-rust);
}

body.charts-page .chart-place-results {
  display: grid;
  gap: 0.45rem;
  max-height: 220px;
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--charts-line);
  border-radius: 12px;
  background: var(--charts-ivory-2);
}

body.charts-page .chart-place-option {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--charts-line);
  border-radius: 10px;
  background: var(--charts-ivory);
  color: var(--charts-charcoal);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

body.charts-page .chart-place-option:hover,
body.charts-page .chart-place-option:focus-visible {
  border-color: var(--charts-gold);
  box-shadow: 0 6px 16px -8px rgba(74, 22, 32, 0.25);
  outline: none;
}

body.charts-page .chart-place-option:focus-visible {
  outline: 3px solid rgba(200, 155, 60, 0.55);
  outline-offset: 1px;
}

body.charts-page .chart-place-option:active {
  transform: scale(0.99);
}

body.charts-page .chart-place-option strong {
  font-size: 0.92rem;
  color: var(--charts-maroon-deep);
}

body.charts-page .chart-place-option span {
  font-size: 0.78rem;
  color: var(--charts-muted);
  font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.charts-page .charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.charts-page .charts-main {
    padding-top: 6.5rem;
    padding-inline: 1rem;
  }

  body.charts-page .charts-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  body.charts-page .charts-hero #charts-add.button-primary {
    width: 100%;
    justify-content: center;
  }

  body.charts-page .charts-grid {
    grid-template-columns: 1fr;
  }

  body.charts-page .chart-dialog form {
    grid-template-columns: 1fr;
  }

  body.charts-page .chart-geo-row .button {
    width: 100%;
  }

  body.charts-page .charts-hero::after {
    opacity: 0.4;
    width: 100px;
    height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.charts-page .chart-card,
  body.charts-page .chart-card__actions button,
  body.charts-page .charts-hero .button-primary {
    transition: none;
  }

  body.charts-page .chart-card:hover,
  body.charts-page .chart-card__actions button:hover {
    transform: none;
  }
}

/* The relationship fields appear only for the type that has them, and the
   dialog's own `label { display: grid }` outranks the UA's [hidden] rule — so
   without this they stay on screen with the attribute set, which is worse than
   never hiding them: the code believes they are gone and clears their values.
   Same hazard as login.css handles for .login-checkbox. */
body.charts-page .chart-dialog label[hidden] {
  display: none;
}

/* The hint under "Since". Lighter than the label so the field still reads as
   one thing rather than two. */
body.charts-page .chart-dialog .chart-field-note {
  color: var(--charts-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.35;
}