/* settings.css — page-specific styles for settings.html */

/* ── Layout ─────────────────────────────────────── */
.page-header {
  background: var(--primary-deep);
  color: white;
  padding: 18px 20px 20px;
  border-radius: 0 0 24px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* .back-btn 的本体挪去 shared.css —— T104：/tuition 也要同一颗，
   而 T103 已经证过「两份本体就是下一次漂移的种子」。 */
.page-header > div { flex: 1; min-width: 0; }
.page-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.2px; }
.page-subtitle { font-size: 12.5px; font-weight: 500; color: #A9C4AC; margin-top: 2px; }

.content { padding: 16px 20px; }
@supports (padding: env(safe-area-inset-left)) {
  .content {
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}

/* ── Section headings ────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--text);
  margin: 20px 0 4px;                    /* UIV-08：下距 6 → 4（画板 CSettings） */
}
.section-title:first-child { margin-top: 2px; }   /* UIV-08：画板首区标题上距 2 */
.section-hint { font-size: 12px; color: var(--text-secondary); margin: -6px 0 10px; line-height: 1.5; }
/* UIV-08：分区标题下面紧跟的那句说明 —— 画板净间距 4（标题下距 4 + 说明上距 0），行高 normal。
   以前是 -6 的负边距把净间距拉到 0。卡片里那两句同意说明（.sms-consent-hint）不是这种位置，不动。 */
.section-title + .section-hint { margin-top: 0; line-height: normal; }

/* ── Card ────────────────────────────────────────── */
.card { background: var(--card); border-radius: var(--radius-card); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }   /* UIV-08：18（UIV-01 §4 主内容卡 --radius-card） */
/* UIV-08：联系卡上下内边距 16 → 6 —— 每一行自己有 12 的上下内边距，卡再垫 16 就是双份（画板 CSettings） */
.card.contact-card { padding-top: 6px; padding-bottom: 6px; }

/* ── Field row (contact inputs) ─────────────────── */
.field-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.field-row:last-child { border-bottom: none; }
.field-row .icon { width: 24px; display: flex; justify-content: center; color: var(--primary); }
.field-row--disabled .icon { color: var(--text-secondary); }
.field-row .field-meta { flex: 1; min-width: 0; }
.field-row .field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }   /* UIV-08：12 · 次级色 */
.field-row input[type="text"],
.field-row input[type="email"],
.field-row input[type="tel"] {
  width: 100%; border: none; background: transparent;
  font-family: inherit; font-size: 14.5px; color: var(--text);   /* UIV-08：14 → 14.5 */
  /* BUG-055（t-250）：这两格 26 高。没边框没底色，所以内边距 4 → 13 撑到 44 看不出来；
     再用负外边距把多出的 18 收回（原 margin-top 2 → -7），行高 67 / 66 与字的位置一像素不动（UIV-08 的画板值不动）。
     往上盖住的是自己的字段名（不是目标），往下 9 进的是本行的下内边距（12），够不到下一行的任何目标。 */
  padding: 13px 0; margin: -7px 0 -9px; outline: none;
}
/* UIV-08 §4④（design 09-11 更正）：画板两态都画了 —— 有值 600、空着显示占位字 500。
   用 :placeholder-shown 分，不加状态类、不动 JS。占位字颜色照画板（2.61，PD-0072 v2 · S-019 §4，进闸 8 豁免表） */
.field-row input:not(:placeholder-shown) { font-weight: 600; }
.field-row input:placeholder-shown { font-weight: 500; }
.field-row input::placeholder { color: var(--text-placeholder-field); opacity: 1; }

/* ── Disabled (coming soon) channel rows ─────────── */
.field-row--disabled { opacity: 0.42; }
.field-row--disabled input { cursor: not-allowed; }
.coming-soon-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 5px;
  vertical-align: middle;
}
.coming-soon-badge.not-available {
  color: var(--tag-neutral-fg);
  background: var(--tag-neutral-bg);
}

