/* ============================================================
   codudo 首頁「痛點」problem.css
   五個後台（各自的名字、帳號欄、密碼一個點一個點打出來、帳單）
   → 一筆圓相把五個圈起來 → 收成一點 → 落成 ○• ，旁邊一張說明圖：一個地方裝了什麼（不是登入框，不能點）。
   預設（沒有 JS、關掉動態、列印）：五個框 → 一條線 → ○• ＋那張說明圖，直接排出來，一個不少。
   problem.js 跑起來才加 .is-live：五個跟一個疊在同一格，畫布蓋在上面寫那一筆。
   守 DESIGN.md 第 2 章：顏色、字級只用 :root 的變數；圓角只有 0 或 var(--r)；切版用 1px 線；
   只動畫化 transform / opacity / clip-path（全部由 problem.js 逐格寫，不靠 CSS transition）。
   ============================================================ */

/* 畫布左右會多伸出一截（墨的暈），在段落邊上剪掉，頁面不會多出橫向捲動 */
#problem{overflow-x:clip}

/* ---------- 前言 ---------- */
.ink-pb{margin-top:var(--s5)}
.ink-pb-lead{margin-top:0}

/* ---------- 舞台 ---------- */
.ink-pb-stage{position:relative;margin-top:var(--s4)}
.ink-pb-cv{display:none}

/* ---------- 五個後台：細線畫的五張登入畫面 ---------- */
.ink-pb-five{list-style:none;display:flex;gap:14px;align-items:flex-start}
/* 高度故意不對齊：五家公司、五個樣子 */
.ink-pb-card{position:relative;flex:1 1 0;min-width:0;border:1px solid var(--line);background:var(--ink-0);
  padding-bottom:16px;font-family:var(--f-mono);line-height:1.5}
.ink-pb-card:nth-child(2){margin-top:26px}
.ink-pb-card:nth-child(3){margin-top:6px}
.ink-pb-card:nth-child(4){margin-top:34px}
.ink-pb-card:nth-child(5){margin-top:14px}

/* 視窗的頂條：英文小標＋三顆空心小圓（每一家都是另一個網站） */
.ink-pb-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--line-soft);font-size:var(--t-tag);letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper-35);white-space:nowrap;overflow:hidden}
.ink-pb-bar i{flex:none;width:23px;height:5px;
  background:radial-gradient(circle at 2.5px 2.5px,var(--line-22) 1.6px,transparent 2.2px) 0 0/9px 5px repeat-x}
.ink-pb-name{padding:14px 14px 2px;font-family:var(--f-serif);font-weight:900;font-size:var(--t-lead);
  line-height:1.3;color:var(--paper)}

/* 欄位：上面一行小標，下面一個細線框 */
.ink-pb-f{padding:8px 14px 0}
.ink-pb-f .k{display:block;font-size:var(--t-tag);letter-spacing:.18em;color:var(--paper-35);margin-bottom:4px}
.ink-pb-f .v{position:relative;display:block;border:1px solid var(--line);padding:4px 9px;
  font-size:var(--t-note);color:var(--paper-60);white-space:nowrap;overflow:hidden}
.ink-pb-f .v i{display:inline-block;font-style:normal;vertical-align:top}
.ink-pb-f .v.pw{color:var(--paper);letter-spacing:.14em}
.ink-pb-f .v.is-f{border-color:var(--line-30)}
/* 打字的游標（problem.js 才會放進來） */
.ink-pb-f .v .c{position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:var(--paper);opacity:0}

