/* phone — tool-specific styles
   Only what is unique to this tool. Shared appearance (toolbox, field, alert,
   chips) already lives in the shell's global stylesheet.

   ★ 三档状态色的语义是"校验结论"不是"涨跌"：
     ok（绿）= 严格有效；warn（黄）= 长度合理但模式不匹配；bad（红）= 无效。
     文字与颜色同时给出，颜色不是唯一的信息通道。 */

.ph-country-field {
  flex: 0 1 280px;
}

.ph-phone-field {
  flex: 1 1 240px;
}

/* 判定横幅 */
.ph-status {
  margin: 4px 0 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
}

.ph-status--ok {
  color: #178553;
  background: rgba(23, 133, 83, 0.1);
  border: 1px solid rgba(23, 133, 83, 0.35);
}

.ph-status--warn {
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
}

.ph-status--bad {
  color: #c62828;
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.35);
}

html[data-theme='dark'] .ph-status--ok {
  color: #5cc491;
  background: rgba(74, 178, 128, 0.12);
  border-color: rgba(74, 178, 128, 0.4);
}

html[data-theme='dark'] .ph-status--bad {
  color: #e07e7e;
  background: rgba(224, 110, 110, 0.1);
  border-color: rgba(224, 110, 110, 0.4);
}

/* 结果卡片：四种格式 + 结构字段。
   与 timestamp 的 .ts-kv 同思路：auto-fit，宽屏一行、窄屏折列。 */
.ph-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.ph-kv__item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.ph-kv__k {
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

.ph-kv__v {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg);
  word-break: break-all;
}