/* ============================================================================
   layout.css —— 「戰情室」那一套的排版骨架
   ----------------------------------------------------------------------------
   來源:reznikov-engineering.com(2026-08-29 實地量的版式數據)。

   🔴 這份只搬「排版手法」,不搬它的字體與字級。
      字體字級一律照 skills/_視覺語言.md 第三節(2026-08-29 定案:思源宋體 + Montserrat),
      色票照第一節,動效照 signal.css。這裡不定義任何一個新的顏色或字級。

   搬進來的七個手法(每一條後面是量到的原始數字):
   ① 兩層字級,中間刻意空掉        標題 129/86/67/64/38px → 內文 20/17/16/14px,中間沒有東西
   ② 字距與字級成反比              大標負字距 -3.24px;小標籤正字距 = 字級的 20~30%
   ③ 小標籤前面掛一個符號          // › ★ ● ↑ ——最便宜的識別技巧
   ④ 卡片之間只留 1px 縫           gap:1px + 底色透出來當分隔線,不畫 border
   ⑤ 區塊節奏固定 140px            每個 section 上下都是 140px,不因內容多寡改
   ⑥ 背景全部透明,一片到底        section 一律 background:transparent,只有最外層有底
   ⑦ 邊框一律是帶透明度的語意色    1px solid + 10%~70% alpha,沒有一條灰色或白色的框
   ============================================================================ */

:root{
  /* 版式 —— 這幾個數字就是這一套的骨架 */
  --shell:    1320px;   /* 主容器 */
  --shell-wide: 1640px; /* hero 用的寬容器 */
  --shell-narrow: 900px;/* 長文用的窄容器 */
  --gutter:   clamp(20px, 5vw, 72px);
  --rhythm:   clamp(72px, 10vw, 140px);   /* 區塊上下的固定節奏 */
  --hair:     1px;                        /* 卡片之間那道縫 */

  /* 字距:照字級比例換算,不要每個地方自己填一個數字 */
  --ls-display: -.03em;   /* 大標題:負的,越大越緊 */
  --ls-body:    normal;
  --ls-label:   .22em;    /* 小標籤:正的,量到的是字級的 20~30% */
}

/* ---------------------------------------------------------------------------
   ⑥ 一片背景貫穿到底 —— 這是「帶入感」的來源
   section 一律不上底色,深淺變化只靠最外層那兩層 radial 光暈
   --------------------------------------------------------------------------- */
.warroom{
  position: relative;
  background:
    radial-gradient(1200px 700px at 78% 12%,  var(--cyan-glow),  transparent 60%),
    radial-gradient(900px 600px at 12% 68%,   var(--amber-glow), transparent 60%),
    var(--void);
  color: var(--ink);
  overflow-x: hidden;
}
/* 星點:用兩層 radial 平鋪出來,不用圖檔也不進渲染迴圈 */
.warroom::before{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, var(--ink), transparent),
    radial-gradient(1px 1px   at 70% 18%, var(--ink), transparent),
    radial-gradient(1.4px 1.4px at 44% 76%, var(--ink), transparent),
    radial-gradient(1px 1px   at 88% 62%, var(--ink), transparent),
    radial-gradient(1px 1px   at 8%  88%, var(--ink), transparent);
  background-size: 420px 420px, 300px 300px, 520px 520px, 360px 360px, 280px 280px;
}
.warroom > *{ position: relative; z-index: 1; }

/* ⑤ 區塊節奏固定,不因內容多寡改 */
.wr-section{ padding: var(--rhythm) 0; background: transparent; }
.wr-shell  { max-width: var(--shell);        margin-inline: auto; padding-inline: var(--gutter); }
.wr-shell--wide  { max-width: var(--shell-wide); }
.wr-shell--narrow{ max-width: var(--shell-narrow); }

/* ---------------------------------------------------------------------------
   ①② 字級:兩層,中間空的
   數值照 skills/_視覺語言.md 第三節那張表,這裡只補「中間不要有東西」這條紀律
   --------------------------------------------------------------------------- */
