/*
 * 海外の都市ページ（日の出）だけの上書き（FEAT-07 Step4-5・2026-10-23）。
 * 🔑 国内の content/css/state/code/Card.css・DatePart.css をそのまま <link> で読んだ後に、このファイルを読む（後ろに置く＝国内の規則は触らない）。
 *    🔴 連結しない＝Card.css は BOM 付き・繋ぐと BOM が途中に落ちて直後の規則が死ぬ（FEAT-07 のデモで実測）。
 * 📌 出どころ＝FEAT-07 のデモの extra.css（見本の殻の規則は除いた＝本物の殻は _LayoutLangMain）。
 */

/* 月のページへ（上と下の2か所）＝国内と同じ帯 .moonslot .rowlink（規則は国内 Card.css のまま＝ここでは足さない・4-9・10-23） */

/* 年間の表の札「DST starts／DST ends」（グラフの橙の点線と同じ色の系統） */
#year td .tg.dst { background: #8a5a00; }

/* カードの頭＝案B′（10-20）＝見出し｜値 の2行の表 → 細い罫 → LOCAL TIME の小さい見出し（その下は日付の部品のまま） */
#today_card .lhd .kv { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 1px; margin: 0; font-size: 13px; line-height: 1.45; }
#today_card .lhd .kv dt { color: var(--mute); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding-top: 3px; white-space: nowrap; }
#today_card .lhd .kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
#today_card .lhd .kv dd b { font-weight: 700; font-size: 15px; }
#today_card .lhd .kv dd .sub { color: var(--mute); }
/* 夏時間は時差の下の2行目（灰・12px）。日付は折り返さない＝狭い時は「until」の後ろで改行 */
#today_card .lhd .kv dd .tzn { display: block; font-size: 12px; line-height: 1.4; margin-top: 1px; }
#today_card .lhd .kv dd .tzn[hidden] { display: none; }
#today_card .lhd .kv dd .tzn .nw { white-space: nowrap; }
/* 計算の前提の注記（標高0m・平らな地平線）＝日の出・日の入りの2つの箱のすぐ下（.row2 の3つ目＝2列をまたぐ・4-9・10-23）。
   .row2 の中に置く＝PC の2列でも grid-area row2 の中に収まる（外に出すと自動配置で別の段に落ちる）。行の間 10px を少し詰める */
#today_card .row2 .lnote { grid-column: 1 / -1; margin: -4px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--mute); }
#today_card .lhd .ltl { font-size: 11px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
#today_card .lhd + .dpart .dpd { margin-top: 2px; }
/* 「現地の日時」の札を弧の上と地図の節の日付の部品にも（4-12・10-23 ユーザー＝スクロールした先でも「どこの時刻か」が分かる）。
   字は Show.cshtml が #today_card・#sun_map の style に置く CSS の変数 --lt（resx の CardLocalTime）。共有の _DatePart は触らない＝::before で足す。
   見た目はカードの頭の .ltl と同じ（罫は付けない） */
#today_card > .dpart[data-at="arc"]::before, #sun_map .dpart::before { content: var(--lt); display: block; font-size: 11px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; margin: 0 0 4px; }
/* PC の2列（国内 Card.css の grid-template-areas）に頭の置き場を足す＝足さないと自動配置で弧と箱の間に落ちる */
@container tcard (min-width: 760px) {
  #today_card > .lhd { grid-area: hd; }
}

/* PC の右の列（Step4-13・10-23 ユーザー＝右が短くてもったいない）＝開いたままのカレンダー。左の日付の部品は日付と時刻の行だけ。
   Step5-6（10-24 ユーザー）＝右の列は**カレンダーだけ**にしてスクロールに付いてくる（sticky・top 8px＝固定のヘッダーは無い・祖先に overflow／contain も無い＝実測）。
   表3群（.info2）は .rcol の外＝左の列のカウントダウンの後（DOM の順＝スマホの並び）。国内 Card.css の grid-template-areas（右の列＝info2）は海外だけここで上書き＝国内は触らない。
   月は月の絵の行・月相の部品が入る＝並びは moon.css が同じ形で上書きする（card.css の後に読む）。
   スマホは右の列の部品を出さない（左の部品のボタンとカレンダーで今までどおり）。地図の節の部品は触らない */
