/* ============================================================
   OctoFlow Checklist — redesign 2026-08
   由 redesign-2026-08/checklist-prototype.html 移植。

   Live 三版（139 / 288 / 325）係 `post_content` 純 HTML，共用 `apc__*` class，
   而且**完全冇 checkbox** —— 即係而家係「讀」嘅清單。prototype 個核心係「做」：
   逐項剔、剔咗變色、頂部有進度。所以呢層除咗換樣，仲要由 JS 把每個 <li>
   變成可以剔嘅一行（JS 掛咗就打回原形，仍然係一份完整可讀嘅清單）。

   全部規則掛喺 `body.ofwchk-on` 之下，冇 flag 一條都唔生效。
   ============================================================ */

body.ofwchk-on{
  --ofwc2-board:#0B0A08;
  --ofwc2-paper:#F4F2EC;
  --ofwc2-ink:var(--ink);
  --ofwc2-dim:#B3ACA0;
  --ofwc2-amber:#E8A33D;
  --ofwc2-cjk:var(--font-cjk);
  --ofwc2-mono:var(--font-mono);
}

/* 環境：工單夾喺深色板上 */
body.ofwchk-on .site-content,
body.ofwchk-on #content{ background:var(--ofwc2-board); }

/* ── 工單本體 ─────────────────────────────────────── */
body.ofwchk-on .apc{
  /* 原本嗰版冇 box-sizing，padding 加咗喺 max-width 之外 → 實測 1064px 而唔係 980。 */
  box-sizing:border-box;
  position:relative;
  max-width:980px !important;
  margin:clamp(34px,5vw,64px) auto clamp(48px,7vw,88px) !important;
  background:var(--ofwc2-paper);
  color:var(--ofwc2-ink);
  border:2px dashed rgba(242,239,230,.42);   /* 虛線＝工單語言（Kenny 8/8 提議） */
  border-radius:3px;
  box-shadow:0 24px 60px rgba(6,8,7,.55);
  padding:clamp(22px,3vw,38px) clamp(20px,3vw,40px) clamp(28px,4vw,44px) !important;
  font-family:var(--ofwc2-cjk) !important;
}
/* 頂部個夾（teal 電鍍，唔用漸變） */
body.ofwchk-on .apc::before{
  content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:110px;height:34px;background:var(--teal);
  border-radius:6px 6px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(6,8,7,.6);
}
body.ofwchk-on .apc::after{
  content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:46px;height:13px;background:var(--ofwc2-board);border-radius:0 0 4px 4px;
}

/* ── 工單頭（2026-08-08 加）──────────────────────────
   Kenny：「prototype 個 hero 標題同描述冇出，而且標題深色配黑底，睇唔到。」
   查證：`post_content` **一個 h1 都冇** —— 標題係 Astra 出嘅 `.entry-title`，
   render 喺 `.apc` 外面。我把 #content 轉咗深色，佢仍然係深色字 → 隱形。
   同時 prototype 嗰個「工單頭」（深色橫條載住 標籤／標題／說明）亦未做。
   兩件事一次過解決：**由 JS 把 Astra 個標題搬入工單**，同 eyebrow ＋ lede
   一齊砌成工單頭。JS 掛咗嘅 fallback 見下面 .entry-title 嗰條。 */
body.ofwchk-on .ofwchk-head{
  background:var(--ofwc2-board);
  color:var(--ofwc2-paper);
  /* 負 margin 抵銷 .apc 嘅 padding，令深色條去到紙邊（同 tutorial hero 同一招） */
  margin:calc(-1 * clamp(22px,3vw,38px)) calc(-1 * clamp(20px,3vw,40px)) clamp(20px,2.6vw,28px);
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,40px) clamp(16px,2.4vw,22px);
  border-bottom:2px dashed #C4BFB3;
}
body.ofwchk-on .ofwchk-k{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--ofwc2-mono);font-size:14px;letter-spacing:.14em;
  color:var(--teal-glow);font-weight:700;margin-bottom:12px;
}
body.ofwchk-on .ofwchk-k span:last-child{color:var(--ofwc2-dim);font-weight:400}
body.ofwchk-on .ofwchk-head .ofwchk-title{
  margin:0;font-weight:900;line-height:1.15;color:#fff;
  font-size:clamp(24px,3.4vw,34px);
}
body.ofwchk-on .ofwchk-head .ofwchk-lede{
  margin:10px 0 0;color:var(--ofwc2-dim);
  font-size:17px;line-height:1.75;max-width:56ch;
  border:0 !important;padding:0 !important;
}

