/* ============================================================================
 * views/task.css
 * COLAVIA v1.006.0000
 *
 *   タスクの一覧と詳細（§5.6 / §5.6-2 / §5.6-3 / §5.6-4）。
 *
 *   ＜行のかたち＞
 *   タスクは1件あたりの情報が多い（内容・進捗・優先度・区分・期間・
 *   プロジェクト・担当・メモ）。カードで並べると縦に伸びて一覧性が落ちるため、
 *   横長の行にして、狭い画面でだけ折り返す。
 *
 *   ＜期限超過は左の帯で示す＞
 *   文字色だけで示すと、ダークとライトで見え方が変わる。
 *   行の左端の帯（優先度の色）を赤に差し替えて、地の色に依らず目立たせる。
 *
 *   ＜まとめて変更のバーは画面下に貼り付ける＞
 *   選んでから下までスクロールし直す必要がないようにする。
 *
 *   サイズの指定は px より rem / vh / vw を優先する（§2.2）。
 *   :has() は使わない（§2.2）。
 * ========================================================================== */

/* ==========================================================================
   表示形式の切り替え（リスト／カンバン／ガント／カレンダー）
   ========================================================================== */

/* 絞り込みと同じ枠の中に、独立した段として置く。
   枠の外に出すと、枠からはみ出したように見える */

.view-switch { flex: 0 0 auto; }

/* 狭い画面ではアイコンだけにする。
   4つ分の文字を並べると入りきらず、「カレンダ／ー」のように
   1つの押しどころの中で文字が折り返してしまう */

@media (max-width: 34rem) {

  .view-switch .segmented__item {
    gap: 0;
    padding: 0 var(--sp-3);
    font-size: 0;               /* 文字だけ消す。読み上げには残る */
  }

  .view-switch .segmented__item i { font-size: var(--fs-base); }
}


/* ==========================================================================
   一覧
   ========================================================================== */

.tlist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* --- 1件の行 --- */

.trow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);

  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-left: 0.25rem solid var(--tone, var(--c-gray));
  border-radius: var(--r-md);

  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.trow:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--c-accent-soft);
}

/* 期限を過ぎたもの。

   ＜左の帯を赤にしない＞
   左の帯は優先度の色。優先度「緊急」も赤のため、
   超過でも赤に差し替えると、緊急と超過が見分けられなくなる。
   地をうっすら赤く敷いて、帯とは別の手がかりにする
   （文字の「超過」バッジと合わせて2つの手がかりになる） */

.trow.is-overdue {
  background-color: var(--c-surface);
  background-image: linear-gradient(to right,
    var(--c-red-wash), rgba(0, 0, 0, 0) 24rem);
}

/* 完了したもの。薄くして、進行中のものと見分けられるようにする。
   ただし読めなくならない程度に留める */

.trow.is-done { opacity: 0.62; }
.trow.is-done .trow__title { text-decoration: line-through; }

/* 完了していれば、期限を過ぎていても赤くしない。
   終わった仕事を赤で急かしても意味がないため */

.trow.is-done.is-overdue { background-image: none; }

/* 選択中。まとめて変更の対象であることを地の色で示す。
   超過の地より後に書いて、選んでいることを優先して見せる */

.trow.is-picked {
  background-color: var(--c-accent-soft);
  background-image: none;
  border-color: var(--c-accent);
}

/* --- 選択のチェック --- */

.trow__pick {
  display: flex;
  align-items: center;
  padding-top: 0.15rem;
  cursor: pointer;
}

.trow__pick input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.trow__pick input:disabled { cursor: not-allowed; opacity: 0.4; }

/* --- 中身 --- */

