/* Style repeatable task, goal, week and progress components. */
.daily-summary { display: grid; grid-template-columns: minmax(340px, 1.6fr) repeat(3, minmax(120px, .7fr)); min-height: 112px; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--radius); overflow: hidden; }
.daily-summary > div { display: grid; align-content: center; justify-items: center; gap: 5px; padding: 18px 24px; border-left: 1px solid #2e235726; }
.daily-summary .summary-lead { justify-items: start; border-left: 0; }
.daily-summary strong { font-size: 24px; }
.daily-summary small { color: #5b4d86; font-size: 11px; }
.summary-lead strong { font-size: 22px; }
.today-date-navigation { display: flex; gap: 7px; align-items: center; }
.day-nav-button { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; color: var(--brand-ink); background: var(--brand-pale); border-radius: var(--radius); }
.day-nav-button:hover:not(.is-disabled) { background: #e5defc; }
.day-nav-button.is-disabled { cursor: default; opacity: .35; }
.day-nav-button svg { width: 18px; height: 18px; }
.daily-study-progress { display: grid; width: min(100%, 430px); gap: 5px; margin-top: 3px; }
.daily-study-progress-copy { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.daily-study-progress-copy b { color: var(--brand-ink); font-size: 11px; }
.daily-study-progress-copy em { color: #6d638b; font-size: 10px; font-style: normal; white-space: nowrap; }
.daily-study-progress-track { height: 7px; overflow: hidden; background: #ffffffa8; border-radius: 999px; }
.daily-study-progress-track b { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .2s ease; }
.daily-study-progress.is-complete .daily-study-progress-copy b { color: #236b59; }
.daily-study-progress.is-complete .daily-study-progress-track { display: none; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.task-section { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.section-heading h2 { font-size: 20px; }
.section-heading > span { color: var(--ink-muted); font-size: 12px; }
.task-list { display: grid; gap: 12px; margin-top: 12px; }
.task-row { display: grid; grid-template-columns: 24px 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 82px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .18s ease, transform .18s ease, opacity .18s ease; }
.task-row:hover { border-color: #c9c0e3; transform: translateY(-1px); }
.task-row.is-complete { opacity: .64; }
.task-row.is-complete .task-copy strong, .task-row.is-complete .task-copy span { text-decoration: line-through; }
.task-checkbox { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.task-icon { display: grid; width: 40px; height: 40px; place-items: center; color: #2f2a45; background: var(--pink); border-radius: var(--radius); }
.task-chinese .task-icon { background: var(--coral); }
.task-english .task-icon { background: var(--blue); }
.task-math .task-icon, .task-integrated .task-icon { background: var(--mint); }
.task-physical .task-icon { background: var(--yellow); }
.task-ethics .task-icon { background: #d5a7e8; }
.task-copy { display: grid; gap: 3px; min-width: 0; }
.task-copy small { color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.task-copy strong { font-size: 14px; }
.task-copy span { overflow: hidden; color: var(--ink-soft); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.task-duration { color: var(--ink-muted); font-size: 11px; white-space: nowrap; }
.week-goal-panel { display: grid; gap: 16px; }
.week-range { color: var(--ink-soft); font-size: 12px; }
.goal-list { display: grid; gap: 17px; margin: 0; padding: 20px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.goal-list li { display: grid; grid-template-columns: 9px 1fr; gap: 9px; align-items: start; font-size: 13px; line-height: 1.45; }
.goal-list li span { width: 8px; height: 8px; margin-top: 5px; background: var(--brand); border-radius: 50%; }
.goal-list li:nth-child(2) span { background: var(--blue); }
.goal-list li:nth-child(3) span { background: var(--mint); }
.study-note { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 18px; color: #6d5415; background: #fff4d4; border-radius: var(--radius); }
.study-note p { font-size: 13px; line-height: 1.55; }
.daily-math { display: grid; grid-template-columns: 44px minmax(180px, 1fr) minmax(170px, .7fr) auto; gap: 16px; align-items: center; min-height: 82px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); }
.daily-math-icon, .week-math-icon { display: grid; place-items: center; color: #236b59; background: var(--mint); border-radius: var(--radius); }
.daily-math-icon { width: 42px; height: 42px; }
.daily-math-copy { display: grid; gap: 2px; min-width: 0; }
.daily-math-copy small { color: var(--brand); font-size: 9px; font-weight: 900; }
.daily-math-copy strong { font-size: 15px; }
.daily-math-copy span { color: var(--ink-soft); font-size: 11px; }
.daily-math-progress { display: grid; grid-template-columns: minmax(80px, 1fr) 45px; gap: 10px; align-items: center; }
.daily-math-progress > i { height: 7px; background: #e9e6ee; border-radius: 999px; overflow: hidden; }
.daily-math-progress b { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.daily-math-progress strong { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.daily-math-action { display: inline-flex; min-height: 38px; padding: 0 13px; align-items: center; justify-content: center; gap: 7px; color: var(--brand-ink); background: var(--brand-pale); border: 0; border-radius: var(--radius); font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.daily-math-action svg { width: 15px; }

.week-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.week-tabs a { flex: 0 0 auto; padding: 10px 18px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; font-weight: 700; }
.week-tabs a.is-active { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-soft); }
.week-goal-strip { display: flex; gap: 18px; align-items: center; padding: 16px 20px; color: var(--brand-ink); background: var(--brand-pale); border-radius: var(--radius); overflow-x: auto; }
.week-goal-strip span { display: inline-flex; flex: 0 0 auto; gap: 7px; align-items: center; font-size: 12px; font-weight: 700; }
.week-days { display: grid; gap: 18px; }
.week-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.week-day-heading { display: flex; flex-direction: column; justify-content: space-between; }
.week-day-heading small { color: var(--brand); font-size: 11px; font-weight: 800; }
.week-day-heading h2 { margin-top: 4px; font-size: 20px; }
.week-day-heading > span { color: var(--ink-muted); font-size: 11px; }
.compact-task-list { display: grid; gap: 8px; }
.week-math-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 55px; padding: 7px 10px; color: var(--ink); background: #f1faf7; border: 1px solid #d2ece4; border-radius: 6px; text-align: left; }
.week-math-row.is-locked { width: 100%; color: var(--ink); border-color: var(--border); background: var(--surface-soft); font: inherit; cursor: pointer; }
.week-math-icon { width: 34px; height: 34px; }
.week-math-icon svg { width: 17px; }
.week-math-row > span:nth-child(2) { display: grid; gap: 3px; }
.week-math-row strong { font-size: 12px; }
.week-math-row small { color: var(--ink-soft); font-size: 10px; }
.week-math-row em { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-ink); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.week-math-row em svg { width: 14px; }
.compact-task { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 55px; padding: 7px 10px; background: var(--surface-soft); border-radius: 6px; cursor: pointer; }
.compact-task.is-complete { opacity: .58; }
.compact-task > span:nth-of-type(2) { display: grid; gap: 3px; min-width: 0; }
.compact-task strong { font-size: 12px; }
.compact-task small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.compact-task em { color: var(--ink-muted); font-size: 10px; font-style: normal; white-space: nowrap; }
.subject-label { justify-self: start; padding: 5px 7px; color: #4c3821; background: var(--yellow); border-radius: 5px; font-size: 10px; font-weight: 800; }
.subject-chinese { background: #ffe2dc; color: #8c3e2d; }
.subject-english { background: #e5f0fc; color: #315e92; }
.subject-math, .subject-integrated { background: #dff4ee; color: #236b59; }
.subject-physical { background: #fff0bd; }
.subject-reading { background: #f8e4ec; color: #87435f; }
.subject-ethics { background: #eee2f5; color: #71408a; }

.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-row article { display: flex; gap: 14px; align-items: center; min-height: 108px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.metric-row article > span { display: grid; width: 44px; height: 44px; place-items: center; color: var(--brand-ink); background: var(--brand-pale); border-radius: var(--radius); }
.metric-row article:nth-child(2) > span { color: #8c3e2d; background: #ffe8e2; }
.metric-row article:nth-child(3) > span { color: #315e92; background: #e5f0fc; }
.metric-row article:nth-child(4) > span { color: #7b5b0e; background: #fff4d4; }
.metric-row article div { display: grid; gap: 3px; }
.metric-row strong { font-size: 25px; }
.metric-row small { color: var(--ink-soft); font-size: 11px; }
.progress-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr); gap: 20px; }
.progress-panel { display: grid; gap: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.progress-line { display: grid; grid-template-columns: 130px minmax(0, 1fr) 38px; gap: 14px; align-items: center; }
.progress-line > span { display: grid; gap: 3px; }
.progress-line strong { font-size: 12px; }
.progress-line small { color: var(--ink-muted); font-size: 10px; }
.progress-line em, .subject-progress-line em { color: var(--ink-soft); font-size: 10px; font-style: normal; text-align: right; }
.progress-track { height: 8px; background: #e9e6ee; border-radius: 999px; overflow: hidden; }
.progress-track i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.subject-progress { align-content: start; }
.subject-progress-line { display: grid; grid-template-columns: 50px minmax(0, 1fr) 35px; gap: 9px; align-items: center; }
.subject-progress-line > span { font-size: 11px; font-weight: 700; }
.subject-color-1 { background: var(--coral) !important; }
.subject-color-2 { background: var(--blue) !important; }
.subject-color-3, .subject-color-5 { background: var(--mint) !important; }
.subject-color-4 { background: var(--yellow) !important; }
.subject-color-6 { background: #d5a7e8 !important; }
.subject-color-7 { background: var(--pink) !important; }