/* SkiReport 样章组件库 —— 报告 phone 容器内部样式。
   移植自样章 2026-07-07-ski_ai-L1-report-sample-Lite-Pro-v0.1.html,
   全部选择器锚定 .phone 命名空间(不污染工作台 .station 区)。
   品牌:INK #0A2540 / BLUE #1A5FA8 / CYAN #0AA0C2 + 样章扩展 paper/amber/num。 */

/* 纸面舞台:样章的 phone 浮在 --paper 灰底上;工作台卡片纯白,白上白只剩阴影分隔,
   观感悬空。stage 复刻样章底色,给 phone 一块自己的地面。 */
.phone-stage{background:#F2F5F9;border-radius:16px;padding:24px 12px;margin-top:14px}

.phone{
  --p-ink:#0A2540; --p-blue:#1A5FA8; --p-cyan:#0AA0C2;
  --p-paper:#F2F5F9; --p-muted:#5A6B80; --p-line:#E3E9F1; --p-amber:#E8A13C;
  --num:"DIN Alternate","Bahnschrift","Barlow Condensed","Arial Narrow",sans-serif;
  width:100%; max-width:400px; margin:0 auto;
  background:#fff; border-radius:20px;
  box-shadow:0 12px 40px rgba(10,37,64,.12);
  overflow:hidden; color:var(--p-ink); line-height:1.6;
}

/* ---------- band 头部 ---------- */
.phone .band{background:linear-gradient(135deg,var(--p-ink) 0%,var(--p-blue) 100%);color:#fff;padding:22px 22px 18px;position:relative;overflow:hidden}
.phone .band::after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(10,160,194,.45),transparent 70%)}
.phone .band::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:100%;background:linear-gradient(to top right,transparent calc(60% - 1px),rgba(255,255,255,.10) calc(60% - 1px),rgba(255,255,255,.10) 60%,transparent 60%);pointer-events:none}
.phone .band .brow{font-size:11px;letter-spacing:.28em;opacity:.72;margin-bottom:6px;position:relative}
.phone .band h1{font-size:21px;font-weight:900;letter-spacing:.02em;position:relative;line-height:1.35}
.phone .band .meta{font-size:12px;opacity:.82;margin-top:8px;position:relative}
.phone .band .meta b{font-weight:700}
.phone .band .meta .dot{margin:0 6px;opacity:.5}
/* 声明徽章用 p-chip 独立类名:工作台切趟区已占用 .chip(蓝字/mono),撞类会泄漏配色与字体 */
.phone .band .p-chip{display:inline-block;font-size:11px;font-weight:700;color:#fff;font-family:inherit;padding:3px 10px;border-radius:999px;background:rgba(10,160,194,.25);border:1px solid rgba(10,160,194,.6);margin-top:10px;position:relative}

/* ---------- section 骨架 ---------- */
.phone section{padding:18px 22px;border-bottom:1px solid var(--p-line)}
.phone section:last-of-type{border-bottom:0}
.phone .sec-t{font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--p-blue);margin-bottom:12px}
.phone .sec-t small{letter-spacing:0;font-weight:500;color:var(--p-muted);float:right}
.phone .txt{white-space:pre-wrap;font-size:13px;line-height:1.85}

