/* qq-plan.css v1.0.0 — 教練式學習計畫介面（需先載入 qq-focus.css 取得色彩 token） */
.qqp, .qqp * { box-sizing: border-box; }
.qqp { font-family: var(--qq-font); color: var(--qq-text); max-width: 720px; margin: 0 auto; line-height: 1.6; }
.qqp-screen { padding: 4px 0 16px; }
.qqp-steps { font-size: 13px; color: var(--qq-muted); }
.qqp-h { font-size: 22px; margin: 6px 0 12px; }
.qqp-sub { font-size: 15px; margin: 16px 0 6px; }
.qqp-hint { font-size: 14px; color: var(--qq-muted); margin: 6px 0; }
.qqp-big { font-size: 20px; font-weight: 700; margin: 8px 0; }
.qqp-btn { font: inherit; font-size: 15px; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--qq-line); background: var(--qq-card); color: var(--qq-text); cursor: pointer; }
.qqp-btn:focus-visible, .qqp-chip:focus-visible, .qqp-choice:focus-visible, .qqp-task:focus-visible, .qqp-blk:focus-visible { outline: 3px solid var(--qq-accent); outline-offset: 2px; }
.qqp-primary { background: var(--qq-accent); color: var(--qq-accent-ink); border-color: var(--qq-accent); font-weight: 700; width: 100%; margin-top: 12px; }
.qqp-primary:disabled { opacity: .45; cursor: not-allowed; }
.qqp-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.qqp-foot .qqp-primary { flex: 1 1 200px; margin-top: 0; }
.qqp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qqp-chip { font: inherit; font-size: 15px; min-height: 44px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--qq-line); background: var(--qq-card); color: var(--qq-text); cursor: pointer; max-width: 100%; }
.qqp-chip[aria-pressed="true"] { background: var(--qq-accent-soft); border-color: var(--qq-accent); font-weight: 700; }
.qqp-day { min-width: 44px; padding: 8px 0; }
.qqp-choices { display: grid; gap: 8px; margin-top: 8px; }
.qqp-choice { font: inherit; font-size: 16px; text-align: left; min-height: 52px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--qq-line); background: var(--qq-card); color: var(--qq-text); cursor: pointer; }
.qqp-mini { height: 6px; background: var(--qq-surface); border-radius: 99px; overflow: hidden; }
.qqp-mini-fill { height: 100%; background: var(--qq-accent); }
.qqp-input, .qqp-time { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--qq-line); background: var(--qq-card); color: var(--qq-text); }
.qqp-time { min-width: 0; flex: 1 1 0; width: auto; padding: 6px; font-size: 15px; }
.qqp-range { width: 100%; accent-color: var(--qq-accent); min-height: 44px; }
.qqp-tabs { display: flex; gap: 4px; margin: 14px 0 8px; border-bottom: 1px solid var(--qq-line); }
.qqp-tab { font: inherit; min-height: 44px; padding: 6px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--qq-muted); cursor: pointer; }
.qqp-tab[aria-selected="true"] { color: var(--qq-text); border-bottom-color: var(--qq-accent); font-weight: 700; }

