/* --- 編集/保存FAB --- */
  .edit-save-fab {
    position: fixed;
    right: 18px;
    /* タブバー自体がenv(safe-area-inset-bottom)分の余白を持つようになったため
       （ナビゲーションバー対応、2026-09-06）、FABの位置もそれに合わせて
       押し上げる必要がある。固定値のままだと機種によってタブバーと重なっていた。 */
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    background: var(--pine);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 6px 18px rgba(63,110,93,0.4);
    cursor: pointer;
  }
  .edit-save-fab.saving { background: var(--amber); box-shadow: 0 6px 18px rgba(201,138,59,0.4); }
  .edit-save-fab:active { opacity: 0.85; }
  .edit-save-fab:disabled { opacity: 0.6; cursor: default; }

  .edit-cancel-fab {
    position: fixed;
    right: 18px;
    /* タブバー自体がenv(safe-area-inset-bottom)分の余白を持つようになったため
       （ナビゲーションバー対応、2026-09-06）、FABの位置もそれに合わせて
       押し上げる必要がある。固定値のままだと機種によってタブバーと重なっていた。 */
    bottom: calc(148px + env(safe-area-inset-bottom));
    z-index: 25;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(38,43,40,0.15);
    cursor: pointer;
  }
  .edit-cancel-fab:active { background: var(--surface-sunk); }

  /* --- 今日タブ：ロック状態（閲覧のみ）。opacityでの減光はせず、
     クリック・タップだけ無効化する（見づらくならないように） --- */
  #view-today.locked .editable-card {
    pointer-events: none;
  }

  /* --- 編集モード中の見た目の工夫 ---
     ・編集可能なカードにパイングリーンの枠と右上の「✎」の印を付けて「今ここが編集できる」を示す
       （2026-10-04、バックログ#33-21: 以前は淡い緑の背景も付けていたが、背景は白に戻した。
       2026-10-04、#33-33で省エネモード中の--pineの差し替えをやめたので、省エネ中も緑のまま）
     ・画面上部に「編集中」の帯を出し、スクロールしても編集状態が分かるようにする */
  #view-today.editing .editable-card {
    position: relative;
    outline: 2px solid var(--pine);
    outline-offset: -2px;
    transition: outline-color 0.15s ease;
  }
  #view-today.editing .editable-card::before {
    content: '✎';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pine);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
  }
  /* 編集中は上の3枚（気分・睡眠・キャパ使用率）を隠し、気分と睡眠は下の「気分・睡眠」カード
     （#sleepEditPanel）でまとめて入力する（#33-21）。 */
  #view-today.editing .vitals-row { display: none; }
  .editing-banner {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--pine);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
  }
  #view-today.editing .editing-banner { display: flex; }
  /* 「🎙 話して記録する」を編集中の帯の右端に寄せる（2026-09-28追加）。既存の緑ボタン
     （.chat-open-btn）は薄い緑背景が前提のデザインなので、帯自体が緑背景の上でも
     読めるよう白背景にする。 */
  .editing-banner-voicelog-btn {
    margin-left: auto;
    margin-top: 0;
    flex-shrink: 0;
    background: #fff;
    color: var(--pine-deep);
    border: none;
  }
  /* PC版専用のボタン（バックログ#33-13）。スマホは右下FABのまま、これらは常に隠す
     （PC版の見た目はtoday.cssの@media (min-width:1024px)ブロック側で定義）。 */
  .today-edit-header-btn,
  .today-edit-banner-cancel-btn,
  .today-edit-banner-save-btn {
    display: none;
  }
  .attendance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .record-streak-badge {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pine-deep);
    background: var(--pine-soft);
    border-radius: 999px;
    padding: 2px 12px;
    white-space: nowrap;
  }
  .editing-banner-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: editing-pulse 1.4s ease-in-out infinite;
  }
  @keyframes editing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  section.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding-top: 10px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  h2.card-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding: 10px;
  }

  /* 今日タブの3列のカード */
  h2.mini-card-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }

  /* 「今日のタスク」見出しと同じ行に、合計工数・合計心理的負荷を右揃えで出す */
  .task-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }
  .task-list-header .card-title { margin-bottom: 0; }
  .task-list-totals {
    display: flex;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-faint);
    flex-shrink: 0;
    white-space: nowrap;
  }

  .vitals-row .card .card-title { margin-bottom: 8px; }

  /* --- 今日の状態：気分 + 睡眠 + キャパアーチ（3列） --- */
  .vitals-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .vitals-row .card { flex: 1; margin-bottom: 0; padding: 10px 8px 10px; min-width: 0; }
  .vitals-row .card .card-title { font-size: 13px; margin-bottom: 6px; }
  .capacity-card, .mood-card, .sleep-summary-card {
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  /* キャパ使用率の説明の吹き出し（#33-2）。カードの右端に揃えて見出しの下に出す。
     画面の外にはみ出す時は、utils.jsのinitTermHelp()がtranslateXで内側へずらす。 */
  .capacity-card { position: relative; overflow: visible; }
  .term-help-pop {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 30;
    width: 260px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(38,43,40,0.16);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
    text-align: left;
  }
  /* h2.card-titleは常に上端。card-body-centerはそこから下へ自然に積む（中央寄せしない）。
     3つのグラフィック(うつ君/睡眠円/キャパアーチ)の垂直位置を揃えるのは
     .vitals-graphic-slot の固定高さで行う。 */
  .card-body-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* 3枚とも同じ固定高さのスロットに入れることで、中の絵の大きさが違っても
     絵の垂直中央が3枚とも同じY座標に揃う（円グラフの74pxを基準にしている） */
  .vitals-graphic-slot {
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .arc-wrap { position: relative; width: 100%; max-width: 108px; aspect-ratio: 220 / 122; }
  .arc-wrap svg { width: 100%; height: 100%; overflow: visible; }
  .arc-track { fill: none; stroke: var(--surface-sunk); stroke-width: 14; stroke-linecap: round; }
  .arc-fill { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease; }
  .arc-readout {
    position: absolute;
    bottom: 2px;
    left: 0; right: 0;
    text-align: center;
  }
  .arc-readout .pct {
    font-size: 22px;
    font-weight: 700;
  }
  .arc-readout .pct::after { content: "%"; font-size: 13px; margin-left: 1px; color: var(--ink-muted); }
  .arc-readout .label { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.03em; margin-top: -2px; }

  /* --- 気分（タップでサイズが変わる） --- */
  .mood-frame {
    position: relative;
    width: 100%;
    max-width: 74px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
    overflow: hidden;
  }
  .mood-frame:active { background: var(--surface-sunk); }
  .mood-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .mood-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
  }
  .mood-current-label { font-size: 11.5px; font-weight: 700; margin-top: 6px; color: var(--ink); }

  /* --- 睡眠カード（3列目・円グラフのみ、8時間で一周。表示専用） --- */
  .sleep-circle-wrap {
    position: relative;
    width: 100%;
    max-width: 74px;
    aspect-ratio: 1 / 1;
  }
  .sleep-circle-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .sleep-circle-track { fill: none; stroke: var(--surface-sunk); stroke-width: 10; }
  .sleep-circle-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease;
  }
  .sleep-circle-readout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sleep-circle-hours { font-size: 14px; font-weight: 700; color: var(--ink); }
  .sleep-summary-range {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
  }
  .capacity-status-label {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
  }
  .capacity-status-label.status-ok { color: var(--pine-deep); }
  .capacity-status-label.status-warn { color: #6B4A15; }
  .capacity-status-label.status-alert { color: var(--brick); }
  /* 体調の記録が無い日（#43-4）: 数字は「—」で%を付けない。ラベルは控えめな色 */
  .arc-readout .pct.is-empty::after { content: none; }
  .arc-readout .pct.is-empty { color: var(--ink-faint); }
  body[data-view="today"] .vitals-row .capacity-status-label.status-none { color: var(--ink-muted); font-weight: 600; }
  .capacity-status-chunk { display: inline-block; }

  /* --- 「気分・睡眠」の入力カード（編集中だけ表示。#33-21） --- */
  #sleepEditPanel { margin-bottom: 16px; }
  /* 気分カード（#moodCard）は編集中だけここへ移される。カードとしての枠・影・背景・印は消し、
     絵（左）＋見出し・段階・説明（右）の1行にする。DOMは h2 / #moodBody（絵の枠・段階・説明）/
     未入力の表示 の順なので、#moodBodyをdisplay:contentsにしてグリッドで並べ替える。 */
  #view-today #moodEditSlot .mood-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    padding: 4px 0 14px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--line);
  }
  #view-today #moodEditSlot .mood-card::before { content: none; display: none; }
  #view-today #moodEditSlot .mood-card .mini-card-title {
    grid-column: 2; grid-row: 1; align-self: end;
    margin: 0; font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em;
  }
  #view-today #moodEditSlot #moodBody { display: contents; }
  #view-today #moodEditSlot .vitals-graphic-slot { grid-column: 1; grid-row: 1 / 4; width: 64px; height: 64px; }
  #view-today #moodEditSlot .mood-frame { width: 64px; height: 64px; max-width: none; }
  #view-today #moodEditSlot .mood-current-label { grid-column: 2; grid-row: 2; margin: 0; font-size: 15px; font-weight: 700; }
  .mood-edit-hint { display: none; }
  #view-today #moodEditSlot .mood-edit-hint {
    display: block; grid-column: 2; grid-row: 3; align-self: start;
    font-size: 11px; font-weight: 700; color: var(--pine-deep);
  }
  /* 未入力の日: 見出しの下に「未入力」と「入力する」を横に並べる */
  #view-today #moodEditSlot .mood-card.is-unset .mini-card-title { grid-column: 1 / -1; }
  #view-today #moodEditSlot .vitals-unset-placeholder {
    grid-column: 1 / -1; grid-row: 2;
    flex-direction: row; justify-content: flex-start; min-height: 0; gap: 10px; margin-top: 4px;
  }
  .sleep-edit-subtitle { font-size: 11px; font-weight: 700; color: var(--ink-muted); margin: 0 0 6px; }
  .sleep-unset-note { font-size: 11px; color: var(--ink-muted); margin: 0 0 6px; }

  /* --- AM/PMそれぞれのセクション（スコア横並び＋体調サイン） --- */
  /* セルフモニタリングカードだけ、他のカードより左右パディングを狭くして
     AM/PM入力欄・気づき備考欄の実質的な幅を広げる（他のカード全般には影響させない）。 */
  .self-monitoring-card { padding-left: 14px; padding-right: 14px; }

  .period-section {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    padding: 14px 8px;
    margin-bottom: 12px;
  }
  .period-section:last-of-type { margin-bottom: 0; }

  /* AM/PMバッジと「未入力に戻す」を同じ行の両端に置くラッパー（2026-09-28追加）。
     バッジ自体(.period-head)は元のコンパクトなピル表示のまま変えない。 */
  .period-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
  .period-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
  }
  .period-section.am .period-head { background: var(--am-soft); }
  .period-section.pm .period-head { background: var(--pm-soft); }
  .period-dot { width: 8px; height: 8px; border-radius: 50%; }
  .period-section.am .period-dot { background: var(--am); }
  .period-section.pm .period-dot { background: var(--pm); }
  .period-head span { font-size: 13px; font-weight: 700; }
  .period-clear-btn {
    flex-shrink: 0; border: none; background: none; padding: 4px 2px;
    font-size: 11px; font-weight: 700; font-family: inherit; color: var(--ink-faint); cursor: pointer;
  }
  .period-clear-btn:active { color: var(--brick); }
  /* 「✕ 未入力に戻す」は今日タブの編集中だけ出す（#48-1）。記録の有無による出し分けは
     today.jsのupdateAm/PmUnsetDisplay()がインラインのdisplayで行う */
  #view-today:not(.editing) .period-clear-btn { display: none; }

  .score-pair-row { display: flex; gap: 16px; margin-bottom: 14px; }
  .pm-unset-placeholder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-faint);
  }
  .period-fully-unset {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    color: var(--ink-faint);
    font-size: 13.5px;
    font-weight: 700;
  }
  /* 参照モードでは「追加」ボタンは押せないので非表示にする */
  #view-today.locked .add-tag-btn { display: none; }
  /* 参照モードでは編集操作（削除✕・ドロップダウンの開閉矢印）は使えないので、
     混乱を避けるため見た目からも消しておく */
  #view-today.locked .chip-remove,
  #view-today.locked .rr-remove,
  #view-today.locked .modern-select-caret { display: none; }
  /* 参照モードでは✕ボタンが消える分、チップの右側パディングが余って
     文字が中央からズレて見えるため、左右対称に詰め直す */
  #view-today.locked .chip { padding-right: 13px; }
  #view-today.locked .period-signs .chip { padding-right: 10px; }
  .unset-start-btn {
    border: 1px solid var(--pine);
    background: var(--pine-soft);
    color: var(--pine-deep);
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
  }
  /* 閲覧モードでは「入力する」ボタンを押せないので、混乱を避けるため隠す */
  #view-today.locked .unset-start-btn { display: none; }
  /* 気分・睡眠カードの「未入力」表示は、横並び(テキスト+ボタン)のままだと
     カード上部に偏って見えるため、画像枠と同じ高さを確保した上で
     縦積み・完全中央揃えのレイアウトに変える。 */
  .vitals-unset-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    margin-bottom: 0;
  }
  .score-pair-row .score-row { flex: 1; margin-bottom: 0; }

  .period-signs-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  .period-signs-head .tag-group-label { font-size: 13.5px; color: var(--ink-muted); font-weight: 700; }
  .period-signs-head .sign-period-count { font-size: 12.5px; font-weight: 400; color: var(--ink-muted); margin-left: auto; }
  .period-signs .chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
  .period-signs .chip { padding: 5px 6px 5px 10px; font-size: 11.5px; }
  .period-signs .add-tag-btn.small { margin-top: 8px; padding: 5px 10px; font-size: 12.5px; }
  .period-signs .tag-picker-panel { padding: 8px; }

  .score-row { margin-bottom: 10px; }
  .score-row:last-child { margin-bottom: 0; }
  .score-row .score-label {
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 4px;
  }
  .score-row .score-label .val { font-weight: 700; font-size: 18px; color: var(--ink); }

  input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    height: 20px;
    background: transparent;
    --fill: 0%;
    --fill-color: var(--line);
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background:
      /* 塗りの終端（右端）に丸いキャップを重ねる。左端はトラック自体のborder-radiusで
         自然に丸くなるが、塗りが途中で切れる右端は素の直角になるため、これで補う。 */
      radial-gradient(circle 5px at var(--fill) center, var(--fill-color) 100%, transparent 100%) no-repeat,
      linear-gradient(var(--fill-color), var(--fill-color)) left center / var(--fill) 100% no-repeat,
      linear-gradient(rgba(38,43,40,0.14), rgba(38,43,40,0.14)) left center / 100% 4px no-repeat;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid #4A4F4C;
    margin-top: -5px;
    cursor: pointer;
  }
  /* 参照モード（閲覧のみ）の時は、操作できない丸を出しっぱなしにしないよう隠す。
     トラック自体（塗り部分の色・進捗）は編集中でなくても見えたままにする。 */
  #view-today.locked input[type="range"]::-webkit-slider-thumb {
    opacity: 0;
  }

  /* --- ストレッサー/コーピング：選択済み評価リスト --- */
  .rated-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .rated-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: 8px 8px 8px 12px;
  }
  /* 編集モード時は、名前+削除ボタンの行と、大中小等の選択ボタン行を
     縦に分ける（名前が長いと選択ボタンと重なって窮屈になるため）。 */
  .rated-row.editing {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .rr-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rated-row.editing .rr-segmented { align-self: flex-start; }
  .rated-row .rr-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rr-segmented {
    display: flex;
    background: var(--surface);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
  }
  .rr-segmented button {
    border: none;
    background: none;
    font-size: 11px;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--ink-muted);
    cursor: pointer;
    font-family: inherit;
  }
  .rr-segmented button.active { color: #fff; font-weight: 700; }
  .rr-remove {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
  }
  .rr-value-text {
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .rr-remove:active { background: var(--surface); }

  textarea.note {
    width: 100%;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 10px 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink);
    resize: none;
    overflow: hidden;
    min-height: 52px;
  }
  textarea.note::placeholder { color: var(--ink-faint); }
  .period-note { margin-top: 12px; min-height: 44px; font-size: 12.5px; }

  /* --- 睡眠 --- */
  /* 「途中で起きていた時間(h)」のラベルが2行になっても、隣の欄と入力欄の位置が揃うよう下端揃えにする（#33-2） */
  .sleep-row { display: flex; gap: 10px; align-items: flex-end; }
  .sleep-field { flex: 1; }
  .sleep-field label { display: block; font-size: 11px; color: var(--ink-muted); margin-bottom: 5px; }
  .sleep-field input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--surface-sunk);
    color: var(--ink);
  }
  .sleep-summary {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-muted);
    display: flex;
    justify-content: space-between;
  }
  .sleep-summary .val { color: var(--ink); font-weight: 700; }

  .sleep-total {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .sleep-total-label { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
  .sleep-total-val {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
  }
  .sleep-total-val.safe { color: var(--pine-deep); }
  .sleep-total-val.warn { color: #6B4A15; }
  .sleep-total-val.alert { color: var(--brick); }

  /* ============================================================
     今日の日付を見ている時だけ表示するメッセージエリア
     ============================================================ */
  /* このエリアはアプリの「看板」として、他のカードよりも視覚的に目立たせる
     （グラデーション背景・太めの縁取り・強めの影）。 */
  /* てりーさんからの挨拶メッセージ＋「相談する」は「てりーさん」タブへ移管（2026-09-28）。
     今日タブには「🎙 話して記録する」専用の入口だけ、コンパクトな1行として残す。 */
  .daily-message-area {
    margin-bottom: 12px;
  }
  /* マスコット画像は正方形枠に収めず、画像本来の縦長比率のまま
     エリアの高さいっぱいに近い大きさで表示する（無駄な余白を減らすため）。
     吹き出しと縦位置を揃えるため、エリア全体を中央揃えにする。 */
  .daily-message-mascot {
    flex-shrink: 0;
    height: 140px;
    display: flex;
    align-items: center;
  }
  .daily-message-mascot img { display: block; height: 100%; width: auto; object-fit: contain; }
  .daily-message-bubble {
    position: relative;
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.6;
    box-shadow: 0 1px 4px rgba(38,43,40,0.08);
  }
  /* マスコット側を指す吹き出しの三角形 */
  .daily-message-bubble::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent var(--surface) transparent transparent;
  }

  /* ============ 省エネモード ============
     フェーズ1（2026-09-25）ではスイッチが共有カード（#scheduleDayDetailCard）の
     中にあったが、フェーズ3付随のUI改修（2026-09-26、Gemini設計）でトップヘッダー
     （#appHeader内の.day-nav、次の日ボタンの隣）へ移動した。配色は一時期、紫系に
     していたが、2026-10-04（#33-33）にアプリ全体を緑ベースに統一した（省エネ中は
     今日タブの背景が薄いミントになる。tokens.css参照）。
     独立した固定行として追加していた時期もあったが、表示領域が狭くなるという
     指摘を受け、日付ナビゲーションの行に統合し直した（レイアウト自体は
     .day-nav-right-group、shared.css参照）。 */
  /* 選択日詳細カードのヘッダー右側：実績ログバッジ＋工数/負荷サマリーを横並びにする。 */
  .schedule-day-detail-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  /* 狭いスマホ幅（380px以下）のヘッダーの詰め方は、shared.css末尾の#50のブロックにまとめた */
  /* ヘッダー右上の設定ボタン */
  .header-settings-btn { font-size: 16px; }
  /* キャラクターエリアの「💬 てりーさんに相談する」 */
  .chat-open-btn {
    display: inline-block;
    margin-top: 10px;
    border: 1px solid var(--pine);
    background: var(--pine-soft);
    color: var(--pine-deep);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .chat-open-btn:active { background: var(--pine); color: #fff; }
  /* 実績ログの閲覧専用バッジ（ヘッダー・選択日詳細カードの両方で使う共通クラス）。 */
  .energy-mode-history-badge {
    font-size: 15px;
    line-height: 1;
  }
  /* 操作（延期・短縮）の一覧（Undo用）。省エネモードのON/OFFに関わらず、
     is_undoneでない操作がある限り表示する。省エネモード（手動ダイアログ）と専属秘書
     ブリーフィングは別バナーに分け、混ざらないようにする（2026-09-27、ユーザー指定）。
     背景色は各.energy-mode-bannerが個別に持つ（外側のこの要素はレイアウトの余白のみ）。 */
  .energy-mode-deferral-panel { margin: 0 10px 14px; }
  /* 調整中のバナーの枠・面は固定オーロラ（.nagi-suggest-aurora、today.jsで付ける。#33-52） */
  .energy-mode-banner {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
  }
  .energy-mode-banner:last-child { margin-bottom: 0; }
  /* 1行のコンパクトなバナー（アコーディオン）。タップで調整中タスクの一覧を開閉する。 */
  .energy-mode-banner-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: none;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--pine-deep);
    text-align: left;
    cursor: pointer;
  }
  .energy-mode-banner-toggle { flex-shrink: 0; font-weight: 500; font-size: 11px; }
  .energy-mode-banner-body { padding: 0 12px 10px; }
  .energy-mode-release-link {
    display: block;
    margin: 8px auto 0;
    border: none;
    background: none;
    padding: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-muted);
    text-decoration: underline;
    cursor: pointer;
  }
  .energy-mode-deferral-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
  }
  .energy-mode-deferral-row-action-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pine-deep);
    background: var(--surface);
    border-radius: 999px;
    padding: 2px 8px;
  }
  .energy-mode-deferral-row-title {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .energy-mode-deferral-undo-btn {
    flex-shrink: 0;
    border: 1px solid var(--pine);
    background: var(--surface);
    color: var(--pine-deep);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .energy-mode-deferral-undo-btn:active { background: var(--pine); color: #fff; }

  /* 別の日へ回った（延期・残り分）カードの、緑ベースでさりげない🌱ピル。操作なし。
     #33-52（2026-10-11）から、見た目（枠・面）は3つのピルとも共通部品.nagi-suggest-aurora-pill（shared.css、schedule.jsで付ける）。 */
  .energy-moved-pill {
    flex-shrink: 0;
    align-self: center;
    font-size: 11px;
    line-height: 1.4;
    color: var(--pine-deep);
    padding: 0 7px;
  }
  /* 専属秘書ブリーフィング（てりーさんの提案）で調整・追加されたタスクのピル（2026-09-27追加）。
     #33-52（2026-10-11）から枠・面は固定オーロラのピル（.nagi-suggest-aurora-pill）。2026-10-04（#33-33）から省エネモードの
     ピル（.energy-action-pill）も同じ見た目になり、文字（🌿 調整済み／🌱短縮済み）で見分ける。タップ可能な時（同日短縮の元タスク）はundoダイアログを開き、それ以外
     （別日へ移動・コーピングとして追加されたもの）は.is-staticを付けて操作なしにする。 */
  .briefing-adjusted-pill {
    flex-shrink: 0;
    align-self: center;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    color: var(--pine-deep);
    padding: 1px 9px;
    white-space: nowrap;
    cursor: pointer;
  }
  .briefing-adjusted-pill.is-static { cursor: default; }
  /* 本日終了：連絡文を大きく見せる画面 */
  .energy-mode-contact-card { padding: 14px; margin-bottom: 14px; background: var(--surface-sunk); border-radius: var(--radius-md); }
  .energy-mode-contact-title { font-size: 14px; font-weight: 800; color: var(--pine-deep); margin-bottom: 8px; }
  .energy-mode-contact-message {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--pine);
    border-radius: var(--radius-md);
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
  }
  /* コピーボタン（#35-12）: 連絡文そのものより強く見えないよう、濃緑の全面塗りをやめて淡い青緑の面＋細い枠にする。
     横幅100%（.task-form-submit）は維持。下の「送信した」チェックとの間は、margin-bottom＋ラベルのpadding 8pxで約12px */
  .energy-mode-contact-copy-btn {
    display: block;
    height: 40px;
    box-sizing: border-box;
    margin: 10px 0 4px;
    padding: 0 14px;
    font-size: 13.5px;
    line-height: 1;
    white-space: nowrap;
    background: #EAF8FA;
    color: var(--pine-deep);
    border: 1px solid #9BCFD2;
    border-radius: 8px;
    transition: background-color 0.15s, border-color 0.15s;
  }
  .energy-mode-contact-copy-btn:hover { background: #DCF2F5; border-color: #84C3C7; }
  .energy-mode-contact-copy-btn:active { background: #CBEAEE; border-color: #6FB6BB; }

  /* --- 省エネの取り消し（2026-09-26追加） --- */
  .energy-undo-item { margin-bottom: 14px; padding: 12px; background: var(--surface-sunk); border-radius: var(--radius-md); }
  .energy-undo-kind {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pine-deep);
    background: var(--surface);
    border-radius: 999px;
    padding: 2px 8px;
  }
  .energy-undo-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
  .energy-undo-arrow { color: var(--pine-deep); font-weight: 800; }
  .energy-undo-col-label { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-bottom: 4px; }
  .energy-undo-cell { padding: 8px; background: var(--surface); border-radius: var(--radius-sm); min-width: 0; }
  .energy-undo-title { font-size: 12.5px; font-weight: 700; color: var(--ink); word-break: break-all; margin-bottom: 4px; }
  .energy-undo-meta { font-size: 11px; color: var(--ink-muted); line-height: 1.5; }
  .energy-undo-note { margin-top: 8px; font-size: 11.5px; color: var(--brick); line-height: 1.5; }
  /* カード右の「🌱短縮済み／延期済み」ピル。タップで取り消しダイアログを開く。 */
  .energy-action-pill {
    flex-shrink: 0;
    align-self: center;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    color: var(--pine-deep);
    padding: 1px 9px;
    white-space: nowrap;
    cursor: pointer;
  }

  /* --- 本日終了（早退・全休）サポート（2026-09-26追加） --- */
  .energy-mode-endday-btn { background: var(--pine); }
  .energy-mode-end-safe {
    padding: 14px 12px;
    margin-bottom: 12px;
    background: var(--pine-soft);
    color: var(--pine-deep);
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
  }
  .energy-mode-end-group { margin-bottom: 12px; }
  .energy-mode-end-move {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
  }
  .energy-mode-end-move-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .energy-mode-end-move-to { flex-shrink: 0; color: var(--pine-deep); font-weight: 700; }
  .energy-mode-end-note { font-size: 11.5px; color: var(--ink-muted); line-height: 1.6; margin: 8px 0 14px; }
  .energy-mode-conflict {
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
  }
  .energy-mode-conflict-options { flex-direction: column; gap: 6px; }
  .energy-mode-conflict-msg { margin-top: 10px; }
  .energy-mode-conflict-msg textarea { width: 100%; font-size: 12.5px; line-height: 1.6; resize: vertical; }
  .energy-mode-conflict-msg input[type="text"] { width: 100%; margin-bottom: 6px; }
  .energy-mode-copy-btn {
    margin-top: 4px;
    border: 1px solid var(--pine);
    background: var(--surface);
    color: var(--pine-deep);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  /* 本日終了後の「セルフケア完了」状態。未完了タスクやスケジュールが視界に入らないよう、
     今日タブではタスク関連のカード・調整中バナーを隠し、完了メッセージだけを見せる。 */
  .end-of-day-panel { text-align: center; padding: 24px 16px; background: var(--pine-soft); border: 1px solid var(--pine); }
  section.end-of-day-panel { background: var(--pine-soft); padding: 22px 14px 16px; }
  .end-of-day-panel .energy-mode-contact-card { text-align: left; margin-top: 14px; }
  .end-of-day-panel .end-of-day-text { margin-bottom: 4px; }
  .end-of-day-title { font-size: 17px; font-weight: 800; color: var(--pine-deep); margin-bottom: 8px; }
  .end-of-day-text { margin: 0; font-size: 13px; line-height: 1.8; color: var(--pine-deep); }
  .end-of-day-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-muted); }
  body.end-of-day-active[data-view="today"] #scheduleDayDetailCard,
  body.end-of-day-active[data-view="today"] #overdueTasksCard,
  body.end-of-day-active[data-view="today"] #energyModeDeferralPanel { display: none !important; }

  /* --- 省エネモードの2ステップダイアログ（2026-09-26追加） --- */
  .energy-mode-dialog-intro {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.6;
  }
  .energy-mode-task-row {
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
  }
  .energy-mode-task-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .energy-mode-task-row-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .energy-mode-task-row-category-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
  }
  /* 「高負荷」バッジは赤から塗りのアンバーへ（バックログ#33-9、2026-09-30）。「長時間」
     （淡いアンバー）と見分けがつくよう、高負荷は塗り・長時間は淡いアンバーで差をつける。 */
  .energy-mode-task-row-category-badge.is-high_load { background: var(--amber); color: #fff; }
  .energy-mode-task-row-category-badge.is-long_duration { background: var(--amber-soft); color: var(--amber); }
  .energy-mode-task-row-category-badge.is-meeting { background: var(--pm-soft); color: var(--pm); }
  .energy-mode-task-row-meta {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ink-faint);
  }
  .energy-mode-task-row-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
  }
  .energy-mode-task-row-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
  }
  .energy-mode-task-row-options input[type="radio"] { accent-color: var(--pine); cursor: pointer; }
  .energy-mode-dialog-preview {
    margin: 4px 0 14px;
    padding: 10px 12px;
    background: var(--pine-soft);
    color: var(--pine-deep);
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
  }
  .energy-mode-step2-group { margin-bottom: 14px; }
  .energy-mode-step2-group-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 6px;
  }
  .energy-mode-step2-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.5;
    padding: 8px 0;
    cursor: pointer;
  }
  .energy-mode-step2-check input[type="checkbox"] { margin-top: 2px; accent-color: var(--pine); cursor: pointer; flex-shrink: 0; }


