/* ==========================================================================
   components.css — 排版、hero、卡片、參數列、程式碼、徽章
   ========================================================================== */

/* ---------- 內文排版 ---------- */

.doc-content h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.03em;
    margin: 0 0 var(--sp-4);
}

.doc-content h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
    margin: var(--sp-8) 0 var(--sp-5);
}

.doc-content h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.015em;
    margin: var(--sp-6) 0 var(--sp-3);
}

.doc-content > h1:first-child,
.doc-content > h2:first-child { margin-top: 0; }

.doc-content p { margin: var(--sp-4) 0; color: var(--text-muted); }
.doc-content strong { color: var(--text); font-weight: 600; }
/* 純黑白配色下沒有「連結藍」可用，改用底線標示，hover 時加深。 */
.doc-content a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
}

.doc-content a:hover { text-decoration-color: var(--text); }

.doc-content ul, .doc-content ol { margin: var(--sp-4) 0; padding-left: var(--sp-5); color: var(--text-muted); }
.doc-content li { margin: var(--sp-2) 0; }

.doc-content hr {
    border: 0;
    height: 1px;
    margin: var(--sp-8) 0;
    background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
}

.lead {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-top: 0 !important;
    max-width: 62ch;
}

.doc-content :not(pre) > code {
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    color: var(--text);
    white-space: nowrap;
}

/* 單色漸層文字：由主文字色淡出到次要色 */
.grad-text {
    background: linear-gradient(120deg, var(--text) 30%, var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.heading-anchor {
    opacity: 0;
    margin-left: var(--sp-2);
    font-weight: 400;
    color: var(--text-subtle) !important;
    text-decoration: none !important;
}

h2:hover .heading-anchor, h3:hover .heading-anchor { opacity: 1; }

/* ---------- Hero ---------- */

.hero { padding: var(--sp-8) 0 var(--sp-7); text-align: center; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px var(--sp-4);
    margin-bottom: var(--sp-5);
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.hero__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 3px var(--surface-hover);
}

.hero h1 {
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin: 0 0 var(--sp-5);
}

/* 選擇器要壓過 .doc-content p（0,1,1），否則 margin:auto 會被蓋掉、區塊靠左 */
.doc-content .hero__sub {
    max-width: 56ch;
    margin: 0 auto var(--sp-6);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text-muted);
}

.hero__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 11px var(--sp-5);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
}

/* 反轉色塊：深色主題下是白底黑字，淺色主題下是黑底白字 */
.btn--primary {
    background: var(--text);
    color: var(--text-invert) !important;
    box-shadow: var(--shadow);
}

.btn--primary:hover { background: var(--text-muted); }

.btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text) !important;
}

.btn--ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* ---------- 功能卡片 ---------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
}

.feature-card {
    position: relative;
    display: block;
    padding: var(--sp-5);
    text-decoration: none !important;
    color: var(--text) !important;
    overflow: hidden;
}

.feature-card:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    color: var(--text);
}

.feature-card__icon svg { width: 20px; height: 20px; }

.feature-card__title { font-weight: 700; font-size: 1.0625rem; margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.feature-card__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }

.feature-card__meta {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* ---------- 數據列 ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
}

.stat { padding: var(--sp-5); text-align: center; }

.stat__value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.stat__label { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--sp-1); }

/* ---------- 表格 ---------- */

.table-wrap { margin: var(--sp-5) 0; overflow-x: auto; padding: var(--sp-2); }

.doc-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.doc-content th, .doc-content td {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.doc-content th { font-weight: 700; color: var(--text); white-space: nowrap; }
.doc-content td { color: var(--text-muted); }
.doc-content tr:last-child td { border-bottom: 0; }

/* ---------- 提示框 ---------- */

.callout {
    display: flex;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    /* 純黑白下沒有警示色，改用左邊條的對比強弱表示嚴重度 */
    border-left: 3px solid var(--border-strong);
}

.callout p { margin: 0; }
.callout p + p { margin-top: var(--sp-2); }
.callout--warn { border-left-color: var(--text-muted); }
.callout--danger { border-left-color: var(--text); }
.callout__icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 5px;
    color: var(--text-muted);
}

