/* hud.adapt.css — 本页自己的规则。
   hud/ 里的七个资产逐字未改（inject.py 拷的），系统那套纪律在这里同样生效：
   只引令牌、圆角恒 0、数字等宽、切角尺寸用 --c 局部覆盖。
   刻意不重定义 --hud-cut —— 同名令牌出现两个定义点正是审计规则四要抓的坑。 */

/* 本层给 .ledger / .empty 写了 display，会盖掉 UA 的 [hidden]{display:none} ——
   于是 hidden 属性形同虚设（实测：有卡时空态照样画在卡片下面）。
   这两条必须留着，加新容器时也要一并检查。 */
.empty[hidden], .ledger[hidden] { display: none; }

/* ---------- 骨架 ---------- */
.hud-content { padding: clamp(20px, 4vw, 40px) 16px 48px; }
.top, main, .foot { max-width: 900px; margin-left: auto; margin-right: auto; }

.top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: var(--hud-gap);
}
.top__id { display: flex; flex-direction: column; gap: 4px; }
.top__tools { display: flex; gap: 8px; flex-wrap: wrap; }

main { display: flex; flex-direction: column; gap: var(--hud-gap); }
.stamp { margin-left: auto; }

.foot { display: flex; flex-direction: column; gap: 6px; margin-top: var(--hud-gap); }
.foot .mono { color: var(--hud-ink-2); }
.mono { font-family: var(--hud-mono); }

/* ---------- 账本行：一行一张卡 ----------
   一张卡是五格：序号 / 名称 / 标识 / 指标 / 控件。名字和标识分成两格，跨行就能各成
   一列对齐（以前它们挤在一个 .led__ident 里，标识跟着名字长短左右乱跑）。

   列对齐用 **subgrid**：.ledger 是唯一的网格，每行 span 全部列并
   `grid-template-columns: subgrid`，于是所有行共用同一组列轨道 —— 序号、名称、标识、
   指标的左边缘逐行对齐，而 .led 自己也还有盒子（hover 高亮、拖拽落点线、行内编辑
   都还要它），比 display:contents 那种「把行拆掉」的做法多留了一层。

   刻意不给 .led 写左右内边距：subgrid 的轨道要对齐到父网格的列线上，行盒再缩进
   就会连着轨道一起偏，逐行对齐也就散了。要留白就留给 .ledger 或外层面板。 */
.ledger {
  display: grid;
  grid-template-columns: 26px minmax(0, 22ch) max-content minmax(0, 1fr) max-content;
  column-gap: 14px;
}
.led {
  position: relative;
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hud-line-2);
}
.led:last-child { border-bottom: 0; }
.led:hover { background: var(--hud-a04); }

.led__idx { color: var(--hud-ink-4); }
/* 一列装不下就省略号，别把行撑开；完整名字挂在 title 上，桌面端悬停能看全。 */
.led__name { color: var(--hud-ink-1); font-weight: 600; min-width: 0; }
/* 标识列宽 = 最宽的那个（max-content 轨道是全网格共用的），短标识左对齐留白，
   不在行与行之间左右游移。 */
.led__prov { flex: none; justify-self: start; }

