/**
 * ALL-Eye 混雑状況の見た目。
 *
 * **ALL-Eye の公開ページ（https://all-eye.fes-shuho.com/）と同じ見た目にそろえてある。**
 * 同じ状況が 2 つのサイトで違う顔をしていると、見る人はどちらが本当か確かめられない。
 * 値は本家の Tailwind クラスをそのまま素の CSS に写したもので、対応は次のとおり:
 *
 *   カード     rounded-xl / border-zinc-200 / bg-surface(#fff) / shadow-sm
 *   カード内   gap-[clamp(.5rem,3cqw,1rem)] / p-[clamp(.75rem,4cqw,1.25rem)]（@container）
 *   施設名     font-semibold / text-[clamp(1.25rem,8cqw,2.5rem)] / text-center
 *   ピクトグラム w-full / h-auto / rounded-lg
 *   一覧       gap-5、1〜2 件は中央寄せ、3 件以上は 1→2→3 列
 *   ランプ     emerald-500（自動更新中）/ rose-500（再接続中）/ zinc-400（停止）
 *   更新ボタン Button.tsx の secondary + size md
 *
 * 本家を直したときは、ここも一緒に直す（人が見て合わせる。テストは無い）。
 *
 * 背景色はページのものをそのまま使う（本家の #f7f8fb は敷かない）。ここは他人のサイトの
 * 中に置かれる部品なので、周りと違う地色を敷くと「貼り付けた四角」に見える。
 *
 * ■ セレクタを二重（.all-eye.all-eye）にしている理由
 *
 * WordPress のテーマは記事本文の中の見出し・リスト・リンク・画像に独自の装飾を足す。
 * Lightning（fes-shuho.com のテーマ）は実際にこう書いている:
 *
 *   .subSection-title,h3      { padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,.1) }
 *   .subSection-title:after,h3:after { content:"."; border-bottom:1px solid #337ab7; width:30% }
 *
 * これがあると施設名の下に、本家には無い線と棒が出る。テーマ側は `.entry-body h3` のような
 * 書き方もするので、`.all-eye h3` では詳細度が引き分けになり、どちらが勝つかが CSS の
 * 読み込み順（テーマとプラグインで前後しうる）で決まってしまう。二重にして必ず勝たせる。
 * !important は使わない ―― テーマや利用者が正当に上書きしたい余地まで奪うため。
 */
.all-eye {
    /* 本家の色（resources/css/app.css の :root と Tailwind の zinc / emerald / rose）。 */
    --all-eye-surface: #ffffff;
    --all-eye-foreground: #18181b;
    --all-eye-border: #e4e4e7;
    --all-eye-border-strong: #d4d4d8;
    /* 面の輪郭にだけ使う、ほとんど見えない線。 */
    --all-eye-hairline: rgb(0 0 0 / 6%);
    --all-eye-muted: #52525b;
    --all-eye-subtle: #71717a;
    --all-eye-brand: #047857;
    --all-eye-live: #10b981;
    --all-eye-alert: #f43f5e;

    margin: 0 0 1.5rem;
    color: var(--all-eye-foreground);
    /* 端末にある字で描く（Web フォントは読み込まない）。日本語の字を先に置いてあるので、
       Noto Sans JP が入っている端末では本家と同じ字になる。 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Noto Sans JP", Meiryo, Roboto, Helvetica, Arial, sans-serif;
    /* 本家（Tailwind の Preflight）と同じ行間。テーマの本文行間を持ち込まない。 */
    line-height: 1.5;
    text-align: start;
}

/* ── テーマの装飾を外す ─────────────────────────────────────────── */

.all-eye.all-eye :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, img, svg, span, time, strong) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-align: inherit;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    list-style: none;
    position: static;
    float: none;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
}

/* 見出しに付く飾り（Lightning の h3:after の棒など）を消す。 */
.all-eye.all-eye :where(h1, h2, h3, h4, h5, h6, p, ul, li, a)::before,
.all-eye.all-eye :where(h1, h2, h3, h4, h5, h6, p, ul, li, a)::after {
    content: none;
    display: none;
}

.all-eye.all-eye * {
    box-sizing: border-box;
}

