/* 予定の月のカレンダーと、知らせ（メッセージ）。デザインの担当の仕上げ 2026-11-13（黒・白・赤／森さん「カレンダーとかメッセージとか見やすさも大事」）。
   読み込みの順は proto.css → parts.css → shell.css。色は proto.css の :root の変数だけを使う。
   カレンダー（.cal）と知らせ（.msgs）は、案 1・案 2 とも白い札（白い札の色の置き換えは proto.css の「白い札」の決まり）。 */

/* ---------- 予定: 月のカレンダー ---------- */
/* 上の帯: [前] 年月 [次] …… [カレンダー｜一覧]。狭い時は切り替えが次の行の右に回る */
.calbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 4px;margin:8px 0 10px}
.cal-ym{flex:none;min-width:0;font:700 24px/1 var(--f-num);letter-spacing:.01em;white-space:nowrap;padding:0 6px}
.cal-ym:empty{display:none}
.cal-nav{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line-2);color:var(--ink);display:grid;place-items:center}
.seg2{display:flex;flex:none;margin-left:auto;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.seg2 button{height:44px;padding:0 14px;font-size:13.5px;font-weight:700;color:var(--sub);white-space:nowrap;text-align:center}
.seg2 button+button{border-left:1px solid var(--line)}
.seg2 button[aria-pressed="true"]{background:var(--hon);color:var(--hon-ink)}

/* 月の表: 白い札。線は引かず、週の並びと選んだ日の面で見せる */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--surface);color:var(--ink);border-radius:18px;overflow:hidden;margin-top:12px;padding:4px 4px 8px}
.cal-dow{text-align:center;font-size:12px;font-weight:700;color:var(--sub);padding:9px 0 5px}
.cal-day{min-width:0;min-height:66px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 1px 6px;border-radius:12px}
.cal-n{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font:700 19px/1 var(--f-num);font-variant-numeric:tabular-nums}
.cal-day.is-out .cal-n{color:var(--dim)}
.cal-day.is-out .cal-marks{opacity:.5}
.cal-day.is-today .cal-n{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-day.is-sel{background:var(--raise)}
.cal-day.is-sel .cal-n{background:var(--ink);color:var(--on-ink);box-shadow:none}
/* 日の印: 本 = 塗り / 仮 = 点線 / 外 = 取り消し線 / 候 = 丸い点線。字は 12px の太字で、2 つまで横に並ぶ */
.cal-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;min-height:20px;max-width:100%}
.cm{font-style:normal;font-size:12px;font-weight:900;line-height:16px;min-width:20px;height:20px;padding:0 2px;border-radius:5px;text-align:center;border:2px solid transparent}
.cm.hon{background:var(--hon);color:var(--hon-ink);border-color:var(--hon)}
.cm.kari{border-style:dashed;border-color:var(--kari);color:var(--kari)}
.cm.off{color:var(--off);text-decoration:line-through;text-decoration-thickness:1.5px;border-color:var(--line)}
.cm.cand{border-style:dotted;border-color:var(--sub);color:var(--sub)}
.cm.more{color:var(--sub);padding:0;min-width:0;border:0;font:700 12px/20px var(--f-num)}
/* 選んだ日の行: 候補日は丸い点線の札と「候補」の印 */
.row.is-cand{border:1.5px dotted var(--kari-line)}
.st.cand{border:1.5px dotted var(--sub);color:var(--sub)}

/* ---------- 知らせ（メッセージ） ---------- */
/* 1 枚の白い札に行を重ねる。1 行目 = 時刻（新着は赤い点）、2 行目 = 題（だれが・何を）を幅いっぱいに */
.msgs{display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-radius:16px;overflow:hidden}
.msg{width:100%;min-height:60px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t i" "b i";column-gap:10px;row-gap:3px;align-items:center;text-align:left;padding:12px 12px 13px 14px;color:inherit}
.msg+.msg{border-top:1px solid var(--line)}
.msg-t{grid-area:t;font:600 13px/1.2 var(--f-num);color:var(--sub);white-space:nowrap}
.msg-b{grid-area:b;min-width:0}
.msg>:nth-child(3){grid-area:i}
.msg-b b{display:block;font-size:15px;line-height:1.45;font-weight:500;word-break:auto-phrase;text-wrap:pretty}
.msg-b span{display:block;font-size:13.5px;line-height:1.5;color:var(--sub);margin-top:1px;overflow-wrap:anywhere;word-break:auto-phrase}
.msg .ic{color:var(--sub)}
.msg.is-new .msg-b b{font-weight:700}
.msg.is-new .msg-t::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.more-link{margin:4px auto 0}

@media (hover:hover){
  .cal-day:not(.is-sel):hover,.msg:hover,.cal-nav:hover{background:var(--raise)}
  .seg2 button:not([aria-pressed="true"]):hover{color:var(--ink)}
}
/* スマホ・縦のタブレット: 切り替えを 1 段目に横いっぱい、2 段目に [前] 年月 [次] */
@media (max-width:899px){
  .seg2{order:-1;flex:1 0 100%;margin-left:0}
  .seg2 button{flex:1}
}
@media (min-width:900px){
  /* 親が足した 1 行（11/13）: 切り替えは題「予定」と同じ箱（.cal-head）にあるので、PC では題の右に、中身の幅で置く（横いっぱいの空の帯にしない） */
  .cal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .cal-ym{font-size:28px}
  .cal-day{min-height:96px;padding:8px 2px;gap:5px}
  .cal-n{width:38px;height:38px;font-size:22px}
  .cal-marks{gap:4px}
  .cm{font-size:14px;min-width:28px;height:26px;line-height:22px;border-radius:6px}
  .cm.more{line-height:26px;font-size:14px}
}