/* ============================================================
   OctoFlow Tutorial Layout — redesign 2026-08
   由 redesign-2026-08/tutorial-prototype.html 移植。

   同 prototype 嘅分別（同埋點解）：
   · prototype 嘅正文係我哋自己寫嘅 HTML；live 呢三版係幾十個原生 Elementor
     widget，所以呢度**唔會**去逐個 widget 重新定型（改極都改唔完，而且會同
     Elementor 自己嘅 style 打交）。呢層只做三件事：兩欄殼、側欄目錄、紙本環境。
   · 內文本身嘅字體／間距一律**唔郁** —— Kenny 2026-08-08 對 tutorial 嘅原話係
     「內文本身好，唔准改文案」，排版亦同理，唔應該喺呢層搞。
   · 全部規則掛喺 `body.ofwt-on` 之下，冇 flag 一條都唔生效。
   ============================================================ */

body.ofwt-on{
  --ofwt-board:#0B0A08;
  --ofwt-flap:#211D17;
  --ofwt-edge:rgba(242,239,230,.14);
  --ofwt-paint:#F2EFE6;
  --ofwt-dim:#B3ACA0;
  --ofwt-cjk:var(--font-cjk);
  --ofwt-mono:var(--font-mono);
}

/* 環境：手冊擺喺深色工作枱上（同 blog 小冊子同一個世界） */
body.ofwt-on .site-content,
body.ofwt-on #content{
  background:var(--ofwt-board);
}

/* ── 兩欄殼（由 JS 加 .ofwt）─────────────────────────
   側欄有下限，唔會好似第一版 tutorial prototype 咁被擠成一條窄柱。 */
body.ofwt-on .ofwt{
  display:grid;
  grid-template-columns:minmax(200px,240px) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  max-width:1240px;margin:0 auto;
  padding:clamp(20px,3vw,40px) clamp(14px,3vw,32px) clamp(48px,7vw,88px);
  align-items:start;
}
body.ofwt-on .ofwt__body{min-width:0}