@media (min-width: 1024px) {
  /* --- 今日タブ：AIメッセージ〜セルフモニタリングカードまでを左、
     タスク（予定タブと共通のカード）を右の2カラムに --- */
  /* 2026-09-13修正：以前は#todayScheduleCardSlot以降の兄弟要素をまとめて
     右カラムに送る（一般兄弟結合子 ~）方式にしていたが、grid-auto-flowの
     自動配置が、表示/非表示が日付によって変わる要素の影響を受けて
     行がずれ、日付によって左右の表示内容が変わってしまう不具合があった。
     左右を明示的なラッパーdiv（.today-col-left/.today-col-right）で
     囲む方式に変更し、grid-auto-flowに依存しないようにした。 */
  #view-today {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 16px;
    align-items: start;
  }
  .today-col-left { grid-column: 1; }
  .today-col-right { grid-column: 2; }

  /* PC版は右下FABをやめ、ヘッダー／編集中バナーのボタンに置き換える
     （バックログ#33-13、2026-09-30。スマホでは進捗管理の「てりーさんとガントを整える」と
     FABの位置が重なり、今日タブでは「✎編集」FABが面談・相談事項メモに重なっていたため）。 */
  .edit-save-fab, .edit-cancel-fab { display: none !important; }
  /* 見た目は.toggle-pill（省エネボタンと同系統）に乗せる。表示/非表示（編集中は隠す）は
     today.jsのenterEditMode()/exitEditModeWithoutSaving()がstyle.displayで切り替える。 */
  .today-edit-header-btn { display: inline-flex; }
  .today-edit-header-btn:active { background: var(--surface-sunk); }
  .today-edit-banner-cancel-btn,
  .today-edit-banner-save-btn { display: inline-flex; align-items: center; }
  .today-edit-banner-cancel-btn,
  .today-edit-banner-save-btn {
    border: none; border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700;
    font-family: inherit; cursor: pointer; flex-shrink: 0;
  }
  .today-edit-banner-cancel-btn { background: rgba(255,255,255,0.18); color: #fff; }
  .today-edit-banner-cancel-btn:active { background: rgba(255,255,255,0.3); }
  .today-edit-banner-save-btn { background: #fff; color: var(--pine-deep); }
  .today-edit-banner-save-btn:active { background: var(--pine-soft); }
  .today-edit-banner-save-btn:disabled { opacity: 0.6; cursor: default; }
  /* 話して記録する・キャンセル・保存の並び順で、間の余白を詰める
     （.editing-banner-voicelog-btnのmargin-left:autoで右詰めされた続きに並ぶ）。 */
  .editing-banner-voicelog-btn { margin-right: 0; }
  .today-edit-banner-cancel-btn { margin-left: 8px; }
  .today-edit-banner-save-btn { margin-left: 8px; }
  /* 帯はスクロールしても見えるよう上端に固定する。 */
  .editing-banner { position: sticky; top: 0; z-index: 10; }
  /* 勤怠の一覧（#attendancePanel）はヘッダー（header.app-header、sticky・z-index:10で重なりの文脈を作る）の中にあり、
     一覧自身のz-index（15）はヘッダーの外では効かない。ヘッダーと帯が同じz-index:10だと、後に並ぶ帯が上になり、
     一覧の上側（勤務日・休日）が帯の裏に隠れて選べなかった（#33-44）。PCだけヘッダーを帯より1つ上にする
     （ヘッダーとmainは重ならないので、ヘッダーから下へはみ出す一覧以外の見た目は変わらない）。 */
  header.app-header { z-index: 11; }
  /* 1024px前後で今日の日付を編集すると、「話して記録する」・キャンセル・保存の3つのボタンに押されて
     文言が1文字ずつの縦書きのように潰れていた（#33-21で文言を長くした際に確認）。文言に最小幅を持たせ、
     入りきらない時はボタンを次の行へ折り返す。 */
  .editing-banner { flex-wrap: wrap; row-gap: 8px; }
  .editing-banner-text { flex: 1 1 auto; min-width: 9em; }

  /* 今日タブの1行目：メッセージカード・勤怠+記録日数・vitals（気分/睡眠/
     キャパ使用率）を横1行にまとめる（2026-09-13追加。スマホ版には影響しない）。 */
  .today-top-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
  }
  .today-top-row .daily-message-area {
    /* 勤怠+記録日数が独立した列ではなくなった分、メッセージカードの幅を
       広げる（2026-09-14修正）。 */
    flex: 2;
    margin-bottom: 0;
    min-width: 0;
  }
  /* 勤怠+記録日数（1行）と、気分/睡眠/キャパ使用率（3カード）を縦に並べる列。
     2026-09-14追加：以前は勤怠+記録日数がメッセージカードの隣に単独の縦長の
     列として並んでいたが、1行にまとめてvitals-rowの上に配置する形に変更した。 */
  .today-vitals-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 2;
    min-width: 0;
  }
  .today-vitals-column .attendance-row {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
  }
  .today-vitals-column .vitals-row {
    margin-bottom: 0;
    min-width: 0;
  }

  /* セルフモニタリングカード内：AM/PM、ストレッサー/コーピングをそれぞれ
     2列表示にする。grid-auto-flowの自動配置に頼ると行がずれるリスクがある
     ため（予定/タスクタブで実際に踏んだ問題）、grid-rowも明示的に指定する。
     2026-09-13追加。 */
  .self-monitoring-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .self-monitoring-card > h2.card-title { grid-column: 1 / -1; grid-row: 1; }
  .self-monitoring-card > .period-section.am { grid-column: 1; grid-row: 2; }
  .self-monitoring-card > .period-section.pm { grid-column: 2; grid-row: 2; }
  .self-monitoring-card > #group-stressors { grid-column: 1; grid-row: 3; }
  .self-monitoring-card > #group-copings { grid-column: 2; grid-row: 3; }
  .self-monitoring-card > #memoNoteLabel { grid-column: 1 / -1; grid-row: 4; }
  .self-monitoring-card > #memoNote { grid-column: 1 / -1; grid-row: 5; }

  /* セルフモニタリングカードの高さをできるだけ圧縮する（2026-09-13追加。
     今日タブをスクロールなしで表示したい要望に対応。スマホ版には影響しない）。 */
  .self-monitoring-card .period-section {
    padding: 8px 8px 6px;
    margin-bottom: 8px;
  }
  .self-monitoring-card .period-head {
    margin-bottom: 8px;
  }
  .self-monitoring-card .score-pair-row {
    margin-bottom: 6px;
  }
  .self-monitoring-card .score-row {
    margin-bottom: 4px;
  }
  .self-monitoring-card textarea.note {
    margin-top: 6px;
    min-height: 36px;
    padding: 6px 8px;
  }
  .self-monitoring-card .period-signs {
    margin-top: 4px;
  }
  .self-monitoring-card .tag-group {
    margin-bottom: 8px;
  }

  /* サマリータブの「期間指定」と「グラフの集計単位」を1行にまとめる
     （2026-09-13追加。スマホ版では縦積みのまま、PC版でだけ横並びにする）。 */
  /* サマリータブの4ペイン化：期間指定・集計単位を一番左に縦に並べ、
     右側にグラフ・カード類を配置する（2026-09-13）。 */
  .history-4pane-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .history-left-pane {
    flex-shrink: 0;
    width: 160px;
    position: sticky;
  }
  .history-left-pane .history-period-tabs {
    flex-direction: column;
    border-radius: var(--radius-md);
  }
  .history-left-pane .history-unit-row {
    flex-direction: column;
    align-items: stretch;
    margin-top: 16px;
  }
  .history-left-pane .history-unit-tabs {
    flex-direction: column;
    margin-top: 8px;
    /* ベースCSSのborder-radius:999px（横長ピル用）のままだと、縦積みでは
       カプセル/円のような見た目になってしまうため上書きする（2026-09-14修正）。 */
    border-radius: var(--radius-md);
  }
  .history-left-pane .history-custom-range {
    flex-direction: column;
    align-items: stretch;
  }
  .history-left-pane .history-custom-range-tilde {
    text-align: center;
  }
  .history-right-area {
    flex: 1;
    min-width: 0;
  }

  /* サマリータブの期間選択（7日間〜期間指定）が2行になってしまう問題への対応。
     ボタン自体は1行に並んでいるが、ボタン内のテキストが折り返っていたため、
     PC版では折り返さないようにする（2026-09-13追加）。 */
  .history-period-tab {
    white-space: nowrap;
  }


}