.wr-display{                       /* 只給 hero 那一句 */
  font-family:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  font-size: clamp(38px, 5.6vw, 62px);
  font-weight: 700; line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
.wr-h2{
  font-family:'Noto Serif TC','Source Han Serif TC',Georgia,serif;
  font-size: clamp(26px, 3.4vw, 33px);
  font-weight: 700; line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.wr-body{
  font-family:'Noto Serif TC','Source Han Serif TC',Georgia,serif;
  font-size: 17px; font-weight: 400; line-height: 1.75;
  letter-spacing: var(--ls-body);
  color: var(--mut);
  max-width: 62ch;                 /* 一行不要超過這個,長行讀不下去 */
  margin: 0 0 14px;
}
/* 🔴 中間那一格刻意留白:沒有 22px / 24px 的「中標題」。
   要分層就用小標籤,不要新增一個介於兩者之間的字級 —— 那會把對比吃掉。 */

/* ---------------------------------------------------------------------------
   ②③ 小標籤 —— 這一套的招牌,全大寫 + 大字距 + 前面掛一個符號
   --------------------------------------------------------------------------- */
.wr-label{
  font-family:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: .6em;
}
.wr-label--amber{ color: var(--amber); }
.wr-label--mut  { color: var(--mut); }
/* ③ 前綴符號:用 ::before,內容從 data-mark 來,預設是 // */
.wr-label::before{ content: attr(data-mark); opacity: .8; }
.wr-label:not([data-mark])::before{ content: "//"; }

/* ---------------------------------------------------------------------------
   ④ 卡片格:格與格之間只有 1px,底色從縫裡透出來
   —— 不是每張卡各畫一個 border(那樣相鄰處會變成 2px 而且圓角對不齊)
   --------------------------------------------------------------------------- */
.wr-cards{
  display: grid; gap: var(--hair);
  background: var(--edge);
  border: var(--hair) solid var(--edge);
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.wr-card{
  background: var(--deep);
  padding: 26px 24px 30px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .3s var(--ease-out);
}
.wr-card:hover{ background: var(--panel); }
.wr-card__title{
  font-family:'Montserrat',-apple-system,sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.wr-card__title span{ color: var(--cyan); font-size: 11px; }
.wr-card__desc{ font-size: 13.5px; line-height: 1.65; color: var(--mut); margin: 0; }

/* ---------------------------------------------------------------------------
   ⑦ 邊框:一律 1px + 帶透明度的語意色,沒有灰框也沒有白框
   --------------------------------------------------------------------------- */
.wr-frame      { border: var(--hair) solid var(--cyan-line); }
.wr-frame--amber{ border: var(--hair) solid var(--amber-line); }
.wr-rule       { height: var(--hair); background: var(--edge); border: 0; margin: 0; }

/* HUD 角標:右上角那疊「標籤 + 數值」 */
.wr-stats{ display: flex; flex-direction: column; gap: 14px; text-align: right; }
.wr-stat__k{
  font-family:'Montserrat',sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--mut); display: block;
}
.wr-stat__v{
  font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; color: var(--cyan);
  font-variant-numeric: tabular-nums;      /* 數字要對齊 */
}

/* 檔案卡:上下兩條資訊列夾住內容,像一份被歸檔的東西 */
.wr-file{ border: var(--hair) solid var(--amber-line); background: var(--deep); }
.wr-file__bar{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 14px; background: var(--panel);
  font-family:'Montserrat',sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.wr-file__body{ padding: 22px; }

/* 資料橫條:標籤 + 一條進度 + 數值,一行講完一件事 */
.wr-bars{ display: flex; flex-direction: column; gap: 16px; }
.wr-bar{ display: grid; grid-template-columns: 120px 1fr 56px; gap: 14px; align-items: center; }
.wr-bar__k{
  font-family:'Montserrat',sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mut);
}
.wr-bar__track{ display: block; height: 3px; background: var(--edge); position: relative; }
/* 🔴 track 與 fill 都必須 display:block —— 它們是 <span>,而 inline 元素吃不到 height,
   漏了這一行的話四條進度會長得一模一樣,看起來像「資料還沒載入」(2026-08-29 截圖抓到的)。 */
.wr-bar__fill { display: block; height: 100%; background: var(--cyan); width: var(--pct, 50%); }
.wr-bar--amber .wr-bar__fill{ background: var(--amber); }
.wr-bar--off  .wr-bar__fill{ background: var(--slate); opacity: .45; }
.wr-bar__v{
  font-family:'Montserrat',sans-serif; font-size: 12px; font-weight: 700;
  color: var(--ink); text-align: right; font-variant-numeric: tabular-nums;
}

/* 兩欄:量到的是 584+584 / gap 128,換算成比例寫 */
.wr-two{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 128px); align-items: center; }

@media (max-width: 900px){
  .wr-cards{ grid-template-columns: 1fr; }
  .wr-two  { grid-template-columns: 1fr; }
  .wr-bar  { grid-template-columns: 92px 1fr 48px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================================
   分析頁的三個元件(2026-08-31 加)
   ----------------------------------------------------------------------------
   原型是 outputs/analysis/2026-08-31-技能觸發器/index.html —— 使用者看到那一頁說
   「這個網頁這樣子做出來的形式實在是太棒了,你以後就用這樣子的形式下去做」。

   三個都吃既有的手法④(卡片之間只留 1px 縫,底色透出來當分隔線),
   一個新顏色都沒有加。⚠ 那頁目前還帶著自己的一份定義,之後併過來就可以刪掉。

   什麼時候用:**你手上有一組「別人的數字 vs 我們的數字」,或一套「照著做的步驟」時。**
   純敘述的段落不要硬塞進來 —— 那會變成把文章切成格子。
   ============================================================================ */

/* ① 比分:一欄一題,每題底下是兩三行「誰 · 多少」。
      🔴 數字的顏色是語意不是裝飾:灰=別人的、青=我們的、橘=贏了或缺口。 */
.wr-score{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hair); background:var(--edge) }
.wr-score > div{ background:var(--void); padding:30px 26px 26px }
.wr-score .k{
  font-family:'Montserrat',sans-serif; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mut);
}
.wr-score .k::before{ content:"\25C7\00a0"; color:var(--amber) }
.wr-score .q{ margin:14px 0 20px; font-size:16px; color:var(--ink); min-height:3.4em }
.wr-score .row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px solid var(--edge);
}
.wr-score .row span{ font-size:13.5px; color:var(--mut) }
.wr-score .row em{
  font-family:'Montserrat',sans-serif; font-style:normal;
  font-size:25px; font-weight:700; letter-spacing:-.02em;
}
.wr-score .them em{ color:var(--slate) }
.wr-score .us   em{ color:var(--cyan) }
.wr-score .us.win em{ color:var(--amber) }

/* ② 步驟:左邊一個大編號,右邊標題 + 說明 + 一枚標籤。
      標籤那一格是這個元件的重點 —— 它回答「這一步我們現在有沒有」,
      沒有那一枚的話這就只是一份別人的清單。 */
.wr-steps{ display:grid; gap:var(--hair); background:var(--edge); margin:0; padding:0 }
.wr-steps > li{
  background:var(--void); list-style:none; padding:24px 28px;
  display:grid; grid-template-columns:58px 1fr; gap:8px 20px; align-items:baseline;
}
.wr-steps .no{
  font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.2em; color:var(--amber);
}
.wr-steps h3{ margin:0; font-size:19px; font-weight:600; color:var(--ink) }
.wr-steps p{ grid-column:2; margin:6px 0 0; font-size:15.5px; color:var(--mut) }
.wr-steps .tag{
  grid-column:2; margin:12px 0 0; display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 12px; border:1px solid var(--cyan-line);
  color:var(--cyan); width:max-content;
}
.wr-steps .tag.gap{ border-color:var(--amber-line); color:var(--amber) }

/* ①-b 比分的「單一數字」版(2026-09-01 補)。
   🔴 為什麼補:既有的分析頁一直在寫 `.wr-score__k` / `.wr-score__v` 這組 class,
   而**全庫從來沒有定義過它們**(當天 grep 過 `outputs/templates/` 與 `jarvis/stations/_base.css`,
   零命中)。結果那些頁面的數字跟標籤一樣大 —— 而「數字要跳出來」正是這個元件存在的理由。
   上面那組(`.k` / `.q` / `.row`)是「一題兩三行、誰對誰」的比分;
   這一組是「一格一個數字」的簡版。**兩組共用同一個外框,不重複定義格線。**
   ⚠ 只用既有色票變數,一個新顏色都沒加(色票的唯一真相來源仍是 `skills/_視覺語言.md`)。 */
.wr-score__k{
  font-family:'Montserrat',sans-serif; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mut);
}
.wr-score__k::before{ content:"\25C7\00a0"; color:var(--amber) }
.wr-score__v{
  font-family:'Montserrat',sans-serif; font-size:34px; font-weight:700;
  letter-spacing:-.02em; color:var(--cyan); margin-top:14px; line-height:1.15;
}

/* ③ 引言:整頁只留給那一句你希望三個月後被記得的話。一頁最多一個。 */
.wr-quote{
  margin:0; padding:26px 30px; border-left:2px solid var(--amber);
  background:color-mix(in oklch, var(--amber) 6%, transparent);
}
.wr-quote p{ margin:0; font-size:17.5px; color:var(--ink) }
.wr-quote cite{ display:block; margin-top:12px; font-style:normal; font-size:13px; color:var(--mut) }

@media (max-width:900px){
  .wr-score{ grid-template-columns:1fr }
  .wr-steps > li{ grid-template-columns:1fr }
  .wr-steps p, .wr-steps .tag{ grid-column:1 }
}