/* 24 小時時間軸 */
.qqp-tl { position: relative; height: 56px; border-radius: 10px; background: var(--qq-surface); border: 1px solid var(--qq-line); overflow: hidden; touch-action: none; cursor: copy; margin-top: 8px; }
.qqp-free { position: absolute; top: 0; bottom: 0; opacity: .35; pointer-events: auto; }
.qqp-blk { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; cursor: grab; }
.qqp-hdl { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.qqp-hdl-l { left: 0; } .qqp-hdl-r { right: 0; }
.qqp-ticks { position: relative; height: 18px; font-size: 11px; color: var(--qq-muted); }
.qqp-ticks span { position: absolute; transform: translateX(-50%); }
.qqp-ticks span:first-child { transform: none; } .qqp-ticks span:last-child { transform: translateX(-100%); }
.qqp-type-sleep { --c: #4b5b8a; background: var(--c); } .qqp-type-work { --c: #a05a2c; background: var(--c); } .qqp-type-commute { --c: #2f7f8f; background: var(--c); }
.qqp-type-meal { --c: #8a7a2a; background: var(--c); } .qqp-type-family { --c: #8a4a7a; background: var(--c); } .qqp-type-other { --c: #6a7280; background: var(--c); }
.qqp-chip.qqp-type-sleep, .qqp-chip.qqp-type-work, .qqp-chip.qqp-type-commute, .qqp-chip.qqp-type-meal, .qqp-chip.qqp-type-family, .qqp-chip.qqp-type-other { color: #fff; border-color: transparent; }
.qqp-types .qqp-chip[aria-pressed="true"] { background: var(--c); outline: 3px solid var(--qq-text); outline-offset: 2px; font-weight: 700; }
.qqp-free-deep { background: var(--qq-ok); } .qqp-free-lunch, .qqp-free-short { background: var(--qq-accent); } .qqp-free-commute, .qqp-free-fragment { background: var(--qq-warn); } .qqp-free-bedtime { background: #7a6bd1; }
.qqp-blist { display: grid; gap: 6px; margin-top: 10px; }
.qqp-brow { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.qqp-dash { flex: none; }
.qqp-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.qqp-bname { width: 3em; flex: none; }
.qqp-x { font: inherit; font-size: 16px; min-height: 44px; min-width: 44px; flex: none; padding: 4px; border: 0; background: transparent; color: var(--qq-muted); cursor: pointer; }

/* 今日首頁 */
.qqp-home .qqp-coach { font-size: 18px; font-weight: 700; margin: 4px 0 2px; }
.qqp-why { font-size: 14px; color: var(--qq-muted); margin: 0 0 8px; }
.qqp-nudge { padding: 10px 12px; border-radius: 10px; background: var(--qq-accent-soft); margin: 0 0 10px; }
.qqp-three { list-style: none; counter-reset: q; padding: 0; margin: 0; display: grid; gap: 8px; }
.qqp-three li { counter-increment: q; display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; padding: 12px; border: 1px solid var(--qq-line); border-radius: 12px; background: var(--qq-card); }
.qqp-three li::before { content: counter(q); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--qq-accent-soft); color: var(--qq-text); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.qqp-three li.is-done { opacity: .55; } .qqp-three li.is-done .qqp-t-title { text-decoration: line-through; }
.qqp-t-title { font-weight: 600; } .qqp-t-meta { font-size: 13px; color: var(--qq-muted); }
.qqp-more { margin-top: 18px; border-top: 1px solid var(--qq-line); padding-top: 8px; }
.qqp-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--qq-muted); }
.qqp-count { font-weight: 700; margin: 8px 0 2px; }
.qqp-phase { display: flex; height: 26px; border-radius: 8px; overflow: hidden; border: 1px solid var(--qq-line); margin: 8px 0; }
.qqp-ph { display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--qq-surface); color: var(--qq-muted); border-right: 1px solid var(--qq-line); min-width: 0; overflow: hidden; }
.qqp-ph.is-now { background: var(--qq-accent-soft); color: var(--qq-text); font-weight: 700; }
.qqp-ms { padding: 10px 12px; border: 1px solid var(--qq-line); border-radius: 10px; margin: 8px 0; }
.qqp-ms h4 { margin: 0 0 4px; } .qqp-ms ul { margin: 4px 0; padding-left: 18px; }
.qqp-behind { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--qq-warn-soft); display: grid; gap: 8px; }

/* 週曆 */
.qqp-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.qqp-wday { border: 1px solid var(--qq-line); border-radius: 12px; padding: 8px; background: var(--qq-card); min-width: 0; }
.qqp-wd-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.qqp-wslot { border-left: 4px solid var(--qq-line); padding: 4px 6px; margin: 6px 0; border-radius: 6px; background: var(--qq-surface); }
.qqp-wslot.qqp-free-deep { border-left-color: var(--qq-ok); background: var(--qq-surface); }
.qqp-wslot.qqp-free-commute, .qqp-wslot.qqp-free-fragment { border-left-color: var(--qq-warn); background: var(--qq-surface); }
.qqp-wslot.qqp-free-lunch, .qqp-wslot.qqp-free-short { border-left-color: var(--qq-accent); background: var(--qq-surface); }
.qqp-wslot.qqp-free-bedtime { border-left-color: #7a6bd1; background: var(--qq-surface); }
.qqp-wslot.is-tired { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(127,127,127,.08) 8px 16px); }
.qqp-ws-h { font-size: 12px; color: var(--qq-muted); }
.qqp-task { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; min-height: 36px; margin: 4px 0; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--qq-line); background: var(--qq-card); color: var(--qq-text); cursor: grab; overflow-wrap: anywhere; }
.qqp-task.is-picked { border-color: var(--qq-accent); outline: 2px solid var(--qq-accent); }

@media (max-width: 480px) {
  .qqp-h { font-size: 20px; }
  .qqp-week { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .qqp * { transition: none !important; animation: none !important; } }