/* Scoped 14-night calendar. The data renderer owns the dynamic values. */
body.shoot-nights-page { color: var(--shoot-text); }
body.shoot-nights-page main.container { width: 100%; max-width: none; margin: 0 !important; padding: 0; }
body.shoot-nights-page .nights-shell { width: min(100% - 32px, 760px); margin: 0 auto; padding: 20px 0 calc(100px + env(safe-area-inset-bottom, 0px)); }

.nights-page-header, .nights-controls, .nights-context, .night-chart-heading, .night-chart-legends, .night-list-heading, .best-night-callout { display: flex; align-items: center; }
.nights-page-header { justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.nights-page-kicker, .nights-control-label, .night-chart-heading span, .night-list-heading span { margin: 0 0 4px; color: var(--shoot-text-dim); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nights-page-header h1 { margin: 0; color: var(--shoot-text); font-size: clamp(1.28rem, 4vw, 1.5rem); font-weight: 700; letter-spacing: -.025em; }
.nights-share-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; color: var(--shoot-accent); font: inherit; font-size: .76rem; font-weight: 700; background: var(--shoot-accent-soft); border: 1px solid var(--shoot-accent-line); border-radius: 9px; }
.nights-share-button:hover { background: var(--shoot-accent-soft); }

.nights-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 12px; padding: 14px; background: var(--shoot-surface); border: 1px solid var(--shoot-line); border-radius: 15px; box-shadow: var(--shoot-card-shadow); backdrop-filter: var(--shoot-blur); }
.nights-point-control, .nights-target-nav { min-width: 0; }
.nights-point-control label { display: block; margin-bottom: 5px; color: var(--shoot-text-dim); font-size: .72rem; }
.nights-point-control select { width: 100%; min-height: 42px; padding: 0 34px 0 12px; overflow: hidden; color: var(--shoot-text); font: inherit; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; background: var(--shoot-surface-strong); border: 1px solid var(--shoot-line-strong); border-radius: var(--shoot-radius-control); }
.nights-target-nav { text-align: right; }
.nights-target-nav .nights-control-label { display: block; }
.nights-target-nav [role="tablist"] { display: flex; gap: 3px; padding: 3px; overflow-x: auto; background: var(--shoot-surface-strong); border: 1px solid var(--shoot-line); border-radius: var(--shoot-radius-control); }
.nights-target-nav button { flex: 1 1 auto; min-height: 34px; padding: 0 10px; color: var(--shoot-text-dim); font: inherit; font-size: .74rem; white-space: nowrap; background: transparent; border: 0; border-radius: 7px; }
.nights-target-nav button.active { color: var(--shoot-accent); font-weight: 700; background: var(--shoot-accent-soft); box-shadow: inset 0 0 0 1px var(--shoot-accent-line); }

.nights-context { flex-wrap: wrap; gap: 5px 10px; min-height: 25px; margin: 0 1px 16px; color: var(--shoot-text-dim); font-size: .75rem; line-height: 1.45; }
.nights-context p { margin: 0; }
#nightsRange { color: #cbd6e4; font-weight: 600; }
#lightPollution { padding: 2px 6px; color: var(--shoot-accent-2); font-size: .69rem; background: var(--shoot-accent-2-soft); border: 1px solid var(--shoot-accent-2-line); border-radius: 5px; }
#nightsLocationStatus { flex: 1 1 100%; color: var(--shoot-text-dim); }
#nightsLocationStatus:empty { display: none; }

