/* diceprob — tool-specific styles
   只放这个工具独有的东西。公共外观（toolbox / field / alert / chip / hint / examples）
   已经在全局样式表里。

   ★ 不写任何裸色值：一律走主题变量（--surface / --line / --fg …）。
   ★ 类名前缀 .dp- 是本工具私有的 —— 借别的工具的类名 = 没有样式
     （工具样式按工具隔离加载）。 */

/* 分类横幅：`分类名 · 说明` 两段拼的（验收脚本会单独比对后半句） */
.dp-status {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  color: var(--fg-muted);
}

/* ── 输入行 ──
   表达式框比另外两个宽（它要装 "2d6+1d8+3" 这种串），
   但不用 span：auto-fit 在窄屏只有一列时 span 会造出隐式列、直接撑破容器。 */
.dp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
}

.dp-field--expr {
  min-width: 0;
}

/* ── 主结果 ── */
.dp-lead {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

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

.dp-lead__v {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--fg);
}

.dp-lead__x {
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-muted);
}

/* ── 四格明细 ── */
.dp-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

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

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

.dp-cellbox__v {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
  word-break: break-word;
}

.dp-cellbox__x {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg-muted);
}

/* ── 查询结果：强调区 ── */
.dp-flag {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.dp-flag__k {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

.dp-flag__v {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
}

.dp-flag__x {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ── 分布轮廓 ──
   ★ 高度 = 该和的概率 / 峰值，线性。2d6 的钟形一眼可见，
     压平或者取对数都会让"中间高两头低"这个最关键的事实消失。 */
.dp-chart {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

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

.dp-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 96px;
  padding: 0 1px;
  border-bottom: 1px solid var(--line);
}

.dp-bar {
  flex: 1 1 0;
  min-width: 1px;
  background: var(--accent);
  border-radius: 1px 1px 0 0;
  opacity: 0.85;
}

.dp-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  color: var(--fg-muted);
}

/* ── 完整分布表 ──
   ★ 20d20 有 381 行：必须限高滚动，否则整个页面被一张表顶到几米长。
     表头用 sticky 钉住 —— 滚到第 200 行还得知道这一列是什么。 */
.dp-table {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

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

.dp-table__wrap {
  max-height: 320px;
  overflow-y: auto;
}

.dp-table__t {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.dp-table__t th {
  position: sticky;
  top: 0;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  color: var(--fg-muted);
}

.dp-table__t td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}

.dp-table__t tr:last-child td {
  border-bottom: 0;
}