/* ── 見出しと更新状態 ───────────────────────────────────────────── */

/* 区切り線は引かない。ウィジェットは他人のページの一部として置かれるので、線を足すほど
   「貼り付けた四角」に見える。間隔だけで区切れば、周りの本文と同じ流れのまま読める。 */
.all-eye .all-eye__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .all-eye .all-eye__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* 左上のかたまり（ライセンス表記と見出し）。本家の公開ページも左上がブランドなので、
   同じ位置に同じものが来る。 */
.all-eye .all-eye__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.all-eye .all-eye__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
}

.all-eye .all-eye__status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ランプ・状態・時刻はひとまとまり（本家の gap-2 の <p>）。ボタンとの間だけ広く取る。 */
.all-eye .all-eye__state-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #3f3f46;
}

.all-eye .all-eye__lamp {
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #a1a1aa;
}

.all-eye .all-eye__lamp--live {
    background: var(--all-eye-live);
}

.all-eye .all-eye__lamp--error {
    background: var(--all-eye-alert);
}

/* 文言が変わってもボタンが横に動かないよう、幅を確保する（本家の min-w-[5em]）。 */
.all-eye .all-eye__state {
    min-width: 5em;
}

.all-eye .all-eye__time {
    color: var(--all-eye-subtle);
}