/* ===== 話して記録する（バックログ#30、2026-09-27） ===== */
.daily-message-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-log-sheet { max-height: 92vh; }
.voice-log-text { width: 100%; resize: vertical; margin-top: 4px; }
.voice-log-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.voice-log-actions .voice-log-parse-btn { flex: 1; margin: 0; }
.voice-log-hint { margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

/* ---- ステップ対話型UI（2026-09-27）：話すエリア・オーロラ ---- */
/* 話すエリアの枠。録音中／整理中だけ、外周をオーロラ風のグラデーションが動く（普段は細い枠線） */
.voice-log-voicebox { position: relative; border-radius: 16px; padding: 3px; background: var(--line); overflow: hidden; isolation: isolate; transition: box-shadow 0.6s ease; }
.voice-log-aurora {
  position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%;
  background: conic-gradient(from 0deg, #3F6E5D, #8FCBAE, #CDEBD9, #5FA88A, #2F6F5A, #A8DDC2, #3F6E5D);
  opacity: 0; transition: opacity 0.6s ease; z-index: 0; pointer-events: none;
}
.voice-log-voicebox-inner { position: relative; z-index: 1; background: var(--surface); border-radius: 14px; padding: 10px; }
.voice-log-voicebox .voice-log-text { margin-top: 0; border-color: transparent; background: var(--surface-sunk); }
.voice-log-status { min-height: 0; font-size: 12.5px; font-weight: 700; color: var(--ok); text-align: center; }
.voice-log-status:not(:empty) { min-height: 18px; margin-top: 6px; animation: vlFade 0.5s ease; }
/* 録音中：ゆらゆら波打つ */
.voice-log-voicebox.is-listening { box-shadow: 0 0 18px rgba(95, 168, 138, 0.55); }
.voice-log-voicebox.is-thinking { box-shadow: 0 0 22px rgba(143, 203, 174, 0.7); }
.voice-log-voicebox.is-listening .voice-log-aurora { opacity: 0.85; animation: vlSway 3.4s ease-in-out infinite alternate; }
.voice-log-voicebox.is-listening #voiceLogMic { animation: vlPulse 1.6s ease-out infinite; }
/* 整理中：ゆっくり光りながら回る */
.voice-log-voicebox.is-thinking .voice-log-aurora { opacity: 0.95; animation: vlSpin 5s linear infinite, vlGlow 2.4s ease-in-out infinite alternate; }
@keyframes vlSway { from { transform: rotate(-35deg) scale(0.92); } to { transform: rotate(45deg) scale(1.08); } }
@keyframes vlSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes vlGlow { from { filter: brightness(0.9) saturate(1); } to { filter: brightness(1.25) saturate(1.3); } }
@keyframes vlPulse { 0% { box-shadow: 0 0 0 0 rgba(63, 110, 93, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(63, 110, 93, 0); } }
@keyframes vlFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .voice-log-voicebox.is-listening .voice-log-aurora, .voice-log-voicebox.is-thinking .voice-log-aurora,
  .voice-log-voicebox.is-listening #voiceLogMic { animation: none; }
}
/* 整理中・声の入力中は押せない状態をグレーで示す */
.voice-log-parse-btn:disabled {
  background: var(--surface-sunk); color: var(--ink-faint); border-color: var(--line); cursor: default; box-shadow: none;
}
.voice-log-voice-cancel {
  display: block; margin: 8px auto 0; padding: 7px 22px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-muted); border-radius: 999px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}

/* 読み取った内容をカードへ入れた時のお知らせと、入れた欄の色付け（バックログ#33-34）。
   .voice-filledは、textarea.note（詳細度0,1,1）等の欄自身の背景に負けないよう#view-todayを前に付ける。 */
/* 枠・面は固定オーロラ（.nagi-suggest-aurora、index.htmlで付ける。#33-52） */
.voice-applied-note { border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.voice-applied-title { font-size: 13.5px; font-weight: 800; color: var(--pine-deep); }
.voice-applied-body { font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; margin-top: 4px; }
.voice-applied-heard {
  font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin-top: 4px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.voice-applied-actions { display: flex; gap: 8px; margin-top: 10px; }
.voice-applied-btn {
  flex: 1; min-width: 0; border: 1px solid var(--pine); background: var(--surface); color: var(--pine-deep); border-radius: 10px;
  padding: 9px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
#view-today .voice-filled { background: var(--pine-soft); border-radius: 8px; box-shadow: 0 0 0 4px var(--pine-soft); }

/* ===== 「きょうの調整」カード（バックログ#40-3-9、2026-10-08） =====
   今日タブの記録の下に置く、負荷を減らす入口のカード（中身はday-adjust.js）。選択の部品は
   3択（2択）の切り替え.adjust-segの1種類だけにする（33-15）。 */
.day-adjust-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-adjust-head h2.card-title { margin: 0; }
.day-adjust-badge {
  flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 3px 10px; border-radius: 999px;
  /* 既存の負荷のバッジ（shared.cssの.master-preview-load）と同じ色の組み合わせ */
  background: var(--amber-soft); color: #6B4A15;
}
#dayAdjustBody { padding: 0 10px; }
.day-adjust-lead { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.day-adjust-lead b { font-weight: 700; }
.day-adjust-pt-note { margin: 2px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.day-adjust-ai { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.day-adjust-thinking { margin: 6px 0 0; font-size: 12px; color: var(--ink-muted); }
/* てりーさんの一言だけを動くオーロラにする（#33-54、仕様docs/design-refresh/day-adjust-aurora-spec.md）。
   枠・面・影・動きはshared.cssの.nagi-suggest-aurora.is-flowing（day-adjust.jsで付ける）に任せ、ここには書かない。 */
body[data-view="today"] #dayAdjustCard .day-adjust-ai {
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--pine-deep);
}
.day-adjust-items { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.day-adjust-item { background: var(--surface-sunk); border-radius: var(--radius-md); padding: 12px; }
.day-adjust-item-row { display: flex; align-items: center; gap: 10px; }
.day-adjust-item-main { flex: 1; min-width: 0; }
.day-adjust-item-title { font-size: 14px; line-height: 1.5; color: var(--ink); word-break: break-word; }
.day-adjust-item-meta { font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.day-adjust-meta-part { white-space: nowrap; }
.day-adjust-item-reason { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.day-adjust-item-sub {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink); cursor: pointer;
}
.day-adjust-item-sub input[type="checkbox"] { margin: 2px 0 0; accent-color: var(--pine); flex-shrink: 0; cursor: pointer; }
/* 3択（延期／半分／そのまま）・2択（入れる／入れない）の切り替え。予定名が2行になっても折り返さない。 */
.adjust-seg {
  flex-shrink: 0; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface);
}
.adjust-seg button {
  border: none; background: none; padding: 6px 10px; font: inherit; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; cursor: pointer;
}
.adjust-seg button + button { border-left: 1px solid var(--line); }
.adjust-seg button.is-active { background: var(--pine-soft); color: var(--pine-deep); font-weight: 700; }
.day-adjust-others { margin-top: 12px; }
.day-adjust-others-head { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.day-adjust-others-toggle {
  margin-top: 4px; padding: 4px 0; border: none; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--pine-deep); cursor: pointer;
}
.day-adjust-others .day-adjust-items { margin-top: 6px; }
.day-adjust-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.day-adjust-actions { margin-top: 14px; }
.day-adjust-decisions { margin-top: 14px; font-size: 13px; color: var(--ink); }
.day-adjust-decisions-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.day-adjust-link-btn {
  border: none; background: none; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--pine-deep);
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.day-adjust-decision-list { margin-top: 6px; }
.day-adjust-decision-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.day-adjust-decision-row:last-child { border-bottom: none; }
.day-adjust-decision-title { flex: 1; min-width: 0; font-size: 13px; word-break: break-word; }
.day-adjust-switch {
  /* 横の間隔4px: チップの左右の余白10pxと合わせて、スマホ412で4つのチップが1行に収まるように（#40-3-12、2026-10-09） */
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.day-adjust-switch-label { font-size: 12px; color: var(--ink-muted); }
.day-adjust-chip {
  /* 左右10px: スマホ412で「減らす」「足す」「休む」「明日にそなえる」が1行に収まるように（#40-3-12、2026-10-09） */
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.day-adjust-chip.is-current { border-color: var(--pine); color: var(--pine-deep); font-weight: 700; }

/* 確認の画面（#dayAdjustConfirmOverlay、5-a 案A）。カードの「今日決めたこと」の札にも.adjust-confirm-kindを使う。 */
.adjust-confirm-totals { background: var(--pine-soft); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 14px; }
.adjust-confirm-total-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px 76px; column-gap: 6px; align-items: center;
  padding: 6px 0; font-size: 13px; color: var(--pine-deep);
}
.adjust-confirm-total-row + .adjust-confirm-total-row { border-top: 1px solid rgba(41, 74, 62, .12); }
.adjust-confirm-total-row .before { color: var(--ink-muted); text-align: right; }
.adjust-confirm-arrow { font-weight: 800; text-align: center; }
.adjust-confirm-total-row .after { font-size: 15px; font-weight: 800; text-align: right; }
.adjust-confirm-state { display: block; font-size: 11px; font-weight: 400; }
.adjust-confirm-total-row .after .adjust-confirm-state { font-weight: 700; }
.adjust-confirm-section { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
/* 予定の行の間に線（最後の行の下には引かない）。「そのまま（n件）」の行の上にも引く。 */
.adjust-confirm-item { padding: 10px 0; }
.adjust-confirm-item + .adjust-confirm-item,
.adjust-confirm-item + .adjust-confirm-keep { border-top: 1px solid var(--line); }
.adjust-confirm-item-head { display: flex; align-items: center; gap: 8px; }
.adjust-confirm-kind {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px;
  background: var(--pine-soft); color: var(--pine-deep);
}
.adjust-confirm-kind.is-add { background: var(--surface-sunk); color: var(--ink-muted); }
.adjust-confirm-title { min-width: 0; font-size: 14px; color: var(--ink); word-break: break-word; }
.adjust-confirm-change { margin-top: 4px; font-size: 13px; color: var(--ink); }
.adjust-confirm-change b { font-weight: 700; }
.adjust-confirm-field { font-size: 12px; color: var(--ink-muted); }
.adjust-confirm-before { color: var(--ink-muted); }
.adjust-confirm-sub { margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.adjust-confirm-keep { padding: 10px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); }
.adjust-confirm-foot { margin: 10px 0 0; font-size: 12px; color: var(--ink-muted); }

/* 休みの日（state=off、バックログ#40-3-10、2026-10-08） */
.day-adjust-badge.is-off { background: var(--pm-soft); color: var(--pm); }
/* 次の勤務日のひと目（2列の表。40-3-12の「明日にそなえる」でも使う） */
.day-adjust-glance { margin-top: 12px; }
.day-adjust-glance-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.day-adjust-glance-row:last-child { border-bottom: none; }
.day-adjust-glance-label { font-size: 14px; color: var(--ink); white-space: nowrap; }
.day-adjust-glance-value { font-size: 13px; line-height: 1.6; color: var(--ink-muted); text-align: right; word-break: break-word; }
.day-adjust-glance-value .day-adjust-meta-part { white-space: nowrap; }
/* 約束のある予定は1件1行（長い名前は…で切る） */
.day-adjust-glance-appt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-adjust-glance-empty { margin: 12px 0 0; font-size: 14px; color: var(--ink); }

/* 「期限切れのTodo」カードをたたむ（#overdueTasksCard.is-collapsed、task-detail.js。休みの日。40-3-11の「足す」の日も） */
.overdue-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.overdue-card-head h2.card-title { flex: 1; min-width: 0; }
.overdue-fold-count, .overdue-fold-open-btn { display: none; }
#overdueTasksCard.is-collapsed .overdue-card-head h2.card-title { margin-bottom: 0; }
#overdueTasksCard.is-collapsed .overdue-fold-count { display: inline; margin-left: 8px; color: var(--ink); }
#overdueTasksCard.is-collapsed .overdue-fold-open-btn {
  display: inline-block; flex-shrink: 0; margin-right: 10px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font: inherit; font-size: 13px; color: var(--pine-deep); font-weight: 700; cursor: pointer;
}
#overdueTasksCard.is-collapsed #overdueTaskList { display: none; }
/* 今日タブの期限切れTodoの行（#35-11）: 右列265pxで題名と右端の「期限切れ」ピルが幅を奪い合い4行に折り返していたため、
   チェック＋本文を1行目、ピル（期限切れ／調整済み等）を本文列の2行目へ送る。予定タブの同じ部品（buildScheduleItemRowHtml）は対象外 */
#overdueTasksCard .schedule-item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  align-items: start;
}
#overdueTasksCard .schedule-item-row > .schedule-item-body ~ span,
#overdueTasksCard .schedule-item-row > .schedule-item-body ~ button {
  grid-column: 2;
  justify-self: start;
}

/* 予定が少ない勤務日（state=add、バックログ#40-3-11、2026-10-08）。緑は使わない */
.day-adjust-badge.is-add { background: var(--surface-sunk); color: var(--ink-muted); }
/* チップで自分で選んだ中身（減らす・足す・休む。#43-5の6-D）。アプリの判定ではないので、足す・明日にそなえると同じ控えめな色 */
.day-adjust-badge.is-chosen { background: var(--surface-sunk); color: var(--ink-muted); }
/* 候補の行の右の「今日に入れる」（副ボタン）。予定名が2行になっても折り返さない */
.day-adjust-add-btn {
  flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--pine); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13px; color: var(--pine-deep); white-space: nowrap; cursor: pointer;
}
.day-adjust-add-btn:disabled { opacity: .5; cursor: default; }
/* 「明日以降の分を今日に少し進める」（#48-5の3）。「今日に入れる」の候補の下に、小見出しと同じ形の行を並べる。
   行は.day-adjust-item（同じ部品の見た目）、ボタンは.day-adjust-add-btn（data-pull-idで別の動き） */
.day-adjust-pull { margin-top: 14px; }
.day-adjust-pull-head { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.day-adjust-pull .day-adjust-items { margin-top: 6px; }
.day-adjust-pull-amount { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.day-adjust-pull-amount b { font-weight: 700; color: var(--pine-deep); }

/* 夕方以降（state=evening「明日にそなえる」、バックログ#40-3-12、2026-10-09）。次の勤務日のひと目は休みの日と同じ.day-adjust-glance */
.day-adjust-badge.is-evening { background: var(--surface-sunk); color: var(--ink-muted); }
.day-adjust-evening-label { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink); }
.day-adjust-evening-input { margin-top: 6px; }
.day-adjust-actions > .task-form-submit:disabled { opacity: .5; cursor: default; }

/* 「明日にそなえる」の5勤務日の一覧と「多い日をならす」（バックログ#40-3-13、2026-10-09）。赤は使わない */
/* 列は一覧全体でそろえる（行ごとのautoだと、「多め」の札のある行だけ棒が短くなり、縦の線の位置が行ごとにずれるため）。
   1行ごとの.ahead-dayは、一覧の列をsubgridで受け継ぐ */
.ahead-strip {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 8px;
  margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
}
.ahead-day {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  padding: 8px 10px; font-size: 13px; color: var(--ink-muted);
}
.ahead-day > .ahead-num { text-align: right; }
.ahead-day + .ahead-day { border-top: 1px solid var(--line); }
.ahead-date { font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.ahead-bar { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--surface-sunk); }
.ahead-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--pine); opacity: .4; }
.ahead-day.is-over .ahead-bar-fill { background: var(--amber); opacity: 1; }
/* 縦の線（作業に使える時間、または「やや大変」の境目）。棒の上下に3pxはみ出す */
.ahead-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink-faint); }
.ahead-num { white-space: nowrap; }
.ahead-num b { font-weight: 700; color: var(--ink); }
.ahead-day.is-over .ahead-num b { color: #6B4A15; }
/* 「多め」の札（重い日のバッジと同じ色の組み合わせ） */
.ahead-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5;
  background: var(--amber-soft); color: #6B4A15; vertical-align: 1px;
}
.ahead-legend { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.ahead-appts { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahead-decision-dates { margin-left: 6px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
/* 点線の下の「次の勤務日のはじめにやること」 */
.ahead-evening-todo { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ahead-evening-todo .day-adjust-evening-label { margin-top: 0; }

/* 確認の画面（#aheadPlanOverlay） */
.ahead-totals { margin-top: 6px; }
/* 後の値が「3.5h・44%」と長いので、40-3-9の帯（後の列76px固定）より広くとる */
.ahead-totals .adjust-confirm-total-row { grid-template-columns: minmax(0, 1fr) auto 18px auto; }
.ahead-totals .adjust-confirm-total-row .before,
.ahead-totals .adjust-confirm-total-row .after { white-space: nowrap; }
.ahead-moves { margin-bottom: 14px; }
.ahead-dayhead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.ahead-dayhead-sum { font-size: 12.5px; font-weight: 400; color: var(--ink-muted); white-space: nowrap; }
.ahead-move {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.ahead-move input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--pine); cursor: pointer; }
.ahead-move-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ahead-move-title { font-size: 14px; line-height: 1.5; color: var(--ink); word-break: break-word; }
.ahead-move-change { font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.ahead-move-change b { font-weight: 700; color: var(--ink); }
.ahead-dest-head { margin-top: 4px; }
.ahead-dests { margin-top: 6px; }
.ahead-dest { font-size: 12.5px; line-height: 1.8; color: var(--ink-muted); }
.ahead-dest b { font-weight: 700; color: var(--ink); }
.ahead-reason { margin: 8px 0 0; line-height: 1.6; }
.ahead-empty { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
#aheadPlanOkBtn:disabled { opacity: .5; cursor: default; }

/* ===== PC版「今日」タブのデザイン刷新（バックログ#33-8、2026-10-09） =====
   仕様・基準画像は docs/design-refresh/（README.md・final-reference.png、1680×941）。背景・サイドバー・ヘッダーはshared.css、
   右列の予定カードはschedule.css、てりーさんのシートはnagi.css。色のトークンはtokens.css（今日タブのPC幅だけ青緑系に差し替え）。
   本文: 左列（気分・睡眠・キャパの3枚 → セルフモニタリング → きょうの調整）＋右列（予定・Todo、265px）。
   カードは少し透ける白。編集中・未入力・省エネ・本日終了の既存の切り替え（#view-today.editing/.locked等）はそのまま使う。 */
@media (min-width: 1024px) {
  body[data-view="today"] main { padding: 12px 13px 28px 14px; }
  /* 右列は基準の265px。てりーさんを閉じて本文が広い時は、本文の24%まで広げる（左列が横に間延びしすぎないように） */
  body[data-view="today"] #view-today {
    grid-template-columns: minmax(0, 1fr) minmax(265px, 24%);
    gap: 12px;
  }
  body[data-view="today"] .today-col-left { min-width: 0; }
  /* 右列は画面の縦いっぱい（ヘッダー60px（#33-57）・本文の上下の余白40pxを除く）まで伸ばし、予定カードの「＋追加」を下端に置く */
  body[data-view="today"] .today-col-right {
    min-width: 0;
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
    display: flex;
    flex-direction: column;
  }

  /* --- カード共通: 少し透ける白・角丸12px・青みの影 --- */
  body[data-view="today"] #view-today section.card {
    background: var(--today-card-bg);
    border: 1px solid var(--today-card-line);
    border-radius: var(--today-radius);
    box-shadow: var(--today-card-shadow);
    margin-bottom: 12px;
  }
  body[data-view="today"] #view-today h2.card-title {
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  body[data-view="today"] .today-top-row { margin-bottom: 12px; }
  body[data-view="today"] .today-vitals-column { gap: 8px; }
  body[data-view="today"] .record-streak-badge {
    background: rgba(255, 255, 255, 0.82);
    color: var(--pine-deep);
    box-shadow: 0 3px 10px rgba(52, 115, 132, 0.08);
  }
  body[data-view="today"] .editing-banner { border-radius: var(--today-radius); }

  /* --- 上段の3枚（気分・睡眠・キャパ使用率）: 高さ166px、幅は1.06 : 1 : 0.88 --- */
  body[data-view="today"] .vitals-row {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 0.88fr);
    gap: 11px;
  }
  body[data-view="today"] #view-today .vitals-row > section.card {
    position: relative;
    min-height: 166px;
    margin: 0;
    padding: 14px 13px 12px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.91) 62%, rgba(228, 246, 249, 0.78)),
      url("../assets/today-bg-sea-sunrise.webp") center bottom / 145% auto no-repeat;
  }
  /* キャパの説明の吹き出しがカードの外へ出られるよう、キャパのカードだけは切り抜かない */
  body[data-view="today"] #view-today .vitals-row > section.mood-card,
  body[data-view="today"] #view-today .vitals-row > section.sleep-summary-card { overflow: hidden; }
  /* 左上の飾り（☀・☾・≋）。気分カードは編集中に#moodEditSlotへ移るが、その時は.vitals-rowの外なので出ない */
  body[data-view="today"] .vitals-row > .card::after {
    position: absolute;
    left: 17px;
    top: 12px;
    font-size: 25px;
    line-height: 1;
    pointer-events: none;
  }
  body[data-view="today"] .vitals-row > .mood-card::after { content: "☀"; color: var(--today-sun); }
  body[data-view="today"] .vitals-row > .sleep-summary-card::after { content: "☾"; color: var(--today-moon); font-size: 28px; }
  body[data-view="today"] .vitals-row > .capacity-card::after { content: "≋"; color: var(--today-teal); font-size: 30px; font-weight: 800; top: 8px; }
  /* カードが細い時（てりーさんのドックを開いた1440px前後・1024px）は、飾りが見出しに重なるので出さない */
  body[data-view="today"] .vitals-row > .card { container-type: inline-size; }
  @container (max-width: 215px) {
    body[data-view="today"] .vitals-row > .card::after { display: none; }
  }
  body[data-view="today"] .vitals-row h2.mini-card-title {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  body[data-view="today"] .vitals-row .vitals-graphic-slot { height: 96px; }
  body[data-view="today"] .vitals-row .mood-frame { max-width: 104px; }
  body[data-view="today"] .vitals-row .sleep-circle-wrap { max-width: 88px; }
  body[data-view="today"] .vitals-row .sleep-circle-track { stroke: #E3F0F2; }
  body[data-view="today"] .vitals-row .sleep-circle-hours { font-size: 18px; font-weight: 500; }
  body[data-view="today"] .vitals-row .arc-wrap { max-width: 140px; }
  body[data-view="today"] .vitals-row .arc-track { stroke: #E8ECE6; }
  body[data-view="today"] .vitals-row .arc-readout .pct { font-size: 24px; font-weight: 800; }
  body[data-view="today"] .vitals-row .arc-readout .pct::after { font-size: 11px; }
  body[data-view="today"] .vitals-row .mood-current-label,
  body[data-view="today"] .vitals-row .sleep-summary-range,
  body[data-view="today"] .vitals-row .capacity-status-label { margin-top: 4px; font-size: 11.5px; font-weight: 700; }
  body[data-view="today"] .vitals-row .vitals-unset-placeholder {
    flex: 1;
    min-height: 100px;
    background: rgba(238, 246, 246, 0.72);
    border-radius: 10px;
  }

  /* --- セルフモニタリング: 見出しの左に≋、AM/PMは2列、その下にストレッサー/コーピング --- */
  body[data-view="today"] #view-today .self-monitoring-card {
    padding: 16px 13px 14px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
  }
  body[data-view="today"] .self-monitoring-card > h2.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 2px;
    font-size: 17px;
    font-weight: 800;
  }
  body[data-view="today"] .self-monitoring-card > h2.card-title::before {
    content: "≋";
    font-size: 34px;
    font-weight: 800;
    line-height: 0.6;
    color: var(--today-teal);
  }
  body[data-view="today"] .self-monitoring-card .period-section {
    margin: 0;
    padding: 11px 12px 12px;
    border: 1px solid #E5EDF0;
    border-radius: var(--today-radius);
  }
  body[data-view="today"] .self-monitoring-card .period-section.am {
    background: linear-gradient(145deg, rgba(255, 247, 228, 0.82), rgba(255, 255, 255, 0.95) 38%, rgba(237, 249, 251, 0.72));
  }
  body[data-view="today"] .self-monitoring-card .period-section.pm {
    background: linear-gradient(145deg, rgba(232, 245, 255, 0.84), rgba(255, 255, 255, 0.96) 40%, rgba(233, 248, 250, 0.74));
  }
  body[data-view="today"] .self-monitoring-card .period-head-row { margin-bottom: 12px; }
  body[data-view="today"] .self-monitoring-card .period-head {
    height: 33px;
    padding: 0 13px 0 9px;
    gap: 5px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 8px rgba(52, 115, 132, 0.06);
  }
  body[data-view="today"] .self-monitoring-card .period-head .period-dot { display: none; }
  body[data-view="today"] .self-monitoring-card .period-head::before { font-size: 17px; line-height: 1; }
  body[data-view="today"] .self-monitoring-card .period-section.am .period-head::before { content: "☀"; color: var(--today-sun); }
  body[data-view="today"] .self-monitoring-card .period-section.pm .period-head::before { content: "☾"; color: var(--today-moon); }
  body[data-view="today"] .self-monitoring-card .period-head span { font-size: 15px; font-weight: 800; color: var(--ink); }
  body[data-view="today"] .self-monitoring-card .period-clear-btn {
    height: 29px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #7890A5;
    font-size: 10.5px;
  }
  body[data-view="today"] .self-monitoring-card .score-pair-row { gap: 24px; margin-bottom: 14px; }
  body[data-view="today"] .self-monitoring-card .score-row .score-label { margin-bottom: 6px; }
  body[data-view="today"] .self-monitoring-card .score-row .score-label .val { font-size: 15px; font-weight: 800; }
  /* 点数の棒は6pxの細い線にする（塗りの色は今までどおりtoday.jsが点数で決める）。つまみは棒の中央に合わせる */
  body[data-view="today"] .self-monitoring-card input[type="range"] { height: 16px; }
  body[data-view="today"] .self-monitoring-card input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background:
      radial-gradient(circle 3px at var(--fill) center, var(--fill-color) 100%, transparent 100%) no-repeat,
      linear-gradient(var(--fill-color), var(--fill-color)) left center / var(--fill) 100% no-repeat,
      linear-gradient(#DFE4E1, #DFE4E1) left center / 100% 100% no-repeat;
  }
  body[data-view="today"] .self-monitoring-card input[type="range"]::-webkit-slider-thumb { margin-top: -7px; }
  body[data-view="today"] .self-monitoring-card .period-signs { margin-top: 0; }
  body[data-view="today"] .self-monitoring-card .period-signs-head { margin-bottom: 7px; }
  body[data-view="today"] .self-monitoring-card .period-signs-head .tag-group-label { font-size: 12.5px; font-weight: 800; color: var(--ink); }
  body[data-view="today"] .self-monitoring-card .period-signs-head .sign-period-count { font-size: 11.5px; color: #6E8BA2; }
  body[data-view="today"] .self-monitoring-card .period-signs .chip-row { gap: 5px; }
  /* 体調サイン: 良好は淡い青緑の地（基準画像）。注意（橙）・悪化（赤）は意味を保つため色を残す */
  body[data-view="today"] .self-monitoring-card .period-signs .chip {
    padding: 5px 9px;
    font-size: 11px;
  }
  body[data-view="today"] .self-monitoring-card .period-signs .chip[data-cat="良好"] { background: #E3F3F1; color: #3F7383; }
  body[data-view="today"] .self-monitoring-card .period-signs .chip[data-cat="良好"] .chip-remove { background: rgba(63, 115, 131, 0.14); }
  body[data-view="today"] .self-monitoring-card .period-signs .chip[data-cat="注意"] { background: var(--amber-soft); color: #7A5214; }
  body[data-view="today"] .self-monitoring-card .period-signs .chip[data-cat="注意"] .chip-remove { background: rgba(122, 82, 20, 0.14); }
  body[data-view="today"] .self-monitoring-card .note-label {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ink);
  }
  /* 点数の理由・対策: 高さ101pxを確保（自動で伸びるのはそのまま） */
  body[data-view="today"] .self-monitoring-card textarea.period-note {
    min-height: 101px;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid #DBE7EB;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #3C5B72;
    font-size: 12.5px;
    line-height: 1.65;
  }
  body[data-view="today"] .self-monitoring-card .period-fully-unset { min-height: 120px; }
  /* ストレッサー／コーピング: 小さなパネル */
  body[data-view="today"] .self-monitoring-card > .tag-group {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--today-panel-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.78);
  }
  body[data-view="today"] .self-monitoring-card > #group-copings {
    background: linear-gradient(135deg, rgba(239, 249, 247, 0.94), rgba(255, 255, 255, 0.82));
  }
  body[data-view="today"] .self-monitoring-card .tag-group-head { margin-bottom: 8px; }
  body[data-view="today"] .self-monitoring-card .tag-group-label { font-size: 12.5px; font-weight: 800; color: var(--ink); }
  body[data-view="today"] .self-monitoring-card .tag-group-count { color: #6E8BA2; }
  body[data-view="today"] .self-monitoring-card .rated-list { gap: 5px; margin-bottom: 0; }
  body[data-view="today"] .self-monitoring-card .rated-row {
    min-height: 35px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(244, 248, 247, 0.9);
  }
  body[data-view="today"] .self-monitoring-card .rated-row .rr-name { font-size: 12px; }
  body[data-view="today"] .self-monitoring-card .add-tag-btn { margin-top: 8px; }
  body[data-view="today"] .self-monitoring-card > #memoNoteLabel { margin-top: 2px; }
  body[data-view="today"] .self-monitoring-card > #memoNote {
    margin-top: 0;
    border-color: #DBE7EB;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
  }

  /* --- きょうの調整: ボタンは内容の幅で右に寄せる（親幅いっぱいに伸ばさない） --- */
  body[data-view="today"] #view-today .day-adjust-card { padding: 14px 16px 16px; }
  body[data-view="today"] #view-today .day-adjust-card h2.card-title { padding: 0; font-size: 13px; font-weight: 800; }
  body[data-view="today"] #dayAdjustBody { padding: 0; }
  body[data-view="today"] .day-adjust-lead { margin-top: 8px; font-size: 15px; font-weight: 700; }
  body[data-view="today"] .day-adjust-actions { justify-content: flex-end; flex-wrap: wrap; }
  body[data-view="today"] .day-adjust-actions > .task-form-submit,
  body[data-view="today"] .day-adjust-actions > .task-form-cancel-btn {
    flex: none;
    width: auto;
    min-width: 0;
    padding: 9px 16px;
    border-radius: 6px;
  }
  body[data-view="today"] .day-adjust-actions > .task-form-cancel-btn {
    border: 1px solid #87B7AA;
    background: #EDF7F2;
    color: #2F6358;
  }

  /* 本日終了・連絡のカード（左列の先頭）も同じ半透明の白に揃える（上の共通指定で済む）。省エネの帯の色は変えない */
}

/* ===== スマホ版「今日」タブのデザイン刷新（バックログ#33-8、2026-10-10。仕様: CODEX.md「今日タブのスマホ版デザイン初稿」、
   見本: docs/design-refresh/mobile-today-preview.css） =====
   1023px以下の縦画面の今日タブだけ。PC版から半透明の白いカード・薄い影と角丸・朝夕で色を分けたAM/PMを移す。
   上段3枚の横並び（412×915で127px）とAM/PMの縦積みは保つ（AM/PMを2列にすると入力欄が狭くなるため）。
   青緑のトークンはtokens.css、背景・ヘッダー・下部ナビはshared.css。PC版・アプリ横画面・他のタブは変えない。 */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="today"] .attendance-row {
    margin-bottom: 9px;
  }
  body[data-view="today"] .record-streak-badge {
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--pine-deep);
    box-shadow: 0 3px 10px rgba(52, 115, 132, 0.08);
  }

  body[data-view="today"] #view-today section.card {
    border-color: var(--today-card-line);
    border-radius: var(--today-radius-mobile);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--today-card-shadow);
  }

  /* 上段3枚（気分・睡眠・キャパ）は1行のまま、中身を少し詰めて最初の画面を圧迫しない */
  body[data-view="today"] .vitals-row {
    gap: 7px;
    margin-bottom: 11px;
  }
  body[data-view="today"] #view-today .vitals-row > section.card {
    position: relative;
    margin: 0;
    padding: 9px 5px 8px;
    overflow: hidden;
    background:
      linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86) 60%, rgba(228, 246, 249, 0.74)),
      url("../assets/today-bg-sea-sunrise.webp") center bottom / auto 72% no-repeat;
  }
  body[data-view="today"] .vitals-row h2.mini-card-title {
    margin: 0 0 3px;
    color: var(--ink);
    letter-spacing: 0.01em;
  }
  body[data-view="today"] .vitals-row .vitals-graphic-slot {
    height: 70px;
  }
  body[data-view="today"] .vitals-row .vitals-unset-placeholder {
    min-height: 70px;
    border-radius: 9px;
    background: rgba(237, 246, 246, 0.7);
  }
  body[data-view="today"] .vitals-row .mood-current-label,
  body[data-view="today"] .vitals-row .sleep-summary-range,
  body[data-view="today"] .vitals-row .capacity-status-label {
    margin-top: 3px;
    color: var(--ink);
  }
  body[data-view="today"] .vitals-row .sleep-circle-track {
    stroke: #E3F0F2;
  }
  body[data-view="today"] .vitals-row .arc-track {
    stroke: #E8ECE6;
  }

  /* セルフモニタリング: AM/PMは縦積みのまま、朝／夜のグラデーションと☀/☾だけを当てる */
  body[data-view="today"] #view-today .self-monitoring-card {
    padding: 11px 10px 12px;
  }
  body[data-view="today"] .self-monitoring-card > h2.card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    padding: 3px 2px;
    color: var(--ink);
    font-size: 15px;
    letter-spacing: 0.01em;
  }
  body[data-view="today"] .self-monitoring-card > h2.card-title::before {
    content: "≋";
    color: var(--today-teal);
    font-size: 26px;
    font-weight: 800;
    line-height: 0.7;
  }
  body[data-view="today"] .self-monitoring-card .period-section {
    margin-bottom: 10px;
    padding: 10px 8px;
    border-color: #E3ECEE;
    border-radius: 11px;
  }
  body[data-view="today"] .self-monitoring-card .period-section.am {
    background: linear-gradient(145deg, rgba(255, 247, 228, 0.78), rgba(255, 255, 255, 0.93) 40%, rgba(237, 249, 251, 0.7));
  }
  body[data-view="today"] .self-monitoring-card .period-section.pm {
    background: linear-gradient(145deg, rgba(232, 245, 255, 0.8), rgba(255, 255, 255, 0.94) 42%, rgba(233, 248, 250, 0.72));
  }
  body[data-view="today"] .self-monitoring-card .period-head-row {
    margin-bottom: 9px;
  }
  body[data-view="today"] .self-monitoring-card .period-head {
    min-height: 30px;
    padding: 3px 11px 3px 8px;
    gap: 5px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 8px rgba(52, 115, 132, 0.055);
  }
  body[data-view="today"] .self-monitoring-card .period-head .period-dot {
    display: none;
  }
  body[data-view="today"] .self-monitoring-card .period-head::before {
    font-size: 16px;
    line-height: 1;
  }
  body[data-view="today"] .self-monitoring-card .period-section.am .period-head::before {
    content: "☀";
    color: var(--today-sun);
  }
  body[data-view="today"] .self-monitoring-card .period-section.pm .period-head::before {
    content: "☾";
    color: var(--today-moon);
  }
  body[data-view="today"] .self-monitoring-card .period-fully-unset {
    min-height: 76px;
  }
  body[data-view="today"] .self-monitoring-card textarea.period-note {
    border-color: #DBE7EB;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
  }

  /* きょうの調整・予定/Todoの行 */
  body[data-view="today"] #view-today .day-adjust-card {
    padding: 12px 14px 14px;
  }
  body[data-view="today"] #view-today .day-adjust-card h2.card-title {
    padding: 2px 0;
    color: var(--ink);
  }
  body[data-view="today"] .day-adjust-item,
  body[data-view="today"] .schedule-task-item,
  body[data-view="today"] .task-item {
    background: rgba(237, 246, 244, 0.82);
  }

  /* 「体調を記録」FAB（編集中は保存）とキャンセルFAB: 低くなった下部ナビ（58px）に合わせて下げる */
  body[data-view="today"] .edit-save-fab {
    bottom: calc(70px + env(safe-area-inset-bottom));
    padding: 12px 16px;
    background: linear-gradient(135deg, #2F8A84, #2C736C);
    box-shadow: 0 7px 18px rgba(32, 102, 96, 0.28);
  }
  body[data-view="today"] .edit-cancel-fab {
    bottom: calc(125px + env(safe-area-inset-bottom));
  }
}
/* 「?」の吹き出しを開いている間は、キャパのカードを切り抜かず、後ろに続くカードより手前に出す（#48-2）。
   スマホ版は上の@mediaで上段3枚をoverflow:hiddenにしていて吹き出しが切れていた。また、カードはcontainer-type
   （レイアウト封じ込め）で独立した重なりの単位になるため、吹き出しのz-indexだけでは後続のカードの上に出られない。
   PC・スマホ共通なので@mediaの外に置く（:has()の分だけ上の指定より詳細度が高い） */
