/* 变量覆写不到的地方，一律收敛在这里（视觉基线 §3.1 / §12）。
   页面不得复制本文件，也不得另写覆盖层。 */

html,
body {
    color: var(--crit-ink);
    background: var(--crit-paper);
}

/* 界面禁用斜体（视觉基线 §4） */
body,
em,
i,
cite,
dfn,
address,
var {
    font-style: normal;
}

/* ── 外壳：组件库默认的深色 header / sider 必须覆写（§11 / P-56） ── */
.ant-layout {
    background: var(--crit-paper);
}

.ant-layout-header {
    color: var(--crit-ink);
    background: var(--crit-card);
    border-bottom: 1px solid var(--crit-line);
}

.ant-layout-sider,
.ant-layout-sider-light {
    background: var(--crit-card);
    border-right: 1px solid var(--crit-line);
}

.ant-layout-sider-trigger {
    color: var(--crit-ink);
    background: var(--crit-card);
    border-top: 1px solid var(--crit-line);
}

.ant-layout-sider-children .ant-menu {
    background: transparent;
    border-right: 0;
}

.crit-shell {
    min-height: 100vh;
}

.crit-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crit-shell__brand,
.crit-shell__header-extra {
    display: flex;
    align-items: center;
}

.crit-shell__content {
    padding: var(--crit-shell-gutter);
}

.crit-shell__crumbs {
    margin-bottom: var(--crit-shell-gutter);
}

/* 品牌字标：Chakra Petch 700 Italic（SIL OFL，自托管，见同目录 OFL.txt）。
   斜体是品牌字标的专属特权，界面正文仍一律禁用斜体（视觉基线 §4）。 */
@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-700-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

/* ── 品牌字标：视觉高度对齐基线 §11 的 20px ── */
.crit-brand-mark {
    font-family: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--crit-brand);
    -webkit-text-stroke: 1.5px var(--crit-brand);
    user-select: none;
}

/* ── 导航：当前项多重信号 —— 底色 + 左条 + 字重（§7.6） ── */
.ant-menu-light .ant-menu-item-selected {
    color: var(--crit-accent-ink);
    font-weight: 600;
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: var(--crit-accent-soft);
}

.ant-menu-inline .ant-menu-item,
.ant-menu-vertical .ant-menu-item {
    position: relative;
}

.ant-menu-inline .ant-menu-item-selected::before,
.ant-menu-vertical .ant-menu-item-selected::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--crit-accent);
}

/* ── 面包屑：只反映层级，末级加重、其余次要色（§7.6） ── */
.ant-breadcrumb {
    color: var(--crit-muted);
}

.ant-breadcrumb > span:last-child {
    color: var(--crit-ink);
    font-weight: 600;
}

/* ── 表格：绝不越出卡片；列宽总和超出时在表体内横向滚动（§12） ── */
.ant-table-wrapper {
    max-width: 100%;
}

.ant-table-wrapper .ant-table-body,
.ant-table-wrapper .ant-table-content {
    max-width: 100%;
    overflow-x: auto;
}

/* ── 工具类：标识符 / 数字列用等宽（§4） ── */
.crit-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
}

.crit-brand-ink {
    color: var(--crit-brand);
}

.crit-text-muted {
    color: var(--crit-muted);
}

/* ── 页面结构：标题区与内容块间距 ── */
.crit-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--crit-shell-gutter);
    margin-bottom: var(--crit-shell-gutter);
}

.crit-page-head .ant-typography {
    margin-bottom: 4px;
}

.crit-block {
    margin-top: var(--crit-shell-gutter);
}

/* 同一行的卡片拉齐高度：Row 默认 top 对齐，这里改为拉伸 */
.crit-row-fill.ant-row {
    align-items: stretch;
}

.crit-card-fill {
    height: 100%;
}

/* ── 工具栏：搜索与筛选控件宽度 ── */
.crit-filter-search {
    width: 260px;
}

.crit-filter-select {
    width: 160px;
}

.crit-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.crit-toolbar__spacer {
    flex: 1 1 auto;
}

.crit-action-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.crit-empty-card {
    height: 100%;
}

/* ── 登录页（1a-1 第二屏）── */
.crit-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--crit-shell-gutter);
    background: var(--crit-paper);
}

.crit-login__card {
    width: 400px;
    max-width: 100%;
}

.crit-login__brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--crit-shell-gutter);
}

.crit-login__title,
.crit-login__intro,
.crit-login__hint {
    text-align: center;
}

.crit-login__intro {
    margin-bottom: var(--crit-shell-gutter);
}

.crit-login__actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--crit-shell-gutter) / 2);
}

.crit-login__error {
    text-align: center;
    margin-bottom: calc(var(--crit-shell-gutter) / 2);
}

.crit-login__hint {
    margin: var(--crit-shell-gutter) 0 0;
    font-size: 12px;
}

.crit-login__footer {
    margin-top: var(--crit-shell-gutter);
}

/* ── 共享可视化：ECharts 画布 ── */
.crit-chart {
    width: 100%;
}

/* ── 共享可视化：指针仪表（CritGauge）── */
.crit-gauge {
    text-align: center;
}

.crit-gauge__plot {
    position: relative;
}

/* 读数贴在表盘下半部：ECharts 的轴心在 58% 高度，指针向上展开。 */
.crit-gauge__readout {
    position: absolute;
    top: 68%;
    left: 50%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    transform: translateX(-50%);
}

.crit-gauge__number {
    color: var(--crit-ink);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.crit-gauge__unit {
    color: var(--crit-muted);
    font-size: 14px;
}

.crit-gauge__title {
    margin-top: 4px;
    color: var(--crit-ink);
    font-weight: 600;
}

.crit-gauge__caption {
    margin-top: 2px;
    color: var(--crit-muted);
    font-size: 12px;
}

/* ── 共享可视化：环形占比（CritDonut）── */
.crit-donut {
    width: 100%;
}

.crit-donut__plot {
    position: relative;
    width: 168px;
    margin: 0 auto;
}

.crit-donut__readout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.crit-donut__number {
    color: var(--crit-ink);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.crit-donut__unit {
    color: var(--crit-muted);
    font-size: 13px;
}

.crit-donut__title {
    margin-top: 8px;
    text-align: center;
    color: var(--crit-ink);
    font-weight: 600;
}

.crit-donut__caption {
    margin-top: 2px;
    text-align: center;
    color: var(--crit-muted);
    font-size: 12px;
}

/* ── 共享可视化：占比分布条与图例 ── */
.crit-dist {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--crit-line-soft);
}

.crit-dist__seg {
    height: 100%;
    transition: flex-grow .4s ease-out;
}

.crit-dist__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 16px;
}

.crit-dist__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--crit-muted);
    font-size: 13px;
}

.crit-dist__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.crit-dist__value {
    color: var(--crit-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 减少动态效果（视觉基线 §13 / WCAG 2.3.3）：CSS 过渡一律关掉。
   图表库内部的 SVG 动画（700ms 一次）不受媒体查询控制。 */
@media (prefers-reduced-motion: reduce) {
    .crit-dist__seg {
        transition: none;
    }
}