/* ── Notification matrix ─────────────────────────── */
.matrix-wrap { overflow-x: auto; margin: -4px; padding: 4px; position: relative; }

/* t-244：提示由 settings.js 按**真实溢出**（scrollWidth > clientWidth）切 hidden —— 断点不再单独决定这件事。
   原来是 .matrix-wrap::after + min-width:480px：表塞得下时它照样挂着，家长滑不动会以为页面坏了。 */
.matrix-swipe-hint {
  display: block; text-align: right;
  color: var(--text-secondary); font-size: 11px; font-weight: 600;
  padding: 6px 2px 0; pointer-events: none;
}

/* t-244 / S-021 §3：去掉 min-width:320px —— 溢出的真因是这条**人造地板**，不是表格结构。
   实测（design 在 staging 4137d847 上量、本机复量）：390 表宽 320→318 · 360 320→288 · 320 320→248，可滑距离全变 0；
   三个视口渠道列仍是 44/46/72，命中区 44 高不动（S-019 §1 ⑦）。DOM 一个字没动 —— t-225 的 aria-labelledby 不会被带走。
   **不用 table-layout:fixed + 百分比均分**（S9）：数字漂亮，但 TELEGRAM 表头会被切尾字母，而 getBoundingClientRect 不报文字溢出。 */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 0; }
