/* ═══════════════════════════════════════════════════════════════════════════
   等公務園＋學習平臺 — 元件層（統整版）

   依賴 design-tokens.css。元件只引用主題變數，因此同一份 CSS 會在
   入口網站 / 應用介面 / 深色模式之間自動換裝，不需要寫三套。

   ── 變體字彙 ──────────────────────────────────────────────────────────────
   沿用官方「通用前台UI」的五維矩陣。屬性值用 ASCII（程式識別碼保持穩定），
   介面文字與文件一律繁體中文。對照如下：

     data-type   類型   primary 主要按鈕｜secondary 次要按鈕｜tonal 虛框按鈕
                        ｜outlined 線框按鈕｜text 文字按鈕
     data-kind   種類   standard 標準｜danger 危險｜success 成功｜warning 警告
     data-size   尺寸   xs 迷你｜sm 小｜md 中｜lg 大
     data-shape  形狀   rect 長方形｜pill 全圓角｜square 方形｜circle 圓形
     狀態        狀態   預設 / :hover 停留 / :focus-visible 聚焦
                        / [aria-pressed="true"] 啟用 / :disabled 停用

   注意：官方 .fig 內的變體標籤是簡體中文（默认／悬停／线框按钮），
   已在此統一為繁體。請一併回饋設計端修正原檔。
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════ 基礎 ═══════════ */

.ds-root{
  font-family:var(--font-sans);
  font-size:var(--fs-lg);
  line-height:var(--lh-normal);
  color:var(--color-fg);
  background:var(--color-bg);
}
.ds-ico{
  font-family:var(--font-icon);
  font-weight:normal;font-style:normal;line-height:1;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';
}
.ds-num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* 焦點樣式：任何介面、任何模式都不得移除 */
.ds-root :focus-visible{
  outline:var(--focus-width) solid var(--color-focus);
  outline-offset:var(--focus-offset);
  border-radius:var(--r-xs);
}
.ds-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.ds-clamp-1,.ds-clamp-2,.ds-clamp-3{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.ds-clamp-1{-webkit-line-clamp:1}
.ds-clamp-2{-webkit-line-clamp:2}
.ds-clamp-3{-webkit-line-clamp:3}

/* 版面容器：寬度與留白由介面主題決定 */
.ds-container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}


/* ═══════════ 區塊標題 ═══════════ */
/* 入口網站用萊姆→天藍色條；應用介面自動換成主色漸層（見 token 第 1 層）。 */

.ds-section-head{display:flex;align-items:stretch;gap:var(--sp-3)}
.ds-section-head__bar{
  flex:none;width:9px;min-height:62px;border-radius:var(--r-full);
  background:var(--grad-accent);
}
.ds-section-head__text{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1)}
.ds-section-head__eyebrow{
  font-family:var(--font-num);font-weight:var(--fw-bold);
  font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);color:var(--color-eyebrow);
}
.ds-section-head__title{
  font-family:var(--font-tc);font-weight:var(--fw-black);
  font-size:var(--fs-section);line-height:var(--lh-1row);
  letter-spacing:var(--ls-wide);color:var(--color-fg-strong);margin:0;
}


/* ═══════════ 按鈕 ═══════════ */

.ds-btn{
  --_bg:var(--color-accent);
  --_fg:var(--color-on-accent);
  --_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding:0 var(--sp-6);
  border:1.5px solid var(--_bd);border-radius:var(--r-full);
  background:var(--_bg);color:var(--_fg);
  font-family:var(--font-sans);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),
             box-shadow var(--dur) var(--ease);
}

/* ── 種類 kind：決定色相 ── */
.ds-btn[data-kind="danger"]  { --_bg:var(--status-danger);  --_fg:var(--white) }
.ds-btn[data-kind="success"] { --_bg:var(--status-success); --_fg:var(--white) }
.ds-btn[data-kind="warning"] { --_bg:var(--status-warn);    --_fg:var(--white) }

/* ── 類型 type：決定填色方式 ── */
.ds-btn[data-type="primary"]{ box-shadow:var(--shadow-xs) }
.ds-btn[data-type="secondary"]{
  background:var(--color-surface);color:var(--_bg);border-color:var(--_bg);
}
.ds-btn[data-type="tonal"]{
  background:color-mix(in srgb,var(--_bg) 14%,var(--color-surface));
  color:var(--_bg);border-color:transparent;
}
.ds-btn[data-type="outlined"]{
  background:transparent;color:var(--color-fg-muted);border-color:var(--color-border);
}
.ds-btn[data-type="text"]{
  background:transparent;color:var(--_bg);border-color:transparent;padding-inline:var(--sp-3);
}

