﻿/* 法易 - 无障碍样式：大字模式、色盲模式、焦点可见、跳过链接 */
:root {
  --a11y-focus-ring: 2px solid var(--legal-main, #2c5282);
  --a11y-focus-offset: 2px;
  
  --a11y-ink: #111827;
  --a11y-blue: #005ea8;
  --a11y-blue-dark: #003f73;
  --a11y-amber: #b06c00;
  --a11y-amber-dark: #7a4a00;
  --a11y-surface: #ffffff;
  --a11y-muted: #f2f4f7;
}

/* 键盘焦点可见（不影响鼠标点击） */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: var(--a11y-focus-ring);
  outline-offset: var(--a11y-focus-offset);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--a11y-focus-ring);
  outline-offset: var(--a11y-focus-offset);
}

/* 跳过主内容链接（默认隐藏，获得焦点时显示） */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--legal-dark, #1e3a5f);
  color: #fff;
  font-size: 1rem;
  border-radius: 0.5rem;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- 大字模式（Large Text Mode）---------- */
body.a11y-large-text {
  font-size: 125%;
  line-height: 1.7;
}

body.a11y-large-text .section-title,
body.a11y-large-text h1,
body.a11y-large-text h2 {
  font-size: 1.5em;
  line-height: 1.3;
}

body.a11y-large-text h3 {
  font-size: 1.35em;
}

body.a11y-large-text h4 {
  font-size: 1.2em;
}

body.a11y-large-text .btn-primary,
body.a11y-large-text .btn-secondary,
body.a11y-large-text .btn-outline {
  font-size: 1.1rem;
  padding: 0.8rem 1.6rem;
  min-height: 48px;
}

body.a11y-large-text .nav-link {
  font-size: 1.1rem;
  padding: 0.6rem 1.2rem;
}

body.a11y-large-text .input-field {
  font-size: 1.1rem;
  padding: 0.8rem 1.2rem;
  min-height: 48px;
}

body.a11y-large-text .section-desc,
body.a11y-large-text .prose,
body.a11y-large-text p,
body.a11y-large-text li {
  font-size: 1.15rem;
  line-height: 1.75;
}

body.a11y-large-text .case-card {
  padding: 1.25rem;
}

body.a11y-large-text .case-card h4 {
  font-size: 1.15rem;
}

body.a11y-large-text .case-card .case-summary {
  font-size: 1rem;
}

body.a11y-large-text .doc-type-btn,
body.a11y-large-text .flow-type-btn,
body.a11y-large-text .mediation-tab-btn,
body.a11y-large-text .sim-role-btn,
body.a11y-large-text .sim-scene-btn {
  font-size: 1rem;
  padding: 0.5rem 1.2rem;
}

body.a11y-large-text .legal-modal-box {
  padding: 1.5rem;
}

body.a11y-large-text footer {
  padding: 1rem;
}

body.a11y-large-text .risk-gauge {
  width: 96px;
  height: 96px;
}

body.a11y-large-text .risk-gauge::after {
  width: 68px;
  height: 68px;
}

/* ---------- 色盲友好模式（Colorblind Mode）---------- */
body.a11y-colorblind {
  --legal-dark: var(--a11y-ink);
  --legal-main: var(--a11y-blue);
  --legal-light: #6f8fa9;
  --legal-gold: var(--a11y-amber);
  --border: #9aa8b7;
  --muted: #3f4b5a;
  color: var(--a11y-ink);
}

