/* 碳配额盈亏测算 · 页面专属样式
   🔴 约定：本文件只服务 quota.html，所有选择器一律带 q- 前缀做隔离。
      全站共用的 styles.css 一个字节都不动（它被 21 个页面共用，改它＝改首页）。
      回退方式：删除本文件 + 摘掉 quota.html 里的 <link> 即可。 */

/* ── 政策依据条 ── */
.q-src{
  background:var(--chip);
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-size:13px;
  line-height:1.85;
  color:var(--ink-2);
  margin-bottom:20px;
}
.q-src b{color:var(--ink-1);font-weight:600}
.q-src a{color:var(--blue);text-decoration:none}
.q-src a:hover{text-decoration:underline}
.q-src .q-src-row{display:flex;gap:8px;align-items:baseline;margin:2px 0}
.q-src .q-src-tag{
  flex:0 0 auto;font-size:11.5px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:1px 7px;color:var(--ink-2)
}

/* ── 区块标题 ── */
.q-h2{font-size:18px;margin:0 0 8px;font-weight:650;color:var(--ink-1)}
.q-p{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:0 0 16px}
.q-p b{color:var(--ink-1)}

/* ── 速判区 ── */
.q-quick{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.q-quick-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;align-items:end;
}
.q-quick-btn{align-self:end}
.q-quick-btn .btn{width:100%}
.q-out{margin-top:16px}
.q-out:empty{display:none}

/* ── 行业切换胶囊 ── */
.q-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}
.q-tab{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:14px;color:var(--ink-2);
  transition:.16s;user-select:none;
}
.q-tab:hover{border-color:var(--brand);color:var(--brand-d)}
.q-tab.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-d);font-weight:650}

/* ── 覆盖范围提示（企业最容易填错的地方）── */
.q-scope{
  background:var(--warn-soft);border:1px solid rgba(255,159,10,.35);
  border-radius:var(--radius-sm);padding:11px 14px;font-size:12.8px;
  line-height:1.8;color:#7a4d00;margin-bottom:18px;
}
.q-scope b{color:#5c3a00}

/* ── 表单 ── */
.q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px}
.q-grid .field label{font-size:12.8px;color:var(--ink-2)}
.q-grid .field .q-u{color:var(--ink-3);font-weight:400}
.q-sub{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.65}

/* 多机组 / 多生产线明细行 */
.q-rows{margin-top:6px}
.q-row{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;margin-bottom:12px;background:#fcfcfd;position:relative;
}
.q-row-h{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;color:var(--ink-1);margin-bottom:12px;
}
.q-row-h .q-row-ix{color:var(--ink-3);font-weight:400;margin-left:6px}
.q-del{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  border-radius:8px;padding:3px 10px;font-size:12px;cursor:pointer;
}
.q-del:hover{border-color:var(--bad);color:var(--bad)}
.q-add{
  background:#fff;border:1px dashed var(--line);color:var(--ink-2);
  border-radius:var(--radius-sm);padding:11px;width:100%;cursor:pointer;
  font-size:13.5px;transition:.16s;
}
.q-add:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-soft)}

/* 特殊情形勾选 */
.q-special-k{
  display:inline-flex;align-items:center;gap:7px;background:var(--warn-soft);
  border:1px solid rgba(255,159,10,.35);border-radius:999px;
  padding:6px 14px;font-size:13px;color:#7a4d00;cursor:pointer;user-select:none;
}
.q-special-list{
  margin-top:12px;padding:13px 15px;background:var(--chip);border-radius:var(--radius-sm);
  font-size:12.8px;line-height:1.85;color:var(--ink-2);
}
.q-special-list label{display:flex;gap:9px;align-items:flex-start;margin:7px 0;cursor:pointer}
.q-special-list input{margin-top:3px;flex:0 0 auto}

