/* CycleCalcs observatory widgets (darknights, targets, upcoming): rules on top
   of embed.css. A separate file so embed.css, and the ?v of every older
   payload that loads it, stays untouched. Bump the ?v in the three payloads
   when this file changes.
   The chart colors are tokens so the license accent and both themes reach
   them; --accent itself still comes from embed.css. */
:root {
  --ob-moonless: #4f6bed; --ob-moonlit: #c9d0ec; --ob-twilight: #e8ebf5;
  /* Light-theme verdict colors are dark enough for 4.5:1 as 10.5px pill text
     on their own 14% tint over white. */
  --ob-good: #0b6b45; --ob-fair: #855409; --ob-poor: #a3330a; --ob-none: #6b7183;
  --ob-moon: #b8860b; --ob-grid: #e4e7ec;
}
:root[data-theme="dark"] {
  --ob-moonless: #8ea2ff; --ob-moonlit: #2d3768; --ob-twilight: #161c3a;
  --ob-good: #4cc38a; --ob-fair: #e0b44c; --ob-poor: #ef8a63; --ob-none: #5d6480;
  --ob-moon: #f2c96b; --ob-grid: #2a3157;
}
body[data-widget="darknights"], body[data-widget="targets"], body[data-widget="upcoming"] { min-height: 0; }
.ob-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 0; }
.ob-stat { font-size: 12px; color: var(--muted); line-height: 1.3; }
.ob-stat b { display: block; font-size: 14.5px; color: var(--text); font-weight: 800; letter-spacing: -.01em; }
.ob-chart svg { display: block; width: 100%; height: auto; font-variant-numeric: tabular-nums; }
.ob-chart text { font-family: inherit; }
.ob-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--muted); }
.ob-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ob-legend[hidden], .cc-foot[hidden] { display: none; }
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ob-list > li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.ob-list > li:first-child { border-top: 0; }
.ob-when { flex: 0 0 74px; font-size: 11.5px; color: var(--muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
.ob-when b { display: block; color: var(--text); font-size: 12.5px; }
.ob-what { min-width: 0; flex: 1 1 auto; }
.ob-what b { font-size: 13px; }
.ob-what p { margin: 1px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.ob-kind { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-left: 6px; white-space: nowrap; }
.ob-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.ob-good { color: var(--ob-good); background: color-mix(in srgb, var(--ob-good) 14%, transparent); }
.ob-fair { color: var(--ob-fair); background: color-mix(in srgb, var(--ob-fair) 14%, transparent); }
.ob-poor { color: var(--ob-poor); background: color-mix(in srgb, var(--ob-poor) 14%, transparent); }
.ob-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
table.ob-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ob-table th { text-align: left; font-weight: 700; color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.ob-table td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ob-table tr:last-child td { border-bottom: 0; }
.ob-table .ob-num { text-align: right; white-space: nowrap; }
.kit-geo {
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; cursor: pointer; margin-top: 4px;
}
.kit-geo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-card > .kit-geo { align-self: flex-start; }