body.a11y-colorblind main a:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.case-card) {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

body.a11y-colorblind .nav-link.is-active,
body.a11y-colorblind .nav-link.active,
body.a11y-colorblind .doc-type-btn.active,
body.a11y-colorblind .flow-type-btn.active,
body.a11y-colorblind .mediation-tab-btn.active,
body.a11y-colorblind .domain-btn.active,
body.a11y-colorblind .sim-scene-btn.active,
body.a11y-colorblind .sim-role-btn.active {
  background-color: var(--a11y-blue);
  border-color: var(--a11y-ink);
  color: #fff;
  box-shadow: inset 0 -3px 0 #ffffff, 0 0 0 2px rgba(17, 24, 39, 0.16);
  font-weight: 800;
}

body.a11y-colorblind .nav-link:hover,
body.a11y-colorblind .doc-type-btn:hover,
body.a11y-colorblind .flow-type-btn:hover,
body.a11y-colorblind .mediation-tab-btn:hover,
body.a11y-colorblind .domain-btn:hover,
body.a11y-colorblind .sim-role-btn:hover,
body.a11y-colorblind .sim-scene-btn:hover {
  border-color: var(--a11y-ink);
  color: var(--a11y-blue-dark);
  background-color: #eef6ff;
  box-shadow: 0 0 0 2px rgba(0, 94, 168, 0.18);
}

body.a11y-colorblind .nav-link,
body.a11y-colorblind footer a,
body.a11y-colorblind .btn-primary,
body.a11y-colorblind .btn-secondary,
body.a11y-colorblind .btn-outline {
  text-decoration: none;
}

body.a11y-colorblind .btn-primary {
  background: var(--a11y-blue);
  border-color: var(--a11y-ink);
  color: #ffffff;
}

body.a11y-colorblind .btn-secondary,
body.a11y-colorblind .btn-outline {
  background: #ffffff;
  border-color: var(--a11y-ink);
  color: var(--a11y-ink);
}

body.a11y-colorblind .ai-generated-badge {
  background: #fff8df;
  border-color: var(--a11y-amber-dark);
  color: var(--a11y-ink);
}

body.a11y-colorblind .ai-badge-icon {
  background: var(--a11y-ink);
  color: #ffffff;
}

body.a11y-colorblind .page-hero,
body.a11y-colorblind .home-hero__shade {
  background: linear-gradient(135deg, #111827, #005ea8);
}

body.a11y-colorblind .case-card,
body.a11y-colorblind .tool-frame,
body.a11y-colorblind .form-panel,
body.a11y-colorblind .result-panel,
body.a11y-colorblind .module-hero-card,
body.a11y-colorblind .workflow-panel,
body.a11y-colorblind .search-shell {
  border-color: #7b8794;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}

/* 风险指示器：颜色 + 纹理，不只依赖红绿。 */
body.a11y-colorblind .risk-dim-fill.high {
  background-color: var(--a11y-amber-dark);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.28) 0,
    rgba(255, 255, 255, 0.28) 4px,
    transparent 3px,
    transparent 8px
  );
}

body.a11y-colorblind .risk-dim-fill.mid {
  background-color: var(--a11y-blue);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.28) 0,
    rgba(255, 255, 255, 0.28) 3px,
    transparent 3px,
    transparent 7px
  );
}

body.a11y-colorblind .risk-dim-fill.low {
  background-color: #4b5563;
}

body.a11y-colorblind .text-red-600 {
  color: var(--a11y-amber-dark);
  font-weight: 800;
}

body.a11y-colorblind .text-red-500,
body.a11y-colorblind .text-red-700,
body.a11y-colorblind .text-red-800 {
  color: var(--a11y-amber-dark);
  font-weight: 800;
}

body.a11y-colorblind .text-green-600,
body.a11y-colorblind .text-green-800 {
  color: var(--a11y-blue-dark);
  font-weight: 800;
}

body.a11y-colorblind .text-yellow-600,
body.a11y-colorblind .text-yellow-800,
body.a11y-colorblind .text-amber-700 {
  color: var(--a11y-amber-dark);
  font-weight: 800;
}

body.a11y-colorblind .bg-red-100,
body.a11y-colorblind .bg-yellow-100,
body.a11y-colorblind .bg-green-100 {
  border: 1px solid currentColor;
}

body.a11y-colorblind .bg-red-100 {
  background-color: #fff7e8;
  background-image: repeating-linear-gradient(45deg, rgba(122, 74, 0, 0.08) 0, rgba(122, 74, 0, 0.08) 4px, transparent 4px, transparent 9px);
}