body[data-view="today"] #view-today .vitals-row > section.capacity-card:has(.term-help-pop:not([hidden])) {
  overflow: visible;
  z-index: 40;
}
/* 380px以下では説明付きのFABが「きょうの調整」の選択肢を丸ごと覆いやすいので、46pxの鉛筆/保存アイコンだけにする（412・390pxは説明付きのまま） */
@media (max-width: 380px) and (orientation: portrait) {
  body[data-view="today"] .edit-save-fab {
    width: 46px;
    height: 46px;
    justify-content: center;
    padding: 0;
  }
  body[data-view="today"] .edit-save-fab #editSaveFabText {
    display: none;
  }
}

/* ===== 今日タブ「編集中」の画面（バックログ#33-53、2026-10-12。仕様: docs/design-refresh/today-edit-spec.md、
   見本: docs/design-refresh/today-edit-preview.css） =====
   濃い緑の編集帯を青白いツールバーに、編集できるカードを青緑の境界＋淡いリングに、PCと横画面では「気分・睡眠」を
   左右2列（DOMは動かさずGridだけ）に、スマホ縦は保存／キャンセルを横並びに、横画面は画面外へ出ていたFABをやめて
   編集バー内のPC用ボタンを使う。編集・保存・取消・音声入力のロジックとDOMは変えない。
   すべて body[data-view="today"] と #view-today.editing / html.editing に閉じ、他タブ・通常表示には効かせない。
   FABは#view-todayの外にあるので html.editing body[data-view="today"] で指定する。 */