/* ── 尺寸 size ── */
.ds-btn[data-size="xs"]{min-height:32px;padding-inline:var(--sp-3);font-size:var(--fs-sm);gap:var(--sp-1)}
.ds-btn[data-size="sm"]{min-height:38px;padding-inline:var(--sp-4);font-size:var(--fs-md)}
.ds-btn[data-size="lg"]{min-height:52px;padding-inline:var(--sp-8);font-size:var(--fs-xl)}

/* ── 形狀 shape ── */
.ds-btn[data-shape="rect"]  {border-radius:var(--r-sm)}
.ds-btn[data-shape="square"]{border-radius:var(--r-sm);padding:0;aspect-ratio:1}
.ds-btn[data-shape="circle"]{border-radius:var(--r-full);padding:0;aspect-ratio:1}

/* ── 狀態 state ── */
.ds-btn:hover:not(:disabled){
  background:color-mix(in srgb,var(--_bg) 88%,var(--black));
}
.ds-btn[data-type="secondary"]:hover:not(:disabled),
.ds-btn[data-type="tonal"]:hover:not(:disabled),
.ds-btn[data-type="outlined"]:hover:not(:disabled),
.ds-btn[data-type="text"]:hover:not(:disabled){
  background:color-mix(in srgb,var(--_bg) 10%,var(--color-surface));
}
.ds-btn:active:not(:disabled){transform:scale(var(--press))}
.ds-btn[aria-pressed="true"]{box-shadow:var(--ring-focus)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{
  background:var(--color-surface-muted);color:var(--emphasis-disabled);
  border-color:transparent;cursor:not-allowed;box-shadow:none;
}


/* ═══════════ 表單 ═══════════ */

.ds-field{
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding-inline:var(--sp-4);
  background:var(--color-surface);
  border:1.2px solid var(--color-border);border-radius:var(--r-full);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.ds-field--boxed{border-radius:var(--r-sm)}
.ds-field:focus-within{border-color:var(--color-accent);box-shadow:var(--ring-focus)}
.ds-field[data-kind="danger"]{border-color:var(--status-danger)}
.ds-field__icon{flex:none;color:var(--color-fg-subtle);font-size:var(--fs-xl)}
.ds-field__input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:var(--fs-md);color:var(--color-fg);
}
.ds-field__input::placeholder{color:var(--color-fg-subtle)}
.ds-field__submit{
  flex:none;align-self:stretch;display:inline-flex;align-items:center;gap:var(--sp-1);
  margin:-1.2px -1.2px -1.2px 0;padding-inline:var(--sp-6);
  border:0;border-radius:var(--r-full);
  background:var(--grad-brand);color:var(--white);
  font-size:var(--fs-lg);font-weight:var(--fw-bold);white-space:nowrap;cursor:pointer;
}
.ds-label{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.ds-help{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--color-fg-muted)}
.ds-help[data-kind="danger"]{color:var(--status-danger-ink)}

/* 開關 */
.ds-switch{
  appearance:none;flex:none;width:52px;height:30px;border-radius:var(--r-full);
  background:var(--color-surface-muted);border:0;cursor:pointer;position:relative;
  transition:background-color var(--dur) var(--ease);
}
.ds-switch::after{
  content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:var(--r-full);background:var(--white);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease);
}
.ds-switch:checked{background:var(--color-accent)}
.ds-switch:checked::after{transform:translateX(22px)}
.ds-switch:disabled{opacity:.5;cursor:not-allowed}


/* ═══════════ 分頁 tabs ═══════════ */

.ds-tabs{display:flex;gap:var(--sp-3);align-items:center}
.ds-tab{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap-min);padding:0 var(--sp-5);
  background:var(--color-surface);color:var(--color-fg);
  border:1px solid var(--color-border);border-radius:var(--r-full);
  font-size:var(--fs-lg);white-space:nowrap;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.ds-tab:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ds-tab[aria-selected="true"]{border-color:var(--color-accent);box-shadow:var(--ring-focus)}