.trow__main {
  flex: 1 1 auto;
  min-width: 0;                 /* 長い内容で行が広がらないようにする */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.trow__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.trow__title {
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  word-break: break-word;
}

.trow__title:hover { color: var(--c-accent); text-decoration: underline; }

.trow__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

.trow__project {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-text-secondary);
  text-decoration: none;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trow__project:hover { color: var(--c-accent); text-decoration: underline; }

/* 直近のメモ。1行だけ添える。
   全文は詳細で読む。ここでは「メモがある」と分かれば足りる */

.trow__memo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 右側（担当と件数） --- */

.trow__side {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding-top: 0.1rem;
}

.tlist__counts {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

.tlist__none {
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

/* --- 期間 --- */

.tperiod {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.tperiod--none { color: var(--c-text-tertiary); }

.tperiod.is-overdue { color: var(--c-red); font-weight: 600; }

.tperiod__over {
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-xs);
  background: var(--c-red);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ==========================================================================
   まとめて変更のバー（§5.6）
   ========================================================================== */

.bulkbar {
  position: sticky;
  bottom: var(--sp-3);
  z-index: 20;

  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;

  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popup);
}

.bulkbar[hidden] { display: none; }

.bulkbar__count {
  font-weight: 600;
  color: var(--c-accent);
  white-space: nowrap;
}

/* ==========================================================================
   詳細（§5.6 / §5.6-4）

   枠組みはプロジェクト詳細と同じ .detail-grid / .detail-col / .sec を使う。
   画面ごとに別の骨組みを作ると、片方だけ直す事故が起きるため。
   ここではタスク固有の中身だけを足す。
   ========================================================================== */

/* --- 項目の並び（右側の付帯情報） --- */

.tfacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tfact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tfact__label {
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

.tfact__value {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

/* --- 担当の一覧 --- */

.tassignee {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}

.tassignee__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); }

/* 主担当の印。一覧の代表表示に使われるため、誰が主かを明示する */

.tassignee__primary {
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-xs);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ==========================================================================
   メモ（§5.6）
   ========================================================================== */

.tmemo {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-hairline);
}

.tmemo:last-child { border-bottom: 0; }

.tmemo__body { flex: 1 1 auto; min-width: 0; }

.tmemo__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

.tmemo__name { font-weight: 600; font-size: var(--fs-sm); }

.tmemo__time {
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-xs);
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
}

.tmemo__at { font-size: var(--fs-xs); color: var(--c-text-tertiary); }

.tmemo__tools { margin-left: auto; display: flex; gap: var(--sp-2); }

/* メモの本文。改行はそのまま活かすが、HTML としては解釈しない */

.tmemo__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.tmemo__files {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* ==========================================================================
   依存関係（§5.6-4）
   ========================================================================== */

.tdep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-hairline);
}

.tdep:last-child { border-bottom: 0; }

.tdep__body { flex: 1 1 auto; min-width: 0; }

.tdep__title {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  word-break: break-word;
}

.tdep__title:hover { color: var(--c-accent); text-decoration: underline; }

.tdep__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

/* 依存の種類（FS / SS / FF / SF）。略号だけでは伝わらないので
   title 属性に説明を入れ、画面では短く見せる */

.tdep__type {
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-xs);
  background: var(--c-surface-sunken);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   狭い画面
   ========================================================================== */

@media (max-width: 60rem) {

  /* .detail-grid 側で1列に落ちる */
}

@media (max-width: 48rem) {

  .trow {
    flex-wrap: wrap;
    padding: var(--sp-3);
  }

  /* 担当と件数は行の下へ回して、内容の幅を確保する */
  .trow__side {
    width: 100%;
    padding-left: 1.8rem;       /* チェックの分だけ本文と揃える */
    justify-content: space-between;
  }

  .trow__project { max-width: 100%; }

  /* まとめて変更のバーは画面の幅いっぱいに */
  .bulkbar { bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
  .bulkbar .select { flex: 1 1 8rem; }
}


/* ==========================================================================
   カンバン（§5.6）
   ========================================================================== */

/* 列は横に並べ、入りきらなければ横スクロールさせる。
   折り返すと「列」に見えなくなる */

.kboard {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.kcol {
  flex: 0 0 17rem;
  display: flex;
  flex-direction: column;
  min-height: 8rem;
  max-height: 70vh;

  background: var(--c-surface-sunken);
  border: 1px solid var(--c-hairline);
  border-top: 0.1875rem solid var(--tone, var(--c-gray));
  border-radius: var(--r-md);
}

/* 落とせる列であることを、掴んでいる間だけ示す */

.kcol.is-over {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.kcol__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
}

.kcol__name { font-weight: 700; font-size: var(--fs-sm); }

.kcol__count {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-full);
  background: var(--c-fill);
  color: var(--c-text-secondary);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

.kcol__off {
  padding: 0.05rem 0.35rem;
  border-radius: var(--r-xs);
  background: var(--c-fill);
  color: var(--c-text-tertiary);
  font-size: var(--fs-xs);
}

.kcol__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kcol__empty {
  margin: 0;
  padding: var(--sp-4) var(--sp-3);
  color: var(--c-text-tertiary);
  font-size: var(--fs-xs);
  text-align: center;
  line-height: 1.6;
}

/* --- カード --- */

.kcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);

  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-left: 0.1875rem solid var(--tone, var(--c-gray));
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}

.kcard[draggable="true"] { cursor: grab; }
.kcard.is-dragging { opacity: 0.4; cursor: grabbing; }

/* 期限超過は地を薄く赤くする。左の帯は優先度の色のまま
   （帯を赤にすると優先度「緊急」と見分けられない） */

