/* z3-home — 課程首頁（.v-home）與總覽（.v-overview）
   版面：把 .intro 攤平（display:contents），讓標題、按鈕、角色列、搜尋與各區塊一起進 .page 的 grid，
   用 order 排成「標題 → 儀表板 → 搜尋 → 待辦 → 問這門課 → 整理紀錄」。 */

/* ───────── 1. 版面骨架（手機優先） ───────── */
.v-home,.v-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:12px;align-items:start;padding-top:18px}
.v-home .intro,.v-home .intro > .row:first-child,.v-overview .intro{display:contents}
.v-home > *,.v-home .intro > *,.v-home .intro > .row:first-child > *,
.v-overview > *,.v-overview .intro > *{grid-column:1/-1;min-width:0}

.v-home .intro h1,.v-overview .intro h1{order:1;align-self:center;overflow-wrap:anywhere}
.v-home .intro > .row:first-child > h1{grid-column:1}
.v-home .intro > .row:nth-child(2){order:2;grid-column:2;justify-self:end;align-self:center;flex-wrap:nowrap;gap:6px}
.v-home .intro > .row:first-child > .btn.primary{order:3}
.v-home > .hud,.v-overview > .hud{order:4}
.v-home .search,.v-overview .search{order:5}
.v-home > #sec-search,.v-overview > #sec-search{order:6}
.v-home > #sec-upcoming,.v-overview > #sec-upcoming{order:7}
.v-home > #askSec{order:8}
.v-home > #sec-records,.v-overview > #sec-courses{order:9}
.v-home > .sec,.v-overview > .sec{margin-top:6px}
.v-home > #sec-upcoming,.v-overview > #sec-upcoming{margin-top:2px}

/* ───────── 2. 標題區 ───────── */
.v-home .intro h1,.v-overview .intro h1{line-height:1.2;padding-bottom:2px;position:relative}
.v-home .intro .btn.primary{min-height:44px;width:100%;font-size:1rem;letter-spacing:.08em}
.v-home .intro .role{white-space:nowrap}
.v-home .intro > .row:nth-child(2) .small{white-space:nowrap;font-family:var(--pixel);font-size:.78rem}
.v-home .intro > .row:nth-child(2) .btn{min-height:40px;padding:4px 10px}
.v-overview .intro h1{min-height:52px;display:flex;align-items:center;flex-wrap:wrap;column-gap:10px}
.v-overview .intro h1::after{content:"ALL.DIR";display:inline-block;font-family:var(--lcdf);font-size:.95rem;line-height:1;padding:3px 7px 2px;letter-spacing:.1em;
  background:var(--lcd);color:var(--lcd-ink);box-shadow:var(--in);text-shadow:0 0 6px rgba(124,255,233,.8)}

/* 搜尋 */
.v-home .search input,.v-overview .search input{min-height:44px;font-size:.95rem}
.v-home .search input:focus,.v-overview .search input:focus{box-shadow:var(--in),0 0 0 2px var(--sel),0 0 14px rgba(43,246,255,.45)}