/* 底線型（應用介面常用） */
.ds-tabs[data-variant="underline"]{gap:0;border-bottom:1px solid var(--color-line)}
.ds-tabs[data-variant="underline"] .ds-tab{
  background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;
  color:var(--color-fg-muted);
}
.ds-tabs[data-variant="underline"] .ds-tab:hover{transform:none;box-shadow:none}
.ds-tabs[data-variant="underline"] .ds-tab[aria-selected="true"]{
  color:var(--color-accent);border-bottom-color:var(--color-accent);box-shadow:none;
  font-weight:var(--fw-bold);
}


/* ═══════════ 標籤 ═══════════ */

.ds-chip{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:6px var(--sp-3);border-radius:var(--r-sm);
  background:var(--color-surface);border:1px solid var(--color-border);
  font-size:var(--fs-sm);color:var(--color-fg);
}
.ds-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 var(--sp-2);border-radius:var(--r-full);
  background:var(--color-accent);color:var(--color-on-accent);
  font-family:var(--font-num);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1;
}
.ds-badge[data-kind="danger"] {background:var(--status-danger)}
.ds-badge[data-kind="success"]{background:var(--status-success)}
.ds-badge[data-kind="warning"]{background:var(--status-warn)}
/* 課程型別標籤：顏色為固定對應，不可換色 */
.ds-tag{
  display:inline-flex;align-items:center;height:28px;padding:0 var(--sp-3);
  border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1;
}
.ds-tag[data-course="digital"] {background:#000;color:var(--white)}
.ds-tag[data-course="assemble"]{background:#ff7d00;color:var(--white)}
.ds-tag[data-course="ebook"]   {background:#ffc107;color:#000}


/* ═══════════ 卡片 ═══════════ */

.ds-card{
  display:flex;flex-direction:column;
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--r-card);
  box-shadow:var(--shadow-md);color:inherit;text-decoration:none;overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
a.ds-card:hover,a.ds-card:focus-visible,.ds-card[data-interactive]:hover{
  transform:translateY(var(--lift));
  border-color:var(--color-accent);
  box-shadow:var(--shadow-xl);
}
a.ds-card:active{transform:translateY(-1px)}
.ds-card--flat{box-shadow:var(--shadow-sm)}
.ds-card__media{position:relative;flex:none;overflow:hidden;background:var(--color-surface-muted)}
.ds-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ds-card__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5)}
.ds-card__title{
  font-family:var(--font-tc);font-weight:var(--fw-bold);
  font-size:var(--fs-2xl);line-height:var(--lh-tight);color:var(--color-fg-strong);margin:0;
}
.ds-card__meta{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--color-fg-muted)}
.ds-card__meta b{font-weight:var(--fw-bold);color:var(--color-fg)}


/* ═══════════ 表格 ═══════════ */

.ds-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.ds-table th,.ds-table td{
  padding:var(--sp-3) var(--sp-4);text-align:left;
  border-bottom:1px solid var(--color-line);vertical-align:middle;
}
.ds-table th{
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-fg-muted);
  background:var(--color-surface-muted);white-space:nowrap;
}
.ds-table tbody tr:hover{background:var(--color-surface-hover)}
.ds-table--compact th,.ds-table--compact td{padding:var(--sp-2) var(--sp-3)}


/* ═══════════ 對話框與訊息 ═══════════ */

.ds-backdrop{position:fixed;inset:0;background:var(--alpha-60);z-index:var(--z-backdrop)}
.ds-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,560px);max-height:86vh;overflow:auto;z-index:calc(var(--z-backdrop) + 1);
  background:var(--color-surface);border-radius:var(--r-card);box-shadow:var(--shadow-lg);
}
.ds-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--color-line);
}
.ds-modal__title{margin:0;font-family:var(--font-tc);font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
.ds-modal__body{padding:var(--sp-6)}
.ds-modal__foot{
  display:flex;justify-content:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-6) var(--sp-6);
}

.ds-toast{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  background:var(--color-surface);border-left:4px solid var(--color-accent);
  box-shadow:var(--shadow-md);font-size:var(--fs-md);
}
.ds-toast[data-kind="danger"] {border-left-color:var(--status-danger); background:var(--status-danger-bg); color:var(--status-danger-ink)}
.ds-toast[data-kind="success"]{border-left-color:var(--status-success);background:var(--status-success-bg);color:var(--status-success-ink)}
.ds-toast[data-kind="warning"]{border-left-color:var(--status-warn);   background:var(--status-warn-bg)}

