/* DrumBlocx web — iOS Theme.swift 1:1 port（木紋美術 tokens）*/
/* 數值字體（IBM Plex Mono，自己 host）—— @import 一定要排喺所有規則之前。
   全部載 theme.css 嘅頁面都跟呢一個檔攞 @font-face 同 --mono。 */
@import url('fonts/mono.a23ebada.css');
:root{
  --bg:#141518; --panel:#2D1E0E; --panel2:#3A2716; --line:#5C4730;
  --txt:#F2E7D5; --dim:#A48F76; --accent:#E8A057;
  --rcol:#7A9CC4; --lcol:#E07A6B; --kcol:#6FA97A;
  --wood-hi:#F7C98B; --wood1:#EFAF6B; --wood2:#E29A4E; --wood3:#C97E35;
  --wood-dk:#7E4A1E; --wood-ink:#4A2C12; --wal1:#3A2716; --wal2:#261809;
  --paper:#F6EFDF; --paper-dk:#EDE2CC; --ink:#26201A;
  --g0:#D9A441; --g1:#5E9E97; --g2:#A3789F; --g3:#86A05F;
  --sunken:rgba(45,30,14,.4); --wash:rgba(255,255,255,.025);
  --accent-fill:#E8A057; --kcol-fill:#3F7A4B; --lcol-fill:#A8402F;
  --dial-face:transparent; --dial-track:#3A2716;
  --dial-tick-major:rgba(232,160,87,.8); --dial-tick-minor:rgba(160,141,116,.5);
  color-scheme: dark;
}

/* ===== 淺色 mode（琥珀木）=====
   分工：--accent 係「墨」（跟 mode 變，白底之下要落黑先睇得到）；
        --accent-fill 係「面」（琥珀底配深字，兩個 mode 都唔變）。
   --dial-* 係轉盤（dial.js）嘅「錶面／刻度／未填軌」，屬於「跟 mode」嗰批：
        白底之下錶面要淺、刻度要深，否則深色版嘅零件會跌晒入白色頁面。
        轉盤嘅「木框／琥珀弧／粒掣」唔喺呢度 —— 佢哋直接借 --wood-dk / --accent-fill /
        --wood-hi / --inst-dial-hi，即係材質，兩個 mode 一模一樣。
   「樂器材質」嗰批 token（wood* / wal* / paper* / ink / accent-fill）刻意唔喺呢度重新定義 ——
   Doug 揀琥珀木嘅重點就係中間件工具嘅木紋同紙面兩個 mode 一模一樣。
   深色維持預設：:root 照舊係深色，冇 data-theme 就係深色。*/
html[data-theme="light"]{
  --bg:#FFFFFF; --panel:#FAFAF8; --panel2:#F3F2EF; --line:#E6E3DD;
  --txt:#191817; --dim:#6F6A62; --accent:#A8480F;
  --rcol:#4E6E96; --lcol:#A8402F; --kcol:#3F7A4B;
  --g0:#8A6410; --g1:#2F6F68; --g2:#6E4A6A; --g3:#4F6A32;
  --sunken:#F1EFEA; --wash:#FAFAF8;
  --dial-face:#F6EFDF; --dial-track:#DED5C1;
  --dial-tick-major:rgba(58,39,22,.72); --dial-tick-minor:rgba(58,39,22,.42);
  color-scheme: light;
}

/* ===== P6：材質只留喺樂器入面 =====
   規則：深木／深胡桃只喺樂器（.instr-frame 子樹）入面先保留；樂器以外，淺色 mode 一律用淺色面。
   （原本呢張撥返係全域嘅，令首頁工具卡／Settings 卡／Lessons 卡／彈層喺白底頁面上
     全部仲係近黑木板 —— 就係 Doug 講嗰個「blocks 太深對比背景白色古怪」。）

   ① 樂器入面照舊撥返深色墨：塊底仲係深木（--inst-chip / --inst-rail），
      唔撥返就變黑字寫喺深木上。key 同上面 light block 完全一樣（一邊有另一邊冇 = 漏改）。
   .lenbtn / .undobtn 例外：佢哋借 .walnut 淨係為咗嗰條 inset 邊，
   自己 CSS 有 background:transparent 蓋走個木底（見 independence/index.html），
   即係塊底其實係頁面白底 —— 撥返深色墨就會琥珀字寫喺白底。*/
