/* ==========================================================================
   /classic 與 /classic/manual 專屬樣式

   只放兩件既有元件庫沒有的東西：
     1. 示意圖（products/classic/figures.py 產生的 inline SVG）的外框與說明文字
     2. 產品頁 hero 底下那行版本／平台資訊

   其餘一律沿用 components.css、pages/basic.css、pages/intro.css、
   pages/manual.css。這裡不重新定義任何顏色或間距，全部走 tokens。
   ========================================================================== */

/* --------------------------------------------------------------------------
   示意圖
   -------------------------------------------------------------------------- */
.fig {
  margin: var(--sp-8) 0;
}

.fig svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  /* SVG 自己畫了底色，但圓角處會露出頁面底色，補一層一樣的色避免缺角 */
  background: var(--bg-surface);
}

.fig figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relax);
  color: var(--text-lo);
  text-align: center;
  max-width: 66ch;
  margin-inline: auto;
}

/* 手冊內文裡的圖不置中說明，跟左側文字對齊比較好讀 */
.docs-main .fig {
  margin: var(--sp-6) 0 var(--sp-8);
}

.docs-main .fig figcaption {
  text-align: left;
  margin-inline: 0;
}

/* pages/manual.css 在 ≤1024px 把 .docs 改成單欄 grid（grid-template-columns: 1fr）。
   grid 項目的 min-width 預設是 auto＝min-content，而本頁的示意圖（下面的
   min-width: 560px）與三欄散文表都有最小寬度，會把那一軌撐得比視窗還寬——
   結果不是「圖自己捲」，而是<strong>整頁</strong>可以左右拉，文字被切在螢幕外。

   給兩個 grid 項目 min-width: 0，軌道就不再被內容最小寬度綁架，
   該捲的元素（.fig、.settings-table-wrap）會自己捲。
   只寫在這支 CSS 裡，不動共用的 manual.css。 */
@media (max-width: 1024px) {
  .docs > .sidebar,
  .docs > .docs-main {
    min-width: 0;
  }
}

/* 圖裡的字在窄螢幕上會縮到看不清楚。
   與其讓它糊掉，不如給一個最小寬度並允許橫向捲動——
   捲動條只出現在圖本身，頁面 body 不會跟著能左右拉。 */
@media (max-width: 640px) {
  .fig {
    overflow-x: auto;
    /* 捲動容器本身不要吃掉圓角 */
    border-radius: var(--r-lg);
  }

  .fig svg {
    min-width: 560px;
  }

  .fig figcaption {
    /* figcaption 在捲動容器內，要跟著回到左邊 */
    position: sticky;
    left: 0;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   散文表
   pages/manual.css 的 .settings-table 把前兩欄設成等寬字 + white-space:nowrap，
   那是為「欄1＝設定名、欄2＝預設值」的參數表設計的。
   手冊裡另有一種三欄都是整句的表（疑難排解、自動行為、介面總覽），
   套上 nowrap 會把最後一欄整個推到可視範圍外，只剩橫向捲軸才找得到。
   -------------------------------------------------------------------------- */
.settings-table--text td:first-child,
.settings-table--text td:nth-child(2) {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  white-space: normal;
}

.settings-table--text td:first-child { color: var(--text-hi); }
.settings-table--text td:nth-child(2) { color: var(--text-mid); }

/* 前兩欄給個下限，避免瀏覽器把它們壓成一字一行。
   窄螢幕反而要拿掉：寧可讓文字換行，也不要逼使用者左右捲表格。 */
@media (min-width: 641px) {
  .settings-table--text td:first-child  { min-width: 9em; }
  .settings-table--text td:nth-child(2) { min-width: 12em; }
}

/* 欄位裡的 <code> 仍要維持等寬 */
.settings-table--text td code { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   時間軸（「一個晚上大概長這樣」）
   長得像 pages/download.css 的 .steps，但那支 CSS 這頁沒載，
   為了一個區塊去載整頁下載中心的樣式不划算，所以自己畫一份。
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  padding-left: var(--sp-10);
  counter-reset: tl;
}

/* 串起所有項目的縱線 */
.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--accent-line) 0%,
    var(--line) 60%,
    transparent 100%
  );
}

.timeline li {
  position: relative;
  padding-bottom: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-mid);
  line-height: var(--lh-relax);
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  counter-increment: tl;
  content: counter(tl);
  position: absolute;
  left: calc(var(--sp-10) * -1);
  top: -2px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-overlay);
  border: 1px solid var(--line-strong);
  color: var(--text-hi);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  font-family: var(--font-mono);
}

.timeline strong {
  display: block;
  color: var(--text-hi);
  margin-bottom: var(--sp-1);
}

/* --------------------------------------------------------------------------
   產品頁 hero 底下的一行資訊
   -------------------------------------------------------------------------- */
.hero-meta {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-lo);
}

.hero-meta .icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: var(--sp-2);
  color: var(--ok);
}