/* ============================================================
   学习中心 · 基础样式 base.css v1.1（设计系统组独占写域）
   依赖：tokens.css（必须先引入）
   内容：reset / 排版基础 / 链接表格 / 基础控件 / 无障碍
   断点约定（全站统一，media query 写字面量）：
     600px（窄手机加密）· 768px（手机/平板分界，侧栏转抽屉）
     1024px（侧栏收图标栏的上界）· 1440px（聊天抽屉可钉住）
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text-2);
  font:var(--fs-base)/var(--lh-ui) var(--font-sans);
  transition:background-color var(--t-base) linear,color var(--t-base) linear;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0 0 var(--sp-3)}
ul,ol{padding-left:1.4em}

/* ---------- 标题层级 ----------
   h1/h2（≥24px 档）走衬线大标题 --font-display（升级令 A4）；
   页面里字号 <24px 的 h2 请加 .h-sans 或降级为 h3（衬线小字号发虚红线）。 */
h1,h2,h3,h4{color:var(--text-1);line-height:1.35;font-weight:800}
h1,h2{font-family:var(--font-display);letter-spacing:.01em}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
.h-sans{font-family:var(--font-sans);letter-spacing:0}
/* 讲义阅读页（长文容器）标题走衬线，营造讲义感 */
.prose h1,.prose h2{font-family:var(--font-serif);font-weight:600;color:var(--brand-ink)}

/* ---------- 长文排版（讲义正文/卡片长答案加 .prose）---------- */
.prose{font-size:var(--fs-read);line-height:var(--lh-read);color:var(--text-2);
  max-width:75ch}
.prose p{margin-bottom:var(--sp-4)}
.prose h2{margin-top:var(--sp-7)}
.prose h3{margin-top:var(--sp-6)}
.prose strong,.prose b{color:var(--text-1)}
.prose mark{background:var(--mark-bg);color:var(--mark-ink);padding:0 3px;border-radius:3px}
.prose blockquote{margin:var(--sp-4) 0;padding:var(--sp-2) var(--sp-4);
  border-left:3px solid var(--line-strong);color:var(--text-3);
  font-family:var(--font-serif)}
.prose hr{border:none;border-top:1px solid var(--line);margin:var(--sp-6) 0}

/* ---------- 链接 ---------- */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.prose a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);
  text-underline-offset:3px}

/* ---------- 表格 ---------- */
table{border-collapse:collapse;width:100%;font-size:var(--fs-base);margin:var(--sp-4) 0}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--surface-2);color:var(--text-1);font-weight:700;white-space:nowrap}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.table-scroll{overflow-x:auto;margin:var(--sp-4) 0}
.table-scroll table{margin:0;min-width:480px}

/* ---------- 代码（行内）---------- */
code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-3);
  color:var(--text-1);padding:1px 6px;border-radius:5px}
kbd{font:700 11px/1 var(--font-mono);color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;
  padding:2px 6px;white-space:nowrap}

/* ---------- 基础控件 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-md);
  font-size:var(--fs-base);font-weight:700;line-height:1;cursor:pointer;border:none;
  background:var(--surface-3);color:var(--text-1);text-decoration:none;
  transition:filter var(--t-fast),transform var(--t-fast),background var(--t-fast)}
/* 链接型按钮（<a class="btn">）hover 不许冒链接下划线（审计 17·P1-3）*/
.btn:hover,.btn:focus,.icon-btn:hover,.icon-btn:focus{text-decoration:none}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--dm);color:var(--on-solid)}
.btn-ghost{background:transparent;color:var(--dm);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:color-mix(in srgb,var(--dm) 8%,transparent)}
.btn-ok{background:var(--ok);color:var(--on-solid)}
.btn-warn{background:var(--warn);color:var(--on-solid)}
.btn-bad{background:var(--bad);color:var(--on-solid)}
/* 实心按钮禁用：半透明彩底压白字对比不足（审计 17·P2-9），改中性实底 */
:is(.btn-primary,.btn-ok,.btn-warn,.btn-bad,.btn-easy)[disabled]{
  background:var(--surface-3);color:var(--text-3);opacity:1}
.btn-sm{min-height:34px;padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--r-sm)}

.icon-btn{width:44px;height:44px;flex:none;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;font-size:17px;
  transition:background var(--t-fast),transform var(--t-fast)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.94)}

input[type="text"],input[type="search"],input[type="number"],input[type="password"],
input[type="url"],select,textarea{
  background:var(--surface-3);border:1px solid var(--line);color:var(--text-1);
  border-radius:var(--r-sm);padding:10px 12px;min-height:44px;
  font:var(--fs-base)/var(--lh-ui) var(--font-sans);width:100%}
textarea{resize:vertical;min-height:44px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dm);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dm) 18%,transparent)}
input::placeholder,textarea::placeholder{color:var(--text-3)}

/* ---------- 通用工具类 ---------- */
.sp{flex:1}
.muted{color:var(--text-3);font-size:var(--fs-sm)}
.mono{font-family:var(--font-mono)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 玻璃拟态：仅限顶栏/底部 tab/浮动控件 */
.glass{background:color-mix(in srgb,var(--surface) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15)}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--surface)}}
/* 页头装饰细渐变条：官方口径=标题下短条（审计 17·P2-3 三口径统一）。
   通栏版废止；页组自绘的全宽渐变条请删除改用本类。 */
.hairline-grad{height:3px;max-width:220px;border-radius:var(--r-full);border:none;
  margin:0;background:linear-gradient(90deg,var(--dm),color-mix(in srgb,var(--dm) 25%,transparent))}

/* ---------- 无障碍 ---------- */
:focus-visible{outline:2px solid var(--dm);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
::selection{background:color-mix(in srgb,var(--brand) 25%,transparent)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- 手机基线（≤768px）---------- */
@media (max-width:768px){
  body{font-size:var(--fs-base)}
  h1{font-size:var(--fs-2xl)}
  h2{font-size:var(--fs-xl);font-family:var(--font-sans);letter-spacing:0}
  /* ↑ 手机 h2 落到 20px（<24px），按 A4 红线退回 sans；.prose h2 自有衬线规则不受影响 */
  .btn{min-height:46px}   /* 触控放宽 */
  /* iOS Safari 聚焦 <16px 输入框会强制放大视口（审计 18·P2-3），手机档输入统一 16px */
  input[type="text"],input[type="search"],input[type="number"],input[type="password"],
  input[type="url"],select,textarea{font-size:16px}
}