/* ==========================================================================
   info.zzxcd.cn · crypto.css —— 密码学工具箱（info/crypto）页面专属层
   --------------------------------------------------------------------------
   世界：暴露结构（EXPOSED STRUCTURE）。一张纸、一色墨、一个强调色；
   分离靠 2px / 3px 结构线，层级靠零模糊硬位移块，零圆角。

   本文件只放**这一个页面**才有的构件：面板内部节奏、区间读数、摘要清单行、
   摩斯演示条、高级参数折叠、PEM 行。
   横梁 / 面板 / 按钮 / 表单 / 列表 / 弹层 / 帮助 / 设置 在 shell.css，
   地基、令牌与浏览器自带表面在 base.css —— 这里不重复声明。
   ========================================================================== */

/* ---------- 1. 面板内部节奏 ---------- */
.tool-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

/* 并排控件自己吃掉余量（字段与控件都要允许收缩到 0，否则会撑破面板） */
.row > .field {
  flex: 1 1 9rem;
  min-width: 0;
}
.row > .input,
.row > .textarea,
.row > .select {
  flex: 1 1 8rem;
  min-width: 0;
}

/* 读数格由 JS 填：没填时不留一个小方块 */
.chip:empty {
  display: none;
}

/* ---------- 2. 工具切换栏里的「更多」 ---------- */
/* 它不是工具，是入口：不参与等分，宽度固定 */

/* ---------- 3. 分段控件铺满一行（模式 / 进制 / 档位） ---------- */
.seg.fill {
  display: flex;
  width: 100%;
}
.seg.fill .seg-btn {
  flex: 1 1 0;
  text-align: center;
}

/* ---------- 4. 输出块 ---------- */
/* 出错用「结构线加重」表达：本世界只有一个强调色，不引入第二种颜色 */
.out.error {
  border-width: var(--nb-rule-heavy);
  font-weight: 700;
}
/* 出结果时机械跳一下（位移小、零模糊），不是呼吸动画 */
.out.pulse {
  animation: nb-value-jump var(--nb-dur) var(--ease-snap);
}
@keyframes nb-value-jump {
  from {
    transform: translateY(-2px);
  }
}

/* 摘要清单：算法铭牌 + 摘要值 + 复制，一行一条 */
/* 铭牌等宽且不许折行（否则「SHA-256」会断成两行），四条左边缘对齐 */
.list .chip {
  flex: 0 0 auto;
  min-width: 3.8rem;
  justify-content: center;
  white-space: nowrap;
}
.list .out {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 0.3rem 0.45rem;
  font-size: 0.72rem;
}

/* ---------- 5. 区间读数（凯撒位移量） ---------- */
.range-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.range-line .input[type='range'] {
  flex: 1 1 auto;
  min-width: 6rem;
}
.range-val {
  flex: 0 0 auto;
  min-width: 2.6rem;
  padding: 0.22rem 0.4rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- 6. 摩斯演示条 ---------- */
/* 点划 = 小墨格；播放到哪一格就填墨（本世界表达「当前」的方式），不用发光/缩放 */
.morse-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.4rem;
  padding: 0.4rem 0;
}
.morse-dot,
.morse-dash {
  display: inline-block;
  height: 0.6rem;
  border: var(--nb-rule) solid var(--c-text);
  background: var(--c-white);
}
.morse-dot {
  width: 0.6rem;
}
.morse-dash {
  width: 1.8rem;
}
.morse-gap {
  display: inline-block;
  width: 0.5rem;
  height: 0.6rem;
}
.morse-dot.lit,
.morse-dash.lit {
  background: var(--c-text);
}

/* ---------- 7. 高级参数折叠（AES） ---------- */
/* 是「一段结构」，不是卡片：只有上下两条墨线，没有底、没有投影 */
.accordion {
  border-top: var(--nb-rule) solid var(--c-text);
  border-bottom: var(--nb-rule) solid var(--c-text);
}
.accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
  text-align: left;
}
.accordion-head .chev {
  font-size: 0.7rem;
  line-height: 1;
  transition: transform var(--nb-dur-slow) var(--ease-snap);
}
.accordion.open .accordion-head .chev {
  transform: rotate(180deg);
}
.accordion-body {
  display: none;
  padding-bottom: 0.7rem;
}
.accordion.open .accordion-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---------- 8. PEM 行（RSA 公钥 / 私钥） ---------- */
.pem-row {
  align-items: flex-start;
}
.pem-row .textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 6rem;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* ---------- 9. 窄屏 ---------- */
@media (max-width: 400px) {
  /* 「更多」再让一点位，四个工具名才不会被挤断 */
}