html.editing body[data-view="today"] {
  --edit-accent: #2f8a84;
  --edit-deep: #1f5e62;
  --edit-line: rgba(47, 138, 132, .44);
  --edit-ring: rgba(47, 138, 132, .20);
  --edit-soft: rgba(221, 241, 239, .88);
}

/* 編集中バー: sticky・z-index・勤怠パネルとの前後関係（PCのheader z-index:11）は既存のまま */
body[data-view="today"] #view-today.editing .editing-banner {
  min-height: 50px;
  box-sizing: border-box;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid var(--edit-line);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(229, 247, 246, .96), rgba(239, 248, 251, .96));
  color: var(--edit-deep);
  box-shadow: 0 6px 18px rgba(44, 108, 121, .10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body[data-view="today"] #view-today.editing .editing-banner-dot {
  width: 9px;
  height: 9px;
  background: var(--edit-accent);
  box-shadow: 0 0 0 4px rgba(47, 138, 132, .12);
  animation-duration: 1.8s;
}
body[data-view="today"] #view-today.editing .editing-banner-text {
  color: var(--edit-deep);
  font-size: 12.5px;
  font-weight: 800;
}
body[data-view="today"] #view-today.editing .editing-banner-voicelog-btn {
  min-height: 34px;
  /* 基本の.editing-banner-voicelog-btn { margin-top:0 }は、後方の汎用.chat-open-btn { margin-top:10px }に同じ詳細度で負ける。ここで明記する（#35-9） */
  margin-top: 0;
  padding: 6px 13px;
  border: 1px solid rgba(47, 138, 132, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--edit-deep);
  box-shadow: 0 2px 8px rgba(47, 106, 122, .07);
}
body[data-view="today"] #view-today.editing .today-edit-banner-cancel-btn,
body[data-view="today"] #view-today.editing .today-edit-banner-save-btn {
  min-height: 34px;
  box-sizing: border-box;
  margin-left: 0;
  padding: 6px 14px;
  border-radius: 9px;
  /* 横画面ではPC用の見た目（@media (min-width:1024px)側）が当たらないので、文字の指定もここで持つ */
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
body[data-view="today"] #view-today.editing .today-edit-banner-cancel-btn {
  border: 1px solid rgba(47, 138, 132, .24);
  background: rgba(255, 255, 255, .66);
  color: var(--edit-deep);
}
body[data-view="today"] #view-today.editing .today-edit-banner-save-btn {
  border: 1px solid var(--edit-accent);
  background: linear-gradient(135deg, #2f8a84, #3197a0);
  color: #fff;
  box-shadow: 0 4px 11px rgba(47, 138, 132, .18);
}

