/*
 * FivesBot 敏感页版式（Story 23.8 定形件 3 · 唯引用 tokens.css 变量 · 零硬编码色〔CspStaticContentGateTest 静态 CSS 臂咬〕· 零外部导入零外链）。
 * 版式 = 流式单列 + 16px 边距（页宽按 main 类经 :has() 上提到 body 变量 · 不支持 :has() 的浏览器 = 全页 26rem 仍可用）· 表单控件 ≥ 16px
 * 〔iOS Safari 控件 < 16px 聚焦自动缩放 · DESIGN.md 未定义 = 本页定〕· 触控 ≥ 44px · :focus-visible 环 · 表格横滚 · < 420px 恢复码 / 候选网格单列 ·
 * 按钮色 = 风险方向三色（primary 降风险 / 中性 · warning 加风险 · destructive 不可逆）+ secondary outline（登出）· 小字 = 表格档 13px（零新刻度）·
 * 行内写表单（吊销行）携口令字段：换行流式 + 隐去逐行 hint（aria-describedby 仍指向 = 读屏可得）· 签发区预设 ⊥ 自定义互斥 = :has() 显隐。
 */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  --page-max: 26rem;
  margin: 0;
  padding: var(--spacing-section-gap) 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-section-gap);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.5;
  background: var(--background);
  color: var(--foreground);
}
body:has(main.wide) { --page-max: 46rem; }
body:has(main.medium) { --page-max: 28rem; }
header.brand, nav.site, main, footer { width: min(100% - 2 * var(--spacing-gutter), var(--page-max)); }

header.brand h1 { margin: 0; font-size: var(--font-size-heading-page); font-weight: 600; }
header.brand span.brand { color: var(--primary); }

nav.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--spacing-card-pad); }
nav.site li { display: flex; align-items: center; }
nav.site a { display: inline-flex; align-items: center; min-height: var(--spacing-touch-target); color: var(--primary); text-decoration: none; }
nav.site a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
nav.site form { margin: 0; }

main { display: flex; flex-direction: column; gap: var(--spacing-section-gap); }
h2 { margin: var(--spacing-section-gap) 0 0; font-size: var(--font-size-heading-card); color: var(--muted-foreground); }
p { margin: 0; }
a { color: var(--primary); }
code { font-family: var(--font-mono); font-size: var(--font-size-mono); padding: 0 3px; border-radius: var(--radius-sm); background: var(--muted); }
.mono { font-family: var(--font-mono); font-size: var(--font-size-mono); word-break: break-all; }
.hint, .notice { font-size: var(--font-size-table); color: var(--muted-foreground); }

form { display: flex; flex-direction: column; gap: var(--spacing-card-pad); }
form.inline { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spacing-card-pad); }
form.inline .field { flex: 1 1 11rem; }
form.inline .field .hint { display: none; }
.field { display: flex; flex-direction: column; gap: 4px; }
label { color: var(--muted-foreground); }
label.inline { display: inline-flex; align-items: center; gap: 6px; min-height: var(--spacing-touch-target); margin-right: var(--spacing-card-pad); }
input, select {
  font: inherit;
  font-size: 16px;
  width: 100%;
  min-height: var(--spacing-touch-target);
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; margin: 0; accent-color: var(--primary); }
fieldset { margin: 0; padding: var(--spacing-card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--spacing-card-pad); }
legend { padding: 0 4px; font-size: var(--font-size-table); color: var(--muted-foreground); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--spacing-card-pad); }
.grid label { display: flex; align-items: center; gap: 6px; min-height: var(--spacing-touch-target); }
/* 签发区 = 模式 radio（表单外 · 零提交语义）+ 预设 / 自定义两张独立表单 · 互斥唯靠 :has() 显隐 · 不支持 :has() 的浏览器 = 两表单常显（服务端两表单各自成立 · 无害） */
section.issue { display: flex; flex-direction: column; gap: var(--spacing-section-gap); }
section.issue:has(.mode input[value="preset"]:checked) form.custom { display: none; }
section.issue:has(.mode input[value="custom"]:checked) form.preset { display: none; }

.btn, button { font: inherit; font-size: 16px; min-height: var(--spacing-touch-target); padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-warning { background: var(--warning); color: var(--primary-foreground); }
.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.alert { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); }
.alert-error { background: var(--alarm-bg); color: var(--alarm-text); border-color: var(--alarm-text); white-space: pre-wrap; }
.alert-done { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.alert-notice { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.alert ul { margin: 6px 0 0; padding-left: 1.2rem; }
.alert ul.facts { margin: 2px 0 4px; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.panel { padding: var(--spacing-card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--card-foreground); display: flex; flex-direction: column; gap: 6px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-table); }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted-foreground); font-weight: 500; }
th[scope="row"] { width: 40%; }
ul.codes { columns: 2; margin: 4px 0; padding-left: 1.2rem; }
ul.hint { margin: 0; padding-left: 1.2rem; }
footer { font-size: var(--font-size-table); color: var(--muted-foreground); }

@media (max-width: 420px) {
  ul.codes { columns: 1; }
  .grid { grid-template-columns: 1fr; }
}