:root {
  --bg-top: #f6f7f2;
  --bg-bottom: #ece5d8;
  --ink: #1f2421;
  --muted: #525a55;
  --panel: #ffffffcc;
  --stroke: #243c35;

  --quad-hate-bull: #f9dfdc;
  --quad-love-bull: #dcedde;
  --quad-hate-bear: #efd8d1;
  --quad-love-bear: #dbe2e9;

  --bubble: #153a5b;
  --bubble-hover: #0b253e;

  --daily-positive: #265d48;
  --daily-positive-hover: #1a4635;
  --daily-negative: #a33d34;
  --daily-negative-hover: #7f2d27;
  --daily-select: #32598133;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Work Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 16%, #ffffff99 0 16%, transparent 45%),
    radial-gradient(circle at 80% 8%, #f1e6ca80 0 20%, transparent 44%),
    linear-gradient(165deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.app-shell {
  width: min(1100px, 95vw);
  margin: 0 auto;
  padding: 1.4rem 0 2.2rem;
}

.page-header h1 {
  margin: 0.2rem 0 0.5rem;
  font-family: "Fraunces", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.status-line {
  margin: 0.2rem 0;
  font-size: 0.95rem;
}

#status {
  text-align: right;
}

.status-line.subtle {
  color: var(--muted);
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.6rem;
}

.controls-row--toggles {
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
}

.dataset-select {
  appearance: none;
  min-width: 12rem;
  padding: 0.38rem 2rem 0.38rem 0.72rem;
  border: 1px solid #b8c2bb;
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 50%, #55645d 50%) calc(100% - 14px) calc(50% - 2px) / 6px 6px no-repeat,
    linear-gradient(135deg, #55645d 50%, transparent 50%) calc(100% - 9px) calc(50% - 2px) / 6px 6px no-repeat,
    #fff;
  color: var(--ink);
  font: inherit;
}

.dataset-select:disabled {
  opacity: 0.7;
  cursor: wait;
}

.toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.toggle-control input {
  width: 1rem;
  height: 1rem;
  accent-color: #284f76;
}

.chart-panel {
  margin-top: 1rem;
  border: 1px solid #f8f8f8;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 20px 55px #00000014;
  overflow: hidden;
}

.chart-panel-header {
  padding: 0.95rem 1.1rem 0.1rem;
}

.chart-panel-header h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.chart-panel-header p {
  margin: 0.24rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.controls-row--daily {
  margin: 0.32rem 1.1rem 0.38rem;
}

#chart {
  width: 100%;
  min-height: 600px;
}

#daily-chart {
  width: 100%;
  min-height: 360px;
}

#daily-selection {
  margin: 0.15rem 1.1rem 0.4rem;
}

svg {
  display: block;
  width: 100%;
  height: auto;
}

.quad {
  opacity: 0.9;
}

.axis-line {
  stroke: #2f3f3988;
  stroke-width: 1.3;
}

.axis path,
.axis line {
  stroke: #4d5f5888;
}

.axis text {
  fill: var(--muted);
  font-size: 0.82rem;
}

.axis-label {
  fill: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.quadrant-label {
  fill: #384741;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bubble-link {
  cursor: pointer;
}

.bubble {
  fill: var(--bubble);
  fill-opacity: 0.84;
  stroke: #f4f2ec;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.bubble-link:hover .bubble,
.bubble-link:focus-visible .bubble {
  fill: var(--bubble-hover);
  fill-opacity: 1;
}

.bubble-link.is-muted .bubble {
  fill-opacity: 0.2;
}

.bubble-link.is-highlighted-despair .bubble {
  fill: url(#despair-highlight-pattern);
  fill-opacity: 1;
}

.bubble-link.is-highlighted-mania .bubble {
  fill: #b93a3f;
  fill-opacity: 1;
}

.bubble-link.is-highlighted-despair:hover .bubble,
.bubble-link.is-highlighted-despair:focus-visible .bubble {
  fill: url(#despair-highlight-pattern);
}

.bubble-link.is-highlighted-mania:hover .bubble,
.bubble-link.is-highlighted-mania:focus-visible .bubble {
  fill: #9f2c31;
}

.empty-state {
  padding: 2.8rem 1.2rem;
  text-align: center;
  color: var(--muted);
}

.daily-zero-line {
  stroke: #3a51488e;
  stroke-width: 1.2;
}

.daily-bar {
  shape-rendering: geometricPrecision;
  transition: fill 130ms ease, opacity 130ms ease;
}

.daily-bar.is-positive {
  fill: var(--daily-positive);
}

.daily-bar.is-negative {
  fill: var(--daily-negative);
}

.daily-bar.is-selected {
  opacity: 1;
}

.daily-bar.is-dimmed {
  opacity: 0.2;
}

.daily-bar.is-positive:hover {
  fill: var(--daily-positive-hover);
}

.daily-bar.is-negative:hover {
  fill: var(--daily-negative-hover);
}

.daily-brush .overlay {
  cursor: crosshair;
}

.daily-brush .selection {
  fill: var(--daily-select);
  stroke: #284c71;
}

.daily-brush .handle {
  fill: #284c71;
}

.art-panel {
  width: min(840px, 100%);
  margin: 1.15rem auto 0;
  padding: 0.55rem;
  border: 1px solid #f8f8f8;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 16px 42px #00000010;
}

.art-image {
  display: block;
  width: 100%;
  max-height: 72vh;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
}

.art-caption {
  margin: 0.45rem 0.2rem 0.1rem;
  color: var(--muted);
  font-size: 0.83rem;
  text-align: right;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 700px) {
  .controls-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .controls-row--toggles {
    gap: 0.3rem;
  }

  .controls-row--daily {
    margin: 0.3rem 0.9rem 0.35rem;
  }

  .dataset-select {
    width: 100%;
  }

  .toggle-control {
    width: 100%;
  }

  #chart {
    min-height: 0;
  }

  #daily-chart {
    min-height: 320px;
  }

  #daily-selection {
    margin: 0.2rem 0.9rem 0.42rem;
  }

  .axis text,
  .axis-label,
  .quadrant-label {
    font-size: 0.75rem;
  }

  .art-panel {
    padding: 0.45rem;
  }

  .art-caption {
    text-align: left;
  }
}