/* ---------- item / tip / voice(样章同款) ---------- */
.phone .item{background:var(--p-paper);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.phone .item:last-child{margin-bottom:0}
.phone .item .head{display:flex;align-items:baseline;gap:8px}
.phone .item .head .nm{font-size:14px;font-weight:800}
.phone .item .obs{font-size:12px;color:var(--p-muted);margin-top:5px;white-space:pre-wrap}
.phone .tipbox{font-size:12.5px;white-space:pre-wrap;background:var(--p-paper);border-left:3px solid var(--p-amber);border-radius:0 10px 10px 0;padding:9px 12px;line-height:1.8}
.phone .voice{background:linear-gradient(180deg,#F6FBFD,#EFF6FA);border:1px solid #DCEBF2;border-radius:14px;padding:14px 16px}
.phone .voice .who{font-size:11px;font-weight:800;color:var(--p-cyan);letter-spacing:.18em;margin-bottom:6px}
.phone .voice p{font-size:13px;line-height:1.85;white-space:pre-wrap}

/* ---------- 实测数据(三档语义样式) ---------- */
.phone .p-item{display:flex;justify-content:space-between;gap:10px;align-items:baseline;background:var(--p-paper);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.phone .p-k{font-size:12px;color:var(--p-muted)}
.phone .p-v{text-align:right}
.phone .p-v b{font-family:var(--num);font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.phone .p-v i{font-style:normal;font-size:11px;color:var(--p-muted);margin-left:6px}
.phone .tag-limited{display:inline-block;font-size:10.5px;color:#8a6d1a;background:#FBF3DC;border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:2px}
.phone .p-na{font-size:12px;color:#93A3B5}
.phone .p-item .p-na{text-align:right}
.phone .p-note{font-size:11px;color:#93A3B5;margin-top:8px}

/* ---------- 姿态快照 ---------- */
.phone .snaps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone .snaps .snap{margin:0;border-radius:10px;overflow:hidden;background:var(--p-paper)}
.phone .snaps img{display:block;width:100%;height:auto}
.phone .snaps figcaption{font-family:var(--num);font-size:10.5px;color:var(--p-muted);padding:4px 8px;text-align:center}

/* ---------- 整体评定逐趟卡 ---------- */
.phone .runs details.run-card{border-bottom:1px solid var(--p-line)}
.phone .runs details.run-card:last-of-type{border-bottom:0}
.phone .runs summary{display:flex;gap:10px;align-items:baseline;padding:14px 22px;cursor:pointer;list-style:none}
.phone .runs summary::-webkit-details-marker{display:none}
.phone .runs summary::after{content:"▾";margin-left:auto;color:var(--p-muted);font-size:12px}
.phone .runs details[open] summary::after{content:"▴"}
.phone .runs .r-idx{font-weight:800;font-size:14px}
.phone .runs .r-t{font-family:var(--num);font-size:12px;color:var(--p-muted)}
.phone .runs .r-lv{font-size:12px;font-weight:700;color:var(--p-cyan);background:#EAF6F9;border:1px solid #C4E6EF;border-radius:999px;padding:2px 9px}

/* ---------- 反馈行容器 / 页脚 ---------- */
.phone .fb-sec{background:var(--p-paper)}
.phone footer{margin-top:0;border-top:0;padding:14px 22px 20px;font-size:10.5px;color:#93A3B5;line-height:1.7}

/* ---- 逐弯分析 ---- */
.phone .tn-stats{display:flex;gap:20px;flex-wrap:wrap;margin:10px 0 12px}
.phone .tn-stat b{font-size:22px;font-family:'DIN Alternate','Bahnschrift',sans-serif;color:var(--ink,#0A2540)}
.phone .tn-stat span{display:block;font-size:12px;color:#5a6b7f;margin-top:2px}
.phone .tn-bar{display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px}
.phone .tn-seg{min-width:6px;border-radius:3px}
.phone .tn-seg.dir-a{background:#1A5FA8}
.phone .tn-seg.dir-b{background:#0AA0C2}
.phone .tn-seg.bs{box-shadow:inset 0 -7px 0 rgba(217,90,60,.85)}
.phone .tn-legend{display:flex;gap:14px;align-items:center;font-size:12px;color:#5a6b7f;margin-top:8px}
.phone .tn-legend .lg{width:14px;height:10px;border-radius:3px;display:inline-block;margin-right:4px}
.phone .tn-legend .lg.dir-a{background:#1A5FA8}
.phone .tn-legend .lg.dir-b{background:#0AA0C2}
.phone .tn-legend .lg.bs{background:rgba(217,90,60,.85)}

/* ---- C Lite 轨迹指标(弯型分档条高 + 轨迹线) ---- */
.phone .tn-bar{align-items:flex-end}
.phone .tn-seg{height:100%}
.phone .tn-seg.sz-s{height:42%}
.phone .tn-seg.sz-m{height:70%}
.phone .tn-seg.sz-na{height:55%;opacity:.35}
.phone .tn-trace{display:block;width:100%;height:auto;margin-top:10px}
.phone .tn-trace .tr-mid{stroke:#E3E9F1;stroke-width:1}
.phone .tn-trace .tr-line{stroke:#1A5FA8;stroke-width:1.6;fill:none}
.phone .tn-trace .tr-tick{stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.phone .tn-trace .tr-tick.dir-a{stroke:#1A5FA8}
.phone .tn-trace .tr-tick.dir-b{stroke:#0AA0C2}
