/* 武汉中考志愿填报智能系统 · style.css
   视觉系统：晨光纸面 + 江城红 + 发丝线 + 等宽数字（与入口页同一家族 token）
   纯手写，无框架、无外部请求。改版只动视觉，业务 class 钩子全部保留。 */

:root{
  --paper:#F5F2EB;                 /* 暖白纸底 */
  --card:rgba(255,255,255,.66);    /* 极浅卡面（透出纸调） */
  --card-solid:#FCFAF5;            /* 表头/移动卡片的实底 */
  --ink:#22262C;                   /* 深炭灰正文 */
  --ink-2:#565C66;                 /* 次级 */
  --ink-3:#666D78;                 /* 再次级（不低于 12.5px 使用，纸面对比 4.6:1） */
  --line:rgba(34,38,44,.10);       /* 1px 发丝线 */
  --line-2:rgba(34,38,44,.17);
  --brand:#B3122B;                 /* 江城红（既有品牌色，全站唯一强调色） */
  --brand-ink:#9C1526;
  --brand-soft:rgba(179,18,43,.06);
  --brand-line:rgba(179,18,43,.18);
  --ok:#0E7A4F;  --ok-soft:rgba(14,122,79,.08);
  --warn:#9A6206; --warn-soft:rgba(154,98,6,.09);
  --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,.68,.32,1);
  --shadow:0 1px 2px rgba(34,38,44,.04), 0 8px 22px rgba(34,38,44,.05);
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --bar-h:86px;                    /* 吸顶栏高度，由 app.js 实测回写 */
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
/* 晨光纸面（强度低于入口页：工具页内容优先） */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 6% -8%, rgba(176,199,236,.32), transparent 60%),
    radial-gradient(860px 640px at 96% -4%, rgba(203,192,232,.26), transparent 62%),
    radial-gradient(1200px 820px at 44% 110%, rgba(241,221,193,.34), transparent 60%);
}
::selection{background:rgba(179,18,43,.16)}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- 吸顶栏：标识 + 六步编号轨 + 进度发丝线 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  padding-top:env(safe-area-inset-top);
  background:rgba(245,242,235,.9);
  border-bottom:1px solid var(--line);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:rgba(245,242,235,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.brand{
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 14px;
  text-decoration:none;color:var(--ink);
}
.brand .logo{width:30px;height:30px;flex:none;display:block;border-radius:8px}
.brand-txt{min-width:0}
.brand h1{font-size:15px;font-weight:650;letter-spacing:.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .sub{margin:1px 0 0;font-size:12px;color:var(--ink-2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail{border-top:1px solid var(--line)}
.dots{display:flex;padding:0 8px}
.dot{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 2px 6px;position:relative;
}
.dot i{
  font-style:normal;font-family:var(--mono);
  font-size:11px;font-weight:600;letter-spacing:.05em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.dot em{
  font-style:normal;font-size:11px;line-height:1.2;color:var(--ink-3);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none;
}
.dot::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:2px;border-radius:2px;background:transparent}
.dot.on i,.dot.on em{color:var(--brand-ink);font-weight:700}
.dot.on::after{background:var(--brand)}
.dot.done i{color:var(--brand)}
.dot.done::after{background:rgba(179,18,43,.32)}
.progress-wrap{height:2px;background:rgba(34,38,44,.07)}
.progress{height:100%;width:16.6%;background:var(--brand);border-radius:0 2px 2px 0;transition:width .3s var(--ease)}

/* ---------- 主体 ---------- */
main{max-width:780px;margin:0 auto;padding:14px 14px 48px}

.banner{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:14px;
  font-size:14px;line-height:1.8;color:var(--ink-2);
}
.banner b{color:var(--ink);font-weight:650}

.step h2{font-size:16.5px;margin:6px 2px 12px;font-weight:650;letter-spacing:.01em;color:var(--ink)}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);
  padding:14px;margin-bottom:12px;
}
.card h3{margin:0 0 10px;font-size:14.5px;font-weight:650;letter-spacing:.01em;color:var(--ink)}

/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:600}
.field select,.field input{
  width:100%;padding:10px 12px;font-size:15px;
  border:1px solid var(--line-2);border-radius:12px;
  background:#fff;color:var(--ink);font-family:inherit;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field select:focus,.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(179,18,43,.12)}
.hint{font-size:13px;line-height:1.7;color:var(--ink-2);margin:6px 0 0}

.switches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sw{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line-2);border-radius:999px;
  padding:8px 14px;font-size:13.5px;cursor:pointer;user-select:none;min-height:38px;
  transition:border-color .15s var(--ease),background-color .15s var(--ease),color .15s var(--ease);
}
.sw input{accent-color:var(--brand);width:16px;height:16px;flex:none}
.sw:has(input:checked){background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink);font-weight:600}