/* ───────── 3. 液晶儀表板 ───────── */
.v-home > .hud,.v-overview > .hud{position:relative;padding:4px;gap:6px;
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:150px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:4px;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v-home > .hud::-webkit-scrollbar,.v-overview > .hud::-webkit-scrollbar{display:none}
.v-home .hud .tile,.v-overview .hud .tile{height:88px;padding:8px 10px 7px;scroll-snap-align:start;justify-content:space-between}
.v-home .hud .tile::before,.v-overview .hud .tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--foil);background-size:300% 100%;opacity:.85}
.v-home .hud .tile.warn::before,.v-overview .hud .tile.warn::before{background:linear-gradient(90deg,#FF2E63,#FF4FD8);box-shadow:0 0 8px #FF2E63}
.v-home .hud .tile .num,.v-overview .hud .tile .num{font-size:2.15rem;line-height:.9}
.v-home .hud .tile .lbl,.v-overview .hud .tile .lbl{font-size:.66rem;color:#5FC4B6}
.v-home .hud .tile .sub,.v-overview .hud .tile .sub{font-size:.66rem}
.v-home .hud .bar,.v-overview .hud .bar{margin-top:1px;height:6px}

/* ───────── 4. 區塊標題 ───────── */
.v-home .sec-head h2,.v-overview .sec-head h2{font-size:1.05rem}
.v-home #sec-upcoming .sec-head::before,.v-overview #sec-upcoming .sec-head::before{background:var(--imp);box-shadow:inset -2px -2px rgba(0,0,0,.35),inset 2px 2px rgba(255,255,255,.45),0 0 8px rgba(212,0,42,.6)}

/* ───────── 5. 時間軸 ───────── */
.v-home .timeline,.v-overview .timeline{position:relative;padding:4px 2px}
.v-home .timeline::before,.v-overview .timeline::before{content:"";position:absolute;left:19px;top:18px;bottom:18px;width:2px;
  background:linear-gradient(var(--neon),var(--neon-2));box-shadow:0 0 6px rgba(43,246,255,.7);opacity:.75}
.v-home .timeline .due,.v-overview .timeline .due{
  grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"when check" "what check";
  gap:2px 8px;padding:10px 6px 8px 34px;border-bottom:1px dotted #9AA0A8}
.v-home .timeline .due .when,.v-overview .timeline .due .when{grid-area:when;display:flex;align-items:baseline;gap:10px;min-width:0;font-size:1.3rem;line-height:1.1}
.v-home .timeline .due .when .rel,.v-overview .timeline .due .when .rel{display:inline-block;font-size:.72rem;padding:1px 6px;background:var(--chrome);box-shadow:var(--out);color:var(--ink);line-height:1.4}
.v-home .timeline .due .what,.v-overview .timeline .due .what{grid-area:what}
.v-home .timeline .due .what p,.v-overview .timeline .due .what p{font-size:.95rem;line-height:1.65}
.v-home .timeline .due > .check,.v-home .timeline .due > span:last-child,
.v-overview .timeline .due > .check,.v-overview .timeline .due > span:last-child{grid-area:check;align-self:start}

/* 節點：方形霓虹 */
.v-home .timeline .due::before,.v-overview .timeline .due::before{left:13px;top:15px;width:10px;height:10px;z-index:1;
  background:var(--sel);box-shadow:0 0 0 2px var(--field),0 0 0 3px rgba(43,246,255,.8),0 0 8px var(--neon)}
/* 最近一筆（列表依日期排序）＝下一個期限：放大＋霓虹脈衝 */
.v-home .timeline .due.next,.v-overview .timeline .due.next{background:linear-gradient(90deg,rgba(43,246,255,.12),rgba(255,79,216,.05) 55%,transparent)}
.v-home .timeline .due.next .when,.v-overview .timeline .due.next .when{font-size:1.6rem}
.v-home .timeline .due.next::before,.v-overview .timeline .due.next::before{top:17px;animation:z3pulse 1.6s steps(4) infinite}
/* 3 天內：紅色警示 */
.v-home .timeline .due.hot,.v-overview .timeline .due.hot{background:linear-gradient(90deg,rgba(212,0,42,.13),rgba(255,79,216,.05) 60%,transparent);box-shadow:inset 3px 0 0 var(--imp)}
.v-home .timeline .due.hot .when,.v-overview .timeline .due.hot .when{color:var(--imp);text-shadow:0 0 8px rgba(212,0,42,.45)}
.v-home .timeline .due.hot .when .rel,.v-overview .timeline .due.hot .when .rel{background:var(--imp);color:#fff;box-shadow:inset -1px -1px rgba(0,0,0,.4),inset 1px 1px rgba(255,255,255,.4)}
.v-home .timeline .due.hot::before,.v-overview .timeline .due.hot::before{background:var(--imp);box-shadow:0 0 0 2px #FFD2DB,0 0 10px var(--imp)}
/* 已完成 */
.v-home .timeline .due.done .what p,.v-overview .timeline .due.done .what p{text-decoration:line-through;text-decoration-color:rgba(17,20,24,.45);color:var(--ink-2)}
.v-home .timeline .due.done .when,.v-overview .timeline .due.done .when{color:var(--lo)}
.v-home .timeline .due.done::before,.v-overview .timeline .due.done::before{background:var(--ok);box-shadow:0 0 0 2px var(--field)}

/* 舊系統清單選取：hover／聚焦變深藍反白 */
.v-home .timeline .due:hover,.v-overview .timeline .due:hover{background:#E4EAFF}
.v-home .timeline .due:focus-within,.v-overview .timeline .due:focus-within{outline:1px dotted var(--sel);outline-offset:-3px}

/* 出處連結：40px 點擊區 */
.v-home .due .ctx,.v-overview .due .ctx{display:inline-flex;align-items:center;min-height:40px;padding:0 6px;margin:0 0 0 -6px;font-size:.76rem;text-underline-offset:3px;line-height:1.35}
.v-home .due .ctx:hover,.v-overview .due .ctx:hover,.v-home .due .ctx:focus-visible,.v-overview .due .ctx:focus-visible{background:var(--sel);color:var(--on-sel);outline:none}

/* 完成勾選：40×40 點擊區，視覺是 24px 凹陷框 */
.v-home .due .check,.v-overview .due .check{position:relative;width:40px;height:40px;margin:0;background:none;box-shadow:none}
.v-home .due .check::before,.v-overview .due .check::before{content:"";position:absolute;inset:8px;background:var(--field);box-shadow:var(--in)}
.v-home .due .check svg,.v-overview .due .check svg{position:relative;width:16px;height:16px}
.v-home .due .check:hover::before,.v-overview .due .check:hover::before{box-shadow:var(--in),0 0 0 1px var(--neon),0 0 8px var(--neon)}
.v-home .due .check[aria-pressed="true"],.v-overview .due .check[aria-pressed="true"]{background:none}
.v-home .due .check[aria-pressed="true"]::before,.v-overview .due .check[aria-pressed="true"]::before{background:#DFFFEF}
.v-home .due .check[aria-pressed="true"] svg,.v-overview .due .check[aria-pressed="true"] svg{stroke:var(--ok)}

/* 時間軸下方按鈕列 */
.v-home .sec > .row .btn,.v-overview .sec > .row .btn{min-height:40px}

/* ───────── 6. 整理紀錄／課程列 ───────── */
.v-home #sec-records .batch,.v-overview #sec-courses .batch,.v-home #sec-search .batch,.v-overview #sec-search .batch{min-height:56px;padding:10px 12px 10px 38px;align-items:center;gap:2px 10px}
.v-home .batch .bt,.v-overview .batch .bt{font-family:var(--pixel);font-weight:400;font-size:1rem;letter-spacing:.03em;line-height:1.35}
.v-home .batch .bm,.v-overview .batch .bm{font-size:.74rem;line-height:1.5}
.v-home .batch::before,.v-overview .batch::before{top:14px}
.v-home .batch:active,.v-overview .batch:active{background:var(--sel);color:var(--on-sel)}
.v-home .batch:hover .pill,.v-overview .batch:hover .pill,.v-home .batch:focus-visible .pill,.v-overview .batch:focus-visible .pill{color:var(--ink)}
.v-overview .course-row::before{background:linear-gradient(#8FF3FF,#4AA8E8);box-shadow:inset -1px -1px #1F5E8A,inset 1px 1px #E6FDFF}
.v-overview .course-row .pill.failed{color:var(--imp)}

/* ───────── 7. 問這門課 ───────── */
.v-home #askSec .askrow input{min-height:44px}
.v-home #askSec .askrow .btn{min-height:44px;min-width:72px}
.v-home #askSec .sec-head::before{background:var(--neon-2);box-shadow:inset -2px -2px rgba(0,0,0,.35),inset 2px 2px rgba(255,255,255,.45),0 0 8px rgba(255,79,216,.7)}
.v-home #askSec .sec-desc{line-height:1.6}

/* ───────── 8. 中寬：儀表板一排 4 格 ───────── */
@media (min-width:641px){
  .v-home > .hud,.v-overview > .hud{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:8px;gap:8px}
  .v-home .hud .tile,.v-overview .hud .tile{height:104px;padding:10px 12px 9px}
  .v-home .hud .tile .num,.v-overview .hud .tile .num{font-size:2.6rem}
  .v-home .hud .tile .lbl,.v-overview .hud .tile .lbl{font-size:.7rem}
  .v-home .hud .tile .sub,.v-overview .hud .tile .sub{font-size:.7rem}
  .v-home .intro > .row:first-child > .btn.primary{order:2;grid-column:2;width:auto;justify-self:end;align-self:center;padding:8px 22px}
  .v-home .intro > .row:nth-child(2){order:3;grid-column:1/-1;justify-self:start;margin-top:-4px}
  .v-home .intro > .row:nth-child(2) .btn{min-height:32px;padding:3px 12px;font-size:.84rem}
  .v-home .due .ctx,.v-overview .due .ctx{min-height:30px}
  .v-home .sec > .row .btn,.v-overview .sec > .row .btn{min-height:32px}
  .v-home .timeline .due,.v-overview .timeline .due{padding:10px 8px 6px 38px}
}

/* ───────── 9. 電腦：主欄＋側欄 ───────── */
@media (min-width:820px){
  .v-home,.v-overview{grid-template-columns:minmax(0,1fr) 290px;column-gap:16px}
  .v-home > #sec-upcoming,.v-overview > #sec-upcoming{grid-column:1;margin-top:4px}
  .v-home > #askSec,.v-overview > #sec-courses{grid-column:2;margin-top:4px}
  /* 側欄做成凸起的子視窗，上緣一條全像膜 */
  .v-home > #askSec,.v-overview > #sec-courses{background:var(--chrome);box-shadow:var(--out);padding:0 10px 12px;gap:10px}
  .v-home > #askSec::before,.v-overview > #sec-courses::before{content:"";height:6px;margin:0 -10px;background:var(--foil);background-size:300% 100%;animation:foil 12s linear infinite;box-shadow:inset 0 -1px rgba(0,0,0,.25)}
  .v-home > #askSec .sec-head,.v-overview > #sec-courses .sec-head{padding-top:2px}
  .v-home #askSec .askrow{flex-direction:column}
  .v-home #askSec .askrow .btn{align-self:flex-end}
  .v-home #askSec .summary{padding:12px 14px 14px}
  .v-home #askSec .summary p{font-size:.95rem;line-height:1.75}
  .v-overview #sec-courses .batch{grid-template-columns:minmax(0,1fr)}
  .v-overview #sec-courses .batch .pill{justify-self:start;margin-top:2px}
}

@keyframes z3pulse{
  0%,100%{box-shadow:0 0 0 2px var(--field),0 0 0 3px rgba(43,246,255,.8),0 0 6px var(--neon)}
  50%{box-shadow:0 0 0 2px var(--field),0 0 0 5px rgba(43,246,255,.55),0 0 16px var(--neon)}
}
@media (prefers-reduced-motion:reduce){
  .v-home .timeline .due::before,.v-overview .timeline .due::before{animation:none}
  .v-home > #askSec::before,.v-overview > #sec-courses::before{animation:none}
}

/* 按下狀態 */
.v-home .due .check:active::before,.v-overview .due .check:active::before{background:#C9F7E2}
.v-home .sec > .row,.v-overview .sec > .row{gap:6px 10px}
.v-home .batch,.v-overview .batch,.v-home .due .ctx,.v-overview .due .ctx,.v-home .due .check,.v-overview .due .check{-webkit-tap-highlight-color:transparent}

/* 整合：期限分級 —— 三級：.hot 紅霓虹（≤3 天）＞ .week 琥珀（≤7 天）＞ 一般藍；.past 逾期紅牌；.done 刪除線 */
/* week：琥珀 */
.v-home .timeline .due.week .when,.v-overview .timeline .due.week .when{color:var(--review)}
.v-home .timeline .due.week .when .rel,.v-overview .timeline .due.week .when .rel{background:#FFE2A8;color:#5A2E00}
.v-home .timeline .due.week::before,.v-overview .timeline .due.week::before{background:#E08A00;box-shadow:0 0 0 2px var(--field),0 0 0 3px #FFB43A,0 0 8px #FFB43A}
/* hot：紅色霓虹（規則在上方 .hot 區塊；這裡補節點閃爍） */
.v-home .timeline .due.hot::before,.v-overview .timeline .due.hot::before{background:var(--imp);box-shadow:0 0 0 2px var(--field),0 0 0 3px #FF5C7A,0 0 12px var(--imp);animation:z3hot 1.2s steps(4) infinite}
.v-home .timeline .due.hot .what p,.v-overview .timeline .due.hot .what p{font-weight:500}
/* past：逾期、還要處理 —— 不刪除、不淡化 */
.v-home .timeline .due.past,.v-overview .timeline .due.past{box-shadow:inset 3px 0 0 var(--imp)}
.v-home .timeline .due.past .when,.v-overview .timeline .due.past .when{color:var(--imp);text-decoration:none}
.v-home .timeline .due.past .when::after,.v-overview .timeline .due.past .when::after{content:"逾期";order:3;font-family:var(--pixel);font-size:.7rem;line-height:1.4;padding:1px 6px;color:#fff;background:var(--imp);
  box-shadow:inset -1px -1px rgba(0,0,0,.4),inset 1px 1px rgba(255,255,255,.4);align-self:center}
.v-home .timeline .due.past .when .rel,.v-overview .timeline .due.past .when .rel{background:#FFE3E8;color:var(--imp)}
.v-home .timeline .due.past .what p,.v-overview .timeline .due.past .what p{color:var(--ink);text-decoration:none}
.v-home .timeline .due.past::before,.v-overview .timeline .due.past::before{background:var(--imp);box-shadow:0 0 0 2px var(--field),0 0 0 3px var(--imp);animation:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:12px;height:12px;left:12px}

/* 看全部 */
.v-home .more-due,.v-overview .more-due{min-height:40px;width:100%;justify-content:center;background:var(--chrome);box-shadow:var(--out);margin-top:-6px;font-size:.84rem}
.v-home .more-due::after,.v-overview .more-due::after{content:"▼";font-size:.6rem;margin-left:4px}
.v-home .more-due:active,.v-overview .more-due:active{box-shadow:var(--in)}

/* 手機收緊：讓問這門課／整理紀錄接近平面圖 */
@media (max-width:640px){
  .v-home,.v-overview{row-gap:10px}
  .v-home .sec,.v-overview .sec{gap:8px}
  .v-home .sec-head,.v-overview .sec-head{padding-bottom:4px}
  .v-home .timeline .due,.v-overview .timeline .due{padding:7px 4px 0 32px;gap:0 6px}
  .v-home .timeline .due .when,.v-overview .timeline .due .when{font-size:1.15rem}
  .v-home .timeline .due.next .when,.v-overview .timeline .due.next .when{font-size:1.35rem}
  .v-home .timeline .due .what p,.v-overview .timeline .due .what p{font-size:.92rem;line-height:1.5;margin-top:1px}
  .v-home .timeline .due .ctx,.v-overview .timeline .due .ctx{margin-top:-3px;margin-bottom:-1px}
  .v-home .timeline .due::before,.v-overview .timeline .due::before{top:12px}
  .v-home .timeline .due.next::before,.v-overview .timeline .due.next::before{top:13px}
  .v-home .timeline .due .check,.v-overview .timeline .due .check{margin-top:-4px}
  .v-home .sec > .row,.v-overview .sec > .row{flex-wrap:nowrap}
  .v-home .sec > .row .btn,.v-overview .sec > .row .btn{flex:1 1 0;min-width:0;white-space:normal;line-height:1.25;font-size:.76rem;padding:4px 8px;letter-spacing:0}
  .v-home #askSec .sec-desc{font-size:.76rem;line-height:1.5}
  .v-home #sec-records .batch,.v-overview #sec-courses .batch{min-height:52px;padding:8px 10px 8px 36px}
  .v-home .batch::before,.v-overview .batch::before{top:12px}
}
@keyframes z3hot{
  0%,100%{box-shadow:0 0 0 2px var(--field),0 0 0 3px #FF5C7A,0 0 8px var(--imp)}
  50%{box-shadow:0 0 0 2px var(--field),0 0 0 5px rgba(255,92,122,.6),0 0 18px var(--imp)}
}
@media (prefers-reduced-motion:reduce){.v-home .timeline .due.hot::before,.v-overview .timeline .due.hot::before{animation:none}}

/* ===== 整合 r3 ===== */
/* 6. 首頁手機：課名獨佔一列，下一列「角色・成員數」＋邀請鈕靠右 */
@media (max-width:640px){
  .v-home .intro > .row:first-child > h1{grid-column:1/-1}
  .v-home .intro > .row:nth-child(2){grid-column:1/-1;justify-self:stretch;order:2}
  .v-home .intro > .row:nth-child(2) .btn{margin-left:auto}
  .v-home .intro > .row:first-child > .btn.primary{order:3}
}

/* ===== 整合 r4 ===== */
/* 首頁手機標題區壓縮：課名＋邀請鈕同一列，角色與人數縮成一行小字 */
@media (max-width:640px){
  .v-home{position:relative;row-gap:10px}
  .v-home .intro > .row:first-child > h1{padding-right:112px;min-height:40px}
  .v-home .intro > .row:nth-child(2){margin-top:-8px;min-height:24px}
  .v-home .intro > .row:nth-child(2) .btn{position:absolute;right:0;top:18px;margin:0;min-height:40px}
}

/* ===== 整合 r5 ===== */
/* 「還有 N 天」「已過 N 天」「逾期」是狀態標記，不是按鈕：一律扁平 */
.v-home .timeline .due .when .rel,.v-overview .timeline .due .when .rel,
.v-home .timeline .due.hot .when .rel,.v-overview .timeline .due.hot .when .rel,
.v-home .timeline .due.past .when::after,.v-overview .timeline .due.past .when::after{box-shadow:none;border:1px solid currentColor}
.v-home .timeline .due .when .rel,.v-overview .timeline .due .when .rel{background:transparent}
.v-home .timeline .due.hot .when .rel,.v-overview .timeline .due.hot .when .rel{background:transparent;color:var(--imp)}
.v-home .timeline .due.week .when .rel,.v-overview .timeline .due.week .when .rel{background:transparent;color:#8A4B00}
/* 逾期至少和「下一筆」一樣醒目 */
.v-home .timeline .due.past .when,.v-overview .timeline .due.past .when{font-size:1.3rem}
.v-home .timeline .due.past,.v-overview .timeline .due.past{background:linear-gradient(90deg,rgba(212,0,42,.10),transparent 70%)}
/* 動效克制：只留逾期／3 天內節點的提示，其餘不循環 */
.v-home *,.v-overview *{animation-iteration-count:1}
.v-home .timeline .due.hot::before,.v-overview .timeline .due.hot::before{animation-iteration-count:infinite}

/* ===== 整合 r6 ===== */
.v-home .timeline .due:last-child,.v-overview .timeline .due:last-child{border-bottom:0}
.v-home .due .ctx,.v-overview .due .ctx{font-size:13px}
@media (max-width:640px){
  .v-home > .hud,.v-overview > .hud{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}