/* 純黒カラーシステム。設計と各値の根拠は
   docs/planned/shoot_color_system_redesign_2026-08-29.md § 2.2 を参照。
   先行導入した body.shoot-tonight-page / body.shoot-night-page のスコープ値を
   そのまま昇格させたもので、値の二重管理を避けるため各画面CSS側の定義は削除済み。

   ただしスコア5段階・雲3層・警告・結露・未評価マーカーは、その後の「2アクセントへの
   配色集約」フェーズで同ドキュメント § 6 の値へ置き換わっている（§ 2.2 の表はもう現行値
   ではない）。触る前に § 6.3 の制約4点を読むこと。 */
:root {
    /* 地色・面。地は純黒に固定し、階層は面の明度差・1px境界線・内側ハイライトで作る。 */
    --shoot-bg: #000000;
    --shoot-bg-gradient: none;
    --shoot-surface: rgba(255, 255, 255, .055);          /* カード面（blurと併用）。黒上の合成は約 #0e0e0e */
    --shoot-surface-strong: rgba(255, 255, 255, .09);    /* コントロール・セグメント面。黒上の合成は約 #171717 */
    --shoot-surface-solid: #11131a;                      /* blurを使えない箇所の不透明面 */
    --shoot-line: rgba(255, 255, 255, .14);
    --shoot-line-strong: rgba(255, 255, 255, .28);

    /* 文字 */
    --shoot-text: #f4f6fb;
    --shoot-text-dim: #b7bac8;
    --shoot-text-faint: #9296a8;   /* 最も暗い文字も純黒上 7.15:1 で通常テキストAAを満たす */

    /* アクセント（金は全廃） */
    --shoot-accent: #00d2ff;                        /* 主: 操作・選択・フォーカス */
    --shoot-accent-soft: rgba(0, 210, 255, .14);
    --shoot-accent-line: rgba(0, 210, 255, .50);
    --shoot-accent-2: #b57cff;                      /* 副: ブランド強調・マーカー・ベスト夜 */
    --shoot-accent-2-soft: rgba(181, 124, 255, .16);
    /* バイオレットは同じalphaだとシアンより暗いので線だけ個別に補正（黒上 3.24:1） */
    --shoot-accent-2-line: rgba(181, 124, 255, .62);
    /* 注意喚起（オフライン・エラー・撮影不可・モデル予報割れ・日曜）。かつては橙 #ff9a76 だったが、
       「シアン＝正常/操作」「バイオレット＝注意」の2軸へ集約するため accent-2 と同値へ統合した。
       トークンは意味が違うので名前ごと畳まないこと（将来ここだけ調整できる余地を残す）。 */
    --shoot-warn: #b57cff;
    --shoot-warn-soft: rgba(181, 124, 255, .16);
    /* 結露リスク（スコア帯とは別軸）。水・湿気はシアン側に置く。2階調は night.css の
       is-dew-mid / is-dew-high が使い分けるので残す。 */
    --shoot-dew: #58bcd8;
    --shoot-dew-strong: #8fe3f7;
    --shoot-dew-soft: rgba(143, 227, 247, .16);
    /* 未評価の地図マーカー。無彩色グレーだと第三の色に見えるので、彩度を落としたシアングレーへ寄せる。 */
    --shoot-neutral-marker: #6f8791;
    /* 月。黄色は「月というオブジェクトそのものの色」としての例外で、
       スコア・ボタン・見出しなど他のUIへ金・琥珀を広げないこと（競合との差別化方針）。 */
    --shoot-moon: #ffd45e;                          /* 明部 */
    --shoot-moon-dark: #2b2f3a;                     /* 暗部。純黒より僅かに明るくして面を見せる */
    --shoot-moon-line: rgba(255, 212, 94, .5);      /* 輪郭。新月でも「月がある」ことが分かるように残す */

    /* スコア5段階。緑/青/黄/橙/ピンク紫の5色相をやめ、accent(シアン)→accent-2(バイオレット)を
       結ぶ1本のグラデーションへ集約した。「最高」はブランドのシアンそのもの、そこから彩度と
       明度を段階的に落として「厳しめ」を最も暗いバイオレットに置く（悪さを暗さで表す）。
       各段のCIE L* は 78.1 / 72.2 / 66.3 / 60.3 / 54.6 で、隣接段の差は 5.6〜6.0 に揃えてある。
       値を触るときは L* の等間隔と、純黒上の通常文字コントラスト4.5:1（poorが最小で 5.51:1）を
       同時に満たすこと。特に poor は L* を下げすぎるとリング数値(.92rem)がAAを割る。 */
    --shoot-score-excellent: #00d2ff;   /* = --shoot-accent */
    --shoot-score-good: #46c0d8;
    --shoot-score-fair: #90a2c2;        /* シアンとバイオレットの中間。text-dim(L*75.7)とは差9.4で分離 */
    --shoot-score-caution: #9f85ca;
    --shoot-score-poor: #8e79b0;
    /* 意味色の淡い面。-soft は控えめな地色（フラッシュ等）、-fill は塗りとして見せる用。
       アルファ比率(.18 / .38)は据え置き、実色だけ上の新しい5段から作り直してある。
       color-mix() は使わない（非対応環境で background の宣言ごと落ちる）。 */
    --shoot-score-excellent-soft: rgba(0, 210, 255, .18);
    --shoot-score-excellent-fill: rgba(0, 210, 255, .38);
    --shoot-score-good-soft: rgba(70, 192, 216, .18);
    --shoot-score-fair-soft: rgba(144, 162, 194, .18);
    --shoot-score-caution-soft: rgba(159, 133, 202, .18);
    --shoot-score-poor-soft: rgba(142, 121, 176, .18);
    --shoot-ring-track: rgba(255, 255, 255, .14);

    /* データ系列（雲）。青灰/紫/ティールの3色相をやめ、バイオレットの明度3段へ集約。
       同じチャート内で積み上がるので L* は 58.6 / 65.9 / 74.2 と 7以上離してある。
       low は 14夜リストで --shoot-score-*-soft の行の上に文字として乗る最も不利な系列で、
       最も明るい excellent 帯の上でも 4.80:1 を確保する下限。これ以上暗くしないこと。 */
    --shoot-cloud-low: #9884b6;
    --shoot-cloud-mid: #ac96d2;
    --shoot-cloud-high: #c0aee4;

    /* 形・影。純黒上では暗い外側影が消えるため、ごく弱い内側上端光へ置換してある。 */
    --shoot-radius-card: 18px;
    --shoot-radius-control: 10px;
    --shoot-radius-pill: 999px;
    --shoot-card-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
    --shoot-blur: blur(14px);
}

