/**
 * 模擬店の在庫状況の見た目。
 *
 * **他人のサイトの中に置かれる部品**として作ってある。POS 本体の画面は暗い
 * オペレーションコンソール（`resources/css/app.css`）だが、それをそのまま持ち込むと、
 * 明るい学園祭のページの真ん中に黒い板が貼られたように見える。だから地色は敷かず、
 * 置いたページの背景をそのまま使い、**そろえるのは字と数字と段階の絵**にとどめる。
 *
 *   字     POS の --font-sans と同じ並び（Web フォントは読み込まない。下記）
 *   数字   価格は等幅数字（POS の .tnum と同じ理由 ―― 桁が動くと読み違える）
 *   絵     assets/pictograms/*.svg は POS の assets/ の写し。色も文言もあちらが持つ
 *
 * 線も最小限にしてある。区切り線や囲みを足すほど「貼り付けた四角」に見えるので、
 * カードの枠は輪郭が消えない程度まで薄くし、線を引くのは団体名の下 1 本だけにした
 * （複数の団体が縦に並ぶとき、間隔だけでは「どの商品がどの店のものか」の切れ目が読めない）。
 *
 * ■ セレクタを二重（.mogiten-stock.mogiten-stock）にしている理由
 *
 * WordPress のテーマは記事本文の中の見出し・リスト・リンク・画像に独自の装飾を足す。
 * たとえば Lightning は実際にこう書いている:
 *
 *   .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` のような
 * 書き方もするので、`.mogiten-stock h3` では詳細度が引き分けになり、どちらが勝つかが CSS の
 * 読み込み順（テーマとプラグインで前後しうる）で決まってしまう。二重にして必ず勝たせる。
 * !important は使わない ―― テーマや利用者が正当に上書きしたい余地まで奪うため。
 */
.mogiten-stock {
    --mogiten-surface: #ffffff;
    --mogiten-foreground: #18181b;
    /* 面の輪郭にだけ使う、ほとんど見えない線。 */
    --mogiten-hairline: rgb(0 0 0 / 6%);
    /* 団体名の下の区切り線。輪郭より濃い ―― こちらは「見えなくてよい線」ではなく、
       どこで店が変わるかを言う線なので、読めない濃さでは意味が無い。 */
    --mogiten-rule: rgb(0 0 0 / 14%);
    --mogiten-muted: #52525b;
    --mogiten-subtle: #71717a;
    /* POS の役割色（受付＝藍 #6366f1）を、白地で読める濃さにしたもの。 */
    --mogiten-brand: #4f46e5;
    /* 状態の色。POS の --color-ok / --color-danger を白地に合わせた濃さ。 */
    --mogiten-live: #16a34a;
    --mogiten-alert: #dc2626;

    margin: 0 0 1.5rem;
    color: var(--mogiten-foreground);
    /* POS の --font-sans と同じ並び。ただし Web フォントは読み込まない（POS は
       Noto Sans JP を自ホストしているが、他人のサイトで外部の字を落とさせない ――
       会場の Wi-Fi は行列と同時に混む）。端末に入っていれば同じ字で出る。 */
    font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
    line-height: 1.5;
    text-align: start;
}

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

.mogiten-stock.mogiten-stock :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, img, svg, span, time, strong, section) {
    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 の棒など）を消す。 */
.mogiten-stock.mogiten-stock :where(h1, h2, h3, h4, h5, h6, p, ul, li, a)::before,
.mogiten-stock.mogiten-stock :where(h1, h2, h3, h4, h5, h6, p, ul, li, a)::after {
    content: none;
    display: none;
}

.mogiten-stock.mogiten-stock * {
    box-sizing: border-box;
}

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

.mogiten-stock .mogiten-stock__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

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

/* 左上のかたまり（出どころの表記と見出し）。 */
.mogiten-stock .mogiten-stock__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.mogiten-stock .mogiten-stock__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
}

.mogiten-stock .mogiten-stock__status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ランプ・状態・時刻はひとまとまり。ボタンとの間だけ広く取る。 */
.mogiten-stock .mogiten-stock__state-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #3f3f46;
}

