/* =========================================================
   status.css — 近況ページ（ニュースリーダー風）/ status page
   読み込み順: xp.css → contact.css（2ペイン・ツールバー・見出しを流用）→ status.css

   目次:
     1. 言語の出し分け（記事は日本語と英語を並べて書く）
     2. いまの状態（Messenger 風のカード）
     3. メッセージ一覧（リストビュー）
     4. プレビュー（ヘッダーと本文）
     5. JS 無効時（記事をそのまま縦に並べる）
     6. レスポンシブ
     7. 写真（フィルムストリップ）
   ========================================================= */

/* ---- 1. 言語の出し分け ---- */
html[data-lang="en"] .ja, html[data-lang="ja"] .en{display:none !important}

.page{max-width:960px}
/* grid の子は既定で min-width:auto なので、表の幅で横にはみ出す */
.oe > *{min-width:0}
.folders .box a.on{font-weight:bold; color:#0a3d91}
.folders .box a.has-unread .n{font-weight:bold}
.toolbar button{display:flex; align-items:center; gap:5px; font:inherit; color:#00138c; padding:2px 8px; cursor:pointer;
                border:1px solid transparent; border-radius:3px; background:none}
.toolbar button:hover{background:#fff; border-color:#cecac0; box-shadow:inset 0 -1px 0 #e3e0d6}
.toolbar button:active{transform:translateY(1px); background:#e8e5da}
.toolbar .sep{width:1px; align-self:stretch; margin:2px 0; background:#b6b3a6; box-shadow:1px 0 0 #fff}

/* ---- 2. いまの状態 ---- */
.now{display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; padding:10px 12px;
     background:linear-gradient(#f7f9fc,#e3e9f3); border:1px solid #c3cbd9}
.now img{flex:none; width:52px; height:52px; object-fit:cover; object-position:center 18%; image-rendering:pixelated;
         border:2px solid #fff; border-radius:4px; box-shadow:0 0 0 1px #7f9db9, 1px 1px 3px rgba(0,0,0,.25)}
.now .nm{margin:0; font-size:13px; font-weight:bold; color:#0a3d91}
.presence{display:flex; align-items:center; gap:6px; margin:1px 0 6px; font-size:12px}
/* 取り込み中＝赤。オンラインにするなら .presence に class="online" */
.presence i{flex:none; width:10px; height:10px; border-radius:50%;
            background:radial-gradient(circle at 35% 30%, #ffb3a6, #d2401f 60%, #8f1e10); box-shadow:0 0 0 1px #8f1e10}
.presence.online i{background:radial-gradient(circle at 35% 30%, #d7ffc9, #3a9a31 60%, #1d5e17); box-shadow:0 0 0 1px #1d5e17}
.presence b{font-weight:bold}
.now ul{margin:0; padding-left:18px; font-size:12px}
.now li{margin:2px 0}
.now .upd{margin:6px 0 0; font-size:11px; color:#5c6474}

/* ---- 3. メッセージ一覧 ---- */
.msgwrap{max-height:172px; overflow:auto; background:#fff; border:1px solid #7f9db9}
.msgs{width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px}
.msgs th{position:sticky; top:0; z-index:1; text-align:left; font-weight:normal; padding:3px 6px; color:#000;
         background:linear-gradient(#fff,#f1efe2 80%,#e2decd); border-right:1px solid #d6d2c2; border-bottom:1px solid #c7c5b2;
         box-shadow:inset 0 -2px 0 #e2decd}
.msgs th:hover{box-shadow:inset 0 -3px 0 #f9b337}
.msgs td{padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default}
.msgs .c-ico{width:26px; padding-right:0} .msgs .c-ico svg{display:block}
.msgs .c-cat{width:110px} .msgs .c-date{width:92px}
.msgs a{color:inherit; text-decoration:none; outline:none}
.msgs tr.unread td{font-weight:bold}
/* XP のリストビュー：フォーカス中は濃い青、外れると淡い青 */
.msgs tr.sel td{background:#c1d2ee}
.msgs:focus-within tr.sel td{background:#316ac5; color:#fff}
.msgs tr.sel a:focus-visible{outline:1px dotted #fff; outline-offset:1px}
.msgs tr[hidden]{display:none}

/* ---- 4. プレビュー ---- */
.phead{display:grid; grid-template-columns:auto 1fr; gap:1px 10px; margin:10px 0 0; padding:6px 10px; font-size:12px;
       background:linear-gradient(#fdfdfb,#ece9d8); border:1px solid #7f9db9; border-bottom:0}
.phead[hidden]{display:none}
.phead dt{color:#444; font-weight:bold}
.phead dd{margin:0; min-width:0}
.posts{background:#fff; border:1px solid #7f9db9; padding:12px 14px 4px; min-height:120px}
.post p,.post ul{margin:0 0 10px; max-width:72ch}
.post ul{padding-left:22px}
.empty{margin:0; padding:20px 0; color:#5c6474; text-align:center}
.empty[hidden]{display:none}

/* ---- 5. JS あり / なし ----
   JS あり：一覧で選んだ1件だけを表示（件名と日付はプレビューのヘッダーに出す）
   JS なし：一覧とヘッダーは出さず、記事を新しい順にそのまま並べる */
.msgwrap,.phead{display:none}
.js .msgwrap{display:block} .js .phead:not([hidden]){display:grid}
.js .post{display:none} .js .post.on{display:block}
.js .post > time,.js .post > h2{display:none}
.post > time{font-size:11px; color:#5c6474}
.post > h2{margin-top:2px}
.post + .post{border-top:1px dashed #c8d4e8; padding-top:10px}
.js .post + .post{border-top:0; padding-top:0}

/* ---- 6. レスポンシブ ---- */
@media (max-width:720px), (max-height:500px) and (pointer:coarse){
  .msgs .c-cat{display:none}
  .msgs .c-date{width:84px}
  .msgwrap{max-height:none}
  .toolbar{flex-wrap:wrap; gap:4px}
  .toolbar .sep{display:none}
}

/* ---- 7. 写真（XP のフィルムストリップ表示）---- */
.film{max-width:640px; margin:4px 0 12px; padding:10px; background:#fff; border:1px solid #c3cbd9}
.film .stage{display:flex; align-items:center; justify-content:center; height:min(420px, 72vw); padding:8px;
             background:#f4f3ee; border:1px solid #d6d2c2}
.film .stage img{display:block; max-width:100%; max-height:100%; object-fit:contain; box-shadow:2px 2px 4px rgba(0,0,0,.3)}
.post .film-cap{margin:6px 0 4px; text-align:center; font-size:12px; max-width:none}
.film-ctl{display:flex; justify-content:center; gap:8px; margin:0 0 8px}
/* 丸い青のボタン（XP の画像ビューアの ◀ ▶） */
.film-nav{width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer; color:#fff; font-size:10px; line-height:1;
          text-shadow:0 1px 0 rgba(0,0,0,.35); border:1px solid #1d56b0;
          background:radial-gradient(circle at 35% 28%, #c4e3ff, #4f95ec 45%, #1f5cc4 80%);
          box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.3)}
.film-nav:hover{filter:brightness(1.1)}
.film-nav:active{transform:translateY(1px); box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.post .strip{display:flex; gap:6px; overflow-x:auto; list-style:none; margin:0; padding:2px 2px 6px; max-width:none}
.strip li{flex:none; margin:0}
.strip a{display:block; padding:3px; background:#fff; border:1px solid #d6d2c2}
.strip a:hover{border-color:#7f9db9}
.strip a.on{background:#c1d2ee; border-color:#316ac5; box-shadow:0 0 0 1px #316ac5}
.strip img{display:block; width:auto; height:60px}