html[data-theme="light"] .instr-frame :is(.walnut,.sheet,.teach-card,.dc-menu):not(.lenbtn):not(.undobtn){
  --bg:#141518; --panel:#2D1E0E; --panel2:#3A2716; --line:#5C4730;
  --txt:#F2E7D5; --dim:#A48F76; --accent:#E8A057;
  --rcol:#7A9CC4; --lcol:#E07A6B; --kcol:#6FA97A;
  --g0:#D9A441; --g1:#5E9E97; --g2:#A3789F; --g3:#86A05F;
  --sunken:rgba(45,30,14,.4); --wash:rgba(255,255,255,.025);
  --dial-face:transparent; --dial-track:#3A2716;
  --dial-tick-major:rgba(232,160,87,.8); --dial-tick-minor:rgba(160,141,116,.5);
  color-scheme: dark;
}
/* ② 樂器以外：淺色面。米白底 ＋ 髮絲邊 ＋ 柔和陰影（出自 plans/drumblocx_app_light_mockup.html
   「① 琥珀木」嘅 --plate，色值再量過對比度先落）。啲墨唔使撥返，直接用返上面 light block
   嗰套深墨 —— 面淺咗，深墨先讀得到。
   :not(.instr-frame *) 係唯一嘅排除條件：樂器入面嗰啲（.secchip／.pagebar／.lenbtn 等）
   個底由 --inst-chip／--inst-rail 出，本條規則特異度高過佢哋，唔排除就連樂器都一齊撥淺。
   實測：呢個面最暗色停 #FAF4E8 相對亮度 0.909；--dim(#6F6A62) 寫上去 4.90、
   --txt(#191817) 15.5、--accent(#A8480F) 5.33。*/
