/* V1 圖解視窗框架、分頁、期限時間軸、照片牆（負責：V1 agent）— 版位依 docs/vis/FLOORPLAN.md
   語法：灰色斜面子視窗＋全像膜標題列（同「工具箱」）；分頁是舊系統凸起頁籤；圖面是白色凹陷繪圖區，
   時間軸上方用液晶讀數列（未來感），照片是幻燈片框。 */

/* ========== 視窗 ========== */
.v-batch #sec-vis{gap:0}
.vis-win{
  position:relative;background:var(--chrome);padding:3px;
  box-shadow:var(--out),5px 6px 0 rgba(0,0,0,.22);
}
.vis-title{
  position:relative;display:flex;align-items:center;gap:7px;height:28px;padding:0 8px 0 6px;
  background:var(--foil);background-size:300% 100%;animation:foil 14s linear infinite;color:#0A0C10;overflow:hidden;
}
.vis-title::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px)}
.vis-title b{font-family:var(--pixel);font-weight:400;font-size:.92rem;letter-spacing:.06em;white-space:nowrap}
.vis-title span{margin-left:auto;font-family:var(--pixel);font-size:.72rem;letter-spacing:.04em;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 小圖示：液晶底上的三根霓虹長條 */
.vis-ico{
  width:16px;height:16px;flex:none;background:#0A0C10;box-shadow:inset 0 0 0 1px #0A0C10;position:relative;
  background-image:
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon-2),var(--neon-2)),
    linear-gradient(#FFF27A,#FFF27A);
  background-size:3px 6px,3px 10px,3px 8px;background-position:3px 10px,7px 6px,11px 8px;background-repeat:no-repeat;
}

/* ========== 分頁列：凸起頁籤，選中的和下方面板相連 ========== */
.vis-tabs{
  display:flex;align-items:flex-end;gap:0;height:44px;margin:6px 3px 0;padding:0 2px 0 0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  /* 面板上緣的亮線（被選中頁籤蓋掉＝相連） */
  background:linear-gradient(var(--hi),var(--hi)) 0 100%/100% 1px no-repeat;
}
.vis-tabs::-webkit-scrollbar{display:none}
.vis-tab{
  position:relative;isolation:isolate;flex:none;height:42px;min-width:44px;max-width:10.5em;padding:6px 12px 0;margin:0 -1px 0 0;
  border:0;background:none;cursor:pointer;scroll-snap-align:start;
  font-family:var(--pixel);font-size:.8rem;letter-spacing:.03em;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 未選：較矮、和面板之間留一條亮線 */
.vis-tab::before{
  content:"";position:absolute;left:0;right:0;top:6px;bottom:1px;z-index:-1;background:#BCC0C6;
  box-shadow:inset 1px 1px var(--hi),inset -1px 0 var(--dk),inset -2px 0 var(--lo);
}
.vis-tab:hover{color:var(--ink)}
.vis-tab:hover::before{background:var(--chrome-2)}
.vis-tab:active::before{top:8px}
/* 選中：較高、蓋過亮線，底色與面板一致；上緣一條霓虹 */
.vis-tab[aria-selected="true"]{z-index:2;color:var(--ink);padding-top:2px;cursor:default}
.vis-tab[aria-selected="true"]::before{
  top:0;bottom:0;left:-2px;right:-2px;background:var(--chrome);
  box-shadow:inset 1px 1px var(--hi),inset 2px 2px var(--chrome-2),inset -1px 0 var(--dk),inset -2px 0 var(--lo),inset 0 3px 0 -1px var(--neon);
}
.vis-tab[aria-selected="true"]::after{
  content:"";position:absolute;left:8px;right:8px;bottom:9px;height:1px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px);opacity:0;
}
.vis-tab:focus-visible{outline:none}
.vis-tab:focus-visible::after{opacity:.7}
.vis-tab:first-child[aria-selected="true"]::before{left:0}