/* 編集できるカード: 太い暗色outlineをやめ、境界＋淡いリング＋鉛筆ピルで示す。面は通常表示のまま塗らない */
body[data-view="today"] #view-today.editing .editable-card {
  outline: 0;
  border-color: var(--edit-line) !important;
  box-shadow: 0 0 0 2px var(--edit-ring), var(--today-card-shadow, 0 7px 20px rgba(38, 105, 124, .075)) !important;
}
/* 気分カードは編集中は「気分・睡眠」カードの中身なので、カードとしての境界・リングは付けない（鉛筆も既存どおり出さない） */
body[data-view="today"] #view-today.editing #moodEditSlot .editable-card {
  border-color: transparent !important;
  box-shadow: none !important;
}
body[data-view="today"] #view-today.editing .editable-card::before {
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: var(--edit-soft);
  color: var(--edit-deep);
  box-shadow: 0 3px 10px rgba(40, 104, 117, .12);
  font-size: 12px;
  line-height: 24px;
}
body[data-view="today"] #view-today.editing .task-form-input,
body[data-view="today"] #view-today.editing input[type="time"],
body[data-view="today"] #view-today.editing input[type="number"],
body[data-view="today"] #view-today.editing textarea.note {
  border-color: #d5e6e9;
  background: rgba(238, 246, 246, .88);
}
body[data-view="today"] #view-today.editing .task-form-input:focus,
body[data-view="today"] #view-today.editing input[type="time"]:focus,
body[data-view="today"] #view-today.editing input[type="number"]:focus,
body[data-view="today"] #view-today.editing textarea.note:focus {
  outline: none;
  border-color: rgba(47, 138, 132, .72);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 3px rgba(74, 174, 177, .13);
}

