.calendar-views { display:flex; gap:2px; padding:3px; background:var(--surface2); border-radius:8px; }
.calendar-views button { border:0; background:transparent; color:var(--text2); border-radius:6px; font-family:inherit; font-size:12px; line-height:1.5; padding:5px 13px; cursor:pointer; }
.calendar-views button.active { background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.calendar-views button:focus-visible,.monthly-card button:focus-visible,.monthly-card input:focus-visible,.monthly-card textarea:focus-visible { outline:2px solid #007aff; outline-offset:3px; }
.monthly-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.monthly-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
.monthly-head h2 { font-size:15px; font-weight:650; }
.monthly-actions { display:flex; gap:6px; }
.monthly-card button { font-family:inherit; font-size:12px; padding:6px 11px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text2); cursor:pointer; }
.monthly-card button:hover { background:var(--surface2); }
.monthly-card button:disabled { opacity:.5; cursor:default; }
#monthly-form { padding:18px 20px; }
.monthly-field { display:block; }
.monthly-field > span { display:block; color:var(--text2); font-size:11px; margin-bottom:6px; }
#monthly-keywords { width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; padding:5px 0 10px; font:600 20px/1.5 -apple-system,'PingFang SC',sans-serif; color:var(--text); margin-bottom:18px; border-radius:0; }
#monthly-body { display:block; width:100%; min-height:260px; resize:vertical; border:1px solid var(--border); border-radius:8px; background:#fdfcfb; padding:13px 14px; font:14px/1.85 -apple-system,'PingFang SC',sans-serif; color:var(--text); }
.monthly-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
.monthly-save-actions { display:flex; align-items:center; gap:8px; }
.monthly-card #monthly-save { background:var(--text); color:#fff; border-color:var(--text); }
#monthly-status { font-size:12px; color:var(--text2); flex:1; }
#monthly-status.error { color:#b22222; }
.monthly-help { color:var(--text2); font-size:11px; margin-top:12px; }
.monthly-conflict { padding:12px; border:1px solid #e9d4ac; background:#fffaf0; border-radius:8px; margin:14px 0 0; font-size:12px; }
.monthly-conflict p { margin-bottom:8px; }
.monthly-conflict pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:12px; line-height:1.6; max-height:180px; overflow:auto; padding:10px; margin-bottom:10px; background:#fff; border:1px solid var(--border); border-radius:6px; }
.monthly-conflict-actions { display:flex; gap:8px; flex-wrap:wrap; }
.nav-actions [hidden],.monthly-card [hidden] { display:none; }
@media(max-width:680px) {
  .topnav { align-items:flex-start; }
  .calendar-views { order:3; }
  .nav-actions { gap:5px; }
  .nav-actions button { padding:5px 10px; }
  #monthly-form { padding:14px; }
  #monthly-keywords { font-size:18px; }
  #monthly-body { min-height:230px; }
  .monthly-footer { align-items:flex-start; }
  #monthly-status { flex-basis:100%; }
}

/* A year of readable reflections, alongside the selected month's editor. */
.monthly-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.95fr); gap:12px; align-items:start; }
.monthly-layout[hidden] { display:none; }
.monthly-overview { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.monthly-overview-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; border-bottom:1px solid var(--border); }
.monthly-overview-head h2 { font-size:14px; font-weight:650; }
.monthly-overview button { font-family:inherit; cursor:pointer; }
.monthly-overview button:focus-visible { outline:2px solid #007aff; outline-offset:2px; }
.monthly-overview-head button { border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text2); padding:4px 8px; font-size:11px; }
.monthly-overview button:disabled { opacity:.5; cursor:default; }
.monthly-year-controls { display:flex; gap:7px; align-items:center; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.monthly-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px; }
.monthly-tile { position:relative; display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:142px; border:1px solid var(--border); border-radius:8px; background:#fdfcfb; color:var(--text); padding:9px 9px 7px; text-align:left; overflow:hidden; }
.monthly-tile::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--month-color); }
.monthly-tile:hover { background:var(--surface2); border-color:#ccc8c1; }
.monthly-tile[aria-pressed=true] { border-color:#007aff; box-shadow:0 0 0 1px #007aff; background:#f5f9ff; }
.monthly-tile-head { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:7px; }
.monthly-tile-month { font-size:15px; font-weight:650; line-height:1.5; }
.monthly-tile-badge { font-size:9px; color:var(--text2); white-space:nowrap; }
.monthly-tile-badge.draft { color:#a66000; }
.monthly-tile-keywords { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:5px; }
.monthly-tile-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; font-size:11px; line-height:1.65; white-space:pre-line; color:var(--text2); }
.monthly-tile-body.empty { color:var(--muted); }
.monthly-tile-foot { margin-top:auto; padding-top:8px; font-size:9px; color:var(--text2); line-height:1.5; }
.monthly-overview-status { padding:0 12px 12px; font-size:10px; color:var(--text2); }
.monthly-overview-status.error { color:#b22222; }
.monthly-layout .monthly-head { padding:12px; }
.monthly-layout .monthly-head h2 { font-size:14px; }
.monthly-layout .monthly-actions { gap:4px; }
.monthly-layout .monthly-actions button { font-size:10px; padding:5px 7px; }
.monthly-layout #monthly-form { padding:14px; }
.monthly-layout #monthly-keywords { font-size:18px; }
.monthly-layout #monthly-body { min-height:320px; }
@media(max-width:840px) {
  .monthly-layout { grid-template-columns:1fr; }
  .monthly-tile { min-height:132px; }
  .monthly-layout #monthly-body { min-height:240px; }
}
@media(max-width:480px) {
  .monthly-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:10px; }
  .monthly-overview-head { padding:10px; }
  .monthly-tile { min-height:130px; }
  .monthly-overview-status { padding:0 10px 10px; }
}