/**
 * 全站通用件：按钮、提示条、表单控件、读屏标签、脚本的轻提示。
 *
 * 单独一份而不是塞进 web.css，也不是留在 web-clinic.css 里，有两个原因：
 *
 * 1. `.btn` 原来只定义在 web-clinic.css（单机构那几页）里，可机构列表页的空态按钮、
 *    会员区的登录按钮都用它 —— 那些页面不加载那份样式，按钮一直是个裸链接。
 *    搬出来之后每一页都有。
 * 2. web.css 与 web-clinic.css 都已经贴着仓库的单文件 20KB 上限
 *    （见 bin/check-limits.php），再往里加就超。
 *
 * 由 Views/web/parts/head.php 无条件加载，排在 web.css 之后、各页专有样式之前。
 * 规矩同 web.css：颜色/字号/圆角一律走 tokens.css 的变量，别写死值。
 */

/* 只给读屏的标签。视觉上去掉，但仍在无障碍树里 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 两边都用得上的两个工具类。别再往这里加第三个——
   排版是布局的事，靠一堆 .mt-* 拼出来的页面改一次要找十处 */
.mt-lg { margin-top: var(--mb-gap-lg); }
.center { text-align: center; }

/* ---------- 表单 ---------- */
.form-narrow { max-width: 640px; }
.field { display: block; margin-bottom: var(--mb-gap); }
.field__label { display: block; margin-bottom: 5px; font-size: var(--mb-font-md); color: var(--mb-sub); }
.field__req { color: var(--mb-danger); }
/**
 * 输入框铺满一行。`:not(radio):not(checkbox)` 不是洁癖：
 * 单选/复选框本来就不该被拉成整行宽，而 `.field input` 的权重（0,1,1）比
 * 后面那条 `.segs__radio`（0,1,0）高，光在那边写 width:1px 是盖不掉的 ——
 * 结果是藏起来的 radio 各占一整行，把页面撑出横向滚动。
 */
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; padding: 9px var(--mb-gap); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); background: var(--mb-card);
  font: var(--mb-font-base)/1.5 var(--mb-font-family); color: var(--mb-text);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--mb-brand-soft); outline-offset: -1px; border-color: var(--mb-brand);
}
/* 联系渠道那一排。radio + label：不需要 JS，选中态由 :checked 给，
   提交的仍是 contact_type（同小程序那排 segs） */
.segs { display: flex; flex-wrap: wrap; gap: var(--mb-gap-sm); }
/**
 * radio 本体要藏起来但**仍然可聚焦**（键盘能走到、:focus-visible 能给 label 描边），
 * 所以用 1px + clip 那套，不是 display:none。
 *
 * 不能只写 `position:absolute; opacity:0`：上面那条 `.field input { width: 100% }`
 * 也命中它们，绝对定位又不脱离静态位置，于是五个 radio 各占一整行宽度依次排开，
 * 把页面撑出 300 多像素的横向滚动条 —— 桌面上表现为整页能左右晃。
 * 所以宽高必须显式压到 1px。
 */
.segs__radio {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.segs__seg {
  padding: 6px 16px; border-radius: var(--mb-radius-pill); cursor: pointer;
  background: var(--mb-fill); color: var(--mb-sub); font-size: var(--mb-font-md);
}
.segs__seg:hover { color: var(--mb-brand-ink); }
.segs__radio:checked + .segs__seg {
  background: var(--mb-brand); color: #fff; font-weight: 500;
}
/* 键盘走到这一排时要看得出焦点在哪 —— radio 本身是隐藏的 */
.segs__radio:focus-visible + .segs__seg { outline: 2px solid var(--mb-brand-ink); outline-offset: 2px; }

.consent { display: flex; gap: var(--mb-gap-sm); align-items: flex-start; margin-bottom: var(--mb-gap-sm); }
.consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--mb-brand); }
.consent span { font-size: var(--mb-font-md); color: var(--mb-sub); }

.btn {
  display: inline-block; border: 0; cursor: pointer; text-align: center;
  padding: 10px var(--mb-gap-xl); border-radius: var(--mb-radius-pill);
  background: var(--mb-brand); color: #fff;
  font: 600 var(--mb-font-lg)/1.2 var(--mb-font-family);
}
.btn:hover { background: var(--mb-brand-dark); }
.btn--block { display: block; width: 100%; }
.btn--ghost { background: transparent; color: var(--mb-brand-ink); border: 1px solid var(--mb-brand); }
.btn--ghost:hover { background: var(--mb-brand-soft); color: var(--mb-brand-ink); }
.btn--sm { padding: 7px var(--mb-gap-lg); font-size: var(--mb-font-base); }

.alert {
  padding: var(--mb-gap) var(--mb-gap-lg); border-radius: var(--mb-radius-lg);
  font-size: var(--mb-font-base); margin-bottom: var(--mb-gap-lg);
}
.alert--ok { background: var(--mb-brand-soft); color: var(--mb-brand-ink); }
.alert--err { background: #fdecea; color: var(--mb-danger); }

/* ---------- JS 的轻提示 ---------- */
/* 收藏成功、复制失败这类一句话反馈。位置钉在底部中间，
   手机上要避开详情页那条底部操作条（.dock 高 56px + 安全区） */
.mb-toast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60;
  max-width: calc(100% - 32px); padding: 8px 18px; border-radius: var(--mb-radius-pill);
  background: rgba(27, 27, 27, .88); color: #fff;
  font-size: var(--mb-font-base); box-shadow: var(--mb-shadow-up);
}
@media (min-width: 768px) {
  .mb-toast { bottom: 32px; }
}