/*
 * 组件展示页（/components）专用样式
 * ---------------------------------------------------------------------------
 * 这里只放「展示页本身需要、站内其他页面用不到」的排版：
 * 页内锚点导航、色板、示例分组、标签页与弹窗演示。
 *
 * 展示的每个组件都直接复用 components.css 里真实的类名——
 * 如果某个组件在这页能正常显示，它在真实页面里就一定没问题。
 */

/* ---------------- 页内导航 ---------------- */

.sc-toc {
    position: sticky;
    top: var(--ui-anchor-offset);
    align-self: start;
    display: grid;
    gap: 2px;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}

.sc-toc__title {
    margin-bottom: var(--ui-space-2);
    padding-inline: 8px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-toc a {
    padding: 5px 8px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-soft);
    font-size: var(--ui-text-sm);
}

.sc-toc a:hover {
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}

/* ---------------- 示例分组 ---------------- */

.sc-block {
    margin-bottom: var(--ui-space-7);
    scroll-margin-top: var(--ui-anchor-offset);
}

.sc-block__head {
    margin-bottom: var(--ui-space-3);
    padding-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--ui-border);
}

.sc-block__title {
    font-size: var(--ui-text-lg);
    font-weight: 600;
}

.sc-block__desc {
    margin-top: 2px;
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
}

/* 单个示例：说明 + 预览区 */
.sc-demo + .sc-demo {
    margin-top: var(--ui-space-5);
}

.sc-demo__label {
    margin-bottom: var(--ui-space-2);
    color: var(--ui-text-muted);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-text-xs);
}

.sc-demo__canvas {
    padding: var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}

/* 预览区里的元素之间留出呼吸 */
.sc-demo__canvas > * + * {
    margin-top: var(--ui-space-3);
}

.sc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
}

.sc-row--baseline {
    align-items: baseline;
}

.sc-stack {
    display: grid;
    gap: var(--ui-space-3);
}

/* 分页在页面里靠上留白分隔；放进示例框后由框自己的内边距负责间距 */
.sc-demo__canvas .ui-pager {
    margin-top: 0;
}

/* ---------------- 色板 ---------------- */

.sc-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--ui-space-3);
}

.sc-swatch {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.sc-swatch__chip {
    height: 56px;
}

/* 深浅色主题下都要能看清，所以色块上加描边 */
.sc-swatch__chip--bordered {
    border-bottom: 1px solid var(--ui-border);
}

.sc-swatch__meta {
    padding: 6px 10px;
}

.sc-swatch__name {
    display: block;
    color: var(--ui-text);
    font-size: var(--ui-text-xs);
    font-weight: 500;
}

.sc-swatch__value {
    display: block;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-mono);
    font-size: 11px;
}

/* 色块：每个色块直接取对应的语义令牌，改令牌时这里跟着变。
   用类而不是内联 style，是为了让「哪个色块对应哪个变量」留在 CSS 里，
   Blade 只负责排列。新增令牌时在这里补一行。 */
.sc-swatch__chip--brand {
    background: var(--ui-brand);
}

.sc-swatch__chip--brand-soft {
    background: var(--ui-brand-soft);
}

.sc-swatch__chip--success {
    background: var(--ui-success);
}

.sc-swatch__chip--warning {
    background: var(--ui-warning);
}

.sc-swatch__chip--danger {
    background: var(--ui-danger);
}

.sc-swatch__chip--canvas {
    background: var(--ui-canvas);
}

.sc-swatch__chip--surface {
    background: var(--ui-surface);
}

.sc-swatch__chip--surface-subtle {
    background: var(--ui-surface-subtle);
}

.sc-swatch__chip--border {
    background: var(--ui-border);
}

.sc-swatch__chip--text {
    background: var(--ui-text);
}

/* ---------------- 字号阶梯 ---------------- */

/* 每个样本用字号令牌渲染，令牌改了这里立刻体现 */
.sc-sample {
    font-weight: 600;
}

.sc-sample--3xl {
    font-size: var(--ui-text-3xl);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.sc-sample--2xl {
    font-size: var(--ui-text-2xl);
}

.sc-sample--xl {
    font-size: var(--ui-text-xl);
}

.sc-sample--lg {
    font-size: var(--ui-text-lg);
}

.sc-sample--md {
    font-size: var(--ui-text-md);
    font-weight: 400;
}

.sc-sample--base {
    font-size: var(--ui-text-base);
    font-weight: 400;
}

.sc-sample--sm {
    color: var(--ui-text-soft);
    font-size: var(--ui-text-sm);
    font-weight: 400;
}

.sc-sample--xs {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
    font-weight: 400;
}

/* 圆角样本 */
.sc-radius--xs {
    border-radius: var(--ui-radius-xs);
}

.sc-radius--sm {
    border-radius: var(--ui-radius-sm);
}

.sc-radius--md {
    border-radius: var(--ui-radius-md);
}

.sc-radius--lg {
    border-radius: var(--ui-radius-lg);
}

.sc-radius--pill {
    border-radius: var(--ui-radius-pill);
}

.sc-type-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-4);
    padding: var(--ui-space-3) 0;
    border-bottom: 1px dashed var(--ui-border);
}

.sc-type-row:last-child {
    border-bottom: 0;
}

.sc-type-row__token {
    color: var(--ui-text-muted);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-text-xs);
    white-space: nowrap;
}

/* ---------------- 图标墙 ---------------- */

.sc-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--ui-space-2);
}

.sc-icon {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: var(--ui-space-3) 6px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-soft);
    text-align: center;
}

.sc-icon .icon {
    width: 20px;
    height: 20px;
}

.sc-icon span {
    overflow: hidden;
    max-width: 100%;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-mono);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------- 标签页演示 ---------------- */

.sc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--ui-space-4);
    padding: 4px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-subtle);
}

.sc-tab {
    padding: 6px 14px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: none;
    color: var(--ui-text-soft);
    font-size: var(--ui-text-sm);
    cursor: pointer;
    transition: background-color var(--ui-speed) var(--ui-ease),
                color var(--ui-speed) var(--ui-ease);
}

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

.sc-tab.is-active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-xs);
}

.sc-panel[hidden] {
    display: none;
}

/* ---------------- 弹窗演示 ---------------- */

.sc-dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-md);
}

.sc-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.sc-dialog__body {
    padding: var(--ui-space-5);
}

.sc-dialog__title {
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-text-lg);
    font-weight: 600;
}

.sc-dialog__desc {
    color: var(--ui-text-soft);
    font-size: var(--ui-text-sm);
    line-height: 1.7;
}

.sc-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-5);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

/* ---------------- 页面骨架 ---------------- */

.sc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-6);
    align-items: start;
}

@media (min-width: 1024px) {
    .sc-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        column-gap: var(--ui-space-7);
    }
}

@media (max-width: 1023px) {
    .sc-toc {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
    }

    .sc-toc__title {
        display: none;
    }
}