.kcard.is-overdue {
  background-color: var(--c-surface);
  background-image: linear-gradient(to right, var(--c-red-wash), rgba(0, 0, 0, 0) 12rem);
}

.kcard.is-done { opacity: 0.6; }
.kcard.is-done .kcard__title { text-decoration: line-through; }
.kcard.is-done.is-overdue { background-image: none; }

.kcard__top { display: flex; align-items: flex-start; gap: var(--sp-2); }

.kcard__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  word-break: break-word;
}

.kcard__title:hover { color: var(--c-accent); text-decoration: underline; }

.kcard__lock { color: var(--c-text-tertiary); font-size: var(--fs-xs); }

.kcard__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

.kcard__project {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kcard__project:hover { color: var(--c-accent); text-decoration: underline; }

.kcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}


/* ==========================================================================
   ガント（§5.6 / §5.6-2）
   ========================================================================== */

/* 左のタスク名は固定、右の図だけを横スクロールさせる。
   両方まとめてスクロールすると、どの行を見ているのか分からなくなる */

.gantt {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.g-side {
  flex: 0 0 var(--gantt-side-w);
  border-right: 1px solid var(--c-hairline);
  background: var(--c-surface);
}

/* 目盛りは月の帯と日の2段。左の見出しも同じ高さにそろえる */

/* 左右の見出しは同じ高さにする。
   1px でもずれると、行が下へ行くほど左の名前とバーが合わなくなる。
   box-sizing: border-box なので、下の罫もこの高さに含まれる */

.g-side__head {
  height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-tertiary);
}

.g-side__row {
  height: var(--gantt-row-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--c-separator);
}

.g-side__bar {
  flex: 0 0 auto;
  width: 0.1875rem;
  height: 1rem;
  border-radius: var(--r-full);
  background: var(--tone, var(--c-gray));
}

.g-side__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g-side__name:hover { color: var(--c-accent); text-decoration: underline; }

.g-scroll { flex: 1 1 auto; overflow-x: auto; }

/* --- 目盛り --- */

.g-head { height: 2.75rem; border-bottom: 1px solid var(--c-hairline); }

.g-months { display: flex; height: 1.25rem; }

.g-month {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: var(--sp-2);
  border-right: 1px solid var(--c-hairline);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-secondary);
  overflow: hidden;
  white-space: nowrap;
}

.g-days { display: flex; height: calc(2.75rem - 1.25rem - 1px); }

.g-day {
  flex: 0 0 var(--gantt-day-w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--c-text-tertiary);
}

.g-day.is-sat { color: var(--c-blue); }
.g-day.is-sun, .g-day.is-hol { color: var(--c-red); }

/* --- 図の面 --- */

.g-plane { position: relative; }

.g-grid { display: flex; position: absolute; inset: 0; }

.g-cell {
  flex: 0 0 var(--gantt-day-w);
  border-right: 1px solid var(--c-separator);
}

.g-cell.is-sat { background: var(--c-sat); }
.g-cell.is-sun { background: var(--c-sun); }
.g-cell.is-hol { background: var(--c-hol); }

/* 今日の線。図の中で現在地が分かるようにする */

.g-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.125rem;
  margin-left: -0.0625rem;
  background: var(--c-red);
  opacity: 0.7;
  pointer-events: none;
}

/* --- バー --- */

.g-bar {
  position: absolute;
  height: calc(var(--gantt-row-h) - 0.75rem);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-2);

  background: var(--tone, var(--c-gray));
  border-radius: var(--r-xs);
  color: #fff;
  font-size: var(--fs-xs);
  cursor: grab;
  overflow: visible;
}

.g-bar.is-locked { cursor: default; opacity: 0.75; }
.g-bar.is-moving { cursor: grabbing; opacity: 0.8; box-shadow: var(--shadow-drag); }
.g-bar.is-done   { opacity: 0.45; }

/* 期限超過は縁取りで示す。バーの色は優先度なので変えない */

.g-bar.is-overdue { box-shadow: 0 0 0 0.125rem var(--c-red); }

/* 依存の線を引くときの落とし先 */

.g-bar.is-link-target { box-shadow: 0 0 0 0.1875rem var(--c-accent); }

.g-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* 右端のハンドル。ここから後続タスクへドラッグする（§5.6-4）。
   バー本体より前面に出し、掴んだら伝播を止める（JS 側） */

.g-bar__link {
  position: absolute;
  right: -0.4rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 0.125rem solid var(--tone, var(--c-gray));
  opacity: 0;
  cursor: crosshair;
  transition: opacity var(--dur-fast) var(--ease);
}

.g-bar:hover .g-bar__link { opacity: 1; }

/* --- 依存の矢印 --- */