.mogiten-stock .mogiten-stock__lamp {
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #a1a1aa;
}

.mogiten-stock .mogiten-stock__lamp--live {
    background: var(--mogiten-live);
}

.mogiten-stock .mogiten-stock__lamp--error {
    background: var(--mogiten-alert);
}

/* 文言が変わってもボタンが横に動かないよう、幅を確保する。 */
.mogiten-stock .mogiten-stock__state {
    min-width: 5em;
}

.mogiten-stock .mogiten-stock__time {
    color: var(--mogiten-subtle);
    font-variant-numeric: tabular-nums;
}

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

@keyframes mogiten-stock-pulse {
    50% {
        opacity: 0.5;
    }
}

/* 「今すぐ更新」。枠を持たせず、わずかな面色だけで押せることを示す（線を 1 本減らす）。 */
.mogiten-stock .mogiten-stock__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;
    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;
}

.mogiten-stock .mogiten-stock__refresh:hover {
    background: rgb(0 0 0 / 8%);
    color: #27272a;
}

.mogiten-stock .mogiten-stock__refresh[aria-disabled='true'] {
    opacity: 0.6;
    pointer-events: none;
}

.mogiten-stock .mogiten-stock__refresh svg {
    display: block;
    width: 1rem;
    height: 1rem;
}

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

@keyframes mogiten-stock-spin {
    to {
        transform: rotate(360deg);
    }
}

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

.mogiten-stock .mogiten-stock__error {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.mogiten-stock .mogiten-stock__error[hidden] {
    display: none;
}

/* ── 団体と商品 ────────────────────────────────────────────────── */

/* 団体どうしの区切りは間隔だけ。線を引くと、置いたページの中で浮く。 */
.mogiten-stock .mogiten-stock__booths {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 団体名は「どこの店の話か」を言う見出し。カードの中の商品名（カード幅に追随して
   大きくなる）に押し負けると、どの絵がどの店のものか分からなくなる。

   下の線は一覧（.mogiten-stock__booths）の幅いっぱいに引く。見出しは block なので
   幅を指定しない ―― 親に追随させておけば、columns 指定や画面幅で列数が変わっても
   線とカードの右端がそろう。 */
.mogiten-stock .mogiten-booth__name {
    /* 線と見出しは近く、線とカードは離す（近いほうが1組に見える）。 */
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--mogiten-rule);
    margin-bottom: 0.75rem;
    font-size: clamp(1.125rem, 2.75vw, 1.375rem);
    font-weight: 700;
    line-height: 1.4;
}

/* 1〜2 品は端数が左寄せにならないよう中央揃え。 */
.mogiten-stock .mogiten-booth__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 狭い画面でも 2 列を保つので、そのぶん隙間は詰める。 */
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .mogiten-stock .mogiten-booth__list {
        gap: 1.25rem;
    }
}

/* **どんなに狭くても 2 列**。1 列にすると 1 画面に 1 品しか入らず、その店に何品あるのかが
   分からないままスクロールすることになる ―― 来場者がこの一覧でまず知りたいのは
   「何が買えるか」の全体で、1 品ずつの詳細ではない。字と余白はカード幅に追随する
   （下の container-type）ので、半分の幅でも小さくなるだけで崩れない。 */
.mogiten-stock .mogiten-booth__list > .mogiten-card {
    width: calc(50% - 0.375rem);
    max-width: 28rem;
}

@media (min-width: 640px) {
    .mogiten-stock .mogiten-booth__list > .mogiten-card {
        width: calc(50% - 0.625rem);
    }
}

@media (min-width: 1024px) {
    .mogiten-stock .mogiten-booth__list > .mogiten-card {
        width: calc(33.333% - 0.834rem);
    }
}

/* 3 品以上はグリッドで左から流し込む。品数は差し替えのたびに変わりうるので、
   クラスではなく :has() で数える ―― JavaScript が付け替え忘れる余地を作らない。 */