.led__metric {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  min-width: 0;
}
.led__idx, .led__metric, .m-val, .tier__v {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.m-val {
  font-family: var(--hud-mono); font-size: 1.05rem; font-weight: 700;
  color: var(--hud-ink-1); min-width: 5ch; text-align: right;   /* 数值跳动不推挤 */
}
.cur { font-family: var(--hud-mono); font-size: var(--hud-fs-label); color: var(--hud-accent); }

/* 数值变了闪一下：只是强调，数字本身一直在（保险丝一） */
.is-changed { animation: hud-flicker var(--hud-dur-3) var(--hud-ease-out) 2; }

/* ---------- 行控件 ---------- */
.led__acts { display: flex; gap: 4px; opacity: 0; transition: opacity var(--hud-dur-1) var(--hud-ease-out); }
.led:hover .led__acts, .led:focus-within .led__acts { opacity: 1; }
@media (hover: none) { .led__acts { opacity: 1; } }   /* 触摸屏没有 hover，直接常显 */

.led__acts .hud-btn { padding: 3px 8px; font-size: var(--hud-fs-micro); }
/* 删除只在悬停时才变红 —— 静止态满屏红按钮会把层级塌成噪声（令牌文档第四节） */
.is-del:hover {
  border-color: color-mix(in srgb, var(--hud-danger) 60%, transparent);
  color: var(--hud-danger);
  background: color-mix(in srgb, var(--hud-danger) 12%, transparent);
}

/* ---------- OpenCode 三级额度：一档一行 ----------
   每一档是「标签 / 条 / 百分比 / 刷新时刻＋倒计时」四格。.tier 用 display:contents 让
   四格直接落进外层网格，省掉一层嵌套盒。 */
/* 最后一列给**固定**宽度，不用 max-content（以前是 minmax(110px,max-content)）：
   max-content 会让「有刷新时刻」和「没有刷新时刻」的两张卡算出不同宽度的网格
   （实测 251 / 143 / 286px），四列各自错位。现在四列全是定值 ⇒ 每行的 .tiers 等宽，
   又在 .led__metric 里右对齐 ⇒ 左边缘也一致，条、百分比、时刻三列逐行对齐。
   代价是时刻那一格最宽只能到这么多，超了就在格内折行（.tier__t 允许折，两个 span 不折）。 */
.tiers {
  display: grid;
  grid-template-columns: 20px 60px 4ch 200px;
  align-items: center; gap: 5px 10px;
}
.tier { display: contents; }
.tiers .hud-bar { width: 100%; }

/* 轨道和填充在我们的标记里都是 <span>，而资产只给了 height/background/transition：
   .hud-bar__fill 没有 display、也没有 width —— 那是按块级盒（<div>）写的规格。
   行内盒上 width/height 一律被忽略，于是填充恒为 0×0：空的行内盒连背景都不画，
   看起来就是「条永远是空的」。实测 98% 也是 0px。
   .hud-bar 自己躲过了这一劫，仅仅因为 .tier 是 display:contents、它成了网格项而被
   块级化；再往里一层的填充没有这层庇护。这里补回块级盒，只在本层补，不动资产。 */
.hud-bar, .hud-bar__fill { display: block; }

.tier__v {
  font-family: var(--hud-mono); font-size: var(--hud-fs-label);
  color: var(--hud-ink-1); text-align: right;
}
.tier__v.is-mid { color: var(--hud-warn); }
.tier__v.is-hi  { color: var(--hud-danger); }
/* 时刻和倒计时各自 nowrap —— 「9/29 00:00 刷新」不许被拆两行，「（3小时5分钟后）」同理。
   装不下时整个 .tier__t 折行，两块各占一行，不会在数字或单位中间断开。 */
.tier__t { display: flex; flex-wrap: wrap; align-items: baseline; }
.tier__at, .tier__in { white-space: nowrap; }

/* ---------- 空态 ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 0 10px; text-align: center;
}

/* ---------- 拖拽落点 ---------- */
.led.is-dragging { opacity: .4; }
.led.drop-before::before, .led.drop-after::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--hud-accent);
}
.led.drop-before::before { top: -1px; }
.led.drop-after::after  { bottom: -1px; }

/* ---------- 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.form__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.form__key, .form__act { display: flex; align-items: center; gap: 12px; }
.form__msg { color: var(--hud-warn); }
.form__msg:empty { display: none; }   /* 没话可说时别占一行 */
/* 不压不许折：窄容器里「显示」会被挤成竖排 */
.hud-toggle { flex: none; white-space: nowrap; }

.fld {
  width: 100%; padding: 8px 10px; border-radius: 0;
  background: var(--hud-bg-3); border: 1px solid var(--hud-line-1);
  color: var(--hud-ink-1); font-family: var(--hud-mono); font-size: var(--hud-fs-body);
  transition: border-color var(--hud-dur-1) var(--hud-ease-out),
              background var(--hud-dur-1) var(--hud-ease-out);
}
.fld::placeholder { color: var(--hud-ink-4); }
.fld:focus { outline: none; border-color: var(--hud-a52); background: var(--hud-bg-4); }
.fld--rename { padding: 4px 8px; }