/* ---------- 表格：斑马纹 + 等宽数字 + 表头吸顶（桌面）/ 移动端卡片化 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.55}
th,td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
th{
  color:var(--ink-2);font-weight:600;font-size:12px;letter-spacing:.03em;
  background:var(--card-solid);
}
td:first-child,th:first-child{white-space:normal;min-width:5.5em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
tbody tr:nth-child(even){background:rgba(34,38,44,.028)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.pos{color:var(--ok);font-weight:600}
.neg{color:var(--brand);font-weight:600}
.tag{
  display:inline-block;font-size:11px;font-weight:600;line-height:1;
  padding:3px 4px;margin-left:4px;border-radius:5px;
  background:rgba(34,38,44,.06);color:var(--ink-2);vertical-align:1px;cursor:help;
}

/* ---------- 折线图（数据编码色沿用既有配方） ---------- */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:rgba(34,38,44,.08);stroke-width:1}
.chart .axis{fill:#8A919C;font-size:9px}
.chart .series-label{font-size:9px;font-weight:600}
.chart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .line.dashed{stroke-dasharray:4 3;stroke-width:1.6;opacity:.85}
.chart .dot{stroke:var(--card-solid);stroke-width:1}
.l-示范线{stroke:#B3122B} .l-示范线.dot{fill:#B3122B} .l-示范线.series-label{fill:#B3122B}
.l-普高线{stroke:#D97706} .l-普高线.dot{fill:#D97706} .l-普高线.series-label{fill:#D97706}
.l-民办线{stroke:#7C3AED} .l-民办线.dot{fill:#7C3AED} .l-民办线.series-label{fill:#7C3AED}
.l-中职线{stroke:#0E7490} .l-中职线.dot{fill:#0E7490} .l-中职线.series-label{fill:#0E7490}
.l-me{stroke:#22262C} .l-me.dot{fill:#22262C} .l-me.series-label{fill:#22262C}
.l-yuan{stroke:#0F7B4F} .l-yuan.dot{fill:#0F7B4F} .l-yuan.series-label{fill:#0F7B4F}

/* ---------- 志愿卡片 ---------- */
.pick{
  border:1px solid var(--line);
  border-left:3px solid rgba(34,38,44,.18);
  border-radius:12px;padding:10px 12px;margin-bottom:8px;
  background:rgba(255,255,255,.5);
}
.pick.chosen{border-left-color:var(--brand);background:var(--brand-soft)}
.pick.unknown{border-left-color:var(--warn);background:rgba(154,98,6,.05)}
.pick-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pick-head .role{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  color:#fff;background:rgba(34,38,44,.45);border-radius:6px;padding:3px 7px;line-height:1.2;
}
.pick.chosen .pick-head .role{background:var(--brand)}
.pick.unknown .pick-head .role{background:var(--warn)}
.pick-head .name{font-weight:650;font-size:15px}
.pick-head .line{margin-left:auto;font-weight:700;color:var(--brand-ink);font-size:13.5px;font-variant-numeric:tabular-nums}
.pick-meta{font-size:12.5px;line-height:1.7;color:var(--ink-2);margin-top:4px}
.pick .why{font-size:13.5px;line-height:1.75;margin:7px 0 0;color:#3A4149}
.pick .raw{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin:5px 0 0}
.warnline{
  font-size:13px;line-height:1.7;color:var(--warn);
  background:var(--warn-soft);border-radius:10px;padding:8px 10px;margin:8px 0 0;
}

/* ---------- 资格核验 / 同分排序 ---------- */
.qelist,.tielist{margin:8px 0 0;padding-left:22px;font-size:13.5px;line-height:1.9}
.qelist li,.tielist li{color:#3A4149}

/* ---------- 手册原文方案（原文转录：虚线分隔） ---------- */
.seg{border-top:1px dashed var(--line-2);padding:10px 0}
.seg:first-of-type{border-top:0}
.seg-range{font-weight:700;font-size:13.5px;color:var(--brand-ink)}
.seg-plan{font-size:13.5px;line-height:1.75;margin-top:4px;color:#3A4149}

/* ---------- 风险 ---------- */
.risk{border-radius:12px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);background:rgba(255,255,255,.5)}
.risk.ok{background:var(--ok-soft);border-color:rgba(14,122,79,.22)}
.risk.warn{background:var(--warn-soft);border-color:rgba(154,98,6,.22)}
.risk-title{font-weight:650;font-size:13.5px;margin-bottom:3px}
.risk.ok .risk-title{color:var(--ok)}
.risk.warn .risk-title{color:var(--warn)}
.risk p{margin:0;font-size:13.5px;line-height:1.75;color:#3A4149}

/* ---------- 分享 ---------- */
.sharecard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;overflow-x:auto}
.sharecard pre{
  margin:0;font-size:12.5px;line-height:1.75;white-space:pre-wrap;
  font-family:var(--mono);color:#3A4149;
}
.btnrow{display:flex;gap:10px;margin-top:10px}
.btnrow .btn{background:rgba(255,255,255,.8);border:1px solid var(--line-2);color:var(--ink)}

/* ---------- 按钮 ---------- */
.nav{display:flex;gap:10px;margin:6px 0 16px}
.btn{
  flex:1;border:0;border-radius:14px;padding:13px 10px;min-height:48px;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:transform .08s var(--ease),opacity .15s,background-color .15s,border-color .15s;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#99101F}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--line-2);flex:0 0 34%}
.btn.ghost:hover{border-color:var(--ink-3)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.small{flex:0 0 auto;padding:10px 16px;font-size:13.5px;min-height:42px;border-radius:12px}

.foot{font-size:13px;line-height:1.8;color:var(--ink-2);text-align:center;margin-top:10px}
.foot p{margin:4px 0}

details summary{
  font-size:13.5px;color:var(--brand-ink);cursor:pointer;padding:8px 0 2px;font-weight:600;
  list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸ ";font-size:11px}
details[open] summary::before{content:"▾ "}
details[open] summary{margin-bottom:6px}

.big{font-size:21px;font-weight:650;margin:0 0 6px;letter-spacing:.01em}

/* ---------- 桌面 ---------- */
@media (min-width:620px){
  body{font-size:16px}
  .brand{height:58px;padding:0 18px}
  .brand h1{font-size:16px}
  .dot em{display:block}
  .dots{padding:0 16px}
  main{padding:16px 18px 56px}
  .card{padding:16px 18px}
  .banner{padding:14px 16px}
}

/* ---------- 移动端表格卡片化 ---------- */
@media (max-width:639px){
  .scroll{overflow:visible;margin:0;padding:0}
  table{display:block;font-size:13.5px}
  thead{display:none}
  tbody{display:block}
  tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:0 14px;
    background:var(--card-solid);border:1px solid var(--line);border-radius:12px;
    padding:10px 12px;margin-bottom:8px;
  }
  tbody tr:nth-child(even){background:var(--card-solid)}
  tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    border-bottom:0;padding:4px 0;white-space:normal;text-align:left;
  }
  tbody td::before{
    content:attr(data-label);flex:none;color:var(--ink-3);font-size:12px;font-weight:600;
  }
  tbody td:first-child{
    grid-column:1/-1;font-weight:650;font-size:14.5px;color:var(--ink);
    border-bottom:1px solid var(--line);padding:0 0 8px;margin-bottom:4px;
  }
  tbody td:first-child::before{display:none}
}

/* ---------- 桌面表头吸顶 ---------- */
@media (min-width:640px){
  .scroll{overflow:visible;margin:0;padding:0}
  thead th{position:sticky;top:var(--bar-h);z-index:6;box-shadow:0 1px 0 var(--line),0 -1px 0 var(--line)}
}

/* ---------- 动效（克制） ---------- */
@media (prefers-reduced-motion: no-preference){
  #step-body>.card{animation:fadein .32s var(--ease) both}
  #quota-box:not(:empty){animation:fadein .32s var(--ease) both}
  @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}