.best-night-callout { justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 13px 14px; background: linear-gradient(100deg, var(--shoot-accent-2-soft), var(--shoot-accent-soft)); border: 1px solid var(--shoot-accent-2-line); border-radius: 13px; }
.best-night-copy { display: grid; min-width: 0; gap: 3px; }
.best-night-title { overflow: hidden; color: var(--shoot-text); font-size: .88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.best-night-details { overflow: hidden; color: #aab8ca; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.best-night-rating-block { display: grid; min-width: 72px; place-items: center; }

.night-chart-card { margin-bottom: 22px; padding: 16px 14px 12px; overflow: hidden; background: var(--shoot-surface); border: 1px solid var(--shoot-line); border-radius: 16px; box-shadow: var(--shoot-card-shadow); backdrop-filter: var(--shoot-blur); }
.night-chart-heading { justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.night-chart-heading h2, .night-list-heading h2 { margin: 0; color: #e9eef6; font-size: .94rem; font-weight: 700; letter-spacing: -.01em; }
.night-chart-heading span { margin: 0; font-size: .65rem; }
.night-bar-chart { display: flex; align-items: end; justify-content: space-between; gap: .2rem; width: 100%; height: 126px; }
.night-bar-item { appearance: none; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; padding: 0 .08rem; color: inherit; background: transparent; border: 0; }
.night-bar-area { display: flex; align-items: end; height: 88px; }
.night-bar { display: block; width: 100%; min-width: 8px; max-width: 22px; background: var(--shoot-accent-2); border-radius: .22rem .22rem 0 0; }
.night-bar.is-excellent { background: var(--shoot-score-excellent); }
.night-bar.is-good { background: var(--shoot-score-good); }
.night-bar.is-fair { background: var(--shoot-score-fair); }
.night-bar.is-caution { background: var(--shoot-score-caution); }
.night-bar.is-poor { background: var(--shoot-score-poor); }
.night-bar.is-astronomy-only { background: transparent; border: 2px solid var(--shoot-accent-2); }
.night-bar.is-astronomy-only.is-excellent { border-color: var(--shoot-score-excellent); }
.night-bar.is-astronomy-only.is-good { border-color: var(--shoot-score-good); }
.night-bar.is-astronomy-only.is-fair { border-color: var(--shoot-score-fair); }
.night-bar.is-astronomy-only.is-caution { border-color: var(--shoot-score-caution); }
.night-bar.is-astronomy-only.is-poor { border-color: var(--shoot-score-poor); }
.night-bar-date { color: #8594aa; font-size: clamp(.57rem, 2.2vw, .68rem); line-height: 1; white-space: nowrap; }
.night-bar-item.is-best .night-bar-date { color: var(--shoot-accent-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.night-bar-item.is-locked { opacity: .54; }
.night-chart-legends { flex-wrap: wrap; gap: 7px 12px; margin-top: 11px; color: var(--shoot-text-dim); font-size: .66rem; }
.night-chart-forecast { display: inline-flex; align-items: center; gap: 4px; }
.night-chart-forecast i { width: 9px; height: 9px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 2px; }
.night-chart-forecast.is-forecast i { background: rgba(255, 255, 255, .55); }
.night-score-scale { display: inline-flex; gap: 3px; margin-left: auto; }
.night-score-scale i { width: 7px; height: 7px; border-radius: 50%; }
.night-score-scale .is-excellent { background: var(--shoot-score-excellent); }
.night-score-scale .is-good { background: var(--shoot-score-good); }
.night-score-scale .is-fair { background: var(--shoot-score-fair); }
.night-score-scale .is-caution { background: var(--shoot-score-caution); }
.night-score-scale .is-poor { background: var(--shoot-score-poor); }

.night-list-heading { justify-content: space-between; gap: 12px; padding: 0 2px 8px; border-bottom: 1px solid rgba(117, 139, 170, .28); }
.night-list-heading span { margin: 0; font-size: .63rem; }
#nightList { min-width: 0; }
.night-row { position: relative; display: grid; grid-template-columns: 4.45rem 26px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 76px; padding: 10px 3px 10px 10px; border-bottom: 1px solid rgba(117, 139, 170, .2); }
.night-row.locked { opacity: .65; grid-template-columns: 4.45rem minmax(0, 1fr) auto; }
.night-row.is-linkable { cursor: pointer; }
.night-row.is-linkable:hover, .night-row.is-linkable:focus-visible { background: rgba(117, 139, 170, .12); outline: none; }
.night-row::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; border-radius: 2px; background: var(--shoot-ring-track); }
.night-row.is-excellent { background: var(--shoot-score-excellent-soft); }
.night-row.is-excellent::before { background: var(--shoot-score-excellent); }
.night-row.is-good { background: var(--shoot-score-good-soft); }
.night-row.is-good::before { background: var(--shoot-score-good); }
.night-row.is-fair { background: var(--shoot-score-fair-soft); }
.night-row.is-fair::before { background: var(--shoot-score-fair); }
.night-row.is-caution { background: var(--shoot-score-caution-soft); }
.night-row.is-caution::before { background: var(--shoot-score-caution); }
.night-row.is-poor { background: var(--shoot-score-poor-soft); }
.night-row.is-poor::before { background: var(--shoot-score-poor); }
.night-date { min-width: 0; color: #e5eaf2; font-size: .79rem; line-height: 1.3; text-align: center; }
.night-date-main, .night-weekday { display: block; }
.night-weekday { margin-top: 1px; color: #8898b0; font-size: .65rem; }
.night-moon-block { display: grid; align-items: center; justify-items: center; gap: 1px; min-width: 0; }
/* 月相グラフィック（moon_phase.js）の描画枠。行の高さに対して過剰にならない控えめなサイズにする。 */
.night-moon { width: 26px; height: 26px; }
.night-moon-illumination { color: #8493a9; font-size: .58rem; line-height: 1; }
.night-details { min-width: 0; }
.night-window { display: block; overflow: hidden; color: #e7edf6; font-size: .82rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.night-meta { display: block; margin-top: 3px; overflow: hidden; color: var(--shoot-text-dim); font-size: .7rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.night-meta > span + span::before { margin: 0 5px; color: rgba(145, 161, 183, .55); content: "·"; }
.night-cloud.is-low { color: var(--shoot-cloud-low); }
.night-cloud.is-mid { color: var(--shoot-cloud-mid); }
.night-cloud.is-high { color: var(--shoot-cloud-high); }
/* 14夜リストの行はスコア帯の淡い面（--shoot-score-*-soft）を敷くため、雲量テキストの実効背景が
   素のカード面より明るくなる。旧パレット（黄・橙の帯）ではここで3系列を白へ10%持ち上げる
   ハードコード上書きが必要だったが、シアン⇄バイオレットへ集約した新しい帯は最も明るい
   excellent 帯でも Y=0.0157 と暗く、共有トークンのまま low 4.80 / mid 6.12 / high 7.93 で
   通常テキストAA（4.5:1）を満たすため上書きを廃止した。
   --shoot-cloud-low をこれ以上暗くすると、この行だけAAを割るので注意。 */
.night-forecast-note { color: #ab94db; }
.night-score { display: grid; min-width: 46px; padding-left: 10px; place-items: center; text-align: center; border-left: 1px solid rgba(117, 139, 170, .2); }
.night-astro-caption { margin-top: 3px; color: var(--shoot-text-faint); font-size: .58rem; line-height: 1.1; white-space: nowrap; }
.night-rating { display: block; margin-top: 3px; font-size: .65rem; font-weight: 700; line-height: 1; }
.night-locked-copy { min-width: 0; color: #9aa7ba; font-size: .76rem; line-height: 1.4; }
.night-locked-status { display: grid; justify-items: center; gap: 3px; min-width: 42px; padding-left: 8px; color: #bba4dd; text-align: right; border-left: 1px solid rgba(117, 139, 170, .2); }
.night-lock-icon { font-size: .85rem; line-height: 1; }

.nights-share-button:focus-visible, .nights-point-control select:focus-visible, .nights-target-nav button:focus-visible, .night-bar-item:focus-visible { outline: 2px solid var(--shoot-accent); outline-offset: 2px; }
[hidden] { display: none !important; }

@media (max-width: 590px) {
    body.shoot-nights-page .nights-shell { width: min(100% - 24px, 760px); padding-top: 15px; }
    body.shoot-nights-page .header-logo { height: 34px; margin: -4px 0; filter: none; }
    .nights-controls { padding: 12px; }
    .night-chart-card { padding-right: 10px; padding-left: 10px; }
    .night-row { grid-template-columns: 3.72rem 24px minmax(0, 1fr) auto; gap: 8px; min-height: 71px; }
    .night-row.locked { grid-template-columns: 3.72rem minmax(0, 1fr) auto; }
    .night-moon { width: 24px; height: 24px; }
    .night-score { min-width: 46px; padding-left: 8px; }
}

@media (max-width: 390px) {
    .nights-context { gap: 4px 7px; font-size: .7rem; }
    .night-chart-legends { gap: 6px 8px; font-size: .61rem; }
    .night-score-scale { margin-left: 0; }
    .night-row { grid-template-columns: 3.42rem 22px minmax(0, 1fr) 38px; gap: 6px; padding-top: 9px; padding-bottom: 9px; }
    .night-row.locked { grid-template-columns: 3.42rem minmax(0, 1fr) 38px; }
    .night-moon { width: 22px; height: 22px; }
    .night-date { font-size: .72rem; }
    .night-window { font-size: .73rem; }
    .night-meta { font-size: .64rem; }
    .night-score { min-width: 46px; padding-left: 5px; }
    .night-rating { font-size: .58rem; }
    .night-locked-copy { font-size: .68rem; }
}

@media (max-width: 359.98px) {
    .nights-controls { grid-template-columns: 1fr; }
    .nights-target-nav { text-align: left; }
    .nights-target-nav [role="tablist"] { width: 100%; }
    .nights-target-nav button { min-width: 0; }
}

@media (max-width: 991.98px) {
    body.shoot-nights-page ~ .mobile-bottom-nav { background: var(--shoot-bg); border-top-color: var(--shoot-line); box-shadow: 0 -8px 24px rgba(4, 2, 18, .28); }
}

@media (prefers-reduced-motion: reduce) {
    .nights-share-button, .nights-target-nav button, .night-bar-item { transition: none; }
}