/* 止まったランプは点滅させない。再接続中と同じ動きだと「まだ試している」ように見える。 */
@media (prefers-reduced-motion: no-preference) {
    .all-eye .all-eye__lamp--live,
    .all-eye .all-eye__lamp--error {
        animation: all-eye-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
}

@keyframes all-eye-pulse {
    50% {
        opacity: 0.5;
    }
}

/* 「今すぐ更新」。本家の secondary ボタンと同じ見た目にそろえる。 */
.all-eye .all-eye__refresh {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: 0.375rem;
    /* 枠を持たせず、わずかな面色だけで押せることを示す（線を 1 本減らす）。 */
    background: rgb(0 0 0 / 4%);
    color: #3f3f46;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.all-eye .all-eye__refresh:hover {
    background: rgb(0 0 0 / 8%);
    color: #27272a;
}

.all-eye .all-eye__refresh[aria-disabled='true'] {
    opacity: 0.6;
    pointer-events: none;
}

.all-eye .all-eye__refresh svg {
    display: block;
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    .all-eye .all-eye__refresh[data-all-eye-busy] svg {
        animation: all-eye-spin 1s linear infinite;
    }
}

@keyframes all-eye-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── 取得できていないときの断り書き ──────────────────────────────── */

.all-eye .all-eye__error {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #fecdd3;
    border-radius: 0.375rem;
    background: #fff1f2;
    color: #9f1239;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.all-eye .all-eye__error[hidden] {
    display: none;
}

/* ── 施設一覧 ──────────────────────────────────────────────────── */

/* 1〜2 件は端数が左寄せにならないよう中央揃え（本家と同じ）。 */
.all-eye .all-eye__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.all-eye .all-eye__list > .all-eye-card {
    width: 100%;
    max-width: 28rem;
}

/* 2 件のときは狭い画面でも 2 列に並べる（縦に積むと、隣の施設と見比べられない
   ——混雑状況は「どちらが空いているか」を見るものなので、並んでいることに意味がある）。
   3 件以上は下のグリッドが受け持つ。 */
.all-eye .all-eye__list:has(> :nth-child(2)) > .all-eye-card {
    width: calc(50% - 0.625rem);
    max-width: none;
}

@media (min-width: 640px) {
    .all-eye .all-eye__list > .all-eye-card {
        width: calc(50% - 0.625rem);
    }
}

@media (min-width: 1024px) {
    /* :has() を使った上の規則より詳細度を上げておく（2 件のときも 3 列ぶんの幅にそろえる）。 */
    .all-eye .all-eye__list:has(> :nth-child(2)) > .all-eye-card,
    .all-eye .all-eye__list > .all-eye-card {
        width: calc(33.333% - 0.834rem);
    }
}

/* 3 件以上はグリッドで左から流し込む。件数は差し替えのたびに変わりうるので、
   クラスではなく :has() で数える——JavaScript が付け替え忘れる余地を作らない。 */
.all-eye .all-eye__list:has(> :nth-child(3)) {
    display: grid;
    /* 狭い画面でも 1 列に落とさない（最低 2 列）。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .all-eye .all-eye__list:has(> :nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.all-eye .all-eye__list:has(> :nth-child(3)) > .all-eye-card {
    width: auto;
    max-width: none;
}

/* columns 属性が指定されたときだけ列数を固定する（1〜2 列は狭い画面でも効かせ、
   3 列以上は幅が足りないので広い画面だけ）。 */
@media (min-width: 360px) {
    .all-eye[style*='--all-eye-columns:1'] .all-eye__list,
    .all-eye[style*='--all-eye-columns:2'] .all-eye__list {
        display: grid;
        grid-template-columns: repeat(var(--all-eye-columns), minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .all-eye[style*='--all-eye-columns'] .all-eye__list {
        display: grid;
        grid-template-columns: repeat(var(--all-eye-columns), minmax(0, 1fr));
    }
}

.all-eye[style*='--all-eye-columns'] .all-eye__list > .all-eye-card {
    width: auto;
    max-width: none;
}

.all-eye .all-eye-card {
    /* カードの中の余白・文字はカード幅に追随させる（本家と同じ @container）。
       画面幅ではなくカード幅を基準にするので、1 列でも 3 列でも同じ比率で収まる。
       余白はここではなく内側の要素に持たせる——ここに持たせると cqw の基準が余白のぶん
       狭くなり、本家より一回り小さい字になる。 */
    container-type: inline-size;

    /* 枠線は輪郭が消えない程度まで薄くし、浮きは影に任せる。白いカードなので、
       線を強く引くと数が増えたときに枠ばかりが目に入る。 */
    border: 1px solid var(--all-eye-hairline);
    border-radius: 0.75rem;
    background: var(--all-eye-surface);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 6%), 0 1px 2px -1px rgb(0 0 0 / 5%);
}

.all-eye .all-eye-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 3cqw, 1rem);
    height: 100%;
    padding: clamp(0.75rem, 4cqw, 1.25rem);
}

.all-eye .all-eye-card__name {
    font-size: clamp(1.25rem, 8cqw, 2.5rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.all-eye .all-eye-card__pictogram {
    display: block;
    /* 施設名が 1 行のカードと 2 行のカードが並ぶと、絵の上端がカードごとに食い違って
       列が波打つ。余りを名前の下に寄せて、絵は必ず下端でそろえる
       （本家は名前の長さがそろっている前提なので、ここだけは本家に無い指定）。 */
    margin-top: auto;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.all-eye .all-eye-card__unknown,
.all-eye .all-eye-message {
    padding: 1rem 0.5rem;
    color: var(--all-eye-muted);
    font-size: 0.9375rem;
    text-align: center;
}

.all-eye .all-eye-message {
    grid-column: 1 / -1;
    width: 100%;
    padding: 4rem 1rem;
}

.all-eye .all-eye__announce,
.all-eye .all-eye__sr {
    /* 読み上げ専用。目には見せない。 */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── ライセンス表記 ────────────────────────────────────────────── */

/* 左上に置く小さなブランド行。見出しの上に来るので、見出しより弱く、けれど読める大きさで。
   囲みも区切り線も持たせない——表記は主役ではないので、線を足してまで枠に入れない。
   リンクではないので、下線もホバーの変化も持たせない（押せるように見せない）。
   見出しの真上に来るので、左端は見出しとそろえる（内側の余白を持たせない）。 */
.all-eye .all-eye__credit {
    display: flex;
    align-items: center;
    /* マークと文字は近づける（離すと 2 つの部品に見える）。 */
    gap: 0.375rem;
    padding: 0;
    color: var(--all-eye-subtle);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1.25rem;
}

.all-eye .all-eye__credit-mark {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* 「ALL-Eye」だけブランドの色で少し強く出す（表記であって見出しではないので、字は小さいまま）。 */
.all-eye .all-eye__credit-name {
    color: var(--all-eye-brand);
    font-weight: 700;
    letter-spacing: 0.02em;
}