/* docs-week v1 — styles. Theme-aware via the site-wide CSS variables
 * (:root / [data-theme="dark"] custom properties defined in the layout). */

.docs-week { margin: 1.5rem 0; }

/* No-JS fallback: the embedded JSON data stays readable as plain text.
 * week.js adds .dw-ready and builds the interactive chrome instead. */
.docs-week > script[type="application/json"] {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--fg-subtle, #78716c);
  background: var(--bg-subtle, #f5f5f4);
  border: 1px dashed var(--border-strong, rgba(12,10,9,0.14));
  border-radius: 10px;
  padding: 0.8rem 1rem;
  overflow-x: auto;
}
.docs-week.dw-ready > script[type="application/json"] { display: none; }

.dw-error { color: #dc2626; font-size: 0.84rem; margin-top: 0.5rem; }

.dw-chrome {
  position: relative;
  border: 1px solid var(--border, rgba(12,10,9,0.08));
  border-radius: 14px;
  background: var(--bg-elevated, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(12,10,9,0.04));
  padding: 0.85rem 1rem 0.9rem;
  overflow: hidden;
}

/* Toolbar */
.dw-toolbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.dw-play {
  display: inline-flex; align-items: center; gap: 0.42rem;
  padding: 0.34rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong, rgba(12,10,9,0.14));
  background: var(--bg-elevated, #fff);
  color: var(--fg, #0c0a09);
  font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dw-play:hover { border-color: #146BFF; color: #146BFF; }
.dw-scrub {
  flex: 1; min-width: 120px;
  accent-color: #146BFF;
  height: 4px;
  cursor: pointer;
}
.dw-readout {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--fg, #0c0a09);
  min-width: 6.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dw-riskpill {
  font-size: 0.68rem; font-weight: 700;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.07);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s, transform 0.2s;
}
.dw-riskpill.on { opacity: 1; transform: scale(1); }

/* Canvas */
.dw-scroll { overflow-x: auto; }
.dw-svg { display: block; width: 100%; min-width: 720px; height: auto; cursor: crosshair; }

.dw-band { fill: var(--fg, #0c0a09); opacity: 0.028; }
.dw-grid { stroke: var(--border, rgba(12,10,9,0.08)); stroke-width: 1; }
.dw-grid-y { stroke-dasharray: 2 4; }
.dw-daylabel {
  font: 700 12px 'Inter', system-ui, sans-serif;
  fill: var(--fg-subtle, #78716c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: fill 0.2s;
}
.dw-daylabel.cur { fill: #146BFF; }
.dw-lanelabel { font: 600 11px 'Inter', system-ui, sans-serif; fill: var(--fg-subtle, #78716c); }
.dw-lanesep { stroke: var(--border, rgba(12,10,9,0.08)); stroke-width: 1; }
.dw-ylabel { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; fill: var(--fg-subtle, #78716c); }

/* Risk windows */
.dw-risk rect {
  fill: rgba(220, 38, 38, 0.05);
  stroke: rgba(220, 38, 38, 0.28);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  transition: fill 0.25s;
}
.dw-risk.on rect { fill: rgba(220, 38, 38, 0.12); }
.dw-risk.hit rect {
  fill: rgba(220, 38, 38, 0.16);
  stroke: rgba(220, 38, 38, 0.75);
  stroke-dasharray: none;
}

/* Divergence band between the two curves */
.dw-diff { fill: rgba(217, 119, 6, 0.15); }

/* Event markers */
.dw-ev { opacity: 0.22; transition: opacity 0.25s; }
.dw-ev circle, .dw-ev rect { stroke-width: 2; }
.dw-ev.on { opacity: 1; animation: dw-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); transform-box: fill-box; transform-origin: center; }
@keyframes dw-pop {
  0% { transform: scale(0.35); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.dw-ghost { opacity: 0.3; }
.dw-ghost circle, .dw-ghost rect { stroke-dasharray: 3 2.5; fill: none; }
.dw-ghost.on { opacity: 0.85; }

.dw-delta {
  font: 800 11px 'JetBrains Mono', ui-monospace, monospace;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(4px);
}
.dw-delta.on { opacity: 1; transform: translateY(0); }

/* Curves + playhead */
.dw-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.dw-line-app { stroke-dasharray: 6 3; }
.dw-head { stroke: #146BFF; stroke-width: 1.5; opacity: 0.9; }

/* Count-test flag */
.dw-count { opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.dw-count.on { opacity: 1; }
.dw-countline { stroke: #16a34a; stroke-width: 1.8; stroke-dasharray: 5 3; }
.dw-count.bad .dw-countline { stroke: #dc2626; }
.dw-countlbl { font: 700 11px 'Inter', system-ui, sans-serif; fill: #16a34a; }
.dw-count.bad .dw-countlbl { fill: #dc2626; }

/* Tooltip */
.dw-tip {
  position: absolute;
  z-index: 5;
  max-width: 22rem;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  background: var(--fg, #0c0a09);
  color: var(--bg-elevated, #fff);
  font-size: 0.74rem;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(12, 10, 9, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.dw-tip.on { opacity: 1; }
.dw-tip b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* Footer: caption + live counters */
.dw-footer {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem; margin-top: 0.65rem; flex-wrap: wrap;
}
.dw-caption {
  font-size: 0.8rem;
  color: var(--fg-muted, #57534e);
  min-height: 1.3em;
  flex: 1 1 22rem;
}
.dw-caption b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  color: var(--fg, #0c0a09);
  font-variant-numeric: tabular-nums;
}
.dw-counters { display: inline-flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.dw-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 500;
  color: var(--fg-muted, #57534e);
  white-space: nowrap;
}
.dw-chip b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--fg, #0c0a09);
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
}
.dw-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.dw-gap {
  font-size: 0.7rem; font-weight: 700;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dw-gap.off {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.09);
}

/* Count verdict + hint */
.dw-verdict {
  display: none;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.45rem 0.7rem;
  border-radius: 9px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.dw-verdict.on { display: block; }
.dw-verdict b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.dw-verdict.ok {
  color: #15803d;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.3);
}
.dw-verdict.bad {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.07);
  border: 1px solid rgba(220, 38, 38, 0.32);
}
.dw-clear {
  margin-left: 0.55rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.75;
}
.dw-clear:hover { opacity: 1; }
.dw-hint {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--fg-subtle, #78716c);
  transition: opacity 0.3s;
}
.dw-hint.gone { opacity: 0; height: 0; margin: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dw-ev.on { animation: none; }
}