/* ============================================================
   言语芽｜核心词沟通板（AAC）样式

   ⚠️ 这个文件里有三条"不许动"的规则（见 docs/沟通板符号规范.md）：

   ① 网格必须硬 4×4 —— 禁止 auto-fit / minmax / flex-wrap
      任何"按屏宽改列数"的写法都会在某一个宽度上改变列数 → 全部位置错位
      → 孩子建立的肌肉记忆失效。这是整块板子的地基。

   ② 零动效 —— 禁止 transition / animation / transform 位移
      移动的东西会抢走注意力（尤其注意缺陷的孩子），而且会破坏"我按了→它响"
      的因果感。但**按下反馈必须有**（用静态对比变化，不用位移）。

   ③ 不靠颜色传达语义 —— 颜色只能作为辅助强调
      红绿色觉异常的孩子要能用；灰度屏（将来上墨水屏）要能用；
      强光/反光的教室环境要能看清。

   test/aac-board.test.js 会逐条检查这三条，改之前先看那个文件。
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                /* 禁止滚动：整块板必须一屏放完 */
  background: #f4f6f5;
  color: #1f2d2a;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  user-select: none;
}

.aac-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  /* 宽屏（电脑、平板横屏）下板子不会无限铺开：整列内容最宽 760px 并居中。
     手机上 100% < 760px，等于没写 —— 手机版布局不受影响。 */
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- 顶部：孩子 + 退出 ---------- */
.aac-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  min-height: 28px;
}
.aac-who { font-size: 13px; color: #6b7f7a; }
.aac-who b { color: #24423e; }
.aac-exit {
  margin-left: auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #d8e3df;
  border-radius: 9px;
  background: #fff;
  color: #5b6f6a;
  font-size: 13px;
  cursor: pointer;
}

/* 宽屏上板子是正方形、比整列窄：句子条/顶栏/提示跟着板子的宽度居中对齐，
   否则会出现"条比板宽一截"的错位（2026-09 电脑版反馈）。
   --aac-w 由 aac-board.js 按板子实际宽度写入；JS 没跑时退化成整列宽（等于原来的样子）。
   下限 420px：窗口又矮又宽时，句子条不能被压到按钮都放不下。 */
.aac-top,
.aac-strip,
.aac-hint {
  width: min(100%, max(var(--aac-w, 100%), 420px));
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 句子条 ---------- */
.aac-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 6px 8px;
  border: 2px solid #cfdcd8;
  border-radius: 12px;
  background: #fff;
}
.aac-strip-words {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;               /* 不滚动：句子条过长时靠"删一个"处理 */
  min-height: 46px;
}
.aac-chip {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #b9cdc7;
  border-radius: 9px;
  background: #eef5f2;
  color: #24423e;
  font-size: 19px;
  font-weight: 700;
}
.aac-strip-empty { color: #9db0ab; font-size: 13px; padding-left: 4px; }
.aac-strip-actions { flex: none; display: flex; gap: 6px; }
.aac-act {
  min-width: 60px;
  height: 48px;
  padding: 0 12px;
  border: 2px solid #b9cdc7;
  border-radius: 10px;
  background: #fff;
  color: #35534d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.aac-act.aac-say { background: #157f74; border-color: #157f74; color: #fff; font-size: 16px; }
.aac-act.aac-say:disabled { background: #b8c6c2; border-color: #b8c6c3; cursor: default; }
.aac-act:disabled { color: #a9b6b3; border-color: #dbe4e1; cursor: default; }

/* ---------- 4×4 固定网格 ---------- */

/* 板子的"可用区域"：撑满句子条与提示之间的剩余空间，同时作为一个容器（container），
   让板子能按**可用高度**决定自己的宽度。
   ⚠️ 为什么要这样：宽屏（电脑）上屏宽远大于屏高。如果板子宽度只按屏宽算（100%），
   4 个正方形会撑得比屏幕还高 —— 行被压扁、格子互相重叠（2026-09 电脑版就是这个毛病）。
   所以：板子边长 = min(可用宽度, 可用高度)，正方形居中，任何屏幕都不会溢出、不会重叠。 */
.aac-board {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;            /* 正方形居中；宽屏时左右留白 */
  container-type: size;
}

/* ⚠️ 硬 4 列 4 行。不要改成 repeat(auto-fit, minmax(...)) —— 那会按屏宽改列数 */
.aac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);   /* 板子已是正方形 → 1fr×1fr 的格子必然是正方形 */
  aspect-ratio: 1 / 1;
  gap: 3.2%;
  /* 兜底（老浏览器）：宁可小一点，绝不能高出可用区域 —— 小一点只是两边留白，高了会重叠 */
  width: min(100%, 560px);
}
/* 有 svh 的浏览器：按视口高度估一个安全宽度（各屏实测的最小可用高度） */
@supports (height: 100svh) {
  .aac-grid { width: min(100%, calc(100svh - 250px)); }
}
/* 支持容器查询的浏览器：直接量可用高度，精确到像素 */
@supports (width: 1cqw) {
  .aac-grid { width: min(100%, 100cqh); }
}
.aac-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
  aspect-ratio: 1 / 1;              /* 每格正方形 */
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4%;
  border: 3px solid #b9cdc7;
  border-radius: 14px;
  background: #fff;
  color: #1f2d2a;
  font-family: inherit;
  cursor: pointer;
  /* 零动效：下面刻意不写 transition / animation */
}
/* 符号区约 70%、文字区约 30%（规范 §4.1） */
.aac-sym {
  flex: 0 0 auto;
  font-size: clamp(24px, 7.2vmin, 60px);
  line-height: 1;
  /* 灰度安全：符号本身用形状差异，不依赖颜色 */
  filter: grayscale(1) contrast(1.15);
}
.aac-word {
  flex: 0 0 auto;
  font-size: clamp(15px, 3.4vmin, 26px);
  font-weight: 700;
  letter-spacing: .5px;
  color: #1f2d2a;
}
/* 按下反馈：静态高对比变化（不做位移/缩放）。:active 在触摸屏上是即时的 */
.aac-slot:active,
.aac-slot.is-pressed {
  background: #157f74;
  border-color: #0e5c54;
}
.aac-slot:active .aac-word,
.aac-slot.is-pressed .aac-word { color: #fff; }
.aac-slot:active .aac-sym,
.aac-slot.is-pressed .aac-sym { filter: grayscale(1) brightness(2.4); }
/* 已被放进句子条的格：用描边加粗（灰度下也看得出），不改颜色语义 */
.aac-slot.is-in-strip { border-width: 6px; border-color: #2f5a51; }

/* 空格位（保留给"该孩子专属词"，填一次即冻结） */
.aac-slot.is-reserved {
  border-style: dashed;
  border-color: #cfdcd8;
  background: #f7faf9;
}
.aac-slot.is-reserved .aac-word { color: #a9b6b3; font-size: 13px; font-weight: 400; }

/* ---------- 说明面板（板子不滚动，面板内部可滚动） ---------- */
.aac-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(31, 45, 42, .55);
  padding: 16px 12px 28px;
}
.aac-sheet:not(.is-open) { display: none; }
.aac-sheet .page-about { margin: 0 auto; }
.aac-sheet-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin: 0 0 10px auto;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid #d8e3df;
  border-radius: 10px;
  background: #fff;
  color: #35534d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- 提示 / 兜底 ---------- */
/* ⚠️ 这行高度必须固定：孩子一按词，这里会换成「给大人：他刚说了什么 → 现在做什么」。
   如果换行导致这行变高，板子区域就会被挤小 → 格子大小跟着变 → 位置不再稳定。
   固定高度后，提示无论多长，4×4 的位置和大小都不动。 */
.aac-hint {
  flex: none;
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 0 6px 2px;
  font-size: 11px;
  line-height: 14px;
  color: #9db0ab;
  text-align: center;
}
/* 只有在提示大人"马上兑现"时才变深色；文字本身承载语义，不靠颜色区分对错 */
.aac-hint.is-cue { color: #2f5a51; }
.aac-fatal { margin: 40px auto; max-width: 420px; padding: 20px; font-size: 14px; color: #8a5a4a; text-align: center; }

/* ---------- 窄屏（列数不变，只缩字号与间距） ---------- */
@media (max-width: 430px) {
  /* 窄屏下句子条折成两行：词一行、按钮一行。只在句子条里折行，不影响 4×4 网格 */
  .aac-strip { flex-wrap: wrap; }
  .aac-strip-words { flex-basis: 100%; min-height: 38px; }
  .aac-strip-actions { flex-basis: 100%; justify-content: flex-end; }
}
@media (max-width: 380px) {
  .aac-app { gap: 6px; padding: 6px; }
  .aac-strip { min-height: 54px; }
  .aac-chip { min-width: 44px; height: 38px; font-size: 17px; }
  .aac-act { min-width: 52px; height: 42px; font-size: 13px; }
  .aac-slot { border-radius: 11px; }
}
@media (max-height: 520px) {
  .aac-app { gap: 5px; padding: 5px; }
  .aac-strip { min-height: 48px; }
  .aac-chip { height: 34px; font-size: 16px; }
  .aac-act { height: 38px; }
}