/* Dev Board — design/DESIGN.md の値をそのまま使う。色はここの変数以外を足さない */
:root {
  /* L: 藍鉄（design/DESIGN.md 12章）。黒をやめて藍鉄の地・細い線・Geist・角丸12
     M: 読みやすさ（14章）。薄文字・注釈・線を明るく、字を一回り大きく */
  --bg: #171c2a;
  --card: #1e2536;
  --line: #3d4866;
  --dim: #283149;
  --txt: #eceef5;
  --sub: #b4bbcf;
  --mute: #9aa3bb;
  --note: #838da8;
  --mid: #4d5670;
  --accent: #7c9cff;
  --good: #34d399;
  --warn: #f5a524;
  --bad: #ff6b6b;
  --r: 12px;
  --rs: 8px;
  --sans: 'Geist', -apple-system, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --mono: 'Geist Mono', 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--txt); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); }

/* 展示版の帯: 閉じられず、いつも上に出る（DESIGN.md の地色・線・注意色だけを使う） */
.demo-banner { position: sticky; top: 0; z-index: 20; padding: calc(7px + env(safe-area-inset-top)) 16px 7px; background: var(--dim); color: var(--txt); border-bottom: 1px solid var(--warn); font-size: 12.5px; font-weight: 500; line-height: 1.5; text-align: center; }
.demo-note { color: var(--txt); font-weight: 600; }
.demo-ok { grid-column: 1 / -1; }

.app { max-width: 560px; margin: 0 auto; padding: 22px 16px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }

/* ヘッダー */
.top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.runcat { position: relative; width: 28px; height: 24px; }
.runcat img { position: absolute; inset: 0; width: 28px; height: 24px; object-fit: contain; opacity: 0; animation: rc var(--speed, 0.7s) steps(1) infinite; }
.runcat img:nth-child(1) { animation-delay: 0s; }
.runcat img:nth-child(2) { animation-delay: calc(var(--speed, 0.7s) * 0.2); }
.runcat img:nth-child(3) { animation-delay: calc(var(--speed, 0.7s) * 0.4); }
.runcat img:nth-child(4) { animation-delay: calc(var(--speed, 0.7s) * 0.6); }
.runcat img:nth-child(5) { animation-delay: calc(var(--speed, 0.7s) * 0.8); }
@keyframes rc { 0%, 19.99% { opacity: 1; } 20%, 100% { opacity: 0; } }
.synced { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); min-height: 44px; padding: 0 2px; }
.synced .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--good); }
.synced.is-loading .dot { background: var(--mute); }
.synced.is-error .dot { background: var(--bad); }

