/* ============================================================
 * apps/calc.css —— 计算器（js/apps/calc.js）
 *
 * 由原 css/apps.css 按既有的分节标记切分而来（0.3.1 架构整理）。
 * 内容与切分前逐字节一致 —— 只换了存放位置，没动一个字符。
 * 新增样式请放进对应 App 的分片，不要再往 apps.css 里堆。
 * ============================================================ */
/* ============ 计算器 ============ */
/*
 * height:100% 在 flex 子项上会被 auto 基高架空，顶栏下面就会空一块。
 * 直接用 flex:1 让它把剩下的高度吃满。
 */
.calc-root {
  background: linear-gradient(178deg, #FBFBF9 0%, #F3F2EF 100%);
  color: var(--text);
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
}
/*
 * 输出区吃掉键盘之外剩下的全部高度，算式贴着键盘上沿右对齐。
 * 之前它只有 min-height:88px，结果顶栏下面空出一大块死区，
 * 而键盘又被压在最底下 —— 中间那段真空最伤"做完度"。
 */
.calc-out {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px 20px; text-align: right;
  font-size: 44px; font-weight: 300; word-break: break-all;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.4px;
  line-height: 1.1;
}
.calc-out .expr {
  font-size: 15px; color: var(--text-3); min-height: 22px; margin-bottom: 8px;
  letter-spacing: 0;
}
/*
 * 显示区既然吃了整块剩余高度，上面就得有点东西交代它是"显示区"。
 * 贴一行很淡的提示在右上角，跟下面的算式同一条右对齐基线 ——
 * 空白因此变成留白，而不是"没加载出来"。
 */
.calc-out::before {
  content: 'AC 归零 · ⌫ 退格 · % 取余';
  font-size: 10.5px; letter-spacing: 1.4px; color: var(--text-3);
  opacity: .5; margin-bottom: auto; text-transform: uppercase;
  align-self: flex-end; padding-top: 4px;
}
/* 按键之间留缝，各自圆角 —— 这样才有"一块块按钮"的手感，而不是一张表格 */
.calc-pad {
  flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 62px;
  gap: 8px; padding: 0 12px 16px;
}
.calc-pad button {
  background: var(--surface); color: var(--text); font-size: 22px;
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  transition: transform var(--mag), box-shadow var(--fast), background var(--fast);
}
.calc-pad button:active {
  background: var(--surface-2);
  transform: scale(.94);
  box-shadow: 0 1px 2px rgba(42, 49, 56, .08);
}
.calc-pad button.fn { color: var(--text-2); font-size: 18px; background: var(--surface-3); }
.calc-pad button.fn .ic-svg { opacity: .72; }
.calc-pad button.eq {
  background: linear-gradient(160deg, #D99645 0%, #C07E2C 100%);
  color: #FFFDFB;
  box-shadow: 0 2px 6px rgba(192, 126, 44, .30), 0 8px 22px rgba(192, 126, 44, .22);
}
.calc-pad button.eq:active {
  background: linear-gradient(160deg, #C07E2C 0%, #A96A1F 100%);
  box-shadow: 0 1px 3px rgba(192, 126, 44, .34);
}