#today_card .rcol > .dpart { display: none; }
@container tcard (min-width: 760px) {
  #today_card { grid-template-areas: "hd hd" "dpart rcol" "row2 rcol" "cdn rcol" "info2 rcol" "dpart2 rcol" "arc rcol" "globe rcol" "sky rcol"; }
  #today_card > .rcol { grid-area: rcol; align-self: stretch; }
  /* 表3群は左の列＝スマホと同じ上の罫線（10-24 ユーザー）＝国内 Card.css の PC の置き場所（右の列・罫なし）を戻す */
  #today_card > .info2 { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 6px; }
  #today_card .rcol > .dpart { display: block; margin: 8px 8px 4px; position: sticky; top: 8px; }
  #today_card .rcol > .dpart .dpd, #today_card .rcol > .dpart .dcal { display: none; }
  #today_card .rcol > .dpart .cal[hidden] { display: block; }
  /* JS が描く前の空のカレンダーは5行の月の高さ（346px・実測）を取っておく＝描いた時に下の表3群が押し下げられない（6行の月は 382px＝ずれは 36px だけ） */
  #today_card .rcol > .dpart .cal:empty { min-height: 346px; }
  #today_card .rcol > .dpart .dnav { margin-top: 0; }
  #today_card > .dpart .dnav, #today_card > .dpart .cal { display: none; }
  /* 弧の図の頭の日付の部品は PC では丸ごと隠す（Step4-13 の続き・10-23 ユーザー＝左の列を少しでも短く）。日付はカードの頭と右のカレンダーで分かる・
     なぞっている時刻は擬似3D の札（「{t}の太陽の位置」）に出る */
  #today_card > .dpart[data-at="arc"] { display: none; }
}

/* 「今日」のボタン＝言葉は言語ごとに長さが違う（Go to today など）＝国内の 78px より広く（Step3 で12言語の実物を測って決め直す） */
.dpart .dseg button[data-k="0"] { flex: 0 0 92px; width: 92px; }
/* 日付の字が長い言語（pt など）でも溢れない保険（ミサトの🟡5＝言語ごとの切替表は作らない）。nowrap のまま縮める */
.dpart .dpd [data-p="date"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 週の始まりの切替（カレンダーの下・二至二分のボタンの上） */
.dpart .cal .ws { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 11px; color: var(--mute); }
.dpart .cal .wsg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.dpart .cal .wsg button { min-height: 28px; padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.dpart .cal .wsg button:first-child { border-left: 0; }
.dpart .cal .wsg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* 年間の「合計」の字＝言語ごと（Razor が #year の style に --yd-total を書く） */
#year .yday .yd::before { content: var(--yd-total, "Total"); }
/* 年間の表の月の名前は言語によって長い＝見出しの字を少し小さく */
#year details summary { font-size: 13px; }

/* 地図＝今の海外ページと同じ 300px・灰の下地（古い CSS は .h2_wrap .h2_body の中だけに当たる＝新しい並びには届かない） */
#sun_map .map_canvas { height: 300px; background-color: #eee; }
#sun_map .note { margin: 8px 0; font-size: 13px; color: #5a6270; }

/* カードの下の節の左右の余白（10-24 ユーザー「モバイルで地図から下は左右の余白が無い」）＝国内は外枠 .h2_body が 25px 持つが、海外の外枠 .left_wrap には無い（実測 0px）。
   カードの中の字と同じ 13px＝上から下まで字の左端が揃う。日の出・月の出の両方（月だけの節＝#moon_map・#moon_orbit・#year_dist もここで） */
#sun_map, #moon_map, #moon_orbit, #photos, #year > .sec { padding-left: 13px; padding-right: 13px; }
/* 余白の分だけ狭くなった＝320 幅の it で年送り「‹ 2026 › Quest'anno」が入らずページが 3px 横に広がった（実測）＝入らない時だけ「今年」を次の行へ */
#year .ymn { flex-wrap: wrap; }

/* 季節の4つのボタン（FEAT-07 Step3・2026-10-23）＝訳した名前が長い（露「Весеннее равноденствие」・葡「Equinócio de primavera」≒150px）
   ので 2×2 に。CJK（ja・ko・zh）は国内と同じ4列のまま。字は折り返してよい（320px の画面で 2 列＝約 120px） */
html .dpart .cal .sb { grid-template-columns: repeat(2, 1fr); }
html:lang(ja) .dpart .cal .sb, html:lang(ko) .dpart .cal .sb, html:lang(zh) .dpart .cal .sb { grid-template-columns: repeat(4, 1fr); }
html .dpart .cal .sbt { white-space: normal; text-align: center; }