/* 数字タイル */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tile { background: var(--card); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile .label { font-size: 12px; font-weight: 600; color: var(--sub); white-space: nowrap; }
.tile .num { font-size: 26px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.tile .sub { font-size: 12px; color: var(--mute); }
.seg { display: flex; gap: 2px; margin-top: 2px; }
.seg span { flex: 1; height: 3px; border-radius: 1px; background: var(--dim); }
.seg span.on { background: var(--accent); }
.spark { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.spark span { flex: 1; min-height: 3px; background: var(--dim); }
.spark span.mid { background: var(--mid); }
.spark span.hi { background: var(--txt); }

/* タブ（下線） */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; white-space: nowrap; padding: 10px 2px; font-size: 14px; font-weight: 500; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; }
.tab.is-on { color: var(--txt); border-bottom-color: var(--txt); }
.tab .count { font-size: 12px; margin-left: 6px; color: var(--mute); }

/* お知らせ（空・読み込み中・失敗・順調） */
.notice { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 16px 14px; display: flex; align-items: center; gap: 16px; }
.notice .pic { width: 56px; display: flex; justify-content: center; flex: none; }
.notice .pic img { display: block; width: auto; }
.notice .t { font-size: 14px; font-weight: 500; }
.notice .s { font-size: 12px; color: var(--mute); margin-top: 3px; }

/* 案件カード */
.list { display: flex; flex-direction: column; gap: 10px; }
.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); display: flex; flex-direction: column; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px 10px; text-align: left; width: 100%; min-height: 44px; }
.card-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.card .name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card .url { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.status .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mute); }
.card[data-status="ready"] .status .dot { background: var(--good); }
.card[data-status="active"] .status .dot { background: var(--accent); }
.card[data-status="idle"] .status { color: var(--mute); }
.card[data-status="idle"] .status .dot { background: var(--warn); }
.card[data-status="failed"] .status .dot { background: var(--bad); }
.card[data-status="deploying"] .status .dot { background: var(--accent); animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.history { padding: 8px 14px 13px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.hrow { display: grid; grid-template-columns: 40px 8px 1fr; gap: 0 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.hrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mid); }
.hrow.deploy .dot { background: var(--accent); }
.hrow.failed .dot { background: var(--bad); }
.hrow .msg { font-family: var(--sans); font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow a.msg { color: var(--sub); }
.history:empty { display: none; }

.actions[hidden], .notice[hidden] { display: none; }
.actions { padding: 10px 14px 13px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.btn { height: 44px; border-radius: var(--rs); border: 1px solid var(--line); color: var(--txt); display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 500; white-space: nowrap; padding: 0 8px; }
.btn-primary { background: var(--txt); color: var(--bg); border-color: var(--txt); font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* 落ちている（生きてる？チェック） */
.card[data-status="down"] .status { color: var(--bad); }
.card[data-status="down"] .status .dot, .pc-row[data-status="down"] .dot, .tl-row[data-status="down"] .n .dot { background: var(--bad); }
.card[data-status="down"] .url::after { content: " · 開けません"; color: var(--bad); }

/* 今日の日誌（Active の上に1枚）と 日誌タブ */
.today[hidden], .diary[hidden] { display: none; }
.today { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
.today .label { font-size: 12px; font-weight: 600; color: var(--sub); grid-column: 1 / -1; }
.today .text { font-size: 14px; line-height: 1.6; color: var(--txt); }
.today .more { font-family: var(--mono); font-size: 12px; color: var(--mute); white-space: nowrap; align-self: end; }
.diary { display: flex; flex-direction: column; gap: 14px; }
.diary .day { display: flex; flex-direction: column; gap: 8px; }
.diary .date { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); padding: 0 2px; }
.diary .entry { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; }
.diary .entry .who { font-size: 12.5px; color: var(--mute); }
.diary .entry .text { font-size: 14px; line-height: 1.6; color: var(--txt); }
.diary .empty { font-size: 13px; color: var(--mute); padding: 6px 2px; line-height: 1.6; }

/* 止まっているもの（Active の上） */
.stuck[hidden] { display: none; }
.stuck { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.stuck .label { font-size: 12px; font-weight: 600; color: var(--sub); display: flex; justify-content: space-between; }
.stuck .row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; min-height: 30px; }
.stuck .row .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.stuck .row .k.down, .stuck .row .k.failed { color: var(--bad); border-color: var(--bad); }
.stuck .row .k.stale { color: var(--warn); border-color: var(--warn); }
.stuck .row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); }
.stuck .row .t .n { color: var(--mute); margin-right: 6px; }
.stuck .row .w { font-family: var(--mono); font-size: 12px; color: var(--mute); }

/* 開いたカードの追加情報（新しさ・公開の履歴・やること） */
.extra[hidden] { display: none; }
.extra { border-top: 1px solid var(--line); padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 12px; }
.extra .sec { display: flex; flex-direction: column; gap: 6px; }
.extra .label { font-size: 12px; font-weight: 600; color: var(--sub); display: flex; justify-content: space-between; align-items: center; }
.extra .label button { font-family: var(--sans); font-size: 13px; color: var(--accent); min-height: 30px; }
.extra .fresh { font-size: 13.5px; display: flex; justify-content: space-between; }
.extra .fresh .v { font-family: var(--mono); font-size: 12.5px; color: var(--sub); }
.extra .fresh.old .v { color: var(--warn); }
.extra .dep { display: grid; grid-template-columns: 8px 1fr auto; gap: 0 8px; align-items: center; font-size: 13px; color: var(--sub); }
.extra .dep .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--good); }
.extra .dep.bad .dot { background: var(--bad); }
.extra .dep .m { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.extra .todo { display: grid; grid-template-columns: 12px 1fr; gap: 0 8px; align-items: start; font-size: 13.5px; color: var(--txt); line-height: 1.5; }
.extra .todo .box { width: 10px; height: 10px; border: 1px solid var(--mute); border-radius: 3px; margin-top: 4px; }
.extra .todo a { color: var(--txt); }
.extra .none { font-size: 13px; color: var(--note); }
.todo-badge { font-family: var(--mono); font-size: 12px; color: var(--good); border: 1px solid var(--good); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }

/* 先週のまとめ（日誌タブの先頭） */
.weekly { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.weekly .label { font-size: 12px; font-weight: 600; color: var(--sub); }
.weekly .text { font-size: 14px; line-height: 1.6; }
.weekly .nums { display: flex; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.weekly .nums b { color: var(--txt); font-weight: 500; }

/* 依頼（意見箱の行き先） */
.reqs { display: flex; flex-direction: column; gap: 10px; }
.reqs[hidden] { display: none; }
.req { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.req .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.req .who { font-size: 12.5px; color: var(--mute); display: flex; gap: 8px; align-items: center; }
.req .title { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.req .title a { color: var(--txt); }
.req .reply { display: grid; grid-template-columns: 8px 1fr; gap: 0 8px; align-items: start; font-size: 13px; color: var(--sub); line-height: 1.55; border-top: 1px solid var(--line); padding-top: 8px; }
.req .reply .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-top: 6px; }
.req .reply .meta { font-family: var(--mono); font-size: 12px; color: var(--mute); margin-top: 2px; }
.req.is-done { opacity: 0.6; }
.chip { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.chip.s-analyzing, .chip.s-implementing { color: var(--accent); border-color: var(--accent); }
.chip.s-reviewing, .chip.s-blocked { color: var(--warn); border-color: var(--warn); }
.chip.s-done { color: var(--good); border-color: var(--good); }
.card .right { display: flex; align-items: center; gap: 8px; }
.req-badge { font-size: 12px; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.req-badge[hidden] { display: none; }

/* アイデア保管庫（入力欄は常設・段階の切り替え・依頼と同じ枠カード） */
.ideas { display: flex; flex-direction: column; gap: 10px; }
.ideas[hidden] { display: none; }
.idea-in { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.idea-in .row { display: flex; gap: 8px; align-items: stretch; }
.idea-in textarea { flex: 1; min-width: 0; background: var(--bg); color: var(--txt); border: 1px solid var(--line); border-radius: var(--rs); padding: 10px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; min-height: 64px; }
.idea-in textarea::placeholder { color: var(--note); }
.idea-in .mic { width: 44px; flex: none; border: 1px solid var(--line); border-radius: var(--rs); display: flex; align-items: center; justify-content: center; color: var(--txt); }
.idea-in .mic.is-on { color: var(--accent); border-color: var(--accent); animation: blink 0.8s steps(1) infinite; }
.idea-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.idea-seg button { font-size: 13px; font-weight: 500; color: var(--mute); border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; min-height: 34px; }
.idea-seg button .mono { font-size: 12px; margin-left: 4px; }
.idea-seg button.is-on { color: var(--txt); border-color: var(--txt); }
.idea-list { display: flex; flex-direction: column; gap: 10px; }
.idea { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); display: flex; flex-direction: column; }
.idea-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 12px 14px; text-align: left; width: 100%; min-height: 44px; }
.idea-head .t { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.idea-head .m { font-size: 12px; color: var(--mute); grid-column: 1 / -1; }
.chip.st-growing { color: var(--accent); border-color: var(--accent); }
.chip.st-project { color: var(--good); border-color: var(--good); }
.idea-body { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.idea-body .text { font-size: 14px; line-height: 1.6; color: var(--sub); white-space: pre-wrap; }
.idea-body .moved { font-size: 13.5px; color: var(--good); }
.idea-body .gh { font-size: 13px; color: var(--accent); }
.idea-acts { padding: 0 14px 13px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.idea-acts:empty { display: none; }
.idea-empty { font-size: 13px; color: var(--mute); padding: 6px 2px; line-height: 1.6; }
.idea-empty.bad { color: var(--bad); }
.idea-empty .retry { color: var(--accent); margin-left: 6px; min-height: 30px; }
.dlg-label { display: block; font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.dlg-select { width: 100%; height: 44px; background: var(--bg); color: var(--txt); border: 1px solid var(--line); border-radius: var(--rs); padding: 0 10px; font: inherit; font-size: 14px; margin-bottom: 14px; }
@media (min-width: 900px) { .ideas { max-width: 720px; } }

/* フッター */
.foot { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 0; }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.foot a, .linkbtn { height: 44px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--card); color: var(--sub); font-family: var(--sans); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.linkbtn[hidden] { display: none; }
.foot #me { font-size: 12px; color: var(--note); padding: 0 2px; }
@media (min-width: 900px) { .foot-links { grid-template-columns: repeat(3, 180px); } }

/* ダイアログ */
.dlg { background: var(--card); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; width: min(92vw, 420px); }
.dlg::backdrop { background: rgba(0, 0, 0, 0.6); }
.dlg h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.dlg-text { margin: 0 0 14px; color: var(--sub); font-size: 13.5px; line-height: 1.6; }
.dlg textarea { width: 100%; background: var(--bg); border-radius: var(--rs); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; margin-bottom: 14px; }
.dlg textarea::placeholder { color: var(--note); }
.dlg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* トースト */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--txt); color: var(--bg); border-radius: var(--rs); padding: 10px 14px; font-size: 13.5px; font-weight: 500; max-width: 92vw; z-index: 10; }
.toast.is-bad { background: var(--bad); color: #fff; }

@media (prefers-reduced-motion: reduce) { .runcat img, .card[data-status="deploying"] .status .dot { animation-duration: 3s; } }

/* ===== PC（900px以上）: 左リスト＋右詳細＋14日タイムライン。スマホは上の1列のまま ===== */
.pc[hidden] { display: none; }
@media (min-width: 900px) {
  .app { max-width: 1280px; padding: 24px 28px 40px; }
  .app > .tiles, .app > .tabs { display: none; }
  .pc-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
  .pc-top .tiles, .pc-top .tabs { display: grid; }
  .pc-top .tabs { display: flex; }
  .list, #notice { display: none; }
  .stuck { max-width: 720px; }
  .diary { max-width: 720px; }
  .today { max-width: 720px; }
  .reqs { max-width: 720px; }
  .pc { display: flex; flex-direction: column; gap: 16px; }
  .pc-main { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
  .pc-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
  .pc-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; min-height: 44px; color: var(--sub); }
  .pc-row:last-child { border-bottom: 0; }
  .pc-row .l { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
  .pc-row .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mute); }
  .pc-row[data-status="ready"] .dot { background: var(--good); }
  .pc-row[data-status="active"] .dot, .pc-row[data-status="deploying"] .dot { background: var(--accent); }
  .pc-row[data-status="idle"] .dot { background: var(--warn); }
  .pc-row[data-status="failed"] .dot { background: var(--bad); }
  .pc-row.is-sel { background: var(--dim); color: var(--txt); }
  .pc-row.is-sel .l { font-weight: 600; }
  .pc-row .t { font-family: var(--mono); font-size: 12px; color: var(--mute); }
  .pc-detail { border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-height: 320px; background: var(--card); }
  .pc-detail .head { padding: 18px 20px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .pc-detail .head .name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
  .pc-detail .head .url { font-family: var(--mono); font-size: 12.5px; color: var(--mute); margin-top: 3px; }
  .pc-detail .actions { border-top: 0; padding: 0 20px 16px; max-width: 520px; }
  .pc-detail .actions[hidden] { display: none; }
  .pc-detail .sec { padding: 14px 20px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
  .pc-detail .sec .label { font-size: 12px; font-weight: 600; color: var(--sub); }
  .pc-detail .req { padding: 10px 12px; }
  .pc-detail .hrow { grid-template-columns: 46px 8px 1fr; }
  .pc-detail .hrow .msg { white-space: normal; }
  .pc-bars { display: flex; gap: 4px; align-items: flex-end; height: 40px; }
  .pc-bars span { flex: 1; min-height: 4px; background: var(--dim); border-radius: 1px; }
  .pc-bars span.on { background: var(--accent); }
  .pc-timeline { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
  .pc-tl-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
  .pc-tl-head .label { font-size: 12px; font-weight: 600; color: var(--sub); }
  .legend { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 6px; }
  .legend i { display: inline-block; width: 8px; height: 8px; margin-left: 10px; }
  .legend .lg-c { border-radius: 999px; background: var(--mid); }
  .legend .lg-d { border-radius: 2px; background: var(--accent); }
  .pc-tl { display: flex; flex-direction: column; }
  .tl-axis, .tl-row { display: grid; grid-template-columns: 200px 1fr 90px; align-items: center; }
  .tl-axis { padding: 4px 0; }
  .tl-axis .days, .tl-row .days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .tl-axis .d { font-family: var(--mono); font-size: 12px; color: var(--mute); text-align: center; }
  .tl-row { border-top: 1px solid var(--line); width: 100%; text-align: left; min-height: 40px; color: var(--txt); }
  .tl-row.is-sel { background: var(--dim); }
  .tl-row .n { display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 14px; font-weight: 600; }
  .tl-row .n .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mute); }
  .tl-row[data-status="ready"] .n .dot { background: var(--good); }
  .tl-row[data-status="active"] .n .dot { background: var(--accent); }
  .tl-row[data-status="idle"] .n .dot { background: var(--warn); }
  .tl-row[data-status="failed"] .n .dot { background: var(--bad); }
  .tl-row .c { height: 40px; border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 3px; }
  .tl-row .c i { display: inline-block; width: 8px; height: 8px; }
  .tl-row .c .ci { border-radius: 999px; background: var(--mid); }
  .tl-row .c .ci.many { background: var(--sub); }
  .tl-row .c .di { border-radius: 2px; background: var(--accent); }
  .tl-row .last { font-family: var(--mono); font-size: 12px; color: var(--mute); text-align: right; padding-right: 12px; }
}

/* あなたのやること（ラベル my-task）。猫は cat09 / cat14 / cat15 を1匹だけ（DESIGN.md 5章） */
.mytasks[hidden] { display: none; }
.mytasks { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mytasks .label { font-size: 12px; font-weight: 600; color: var(--sub); }
.mytasks .body { display: flex; gap: 14px; align-items: flex-end; }
.mytasks .rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mytasks .row { display: flex; flex-direction: column; gap: 2px; }
.mytasks .row .t { font-size: 14px; font-weight: 600; line-height: 1.5; }
.mytasks .row .t .n { color: var(--sub); font-weight: 500; }
.mytasks .row .sub { font-size: 12px; color: var(--mute); }
.mytasks .row.s-B .sub { color: var(--warn); }
.mytasks .row .how { font-size: 13px; color: var(--sub); line-height: 1.6; }
.mytasks .row.s-C .t { color: var(--sub); font-weight: 500; }
.mytasks .pic { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; }
.mytasks .pic img { display: block; }
.mytasks .pic .say { font-size: 10.5px; color: var(--note); white-space: nowrap; }
/* 目立たせる（決定: 案3・2026-09-29）。来たばかり＝薄い青の面＋青枠、3日目から＝薄い黄の面＋黄枠。色は既存の accent / warn だけ */
.mytasks .label { font-size: 13px; }
.mytasks[data-kind="A"] { background: rgba(124, 156, 255, 0.13); border-color: var(--accent); }
.mytasks[data-kind="A"] .label { color: var(--accent); }
.mytasks[data-kind="B"] { background: rgba(245, 165, 36, 0.14); border-color: var(--warn); }
.mytasks[data-kind="B"] .label { color: var(--warn); }
.mytasks .mytask-launch { display: none; }
@media (min-width: 900px) { .mytasks { max-width: 720px; } }
/* 「このPCで始める」は横幅ではなく「マウスで操作する端末」で出す（ウィンドウが狭い・拡大表示の PC でも出るように） */
@media (hover: hover) and (pointer: fine) { .mytasks .mytask-launch { display: flex; align-self: flex-start; height: 36px; padding: 0 14px; } }