/* 気分・睡眠: PCと横画面では左に気分、右に睡眠入力の2列。#sleepEditPanelはインラインのdisplay:noneを持つので
   編集中だけ!importantでgridにする（非編集中には絶対に当てない） */
@media (min-width: 1024px), (max-width: 1023.98px) and (orientation: landscape) {
  body[data-view="today"] #view-today.editing #sleepEditPanel {
    display: grid !important;
    grid-template-columns: minmax(176px, .72fr) minmax(0, 1.6fr);
    column-gap: 20px;
    row-gap: 7px;
    align-items: start;
    padding: 16px;
  }
  body[data-view="today"] #view-today.editing #sleepEditPanel > h2.card-title {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 36px 6px 0;
  }
  body[data-view="today"] #view-today.editing #moodEditSlot {
    grid-column: 1;
    grid-row: 2 / span 7;
    box-sizing: border-box;
    min-height: 100%;
    padding: 12px;
    border: 1px solid #dcebed;
    border-radius: 11px;
    background: rgba(238, 246, 246, .72);
    display: flex;
    align-items: center;
  }
  body[data-view="today"] #view-today.editing #moodEditSlot .mood-card {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 11px;
    padding: 0;
    margin: 0;
    border-bottom: 0;
  }
  body[data-view="today"] #view-today.editing #moodEditSlot .vitals-graphic-slot,
  body[data-view="today"] #view-today.editing #moodEditSlot .mood-frame {
    width: 58px;
    height: 58px;
  }
  /* 左列が176px前後（PC 1024px・横画面）の時、未入力の「未入力」「入力する」が1文字ずつ折り返さないよう、2行に分ける */
  body[data-view="today"] #view-today.editing #moodEditSlot .vitals-unset-placeholder {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body[data-view="today"] #view-today.editing #moodEditSlot .vitals-unset-placeholder > * {
    white-space: nowrap;
  }
  body[data-view="today"] #view-today.editing .sleep-edit-subtitle,
  body[data-view="today"] #view-today.editing .sleep-unset-note,
  body[data-view="today"] #view-today.editing #sleepEditPanel > .sleep-row,
  body[data-view="today"] #view-today.editing #sleepEditPanel > .sleep-summary,
  body[data-view="today"] #view-today.editing #sleepEditPanel > .sleep-total {
    grid-column: 2;
    margin-top: 0 !important;
  }
  body[data-view="today"] #view-today.editing .sleep-edit-subtitle {
    margin: 0 0 1px;
    color: var(--edit-deep);
    font-size: 12px;
    font-weight: 800;
  }
}

@media (min-width: 1024px) {
  body[data-view="today"] #view-today.editing .editing-banner {
    flex-wrap: nowrap;
  }
  body[data-view="today"] #view-today.editing .editing-banner-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body[data-view="today"] #view-today.editing #sleepEditPanel {
    min-height: 270px;
  }
}

/* スマホ縦: 取消と保存を下部ナビの上に同じ高さで横並び。気分だけ淡い沈み面にまとめ、睡眠入力の幅は狭めない */
@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="today"] #view-today.editing .editing-banner {
    min-height: 52px;
    margin-bottom: 12px;
    padding: 8px 10px;
  }
  body[data-view="today"] #view-today.editing .editing-banner-text {
    flex: 1 1 126px;
    min-width: 0;
    line-height: 1.35;
  }
  body[data-view="today"] #view-today.editing #sleepEditPanel {
    padding: 13px 12px 14px;
  }
  body[data-view="today"] #view-today.editing #moodEditSlot {
    margin-bottom: 11px;
    padding: 10px;
    border: 1px solid #dcebed;
    border-radius: 10px;
    background: rgba(238, 246, 246, .68);
  }
  body[data-view="today"] #view-today.editing #moodEditSlot .mood-card {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  /* 下のメニュー中央のてりーさん（#48-27、バーから約30pxはみ出す丸）と重ならないよう、68px→92pxに上げた */
  html.editing body[data-view="today"] .edit-save-fab,
  html.editing body[data-view="today"] .edit-cancel-fab {
    bottom: calc(92px + env(safe-area-inset-bottom));
    min-width: 96px;
    height: 44px;
    box-sizing: border-box;
    justify-content: center;
    padding: 0 15px;
  }
  html.editing body[data-view="today"] .edit-save-fab {
    right: 12px;
    background: linear-gradient(135deg, #2f8a84, #3197a0);
    box-shadow: 0 7px 18px rgba(32, 102, 96, .25);
  }
  html.editing body[data-view="today"] .edit-cancel-fab {
    right: 116px;
    border-color: rgba(47, 138, 132, .24);
    background: rgba(255, 255, 255, .92);
    color: var(--edit-deep);
    box-shadow: 0 5px 15px rgba(38, 91, 110, .14);
  }
  /* 380px以下で隠していた「保存」の文字も、編集中は出す（2ボタンで約201px、375pxでも収まる） */
  html.editing body[data-view="today"] .edit-save-fab #editSaveFabText {
    display: inline !important;
  }
}