body[class*="shoot-"], body.map-page {
    background-color: var(--shoot-bg);
    background-image: var(--shoot-bg-gradient);
    background-attachment: fixed;
    color: var(--shoot-text);
}

/* 本体サイト共通 static/style.css の footer は紫(rgba(15,12,41,.9)!important)を出す。
   static/style.css 自体は本体の全ページに波及するため変更せず、shoot側でのみ純黒へ
   上書きする。footer の background は !important 付きなのでこちらも !important が必須
   （非!important の宣言は具体度に関わらず!important に負ける）。 */
body[class*="shoot-"] footer, body.map-page footer {
    background: var(--shoot-bg) !important;
    border-top-color: var(--shoot-line);
}

/* static/style.css の非活性ナビ項目色 rgba(255,255,255,.45) は、以前の半透明ナビ背景
   (rgba(15,20,28,.7)相当)では実測4.5:1を僅かに満たしていたが、全画面が不透明な純黒
   背景に揃ったことで実測4.41:1まで下がりWCAG AA(通常文字4.5:1)を割る
   （ラベル文字10.4px・アイコン16.8pxはどちらも大文字サイズの基準に届かない）。
   .mobile-bottom-nav は d-lg-none のため 991.98px 以下でのみ表示される。 */
@media (max-width: 991.98px) {
    .mobile-bottom-nav .nav-item {
        color: rgba(255, 255, 255, .5);
    }
}