.mogiten-stock .mogiten-booth__list:has(> :nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.mogiten-stock .mogiten-booth__list:has(> :nth-child(3)) > .mogiten-card {
    width: auto;
    max-width: none;
}

/* columns 属性が指定されたときだけ列数を固定する（1〜2 列は狭い画面でも効かせ、
   3 列以上は幅が足りないので広い画面だけ）。columns="1" はここでだけ 1 列になる ――
   既定の「最低 2 列」より、ページを書いた人が明示的に選んだ数を優先する。 */
@media (min-width: 360px) {
    .mogiten-stock[style*='--mogiten-columns:1'] .mogiten-booth__list,
    .mogiten-stock[style*='--mogiten-columns:2'] .mogiten-booth__list {
        display: grid;
        grid-template-columns: repeat(var(--mogiten-columns), minmax(0, 1fr));
    }
}

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

.mogiten-stock[style*='--mogiten-columns'] .mogiten-booth__list > .mogiten-card {
    width: auto;
    max-width: none;
}

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

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

.mogiten-stock .mogiten-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.375rem, 2cqw, 0.75rem);
    height: 100%;
    padding: clamp(0.75rem, 4cqw, 1.25rem);
}

.mogiten-stock .mogiten-card__name {
    font-size: clamp(1.125rem, 7cqw, 2.25rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* 価格は商品名より弱く、けれど桁が読める大きさで。等幅数字にするのは POS の .tnum と
   同じ理由 ―― 桁ごとに幅が動くと、並べたときに 400 と 100 を読み違える。 */
.mogiten-stock .mogiten-card__price {
    color: var(--mogiten-muted);
    font-size: clamp(0.8125rem, 3.5cqw, 1.0625rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    text-align: center;
}

.mogiten-stock .mogiten-card__pictogram {
    display: block;
    /* 商品名が 1 行のカードと 2 行のカードが並ぶと、絵の上端がカードごとに食い違って
       列が波打つ。余りを名前の下に寄せて、絵は必ず下端でそろえる。 */
    margin-top: auto;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* 知らない段階（絵を持っていない）のときは、API が返した文言だけを出す。
   絵と同じ場所に、絵と同じだけの重みで置く。 */
.mogiten-stock .mogiten-card__unknown {
    margin-top: auto;
    padding: 1.5rem 0.5rem;
    color: var(--mogiten-muted);
    font-size: clamp(0.9375rem, 4cqw, 1.25rem);
    font-weight: 700;
    text-align: center;
}

/* 絵を添えた断り書き（調整中）。商品のカードが並ぶはずだった場所に出るので、
   カード1枚ぶんの大きさに収める ―― 幅いっぱいに広げると、断り書きのほうが
   このページの主役に見える。 */
.mogiten-stock .mogiten-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto;
    max-width: 22rem;
    padding: 1rem 0 2rem;
}

.mogiten-stock .mogiten-notice__pictogram {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.mogiten-stock .mogiten-notice__text {
    color: var(--mogiten-muted);
    font-size: 0.9375rem;
    text-align: center;
}

.mogiten-stock .mogiten-message {
    width: 100%;
    padding: 4rem 1rem;
    color: var(--mogiten-muted);
    font-size: 0.9375rem;
    text-align: center;
}

.mogiten-stock .mogiten-stock__announce,
.mogiten-stock .mogiten-stock__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;
}

/* ── 出どころの表記 ────────────────────────────────────────────── */

/* 左上に置く小さな 1 行。見出しの上に来るので、見出しより弱く、けれど読める大きさで。
   囲みも区切り線も持たせない ―― 表記は主役ではないので、線を足してまで枠に入れない。 */
.mogiten-stock .mogiten-stock__credit {
    display: flex;
    align-items: center;
    /* マークと文字は近づける（離すと 2 つの部品に見える）。 */
    gap: 0.375rem;
    color: var(--mogiten-subtle);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    line-height: 1.25rem;
}

.mogiten-stock .mogiten-stock__credit-mark {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    border-radius: 0.25rem;
}

.mogiten-stock .mogiten-stock__credit-name {
    color: var(--mogiten-brand);
    font-weight: 700;
}