/* =============================================================================
   标准凹槽的「紧凑变体」—— 给结果壳加一个 .pp-meta-compact 就行
   -----------------------------------------------------------------------------
   基础尺寸（standard-meta-capsules.css / paipan-theme.css）是 40px 高；
   用户觉得信息卡太松散，整套压成 30px，并收紧标签/行距/段距。
   这是全项目**唯一**的紧凑定义 —— 各视图不要各抄一份。

   用法：
     <div class="pp-result-shell pp-meta-compact"> … 或 <section class="… pp-meta-compact">
   iframe 老页里：把 pp-meta-compact 加在承载凹槽的那层（如 #zh-sec-info）即可，
   记得同时 <link> standard-meta-capsules.css。

   ⚠️ 为什么选择器写成 `.pp-meta-compact.pp-meta-compact.pp-meta-compact`（三重类名）：
   主题里有一条给**所有排盘页输入框去底色**的硬规则
     body[data-page="chart"] .paipan-tool-frame .app-view:not([data-view="view_bazi"]) input
       { background: transparent !important; font-size: 12px !important }
   它的特异性是 (0,4,2)。作者表 !important 之间比特异性，普通写法（0,3,1）压不过它，
   事项输入框的底色会被扒成透明。三重类名 = (0,5,1) > (0,4,2)，压得住。
   （踩过：道家六壬的事项框曾经是"只有一圈边、没有底"的空心槽。）
   ============================================================================= */

.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-ganzhi-pill,
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-inline-meta-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(32, 35, 33, 0.08);
  border-radius: 10px;
  background: var(--surface-strong, #f5f1e8);
  box-shadow: 0 2px 8px rgba(33, 36, 31, 0.06);
  box-sizing: border-box;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink, #202321);
}

.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-ganzhi-pill {
  gap: 2px;
  white-space: nowrap;
}
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-ganzhi-pill small { font-size: 9.5px; }
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-ganzhi-pill b,
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-ganzhi-char,
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-inline-meta-pill b {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-inline-meta-label,
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-pill-section-title {
  margin: 0 0 2px;
  color: var(--muted, #68706a);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
  /* ⚠️ 必须显式左对齐：legacy 老页的信息壳常常带 `text-align:center`
     （为了居中表格），不写这一条「四柱干支」这种小标题会被居中，
     和左边那些信息格标签对不齐。 */
  text-align: left;
}
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-inline-meta-capsules { gap: 6px 5px; }
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-ganzhi-capsules { gap: 5px; }
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-standard-pill-section { margin-top: 8px; }

/* ── 事项行：左侧小标签 + 右侧凹槽输入框（输入框挂的就是信息格那个类） ── */
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-matter-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-matter-line .pp-standard-inline-meta-label {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
/* input 是 replaced element：原类的 display:flex 对它无效；另外要把被
   "去底色"那条 !important 抢走的背景/字号赢回来（见文件头注释）。 */
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-matter-line input.pp-standard-inline-meta-pill {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  text-align: center;
  outline: 0;
  background: var(--surface-strong, #f5f1e8) !important;
  font-size: 12.5px !important;
  font-weight: 700;
  color: var(--ink, #202321);
}
.pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-matter-line input.pp-standard-inline-meta-pill:focus {
  border-color: rgba(var(--accent-rgb, 185, 65, 50), .45);
}

/* ── legacy 老页 iframe 里的「事项输入框」要把样式赢回来 ────────────────────
   ⚠️ 为什么单独还要这一条：legacy-skyx-frame.css 有一条给**所有**输入框的通用规则
     html.legacy-skyx-embedded input:not([type="radio"]):not([type="checkbox"])
       :not([type="button"]):not([type="submit"]), html.legacy-skyx-embedded select, …
   它带 `!important`，特异性 (0,5,2)，会把这一整套强灌给凹槽输入框：
       min-height:38px / border-radius:5px / background:var(--legacy-surface) /
       border:1px solid var(--legacy-line) / font-size:inherit / font-weight:inherit
   → 事项框变成「38px 高、5px 方角、深色描边、卡片底色」的**普通 input**，
     和别家（法术奇门那种 30px / 10px 圆角 / 极淡描边 / 深一档底的胶囊槽）不是一个东西。
   2026-09-21 用户原话：「这个输入框需要弄成那种胶囊状的凹槽，但是现在很难看，和别的都不一样」。
   作者表 !important 之间**比特异性**，光加 `!important` 不够 —— 前缀
   `html.legacy-skyx-embedded` 把特异性抬到 (0,6,2)，压得住它 (0,5,2)；
   被它抢走的每一项都要显式补 `!important` 才能赢回来（漏一项就还留着旧值）。
   只影响 legacy iframe（外层文档的 <html> 没有 legacy-skyx-embedded 类），不会外溢。 */
html.legacy-skyx-embedded .pp-meta-compact.pp-meta-compact.pp-meta-compact .pp-matter-line input.pp-standard-inline-meta-pill {
  min-height: 30px !important;
  max-height: none !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(32, 35, 33, 0.08) !important;
  border-radius: 10px !important;
  background: var(--surface-strong, #f5f1e8) !important;
  color: var(--ink, #202321) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}