.shoot-offline-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .2rem .55rem;
    padding: calc(.55rem + env(safe-area-inset-top, 0px)) 1rem .55rem;
    color: var(--shoot-text);
    font-size: .82rem;
    background: var(--shoot-surface-solid);
    border-bottom: 1px solid var(--shoot-warn);
    box-shadow: 0 5px 16px rgba(4, 2, 18, .36);
}

/* display を持つ著者スタイルは、UA の [hidden]{display:none} を無条件に上書きする
   （優先度ではなくオリジンの差）。この打ち消しが無いとオンラインでもバナーが出続ける。 */
.shoot-offline-banner[hidden] {
    display: none;
}

/* お知らせバー（static/shoot/data/notice.json 由来）。オフラインバナーと同じ帯の見た目に揃える。 */
.shoot-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .2rem .55rem;
    padding: .55rem 1rem;
    color: var(--shoot-text);
    font-size: .82rem;
    background: var(--shoot-surface-solid);
    border-bottom: 1px solid var(--shoot-line);
}

/* 上と同じ理由で [hidden] の打ち消しが必須（無いと enabled:false でも帯が出る）。 */
.shoot-notice[hidden] {
    display: none;
}

.shoot-notice--warning {
    border-bottom-color: var(--shoot-warn);
}

.shoot-notice--campaign {
    border-bottom-color: var(--shoot-accent-2);
}

.shoot-notice-link {
    color: var(--shoot-accent);
}

.shoot-offline-banner strong {
    color: var(--shoot-warn);
}

.shoot-offline-banner span {
    color: var(--shoot-text-dim);
}

body.map-page .shoot-offline-banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

/* #announcement-bar は position: relative（在フロー）。通常ページのバナーは sticky で
   同じくフローに乗るため、告知バーは自然にその下へ流れる＝オフセット不要。
   ただし map-page だけはバナーが fixed でフローから外れるため、告知バーが下に潜る。
   その場合だけバナーの実測高さぶん押し下げる（変数は offline_status.js が更新する）。 */
body.map-page #announcement-bar {
    margin-top: var(--shoot-offline-banner-height, 0px);
}

/* オフラインで機能しない導線を薄く見せる。pointer-events は入れないこと——
   offline_status.js のクリック委譲（構図の振り替え・焼け予報の案内トースト）が
   発火しなくなり、ブラウザ標準のエラー画面に落ちてしまう。 */
body.is-offline a[href^="/alignment"],
body.is-offline a[href^="/glow"] {
    opacity: .5;
}

.shoot-offline-toast {
    position: fixed;
    z-index: 11010;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    max-width: min(360px, calc(100vw - 32px));
    padding: .7rem .9rem;
    color: var(--shoot-text);
    font-size: .84rem;
    text-align: center;
    background: var(--shoot-surface-solid);
    border: 1px solid var(--shoot-line-strong);
    border-radius: var(--shoot-radius-pill);
    box-shadow: var(--shoot-card-shadow);
    transform: translateX(-50%);
}

/* モバイルではブラウザ標準の更新を抑え、shoot共通のプル・トゥ・リフレッシュに寄せる。 */
@media (pointer: coarse) {
    html {
        overscroll-behavior-y: contain;
    }
}

.shoot-pull-refresh {
    position: fixed;
    z-index: 11000;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 36px;
    padding: .45rem .75rem;
    color: var(--shoot-text);
    font-size: .78rem;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    background: var(--shoot-surface-solid);
    border: 1px solid var(--shoot-line-strong);
    border-radius: var(--shoot-radius-pill);
    box-shadow: 0 8px 24px rgba(4, 2, 18, .4);
    transform: translate(-50%, calc(-100% - 12px));
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
}

body.shoot-pull-active .shoot-pull-refresh {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.shoot-pull-ready .shoot-pull-refresh {
    color: var(--shoot-accent);
    border-color: var(--shoot-accent-line);
}

body.shoot-pull-refreshing .shoot-pull-refresh {
    opacity: 1;
    color: var(--shoot-accent);
    border-color: var(--shoot-accent-line);
    transform: translate(-50%, 0);
}

.shoot-pull-refresh-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform .16s ease;
}

body.shoot-pull-ready .shoot-pull-refresh-icon {
    transform: rotate(180deg);
}