.callout__icon svg { width: 100%; height: 100%; display: block; }
.callout--danger .callout__icon { color: var(--text); }

/* ---------- HTTP method 徽章 ---------- */

/* 純黑白下不能用色相區分動詞，改用「填滿 vs 描邊」：
   會改變資料的動詞（POST/PUT/DELETE）填滿，唯讀的（GET/PATCH）描邊。 */
.method {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 7px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    color: var(--text-invert);
    background: var(--text);
    border: 1px solid var(--text);
}

.method--get,
.method--patch {
    color: var(--text);
    background: transparent;
    border-color: var(--border-strong);
}

.method--post,
.method--put,
.method--delete {
    color: var(--text-invert);
    background: var(--text);
    border-color: var(--text);
}

/* ---------- 端點區塊（嵌在功能頁裡） ---------- */

.endpoint {
    margin: var(--sp-6) 0;
    padding: var(--sp-5);
    scroll-margin-top: calc(var(--h-header) + 32px);
}

.endpoint__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    overflow-x: auto;
}

.endpoint__base { color: var(--text-subtle); white-space: nowrap; }
.endpoint__path { color: var(--text); font-weight: 700; white-space: nowrap; }

.endpoint__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.01em;
}

.endpoint h4 {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: var(--sp-5) 0 var(--sp-2);
}

/* ---------- 參數列 ---------- */

.params { margin: var(--sp-3) 0; }

.param { padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
.param:last-child { border-bottom: 0; padding-bottom: 0; }

.param__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }

.param__key { font-family: var(--font-mono); font-size: var(--fs-code); font-weight: 700; color: var(--text); }
.param__type { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-subtle); }

.param__flag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: var(--r-full);
}

.param__flag--required { color: var(--text-invert); background: var(--text); }
.param__flag--optional { color: var(--text-subtle); background: var(--surface-hover); }

.param__default { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-subtle); }
.param__desc { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
.param__desc p { margin: var(--sp-2) 0; }
.param__desc > p:first-child { margin-top: 0; }
.param__desc > p:last-child { margin-bottom: 0; }

.param--nested { margin-left: var(--sp-4); padding-left: var(--sp-4); border-left: 1px solid var(--hairline); border-bottom: 0; }

/* ---------- 程式碼 ---------- */

.code-card { margin: var(--sp-5) 0; overflow: hidden; }
.code-card + .code-card { margin-top: var(--sp-4); }

.code-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) 0 var(--sp-4);
    border-bottom: 1px solid var(--hairline);
    min-height: 42px;
}

.code-card__label {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-right: auto;
    white-space: nowrap;
}

.code-tabs { display: flex; gap: var(--sp-1); margin-right: auto; overflow-x: auto; }

.code-tab {
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-subtle);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    padding: 5px var(--sp-3);
    margin: var(--sp-2) 0;
    cursor: pointer;
    white-space: nowrap;
}

.code-tab:hover { color: var(--text); }

.code-tab[aria-selected="true"] {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--border);
}

.code-card pre {
    margin: 0;
    padding: var(--sp-5);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    line-height: 1.75;
    color: var(--text);
    tab-size: 2;
}

.code-card pre[hidden] { display: none; }
.code-card code { font-family: inherit; }

.copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-subtle);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    padding: 5px 10px;
    cursor: pointer;
}

.copy-btn:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn[data-copied="true"] { color: var(--text); }

.tok-key { color: var(--syn-key); font-weight: 600; }
.tok-str { color: var(--syn-str); }
.tok-num { color: var(--syn-num); }
.tok-lit { color: var(--syn-lit); }
.tok-flag { color: var(--syn-flag); }
.tok-cmt { color: var(--syn-cmt); font-style: italic; }

/* ---------- 狀態碼 ---------- */

.status-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}

.status-row:last-child { border-bottom: 0; }
.status-code { font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; width: 3.5em; color: var(--text); }
/* 成功狀態壓低對比，讓錯誤碼在視覺上先被看到 */
.status-row--ok .status-code { color: var(--text-muted); }
.status-row--err .status-code { color: var(--text); }
.status-row span:last-child { color: var(--text-muted); }

/* ---------- 小標籤 ---------- */

.tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px solid var(--border);
}