/* ==========================================================================
   study.zzxcd.cn · pomodoro.css
   --------------------------------------------------------------------------
   番茄钟（study/pomodoro/index.html）自己的全部界面。**只归属这一个页面**；
   地基在 assets/base.css（令牌/复位/内容列），共用构件在 assets/shell.css
   （图标按钮 / 帮助覆层 / 设置抽屉 / 页脚 / :root 令牌桥接）。

   世界：**暴露结构**（EXPOSED STRUCTURE）——2px 墨线 + 零模糊硬位移 + 零圆角；
   一张纸、一色墨、一个强调色。

   ⚠️ 强调色的分配（The One Block Rule「一屏只有一个强调色实心块」）：
      本页的强调色归**进度**（它才是这一页的主题），所以主按钮用**墨块反白**
      而不是强调色实心——先例见门户/登录页（那两屏的强调色被四域色占了，
      主按钮同样是墨块）。这不是漏做，是刻意的取舍。

   ⚠️ 动效是**机械的**（DESIGN.md Overview）：进度一律离散跳格，不做插值动画；
      缓动只用在「按下去」这类交互反馈上。见 DESIGN.md 的 Motion · 时间流动。
   ========================================================================== */

/* ---------- 0. 页头（shell.css 不含 .top，本页自己写） ---------- */
.pom-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: var(--nb-rule-heavy) solid var(--ink);
  margin-bottom: 1rem;
}

/* 容器只占位：不要灰底、不要投影、不要圆角（DEVELOP 2.5） */
.brand-icon {
  width: 3.4rem;
  height: 3.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pom-head {
  min-width: 0;
}
.pom-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pom-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}
/* 右上角两颗固定按钮（shell.css 里是 position:fixed，2.4rem 各一枚，
   right 0.9rem / 3.7rem）——窄屏下要给页头留出它们的宽度，否则会压住副标题 */
@media (max-width: 760px) {
  .pom-top {
    padding-right: 6.5rem;
  }
}

/* ---------- 1. 阶段轨道 ---------- */
/* 这是「三个阶段的定义 + 我走到哪了」，不是一组切换标签。
   所以每格都带序号与时长，当前段用**墨块序号 + 底部墨线**标位置 ——
   刻意不用强调色实心块（那是全站「被选中的标签」的语言，会读成切换器；
   而且强调色在本页归进度）。 */