.ink-pb-x{padding:12px 14px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* 每一家的「登入」都長得不一樣：方的、圓的、中文、英文 */
.ink-pb-btn{display:inline-block;border:1px solid var(--line-22);padding:3px 14px;font-size:var(--t-note);
  color:var(--paper-60);white-space:nowrap}
.ink-pb-btn.pill{border-radius:var(--r)}
.ink-pb-forgot{font-size:var(--t-note);color:var(--paper-35);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ink-pb-warn{font-size:var(--t-note);color:var(--paper);gap:6px}
.ink-pb-warn::before{content:"×";color:var(--paper-60)}
.ink-pb-warn span{white-space:nowrap}   /* 窄的時候從逗號後面換行，不會剩一個「次」掉下去 */
.ink-pb-bill{margin:14px 14px 0;padding:10px 0 0;border-top:1px solid var(--line-soft);justify-content:space-between;
  font-size:var(--t-note);gap:6px}
.ink-pb-bill span{color:var(--paper-35)}
.ink-pb-bill b{font-weight:400;color:var(--paper-60);white-space:nowrap}

/* ---------- 往下：一條細線（只在靜態版面出現） ---------- */
.ink-pb-to{width:1px;height:var(--s5);margin:var(--s3) auto;
  background:linear-gradient(var(--line),var(--paper-60))}

/* ---------- 一個：○• ＋一張說明圖（一個地方裝了什麼） ----------
   這是配圖，不是登入框：不是連結、沒有按鈕、沒有像按鈕的東西（不要藥丸、不要實心白塊），游標也不變手指。
   使用者：「我這只是在介紹，不是叫使用者在那個地方就登入」。
   每一項跟引導流程的勾選同一種記號：做好的 ○•，還沒做好的只有灰色的 ○ ＋即將推出（第 2 章第 5 條） */
.ink-pb-one{display:flex;align-items:center;justify-content:center;gap:var(--s5)}
.ink-pb-mark{--cd-size:112px;flex:none}
.ink-pb-box{display:block;width:min(380px,100%);border-left:1px solid var(--line-22);
  padding:4px 0 4px 26px;color:var(--paper);font-family:var(--f-sans);line-height:1.5;cursor:default}
.ink-pb-box > span{display:block}
.ink-pb-box > .ink-pb-box-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.ink-pb-box-hd b{font-size:var(--t-lead);font-weight:600}
.ink-pb-box-hd span{font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.3em;color:var(--paper-35)}
/* 一項：左邊 ○•，右邊名字（白）＋一行灰字 */
.ink-pb-box > .ink-pb-box-i{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:10px 0 0}
.ink-pb-box-i b{min-width:0;font-size:var(--t-body);font-weight:700;color:var(--paper)}
.ink-pb-box-i > span:last-child{grid-column:2;min-width:0;font-size:var(--t-body);color:var(--paper-60)}
.ink-pb-box-i b .ink-soon{font-weight:400}
.ink-pb-ck{--m:24px;position:relative;grid-row:1 / span 2;display:block;width:calc(var(--m) * 1.3);height:var(--m)}
.ink-pb-ck svg{position:absolute;left:0;top:0;width:var(--m);height:100%;fill:var(--paper);overflow:visible}
.ink-pb-ck i{position:absolute;right:0;bottom:calc(var(--m) * .1);display:block;width:calc(var(--m) * .2);height:calc(var(--m) * .2);
  border-radius:var(--r);background:var(--paper);transform-origin:50% 100%}
.ink-pb-box-i.is-soon .ink-pb-ck svg{fill:var(--paper-35)}
.ink-pb-box-i.is-soon b{color:var(--paper-60)}

/* ---------- 收成一個：一句話 ---------- */
.ink-pb-out{margin:var(--s4) auto 0;max-width:760px;text-align:center;font-family:var(--f-serif);
  font-size:var(--t-step);font-weight:700;line-height:1.6;color:var(--paper-60)}
.ink-pb-out b{font-weight:900;color:var(--paper)}
.ink-pb-out .ink-soon{font-weight:400}

/* ---------- 動起來（problem.js 加 .is-live）：五個跟一個疊在同一格 ---------- */
.ink-pb.is-live .ink-pb-stage{display:grid;align-items:center}
.ink-pb.is-live .ink-pb-five,.ink-pb.is-live .ink-pb-one{grid-area:1/1;min-width:0}
.ink-pb.is-live .ink-pb-to{display:none}
.ink-pb.is-live .ink-pb-cv{display:block;position:absolute;left:0;width:100%;pointer-events:none;z-index:3}
.ink-pb.is-live .ink-pb-card,.ink-pb.is-live .ink-pb-one > *{will-change:transform,opacity}
.ink-pb.is-live .ink-pb-mark .cd-ring,.ink-pb.is-live .ink-pb-mark .cd-dot{animation:none}

/* ---------- 窄一點：五張排成兩欄（2＋2＋1，最後一張置中），左右錯開一點；每張都完整看得到 ----------
   踩過：疊成一疊的話下面四張只剩碎片（boss@、×、75%），打字也只看得到最上面那張 */
@media (max-width:860px){
  .ink-pb-five{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;width:100%;max-width:560px;margin:0 auto}
  .ink-pb-card,.ink-pb-card:nth-child(n){margin:0;padding-bottom:12px}
  .ink-pb-card:nth-child(2),.ink-pb-card:nth-child(4){margin-top:22px}
  .ink-pb-card:nth-child(5){grid-column:1/-1;justify-self:center;width:calc(50% - 6px);margin-top:4px}
  /* 只收掉純裝飾的「登入」鈕；帳號、密碼、帳單、錯誤訊息、忘記密碼都留著 */
  .ink-pb-act,.ink-pb-btn{display:none}
  .ink-pb-bar{padding:7px 10px;letter-spacing:.22em}
  .ink-pb-name{padding:12px 10px 0}
  .ink-pb-f{padding:6px 10px 0}
  .ink-pb-f .v{padding:3px 8px}
  .ink-pb-f .v .c{left:8px;top:5px;bottom:5px}
  .ink-pb-x{padding:10px 10px 0;gap:6px}
  .ink-pb-bill{margin:10px 10px 0;padding:8px 0 0}
  .ink-pb-warn{row-gap:0}
  .ink-pb-box{width:min(340px,100%);padding-left:20px}
  .ink-pb-one{flex-direction:column;gap:var(--s3)}
  .ink-pb-mark{--cd-size:88px}
  .ink-pb-out{font-size:var(--t-lead);text-align:left}
}

/* ---------- 列印：全部攤開 ---------- */
/* problem.js 在 beforeprint 會先把逐格寫的樣式全部拿掉；這裡是第二道保險（沒收到 beforeprint 的環境） */
@media print{
  .ink-pb-cv,.ink-pb-f .v .c{display:none!important}
  .ink-pb-card,.ink-pb-one > *,.ink-pb-box > *,.ink-pb-ck i,.ink-pb-out,.ink-pb-f .v i,.ink-pb-x,.ink-pb-mark .cd-ring,.ink-pb-mark .cd-dot{
    opacity:1!important;transform:none!important;clip-path:none!important}
}