/* 基础组件（docs/redesign/PLAN.md §2.4）。全站布局引入。
 *
 * 🔴 **这一份只定义组件，不改任何现有页面。** 站里每一处既有样式都还在原地跑；
 * 这里是给改版后的界面用的一套共同底座 —— 改到哪个组件，那个组件顺手换过来。
 *
 * 🔴 **一切颜色、圆角、间距、字号都走变量**（§2.2 的令牌，定义在
 * layouts/site.blade.php 的 :root 里）。这份文件里不许出现写死的色值 ——
 * 写死一个，换主题时它就是那个永远改不掉的角落。
 *
 * 🔴 **每条选择器都以 .btn / .chip / … 这类自有类名开头**，不碰任何元素选择器。
 * 它在每一页上加载，一条 `button { … }` 就会伸手去改全站既有的按钮。 */

/* ── 按钮 ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 36px;
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

/* 按下态只给按钮（§2.4）。 */
.btn:active { transform: scale(.98); }

.btn--sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--lg { height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-lg); }
/* 抽屉底部那颗生成按钮：§2.4 单独点名 48px。 */
.btn--xl { height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-lg); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary { border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--bg-hover); }

.btn--ghost:hover { background: var(--bg-hover); }

.btn--danger { color: var(--danger); }
.btn--danger:hover { background: var(--bg-hover); }

/*
 * 🔴 **尽量不用禁用态**（§2.4 原文）：条件不满足时按钮保持可点，点了就地说明原因。
 * 一个灰掉的按钮不会告诉任何人为什么 —— 用户只能自己猜，而猜错了就走了。
 * 这条规则留在这里是给以后写页面的人看的；真需要禁用时（比如请求已经发出去了）
 * 用下面的加载态。
 */
.btn[aria-busy="true"] { pointer-events: none; }

.btn[aria-busy="true"]::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ── 药丸 ──────────────────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    line-height: 1;
    cursor: pointer;
}

.chip:hover { background: var(--bg-hover); }

.chip[aria-checked="true"],
.chip.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* ── 分段控件 ──────────────────────────────────────────────────────────── */

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--search-bg);
}

.segmented > * {
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    padding: 0 var(--sp-4);
    height: 30px;
    cursor: pointer;
}

.segmented > [aria-checked="true"],
.segmented > .is-selected { background: var(--bg-hover); color: var(--text); }

/* ── 输入框 ────────────────────────────────────────────────────────────── */

.field {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--search-bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-md);
    line-height: 1.6;
}

.field::placeholder { color: var(--text-subtle); }

.field:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 多行最多 6 行之后内部滚动（§2.4）：6 × 1.6em + 上下内边距。 */
textarea.field { max-height: calc(6 * 1.6em + var(--sp-4)); overflow-y: auto; resize: vertical; }

/* ── 卡片 ──────────────────────────────────────────────────────────────── */

.card {
    background: var(--content-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* 图上文字压在渐变上，不是压在半透明色块上 —— 后者在浅色图上会糊成一片。 */
.card__scrim {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-3);
    background: var(--scrim);
    color: var(--text);
    z-index: var(--z-card-overlay);
}

/* ── 浮层：抽屉 / 弹窗 ─────────────────────────────────────────────────── */

.surface {
    background: var(--bg-bar);
    border: 1px solid var(--border);
    border-radius: var(--radius-dialog);
    box-shadow: var(--shadow-float);
}

.overlay { position: fixed; inset: 0; background: var(--overlay); }

/* ── 骨架屏 ────────────────────────────────────────────────────────────── */

.skeleton {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    animation: ui-breathe 1.2s ease-in-out infinite;
}

@keyframes ui-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ── 价格标签 ──────────────────────────────────────────────────────────── */

/*
 * 「● 8」。圆点用币色，数字等宽 —— 一列价格对不齐会让人一眼看不出哪个贵
 * （§2.3：所有数字加 tabular-nums）。币色变量是全站共用的那两个，没有另起一套。
 */
.price { display: inline-flex; align-items: center; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.price::before { content: '●'; color: var(--coin-paid); }
.price--free::before { color: var(--coin-free); }

/* ── 进度条 ────────────────────────────────────────────────────────────── */

.progress { height: 6px; border-radius: var(--radius-pill); background: var(--bg-hover); overflow: hidden; }
.progress__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-base) var(--ease-out); }

/* ── 图标 ──────────────────────────────────────────────────────────────── */

/* §2.5：线性 SVG，颜色继承 currentColor；尺寸由后代选择器控制。 */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.btn .icon { width: 16px; height: 16px; }

/* ── 减少动效 ──────────────────────────────────────────────────────────── */

/*
 * 🔴 §2.4 里每一处动效都写了"减少动效下"的行为，这里一次性兑现。
 * 这不是可选的礼貌：前庭功能敏感的人被一屏转个不停的东西弄到眩晕是真事，
 * 而他们已经在系统里表过态了。
 */
@media (prefers-reduced-motion: reduce) {
    .btn, .progress__fill { transition: none; }
    .btn:active { transform: none; }
    .skeleton { animation: none; }
    /* 加载态不转圈，改成一个静止的省略号（§2.4 原文）。 */
    .btn[aria-busy="true"]::before {
        content: '…';
        width: auto;
        height: auto;
        border: 0;
        animation: none;
    }
}