.pom-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: var(--rule);
  background: var(--paper);
  margin-bottom: 1rem;
}
.pom-phase {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.55rem;
  text-align: left;
  background: var(--paper);
  border-right: var(--rule);
  min-width: 0;
}
.pom-phase:last-child {
  border-right: 0;
}
.pom-phase.on {
  background: var(--sheet);
  box-shadow: inset 0 -3px 0 var(--ink);
}
.pom-step {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: var(--rule);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  font-weight: 700;
}
.pom-phase.on .pom-step {
  background: var(--ink);
  color: var(--paper);
}
.pom-phase-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pom-phase-name {
  font-size: calc(0.78rem * var(--font-scale, 1));
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.2;
}
.pom-phase.on .pom-phase-name {
  color: var(--ink);
}
.pom-phase-min {
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ---------- 2. 时间舞台 ---------- */
.pom-stage {
  position: relative;
  background: var(--sheet);
  border: var(--rule);
  box-shadow: var(--shadow-lg);
  padding: 1.3rem 1rem 1rem;
  overflow: hidden;
}
.pom-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pom-head-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* 显示模式切换：时钟 / 番茄。两格描边分格、选中格墨块反白（与全站选中态同一语言） */
.pom-view {
  flex: 0 0 auto;
  display: flex;
  border: var(--rule);
}
.pom-view-btn {
  padding: 0.28rem 0.62rem;
  font-size: calc(0.7rem * var(--font-scale, 1));
  font-weight: 700;
  background: var(--sheet);
  color: var(--ink);
  border-right: var(--rule);
}
.pom-view-btn:last-child {
  border-right: 0;
}
.pom-view-btn.on {
  background: var(--ink);
  color: var(--sheet);
}
/* 时钟模式下的两行附注：日期星期 / 剩余时间 */
.pom-clock-date,
.pom-clock-left {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pom-clock-date {
  font-size: calc(0.7rem * var(--font-scale, 1));
  margin-top: 0.35rem;
}
.pom-clock-left {
  font-size: calc(0.76rem * var(--font-scale, 1));
  margin-top: 0.25rem;
}
.pom-round {
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pom-task-now {
  font-size: calc(0.72rem * var(--font-scale, 1));
  font-weight: 700;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 大字时钟：display-clock 档（DESIGN.md 字阶 4.6rem）。
   ⚠️ 名义档固定，实际尺寸由 fitClock() 按**容器宽度**反解写进 --clock-size，
   不跟视口走（AGENTS.md 记着 vmin 按视口短边算把 2048 数字裁成一团的事故）。 */
.pom-clock {
  font-family: var(--font-mono);
  font-size: var(--clock-size, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* The Tabular Rule：会变化的数字必须等宽，否则秒位跳动会抖 */
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0.2rem 0;
  overflow: hidden;
}
.pom-clock .pom-colon {
  display: inline-block;
  transform: translateY(-0.06em);
}
.pom-clock .pom-colon.blink {
  animation: pom-blink 1s steps(1, end) infinite;
}
@keyframes pom-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.25;
  }
}

/* ---------- 3. 六种时间流动表现 ---------- */
/* 3.1 方格阵：100 格 = 每格 1%。靠 2px 描边分格（gap:0，与门户域索引条同一语法） */
.pom-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 0;
  margin-top: 1rem;
  border: var(--rule);
  border-right: 0;
  border-bottom: 0;
}
.pom-cell {
  aspect-ratio: 1;
  border-right: var(--rule);
  border-bottom: var(--rule);
  background: var(--paper);
}
.pom-cell.on {
  background: var(--accent);
}

/* 3.2 刻度条：60 根刻度（每 5 根加高）+ 整格跳的推进块。
   ⚠️ 刻度是 1px —— 按 DESIGN「没有 1px 的结构线」的例外条款：
   刻度是**标记**不是分格，与域索引条那枚小方、帮助条目的小方点同类 */
.pom-ruler {
  position: relative;
  height: 2.6rem;
  margin-top: 1rem;
  border: var(--rule);
  background: var(--paper);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pom-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
}
.pom-ticks {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}
.pom-tick {
  flex: 1 1 0;
  height: 0.5rem;
  border-right: 1px solid var(--ink-soft);
}
.pom-tick.major {
  height: 0.95rem;
  border-right: var(--rule);
}

/* 3.3 硬切分格翻牌：每位数字拆上下两格、中间 2px 墨缝。
   ⚠️ 不做 3D 旋转（DESIGN 的 Don't 明确禁止翻转卡片）——用 clip 切半张脸 */
.pom-flip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  font-size: var(--clock-size, 4.6rem);
  line-height: 1;
}
.pom-fgroup {
  position: relative;
  display: block;
  border: var(--rule);
  background: var(--sheet);
}
/* ⚠️ display:block 不能省：这两格是 <span>，行内元素上 width/height/overflow 全部无效 ——
   少了它两半数字根本不裁切，整张脸会以原尺寸重叠并溢出整个舞台（实测踩过）。 */
.pom-fcell {
  position: relative;
  display: block;
  width: 0.68em;
  height: 0.55em;
  overflow: hidden;
}
.pom-fcell.top {
  border-bottom: var(--rule); /* 中间那道墨缝 */
}
.pom-fcell i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.1em;
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 800;
  line-height: 1.1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pom-fcell.top i {
  top: 0;
}
.pom-fcell.bot i {
  top: -0.55em;
}
/* 换值时上格「落」一条实心墨条，120ms 到头（机械感，不做缓动）。
   ⚠️ `forwards` 不能省：这个 ::after 本身就是个 inset:0 的实心墨块，
   动画只是把它从上方扫到下方；没有 forwards 的话动画一结束就回到基础态
   （inset:0 不位移）→ 每个翻过的数字**上半张脸被一块实心墨整个盖住**，
   看起来就是「上格全黑、只有下格能看见半个数字」（用户报的就是这个）。
   加了 forwards 后停在 translateY(100%) —— 扫到格子外面，被 overflow:hidden 裁掉。 */
.pom-fgroup.flip .pom-fcell.top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  animation: pom-drop 120ms steps(3, end) 1 forwards;
}
@keyframes pom-drop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}
.pom-flip .pom-colon {
  font-family: var(--font-mono);
  font-weight: 800;
}

