/* == css/app/page-guest.css · 工单查询页（游客工单查询 + 邮箱找回） ==
 *
 * 定位：游客免登录提交的工单没有账号，无法进入「我的工单」；此页是唯一的后续通道。
 *       支持两种查询方式：
 *         ① 按工单编号：工单编号 + 查询码（强校验，凭据组合）
 *         ② 按联系邮箱：提交时填写的邮箱（找回入口，弱凭据 → 限速 + 内容裁剪）
 *
 * 【历史问题与本次修复】
 *   本页此前直接套用 PC 工作台类（.wsf-card / .adm-input / .ws-btn）——
 *   而 .wsf-card 定义在 workspace-form.css（仅 submit 页加载），
 *   .adm-input 定义在 admin.css（后台样式，前台从不加载），
 *   .ws-btn 虽在 workspace.css（仅 PC 加载）但移动端不加载；
 *   结果本页在 PC 与移动端都是**无样式**的裸 HTML（输入框、按钮全部失效）。
 *
 *   现改为与工作台同构：
 *     · PC 端  —— 直接复用工作台既有组件（.ws-page / .ws-page-head /
 *                  .ws-table-card / .ws-table-bar / .ws-tabs / .ws-tab /
 *                  .ws-table / .ws-empty / .ws-btn），与「我的工单」「反馈大厅」同构；
 *     · 移动端 —— 复用移动端既有组件（.m-page / .m-form / .chip / .tk-card）；
 *     · 仅「查询表单」需要自有样式（.gq-*），视觉规格逐条对齐
 *       workspace-form.css 的 .wsf-* 同名部件（字号/圆角/控件高度/焦点环）。
 *
 * 命名空间 gq-（guest query），仅用于查询表单，不与 .ws-*（PC 工作台）、
 * .m-*（移动端）发生任何冲突。
 * ========================================================================== */

/* ---------- 查询表单（自有命名空间，PC / 移动端共用一套结构） ---------- */
.gq-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gq-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}
.gq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.gq-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-1);
}
/* 控件：移动端规格（13px 字号 / 11px 14px 内边距），PC 端在下方收紧 */
.gq-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--black);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gq-input::placeholder { color: var(--gray-3); }
.gq-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* 查询码：等宽字体，便于逐位核对 */
.gq-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}
.gq-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gq-note {
  font-size: 12px;
  color: var(--gray-3);
  line-height: 1.6;
}

/* ---------- 查询卡片：按内容高度收缩（不参与纵向拉伸） ---------- */
.gq-query-card {
  flex: none;
  min-height: 0;
}

/* ---------- 结果卡片：高度随结果行数浮动 ----------
   不能用 flex:1 撑满剩余高度：结果行数不定（0~20 条），
   撑满会让卡片高度固定，超出的行被 .ws-table-card 的 overflow:hidden 裁掉且无法滚动。
   改为按内容高度自适应，由 .mvc-main.is-form 承担整页滚动。 */
.gq-result-card {
  flex: 0 0 auto;
  min-height: 0;
}

/* ---------- 卡片内容区：与 .ws-table-bar 的 16px 内边距对齐 ---------- */
.gq-panel-body { padding: 18px 16px; }

/* ---------- 提示条（查询结果前的说明） ---------- */
.gq-tip {
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--blue-50);
  color: var(--blue);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ==========================================================================
   PC 端微调：把控件收紧到工作台密度（对齐 workspace-form.css 的 .wsf-* 规格）
   —— 32-36px 控件高度、13px 字号、8px 圆角，与表格行密度匹配。
   ========================================================================== */
body:not(.mobile-body) .gq-input {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
}
body:not(.mobile-body) .gq-label {
  font-size: 13px;
  color: var(--black);
}
body:not(.mobile-body) .gq-form { gap: 16px; }
body:not(.mobile-body) .gq-actions .ws-btn { height: 36px; border-radius: 8px; }

/* ==========================================================================
   窄屏：双字段转单列，按钮占满宽度（PC 用 .ws-btn，移动端用 .btn）
   ========================================================================== */
@media (max-width: 639px) {
  .gq-grid-2 { grid-template-columns: 1fr; }
  .gq-actions { flex-direction: column; align-items: stretch; }
  .gq-actions .ws-btn,
  .gq-actions .btn { width: 100%; }
}