/* ============================================================
   PTRS PWA · 样式层
   ------------------------------------------------------------
   设计令牌（颜色 / 圆角 / 阴影 / 间距）**不在这里重新定义** ——
   直接 @import 原型已验收的 proto.css，保证「真机验收看到的」
   与「真实 PWA 看到的」是同一套视觉契约。

   为什么不复制一份：两份 :root 一定会漂移。转 React 时这两处的
   :root 变量会一起进 tailwind.config 的 theme.extend，届时本文件消失。
   ============================================================ */
@import url("../prototype/proto.css");

/* 日常处理沿用已验收的页头/卡片布局；文字链接保持卡片层次。 */
.workflow-page a.row-main { color: inherit; text-decoration: none; display: block; }
.workflow-page .row-title, .workflow-page .row-sub { overflow-wrap: anywhere; }
.workflow-page .section > .row-sub { margin: 12px var(--pad); line-height: 1.7; }
.workflow-page .appbar .sec-action { border: 0; background: transparent; min-height: 44px; padding: 8px; }
.workflow-page #submit { display: block; width: calc(100% - 2 * var(--pad)); margin: 18px var(--pad); }

/* ---------- live 层：只在真实 PWA 里出现的部件 ---------- */

/* 引擎时效性条（PRD §41：PC 离线必须一眼看出"不是实时"）
   ⚠️ 状态类打在**内层 .dot 上**（见 ui.js engineBarHtml 的返回片段），
   所以选择器必须是 `.dot.ok`，不能写成 `.engine.ok .dot` ——
   后者要求 .engine 自己带 ok 类，而实际从没带上过，规则会静默失效、
   离线与健康都显示同一个灰点。两条都留着是为了兼容两种调用方式。 */
.engine.ok .dot, .dot.ok { background: #1c9668; }
.engine.stale .dot, .dot.stale { background: #a1762a; }
.engine.off .dot, .dot.off, .dot.offline { background: #9aa2ad; }

/* 连接状态胶囊 */
.conn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-3);
}
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }

/* 登录页 */
.login-wrap { max-width: 420px; margin: 0 auto; padding: 40px var(--pad) 0; }
.login-wrap h1 { font-size: 21px; font-weight: 640; margin: 0 0 6px; letter-spacing: -0.01em; }
.login-wrap p.sub { margin: 0 0 26px; color: var(--text-2); font-size: 13.5px; line-height: 1.65; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; }
/* ⚠️ 必须排除 radio / checkbox：.seg 里的单选是「只当状态载体」的隐藏元素
   （proto.css 给的是 position:absolute）。若这里也给它 width:100%，
   就会生成一个宽 100%（移动端 = 390px）、不可见的盒子，把移动端**布局视口
   从 390px 撑到 661px** —— 表现是整页被缩小、右侧空出一大片，且不报任何错。
   2026-09-19 用真 Chromium 量出：new-trade 溢 271px / new-mode 溢 286px。 */
.field input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: var(--sep); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.field input:focus { outline: none; border-color: var(--accent); }

/* 隐藏的选中载体：钉成 1px，绝不参与排布，也就撑不宽页面 */
.seg input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  min-width: 0; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}

/* 待处理 / 离线等状态 pill 在 live 数据里用得更频繁 */
.pill.stale { background: var(--warn-soft); color: var(--warn); }
.pill.pend { background: var(--accent-soft); color: var(--accent); }

/* 空态 */
.empty-live {
  padding: 26px 18px; text-align: center; color: var(--text-3); font-size: 13px;
}
.empty-live b { display: block; color: var(--text-2); font-size: 13.5px; margin-bottom: 5px; font-weight: 580; }