.g-arrows, .g-linking {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.g-arrows path {
  fill: none;
  stroke: var(--c-text-tertiary);
  stroke-width: 1.5;
}

.g-arrows marker path { fill: var(--c-text-tertiary); stroke: none; }

.g-linking path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

/* ==========================================================================
   期間未設定の欄（ガント・カレンダー共通。§5.6）
   ========================================================================== */

.g-unset {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}

.g-unset__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.g-unset__list {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.g-unset__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 20rem;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-hairline);
  border-left: 0.1875rem solid var(--tone, var(--c-gray));
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-text);
}

.g-unset__item:hover { border-color: var(--c-accent); }

.g-unset__name {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================================================
   カレンダー（§5.6 / §5.8-1）
   ========================================================================== */

.cal {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.cal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
}

.cal-bar__month {
  min-width: 7rem;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--c-hairline);
}

.cal-wd {
  padding: var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-secondary);
}

.cal-wd.is-sat { color: var(--c-blue); }
.cal-wd.is-sun { color: var(--c-red); }

/* 6週分を必ず出す。月によって高さが変わると落ち着かない */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(6.5rem, auto);
}

.cal-cell {
  min-width: 0;
  padding: var(--sp-2);
  border-right: 1px solid var(--c-separator);
  border-bottom: 1px solid var(--c-separator);
}

.cal-cell:nth-child(7n) { border-right: 0; }

.cal-cell.is-sat { background: var(--c-sat); }
.cal-cell.is-sun { background: var(--c-sun); }
.cal-cell.is-hol { background: var(--c-hol); }

/* 前後の月の日。薄くして、今の月との境が分かるようにする */

.cal-cell.is-other { opacity: 0.45; }

.cal-cell.is-today { box-shadow: inset 0 0 0 0.125rem var(--c-accent); }

.cal-cell__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.cal-cell__num { font-size: var(--fs-sm); font-weight: 700; }

.cal-cell.is-today .cal-cell__num { color: var(--c-accent); }

.cal-cell__hol {
  font-size: var(--fs-xs);
  color: var(--c-red);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-cell__body { display: flex; flex-direction: column; gap: 0.15rem; }

/* --- 予定 --- */

.cal-ev {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--r-xs);
  border-left: 0.1875rem solid var(--tone, var(--c-gray));
  background: var(--c-fill);
  color: var(--c-text);
  font-size: var(--fs-xs);
  text-decoration: none;
  overflow: hidden;
}

.cal-ev:hover { background: var(--c-fill-hover); }

/* 途中の日（開始日ではない）は薄くする。
   どこから始まったのかが分かるようにするため */

.cal-ev.is-cont { opacity: 0.7; }

.cal-ev.is-done { opacity: 0.5; text-decoration: line-through; }

.cal-ev.is-overdue { background: var(--c-red-wash); }

.cal-ev__time { font-weight: 700; color: var(--c-text-secondary); white-space: nowrap; }

.cal-ev__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-more {
  padding: 0.1rem 0.35rem;
  border-radius: var(--r-xs);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  text-align: left;
}

.cal-more:hover { background: var(--c-fill); }

/* 「他 n 件」を開いたときの一覧 */

.cal-day { display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-day .cal-ev { padding: var(--sp-2); font-size: var(--fs-sm); }

/* ==========================================================================
   狭い画面（カンバン・ガント・カレンダー）
   ========================================================================== */

@media (max-width: 48rem) {

  /* カンバンは列を少し細くする。横スクロールはそのまま */
  .kcol { flex: 0 0 14rem; max-height: none; }

  /* ガントの左列を詰める */
  .g-side { flex: 0 0 9rem; }
  .g-side__name { font-size: var(--fs-xs); }
  .g-side__row .pill { display: none; }

  /* カレンダーは枡が小さくなるため、予定は時刻と色だけにする。
     文字を詰め込むより、何かがある日が分かることを優先する */
  .cal-grid { grid-auto-rows: minmax(4.5rem, auto); }
  .cal-cell { padding: 0.2rem; }
  .cal-cell__hol { display: none; }
  .cal-ev { padding: 0.1rem 0.2rem; }
  .cal-ev__name { font-size: 0.625rem; }
}


/* ==========================================================================
   メモに添付するファイル（§5.6）
   ========================================================================== */

/* 送る前の控え。ここに並んでいるものを、メモを作った直後に送る */

.memo-files {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

.memo-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 16rem;
  padding: 0.2rem var(--sp-2);
  background: var(--c-fill);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
}

.memo-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-file__size { color: var(--c-text-secondary); white-space: nowrap; }

.memo-file__x {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--r-full);
  color: var(--c-text-secondary);
}

.memo-file__x:hover { background: var(--c-fill-hover); color: var(--c-text); }