/* Card panel skin. Only cp-, mc- and rc- class names appear here, so this file can never
   restyle the world chrome by accident. Every color is a token: light is the bare :root set,
   dark is redefined so the panel matches the surface it floats over. */

:root {
  --cp-surface: #fbf9f4;
  --cp-surface-raised: #ffffff;
  --cp-ink: #23241f;
  --cp-ink-muted: #5d6157;
  --cp-ink-secondary: #7a7f72;
  --cp-line: #ddd8cb;
  --cp-grid: #eae5d8;
  --cp-accent: #6b7f52;
  --cp-shadow: 0 6px 24px rgba(35, 36, 31, 0.16);
  --cp-radius: 10px;
  --cp-pad: 12px;
  --cp-font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-surface: #1c1e1a;
    --cp-surface-raised: #242721;
    --cp-ink: #eceadf;
    --cp-ink-muted: #b3b6a8;
    --cp-ink-secondary: #949889;
    --cp-line: #3a3d34;
    --cp-grid: #2e312a;
    --cp-accent: #a7bd85;
    --cp-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --cp-surface: #1c1e1a;
  --cp-surface-raised: #242721;
  --cp-ink: #eceadf;
  --cp-ink-muted: #b3b6a8;
  --cp-ink-secondary: #949889;
  --cp-line: #3a3d34;
  --cp-grid: #2e312a;
  --cp-accent: #a7bd85;
  --cp-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.cp-panel {
  position: absolute;
  width: 360px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: var(--cp-pad);
  background: var(--cp-surface);
  color: var(--cp-ink);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  font: var(--cp-font);
  z-index: 40;
}

.cp-panel[hidden] { display: none !important; }

.cp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cp-date {
  flex: 1 1 auto;
  color: var(--cp-ink-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.cp-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  min-height: 32px;
  background: var(--cp-surface-raised);
  color: var(--cp-ink);
  border: 1px solid var(--cp-line);
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

.cp-btn:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.cp-pinned { border-color: var(--cp-accent); }

.cp-legend {
  margin: 0 0 8px;
  padding: 8px;
  background: var(--cp-surface-raised);
  border: 1px solid var(--cp-line);
  border-radius: 8px;
}

.cp-legend[hidden] { display: none !important; }
.cp-legend-line { margin: 0 0 4px; color: var(--cp-ink-muted); }
.cp-legend-line:last-child { margin-bottom: 8px; color: var(--cp-ink); }

.cp-chart { margin-top: 8px; min-height: 20px; }
.cp-chart-pending { margin: 0; color: var(--cp-ink-secondary); font-size: 11px; }

.mc-card { margin: 0; }
.mc-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--cp-ink); }
.mc-lines { display: flex; flex-direction: column; gap: 3px; }
.mc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mc-label { flex: 1 1 auto; color: var(--cp-ink-muted); min-width: 0; overflow-wrap: anywhere; }
.mc-value { flex: 0 1 auto; margin-left: auto; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.mc-line-modeled .mc-value { color: var(--cp-ink); }
.mc-asterisk { color: var(--cp-ink-secondary); }
.mc-note { margin: 6px 0 0; color: var(--cp-ink-secondary); font-size: 11px; }
.mc-sources { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mc-source-link { color: var(--cp-ink-muted); font-size: 11px; }

.rc-chart { display: block; width: 100%; height: auto; }
.rc-band { fill: var(--cp-accent); fill-opacity: 0.18; }
.rc-mid { fill: none; stroke: var(--cp-accent); stroke-width: 2; }
.rc-share { fill: none; stroke: var(--cp-ink-secondary); stroke-width: 2; stroke-dasharray: 4 3; }
.rc-grid { stroke: var(--cp-grid); stroke-width: 1; }
.rc-rule { stroke: var(--cp-ink-muted); stroke-width: 1; }
.rc-axis-label, .rc-tick { fill: var(--cp-ink-muted); font-size: 10px; }

@media (max-width: 480px) {
  .cp-panel,
  .cp-panel.cp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 72vh;
    overflow-y: auto;
    border-radius: var(--cp-radius) var(--cp-radius) 0 0;
    border-width: 1px 0 0;
    padding-bottom: calc(var(--cp-pad) + env(safe-area-inset-bottom, 0px));
  }
  .cp-btn { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-panel { transition: none; }
}