.matrix th, .matrix td { padding: 10px 6px; text-align: center; border-bottom: 1px solid var(--hairline); }
.matrix th { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.matrix th:first-child, .matrix td:first-child { text-align: left; padding-left: 4px; font-weight: 600; }
.matrix tr:last-child td { border-bottom: none; }
/* t-224（PD-0072 · S-019 §1 ⑦ · 画板 CSettings）：自绘勾选框 —— 24 · 圆角 8；勾上 = --primary 底 + 白勾（13 · 笔宽 2.5），
   必达那一行 = --accent 底（白压暖橙 2.70，用户 Q55 选 A，闸 8 豁免表）；没勾 = 白底 + 1.5px 边。
   **没勾的边不照画板的 #D5DCD1**（压白 1.40，非文字 3:1 不过，也不在 PD-0072 的两类里）→ --text-secondary 5.17。
   锁着的那一格（必达 · 短信，disabled）：勾上的样子 + 禁止光标，不降透明度（design-spec §8）。
   白勾是背景图 —— SVG 里的白就是 --on-accent 的值（data URI 里用不了 var）。 */
.matrix .mx-cell {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -10px -6px; cursor: pointer;   /* 负边距抵掉单元格内边距：整格都点得到 */
}
.matrix input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--card) center / 13px 13px no-repeat;
  border: 1.5px solid var(--text-secondary);
  cursor: pointer;
}
.matrix input[type="checkbox"]:checked {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.matrix tr[data-level="critical"] input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent); }
.matrix input[type="checkbox"]:disabled, .matrix .mx-cell:has(input:disabled) { cursor: not-allowed; }
/* 高对比模式下自绘框会整个消失 —— 退回系统勾选框 */
@media (forced-colors: active) { .matrix input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; } }
.matrix-legend { font-size: 11px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

/* ── Toggle row ──────────────────────────────────── */
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .toggle-meta { flex: 1; min-width: 0; }
.toggle-row .toggle-label { font-size: 14px; font-weight: 700; }
.toggle-row .toggle-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
/* t-214：关着的开关以前是写死的 #CBD5E1 实心轨 —— 压白卡 1.48，看不出那里有个开关（闸 8，非文字 3:1）。
   关态改成描边轨：白底 + 内描边 2px --text-secondary（压白卡 5.17），钮也用 --text-secondary 实心；
   开态照旧（--primary 实心 + 白钮，UIV-08 那几格不动）。开 / 关除了钮的位置，还靠「实心 vs 描边」分开，
   不只靠颜色。描边用 inset box-shadow 画 —— 不加 border，轨道和钮的几何一个像素不动。 */
.slider {
  position: absolute; cursor: pointer; inset: 0; border-radius: 999px; transition: 0.2s;
  background: var(--card); box-shadow: inset 0 0 0 2px var(--text-secondary);
}
.slider::before {
  position: absolute; content: ''; height: 21px; width: 21px;
  left: 3px; top: 3px; background: var(--text-secondary); border-radius: 999px; transition: 0.2s;
  box-shadow: none;                      /* UIV-08（qa 机读表）：画板的开关钮没有投影 */
}
input:checked + .slider { background: var(--primary); box-shadow: none; }
input:checked + .slider::before { transform: translateX(19px); background: white; }
/* t-216：真正的 <input> 是 0×0 透明，全局 :focus-visible 的外环画在它身上等于没画 —— 键盘 Tab 到开关时
   看不出停在哪一颗（闸 9）。环画到看得见的滑块上，和全站同一个 --focus-ring。
   关态要把内描边和外环写在**同一条** box-shadow 里（逗号并列），否则聚焦时描边被外环顶掉（design 09-11）。
   :focus-visible —— 鼠标点击不出环。 */
.switch input:focus-visible + .slider { box-shadow: inset 0 0 0 2px var(--text-secondary), var(--focus-ring); }
.switch input:checked:focus-visible + .slider { box-shadow: var(--focus-ring); }

/* ── Sub-controls (shown/dimmed by toggle state) ─── */
.sub-control { padding: 8px 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-control label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }   /* UIV-08：From / to 12.5 / 600 */
.sub-control select,
.sub-control input[type="time"],
.sub-control input[type="number"] {
  font-family: inherit; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 8px 14px; border: none;
  border-radius: 10px; background: #ECEFE9; color: var(--text);
}
/* BUG-055（t-250 · design 17:04Z）：时间控件本体不动（UIV-08 判过它的 padding-top 8，自己撑到 44 字会偏上 7），
   有效命中盒是包着它的 label（S-022 §1）：44 高、字与胶囊居中。#digest-time 由 .digest-when 同样包着。 */
.sub-control .time-field { display: flex; align-items: center; gap: 10px; min-height: 44px; }

/* ── Save bar ─────────────────────────────────────── */
.save-bar {
  position: sticky; bottom: 0;
  background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.save-btn {
  display: block; width: 100%; padding: 15px;
  background: var(--primary-deep); color: white;
  /* 主行动的圆角走 token（T103 / UX-006 ②）。**这不是审美选择，是让它只有一个来源** ——
     改之前全站主按钮 4 种圆角，而四种不是四个人各写各的，是没有一处可引用的必然结果。 */
  border: none; border-radius: var(--radius-btn);
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(36,64,43,0.3);
}
.save-btn:active { opacity: 0.9; }

/* ── Select row (language picker) ──────────────── */
.select-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.select-row .select-meta { flex: 1; min-width: 0; }
.select-row .select-label { font-size: 14px; font-weight: 700; }
.select-row .select-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.select-row select {
  font-family: inherit; font-size: 14px;
  padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: white; color: var(--text);
  cursor: pointer; flex-shrink: 0;
}

/* Message levels: importance × channel */
.matrix td:first-child .level-name { font-weight: 600; }
.matrix td:first-child .level-desc {
  font-weight: 400; font-size: 11px; color: var(--text-secondary);
  margin-top: 2px; line-height: 1.4; max-width: 220px;
}
.matrix input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.75; }
/* t-224：锁着的那一格（必达 · 短信：勾着、点不动）**不降透明度**（S-019 §1 ⑦ · design-spec §8）—— 它是「一定会发」，不是「用不了」。
   没绑 Telegram 的那一列（没勾、点不动）仍是 0.75：那才是「这会儿用不了」。 */
.matrix input[type="checkbox"]:checked:disabled { opacity: 1; }
.matrix tr[data-level="critical"] td:first-child { color: var(--danger, #d64545); }

/* ── Telegram 绑定 ────────────────────────────────── */
.tg-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.tg-block[hidden] { display: none; }
.tg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tg-title { font-size: 14.5px; font-weight: 700; }
.tg-state { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.tg-state.ok { color: var(--success); }
/* 「被拉黑」不能长得像一个中性状态 —— 那正是覆盖缺口 */
.tg-state.bad { color: var(--danger); }
.tg-hint { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 6px 0 10px; }
.tg-btn {
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  background: var(--primary); color: #fff; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer; min-height: 44px; box-sizing: border-box;
}
.tg-btn.secondary { background: var(--border); color: var(--text); }
.tg-btn[hidden] { display: none; }
.tg-err { margin-top: 8px; font-size: 13px; color: var(--danger); font-weight: 600; }
.tg-err[hidden] { display: none; }

.quiet-note {
  grid-column: 1 / -1;
  margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary);
}
.quiet-note[hidden] { display: none; }
#quiet-live { font-weight: 700; color: var(--primary); }

/* ── 每日摘要 ─────────────────────────────────────── */
.digest-when {
  display: flex; align-items: center; gap: 8px;
  grid-column: 1 / -1; font-size: 14px; font-weight: 600; margin-bottom: 6px;
  min-height: 44px;   /* BUG-055（t-250）：label 包着 radio，她被训练成点整行 —— 整行 15 高等于让她学会的动作失败。撑到 44、字居中（align-items 已是 center） */
}
.digest-when input[type="time"] { margin-left: 4px; }
.digest-when input[type="time"]:disabled { opacity: 0.45; }
#digest-preview-btn { grid-column: 1 / -1; margin-top: 10px; justify-self: start; }
/* 预览是一封信的样子，不是一段界面文案 —— 等宽 + 保留换行 */
.digest-preview {
  grid-column: 1 / -1; margin: 10px 0 0; padding: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; color: var(--text);
  overflow-x: auto;
}
.digest-preview[hidden] { display: none; }

/* 短信通知同意（T023）：开关下面那两句提示 */
.sms-consent-hint { margin: 8px 0 0; }
.sms-consent-hint[hidden] { display: none; }

/* ── T067：改渠道的再同意层 ──
   用共用的 .modal-overlay / .modal-sheet（shared.css），这里只补内容的排版。 */
.rc-group { margin-bottom: 14px; }
.rc-group-title {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.rc-list {
  margin: 0; padding-left: 18px;
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.rc-list li { margin-bottom: 4px; }
.rc-list .rc-where { color: var(--text-secondary); }
.rc-note {
  font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: 6px 0 0;
}
.rc-error {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: #FDECEC; border: 1px solid #F5C2C2; color: #8A1F1F;
  font-size: 13px; line-height: 1.45;
}
#rc-confirm { margin-top: 16px; }
.rc-cancel-btn {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  background: none; border: none; font: inherit; font-size: 14px;
  color: var(--text-secondary); cursor: pointer;
}
.rc-gap .rc-group-title { color: #8A5A1F; }
.rc-gap .rc-list { color: var(--text-secondary); }

/* 上一次保存的 toast（z-index 300）会盖在共用弹层（200）上面 —— 盖住的正好是
   「不含验证码」和「随时能改」那两行，以及确认按钮的一半。**同意层不能被一条
   提示遮住**，所以它排在 toast 之上。 */
#rc-modal { z-index: 400; }

/* ── 摘要状态行（PD-0043）───────────────────────────────
   它说的是**系统会做什么**，所以放在开关行之后、sub-control 之外：
   摘要关掉时那一段会变灰，而「已关闭」那句话恰恰是这时候唯一要说的。 */
.digest-status { margin-top: 10px; }
.digest-status-line { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.digest-status-why { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.digest-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* `display: flex` 会盖过 [hidden]（它只是 display:none 的一条默认规则）——
   不写这一条，两颗「去处」按钮在「已关闭」和「正常」两态里照样露着。
   实测抓到的：JS 里 actions.hidden = true 了，屏幕上它还在。 */
.digest-status-actions[hidden] { display: none; }
.digest-status-actions .btn-cancel { flex: 1 1 auto; }