/* ── 操作区 ── */
.q-actions{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.q-err{font-size:13px;color:var(--bad)}

/* ── 结果 ── */
.q-result{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 26px;margin-top:24px;
}
.q-result-h{font-size:17px;font-weight:650;margin:0 0 4px;color:var(--ink-1)}
.q-result-s{font-size:12.8px;color:var(--ink-3);margin:0 0 18px}

/* 结论条 —— 直接回答「买还是卖」 */
.q-verdict{
  border-radius:var(--radius-sm);padding:16px 18px;margin:0 0 18px;
  border:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;
}
.q-verdict .q-v-ic{font-size:22px;line-height:1.1}
.q-verdict .q-v-b{flex:1}
.q-verdict .q-v-t{font-size:15.5px;font-weight:700;margin-bottom:5px}
.q-verdict .q-v-d{font-size:13px;line-height:1.75;opacity:.9}
.q-verdict.surplus{background:var(--brand-soft);border-color:rgba(52,199,89,.42)}
.q-verdict.surplus .q-v-t{color:var(--brand-d)}
.q-verdict.shortage{background:var(--warn-soft);border-color:rgba(255,159,10,.45)}
.q-verdict.shortage .q-v-t{color:#8a5200}
.q-verdict.even{background:var(--chip);border-color:var(--line)}
.q-verdict.even .q-v-t{color:var(--ink-1)}

/* 数字卡 */
.q-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px}
.q-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.q-card .k{font-size:12.3px;color:var(--ink-2);line-height:1.5}
.q-card .v{
  font-size:21px;font-weight:700;margin-top:7px;color:var(--ink-1);
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;
}
.q-card .u{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:3px}
.q-card .s{font-size:11.8px;color:var(--ink-3);margin-top:5px;line-height:1.55}
.q-card.hl{background:var(--blue-soft);border-color:rgba(0,113,227,.28)}
.q-card.hl .v{color:var(--blue-d)}

/* 明细表 */
.q-tbl{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 16px}
.q-tbl th,.q-tbl td{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:right}
.q-tbl th:first-child,.q-tbl td:first-child{text-align:left}
.q-tbl th{font-weight:600;color:var(--ink-2);font-size:12.3px;background:var(--chip)}
.q-tbl td{font-variant-numeric:tabular-nums;color:var(--ink-1)}
.q-tbl tr:last-child td{border-bottom:0}
.q-tbl .q-neg{color:#8a5200}
.q-tbl .q-pos{color:var(--brand-d)}

/* 推导过程（让企业看得懂怎么来的） */
.q-steps{font-size:13px;line-height:2;color:var(--ink-2);background:var(--chip);
  border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:16px}
.q-steps code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:12.3px;color:var(--ink-1);
}
.q-steps .q-step{margin:5px 0}

/* 提示条 */
.q-tip{
  font-size:12.5px;line-height:1.8;color:var(--ink-2);
  border-top:1px solid var(--line-soft);padding-top:14px;margin-top:6px;
}
.q-tip b{color:var(--ink-1)}

/* ── 算法与依据 ── */
.q-method{
  margin-top:24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:0 22px;
}
.q-method summary{
  cursor:pointer;padding:18px 0;font-size:15px;font-weight:600;color:var(--ink-1);
  list-style:none;
}
.q-method summary::-webkit-details-marker{display:none}
.q-method summary::before{content:"▸ ";color:var(--brand);font-weight:700}
.q-method[open] summary::before{content:"▾ "}
.q-method-body{padding:0 0 20px;font-size:13px;line-height:1.95;color:var(--ink-2)}
.q-method-body h4{font-size:13.5px;color:var(--ink-1);margin:16px 0 7px;font-weight:650}
.q-method-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--chip);border-radius:5px;padding:1px 6px;font-size:12.3px;color:var(--ink-1);
}
.q-method-body ul{margin:6px 0;padding-left:20px}
.q-method-body li{margin:4px 0}
.q-method-body table{width:100%;border-collapse:collapse;font-size:12.6px;margin:8px 0 12px}
.q-method-body th,.q-method-body td{border:1px solid var(--line);padding:7px 9px;text-align:right}
.q-method-body th:first-child,.q-method-body td:first-child{text-align:left}
.q-method-body th{background:var(--chip);font-weight:600;color:var(--ink-2)}

/* ── 免责声明 ── */
.q-disc{
  font-size:12.3px;line-height:1.9;color:var(--ink-3);margin:20px 0 6px;
  border-left:3px solid var(--line);padding-left:14px;
}
.q-disc b{color:var(--ink-2)}

/* ── 特殊情形（方案 三(三)）──────────────────────────────
   特殊情形是**逐台**判定的：命中那一台的配额直接等于其排放量。
   视觉上要一眼看出「这一行不走公式」，否则用户会拿不生效的公式列去对账。 */