html[data-theme="light"] :is(.walnut,.sheet,.teach-card,.dc-menu):not(.lenbtn):not(.undobtn):not(.instr-frame *){
  background:linear-gradient(150deg,#FFFDF7,#FAF4E8);
  box-shadow:inset 0 0 0 1px rgba(90,52,16,.16),
             0 1px 2px rgba(80,52,20,.05), 0 6px 18px rgba(80,52,20,.08);
}
/* 教學浮框嘅「1 / 2」進度字：深色寫死咗 rgba(160,141,116,.7)（深木上啱用），
   落到淺色面得 2.03。面唔准調暗 → 調墨。深色一個 px 都唔郁。*/
html[data-theme="light"] .teach-card:not(.instr-frame *) .tprog{color:var(--dim);}
/* ===== 木框樂器（P4）=====
   --frame 係「而家出唔出框」嘅唯一真相：CSS 話事，JS 讀返佢先決定砌乜 DOM
   （見 independence／sixteenth 嘅 framed()）。兩邊唔會各計各數 —— 改下面呢兩行，
   個樣同個 DOM 一齊變。
   · 只喺淺色出：深色本身已經係「暗房入面一件工具」，再加一層框就變兩層框。
   · 只喺 ≥900px 出：390 闊嘅機，一個框左右食 32px、上下再食 32px，個譜蝕唔起。
   上下 padding 刻意窄過左右：16th 版嘅卡係「填滿一屏」倒推返嚟嘅（applyCardScale），
   每多一 px 高度就直接喺卡度扣，左右反而有鬆動位。

   ⚠️ 鐵律：樂器入面唔准用 --accent／--dim。嗰兩隻係「頁面墨」，跟 mode 變；
   寫喺木紋上實測得 1.7–1.8，點都過唔到 4.5。所以樂器自己有一套墨（--inst-*），
   同 --accent-fill／--kcol-fill 一樣係「材質」：兩個 mode 一模一樣，唔准跟 mode 變。
   （theme_contrast_webkit.mjs 嘅 MATERIAL 清單睇住，漏咗一隻就紅。）
   色值出自 plans/drumblocx_app_light_mockup.html 嘅「① 琥珀木」，再逐個量對比度調深／調淺
   到全部 ≥4.5 —— mockup 本身冇審過對比（佢原封嗰套量返係 3.61／1.81／2.24）。*/
:root{
  --frame:0; --frame-pad-x:14px; --frame-pad-y:10px; --well-pad-x:12px; --well-pad-y:8px;
  --inst-ink:#2E1B06;          /* 寫喺木（框／凹槽）同琥珀掣上面嘅深啡墨（mockup --inst-fg 調深）*/
  --inst-chip:#7E4A1E;         /* 未選中控件嘅深木面（＝ --wood-dk 同一隻色，唔係新木紋）*/
  --inst-chip-fg:#F3E4D0;      /* 深木面上嘅奶白字（mockup --chip-fg）*/
  --inst-chip-on:#E8A057;      /* 選中控件嘅琥珀面（＝ --accent-fill 同一隻色）*/
  --inst-chip-on-fg:#2E1B06;   /* 琥珀面上嘅深啡字（mockup --chip-on-fg 調深）*/
  --inst-rail:#7E4A1E;         /* 凹陷條（積木 rail／空 slot）嘅面 */
  --inst-well-1:#B98551;       /* 凹槽中啡木（mockup --well 上停）*/
  --inst-well-2:#CFA06B;       /* 凹槽中啡木（mockup --well 下停）*/
  --inst-line:#5A3410;         /* 樂器入面 chip／控件嘅邊（木上用，唔用頁面嗰隻淺灰 --line）*/
  --inst-dial-hi:rgba(247,201,139,.5); /* 轉盤木框圈嘅高光細線（木紋高光，兩個 mode 一樣）*/
}
@media (min-width:900px){
  html[data-theme="light"]{--frame:1;}
}
/* 框 ＝ .wood-tile 同一條 inset 公式（高光左上、暗影右下），淨係大件啲、圓角大啲。
   --chip-line：樂器入面 chip 嘅邊（木上要深啡，唔用頁面嗰隻淺灰 --line）。*/
.instr-frame{
  background:linear-gradient(135deg,var(--wood1),var(--wood2) 55%,var(--wood3));
  border-radius:18px; padding:var(--frame-pad-y) var(--frame-pad-x);
  box-shadow:inset 2px 2px 0 rgba(247,201,139,.9), inset -2px -2px 0 rgba(126,74,30,.85),
             0 6px 18px rgba(80,52,20,.22);
  --chip-line:var(--inst-line);
}
/* 內凹槽 ＝ 中啡木（mockup body.v-wood 嘅 --well），唔係近黑 ——
   樂器入面有自己一套墨（--inst-*），唔使焗暗個表面去遷就頁面嗰套墨。*/
.instr-well{
  background:linear-gradient(180deg,var(--inst-well-1),var(--inst-well-2));
  border-radius:12px; padding:var(--well-pad-y) var(--well-pad-x);
  box-shadow:inset 0 3px 8px rgba(80,46,14,.45), inset 0 -1px 0 rgba(255,255,255,.22);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; min-height:100%;}
body{background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI",system-ui,sans-serif;
  overflow-x:hidden; user-select:none; -webkit-user-select:none; touch-action:manipulation;}

/* ===== 木紋材質（WoodStyle.swift port）===== */
.wood-tile{
  background:linear-gradient(135deg,var(--wood1),var(--wood2) 55%,var(--wood3));
  border-radius:9px;
  box-shadow:inset 1.5px 1.5px 0 rgba(247,201,139,.9), inset -1.5px -1.5px 0 rgba(126,74,30,.85),
             0 2px 4px rgba(0,0,0,.4);
}
.walnut{
  background:linear-gradient(135deg,var(--wal1),var(--wal2));
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(247,201,139,.14);
}
.paper-inset{
  background:linear-gradient(135deg,var(--paper),var(--paper-dk));
  border-radius:8px;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.85), inset -1.5px -1.5px 0 rgba(140,105,61,.35);
}
.wood-cell{display:inline-block; border-radius:22%;
  background:linear-gradient(135deg,#FFDCA4,var(--wood2));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(126,74,30,.6);}
.wood-cell.dark{background:linear-gradient(135deg,#573A20,var(--wal1));
  box-shadow:inset 1px 1px 0 rgba(247,201,139,.18), inset -1px -1px 0 rgba(0,0,0,.6);}

/* ===== 通用控件 ===== */
button{font-family:inherit;}
.btn{border:0; border-radius:9px; padding:8px 12px; font-size:13px; font-weight:700;
  cursor:pointer; background:var(--panel2); color:var(--dim);}
.btn.accent{color:var(--accent);}
.btn.primary{background:var(--kcol-fill); color:#fff; font-size:17px; font-weight:800;}
.btn.primary.stop{background:var(--lcol-fill);}
.btn.outline-accent{background:transparent; border:1px solid var(--accent); color:var(--accent);}
.btn.outline-red{background:var(--panel2); border:1px solid var(--lcol); color:var(--lcol);}
.btn:disabled{opacity:.4; cursor:default;}

.back-btn{background:var(--panel2); color:var(--accent); border:0; border-radius:10px;
  width:46px; height:36px; font-size:19px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;}

/* 學生頁 ⇄ Creator Studio 身分切換掣（兩邊頂部）*/
.switch-btn{background:var(--panel2); color:var(--accent); border:0; border-radius:10px;
  height:36px; padding:0 12px; font-size:13px; font-weight:700; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;}
.switch-btn[hidden]{display:none;}

/* SegControl */
.seg{display:flex; align-items:center; gap:8px;}
.seg .seg-title{font-size:11px; color:var(--dim);}
.seg-box{display:flex; background:var(--panel2); border-radius:10px; overflow:hidden;
  border:1px solid var(--line); flex:1;}
.seg-box button{border:0; background:transparent; color:var(--dim); font-size:12px; font-weight:600;
  padding:0 8px; min-height:40px; flex:1; cursor:pointer; white-space:nowrap;}
.seg-box button.on{background:var(--accent-fill); color:#111;}

/* ToggleChip */
.toggle-chip{display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
  color:var(--txt); font-size:12px; cursor:pointer; padding:4px 2px;}
.toggle-chip .box{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--dim);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#111;}
.toggle-chip.on .box{background:var(--accent-fill); border-color:var(--accent-fill);}

/* slider */
input[type=range]{accent-color:var(--accent-fill); height:28px;}

/* mini stepper */
.stepper{display:inline-flex; align-items:center; gap:2px; background:var(--panel2);
  border-radius:8px; padding:4px 6px; font-size:11px; color:var(--dim);}
.stepper button{border:0; background:none; color:var(--accent); font-size:16px; font-weight:800;
  width:20px; cursor:pointer; padding:0;}
.stepper .val{color:var(--txt); font-weight:700; font-size:12px; min-width:20px; text-align:center;
  font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* 浮層 */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:80;
  display:flex; align-items:center; justify-content:center;}
.scrim.dark{background:rgba(0,0,0,.55);}
.sheet{background:linear-gradient(135deg,var(--wal1),var(--wal2)); border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(247,201,139,.14), 0 12px 40px rgba(0,0,0,.6); padding:24px;}

/* count-in 大字 */
#countin{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); z-index:70; font-size:150px; font-weight:900; color:var(--accent);
  pointer-events:none; font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* 教學浮框 */
#teachScrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
  display:none; align-items:center; justify-content:center;}
.teach-card{width:min(420px,90vw); padding:24px; text-align:center;
  background:linear-gradient(135deg,var(--wal1),var(--wal2)); border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(247,201,139,.14), 0 12px 40px rgba(0,0,0,.6);}
.teach-card .ticon{font-size:40px;}
.teach-card h3{margin:12px 0 0; font-size:20px; color:var(--txt);}
.teach-card p{margin:14px 0 0; font-size:15px; color:var(--dim); line-height:1.5; white-space:pre-line;}
.teach-card .tprog{margin-top:10px; font-size:11px; color:rgba(160,141,116,.7);
  font-family:var(--mono); font-variant-numeric:tabular-nums;}
.teach-card .trow{display:flex; gap:12px; margin-top:18px;}
.teach-card .trow button{flex:1; min-height:44px; border-radius:10px; font-size:14px; cursor:pointer;}
.teach-card .texit{background:var(--panel2); color:var(--dim); border:1px solid var(--line); font-weight:500;}
.teach-card .tgot{background:var(--accent-fill); color:#111; border:0; font-weight:800;}

/* modal confirm（confirmationDialog 代替品）*/
.confirm-card{width:min(400px,90vw); padding:22px; text-align:center;}
.confirm-card p{color:var(--txt); font-size:14px; line-height:1.5; margin:0 0 18px;}
.confirm-card .crow{display:flex; gap:10px;}
/* R7：兩粒掣全部尺寸都係 42px —— 而呢個 sheet 專門用嚟問破壞性問題（取消訂閱／離開
   免費層／刪 drop／刪帳號），撳錯粒嘅代價最大嗰個位反而係最細嘅目標。44 ＝ HIG 下限。 */
.confirm-card .crow button{flex:1; min-height:44px; border-radius:10px; font-size:14px;
  font-weight:700; cursor:pointer; border:0;}
.confirm-card .cdanger{background:var(--lcol-fill); color:#fff;}
.confirm-card .ccancel{background:var(--panel2); color:var(--txt);}

/* dropdown menu（Menu 代替品）*/
.dc-menu{position:fixed; z-index:95; background:linear-gradient(135deg,var(--wal1),var(--wal2));
  border-radius:12px; box-shadow:inset 0 0 0 1px rgba(247,201,139,.2), 0 10px 30px rgba(0,0,0,.6);
  padding:6px; min-width:190px;}
.dc-menu button{display:flex; width:100%; border:0; background:none; color:var(--txt);
  font-size:14px; padding:10px 12px; border-radius:8px; cursor:pointer; text-align:left; gap:8px; align-items:center;}
.dc-menu button:hover{background:var(--panel2);}
.dc-menu .sep{height:1px; background:var(--line); margin:4px 8px; opacity:.5;}
.dc-menu button .chk{width:16px; color:var(--accent);}

.dim-note{font-size:11px; color:var(--dim);}

/* ===== 法律入口（全站 footer）+ 條款提示（訂閱／開戶前）===== */
.legal-foot{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 16px; padding:18px 12px 0; font-size:11px; text-align:center;}
.legal-foot a{color:var(--dim); text-decoration:none;}
.legal-foot a:hover{color:var(--accent);}
.legal-note{font-size:11px; color:var(--dim); line-height:1.5; margin-top:12px; text-align:center;}
.legal-note a{color:var(--accent);}

/* ===== Drop 譜條（dropstaff_view.js 出嘅 DOM）=====
   學生端 drop feed 同創作者後台 drop 預覽用同一份 DOM，所以樣式都放喺呢度：
   兩邊各寫一份 CSS，創作者見到嘅同訂閱者見到嘅就會慢慢唔同。
   一個 bar 一個 canvas 橫向排，原生捲動（iPad 有慣性）。
   overscroll-behavior-x:contain —— 冇咗佢，iOS 拖到盡頭會觸發返上一頁手勢。 */
.drop-staff{display:flex; overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.drop-staff::-webkit-scrollbar{display:none;}
.drop-staff canvas{flex:0 0 100%; width:100%; height:132px; display:block;
  scroll-snap-align:start;}
/* 提示放喺譜下面自己一行，唔會遮住塊譜；捲到盡頭箭嘴淡走 */
.drop-hint{display:none; align-items:center; justify-content:flex-end; gap:6px;
  padding:5px 2px 0; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums;
  font-family:var(--mono);}
.drop-hint.on{display:flex;}
.drop-hint .arrow{color:var(--accent); font-size:15px; font-weight:800; line-height:1;}
.drop-hint .arrow.done{opacity:.2;}

/* ===== 平板／桌面 ≥521px：共用控件做返 44pt 可撳目標（HIG 最細掂到目標）=====
   手指撳唔係滑鼠篤，13px 字 + 8px padding 出嚟得 32px 高。
   規則全鎖喺 media query 內 —— 手機（≤520px）位緊，一律唔郁。
   range 要連 thumb 一齊放大：淨係加高 track 只會得個殼大，粒掣仲係細粒撳唔郁。 */
@media (min-width:521px){
  .btn{min-height:44px; min-width:44px; padding:10px 16px; font-size:15px;}
  .back-btn{height:44px; font-size:21px;}
  .switch-btn{height:44px; font-size:14px;}
  .seg-box button{min-height:44px; min-width:44px; font-size:14px;}
  input[type=range]{height:44px; -webkit-appearance:none; appearance:none; background:transparent;}
  input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:4px;
    background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line);}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
    width:28px; height:28px; margin-top:-10px; border-radius:50%; background:var(--accent-fill);
    box-shadow:0 2px 4px rgba(0,0,0,.5);}
  input[type=range]::-moz-range-track{height:8px; border-radius:4px; background:var(--panel2);}
  input[type=range]::-moz-range-thumb{width:28px; height:28px; border:0; border-radius:50%;
    background:var(--accent-fill);}
}