/* 3.4 竖条滚动（odometer）：每位一列 0-9，逐格步进 */
.pom-odo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  font-size: var(--clock-size, 4.6rem);
  line-height: 1;
}
.pom-ocol {
  display: block;
  height: 1.1em;
  overflow: hidden;
  border: var(--rule);
  background: var(--sheet);
}
.pom-ostrip {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease);
}
.pom-odigit {
  width: 0.68em;
  height: 1.1em;
  line-height: 1.1em;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pom-odo .pom-colon {
  font-family: var(--font-mono);
  font-weight: 800;
}

/* 3.5 柱状液面：竖向硬边柱，强调色自上而下逐格退 */
.pom-col-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
  height: 7.5rem;
}
.pom-col {
  position: relative;
  width: 2.6rem;
  border: var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.pom-colfill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: var(--accent);
}
.pom-col-num {
  align-self: center;
  font-family: var(--font-mono);
  font-size: calc(1.15rem * var(--font-scale, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 3.6 沙漏背景：离散方块下落。垫在内容之下、透明度极低、只在计时中运行 */
.pom-sand {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
}
.pom-stage > *:not(.pom-sand) {
  position: relative;
  z-index: 1;
}
.pom-cube {
  position: absolute;
  top: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ink);
  animation: pom-fall linear infinite;
}
.pom-cube.accent {
  background: var(--accent);
}
@keyframes pom-fall {
  from {
    transform: translateY(-1.5rem);
  }
  to {
    transform: translateY(28rem);
  }
}

/* ---------- 4. 控制键 ---------- */
.pom-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 1rem;
}
.pom-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.62rem 0.5rem;
  font-size: calc(0.82rem * var(--font-scale, 1));
  font-weight: 700;
  background: var(--sheet);
  color: var(--ink);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pom-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* 播放 ⇄ 暂停：图标跟着状态换，别只换文案 */
.pom-btn .pom-ic-pause {
  display: none;
}
.pom-btn.playing .pom-ic-play {
  display: none;
}
.pom-btn.playing .pom-ic-pause {
  display: block;
}
.pom-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.pom-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
/* 主按钮 = 墨块反白（强调色已经归进度了，见文件头说明） */
.pom-btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.pom-btn.primary:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.pom-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- 5. 任务清单 ---------- */
.pom-card {
  margin-top: 1rem;
  background: var(--sheet);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
}
.pom-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-bottom: var(--rule);
}
.pom-card-title {
  font-size: calc(0.82rem * var(--font-scale, 1));
  font-weight: 800;
}
.pom-card-note {
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pom-task-add {
  display: flex;
  gap: 0;
  border-bottom: var(--rule);
}
.pom-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  font-size: calc(0.8rem * var(--font-scale, 1));
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-right: var(--rule);
}
.pom-input::placeholder {
  color: var(--ink-soft);
}
.pom-add-btn {
  flex: 0 0 auto;
  padding: 0 0.9rem;
  font-weight: 800;
  font-size: calc(0.8rem * var(--font-scale, 1));
  background: var(--sheet);
  color: var(--ink);
  border: 0;
}
.pom-add-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.pom-tasks {
  display: flex;
  flex-direction: column;
}
.pom-task {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-bottom: var(--rule);
  font-size: calc(0.8rem * var(--font-scale, 1));
}
.pom-task:last-child {
  border-bottom: 0;
}
/* 勾选框：硬边方块，不用圆点 */
.pom-box {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  border: var(--rule);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  line-height: 1;
  color: transparent;
}
.pom-task.done .pom-box {
  background: var(--ink);
  color: var(--paper);
}
.pom-task-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pom-task.done .pom-task-text {
  color: var(--ink-soft);
  text-decoration: line-through;
}
/* 当前任务：左侧一条强调色实心竖条（不是整块，避免第二个强调色块） */
.pom-task.on {
  box-shadow: inset 4px 0 0 var(--accent);
  font-weight: 700;
}
.pom-task-count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pom-task-del {
  flex: 0 0 auto;
  padding: 0 0.3rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.pom-task-del:hover {
  color: var(--accent);
}
.pom-empty {
  padding: 0.7rem;
  font-size: calc(0.76rem * var(--font-scale, 1));
  color: var(--ink-soft);
}

/* ---------- 6. 统计 ---------- */
.pom-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: var(--rule);
}
.pom-figure {
  padding: 0.6rem 0.5rem;
  text-align: center;
  border-right: var(--rule);
}
.pom-figure:last-child {
  border-right: 0;
}
.pom-figure b {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(1.15rem * var(--font-scale, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pom-figure span {
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
}
.pom-bars {
  display: flex;
  align-items: flex-end;
  gap: 0;
  height: 5.2rem;
  padding: 0.5rem 0.7rem;
  border-bottom: var(--rule);
}
.pom-bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.25rem;
}
.pom-bar {
  width: 60%;
  min-height: 2px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.pom-bar.today {
  background: var(--accent);
}
.pom-bar-lab {
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. 全屏专注模式 ---------- */
.pom-focus {
  position: fixed;
  inset: 0;
  /* 压在设置抽屉(100)之上——专注模式只留时钟 */
  z-index: 120;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--paper);
  padding: 1.5rem;
}
.pom-focus.open {
  display: flex;
}
.pom-focus .pom-clock {
  /* display-clock-full 档 */
  font-size: var(--clock-size-full, 9rem);
}
.pom-focus-phase {
  font-family: var(--font-mono);
  font-size: calc(0.82rem * var(--font-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pom-focus-actions {
  display: flex;
  gap: 0.6rem;
}
/* ⚠️ 专注覆层里不要再让 .pom-btn 用 flex:1 1 0：容器宽是 fit-content，
   三颗按钮的 flex-basis 都是 0 → 每颗分到 1/3 内容宽，「暂停」（图标 + 两个字）
   放不下就断成两行（用户报的「暂停」竖排）。这里给固定基准宽 + 不换行。 */
.pom-focus-actions .pom-btn {
  flex: 0 0 auto;
  min-width: 5.5rem;
  white-space: nowrap;
}

/* ---------- 8. 设置抽屉里的本页控件（theme/accent/font/size 用 shell.css 的） ---------- */
.pom-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.pom-field label {
  flex: 1 1 auto;
  font-size: calc(0.76rem * var(--font-scale, 1));
}
.pom-num {
  flex: 0 0 auto;
  width: 2.8rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: calc(0.76rem * var(--font-scale, 1));
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
  border: 0;
}
/* 数字步进器：− [值] +，三格共用一条 2px 墨线。
   原来是一个 4rem 宽的数字框摊在右端，中间留一大片空白 ——
   既难看，手机上点它还要弹数字键盘。步进器让「调 1 分钟」变成一次点击。 */
.pom-stepper {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border: var(--rule);
  background: var(--paper);
}
.pom-step-btn {
  width: 1.5rem;
  background: var(--sheet);
  color: var(--ink);
  font-size: calc(0.82rem * var(--font-scale, 1));
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
}
.pom-step-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.pom-step-btn:first-child {
  border-right: var(--rule);
}
.pom-step-btn:last-child {
  border-left: var(--rule);
}
.pom-num::-webkit-outer-spin-button,
.pom-num::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.pom-num {
  appearance: textfield;
  -moz-appearance: textfield;
}
/* 预设与进度样式都用等宽网格：flex-wrap 时每格按内容宽度排，右端参差不齐 */
.pom-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 0.5rem;
  border: var(--rule);
}
.pom-presets .opt-btn {
  border: 0;
  border-right: var(--rule);
  padding: 0.5rem 0.2rem;
  text-align: center;
}
.pom-presets .opt-btn:last-child {
  border-right: 0;
}
.pom-styles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: var(--rule);
}
.pom-styles .opt-btn {
  border: 0;
  border-right: var(--rule);
  border-bottom: var(--rule);
  padding: 0.5rem 0.2rem;
  text-align: center;
}
.pom-styles .opt-btn:nth-child(2n) {
  border-right: 0;
}
/* 5 个选项落到 2 列里会在最后留一个孤格 —— 让它整行铺满，看起来是特意排的 */
.pom-styles .opt-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-bottom: 0;
}
.pom-styles .opt-btn:nth-last-child(2) {
  border-bottom: 0;
}
/* 音量：轨道收窄到半行，右边跟一个百分比读数（不然拖到哪儿全靠猜） */
.pom-vol {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 58%;
}
.pom-vol-num {
  flex: 0 0 auto;
  width: 2.2rem;
  font-family: var(--font-mono);
  font-size: calc(0.72rem * var(--font-scale, 1));
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-soft);
}
.pom-range {
  flex: 1 1 auto;
  width: 100%;
  appearance: none;
  height: 1.1rem;
  background: transparent;
}
.pom-range::-webkit-slider-runnable-track {
  height: 0.6rem;
  background: var(--paper);
  border: var(--rule);
}
.pom-range::-webkit-slider-thumb {
  appearance: none;
  width: 0.6rem;
  height: 1.1rem;
  margin-top: -0.4rem;
  background: var(--ink);
  border: 0;
}
.pom-range::-moz-range-track {
  height: 0.6rem;
  background: var(--paper);
  border: var(--rule);
}
.pom-range::-moz-range-thumb {
  width: 0.6rem;
  height: 1.1rem;
  background: var(--ink);
  border: 0;
  border-radius: 0;
}
.pom-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: calc(0.76rem * var(--font-scale, 1));
}
.pom-switch:last-child {
  margin-bottom: 0;
}
/* 开关：硬边方块滑块，不用胶囊 */
.pom-toggle {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 1.3rem;
  padding: 2px;
  background: var(--paper);
  border: var(--rule);
  display: flex;
  justify-content: flex-start;
}
.pom-toggle i {
  display: block;
  width: 1rem;
  background: var(--ink);
}
.pom-toggle.on {
  justify-content: flex-end;
  background: var(--accent);
}
.pom-toggle.on i {
  background: var(--on-accent);
}
.pom-note {
  margin-bottom: 1rem;
  padding: 0.5rem 0.7rem;
  font-size: calc(0.76rem * var(--font-scale, 1));
  background: var(--paper);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
}

/* 只给读屏软件的播报区（阶段切换用；每秒读数不播，会刷屏） */
.pom-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 专注模式打开时锁住背景滚动（覆层已经铺满视口） */
.pom-focus-on {
  overflow: hidden;
}

/* ---------- 9. 窄屏 ---------- */
@media (max-width: 640px) {
  /* 方格阵 20×5 → 10×10：窄屏 20 列每格只剩 ~13px，方块认不出来 */
  .pom-grid {
    grid-template-columns: repeat(10, 1fr);
  }
  .pom-actions {
    flex-wrap: wrap;
  }
  .pom-btn {
    flex: 1 1 30%;
  }
  .pom-col-wrap {
    height: 6rem;
  }
  .pom-figure b {
    font-size: calc(1rem * var(--font-scale, 1));
  }
}

/* ---------- 10. 尊重「减弱动态效果」 ---------- */
/* 进度本身是信息，不能因为关了动效就看不见——所以只降级为**静态刻度更新**
   （跳格仍在，只是不眨眼、不下落），沙漏背景则完全不渲染。 */
@media (prefers-reduced-motion: reduce) {
  .pom-clock .pom-colon.blink {
    animation: none;
  }
  .pom-fgroup.flip .pom-fcell.top::after {
    animation: none;
  }
  .pom-ostrip {
    transition: none;
  }
  .pom-sand {
    display: none;
  }
}