.ds-tooltip{
  display:inline-block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-xs);
  background:var(--ink-850);color:var(--white);font-size:var(--fs-sm);line-height:1.4;
  box-shadow:var(--shadow-md);
}


/* ═══════════ 導覽 ═══════════ */

.ds-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-md)}
.ds-breadcrumb a{color:var(--color-fg-muted);text-decoration:none}
.ds-breadcrumb a:hover{color:var(--color-accent);text-decoration:underline}
.ds-breadcrumb [aria-current="page"]{color:var(--color-fg);font-weight:var(--fw-bold)}
.ds-breadcrumb__sep{color:var(--color-fg-subtle)}

.ds-dots{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);height:12px}
.ds-dot{
  height:12px;width:21px;border:0;padding:0;border-radius:var(--r-full);
  background:var(--ink-300);cursor:pointer;transition:all var(--dur) var(--ease);
}
.ds-dot[aria-current="true"]{width:62px;background:var(--grad-stats)}

.ds-arrow{
  display:grid;place-items:center;width:52px;height:52px;
  border:0;border-radius:var(--r-full);background:var(--color-surface);
  color:var(--color-fg-muted);box-shadow:var(--shadow-md);cursor:pointer;
  transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.ds-arrow:hover{box-shadow:var(--shadow-lg)}
.ds-arrow:active{transform:scale(.94)}
.ds-arrow[data-type="primary"]{background:var(--grad-brand);color:var(--white)}
.ds-arrow[data-type="glass"]{
  border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--white);box-shadow:none;
}
.ds-arrow:disabled{background:var(--color-surface-muted);color:var(--emphasis-disabled);cursor:not-allowed}

.ds-avatar{
  display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--r-full);background:var(--grad-brand);color:var(--white);
  font-family:var(--font-num);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  overflow:hidden;
}
.ds-avatar[data-size="sm"]{width:32px;height:32px;font-size:var(--fs-xs)}
.ds-avatar[data-size="lg"]{width:56px;height:56px;font-size:var(--fs-lg)}
.ds-avatar img{width:100%;height:100%;object-fit:cover}

.ds-menu{
  min-width:240px;padding:var(--sp-2);
  background:var(--color-surface);border-radius:var(--r-lg);
  border-top:4px solid var(--color-accent);box-shadow:var(--shadow-lg);
}
.ds-menu__item{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:10px var(--sp-5);border-radius:var(--r-xs);
  color:var(--color-fg);text-decoration:none;font-size:var(--fs-lg);
  line-height:var(--lh-loose);
}
.ds-menu__item:hover,.ds-menu__item[aria-current="true"]{background:var(--color-surface-muted)}
.ds-menu__item[data-kind="danger"]{color:var(--status-danger)}


/* ═══════════ 深色區塊（統計帶、頁尾） ═══════════ */

.ds-inverse{background:var(--color-inverse-bg);color:var(--color-inverse-fg)}
.ds-inverse h1,.ds-inverse h2,.ds-inverse h3{color:var(--color-inverse-heading)}
.ds-inverse a{color:var(--color-inverse-fg)}
.ds-inverse a:hover{filter:brightness(1.15)}

.ds-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-5) clamp(12px,2vw,26px);
  padding:clamp(26px,4.4vw,44px) var(--sp-3)}
.ds-stat{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}
.ds-stat__value{
  font-family:var(--font-num);font-weight:var(--fw-extrabold);
  font-size:var(--fs-stat);line-height:1;letter-spacing:-.025em;white-space:nowrap;margin:0;
}
.ds-stat__label{
  font-family:var(--font-tc);font-weight:var(--fw-bold);
  font-size:clamp(14px,1.1vw,20px);letter-spacing:.08em;color:rgba(255,255,255,.85);
}
.ds-stat__note{font-size:clamp(12px,.95vw,16px);color:rgba(255,255,255,.7)}


/* ═══════════ 通用行為 ═══════════ */

.ds-lift{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ds-lift:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-lg)}

@media (prefers-reduced-motion:reduce){
  .ds-card,.ds-tab,.ds-btn,.ds-lift,.ds-dot,.ds-arrow,.ds-switch{transition:none}
  a.ds-card:hover,.ds-lift:hover,.ds-tab:hover{transform:none}
}