/* 只有一個分頁：不放按鈕，只顯示這張圖的標題 */
.vis-cap{display:flex;align-items:flex-end;height:34px;margin:4px 3px 0;padding:0 4px 4px;border-bottom:1px solid var(--lo);box-shadow:0 1px 0 var(--hi)}
.vis-cap h3{font-family:var(--pixel);font-size:.88rem;letter-spacing:.04em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vis-cap h3::before{content:"▸ ";color:var(--neon-2)}

/* ========== 面板＋圖面 ========== */
.vis-pane{
  margin:0 0 0;padding:5px 3px 6px;background:var(--chrome);
  box-shadow:inset 1px 0 var(--hi),inset -1px -1px var(--dk),inset -2px -2px var(--lo);
}
.vis-cap + .vis-pane{box-shadow:none;margin-top:2px;padding-bottom:3px}
.vis-body{
  position:relative;min-height:176px;max-height:240px;overflow:auto;padding:8px;color:var(--lcd-ink);
  background:
    repeating-linear-gradient(0deg,rgba(124,255,233,.04) 0 1px,transparent 1px 3px),
    linear-gradient(rgba(43,246,255,.07) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg,rgba(43,246,255,.07) 1px,transparent 1px) 0 0/16px 16px,
    var(--lcd);
  box-shadow:var(--in);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2A5C60 var(--lcd);
}
/* AI 圖（V2）自己有底與內距：填滿圖面 */
.vis-body.vis-chart{padding:0;background:var(--lcd);box-shadow:none}
.vis-body.vis-chart > .chart{min-height:176px}
.vis-pane.nosrc .vis-body.vis-chart > .chart{min-height:208px}
.vis-pane.nosrc .vis-body{min-height:208px}

/* ========== 出處列 ========== */
.vis-src{display:flex;align-items:center;gap:4px;height:32px;margin-top:3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.vis-src::-webkit-scrollbar{display:none}
.vis-src-lbl{flex:none;font-family:var(--pixel);font-size:.72rem;color:var(--ink-2);letter-spacing:.06em;padding:0 2px 0 3px}
.vis-sbtn{
  flex:0 1 auto;min-width:0;max-width:14em;height:30px;padding:0 10px;border:0;background:var(--chrome);box-shadow:var(--out);cursor:pointer;
  font-family:var(--pixel);font-size:max(.76rem,12.5px);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vis-sbtn b{font-weight:400;color:var(--sel)}
.vis-sbtn:hover{background:var(--chrome-2)}
.vis-sbtn:active{box-shadow:var(--in);padding:1px 9px 0 11px}
.vis-src.plain{gap:6px}
.vis-src-txt{font-family:var(--pixel);font-size:.76rem;color:var(--ink-2);white-space:nowrap}

/* ========== 期限時間軸 ========== */
.vis-due{padding:6px 6px 4px}
.tl{position:relative;min-width:0;font-family:var(--pixel)}
.tl .t-imp{--c:var(--imp)}
.tl .t-hw{--c:var(--notes)}
.tl .t-etc{--c:#7A838E}
/* 液晶讀數列：下一個期限 */
.tl-read{
  position:absolute;left:0;right:0;top:0;height:22px;display:flex;align-items:center;gap:6px;padding:0 8px;
  background:#0B1E24;box-shadow:inset 0 0 0 1px rgba(124,255,233,.25);
  color:var(--lcd-ink);font-size:.78rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;
  text-shadow:0 0 6px rgba(124,255,233,.7);
}
.tl-read .k{font-family:var(--lcdf);font-size:1rem;letter-spacing:.08em;color:var(--neon-2);text-shadow:0 0 6px rgba(255,79,216,.7)}
.tl-read .cd{margin-left:auto;font-size:.74rem;padding:0 6px;color:#0A0C10;text-shadow:none;background:var(--neon)}
.tl-read .cd.t-imp{background:#FF6B86}
.tl-read .cd.t-hw{background:#8FB2FF}
/* 已過去的區段：淡斜線 */
.tl-past{position:absolute;left:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(124,255,233,.08) 0 4px,transparent 4px 8px)}
/* 日期尺 */
.tl-axis{
  position:absolute;left:0;right:0;height:9px;margin-top:-4px;
  background:
    repeating-linear-gradient(90deg,rgba(124,255,233,.55) 0 1px,transparent 1px 8px) 0 0/100% 4px no-repeat,
    linear-gradient(var(--lcd-ink),var(--lcd-ink)) 0 4px/100% 2px no-repeat;
  filter:drop-shadow(0 0 3px rgba(124,255,233,.6));
}
.tl-axis::after{content:"";position:absolute;right:-1px;top:0;border:4.5px solid transparent;border-left:7px solid var(--lcd-ink);border-right:0;transform:translateX(100%) translateX(-6px)}
/* 壓縮記號 ≈ */
.tl-brk{position:absolute;left:var(--x);width:9px;height:14px;margin:-7px 0 0 -4px;background:var(--lcd);
  box-shadow:-2px 0 0 var(--lcd),2px 0 0 var(--lcd);transform:skewX(-18deg);
  border-left:1.5px solid var(--lcd-ink);border-right:1.5px solid var(--lcd-ink)}
/* 今天 */
.tl-now{position:absolute;left:var(--x);bottom:0;width:0;border-left:2px dashed var(--neon-2);margin-left:-1px;filter:drop-shadow(0 0 3px var(--neon-2))}
.tl-today{
  position:absolute;height:20px;line-height:20px;width:var(--w);text-align:center;font-size:.74rem;letter-spacing:.04em;
  left:clamp(0px,calc(var(--x) - var(--w) / 2),calc(100% - var(--w)));
  background:var(--neon-2);color:#0A0C10;
  box-shadow:0 0 10px rgba(255,79,216,.6);z-index:2;
}
/* 事項：標記＋引線＋標籤（顏色依類型；形狀也不同：考試菱形、作業方塊、其他圓點） */
.tl-dot{position:absolute;left:var(--x);width:11px;height:11px;margin:-5.5px 0 0 calc(-5.5px + var(--o,0px));z-index:3;
  background:var(--c);box-shadow:0 0 0 1.5px var(--lcd),0 0 0 2.5px #E8FFFB,0 0 10px 2px var(--c)}
.tl-dot.t-imp{transform:rotate(45deg) scale(.92)}
.tl-dot.t-etc{border-radius:50%}
.tl-lead{position:absolute;left:var(--x);width:0;border-left:1px dashed var(--lc,#9AA3AD);z-index:1}
.tl-lead.t-imp{--lc:#FF6B86}
.tl-lead.t-hw{--lc:#8FB2FF}
.tl-lead.is-past,.tl-lead.is-done{--lc:#5E7175}
.tl-lbl{
  position:absolute;height:20px;line-height:20px;width:var(--w);padding:0 6px;z-index:2;text-align:center;white-space:nowrap;overflow:hidden;
  left:clamp(0px,calc(var(--x) - var(--w) / 2),calc(100% - var(--w)));
  font-size:12px;letter-spacing:0;color:#fff;background:var(--c);
  box-shadow:inset -1px -1px rgba(0,0,0,.35),inset 1px 1px rgba(255,255,255,.35),0 0 10px -2px var(--c);
}
/* 已完成／已過期：淡化成灰 */
.tl .is-past,.tl .is-done{--c:#46555A}
.tl-lbl.is-past,.tl-lbl.is-done{color:#A9C2C0;box-shadow:inset 0 0 0 1px #5E7175}
.tl-dot.is-past,.tl-dot.is-done{box-shadow:0 0 0 1.5px var(--lcd),0 0 0 2.5px #6F8588}

/* ========== 照片 ========== */
.vis-pics{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:8px 8px 4px}
.vis-hint{margin:0;font-family:var(--pixel);font-size:.74rem;color:#9FD9CF;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-hint b{font-weight:400;font-family:var(--lcdf);font-size:1.1rem;color:var(--neon);margin-right:2px;text-shadow:0 0 6px rgba(43,246,255,.8)}
.vis-pics-row{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.vis-pic{
  flex:none;width:108px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 5px 2px;border:0;cursor:pointer;
  background:var(--chrome);box-shadow:var(--out);scroll-snap-align:start;color:var(--ink);
}
.vis-pic-fr{
  position:relative;display:block;width:96px;height:96px;overflow:hidden;box-shadow:var(--in);
  /* 載入前：像素抖動底 */
  background:repeating-conic-gradient(#C3C7CD 0 25%,#D5D8DC 0 50%) 0 0/8px 8px;
}
.vis-pic-fr img{display:block;width:100%;height:100%;object-fit:cover;font-family:var(--pixel);font-size:.7rem;color:var(--ink-2)}
.vis-pic-fr img:not([src]){visibility:hidden}
.vis-pic-fr i{position:absolute;left:2px;top:2px;font-style:normal;font-family:var(--lcdf);font-size:.95rem;line-height:1;padding:2px 4px 1px;
  background:var(--lcd);color:var(--lcd-ink);text-shadow:0 0 4px rgba(124,255,233,.8)}
.vis-pic-nm{display:block;width:96px;font-family:var(--pixel);font-size:.72rem;line-height:20px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-pic:hover .vis-pic-nm,.vis-pic:focus-visible .vis-pic-nm{background:var(--sel);color:#fff}
.vis-pic:focus-visible{outline:1px dotted var(--ink);outline-offset:2px}
.vis-pic:active{box-shadow:var(--in)}
.vis-pic:active .vis-pic-fr{transform:translate(1px,1px)}

/* ========== 版位 ========== */
@media (min-width:900px){
  .v-batch > #sec-vis{grid-column:1/3}
  .vis-tab{font-size:.84rem;padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .vis-title{animation:none}
}

/* 整合修正：出處按鈕至少 32px 高（硬性規定）；課程異動改琥珀色，和考試紅分開；大螢幕分頁可較寬 */
.vis-src{height:34px;margin-top:2px}
.vis-sbtn{height:32px}
.tl .t-chg{--c:#C77700}
.tl-read .cd.t-chg{background:#FFC24A}
.tl-dot.t-chg{transform:rotate(45deg) scale(.92)}
.tl-lead.t-chg{--lc:#FFC24A}
@media (min-width:900px){.vis-tab{max-width:16em}}