/* 加载中骨架 */
.skeleton { padding: 18px; }
.skeleton i {
  display: block; height: 12px; border-radius: 6px; background: var(--bg-subtle);
  margin-bottom: 9px; animation: sk 1.2s ease-in-out infinite;
}
.skeleton i:nth-child(2) { width: 70%; }
.skeleton i:nth-child(3) { width: 45%; }
@keyframes sk { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* 合约选择器：实时搜索结果的命中高亮 */
.pick-hit { color: var(--accent); font-weight: 620; }

/* ------------------------------------------------------------
   风险刻度档位表（合约明细 / 下单确认用）
   ------------------------------------------------------------
   外层的「反向至 X 触发强平」那块**直接用原型已验证的 .liq**
   （.liq.ok / .warn / .bad 三档配色），这里只补一张档位表 ——
   原型只有一句提示，回答不了「反向 1% 到底亏多少」。
   ------------------------------------------------------------ */
.risk-bands { margin-top: 8px; }
.rb-row {
  display: grid; grid-template-columns: 58px 1fr 1fr;
  gap: 8px; align-items: baseline;
  padding: 6px 0; border-top: var(--sep);
  font-size: 12.5px;
}
.rb-row:first-child { border-top: 0; }
.rb-head {
  color: var(--text-3); font-size: 10.5px; font-weight: 620;
  letter-spacing: .04em; padding-bottom: 3px;
}
.rb-t { color: var(--text-2); }
.rb-px { color: var(--text-2); }
.rb-pnl { text-align: right; }

/* ------------------------------------------------------------
   委托卡片（合约明细页「委托与成交」）
   ------------------------------------------------------------
   同一委托的多笔成交必须收在**一张卡**里。原型与旧版把它按成交逐条铺开，
   于是一张 30 手的单被拆成 30 行 —— 那既看不出「这是哪一单挂出来的」，
   也和上方的逐手明细完全重复。
   ------------------------------------------------------------ */
.ord-card { padding: 12px 0; border-top: var(--sep); }
.ord-card:first-child { border-top: 0; padding-top: 2px; }
.ord-head { display: flex; align-items: baseline; gap: 8px; }
.ord-id {
  font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ord-act { font-size: 14px; font-weight: 600; }
.ord-head .pill { margin-left: auto; }
.ord-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.6; }
.ord-card .lots { margin-top: 2px; }
.ord-card .lot { padding-left: 0; padding-right: 0; }
.ord-card .lot:first-child { border-top: 0; }

/* ------------------------------------------------------------
   挂单行内的操作按钮（撤销 / 改价）
   ------------------------------------------------------------
   必须比 .btn-sm 再小一号：它要和状态 pill 挤在同一行里，
   大了就会换行 —— 而换行会让"哪个按钮属于哪一单"变得不确定。
   ------------------------------------------------------------ */
.ord-btns { display: flex; gap: 6px; flex: none; align-items: center; }
.btn.btn-xs {
  padding: 5px 10px; font-size: 12px;
  border-radius: 7px; line-height: 1.35;
}

/* ------------------------------------------------------------
   设置页分区导航
   ------------------------------------------------------------
   本页事实条目多（运行状态 / 数据质量 / 安全 / 底层说明 / 关于），
   一屏一屏滚下去找不到东西。给一排锚点，不引入任何 JS。
   ------------------------------------------------------------ */
.secnav {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 12px var(--pad) 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.secnav::-webkit-scrollbar { display: none; }
/* 尺寸按「390px 屏上 5 个 chip 全部可见」定：
   12.5px/13px/8px 时合计约 362px，比可用的 354px 只多 8px，
   第 5 个「关于」会被切掉 —— 只差一点点，看着像没做完。
   收成 12px/11px/6px 后约 336px。更窄的屏（360px）仍走横滚降级。 */
.secnav a {
  flex: none; padding: 6px 11px; border-radius: 999px;
  background: var(--surface); border: var(--sep);
  color: var(--text-2); font-size: 12px; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
}
.secnav a:active { background: var(--bg-subtle); }

/* 登录页的「连接目标」一行（原 .spec 容器换成读起来像事实的样式） */
.cfgline {
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--bg-subtle);
  color: var(--text-2); font-size: 12px; line-height: 1.6;
}
.cfgline b { color: var(--text); }

/* ------------------------------------------------------------
   主页持仓卡右下角的「>」：进该合约的下一级页面
   ------------------------------------------------------------
   与持仓页列表里的入口同义。主页没有"选中"这个概念，
   所以整卡仍是去持仓页，只有这个箭头直接下钻。
   ------------------------------------------------------------ */
.row-goto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 4px; flex: none;
  color: var(--text-3); text-decoration: none;
}
.row-goto svg { width: 15px; height: 15px; }
.row-goto:active { color: var(--accent); }

/* ------------------------------------------------------------
   右下角「+」是 fixed 元素，正文必须让出它的高度
   ------------------------------------------------------------
   proto.css 里 body 只让了 TAB 栏（+8px），没算 FAB —— 滚到一屏底部时
   最后一块内容会被「+」压住（实测：「需要留意」那张卡被压掉一角）。
   FAB 顶边在 tabbar-h + 26px + 54px 处，留 92px 才干净。
   只有**真有 FAB 的页面**才需要这段留白：原来是
   `body:not(.no-tab):not(.has-dock)`，会把「我的」也捎带上，
   而「我的」并没有 FAB —— 白多 92px，滚到底多出一段空白。
   现在由页面自己声明（index.html 的 body 带 class="has-fab"）。
   有悬浮下单条的页面另有 .has-dock（168px），两者互斥。
   ------------------------------------------------------------ */
