/* ============================================================
   保活のやること分担表

   /todo・/report/06・地図のボトムシートの3か所で使う。
   同じ localStorage（hokatsu_tasks_v3）を読むので、
   どこで直しても同じ内容になる。

   横スクロールする表をやめ、1行＝1タスクの縦並びにしている。
   375pxで「やること」列が2〜3行に折り返し、2人目が画面外に出ていたため。
   ============================================================ */

/* ---- フェーズの色 ----
   「結果が出る前」と「出たあと」で時間が違うので、シート全体の温度を変える。
   新しい色相は足さない。ゴールドはスポンサー枠、ティールは「いっしょに」、
   緑は空きあり、と既に意味が付いていて、足すとどれかとぶつかるため。
   同じ色相のまま、明るさと彩度だけで前後を出す */
.tk-app, #todoSheet { --ph: #E4737F; --ph-strong: #D05E6B; --ph-soft: #FDF1F2; }
/* 「決まったあと」はサイトのインク（あたたかい黒 #3E332C）の系統。
   紫やティールを持ち込むと浮くうえ、ティールは「いっしょに」で使っている。
   地の紙色に元からある色なので、何ともぶつからない */
.tk-app.tk-ph-after, #todoSheet.tk-ph-after { --ph: #7A6455; --ph-strong: #5C4A3D; --ph-soft: #F3EDE5; }

/* index.html 側の .ward-popup-head が同じ詳細度であとに来るので、ID を足して勝たせる */
#todoSheet .todo-head {
    background: linear-gradient(135deg, var(--ph), var(--ph-strong));
    transition: background .25s;
}

/* 横スワイプは自前で見るので、ブラウザには縦だけ任せる */
.tk-app { margin: 22px 0 8px; touch-action: pan-y; }
#tkList { will-change: transform; }

/* ---- 隣を覗かせる ----
   次のフェーズのカードの端が数px見えていれば、「まだ先がある」ことは
   文字で説明しなくても伝わる。シートの外にはみ出させて、
   .map-modal-card の overflow:hidden で切ってもらう。
   記事の中（report/06）には囲いが無く、ただの棒に見えるので出さない */
.tk-stage { position: relative; }
/* シートの外へはみ出させると、スクロール領域が10px広がってしまう。
   本体の内側パディング（16px）ぶんだけ右に出し、幅も見える分だけにして、
   はみ出しをゼロにする */
.tk-peek {
    position: absolute; top: 0; bottom: 0; width: 10px;
    display: none; pointer-events: none;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(62, 51, 44, 0.10);
}
.tk-peek-r { right: -16px; border-radius: 10px 0 0 10px; border-right: none; }
.tk-peek-l { left: -16px;  border-radius: 0 10px 10px 0; border-left: none; }
#todoSheet .tk-peek.is-on { display: block; }

/* ---- フェーズの切替 ----
   入園が決まる前と後で、やることの顔ぶれがまるごと変わる。
   47行を一度に出すとスマホでは読めないので、片方だけ出す */
/* 塗りが入れ替わるのではなく、1本のトラックの上をピルが滑る。
   「横に動くもの」だという意味が、形そのものから出るようにする */
