/* Palette ported from the desktop QSS (_SKY_QSS). */
:root {
  --bg: #10192c; --panel: #121c30; --card: #15243b; --line: #2a4066; --ink: #e8eef6;
  --muted: #8aa0bb; --meta: #c5d4e6; --body: #d5e0ec; --btn: #243352; --btn-hi: #3d5278;
  --green: #3ddc84; --amber: #f0c040; --red: #ff5c5c;
}
body { background: var(--bg); color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 13px; }
.app { max-width: 1500px; padding: 14px 16px 12px; }
a { color: #9ec5e8; }
.sky-body { color: var(--body); }
.sky-tip { color: #d7e4c8; }

.sky-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: #10203a; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.sky-title { color: #e7f3ff; font-size: 26px; font-weight: 700; line-height: 1.1; }
.sky-kicker { color: #8eb4d4; font-size: 13px; }
.sky-tagline { color: #c5d7ea; font-size: 12px; letter-spacing: .3px; }
.sky-quote-row { align-items: center; gap: 10px; }
.sky-quote { color: #9eb4cc; font-size: 12px; font-style: italic; text-align: right; }

.sky-meta { color: var(--meta); font-size: 12px; }
.sky-label { color: var(--ink); font-size: 13px; }
.input-group-text.sky-label { background: transparent; border: 0; padding-left: 0; }
.form-control, .form-select { background-color: #0f1728; border-color: #3d5278; color: var(--ink); }
.form-control:focus, .form-select:focus { background-color: #0f1728; color: #fff; border-color: #5a7db5; box-shadow: 0 0 0 .2rem rgba(90,125,181,.25); }
.coord { width: 120px; }
.night-select { width: auto; min-width: 220px; background-color: var(--btn); }

.btn-sky { background: var(--btn); color: var(--ink); border: 1px solid #3a4c70; padding: 4px 14px; }
.btn-sky:hover, .btn-sky:focus { background: var(--btn-hi); color: #fff; }
.btn-sky:disabled { opacity: .55; }

.info-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--btn-hi); background: #1c314f; color: #9ec5e8;
  font-weight: 700; font-size: 12px; line-height: 1; padding: 0; margin-left: 6px; cursor: help; }
.info-dot:hover { background: #274268; color: #fff; }

.sky-status { color: var(--ink); font-size: 13px; }
.sky-status.error { color: var(--red); font-weight: 600; }

/* summary cards: 9 across like the desktop window, 3x3 on a narrow one */
.cards-wrap { container-type: inline-size; }
.cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 992px) { .cards-row { grid-template-columns: repeat(9, 1fr); } }
.sky-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; min-width: 0; }
.sky-caption { color: var(--muted); font-size: 11px; }
.sky-card-body { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; flex-wrap: wrap; }
.sky-value { color: #f4f7fb; font-size: 17px; font-weight: 700; white-space: nowrap; }
@container (max-width: 1300px) {                    /* tighter cards: stack the icon over the value */
  .cards-row .sky-card-body { flex-direction: column; gap: 2px; }
  .cards-row .sky-value { font-size: 14px; }
}
@container (max-width: 700px) {                     /* 3x3 layout has room again */
  .cards-row .sky-card-body { flex-direction: row; gap: 8px; }
  .cards-row .sky-value { font-size: 17px; }
}
.sky-section { color: #e7f0fa; font-size: 15px; font-weight: 600; }

/* hourly panel */
.sky-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.sky-example { background: #1a2740; border: 1px solid var(--btn-hi); border-radius: 8px; padding: 8px 10px; width: 210px; }
.lc { font-size: 14px; }
.hourly-wrap { max-height: 520px; overflow: auto; border-radius: 6px; }
.sky-table { --bs-table-bg: #0e1728; --bs-table-color: var(--ink); color: var(--ink); border-color: #243656; margin: 0; }
.sky-table thead th { background: #122033; color: #d5e2f0; font-size: 12px; font-weight: 600; border-color: #243656; position: sticky; top: 0; z-index: 1; vertical-align: middle; }
.sky-table thead tr:nth-child(2) th { top: 24px; text-align: center; }
.sky-table .grp { text-align: center; font-size: 11px; }
.sky-table .sub { font-weight: 400; color: var(--muted); font-size: 11px; }
.sky-table tbody tr { background: #0e1728; }
.sky-table tbody tr:nth-child(even) { background: #132033; }
.sky-table td { border-color: transparent; background: transparent; color: inherit; padding: .22rem .5rem; }
.sky-table td.num { font-variant-numeric: tabular-nums; }
.consensus-col { min-width: 160px; }

/* tabs */
.sky-tabs { border-bottom: 1px solid var(--line); }
.sky-tabs .nav-link { background: #1c2940; color: #c8d0dc; border: 1px solid #2e3d58; border-bottom: none; border-radius: 0; padding: 7px 14px; margin-right: 1px; }
.sky-tabs .nav-link.active { background: #243352; color: #f4f7fb; }
.sky-pane { background: var(--panel); border: 1px solid var(--line); border-top: 0; padding: 14px 16px; min-height: 160px; }
.why-text { white-space: pre-wrap; }
.about { max-width: 900px; }
.about .pre { white-space: pre-line; }
.about hr { border-color: #3d5278; opacity: 1; }
.sky-modal { background: #121c30; border: 1px solid var(--line); }
.sky-modal .list-group-item { background: #15243b; color: var(--ink); border-color: var(--line); }
.sky-modal .list-group-item:hover { background: #1d3354; }
.sky-modal .modal-header, .sky-modal .modal-footer { border-color: var(--line); }
footer a { color: #6fa8dc; }

@media (max-width: 767px) {
  .sky-title { font-size: 21px; }
  .btn-sky, .form-control, .form-select { min-height: 44px; }
  .coord { width: 100%; }
  .night-select { width: 100%; }
}

/* Clear Nights panel */
.cn-grid { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: flex-start; margin: 10px 0 8px; }
.cn-main { flex: 1 1 320px; }
.cn-line { font-size: 15px; color: #e7f0fa; }
.cn-num { font-size: 34px; font-weight: 700; color: var(--green); line-height: 1; margin: 0 4px 0 6px; vertical-align: -3px; }
.cn-of { font-size: 15px; color: var(--meta); }
.cn-status.error { color: var(--red); font-weight: 600; }
.cn-months { flex: 0 1 330px; min-width: 260px; }
.cn-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cn-table th { color: var(--muted); font-weight: 500; padding: 1px 6px; border-bottom: 1px solid #243656; }
.cn-table td { padding: 2px 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-barcell { width: 42%; }
.cn-bar { height: 8px; background: #1c2940; border-radius: 4px; overflow: hidden; }
.cn-bar > div { height: 100%; background: var(--green); border-radius: 4px; }
.cn-note { color: var(--muted); font-size: 11.5px; line-height: 1.45; }