body.has-fab {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 92px);
}

/* ---------- 时间线（想法详情 / 交易详情共用） ----------
   为什么不用 .row：.row 是"可点的一整行"，而时间线条目不可点、且需要
   左侧固定的时间槽来形成视觉纵轴。两者语义不同，硬套会让点击区域出错。 */
.tl { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--border); }
.tl:first-child { border-top: 0; }
.tl-time { flex: 0 0 76px; font-size: 12px; color: var(--text-3); padding-top: 2px; line-height: 1.35; }
.tl-body { flex: 1 1 auto; min-width: 0; }
.tl-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.tl-text { margin-top: 5px; font-size: 14px; color: var(--text-2); line-height: 1.62; word-break: break-word; }
.tl-meta { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
/* 成交/风险这类"数字型"条目：金额不换行，避免在 390px 上折断 */
.tl-amt { margin-top: 5px; font-size: 13.5px; }

/* 技术详情折叠：默认收起、字号压小 —— 它给排错用，不该抢主线信息 */
.tl-tech { margin-top: 6px; }
.tl-tech > summary { font-size: 12.5px; color: var(--text-3); cursor: pointer; }
.tl-tech .tl-meta { margin-top: 4px; font-size: 12px; line-height: 1.6; word-break: break-all; }

/* ============================================================
   资金曲线（analytics.html）
   ------------------------------------------------------------
   刻意不引图表库：这里只有一条折线 + 一条基准虚线。为它引一个 200KB 的库，
   代价是首屏变慢、离线资源变多，收益是零。

   用 viewBox **等比**缩放（不设 preserveAspectRatio="none"）：
   一旦允许拉伸，线宽会跟着横纵比变粗变细，看起来像渲染坏了。
   ============================================================ */
.curve-box { padding: 12px 14px 14px; }
.curve-svg { display: block; width: 100%; height: auto; }
.curve-line {
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
}
.curve-area { fill: var(--accent-soft); stroke: none; }
.curve-base {
  fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3;
}
.curve-dot { fill: var(--accent); }
.curve-meta {
  display: flex; gap: 12px; font-size: 11.5px; color: var(--text-3); margin-top: 7px;
}
.curve-meta b { font-weight: 600; color: var(--text-2); }
.curve-empty { padding: 20px 4px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* 设置页长说明在窄屏必须按可用宽度换行，不让状态胶囊挤压正文。 */
.settings-page .row-main, .settings-page .row-sub, .settings-page .row-title {
  min-width: 0; overflow-wrap: anywhere; word-break: normal;
}
.settings-page .row { align-items: flex-start; }
.settings-page .row > .pill { flex: none; max-width: 38%; text-align: center; white-space: normal; }
@media (max-width: 360px) {
  .settings-page .row { flex-wrap: wrap; gap: 6px 9px; }
  .settings-page .row > .pill { max-width: 100%; }
}

/* 普通用户可读的说明与更紧凑的交易表单。 */
.settings-page .row { padding-top: 13px; padding-bottom: 13px; gap: 12px; }
.settings-page .row-sub { color: var(--text-2); font-size: 13px; line-height: 1.65; margin-top: 5px; }
.settings-page .row > .pill { max-width: 30%; margin-top: 2px; font-size: 11.5px; }
.settings-explainer { margin: 0 var(--pad); }
.settings-explainer > summary { padding: 14px 15px; border: var(--sep); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-size: 13px; cursor: pointer; line-height: 1.5; }
.settings-explainer[open] > summary { margin-bottom: 8px; }
.settings-explainer .group { margin-left: 0; margin-right: 0; }
.new-trade-page .section { margin-top: 8px; }
.new-trade-page .field { padding: 11px 14px; }
.new-trade-page .field-label { margin-bottom: 7px; }
.new-trade-page .row-sub, .new-trade-page .row-note { color: var(--text-2); line-height: 1.5; }
.new-trade-page .pickbtn { gap: 10px; min-height: 56px; }
.new-trade-page .pickbtn .row-main { min-width: 0; }
.new-trade-page .pickbtn .row-sub { overflow-wrap: anywhere; }
@media (max-width: 360px) { .settings-page .row > .pill { max-width: 100%; } }

/* Required-parameter notice; shared by new order and maintenance screens. */
.note { padding: 12px 16px; margin: 12px 16px; border-radius: 10px; background: #fff6e7; color: #76501e; font-size: 13px; line-height: 1.6; }