/* ---------- 口令对话框 ---------- */
.dlg { border: 0; padding: 0; background: transparent; color: var(--hud-ink-1); }
.dlg::backdrop { background: rgba(0, 0, 0, .66); }   /* 光学压暗，不是设计色 */
.dlg__in {
  display: flex; flex-direction: column; gap: 12px;
  width: min(420px, 88vw); padding: var(--hud-pad); border-radius: 0;
  background: var(--hud-bg-2); border: 1px solid var(--hud-line-1);
  clip-path: var(--cut-tl-br);
}
.dlg__in--form { width: min(520px, 92vw); }   /* 添加表单比口令框宽，装得下一行服务商 */
.dlg__hint { margin: 0; }
.dlg__remember { align-self: flex-start; }
.dlg__act { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- 切角尺寸阶梯 ----------
   模板（--cut-*）在**引用点**解析 var(--c)，所以尺寸靠局部覆盖 --c 来给，
   而不是重定义 --hud-cut —— 后者会在 tokens.css 之外多出一个定义点（审计规则四）。
   值一律取 tokens.css 里已有的阶梯令牌，不另造数字；40px 高的芯片用 12px 会像坏了。 */
.hud-panel, .dlg__in { --c: 12px; }                   /* 面板档：阶梯上限 */
.hud-btn, .hud-seg   { --c: var(--hud-cut-btn); }     /* 控件档；分段控件整组切一次，内部项不切 */
.hud-chip            { --c: var(--hud-cut-sm); }      /* 小容器档 */
.led__acts .hud-btn  { --c: var(--hud-cut-sm); }      /* 行内小按钮再降一档 */

/* ---------- 打印降级 ----------
   保险丝二把系统组件翻成浅底黑字（白底 / #000 / 描边 #999），但本页自己的类不归它管：
   .fld 的深底会印成一块黑条，.m-val / .led__name 这些近白字在白纸上直接消失。
   这里补齐同一套口径，字面色值只出现在这一段 —— 与 guard.css 的打印块同一处例外。
   !important 是必须的：guard.css 的打印块先加载且同样 !important，靠后加载才能盖住。 */
@media print {
  .fld { background: #fff !important; color: #000 !important; border-color: #999 !important; }
  .led__name, .m-val, .tier__v, .led__idx, .cur, .foot .mono, .stamp,
  .hud-panel__title, .hud-panel__title::after { color: #000 !important; }
  .tier__v.is-mid, .tier__v.is-hi, .tier__t, .form__msg, .foot .mono { color: #333 !important; }
  .led { border-bottom-color: #ccc !important; }
  .led__acts, .empty .hud-btn { display: none !important; }   /* 纸上按不了的按钮不该占位 */
  .hud-seg button { background: #fff !important; color: #333 !important; }
  .hud-seg button.is-active { background: #ddd !important; color: #000 !important; font-weight: 700; }
  .hud-toggle__track { background: #fff !important; border-color: #999 !important; }
  .hud-toast { display: none !important; }
}

/* ---------- 窄屏 ----------
   四列横排在窄处会被指标挤爆：OpenCode 那行三条仪表直接压到名字上。
   改成三行：「序号 名称 标识」/ 指标 / 控件。

   断点从 780 提到 900：桌面档的指标列要装得下 .tiers 那 340px 定宽网格
   （20+60+4ch+200 + 三道 10px 沟），再窄就会挤到左侧的名字列上。
   宁可早一点换成竖排，也不要在 800px 附近留一段互相重叠的糊档。 */
@media (max-width: 900px) {
  /* 窄屏也走 subgrid，只是列数从五列收到三列：标识列仍然是**全网格共用**的那一条
     轨道，所以「DeepSeek」和「OpenCode Go」的左边缘还是对齐的。要是这里换成每行
     各自 max-content（各算各的），标识就会按自己的宽度左右乱站 —— 实测极差 21.6px。 */
  .ledger { grid-template-columns: 22px minmax(0, 1fr) max-content; column-gap: 12px; }
  .led {
    row-gap: 6px; align-items: start;
  }
  .led__idx    { grid-column: 1; grid-row: 1; }
  .led__name   { grid-column: 2; grid-row: 1; }
  .led__prov   { grid-column: 3; grid-row: 1; }
  .led__metric { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .led__acts   { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }

  /* 窄屏改回正常折行：省略号在触摸屏上是死路（没有 hover，title 弹不出来），
     而名字折行不难看 —— 汉字本来就在字间断。overflow 跟着放开，
     否则 .hud-ellipsis 的 overflow:hidden 会把折下去的第二行裁掉。 */
  .led__name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

  /* 时刻那一格不再定宽：把网格撑满整行，末尾留一条 1fr 轨道，再让 .tier__t 跨满全部
     轨道 —— display:contents 下 grid-column:1/-1 只覆盖到**显式轨道**的末尾，少一条
     fr 轨道的话，「跨满」其实只有 20+44+4ch+两道沟 ≈ 114px，日期反而被挤成两行。 */
  .tiers { grid-template-columns: 20px 44px 4ch minmax(0, 1fr); width: 100%; }
  .tier__t { grid-column: 1 / -1; }

  .form__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hud-seg > button { padding: 6px 10px; }   /* 三个服务商并排，窄屏要收一收 */
}