/* ================================================================
   菜刀客在线工具页 · OSTA指数计算器 私有样式（osta.css）
   引入位置：osta.html <head> 中，位于 ./css/common.css 之后。
   依赖：./css/common.css（公共组件 .panel/.form-row/.status-bar/.toast 等）
   ================================================================ */

/* —— 覆盖 .form-row：让 年龄/体重 两个输入行占满 .main 列宽（与 .main 同宽） ——
   common.css 中 .form-row 无宽度（仅 display:flex;gap:8px），因此默认按内容收缩，
   宽度 ≈ 370px（.form-body 内边距后），与 .main 的 400px 列明显不一致。
   这里显式 100% 与 .form-body 同宽，使输入框对齐 .panel-header 标题、填满面板。 */
.form-row {
    width: 100%;
}

/* 两个输入框各占 50%（反馈：分别占用父级的 50% 宽度） */
.form-row > .form-group {
    flex: 1 1 0;
    min-width: 0;
}

/* 输入框容器撑满各自 form-group，公式后缀（岁/kg）贴右侧不溢出 */
.form-row .input-wrap {
    width: 100%;
}

.form-row .form-control {
    width: 100%;
    min-width: 0;
}

/* —— OSTA 指数大数值展示（右侧结果面板 hero） —— */
.hero-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hero-result .label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.hero-result .amount {
    font-size: 34px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.1;
}

/* OSTA 指数值统一按 .hero-result 内数值样式渲染 */
.item-value.amount {
    font-size: 34px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.1;
}

/* —— SEO 科普面板跨 .main 全宽（与 bmr-calculator 一致） ——
   .main 为 400px 1fr 网格；.extra-panel 作为第 3 个网格子项若不加
   grid-column 会默认落入第 1 列（仅 400px），与 .main 实际宽度不符。
   这里强制其跨越整行，使内部 .seo-article 与 .main 同宽。 */
.main .extra-panel {
    grid-column: 1 / -1;
    margin-top: 0;
}

.extra-panel .result-body {
    width: 100%;
}

.seo-article {
    width: 100%;
    max-width: none;
}

/* —— OSTA 风险级别 徽标 —— */
.risk-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.risk-low {
    color: #15803d;
    background: #dcfce7;
}

.risk-mid {
    color: #b45309;
    background: #fef3c7;
}

.risk-high {
    color: #b91c1c;
    background: #fee2e2;
}

/* —— 风险分级说明表（SEO 区表格高亮当前级） —— */
.schedule .risk-level-oster {
    font-weight: 600;
}

/* —— 关于 OSTA / 预防措施 SEO 文章 —— */
.seo-article h2 {
    font-size: 18px;
    margin: 18px 0 10px;
    color: #1f2937;
}

/* —— 小屏适配：hero 结果单列、徽标换行 —— */
@media (max-width: 480px) {
    .hero-result {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
    }

    .form-group label {
        white-space: nowrap;
    }
}