/*
 * components.css —— offer-card / city-picker / charts 组件样式（T8 收口）。
 *
 * 视觉 1:1 参考权威源小程序 wxss（rpx×0.5 换算为 px），配色一律引用 tokens.css 变量。
 * 组件 class 名与小程序组件保持一致（.offer-card / .picker / .bc / .sb 等）。
 */

/* ============ offer-card 录入卡片 ============ */
.offer-card {
  background: #fff;
  border-radius: 14px;                /* 28rpx */
  margin: 0 14px 14px;                /* 28rpx / 28rpx */
  box-shadow: 0 2px 8px rgba(30, 40, 80, 0.06);
  overflow: hidden;
  border: 1px solid #F4F5F8;
}
.offer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid #ECEEF2;
}
.offer-badge {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.offer-head .ttl { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.offer-head .sub { display: block; font-size: 11px; color: #A6ABBA; font-weight: 400; margin-top: 1px; }
.offer-del {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #A6ABBA; background: #F6F7F9; font-size: 15px; cursor: pointer;
}
.offer-del-ph { width: 28px; height: 28px; flex: none; }

.group { border-bottom: 1px solid #F4F5F8; }
.group:last-child { border-bottom: none; }
.group-head { display: flex; align-items: center; gap: 6px; padding: 11px 14px; cursor: pointer; }
.gdot { width: 5px; height: 5px; border-radius: 2px; background: var(--c-a); flex: none; }
.group-head .gt { font-size: 14px; font-weight: 600; }
.group-head .gc { margin-left: auto; color: #A6ABBA; font-size: 12px; transition: transform .3s; }
.group.collapsed .gc { transform: rotate(-90deg); }
/* C2c：旧 WebView 不支持 grid-template-rows 0fr↔1fr 过渡，展开组会被压成高度 0 裁切导致 seg 点不到。
   改用 max-height 过渡（兼容方案 A），彻底规避裁切。 */
.group-body { max-height: 2000px; overflow: hidden; transition: max-height .3s ease; }
.group.collapsed .group-body { max-height: 0; }
.group-inner { overflow: hidden; padding: 0 14px 11px; }

.field { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F4F5F8; }
.field:last-child { border-bottom: none; }
.fl { font-size: 13.5px; color: #6B7080; flex: none; width: 90px; }
.fl .req { color: #FF5470; margin-left: 2px; }
.fl .req-hint { color: #FF5470; margin-left: 6px; font-size: 11px; }
/* C2a：必填分段且未选时，「*请选择」换行到标签下方（.fl 固定 90px，避免挤在一行被截断） */
.fl .fl-hint { display: block; margin-top: 3px; }
.fv { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
.unit { font-size: 11px; color: #A6ABBA; flex: none; }

/* 文本/数字输入：flex 占满剩余空间，右对齐（等价小程序 .inp width:100%） */
.inp {
  flex: 1; min-width: 0;
  font-size: 14px; color: #1A1A1E; text-align: right;
  border: none; outline: none; background: transparent;
  font-family: inherit;
}
.picker-val { font-size: 14px; color: #1A1A1E; text-align: right; background: transparent; }

/* offer-card 分段控件容器（注意：与 questionnaire 的 .seg 单步药丸通过 .fv / .scale 作用域区分） */
.fv .seg { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.seg-btn { font-size: 12px; color: #6B7080; padding: 5px 10px; border-radius: 6px; background: #F6F7F9; line-height: 1.2; text-align: center; cursor: pointer; }
.seg-btn.on { background: #EAF2FF; color: var(--c-a); font-weight: 600; }

/* 开关 */
.switch { width: 44px; height: 26px; border-radius: 14px; background: #E2E5EC; position: relative; flex: none; cursor: pointer; transition: background .2s; }
.switch.on { background: var(--c-a); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.on::after { transform: translateX(18px); }

/* 专项附加扣除：多选卡片 */
.checks { display: flex; flex-wrap: wrap; gap: 5px; }
.check-card { border: 1px solid #e6e9ef; border-radius: 6px; padding: 4px 7px; background: #f5f6f8; cursor: pointer; }
.check-card.on { border-color: var(--c-a); background: #eaf2fe; }
.cc-text { font-size: 11px; color: #5a6070; line-height: 1.2; }
.check-card.on .cc-text { color: var(--c-a); font-weight: 600; }

/* 喜爱度心形 */
.hearts { display: flex; align-items: center; gap: 4px; }
.hearts .h { font-size: 18px; color: #E2E5EC; line-height: 1; cursor: pointer; }
.hearts .h.filled { color: #FF5470; }
.hearts .hl { font-size: 12px; color: #FF5470; font-weight: 700; margin-left: 3px; }

/* 城市字段 */
.city-field { display: flex; align-items: center; gap: 3px; color: #1A1A1E; padding: 2px 0; justify-content: flex-end; cursor: pointer; }
.city-field .cv { font-weight: 600; }
.city-field .cv-ph { color: #A6ABBA; }
.city-field .chev { color: #A6ABBA; font-size: 16px; }

/* 城市联动 chip（仅基础信息分组） */
.city-link { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.city-link .chip { font-size: 11px; color: #6B7080; background: #F6F7F9; border: 1px solid #ECEEF2; border-radius: 6px; padding: 4px 7px; }
.city-link .chip .b { color: #1A1A1E; font-weight: 600; }
.chip-hint { font-size: 11px; color: #A6ABBA; }

/* 数字双输入：后缀年数 */
.suffix { font-size: 12px; color: #6B7080; flex: none; }
.sub-inp { width: 36px; min-width: 30px; text-align: center; padding: 0; flex: none; }

/* ============ city-picker 城市选择弹层 ============ */
.picker {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: var(--bg); z-index: 100;
  display: flex; flex-direction: column;
}
.picker-bar { display: flex; align-items: center; gap: 6px; padding: 44px 14px 8px; }
.back { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #1A1A1E; font-size: 24px; cursor: pointer; }
.pt { font-size: 17px; font-weight: 700; flex: 1; }
.picker-search { padding: 0 14px 8px; }
.search-inp { width: 100%; height: 40px; background: #fff; border-radius: 10px; padding: 0 14px; font-size: 14px; box-sizing: border-box; border: 1px solid #ECEEF2; font-family: inherit; }
.picker-body { flex: 1; display: flex; position: relative; overflow: hidden; }
.picker-list { flex: 1; padding: 0 14px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sec-h { position: sticky; top: 0; margin: 0; padding: 8px 2px; font-size: 13px; font-weight: 800; color: var(--c-a); background: var(--bg); z-index: 1; }
.city-item { display: flex; align-items: center; padding: 13px 6px; font-size: 15px; color: #1A1A1E; border-bottom: 1px solid #F4F5F8; cursor: pointer; }
.city-item:active { background: #F6F7F9; }
.city-empty { padding: 40px 10px; text-align: center; color: #A6ABBA; font-size: 14px; }
.picker-index { position: absolute; right: 4px; top: 6px; bottom: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; }
.idx-letter { font-size: 11px; font-weight: 700; color: #A6ABBA; width: 18px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; }
.idx-letter:active { background: #E3E6EE; }

/* ============ charts 容器（charts.js 内联样式已自包含，这里补外层布局）============ */
.chart-box { padding: 6px 8px 2px; box-sizing: border-box; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 3px 0 4px; font-size: 11px; color: #6B7080; }
.legend-item { display: flex; align-items: center; gap: 3px; }
.legend .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* canvas 图表容器宽度铺满、给定高度（report.js 内联也设了，这里兜底） */
.lc-canvas, .rc-canvas { display: block; width: 100%; }

/* ============ bar-chart（.bc）—— 同时供 charts.js barChart 与 questionnaire 占比条 ============ */
.bc { padding: 3px 0; box-sizing: border-box; }
.bc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.bc-label { width: 40px; text-align: center; font-weight: 700; font-size: 13px; flex: none; }
.bc-track { flex: 1; min-width: 200px; height: 18px; border-radius: 5px; background: #F4F5F8; overflow: hidden; display: flex; align-items: center; }
.bc-fill { height: 100%; border-radius: 5px; display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; color: #fff; font-size: 11px; font-weight: 600; transition: width .9s cubic-bezier(.22,1,.36,1); min-width: 4px; box-sizing: border-box; }
.bc-stack { height: 100%; display: flex; border-radius: 5px; overflow: hidden; transition: width .9s cubic-bezier(.22,1,.36,1); }
.bc-seg { height: 100%; }
.bc-legend { width: 100%; font-size: 11px; color: #A6ABBA; padding-left: 52px; }
.bc-legend-foot { font-size: 11px; color: #6B7080; padding: 6px 0 0 52px; box-sizing: border-box; }
.bc-legend-foot .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: -2px; margin-right: 3px; }

/* ============ score-bar（.sb）============ */
.sb-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.sb-letter { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; }
.sb-track { flex: 1; height: 8px; border-radius: 999px; background: #ECEEF2; overflow: hidden; }
.sb-fill { height: 100%; border-radius: 999px; transition: width .9s cubic-bezier(.22,1,.36,1); min-width: 4px; }
.sb-fill.tier-good { background: linear-gradient(90deg, #2BD98A, #1FB877); }
.sb-fill.tier-mid { background: linear-gradient(90deg, #FFD06B, #F4B740); }
.sb-fill.tier-hard { background: linear-gradient(90deg, #FFB071, #FF8A4C); }
.sb-fill.tier-bad { background: linear-gradient(90deg, #FF8AA0, #FF5470); }
.sb-val { flex: none; font-size: 12px; color: #6B7080; min-width: 150px; text-align: right; }

/* charts.js 内联 dot（图例小圆点）全局兜底 */
.oc-dot { display: inline-block; }