/* JS 掛咗嘅 fallback：標題留喺原位，但至少要喺深底上面睇得見。 */
body.ofwchk-on .entry-title{color:var(--ofwc2-paper)}

body.ofwchk-on .apc__eyebrow{
  font-family:var(--ofwc2-mono) !important;
  font-size:14px !important;letter-spacing:.14em !important;
  color:#0A5F57 !important;
}
body.ofwchk-on .apc__lede{
  font-size:17px !important;line-height:1.8 !important;color:#3a3e42 !important;
  border-left:3px solid var(--teal) !important;
}
body.ofwchk-on .apc h2{
  font-size:clamp(19px,1.7vw,22px) !important;font-weight:900 !important;
  margin:34px 0 4px !important;padding-top:18px;
  border-top:1px solid #E5E2DA;
}
body.ofwchk-on .apc h2:first-of-type{border-top:0;padding-top:0}
body.ofwchk-on .apc__time{
  font-family:var(--ofwc2-mono) !important;
  font-size:14px !important;color:#5a6065 !important;
}

/* ── 工項：由 JS 換成 label + checkbox ───────────────── */
body.ofwchk-on .apc ul{list-style:none;margin:10px 0 0 !important;padding:0 !important}
body.ofwchk-on .apc li{margin:0 !important;padding:0 !important}

/* 「常見錯處」嗰段（同任何唔係工項嘅 ul）字級對返工單（2026-08-12 Kenny 收貨意見）
   ------------------------------------------------------------------------
   JS 只把「跟喺 h2 段落入面」嗰啲 ul 轉成工項（見 octoflow-checklist.php 個
   「gotchas / foot 入面嗰啲唔掂」註解），所以 gotchas 段嘅 li 冇 `.ofwchk-txt`，
   食唔到上面嗰個 15.5px，跌返品牌 prose 嘅 18px —— 同工單其餘部分打交，
   Kenny 一眼就見到「呢嚿字大過其他」。
   量度：li／strong 18px vs 工項 15.5px。對返 15.5px／lh 1.75。 */
body.ofwchk-on .apc li:not(:has(> .ofwchk-row)),
body.ofwchk-on .apc li:not(:has(> .ofwchk-row)) strong,
body.ofwchk-on .apc li:not(:has(> .ofwchk-row)) code{
  font-size:15.5px;line-height:1.75;
}
body.ofwchk-on .apc li:not(:has(> .ofwchk-row)){
  margin:0 0 10px !important;padding:0 0 0 16px !important;position:relative;
}
body.ofwchk-on .apc li:not(:has(> .ofwchk-row))::before{
  content:"·";position:absolute;left:2px;color:var(--ofwc2-dim,#8a8378);
}

body.ofwchk-on .ofwchk-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;
  align-items:flex-start;
  padding:13px 0;border-bottom:1px solid #EEEDE6;
  cursor:pointer;
}
body.ofwchk-on .apc li:last-child .ofwchk-row{border-bottom:0}
body.ofwchk-on .ofwchk-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;
  /* 格底同紙底要拉開 —— #fff 貼喺 #F4F2EC 上面只差 ~3%，會隱形（8/8 撞過） */
  border:2px solid #8F887C;border-radius:2px;background:#FFFFFF;
  box-shadow:inset 0 1px 2px rgba(10,13,14,.14);
  cursor:pointer;position:relative;
  transition:background .15s ease,border-color .15s ease;
}
body.ofwchk-on .ofwchk-row input[type=checkbox]:hover{border-color:var(--teal)}
body.ofwchk-on .ofwchk-row input[type=checkbox]:checked{background:var(--teal);border-color:var(--teal)}
body.ofwchk-on .ofwchk-row input[type=checkbox]:checked::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1211' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
}
/* `overflow-wrap:anywhere` 係防爆框保險（2026-08-12 Phase 3 量度加）：
   真 320px 量到 139 個 `span.ofwchk-txt@330` 撐到全頁橫捲（scrollWidth=330）。
   成因係工單文字入面有唔斷得開嘅長 token（例如 `/{PAGE_ID}?fields=access_token`）。
   另外兩版清單冇呢類 token 所以量落全綠 —— 即係「三版有兩版乾淨」證明唔到冇事，
   將來加一句新文字就會再爆。所以喺 CSS 層封死，唔靠逐版查文字。 */
