/* =========================================================
   contact.css — 連絡先ページのデザイン / contact page styles
   共通のシェル（ウィンドウ枠・タスクバーなど）は xp.css にあります。
   読み込み順: xp.css → contact.css（ここが後勝ち）

   目次:
     1. ページ全体とウィンドウの並べ方
     2. ツールバー
     3. 2ペイン（フォルダ一覧 + 本文）
     4. 見出しと本文
     5. 連絡先のテーブル
     6. 新しいメッセージ（フォーム）
     7. レスポンシブ
   ========================================================= */

/* ---- 1. ページ全体 ---- */
.page{max-width:880px; margin:0 auto; padding:22px 14px calc(var(--tb-h) + 24px)}
.win{position:relative; margin:0 0 22px}

/* ---- 2. ツールバー ---- */
.toolbar{display:flex; align-items:center; gap:10px; padding:4px 8px; background:linear-gradient(#f6f5f0,#e4e1d4); border-bottom:1px solid #b6b3a6}
.toolbar a{display:flex; align-items:center; gap:5px; text-decoration:none; color:#00138c; padding:2px 8px; border-radius:3px; border:1px solid transparent}
.toolbar a:hover{background:#fff; border-color:#cecac0; box-shadow:inset 0 -1px 0 #e3e0d6}
.toolbar a:active{transform:translateY(1px); background:#e8e5da}

/* ---- 3. 2ペイン ---- */
.oe{display:grid; grid-template-columns:180px 1fr}
.folders .box li{margin:4px 0}
.pane{padding:12px 16px 18px}

/* ---- 4. 見出しと本文 ---- */
h1{font-size:15px; margin:0 0 2px; color:#0a3d91}
.lead{margin:0 0 14px; color:#333; max-width:60ch}
h2{font-size:13px; color:#0a3d91; margin:18px 0 8px; padding-bottom:3px; border-bottom:1px solid #c8d4e8}

/* ---- 5. 連絡先のテーブル ---- */
.list{width:100%; border-collapse:collapse; font-size:12px}
.list th{text-align:left; font-weight:normal; color:#33415c; background:linear-gradient(#f7f9fc,#e3e9f3);
         border:1px solid #c3cbd9; padding:3px 8px}
.list td{border:1px solid #dde3ec; padding:7px 8px; vertical-align:top}
.list tr:hover td{background:#eef4fd}
.list .who{white-space:nowrap; width:130px}
.list .who span{display:inline-flex; align-items:center; gap:6px}
.list .note{color:#5c6474}
code.mail{font-family:"MS Gothic","Courier New",monospace; background:#f3f5f9; border:1px solid #d6dbe4; padding:1px 6px}

.note-box{margin:16px 0 0; padding:10px 12px; background:#fffbe6; border:1px solid #e3d39a; font-size:12px}
.note-box b{color:#7a5200}

/* ---- 6. 新しいメッセージ（フォーム）---- */
.compose{padding:0}
.fields{background:var(--face); padding:8px 10px; border-bottom:1px solid #b6b3a6}
.row{display:grid; grid-template-columns:70px 1fr; gap:8px; align-items:center; margin:0 0 6px}
.row:last-child{margin:0}
.row label{font-size:12px; text-align:right; color:#2b2b2b}
.row input,.row .fixed{width:100%; font:12px/1.4 Tahoma,"Meiryo",sans-serif; padding:3px 6px; border:1px solid #7f9db9; background:#fff}
.row .fixed{background:#f2f2f2; color:#333; font-family:"MS Gothic","Courier New",monospace}
textarea{width:100%; min-height:150px; border:0; padding:10px 12px; font:13px/1.6 "MS Gothic","Meiryo",monospace; resize:vertical}
.actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 10px; background:var(--face); border-top:1px solid #b6b3a6}
.actions .hint{font-size:11px; color:#555}
.btn{min-width:86px}

/* ---- 7. レスポンシブ ---- */
@media (max-width:720px), (max-height:500px) and (pointer:coarse){
  .page{padding:12px 8px calc(var(--tb-h) + 20px)}
  .oe{grid-template-columns:1fr} .folders{order:2}
  .menu{display:none}
  .row{grid-template-columns:1fr} .row label{text-align:left}
  .list .who{width:auto}
}