.tk-phase {
    position: relative; display: flex; margin: 0 0 14px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 14px; padding: 4px;
}
.tk-phase-pill {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px); border-radius: 11px; pointer-events: none;
    background: linear-gradient(135deg, var(--ph), var(--ph-strong));
    transition: transform .24s cubic-bezier(.2,.8,.3,1);
}
.tk-phase button {
    position: relative; z-index: 1; flex: 1;
    font-family: inherit; font-weight: 800; font-size: .86rem;
    padding: 10px 8px; border: none; background: none;
    color: var(--ink-soft); cursor: pointer; line-height: 1.4;
    transition: color .2s;
}
.tk-phase button small { display: block; font-size: .72rem; font-weight: 700; opacity: .8; margin-top: 2px; }
.tk-phase button.is-on { color: #fff; }

/* ---- 集計 ----
   この道具のいちばんの中身。行ごとの細かい数字より先に、
   「どっちが中心になっているか」と「まだ話していないことが何件あるか」を出す。
   画像に書き出したときも、ここが主役になる */
.tk-summary {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 16px; padding: 16px 18px; margin: 0 0 14px;
}
.tk-sum-head { font-size: .92rem; font-weight: 800; color: var(--ink); line-height: 1.5; }
.tk-sum-head b { font-size: 1.5rem; color: #B27E1F; font-variant-numeric: tabular-nums; margin: 0 2px; }
.tk-sum-head.is-done { color: var(--ok, #2E9E6B); }
.tk-sum-head small {
    display: block; font-size: .76rem; font-weight: 700;
    color: var(--ink-faint); margin-top: 3px;
}
.tk-bar {
    display: flex; height: 12px; border-radius: 999px; overflow: hidden;
    margin: 12px 0 10px; background: var(--bg);
}
.tk-seg { display: block; min-width: 3px; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--ink-soft); }
.tk-leg { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.tk-leg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* 「いっしょに」はティール、担当者はコーラルから順に、未決はグレー。
   ゴールドはスポンサー枠の色なので使わない */
.tk-seg-tg { background: #2F7E8C; }
.tk-seg-p0 { background: #E4737F; }
.tk-seg-p1 { background: #E8A93C; }
.tk-seg-p2 { background: #7C6FD0; }
.tk-seg-p3 { background: #4FA07A; }
.tk-seg-p4 { background: #C4708F; }
.tk-seg-un { background: #D8CEC4; }

/* ---- 担当する人 ---- */
.tk-people {
    padding: 16px 18px; background: var(--surface, #fff);
    border: 1px solid var(--border); border-radius: 16px; margin-bottom: 14px;
}
.tk-plabel { font-size: .82rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 10px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tk-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #FDF1F2; border: 1px solid #F3DADC; color: var(--ink);
    border-radius: 999px; padding: 3px 4px 3px 14px; font-size: .86rem; font-weight: 700;
}
/* 押すと担当者が消える。17×20pxしかなく、隣を押したつもりで消す事故が起きうるので、
   丸ごと36pxの円にした */
.tk-chip button {
    flex: none; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--ink-faint); font-size: 1.15rem;
    line-height: 1; cursor: pointer; border-radius: 50%; padding: 0;
}
.tk-chip button:hover { color: var(--primary-strong); background: #fff; }
/* 名前は用意した候補から選ぶだけにしている。自由入力にしても
   「夫」「妻」「祖母」あたりで足りるので、入力欄のぶん画面が長くなるだけだった */
.tk-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-quick button {
    font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-soft);
    background: var(--bg); border: 1px dashed var(--border); border-radius: 999px;
    padding: 9px 14px; cursor: pointer;   /* 指で押せる高さにする */
}
.tk-quick button:hover { border-color: var(--primary); color: var(--primary); }

/* ---- やることの一覧 ---- */
.tk-cat {
    font-size: .84rem; font-weight: 800; color: var(--ph-strong);
    background: var(--ph-soft); border-radius: 10px; padding: 8px 14px;
    margin: 18px 0 8px;
    transition: color .25s, background .25s;
}
.tk-cat:first-child { margin-top: 0; }
.tk-row {
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
}
/* まだ話していない行は、左端に印を出して残りが見えるようにする */
.tk-row.is-undecided { border-left: 4px solid #E0D3C6; }
.tk-task b { display: block; font-weight: 700; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.tk-task span { display: block; font-size: .76rem; color: var(--ink-faint); line-height: 1.6; margin-top: 2px; }

/* 1行につき1タップで決める。「いっしょに」を先頭に置いているのは、
   選択肢の並び順そのものがこの道具の言いたいことだから。
   %の細かい配分は入れない。1行に1タップ以上かけさせると、47行は埋まらない */
.tk-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tk-pick {
    font-family: inherit; font-size: .82rem; font-weight: 700;
    padding: 11px 16px; border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--bg); color: var(--ink-soft); cursor: pointer;
}
.tk-pick:hover { border-color: var(--primary); color: var(--primary); }
.tk-pick.is-on { background: var(--ph); border-color: var(--ph); color: #fff; }
.tk-pick-tg.is-on { background: #2F7E8C; border-color: #2F7E8C; }
.tk-empty { padding: 26px 16px; text-align: center; color: var(--ink-faint); font-size: .88rem; }

/* ---- 書き出し ---- */
.tk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tk-btn {
    font-family: inherit; font-weight: 800; font-size: .86rem; padding: 11px 18px;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface, #fff); color: var(--ink); cursor: pointer;
}
.tk-btn:hover { border-color: var(--primary); color: var(--primary); }
.tk-btn-main { background: var(--primary); border-color: var(--primary); color: #fff; }
.tk-btn-main:hover { background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; }
.tk-btn-ghost { color: var(--ink-faint); }
/* 知らせは .saved-flash（画面上部の緑の帯）に一本化した。
   この行は読み上げ用に残すが、目には見せない */
.tk-msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .tk-actions .tk-btn { flex: 1 1 44%; text-align: center; }
}