/* Cartesio — interactive map library
   Standalone styles, not extending Zarsk base. */

.cartesio,
.cartesio * { box-sizing: border-box; }

.cartesio {
  --ct-bg:         #0a0c14;
  --ct-bg-2:       #0f1219;
  --ct-rail:       #0d1019;
  --ct-ink:        #e8eaf0;
  --ct-ink-dim:    #9aa0b4;
  --ct-ink-faint:  #5a6178;
  --ct-line:       rgba(255,255,255,0.08);
  --ct-line-strong:rgba(255,255,255,0.16);
  --ct-accent:     #9ad1ff;
  --ct-card:       rgba(255,255,255,0.035);
  --ct-card-hover: rgba(255,255,255,0.06);

  margin: 0;
  padding: 0;
  background: var(--ct-bg);
  color: var(--ct-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.cartesio a { color: inherit; text-decoration: none; }
.cartesio.cartesio-detail { height: 100%; overflow: hidden; }
html:has(body.cartesio-detail), body.cartesio-detail { height: 100%; overflow: hidden; }

/* ── Top bar ─────────────────────────────────────────────── */
.ct-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1.2rem; height: 48px;
  background: rgba(10,12,20,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ct-line);
  flex-shrink: 0;
}
.ct-brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 600; letter-spacing: 0.01em;
}
.ct-brand small { color: var(--ct-ink-faint); font-weight: 400; margin-left: 0.4rem; font-size: 0.7rem; letter-spacing: 0.12em; }
.ct-brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #9ad1ff, #c4a4ff);
}
.ct-top-nav { display: flex; gap: 1.2rem; font-size: 0.86rem; color: var(--ct-ink-dim); }
.ct-top-nav a:hover { color: var(--ct-ink); }

/* ────────────────────────────────────────────────────────────
   LIBRARY PAGE
   ──────────────────────────────────────────────────────────── */
.ct-hero {
  max-width: 1400px; margin: 0 auto;
  padding: 3rem 2.5rem 1.4rem;
}
.ct-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-size: 3rem; line-height: 1.08;
  margin: 0 0 0.7rem;
}
.ct-hero p { color: var(--ct-ink-dim); max-width: 62ch; margin: 0; font-size: 1rem; }
.ct-hero-note {
  color: var(--ct-ink-faint) !important;
  font-size: 0.82rem !important;
  margin-top: 0.7rem !important;
  font-style: italic;
}

.ct-controls {
  max-width: 1400px; margin: 1.6rem auto 0;
  padding: 0 2.5rem;
  display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center;
}
.ct-search {
  flex: 1; min-width: 240px; max-width: 380px;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--ct-card); border: 1px solid var(--ct-line);
  border-radius: 8px; padding: 0.55rem 0.85rem;
}
.ct-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--ct-ink); font-size: 0.92rem; font-family: inherit;
}
.ct-search input::placeholder { color: var(--ct-ink-faint); }
.ct-search svg { opacity: 0.5; flex-shrink: 0; }

.ct-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ct-chip {
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--ct-card); border: 1px solid var(--ct-line);
  color: var(--ct-ink-dim); font-size: 0.81rem;
  cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.ct-chip:hover { color: var(--ct-ink); border-color: var(--ct-line-strong); }
.ct-chip.active {
  background: rgba(154,209,255,0.12); border-color: var(--ct-accent); color: #dfeeff;
}

.ct-section {
  max-width: 1400px; margin: 0 auto;
  padding: 2.5rem 2.5rem 0;
}
.ct-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--ct-line);
  padding-bottom: 0.7rem; margin-bottom: 1.4rem;
}
.ct-section-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem; font-weight: 500; margin: 0;
}
.ct-count { color: var(--ct-ink-faint); font-size: 0.82rem; }