body.a11y-colorblind .bg-yellow-100 {
  background-color: #fff8db;
  background-image: repeating-linear-gradient(90deg, rgba(122, 74, 0, 0.08) 0, rgba(122, 74, 0, 0.08) 3px, transparent 3px, transparent 8px);
}

body.a11y-colorblind .bg-green-100 {
  background-color: #eef6ff;
  background-image: repeating-linear-gradient(135deg, rgba(0, 94, 168, 0.08) 0, rgba(0, 94, 168, 0.08) 4px, transparent 4px, transparent 9px);
}

/* 表单错误状态：橙色边框+文字说明 */
body.a11y-colorblind .input-field.error {
  border: 2px solid var(--a11y-amber-dark);
  box-shadow: 0 0 0 3px rgba(176, 108, 0, 0.18);
}

body.a11y-colorblind .error-message {
  color: var(--a11y-amber-dark);
  font-weight: 800;
  padding-left: 1.25rem;
  position: relative;
}

body.a11y-colorblind .error-message::before {
  content: '⚠';
  position: absolute;
  left: 0;
}

/* 卡片悬停状态：多重变化（颜色、阴影、位移） */
body.a11y-colorblind .case-card:hover {
  border-color: var(--a11y-blue);
  box-shadow: 0 10px 25px rgba(41, 128, 185, 0.15);
  transform: translateY(-3px);
}

body.a11y-colorblind .case-card {
  transition: all 0.3s ease;
}

/* 进度条和状态指示器 */
body.a11y-colorblind .flow-step {
  border-width: 2px;
}

body.a11y-colorblind .flow-step.active {
  border-color: var(--a11y-orange);
  background-color: rgba(230, 126, 34, 0.1);
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.2);
}

body.a11y-colorblind .flow-step .step-num {
  background-color: var(--a11y-blue);
}

body.a11y-colorblind .flow-step.active .step-num {
  background-color: var(--a11y-orange);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.3);
}

/* 勾选框和复选框 */
body.a11y-colorblind input[type="checkbox"],
body.a11y-colorblind input[type="radio"] {
  accent-color: var(--a11y-orange);
}

body.a11y-colorblind input[type="checkbox"]:checked,
body.a11y-colorblind input[type="radio"]:checked {
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);
}

/* 风险仪表盘 */
body.a11y-colorblind .risk-gauge {
  background: conic-gradient(var(--a11y-blue) 0% var(--p, 0%), #d9e2ec var(--p, 0%) 100%);
}

/* 按钮组选中状态 */
body.a11y-colorblind .doc-type-btn.active::after,
body.a11y-colorblind .flow-type-btn.active::after {
  content: '✓';
  margin-left: 0.3rem;
  font-weight: bold;
}

/* 模态框 */
body.a11y-colorblind .legal-modal-close:hover {
  background-color: var(--a11y-orange);
  color: #fff;
}

/* ---------- 无障碍设置浮动按钮 ---------- */
.a11y-trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9998;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--legal-main, #2c5282);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.a11y-trigger:hover {
  background: var(--legal-dark, #1e3a5f);
  transform: scale(1.05);
}
.a11y-trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.a11y-trigger svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* 无障碍设置面板 */
.a11y-panel {
  position: fixed;
  bottom: 4.5rem;
  right: 1.5rem;
  z-index: 9997;
  width: 320px;
  max-width: calc(100vw - 3rem);
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
  display: none;
}
.a11y-panel.is-open {
  display: block;
}
.a11y-panel h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--legal-dark, #1e3a5f);
}
.a11y-panel .a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.a11y-panel .a11y-option label {
  font-size: 0.9rem;
  cursor: pointer;
  margin: 0;
}
.a11y-panel input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}
.a11y-panel .a11y-voice-hint {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

/* 大字模式下的面板适配 */
body.a11y-large-text .a11y-panel {
  width: 360px;
  padding: 1.25rem 1.5rem;
}

body.a11y-large-text .a11y-panel h3 {
  font-size: 1.15rem;
}

body.a11y-large-text .a11y-panel .a11y-option label {
  font-size: 1rem;
}

body.a11y-large-text .a11y-panel input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}