/* アプリ横: 画面右のアプリ領域外に出ていたFABをやめ、短い編集バーの中へPC用のキャンセル・保存を出す（イベントは既存のまま） */
@media (max-width: 1023.98px) and (orientation: landscape) {
  body[data-view="today"] #view-today.editing .editing-banner {
    min-height: 48px;
    flex-wrap: nowrap;
    padding: 7px 9px;
    gap: 6px;
  }
  /* 横画面は「編集中」のラベルだけを出し、補足（— ✎の付いた枠の中を…）は隠す（#35-10。以前は58px枠で文字の途中から切れていた） */
  body[data-view="today"] #view-today.editing .editing-banner-text {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 58px;
    overflow: hidden;
    white-space: nowrap;
  }
  body[data-view="today"] #view-today.editing .editing-banner-hint {
    display: none;
  }
  body[data-view="today"] #view-today.editing .editing-banner-voicelog-btn {
    min-height: 32px;
    margin-left: auto;
    padding: 5px 9px;
    font-size: 11.5px;
  }
  body[data-view="today"] #view-today.editing .today-edit-banner-cancel-btn,
  body[data-view="today"] #view-today.editing .today-edit-banner-save-btn {
    display: inline-flex !important;
    flex-shrink: 0;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  html.editing body[data-view="today"] .edit-save-fab,
  html.editing body[data-view="today"] .edit-cancel-fab {
    display: none !important;
  }
  body[data-view="today"] #view-today.editing #sleepEditPanel {
    min-height: 246px;
    padding: 13px;
    column-gap: 14px;
  }
  body[data-view="today"] #view-today.editing #moodEditSlot {
    padding: 9px;
  }
}

/* 「話して記録する」（#voiceLogOverlay）: 青白＋青緑へ。録音中・整理中の.voice-log-auroraのアニメーションは既存のまま */
body[data-view="today"] #voiceLogOverlay {
  background: rgba(30, 62, 68, .28);
}
body[data-view="today"] .voice-log-sheet {
  max-width: 520px;
  max-height: min(92vh, 720px);
  box-sizing: border-box;
  border: 1px solid #d9e8eb;
  background: rgba(250, 253, 253, .98);
  box-shadow: 0 -12px 40px rgba(35, 91, 110, .16);
}
body[data-view="today"] .voice-log-sheet .sheet-handle { background: #d5e4e7; }
body[data-view="today"] .voice-log-sheet .sheet-title { color: #12385f; }
body[data-view="today"] .voice-log-sheet .gantt-assist-nagi {
  border: 1px solid rgba(126, 190, 188, .24);
  background: linear-gradient(135deg, rgba(221, 241, 239, .92), rgba(233, 247, 248, .94));
  color: #315f70;
}
body[data-view="today"] .voice-log-voicebox { background: #d8e8eb; }
body[data-view="today"] .voice-log-voicebox-inner { background: rgba(255, 255, 255, .96); }
body[data-view="today"] .voice-log-voicebox .voice-log-text {
  border-color: transparent;
  background: #eef6f6;
  color: #12385f;
}
body[data-view="today"] .voice-log-actions .voice-log-parse-btn {
  min-height: 42px;
  border-radius: 9px;
  background: linear-gradient(135deg, #2f8a84, #3197a0);
  box-shadow: 0 5px 13px rgba(47, 138, 132, .17);
}
body[data-view="today"] .voice-log-actions #voiceLogMic {
  min-height: 42px;
  border-color: rgba(47, 138, 132, .44);
  color: #1f5e62;
  background: rgba(255, 255, 255, .86);
}
body[data-view="today"] .voice-log-hint { color: #6f899c; }
/* 読み取り結果のお知らせ（#voiceAppliedNote.nagi-suggest-aurora）は固定オーロラのまま。.is-flowingは付けない */
body[data-view="today"] #view-today.editing .voice-applied-note {
  border-radius: 13px;
  padding: 12px 14px;
  box-shadow: var(--aurora-glow);
}
@media (max-width: 1023.98px) and (orientation: landscape) {
  body[data-view="today"] .voice-log-sheet {
    max-width: 480px;
    max-height: calc(100dvh - 16px);
    padding: 8px 20px 14px;
  }
  body[data-view="today"] .voice-log-sheet .sheet-handle { margin: 2px auto 10px; }
  body[data-view="today"] .voice-log-sheet .gantt-assist-head { margin-bottom: 9px; }
  body[data-view="today"] .voice-log-sheet .gantt-assist-nagi { margin-bottom: 9px; padding: 9px 12px; font-size: 12.5px; line-height: 1.55; }
  body[data-view="today"] .voice-log-voicebox-inner { padding: 8px; }
  body[data-view="today"] .voice-log-hint { font-size: 10.5px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="today"] #view-today.editing .editing-banner-dot { animation: none; }
}

/* ===== 体調の記録: 編集中の区分見出しを固定（バックログ#48-15 案A、2026-10-16、スマホのみ） =====
   編集中は入力欄が縦に長く並び、午前・午後・しんどかったこと・気分転換のどこを編集しているか分からなくなる。
   区分の見出し（.period-head-row / .tag-group-head）を、その区分の中にいる間だけ画面上端（mainのスクロール）に
   固定する。stickyの範囲は親（.period-section / .tag-group）なので、区分を出ると次の見出しに入れ替わる。
   PC（1024px以上）と閲覧時は変えない（閲覧時は内容が短く、ピル型の見出しのまま）。
   同じカードの区分を使うてりーさんの横パネル（.nagi-side-panel）は .self-monitoring-card の外なので対象外。 */
@media (max-width: 1023.98px) {
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-head-row,
  body[data-view="today"] #view-today.editing .self-monitoring-card .tag-group-head {
    position: sticky;
    top: 0;
    z-index: 6;
  }
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-head-row {
    margin: -10px -8px 10px;
    padding: 9px 12px;
    border-bottom: 2px solid;
    border-radius: 11px 11px 0 0;
  }
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-section.am .period-head-row {
    background: #FFF3D6;
    border-bottom-color: rgba(240, 187, 84, 0.55);
    border-bottom-color: color-mix(in srgb, var(--today-sun) 55%, transparent);
  }
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-section.pm .period-head-row {
    background: #E3EEFB;
    border-bottom-color: rgba(103, 185, 227, 0.55);
    border-bottom-color: color-mix(in srgb, var(--today-moon) 55%, transparent);
  }
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-head {
    min-height: 0;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-head span { font-size: 16px; font-weight: 800; color: var(--ink); }
  body[data-view="today"] #view-today.editing .self-monitoring-card .period-clear-btn { background: rgba(255, 255, 255, 0.72); }
  /* スマホでは .tag-group に枠・内側の余白が無い（パネル表示はPCだけ）ので、カードの内側の余白（左右10px）の分だけ
     左右へ広げ、カードの枠の内側に収める（qa指摘、2026-10-16。以前の -11px -12px はカードから約2pxはみ出していた） */
  body[data-view="today"] #view-today.editing .self-monitoring-card > .tag-group > .tag-group-head {
    margin: 0 -10px 10px;
    padding: 9px 12px;
    border-bottom: 2px solid rgba(59, 181, 199, 0.4);
    border-bottom: 2px solid color-mix(in srgb, var(--today-teal) 40%, transparent);
    border-radius: 11px 11px 0 0;
    background: #E4F3F0;
  }
  body[data-view="today"] #view-today.editing .self-monitoring-card > .tag-group .tag-group-label { font-size: 15px; font-weight: 800; color: var(--ink); }
}

/* ===== しんどかったこと・気分転換・対処・体調サインの選択シート（バックログ#48-16 案γ・#48-29、2026-10-16、スマホのみ） =====
   スマホでは「+ 追加」で開く選択パネル（#stressorPanel・#copingPanel・体調サインの#signAMPanel/#signPMPanel）を、画面の下から出るシートにする。
   開いている間だけ today.js がパネルを body 直下へ移し、.tag-picker-sheet を付ける（カードのすりガラスが
   position:fixed の基準になって閉じ込められないように）。シートでは選ぶだけで、大・中・小（効果）は閉じた後にカードで選ぶ。
   重なり: 暗幕38・シート39＝タブバー（15）・FAB（25）・てりーさんの丸より前、ダイアログ（.sheet-overlay 40）・確認（50）・トースト（60）より後ろ。
   つまみ・題名・案内（.g-grab/.g-title/.g-note）はシートの時だけ見せる。PC（1024px以上）はカードの中のパネルのまま。 */
.tag-picker-panel > .g-grab,
.tag-picker-panel > .g-title,
.tag-picker-panel > .g-note { display: none; }
.tag-picker-sheet-backdrop { display: none; }
@keyframes rr-flash-fade {
  0%, 35% { background: rgba(59, 181, 199, 0.26); box-shadow: 0 0 0 2px rgba(59, 181, 199, 0.35); }
  100% { background: rgba(59, 181, 199, 0); box-shadow: 0 0 0 2px rgba(59, 181, 199, 0); }
}
@keyframes chip-flash-fade {
  0%, 35% { box-shadow: 0 0 0 3px rgba(59, 181, 199, 0.55); }
  100% { box-shadow: 0 0 0 3px rgba(59, 181, 199, 0); }
}
@media (max-width: 1023.98px) {
  .tag-picker-sheet-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(20, 40, 50, 0.42);
  }
  html.tag-picker-sheet-open main { overflow-y: hidden; }
  .tag-picker-panel.tag-picker-sheet.open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--sheet-kb, 0px);
    z-index: 39;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: calc(var(--sheet-vh, 100vh) * 0.82);
    margin: 0;
    padding: 6px 16px calc(12px + env(safe-area-inset-bottom));
    border: none;
    border-radius: 20px 20px 0 0;
    background: var(--surface);
    box-shadow: 0 -10px 30px rgba(20, 60, 75, 0.18);
    color: var(--ink);
  }
  .tag-picker-sheet > .g-grab {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 4px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background: var(--line);
  }
  .tag-picker-sheet > .g-title {
    display: block;
    flex-shrink: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
  }
  .tag-picker-sheet > .tag-search {
    flex-shrink: 0;
    min-height: 44px;
    margin-bottom: 6px;
    padding: 10px 12px;
    font-size: 15px; /* 16px未満だとiOSでフォーカス時に拡大されるが、スマホのAndroid版が主なので既存の入力欄（15px）に合わせる */
    border-radius: var(--radius-sm);
  }
  .tag-picker-sheet > .tag-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    margin: 0 -6px;
  }
  .tag-picker-sheet .tag-picker-row {
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 8px;
    font-size: 15px;
    color: var(--ink);
  }
  .tag-picker-sheet .tag-picker-row .box { width: 22px; height: 22px; font-size: 14px; }
  .tag-picker-sheet > .inline-new-master-btn {
    flex-shrink: 0;
    min-height: 44px;
    margin-top: 10px;
    font-size: 14px;
  }
  /* 新規登録のフォーム（気分転換・対処は項目が多い）は、シートの中で独立してスクロールさせる */
  .tag-picker-sheet > .inline-new-master-form {
    flex-shrink: 0;
    max-height: 42vh;
    overflow-y: auto;
  }
  .tag-picker-sheet > .g-note {
    display: block;
    flex-shrink: 0;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
    text-align: center;
  }
  .tag-picker-sheet > .tag-picker-close {
    flex-shrink: 0;
    min-height: 48px;
    margin-top: 8px;
    padding: 0;
    border-radius: 999px;
    background: var(--pine);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
  }
  .tag-picker-sheet > .tag-picker-close:active { background: var(--pine-deep); }
  /* 閉じた時、直前に足した行を光らせる。固定された区分見出し（#48-15、約42px）とFABの下に隠れないよう余白を取る */
  body[data-view="today"] .self-monitoring-card .rated-row,
  body[data-view="today"] .self-monitoring-card .period-signs .chip { scroll-margin: 56px 0 160px; }
  body[data-view="today"] .self-monitoring-card .rated-row.rr-flash { animation: rr-flash-fade 1.1s ease-out; }
  /* 体調サインのチップ（#48-29）は良好・注意・悪化の色の面を持つので、背景は変えず外側の輪だけを光らせる */
  body[data-view="today"] .self-monitoring-card .period-signs .chip.rr-flash { animation: chip-flash-fade 1.1s ease-out; }
}
/* 横向き（高さ500px以下）では82%だと一覧が2行ほどしか見えないので、シートを高くし、つまみを省く（仕様からの調整） */
@media (max-width: 1023.98px) and (max-height: 500px) {
  .tag-picker-panel.tag-picker-sheet.open { max-height: calc(var(--sheet-vh, 100vh) * 0.94); padding-top: 10px; }
  .tag-picker-sheet > .g-grab { display: none; }
  .tag-picker-sheet > .g-title { margin-bottom: 6px; }
  .tag-picker-sheet > .g-note { margin-top: 4px; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  body[data-view="today"] .self-monitoring-card .rated-row.rr-flash,
  body[data-view="today"] .self-monitoring-card .period-signs .chip.rr-flash { animation-duration: 1.1s; animation-timing-function: steps(1, end); }
}