/* z6-sheet — 對話框：90 年代系統對話框 × 全像標題列 × 霓虹掃描線遮罩 */

/* ---------- 遮罩 ---------- */
.sheet-bg{
  --sh-bar:54px;                       /* 工作列高度（平面圖） */
  background:
    repeating-linear-gradient(0deg,rgba(124,255,233,.07) 0 1px,transparent 1px 3px),
    radial-gradient(120% 70% at 50% 110%,rgba(43,246,255,.28),transparent 60%),
    radial-gradient(90% 60% at 50% -10%,rgba(196,181,255,.18),transparent 65%),
    rgba(2,16,20,.62);
  animation:sheetFade .16s ease-out;
  overscroll-behavior:contain;
}

/* ---------- 視窗本體 ---------- */
.sheet{
  position:relative;
  gap:12px;
  padding:0 16px;
  min-width:0;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--lo) var(--chrome-2);
  box-shadow:var(--out),0 0 0 1px #0A0C10,10px 12px 0 rgba(0,0,0,.45),0 0 44px -8px rgba(43,246,255,.45);
  line-height:1.6;
  overflow-wrap:anywhere;
}
.sheet > *{flex:none;min-width:0}

/* 全像標題列 32px */
.sheet::before{
  content:"拾訊課堂 ─ 對話框";
  display:flex;align-items:center;gap:8px;
  height:32px;box-sizing:border-box;
  margin:3px -13px 2px;padding:0 10px 0 34px;
  animation:sheetFoil 12s linear infinite;
  color:#0A0C10;font-family:var(--pixel);font-size:.9rem;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 0 -1px 0 rgba(10,12,16,.35);
  position:sticky;top:0;z-index:3;
  /* 左側像素系統圖示 + 掃描線 + 全像膜 */
  background:
    linear-gradient(#7CFFE9,#7CFFE9) 15px 50%/6px 6px no-repeat,
    linear-gradient(var(--lcd),var(--lcd)) 12px 50%/12px 12px no-repeat,
    linear-gradient(#0A0C10,#0A0C10) 10px 50%/16px 16px no-repeat,
    repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),
    var(--foil);
  background-size:6px 6px,12px 12px,16px 16px,auto,300% 100%;
  background-position:15px 50%,12px 50%,10px 50%,0 0,0 0;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
@keyframes sheetFoil{to{background-position:15px 50%,12px 50%,10px 50%,0 0,300% 0}}

/* 依種類換標題（app.js 給的 sheet--{type}） */
.sheet--invite::before{content:"INVITE.EXE ─ 邀請同學"}
.sheet--members::before{content:"MEMBERS.EXE ─ 成員"}
.sheet--account::before{content:"ACCOUNT.SYS ─ 我的帳號"}
.sheet--source::before{content:"SOURCE.TXT ─ 來源原文"}
.sheet--install::before{content:"SETUP.EXE ─ 安裝"}
.sheet--addCourse::before{content:"NEW.EXE ─ 新增課程"}
.sheet--rename::before{content:"RENAME.EXE ─ 改名稱"}
.sheet--batchMore::before{content:"MORE.EXE ─ 更多動作"}
.sheet--confirm::before{content:"CONFIRM ─ 請確認"}
.sheet--danger::before{content:"⚠ 確認 ─ 這個動作無法復原"}
.sheet--danger h2{color:var(--imp)}

/* ---------- 標題列右上角 × （真的能關） ---------- */
.sheet .sheet-x{
  position:sticky;top:-4px;z-index:4;
  align-self:flex-end;flex:none;
  width:40px;height:40px;margin:-50px -10px -2px 0;padding:0;
  display:grid;place-items:center;
  border:0;background:none;cursor:pointer;color:var(--ink);
  font-family:var(--pixel);font-size:1rem;line-height:1;
}
.sheet .sheet-x::before{
  content:"";position:absolute;left:8px;top:9px;width:24px;height:22px;z-index:-1;
  background:var(--chrome);box-shadow:var(--out),0 0 0 1px rgba(10,12,16,.25);
}
.sheet .sheet-x:hover::before{background:var(--chrome-2)}
.sheet .sheet-x:active::before{box-shadow:var(--in)}
.sheet .sheet-x:active{padding:2px 0 0 2px}
.sheet .sheet-x:focus-visible{outline:none}
.sheet .sheet-x:focus-visible::before{outline:1px dotted var(--ink);outline-offset:-5px}
.sheet::before{padding-right:44px}

/* ---------- 文字 ---------- */
.sheet h2{margin:2px 0 0;font-size:1.12rem;line-height:1.45;font-family:var(--pixel);font-weight:400;letter-spacing:.02em}
.sheet > p{margin:0;line-height:1.7}
.sheet .fine{line-height:1.6;font-size:.78rem}
.sheet .field{display:flex;flex-direction:column;gap:6px}
.sheet .field label{font-family:var(--pixel);font-size:.82rem;color:var(--ink-2)}
.sheet .inp,.sheet input[type=text],.sheet select.inp{min-height:44px;font-size:1rem}
.sheet .inp:focus,.sheet select:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}

/* ---------- 按鈕列：固定在對話框底部 ---------- */
.sheet > .row:last-child{
  position:sticky;bottom:0;z-index:2;
  margin:2px -16px 0;padding:10px 16px 12px;
  background:var(--chrome);
  box-shadow:inset 0 1px 0 var(--lo),inset 0 2px 0 var(--hi),0 -10px 12px -10px rgba(10,12,16,.35);
  gap:8px;
}
.sheet > .row:last-child::before{
  /* 底部霓虹細線，讓按鈕列像系統列 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(43,246,255,.55),transparent);
  pointer-events:none;
}
.sheet .row .btn{min-height:44px}
.sheet .row .spacer{flex:1 1 0}
/* 對話框內按鈕一律有斜面，ghost 也是（系統對話框語法） */
.sheet .btn.ghost{background:var(--chrome);box-shadow:var(--out)}
.sheet .btn.ghost:hover{background:var(--chrome-2)}
.sheet .btn.ghost:active{box-shadow:var(--in)}
.sheet .btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-6px}
.sheet .btn.danger{color:var(--imp)}

/* ---------- 邀請 ---------- */
.sheet .linkbox{
  display:flex;gap:6px;align-items:stretch;
  padding:6px;background:var(--lcd);box-shadow:var(--in);
}
.sheet .linkbox input{
  min-height:44px;background:#04161A;color:var(--lcd-ink);
  box-shadow:inset 0 0 0 1px #1E4A46;font-family:var(--mono);font-size:.82rem;
  text-shadow:0 0 6px rgba(124,255,233,.5);
}
.sheet .linkbox input::selection{background:var(--neon);color:#04161A}
.sheet .linkbox input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.sheet .linkbox .btn{flex:none;min-height:44px;min-width:84px}
.sheet .linkbox .btn.done{animation:none;background:var(--lcd);color:#7DFF9E;text-shadow:0 0 8px rgba(125,255,158,.8);box-shadow:var(--in)}
.sheet .linkbox .btn.done::after{content:none}

/* ---------- 成員 ---------- */
.sheet .members{max-height:none;overflow:visible;padding:2px}
.sheet .member{min-height:48px;padding:6px 8px 6px 10px;gap:8px;flex-wrap:nowrap}
.sheet .member .nm{font-size:.98rem}
.sheet .member select{
  min-height:40px;min-width:92px;padding:0 6px;font-size:.86rem;cursor:pointer;
  background:var(--chrome);box-shadow:var(--out);
}
.sheet .member select:active{box-shadow:var(--in)}
.sheet .member .btn.sm{min-height:40px;min-width:56px;padding:0 10px;font-size:.86rem;background:var(--chrome);box-shadow:var(--out)}
.sheet .member .btn.sm:active{box-shadow:var(--in)}
.sheet .member .role{flex:none;padding:3px 8px;font-size:.78rem}
.sheet .member:hover{background:rgba(43,246,255,.06)}

.sheet .row.tools{gap:8px}

/* 危險區：紅色細框＋斜線底 */
.sheet .danger-zone{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;
  padding:10px 12px;
  border:1px solid var(--imp);
  background:repeating-linear-gradient(135deg,rgba(208,16,64,.07) 0 6px,transparent 6px 12px),var(--chrome);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.sheet .danger-zone b{grid-column:1;font-family:var(--pixel);font-weight:400;font-size:.86rem;color:var(--imp);letter-spacing:.06em}
.sheet .danger-zone b::before{content:"⚠ "}
.sheet .danger-zone .fine{grid-column:1;color:var(--ink-2)}
.sheet .danger-zone .btn{grid-column:2;grid-row:1 / span 2;min-height:40px;white-space:nowrap}

/* 更多動作：直排全寬清單 */
.sheet .menu-list{display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--field);box-shadow:var(--in)}
.sheet .menu-list .btn{width:100%;min-height:44px;justify-content:flex-start;text-align:left;padding-left:14px}
.sheet .menu-list .btn.danger{position:relative;margin-top:13px;color:var(--imp)}
.sheet .menu-list .btn.danger::before{content:"";position:absolute;left:-2px;right:-2px;top:-10px;border-top:1px solid var(--lo);box-shadow:0 1px 0 var(--hi)}

/* ---------- 我的帳號：三格液晶額度 ---------- */
.sheet .meter{gap:6px;padding:6px;background:var(--chrome);box-shadow:var(--in)}
.sheet .meter .tile{padding:8px 10px 8px;min-height:92px;justify-content:space-between}
.sheet .meter .tile .lbl{font-size:.7rem;line-height:1.3}
.sheet .meter .tile .num{font-size:2.6rem;line-height:.95}
.sheet .meter .tile .sub{font-size:.7rem}

/* ---------- 來源原文 ---------- */
.sheet .srctext{
  max-height:none;overflow:visible;
  font-size:.98rem;line-height:1.85;padding:12px 14px;
  background:
    repeating-linear-gradient(180deg,transparent 0 calc(1.85em - 1px),rgba(43,120,200,.12) calc(1.85em - 1px) 1.85em) 0 12px/100% auto,
    var(--field);
  box-shadow:var(--in);
}
.sheet .srctext mark{
  background:#FFF27A;color:#0A0C10;outline:0;
  padding:1px 2px;margin:0 -2px;
  box-shadow:0 0 0 1px #0A0C10,0 0 0 3px #FFF27A,0 0 14px 3px rgba(255,92,200,.55);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:sheetMark 1.2s steps(2) 2;
}
@keyframes sheetMark{50%{background:#9DFFD8}}
.sheet .srcimg{display:block;max-width:100%;height:auto;margin:0 auto;padding:4px}
.sheet #srcMedia{min-width:0}
.sheet > .row:not(:last-child){gap:8px}
.sheet #srcMedia .btn{min-height:44px}

/* ---------- 安裝說明 ---------- */
.sheet .install-tip{
  position:relative;padding:12px 14px 12px 48px;line-height:1.7;font-size:.94rem;
  box-shadow:3px 3px 0 rgba(0,0,0,.25);
}
.sheet .install-tip::before{
  content:"i";position:absolute;left:12px;top:12px;width:24px;height:24px;display:grid;place-items:center;
  font-family:var(--pixel);font-weight:700;color:#fff;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8FD0FF,#1F5FD0 70%);box-shadow:0 0 0 1px #0A0C10;
}

/* ---------- 手機：底部滑出 ---------- */
@media (max-width:719px){
  .sheet-bg{
    align-items:flex-end;padding:0;
    padding-bottom:calc(var(--sh-bar) + env(safe-area-inset-bottom,0px));
  }
  .sheet{
    width:100%;max-width:100%;
    max-height:min(80vh,calc(100vh - var(--sh-bar) - env(safe-area-inset-bottom,0px) - 24px));
    max-height:min(80dvh,calc(100dvh - var(--sh-bar) - env(safe-area-inset-bottom,0px) - 24px));
    padding:0 14px;
    padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));
    box-shadow:var(--out),0 0 0 1px #0A0C10,0 -12px 40px -6px rgba(43,246,255,.4);
    animation:sheetUp .22s cubic-bezier(.2,.8,.2,1);
  }
  .sheet::before{margin:3px -11px 2px}
  .sheet > .row:last-child{margin:2px -14px 0;padding:8px 14px 10px}
  .sheet > .row:last-child .btn{flex:1 1 auto;padding-left:12px;padding-right:12px}
  .sheet > .row:last-child .spacer{display:none}
  .sheet .meter .tile{padding:8px 8px}
  .sheet .danger-zone{grid-template-columns:minmax(0,1fr)}
  .sheet .danger-zone .btn{grid-column:1;grid-row:auto;width:100%;min-height:44px;margin-top:6px}
  .sheet .row.tools .btn{flex:1 1 auto}
  .sheet .sheet-x{margin-right:-8px}
  .sheet .meter .tile .num{font-size:2.3rem}
}

/* ---------- 電腦：置中 640 ---------- */
@media (min-width:720px){
  .sheet-bg{padding:24px 24px calc(var(--sh-bar) + 16px)}
  .sheet{width:640px;max-width:100%;max-height:min(80vh,620px);animation:sheetPop .18s cubic-bezier(.2,.8,.2,1)}
  .sheet .row .btn{min-height:40px}
  .sheet .linkbox input,.sheet .linkbox .btn{min-height:40px}
  .sheet .inp,.sheet input[type=text],.sheet select.inp{min-height:40px}
  .sheet > .row:last-child{padding:10px 16px 12px}
  /* 沒有 spacer 的按鈕列照系統對話框慣例靠右，主要按鈕在前 */
  .sheet > .row:last-child:not(:has(.spacer)){justify-content:flex-end}
  .sheet > .row:last-child .btn{min-width:88px}
}

@keyframes sheetFade{from{opacity:0}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}}
@keyframes sheetPop{from{transform:translateY(8px) scale(.97);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .sheet-bg,.sheet,.sheet::before,.sheet .srctext mark{animation:none!important;transition:none!important}
}

/* 整合：複製成功狀態 */
.sheet .linkbox .btn.done{background:var(--ok);color:#fff;text-shadow:none}

/* ===== 整合 r4：切換課程清單 ===== */
.sheet--courses .menu-list .btn{justify-content:space-between}
.sheet--courses .menu-list .btn small{font-family:var(--pixel);font-size:.72rem;color:var(--ink-2)}
.sheet--courses .menu-list .btn.current{box-shadow:var(--in);background:repeating-conic-gradient(var(--chrome-2) 0 25%,#E9EBEE 0 50%) 0 0/4px 4px}
.sheet--courses .menu-list .btn.current::after{content:"目前";font-family:var(--pixel);font-size:.7rem;color:var(--sel);margin-left:8px}

/* 修正（iOS）：鍵盤打開時對話框跟著「可見區域」走，不會被鍵盤蓋住。--vv-h / --vv-top 由 app.js 依 visualViewport 設定 */
@media (max-width:719px){
  .sheet-bg{top:var(--vv-top,0px);bottom:auto;height:var(--vv-h,100%)}
  html.kb-open .sheet-bg{padding-bottom:8px}
  html.kb-open .sheet{max-height:calc(var(--vv-h,100dvh) - 16px)}
}