.ct-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.ct-card {
  background: var(--ct-card); border: 1px solid var(--ct-line);
  border-radius: 12px; padding: 1.1rem 1.2rem 1rem;
  cursor: pointer; transition: all 0.18s;
  position: relative; overflow: hidden;
  display: block;
}
.ct-card:hover {
  background: var(--ct-card-hover);
  border-color: var(--ct-line-strong);
  transform: translateY(-1px);
}
.ct-card-pending { cursor: not-allowed; opacity: 0.55; }
.ct-card-pending:hover { transform: none; }

.ct-thumb {
  height: 90px; margin: -1.1rem -1.2rem 0.9rem;
  border-bottom: 1px solid var(--ct-line);
  position: relative;
  overflow: hidden;
}
.ct-thumb-demographics    { background: radial-gradient(circle at 30% 60%, #2a6f9a 0%, #0e2436 60%, #080d14 100%); }
.ct-thumb-economics       { background: radial-gradient(circle at 60% 40%, #3a7d4a 0%, #1a3624 60%, #0a1411 100%); }
.ct-thumb-housing         { background: radial-gradient(circle at 50% 50%, #7c2d12 0%, #3b160a 60%, #160805 100%); }
.ct-thumb-education       { background: radial-gradient(circle at 40% 60%, #1e40af 0%, #0c1a44 60%, #050a1a 100%); }
.ct-thumb-health          { background: radial-gradient(circle at 40% 50%, #6b21a8 0%, #2c0e44 60%, #10061b 100%); }
.ct-thumb-work-transport  { background: radial-gradient(circle at 70% 30%, #b45309 0%, #522502 60%, #1a0c01 100%); }
.ct-thumb-vitals          { background: radial-gradient(circle at 50% 50%, #0891b2 0%, #093d4a 60%, #04181d 100%); }
.ct-thumb-civic           { background: linear-gradient(120deg, #7f1d1d 0%, #1e3a8a 100%); }
.ct-thumb-geography       { background: radial-gradient(circle at 50% 50%, #525252 0%, #1f1f1f 60%, #0a0a0a 100%); }

/* Geography-specific map screenshot backgrounds (override solid gradient fallbacks above) */
.ct-thumb-geo-county { background: url('../images/cartesio/county-map.webp') center / cover no-repeat; }
.ct-thumb-geo-state  { background: url('../images/cartesio/state-map.webp')  center / cover no-repeat; }
.ct-thumb-geo-city   { background: url('../images/cartesio/city-map.webp')   center / cover no-repeat; }

/* Category color tint: ::after overlay, only visible when a geo image is present */
.ct-thumb-geo-county::after,
.ct-thumb-geo-state::after,
.ct-thumb-geo-city::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ct-thumb-demographics::after   { background: rgba(42,  111, 154, 0.52); }
.ct-thumb-economics::after      { background: rgba(58,  125,  74, 0.52); }
.ct-thumb-housing::after        { background: rgba(124,  45,  18, 0.52); }
.ct-thumb-education::after      { background: rgba(30,   64, 175, 0.52); }
.ct-thumb-health::after         { background: rgba(107,  33, 168, 0.52); }
.ct-thumb-work-transport::after { background: rgba(180,  83,   9, 0.52); }
.ct-thumb-vitals::after         { background: rgba(8,   145, 178, 0.52); }
.ct-thumb-civic::after          { background: rgba(127,  29,  29, 0.50); }
.ct-thumb-geography::after      { background: rgba(82,   82,  82, 0.50); }

.ct-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em;
}
.ct-card p { margin: 0; color: var(--ct-ink-dim); font-size: 0.84rem; line-height: 1.5; }
.ct-meta {
  margin-top: 0.7rem; display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--ct-ink-faint);
}
.ct-src { text-transform: uppercase; letter-spacing: 0.08em; }
.ct-pending {
  background: rgba(255,190,80,0.13); color: #f0c97a;
  padding: 0.15rem 0.5rem; border-radius: 3px;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.ct-geo {
  background: rgba(120,170,255,0.12); color: #9ab7e8;
  padding: 0.15rem 0.5rem; border-radius: 3px;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.ct-city-bubble {
  cursor: pointer;
  transition: stroke-width 0.12s ease;
}
.ct-city-bubble:hover { stroke: #fff; stroke-width: 1.2; }

.ct-footer {
  max-width: 1400px; margin: 4rem auto 2rem;
  padding: 2rem 2.5rem 0;
  border-top: 1px solid var(--ct-line);
  color: var(--ct-ink-faint); font-size: 0.8rem;
}
.ct-footer a { color: var(--ct-ink-dim); }
.ct-footer-meta { color: var(--ct-ink-faint); font-size: 0.72rem; }

/* ────────────────────────────────────────────────────────────
   ABOUT PAGE
   ──────────────────────────────────────────────────────────── */
.ct-about-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}
.ct-about-hero {
  margin-bottom: 3rem;
}
.ct-about-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.4rem 0 0.8rem;
  color: var(--ct-ink);
}
.ct-about-hero p {
  color: var(--ct-ink-dim);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 60ch;
}
.ct-about-section {
  margin-bottom: 2.8rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--ct-line);
}
.ct-about-section:last-child {
  border-bottom: none;
}
.ct-about-section h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--ct-ink);
}
.ct-about-section p {
  color: var(--ct-ink-dim);
  line-height: 1.7;
  margin: 0 0 0.8rem;
}
.ct-about-section p:last-child { margin-bottom: 0; }
.ct-about-section a { color: var(--ct-accent, #7eb3f5); }
.ct-about-list {
  color: var(--ct-ink-dim);
  line-height: 1.8;
  padding-left: 1.4rem;
  margin: 0.5rem 0 0.8rem;
}
.ct-about-list li { margin-bottom: 0.3rem; }
.ct-about-refresh {
  display: inline-block;
  margin-top: 0.6rem !important;
  background: rgba(120,170,255,0.08);
  border: 1px solid rgba(120,170,255,0.2);
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem !important;
  color: var(--ct-ink-dim) !important;
}
.ct-about-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 0.6rem;
}
.ct-about-table th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--ct-line);
  color: var(--ct-ink-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ct-about-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--ct-ink-dim);
  vertical-align: top;
}
.ct-about-table tr:last-child td { border-bottom: none; }
.ct-about-table a { color: var(--ct-accent, #7eb3f5); text-decoration: none; }
.ct-about-table a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .ct-about-wrap { padding: 2rem 1.2rem 4rem; }
  .ct-about-table th:nth-child(2),
  .ct-about-table td:nth-child(2) { display: none; }
}

/* ────────────────────────────────────────────────────────────
   DETAIL PAGE
   ──────────────────────────────────────────────────────────── */
.ct-app {
  display: flex;
  height: calc(100vh - 48px);
  width: 100%;
}

.ct-rail {
  width: 260px; flex-shrink: 0;
  background: var(--ct-rail);
  border-right: 1px solid var(--ct-line);
  overflow-y: auto;
  padding: 1rem 0;
}
.ct-rail-search { padding: 0 1rem 0.8rem; }
.ct-rail-search input {
  width: 100%;
  background: var(--ct-card); border: 1px solid var(--ct-line);
  color: var(--ct-ink); padding: 0.45rem 0.6rem; border-radius: 6px;
  font-size: 0.85rem; outline: none; font-family: inherit;
}
.ct-rail-search input:focus { border-color: var(--ct-accent); }
.ct-rail-group { margin-bottom: 0.4rem; }
.ct-rail-group-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ct-ink-faint); padding: 0.6rem 1rem 0.35rem;
}
.ct-rail-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.42rem 1rem; font-size: 0.86rem; color: var(--ct-ink-dim);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.ct-rail-link:hover { background: rgba(255,255,255,0.03); color: var(--ct-ink); }
.ct-rail-link.active {
  background: rgba(154,209,255,0.08); color: #dfeeff;
  border-left-color: var(--ct-accent);
  font-weight: 500;
}
.ct-rail-pending { opacity: 0.4; cursor: default; }
.ct-rail-pending:hover { background: transparent; color: var(--ct-ink-dim); }
.ct-rail-tag {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ct-ink-faint);
}

.ct-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.ct-mapbar {
  padding: 0.85rem 1.5rem 0.7rem;
  border-bottom: 1px solid var(--ct-line);
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
}
.ct-mapbar h1 {
  margin: 0 0 0.15rem;
  font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em;
}
.ct-mapbar-sub { color: var(--ct-ink-faint); font-size: 0.78rem; }
.ct-mapbar-sub strong { color: var(--ct-ink-dim); font-weight: 500; }
.ct-mapbar-sub a { color: var(--ct-ink-dim); border-bottom: 1px dotted rgba(255,255,255,0.2); }
.ct-mapbar-sub a:hover { color: var(--ct-ink); }

.ct-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.ct-toolgroup { display: flex; gap: 0.25rem; }
.ct-tbtn {
  background: var(--ct-card); border: 1px solid var(--ct-line); color: var(--ct-ink-dim);
  padding: 0.35rem 0.75rem; border-radius: 5px; font-size: 0.79rem;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: all 0.12s;
}
.ct-tbtn:hover { color: var(--ct-ink); border-color: var(--ct-line-strong); }
.ct-tbtn.active {
  background: rgba(154,209,255,0.14); border-color: var(--ct-accent); color: #dfeeff;
}
.ct-tbtn-grad { font-weight: 600; }

/* Gradient palette dropdown */
.ct-gradient-sel {
  background: var(--ct-card); border: 1px solid var(--ct-line); color: var(--ct-ink-dim);
  padding: 0.32rem 0.6rem; border-radius: 5px; font-size: 0.79rem;
  cursor: pointer; font-family: inherit;
  transition: border-color 0.12s;
}
.ct-gradient-sel:hover { border-color: var(--ct-line-strong); color: var(--ct-ink); }
.ct-gradient-sel:focus { outline: none; border-color: var(--ct-accent); color: var(--ct-ink); }

.ct-canvas-wrap {
  flex: 1; position: relative; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at center, rgba(154,209,255,0.04) 0%, transparent 60%),
    var(--ct-bg-2);
  min-height: 0;
}
.ct-canvas {
  flex: 1; position: relative;
  margin: 1rem 1.5rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--ct-line);
  overflow: hidden;
  min-height: 0;
}
#ct-svg {
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none;
}
#ct-svg:active { cursor: grabbing; }
.ct-county { stroke: rgba(0,0,0,0.45); stroke-width: 0.3; cursor: crosshair; }
.ct-county:hover { stroke: rgba(255,255,255,0.85); stroke-width: 1.8; }

.ct-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35); font-size: 0.9rem; pointer-events: none;
}
.ct-no-data {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 0.55rem;
  color: #ff9090; text-align: center; padding: 2rem;
}
.ct-no-data code {
  background: rgba(0,0,0,0.35); padding: 0.2rem 0.5rem;
  border-radius: 3px; font-size: 0.8rem; color: #ccc;
}

/* Floating zoom controls */
.ct-zoom-ctl {
  position: absolute; top: 0.85rem; left: 0.85rem;
  display: flex; flex-direction: column;
  background: rgba(15,18,25,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ct-line); border-radius: 6px; overflow: hidden;
  z-index: 5;
}
.ct-zoom-ctl button {
  width: 32px; height: 32px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--ct-line);
  color: var(--ct-ink-dim); cursor: pointer; font-size: 1.1rem;
  font-family: inherit;
}
.ct-zoom-ctl button:last-child { border-bottom: 0; }
.ct-zoom-ctl button:hover { color: var(--ct-ink); background: rgba(255,255,255,0.04); }

/* Legend strip — sits below the map, never over Alaska/Hawaii inset */
.ct-legend {
  padding: 0.3rem 1.5rem 0.55rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ct-legend-title {
  font-size: 0.7rem; color: var(--ct-ink-dim); margin-bottom: 0.3rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  align-self: flex-start; margin-left: 5%;
}
.ct-legend-svg { display: block; overflow: visible; width: 90%; height: 34px; }

.ct-data-note {
  padding: 0.3rem 1.5rem 0.6rem;
  font-size: 0.72rem; color: var(--ct-ink-faint);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .ct-data-note { padding: 0.2rem 0.6rem 0.5rem; }
}

/* Floating info card */
.ct-info {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 260px;
  background: rgba(15,18,25,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ct-line); border-radius: 10px;
  padding: 0.9rem 1rem;
  z-index: 5;
}
.ct-info-empty { color: var(--ct-ink-faint); font-size: 0.82rem; font-style: italic; }
.ct-info-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
.ct-info-stat {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; font-weight: 500; line-height: 1;
  color: var(--ct-accent); margin-bottom: 0.1rem;
}
.ct-info-label {
  font-size: 0.72rem; color: var(--ct-ink-faint);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.7rem;
}
.ct-info-rank {
  display: flex; justify-content: space-between;
  padding: 0.4rem 0; border-top: 1px solid var(--ct-line);
  font-size: 0.8rem;
}
.ct-info-rank span:first-child { color: var(--ct-ink-dim); }

/* Mobile info panel */
.ct-mobile-info {
  display: none;
  margin: 0 1rem 0.8rem;
  padding: 0.7rem 0.95rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ct-line); border-radius: 8px;
  font-size: 0.85rem; line-height: 1.55;
  color: var(--ct-ink-faint);
}
.ct-mobile-info.has-data { color: var(--ct-ink); }

@media (pointer: coarse) {
  .ct-info { display: none; }
  .ct-mobile-info { display: block; }
}

/* ────────────────────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ct-app { flex-direction: column; }
  .ct-rail {
    width: 100%; height: auto; max-height: none;
    border-right: 0; border-bottom: 1px solid var(--ct-line);
    padding: 0.5rem 0;
    display: flex; overflow-x: auto; overflow-y: hidden;
    flex-shrink: 0;
  }
  .ct-rail-search, .ct-rail-group-label { display: none; }
  .ct-rail-group { display: flex; flex-shrink: 0; }
  .ct-rail-link {
    white-space: nowrap;
    border-left: 0; border-bottom: 2px solid transparent;
    padding: 0.5rem 0.9rem;
  }
  .ct-rail-link.active { border-left: 0; border-bottom-color: var(--ct-accent); }
  .ct-mapbar { padding: 0.7rem 1rem; }
  .ct-mapbar h1 { font-size: 1.1rem; }
  .ct-canvas { margin: 0.6rem 0.6rem 0; }
  .ct-info { display: none; }
  .ct-mobile-info { display: block; margin: 0.6rem 0.6rem 0.4rem; }
  .ct-zoom-ctl { top: 0.5rem; left: 0.5rem; }
  .ct-legend { padding: 0.2rem 0.6rem 0.45rem; }
}
@media (max-width: 768px) {
  .ct-hero { padding: 2rem 1.2rem 1.2rem; }
  .ct-hero h1 { font-size: 2.2rem; }
  .ct-section, .ct-controls { padding-left: 1.2rem; padding-right: 1.2rem; }
  .ct-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .ct-card { padding: 0.9rem 1rem 0.85rem; }
  .ct-card .ct-thumb { height: 70px; margin: -0.9rem -1rem 0.7rem; }
}
@media (max-width: 480px) {
  .ct-grid { grid-template-columns: 1fr; }
}