/* 制作ノート（つくりて草／開花カレンダー） */
.making-log-card{padding:.7rem .8rem}
.making-log{display:flex;flex-direction:column;gap:.5rem}

.making-log-summary{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline}
.making-log-stat{display:inline-flex;align-items:baseline;gap:.2rem;font-size:.6rem;color:var(--ink-light,#7d6b5d)}
.making-log-stat b{font-size:1.05rem;color:var(--ink,#3d2b1f);font-weight:700}
.making-log-stat small{font-size:.58rem}
.making-log-stat-best b{color:var(--pink-deep,#d4789a)}

/* 日別グリッド: GitHub草と同じく 1列=1週（縦7マス=曜日）。左に曜日軸、上に月目盛り。
   30週を画面幅にフィットさせるため各列・各マスは可変幅（最小幅で潰れ防止）。 */
.making-log-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}

/* 本体: 左の曜日軸列 ＋ 右の（月ラベル＋グリッド）列 を横並びに。 */
.making-log-body{display:flex;gap:4px;min-width:max-content}

/* 縦軸の曜日。グリッドの7マスと高さを合わせるため、月ラベル行ぶん上に余白を取る。 */
.making-log-weekdays{display:flex;flex-direction:column;gap:3px;padding-top:calc(.8rem + 4px);flex:0 0 auto}
.making-log-weekdays span{height:14px;min-width:1rem;display:flex;align-items:center;justify-content:flex-end;font-size:.55rem;line-height:1;color:var(--ink-light,#7d6b5d)}

.making-log-cols{flex:1 1 auto;min-width:max-content}

/* 月ラベル: position:absolute でテキストを抜くと行の高さが 0 になりグリッドと重なるため、
   行に明示的な高さを与える。各枠は週列と 1対1（flex:1 1 0）で「列と同じ幅」にし、
   文字（"1月" 等）は枠を押し広げないよう絶対配置で右へはみ出させる。 */
.making-log-months{display:flex;gap:3px;height:.8rem;margin-bottom:4px;min-width:max-content}
.making-log-month{flex:1 1 0;min-width:14px;position:relative;font-size:.55rem;line-height:1;color:var(--ink-light,#7d6b5d)}
.making-log-month span{position:absolute;left:0;top:0;white-space:nowrap}

.making-log-grid{display:flex;gap:3px;width:100%;min-width:max-content}
.making-log-week{display:flex;flex-direction:column;gap:3px;flex:1 1 0;min-width:14px}

/* セルは活動量を地色で表現（活動なし＝薄ベージュ → 多い＝ピンク）。 */
.making-log-cell{height:14px;min-width:14px;width:100%;border-radius:3px;background:#f3ebe2;border:none;padding:0;cursor:pointer}
.making-log-cell-empty{background:transparent;cursor:default}
.making-log-cell.is-selected{outline:2px solid var(--pink-deep,#d4789a);outline-offset:1px;border-radius:3px}

/* 育ち段階の地色。ベージュ→淡ピンク→ピンクへ緩やかにグラデーションさせる
   （色相を飛ばさず、明度・彩度をなだらかに上げる）。 */
.making-log-stage-0{background:#f3ebe2}  /* 活動なし: 薄ベージュ */
.making-log-stage-1{background:#f4dfd9}  /* 芽:       ベージュ寄りの淡ピンク */
.making-log-stage-2{background:#f2c9cd}  /* 若葉:     淡ピンク */
.making-log-stage-3{background:#ec9fb4}  /* つぼみ:   ピンク */
.making-log-stage-4{background:#e0709a}  /* 開花:     濃いピンク */

/* タップ詳細ポップオーバー（日付のみ）。top/left は JS が選択マスの真上に合わせて設定する。 */
.making-log-popover{position:absolute;top:0;z-index:5;background:var(--ink,#3d2b1f);color:#fff;border-radius:7px;padding:.25rem .5rem;font-size:.65rem;line-height:1.2;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none}
.making-log-popover[hidden]{display:none}
.making-log-popover-date{font-weight:700}

.making-log-legend{display:flex;align-items:center;gap:3px;flex-wrap:wrap;font-size:.55rem;color:var(--ink-light,#7d6b5d)}
.making-log-legend-label{margin:0 .15rem}
.making-log-legend .making-log-cell{width:12px;height:12px;flex:0 0 auto;border-radius:2px}