body.ofwchk-on .ofwchk-txt{font-size:15.5px;line-height:1.7;color:var(--ofwc2-ink);overflow-wrap:anywhere}
body.ofwchk-on .ofwchk-txt a{color:#0A5F57}
/* 剔咗用顏色表示，唔用刪除線 —— 中文有「一／二／十」，線會穿過字面 */
body.ofwchk-on .ofwchk-row input:checked ~ .ofwchk-txt{color:#8a8378}
body.ofwchk-on .ofwchk-st{
  flex:0 0 auto;font-family:var(--ofwc2-mono);font-size:13px;font-weight:700;
  letter-spacing:.04em;padding:3px 9px;border-radius:2px;white-space:nowrap;
  background:#2C2720;color:var(--ofwc2-amber);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65);
}
body.ofwchk-on .ofwchk-st::before{content:"未完成"}
body.ofwchk-on .ofwchk-row input:checked ~ .ofwchk-st{
  background:#22302e;color:var(--teal-glow);
  box-shadow:inset 0 0 0 1px rgba(20,184,172,.42);
}
body.ofwchk-on .ofwchk-row input:checked ~ .ofwchk-st::before{content:"完成"}

/* ── 進度條（JS 插喺工單頭下面）───────────────────── */
body.ofwchk-on .ofwchk-prog{
  height:4px;background:rgba(232,163,61,.18);
  margin:18px 0 6px;position:relative;overflow:hidden;border-radius:2px;
}
body.ofwchk-on .ofwchk-prog b{
  position:absolute;left:0;top:0;bottom:0;right:0;background:var(--teal);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .35s cubic-bezier(.2,.75,.25,1);
}
body.ofwchk-on .ofwchk-count{
  font-family:var(--ofwc2-mono);font-size:13.5px;color:#5a6065;margin:0 0 4px;
}

/* ── gotchas / 簽收 ──────────────────────────────── */
body.ofwchk-on .apc__gotchas{
  border:1px solid #E5E2DA !important;border-radius:2px;
  background:rgba(232,163,61,.05) !important;
  padding:18px 18px 18px 30px !important;position:relative;
}
body.ofwchk-on .apc__gotchas::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ofwc2-amber);
}
body.ofwchk-on .apc__foot{
  border-top:2px dashed #C4BFB3 !important;
  margin-top:26px !important;padding-top:18px !important;
  color:#5a6065 !important;font-size:14px !important;
}

@media(max-width:560px){
  body.ofwchk-on .apc{padding-left:16px !important;padding-right:16px !important}
  /* 窄屏 .apc 嘅左右 padding 被 override 做 16px，但工單頭嗰個負 margin 仍然係
     clamp 出嚟嘅 20px → 深色條會兩邊各突出 2px（實測 493 vs 紙 489）。跟住改返。 */
  body.ofwchk-on .ofwchk-head{
    margin-left:-16px;margin-right:-16px;
    padding-left:16px;padding-right:16px;
  }
  body.ofwchk-on .ofwchk-row{grid-template-columns:auto 1fr;gap:12px}
  body.ofwchk-on .ofwchk-st{grid-column:2;justify-self:flex-start;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  body.ofwchk-on .ofwchk-prog b{transition:none}
}

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