/*
 * 日付の部品の形（FEAT-05 赤67 → MOB-18 Step2-5 で日の出・月の都道府県ページの共有物に・2026-10-17）。
 * HTML＝Views/Shared/_DatePart.cshtml・動き＝scripts/common/DatePart.js。
 * 📌 カレンダー（.cal の中）の色と中身は各ページの Card.css（日の出＝白・月＝黒い月相の暦）。ここは部品の頭（日付と時刻・‹ 今日 ›・カレンダーのボタン）だけ。
 * 📌 置き場所ごとの幅・余白（カードの左の列・地図の節・しくみの図）も各ページの Card.css。
 */
.dpart { container: dpart / inline-size; --ink: #1c2028; --mute: #5a6270; --line: #c9d2dc; font-size: 14px; line-height: 1.6; color: #1c2028; font-variant-numeric: tabular-nums; }
.dpart .mono { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", "Noto Sans Mono CJK JP", monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dpart .dpd { font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
/* 4-h（2026-10-17・FEAT-05）＝320px の画面では「‹ 今日 ›」（174px）とカレンダー（約100px）がカードの中（244px）に入らず右へはみ出した＝入らない時だけカレンダーを次の行へ（幅で決まる高さ＝CLS にならない） */
.dpart .dnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; align-items: stretch; }
.dpart .dseg { flex: none; display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.dpart .dseg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.dpart .dseg button:first-child { border-left: 0; }
.dpart .dseg button:active { background: #eef2f7; }
.dpart .dseg button svg { width: 14px; height: 14px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 2026-10-12（MOB-16）iPhone の実機で「今日」と › が見切れた＝Safari（WebKit）は中身に合わせて縮む器（.dseg の flex: none）の幅を flex-basis でなく中身の幅で数える → width も書く */
.dpart .dseg button[data-k="-1"], .dpart .dseg button[data-k="1"] { flex: 0 0 48px; width: 48px; }
.dpart .dseg button[data-k="0"] { flex: 0 0 78px; width: 78px; }
.dpart .dseg button:disabled { color: #c3c9d1; cursor: default; }
/* 2026-10-17 ユーザー案＝別の日を見ている間の「今日に戻す」は赤で塗る（部品が連動＝どこまでスクロールしても「今は今日じゃない」が目に入る）。今日の間は上の :disabled＝薄い灰。
   幅は 78px のまま（12px の5文字が入る＝字を替えても周りは動かない） */
.dpart .dseg button[data-k="0"]:not(:disabled) { background: #d8261c; color: #fff; }
.dpart .dseg button[data-k="0"]:not(:disabled):active { background: #b81e16; }
.dpart .dcal { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.dpart .dcal:active { background: #eef2f7; }
.dpart .dcal svg { width: 14px; height: 14px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dpart .dcal[aria-expanded="true"] { background: var(--ink); color: #fff; }
/* 赤72（FEAT-05）＝部品が 480px より広い時はカレンダーのボタンを「‹ 今日 ›」のすぐ右 */
@container dpart (min-width: 481px) { .dpart .dcal { margin-left: 0; } }
.dpart .cal[hidden] { display: none; }

/* 時刻の欄は「いま」で動く＝埋まるまで見せない（HTML の仮の字で幅は取ってある＝CLS にならない）。日付は HTML に最初から書く＝隠さない */
.dpart:not(.ready) [data-p="t"] { visibility: hidden; }