/* ── 側欄目錄 ─────────────────────────────────────── */
body.ofwt-on .ofwt__toc{
  position:sticky;top:96px;align-self:start;
  max-height:calc(100vh - 130px);overflow:auto;
  padding-right:4px;
  font-family:var(--ofwt-cjk);
}
body.ofwt-on .ofwt__k{
  font-family:var(--ofwt-mono);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ofwt-dim);margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(242,239,230,.12);
}
body.ofwt-on .ofwt__toc ol{list-style:none;margin:0;padding:0;counter-reset:ofwt}
body.ofwt-on .ofwt__toc li{counter-increment:ofwt;border-bottom:1px solid rgba(242,239,230,.06)}
body.ofwt-on .ofwt__toc a{
  display:flex;gap:10px;padding:9px 0;
  color:var(--ofwt-dim);text-decoration:none;
  font-size:14.5px;line-height:1.55;
  transition:color .15s ease;
}
body.ofwt-on .ofwt__toc a::before{
  content:counter(ofwt,decimal-leading-zero);
  font-family:var(--ofwt-mono);font-size:13px;
  color:var(--amber,#E8A33D);flex:0 0 auto;min-width:2ch;
}
body.ofwt-on .ofwt__toc a:hover{color:var(--teal-glow)}
/* 你而家喺呢一段 */
body.ofwt-on .ofwt__toc a.is-cur{color:#fff}
body.ofwt-on .ofwt__toc a.is-cur::before{color:var(--teal)}

/* 內聯嗰份目錄（側欄已經有）—— 收埋。
   ⚠️ 用 class 唔用 #oc-toc{display:none}，因為 JS 掛咗嗰陣佢一定要照樣睇得見。 */
body.ofwt-on .ofwt-hide{display:none}

/* ── 手冊紙本：內文整體坐喺一張淺色紙上 ─────────────── */
body.ofwt-on .ofwt__body{
  background:var(--paper,#F4F2EC);
  border:1px solid var(--ofwt-edge);
  border-radius:3px;
  box-shadow:0 6px 12px rgba(6,8,7,.4);   /* blur ≤12px（§0a）*/
  overflow:hidden;
}

@media(max-width:920px){
  /* 窄屏：側欄唔再 sticky，攤平擺喺正文上面 */
  body.ofwt-on .ofwt{grid-template-columns:1fr;padding-top:18px}
  body.ofwt-on .ofwt__toc{
    position:static;max-height:none;overflow:visible;
    padding-bottom:18px;
  }
  body.ofwt-on .ofwt__toc ol{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
}
@media(max-width:560px){
  body.ofwt-on .ofwt__toc ol{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  body.ofwt-on .ofwt__toc a{transition:none}
}

/* ============================================================
   2026-08-08 Kenny 第一輪 tutorial 意見
   「FAQ 同 CTA 貼死喺個 div 邊」「跟返 prototype」「prototype 個 hero 好啲」
   「『→ 完整 Meta API 教學』嗰條佔咗成行闊，而且淺到睇唔到」
   ============================================================ */

/* ① 內文要有紙邊 —— prototype 係 .book__body{padding:20-32px / 22-36px / 28-40px}。
   之前呢層淨係畀咗張紙，冇畀邊位，所以段落（尤其冇自帶 padding 嗰啲 section，
   例如 FAQ 同 CTA）由左到右貼死。 */
body.ofwt-on .ofwt__body{
  padding:clamp(18px,2.6vw,32px) clamp(20px,3vw,36px) clamp(26px,4vw,40px);
}

/* ② 第一段當手冊書名頁（prototype .book__head）：多啲上下留白 ＋ 一條分隔線 */
body.ofwt-on .ofwt__body > .elementor-section:first-child{
  padding-bottom:clamp(16px,2.4vw,26px);
  border-bottom:1px solid #E5E2DA;
  margin-bottom:clamp(16px,2.4vw,26px);
}

/* ③ 「延伸閱讀」callout（.oc-tut，全站 11 處）
   〔第一版錯咗兩樣，兩樣都係量錯位置先睇唔到〕
   ① 我加咗 teal 底色，但**嗰個 section 本身已經有淺啡底**（`rgb(237,233,223)`）
      → 變成「綠盒入面再套個啡盒」。而家唔再加底色同外框，淨係留左邊一條 teal 標記，
      個盒交返畀 section 自己。
   ② link 我只寫咗 `.oc-tut a{color:…}`，量出嚟都係深 teal —— **但實際睇到嘅字
      喺入面個 `<strong>` 度，佢自己係白色**，所以畫面仍然係白字。
      量 `<a>` 唔代表量到讀者見到嗰隻色。下面連 strong 一齊指定。 */
body.ofwt-on .ofwt__body .oc-tut{
  position:relative;
  max-width:66ch;
  margin:18px 0;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--teal);
}
body.ofwt-on .ofwt__body .oc-tut p{
  margin:0;color:#2a2f33;font-size:15.5px;line-height:1.8;
}
body.ofwt-on .ofwt__body .oc-tut a,
body.ofwt-on .ofwt__body .oc-tut a strong,
body.ofwt-on .ofwt__body .oc-tut a *{
  color:#0A5F57;text-decoration:none;
}
body.ofwt-on .ofwt__body .oc-tut a{
  border-bottom:1px solid rgba(10,95,87,.4);
}
body.ofwt-on .ofwt__body .oc-tut a:hover,
body.ofwt-on .ofwt__body .oc-tut a:hover strong,
body.ofwt-on .ofwt__body .oc-tut a:hover *{
  color:var(--teal-deep,#0E8F86);
}

/* ④ FAQ —— 跟 prototype：髮絲線分隔、粗標題、右邊 +／−、開住左邊出 teal 直線。
   用 Elementor 自己嘅 accordion markup，唔重寫結構（佢個開合 JS 唔郁）。 */
body.ofwt-on .ofwt__body .elementor-accordion{
  max-width:72ch;
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-accordion-item{
  border:0;border-top:1px solid #E5E2DA;
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-accordion-item:last-child{
  border-bottom:1px solid #E5E2DA;
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-tab-title{
  background:transparent;border:0;
  padding:15px 0;
  font-weight:700;font-size:15.5px;line-height:1.6;color:var(--ink);
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-tab-title.elementor-active{
  color:#0A5F57;
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-accordion-icon{
  color:#6B7280;
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{
  color:var(--teal);
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-tab-content{
  background:transparent;
  border:0;
  /* padding 用 !important —— Elementor 自己嗰條規則 specificity 高過我，
     唔加就唔會生效，文字會貼返左邊（2026-08-08 踩過）。 */
  padding:2px 0 18px 16px !important;
  position:relative;
  color:#3a3e42;font-size:15px;line-height:1.8;
}
/* 開住嗰條：左邊 teal 標記。
   ⚠️ 兩輪先啱：
   ① 第一版用 ::before ＋ padding 推開文字 → padding 被 Elementor 蓋過，字踩上條線。
   ② 第二版改 border-left，重疊係解決咗，但 border 一定同內容框等高，
      所以條線由頂拉到底，**貼到落面條分隔線度**（Kenny：「太長、太貼底線」）。
   而家：padding 保住 !important（重疊由佢擋），條線改回 ::before 但**明確收頭收尾**
   —— 頂留 6px、底留 26px，同下面條 hairline 分得開。 */
body.ofwt-on .ofwt__body .elementor-accordion .elementor-tab-content.elementor-active::before{
  content:"";position:absolute;left:0;
  top:6px;bottom:26px;width:3px;border-radius:2px;
  background:var(--teal);
}


@media(max-width:560px){
  body.ofwt-on .ofwt__body{padding-left:16px;padding-right:16px}
  body.ofwt-on .ofwt__body .oc-tut{padding-left:24px}
}

/* ============================================================
   2026-08-08 Kenny 第二輪 tutorial 意見 —— 三樣都係同一個根因
   內文由原本 1140px 收窄到 892px（讓位畀側欄），所以**當年照 1140 排嘅多欄
   section 全部被壓成窄柱**：`// 運作概覽` 5 欄 × 156px、CTA 2 欄 491/327。
   窄柱令中文一行得幾個字，睇落就係「變咗直向」。
   ============================================================ */

/* ⑤ 多欄 section 按欄數重新排 ────────────────────────────
   Elementor 用 inline `width:%` 排欄，喺 892px 底下唔會自己散。
   做法：容器准許 wrap，再按欄數畀唔同策略（用 :nth-last-child 數欄，唔靠 :has）。 */
body.ofwt-on .ofwt__body .elementor-container{flex-wrap:wrap}

/* 2 欄 / 3 欄（例如 CTA：文案 ＋ email 表單）→ 各佔一行全闊。
   Kenny：「表單被壓成直條，不如換行做肥啲。」 */
body.ofwt-on .ofwt__body .elementor-container > .elementor-column:first-child:nth-last-child(2),
body.ofwt-on .ofwt__body .elementor-container > .elementor-column:first-child:nth-last-child(2) ~ .elementor-column,
body.ofwt-on .ofwt__body .elementor-container > .elementor-column:first-child:nth-last-child(3),
body.ofwt-on .ofwt__body .elementor-container > .elementor-column:first-child:nth-last-child(3) ~ .elementor-column{
  width:100% !important;max-width:100% !important;flex:0 0 100% !important;
}

/* 4 欄以上（例如 01-05 步驟行）→ 唔好一柱一行（太長），改為每行放得幾多得幾多，
   每欄下限 220px，剩低空間平均分。818px 之下即係一行 3 個。 */
body.ofwt-on .ofwt__body .elementor-container > .elementor-column:first-child:nth-last-child(n+4),
body.ofwt-on .ofwt__body .elementor-container > .elementor-column:first-child:nth-last-child(n+4) ~ .elementor-column{
  width:auto !important;flex:1 1 220px !important;max-width:100% !important;
}

/* ⑥ Hero 深色底要去到紙邊 ──────────────────────────────
   Kenny：「hero 深色底冇去到內容全闊，好核突。」
   實測：深色 block 818px、紙 892px，兩邊各縮入 37px（＝我加嘅紙邊 padding）。
   深色 section 應該係**滿版**先似書名頁，所以用負 margin 抵銷紙邊。 */
body.ofwt-on .ofwt__body > .elementor-section:first-child{
  margin-left:calc(-1 * clamp(20px,3vw,36px));
  margin-right:calc(-1 * clamp(20px,3vw,36px));
  padding-left:clamp(20px,3vw,36px);
  padding-right:clamp(20px,3vw,36px);
  margin-top:calc(-1 * clamp(18px,2.6vw,32px));
  padding-top:clamp(22px,3vw,34px);
  border-bottom:0;   /* 滿版深色本身已經係分隔，唔使再加線 */
}

/* ⑦ FAQ 開合圖示跟返 prototype 嘅 ＋／−（Elementor 預設出 ×） */
body.ofwt-on .ofwt__body .elementor-accordion .elementor-accordion-icon i,
body.ofwt-on .ofwt__body .elementor-accordion .elementor-accordion-icon svg{display:none}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-accordion-icon::after{
  content:"+";font-family:var(--ofwt-mono);font-size:18px;line-height:1;color:#6B7280;
}
body.ofwt-on .ofwt__body .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon::after{
  content:"−";color:var(--teal);
}

/* ── 版心根因修正（2026-08-11）───────────────────────────────
   Kenny 8/11 收貨：第 6 項（290）「闊度太窄／冇跟 prototype」。
   量度（`measure_layout.py --el`，1440px）揪出真身 **唔係** 呢個檔嘅數字寫錯，
   而係 **Astra 每頁容器設定唔同**：
     · 已收貨嗰批（250 教學 · 100／324）`ast-site-content-layout=full-width-container`
       → `.ast-container` max-width:100% → 版心真係跟到本檔設定
     · 被投訴嗰批（290）留咗 `default`
       → `.ast-container` 被 Astra 夾到 1240（清單頁再疊 site-overrides 個 980）
         ＋ 20px padding，本檔嘅 max-width 撐唔闊個窄 parent
   量到嘅實數：.ofwt 得 1200px、內文 779px；已收貨嘅 250／324 = 1240px／819px（差 40px）
   **點解修 CSS 唔修逐頁 meta**：per-page meta 喺 repo 度睇唔到、每開一版新頁就要
   記得再設一次 —— 即係一定會腐爛（呢個 drift 本身就係咁嚟嘅）。喺 surface CSS
   中和一次，全部現有同將來嘅 教學 頁一齊啱。
   ⚠️ 唔用 `!important`（契約已經嫌 132 個太多）—— 靠 `#content` 個 id ＋
   多一個 class 贏過 Astra／site-overrides 嗰兩條同分規則。 */
body.ofwt-on #content .ast-container{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

/* ── CTA 深色帶要出到文章卡邊（2026-08-11）───────────────────────────
   🔴 Kenny 8/11：「the tutorial page cta also not close to the border」。
   量到：`.art2-cta` 只有 818.8px，而文章卡 `.ofwt__body` 係 892.8px ——
   因為 CTA 係卡嘅子元素，被卡自己嗰 `clamp(20px,3vw,36px)` 橫向 padding 內縮，
   所以深色帶四邊都留住一圈奶白，望落似冇對齊。
   做法 = 負 margin 抵銷卡 padding，再喺 CTA 自己補返同一個 padding（字唔會貼邊）。
   ✅ 呢度用負 margin 係安全嘅：`.ofwt__body` 有 `overflow:hidden`，凸出部分會被卡剪掉，
      唔會像 magnet.css 註解嗰個案咁整出橫向爆框（嗰個父層冇 overflow:hidden）。
   最後一節仲要抵銷卡底 padding，深色帶才會真正坐到卡底。 */
body.ofwt-on .ofwt__body .art2-cta{
  margin-left:calc(-1 * clamp(20px,3vw,36px));
  margin-right:calc(-1 * clamp(20px,3vw,36px));
  padding-left:clamp(20px,3vw,36px);
  padding-right:clamp(20px,3vw,36px);
}
body.ofwt-on .ofwt__body > .art2-cta:last-child{
  margin-bottom:calc(-1 * clamp(26px,4vw,40px));
}

/* 表格喺窄螢幕要自己捲，唔准靜靜雞切走內容（2026-08-12）
   -----------------------------------------------------
   真 320px 量到 `table@376`，而 `horizontalScroll=false` —— 即係頁面唔會橫捲，
   張表**被切走咗一截而且冇任何提示**。呢個比爆框更差：讀者唔知自己睇漏咗嘢。
   `display:block` 令 table 變成可以自己 overflow 嘅盒；thead/tbody 仍然靠
   anonymous table box 排版，所以欄位對齊唔會散。*/
body.ofwt-on .ofwt__body table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}