body.shoot-pull-refreshing .shoot-pull-refresh-icon {
    animation: shoot-pull-refresh-spin .8s linear infinite;
}

@keyframes shoot-pull-refresh-spin {
    to { transform: rotate(360deg); }
}

/* 軽量な単独画面向けのカードリスト。専用CSSを増やさず、登録地などで共有する。
   注意: このファイルは shoot/base.html の <link> で読まれ、その後に同ファイルの
   インライン <style>（Bootstrapサブセット）が来る。同じ詳細度だと後勝ちで
   .btn / .list-group-item に負けるため、
   - リスト側は list-group 系のクラスを使わず自前で完結させる
   - ボタン側は .btn.shoot-simple-action と2クラスで詳細度を上げる */
.container.shoot-simple-page {
    max-width: 720px;
}

.shoot-simple-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.shoot-simple-list-item {
    padding: 1rem;
    color: var(--shoot-text);
    background: var(--shoot-surface);
    border: 1px solid var(--shoot-line);
    border-radius: var(--shoot-radius-card);
    box-shadow: var(--shoot-card-shadow);
}

.shoot-simple-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn.shoot-simple-action {
    color: var(--shoot-accent);
    background: var(--shoot-accent-soft);
    border-color: var(--shoot-accent-line);
    border-radius: var(--shoot-radius-control);
}

.btn.shoot-simple-action--secondary {
    color: var(--shoot-text-dim);
    background: var(--shoot-surface-strong);
    border-color: var(--shoot-line-strong);
}

.shoot-simple-empty {
    color: var(--shoot-text-dim);
}

/* 月相グラフィック（static/shoot/moon_phase.js が生成）。実寸は各画面のコンテナ側
   （.tonight-moon / .night-moon / .calendar-moon / .shoot-point-moon）で決め、
   SVG自身は常に親いっぱいに広がる。 */
.shoot-moon-phase {
    display: block;
    width: 100%;
    height: 100%;
}

.shoot-moon-disk {
    fill: var(--shoot-moon-dark);
    stroke: var(--shoot-moon-line);
    stroke-width: 4;
}

.shoot-moon-lit {
    fill: var(--shoot-moon);
    stroke: none;
}

/* SVGは absolute で敷くため、数値とラベルはこの flex 列だけで縦に積まれる。
   ラベルを absolute + bottom で置くと、リング下端の太いアークと重なる。 */
.shoot-ring {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--shoot-text-dim);
}

.shoot-ring--lg {
    width: 104px;
    height: 104px;
}

.shoot-ring--md {
    width: 72px;
    height: 72px;
}

.shoot-ring--sm {
    width: 46px;
    height: 46px;
}

.shoot-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.shoot-ring-track {
    fill: none;
    stroke: var(--shoot-ring-track);
    stroke-width: 8;
}

.shoot-ring-arc {
    fill: none;
    stroke: currentColor;
    stroke-width: 8;
    stroke-linecap: round;
}

.shoot-ring-arc-astro {
    fill: none;
    stroke: currentColor;
    stroke-width: 8;
    opacity: .28;
}

.shoot-ring.is-excellent {
    color: var(--shoot-score-excellent);
}

.shoot-ring.is-good {
    color: var(--shoot-score-good);
}

.shoot-ring.is-fair {
    color: var(--shoot-score-fair);
}

.shoot-ring.is-caution {
    color: var(--shoot-score-caution);
}

.shoot-ring.is-poor {
    color: var(--shoot-score-poor);
}

.shoot-ring-value {
    z-index: 1;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.shoot-ring--lg .shoot-ring-value {
    font-size: 1.85rem;
}

.shoot-ring--md .shoot-ring-value {
    font-size: 1.35rem;
}

.shoot-ring--sm .shoot-ring-value {
    font-size: .92rem;
}

.shoot-ring-label {
    z-index: 1;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.shoot-ring--md .shoot-ring-label {
    font-size: .52rem;
}

.shoot-ring--sm .shoot-ring-label {
    display: none;
}

.shoot-ring.is-locked .shoot-ring-value {
    font-size: 1rem;
}