.q-special-field{grid-column:1 / -1}
.q-special-field select{background:var(--warn-soft)}
.q-tbl tr.q-row-special{background:var(--warn-soft)}
.q-tbl tr.q-row-special td{color:var(--ink-2);font-style:normal}
.q-tag-sp{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:11px;line-height:1.7;font-style:normal;
  background:var(--warn-soft);color:var(--ink-2);
  border:1px solid var(--line);white-space:nowrap;
}

/* ── 机组类别判定依据（附件2 表2-1「主体燃料类型」「是否合并机组」的落点）──────
   这两个官方字段**不进任何公式**，但类别选错 = 取错基准值：
   Ⅱ↔Ⅲ 相差 0.0145 tCO₂/MWh，100 万 MWh 就是 1.45 万吨（约 142 万元）。
   所以在**行内网格下方**把当前选中的类别实时反解成判定三要素 + 两类基准值，
   让用户能逐项核对。回显内容全部来自引擎 Q.UNIT_MAP，本文件只管样子。

   放在网格下方而不是塞进某个 .field 里：格宽只有约 300px，长值必然断词、
   5 项要占 10 行；放在 .q-row 直下就是整行宽（约 980px），两行内排完，
   而且完全不动表单网格本身。 */
.q-basis{
  margin-top:12px;padding:10px 12px;background:var(--blue-soft);
  border:1px solid rgba(0,113,227,.22);border-radius:var(--radius-sm);
  font-size:12.2px;line-height:1.7;color:var(--ink-2);
}
.q-basis:empty{display:none}
.q-basis .q-basis-t{
  font-weight:650;color:var(--blue-d);margin-bottom:6px;font-size:12px;
}
/* 横向流式「标签 值」小块：靠整行宽度自然折行，不设固定标签宽（否则长值断词） */
.q-basis .q-basis-i{display:inline-flex;align-items:baseline;gap:6px;margin:4px 18px 4px 0}
.q-basis .q-basis-i i{font-style:normal;color:var(--ink-3);flex:0 0 auto}

/* 结果表「机组类别」单元格里的那一行小字回显（同一份判定依据，压缩成一行） */
.q-basis-sm{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);margin-top:3px;line-height:1.55}

/* 逐台填报提示：在进表单之前就该看到，所以不用 .q-tip 的上分隔线样式 */
.q-rowtip{
  border-top:0;border:1px solid rgba(255,159,10,.35);background:var(--warn-soft);
  color:#7a4d00;border-radius:var(--radius-sm);padding:11px 14px;margin:0 0 14px;
}
.q-rowtip b{color:#5c3a00}

/* ── 小屏 ── */
@media (max-width:640px){
  .q-result{padding:18px 16px;border-radius:var(--radius-sm)}
  .q-cards{grid-template-columns:1fr 1fr}
  .q-card .v{font-size:18px}
  .q-quick-row{grid-template-columns:1fr}
  .q-method{padding:0 16px}
  .q-tag-sp{display:block;margin:4px 0 0}
}

/* ── 配额发放链条（核定 → 实发）──────────────────────────────
   附件2 表2-5 注3/5/6/7/8 的逐项链条，本质是一张对账表：
   左列项目、中列数量、右列官方依据。末行「⑥ 实发配额合计」才是企业实际到手的数，
   所以单独加底色与加粗，避免用户只看「核定配额」就以为到手这么多。 */
.q-tbl.q-chain td:nth-child(2){white-space:nowrap;font-weight:600}
.q-tbl.q-chain .q-chain-src{
  text-align:left;font-size:11.8px;color:var(--ink-3);line-height:1.6;
  font-variant-numeric:normal;font-weight:400;max-width:360px;
}
.q-tbl.q-chain tr.q-chain-sum{background:var(--blue-soft)}
.q-tbl.q-chain tr.q-chain-sum td{font-weight:700;color:var(--blue-d);border-bottom:0}
.q-tbl.q-chain tr.q-chain-sum td:first-child{font-size:13.4px}

@media (max-width:640px){
  /* 小屏优先保证「项目 + 数量」两列可读，依据列整体让位 */
  .q-tbl.q-chain th:nth-child(3),.q-tbl.q-chain td:nth-child(3){display:none}
  .q-tbl.q-chain td:nth-child(2){font-size:12.6px}
  /* 判定依据：窄屏上一行放不下「标签 + 值」，改为标签在上、值在下，逐项竖排更好读 */
  .q-basis .q-basis-i{display:block;margin:5px 0}
  .q-basis .q-basis-i i{display:block;margin-bottom:1px}
}