/* app.css — public/patient/ 全站唯一样式表
   施工依据：docs/PWA_STYLE.md，不做审美判断；新增本文件没有的样式需求先问医生。
   本文件随切片累积：这次(PWA-1)只放 index/form/done 三页用到的样式，
   其余页面(bind/mine/messages/referral)用到的类等它们真正开工时再加。 */

:root{
  /* 底与面 */
  --bg:        #FAF9F5;
  --card:      #FFFFFF;
  --warm:      #F4F1E9;

  /* 文字 */
  --ink:       #1F1E1D;
  --ink-soft:  #57534E;
  --ink-mute:  #8C877E;

  /* 强调（全站只在标题短线/箭头/主按钮底色/电话号码四处出现） */
  --clay:      #B8552F;
  --clay-deep: #93401F;

  /* 线 */
  --rule:      #E3DED2;

  /* 警示：断网/失效/失败三态用 */
  --warn-bg:   #F3EAE2;
  --warn-br:   #E0CDBF;
  --warn-tx:   #7A4326;

  /* 危险：删除类操作用 */
  --danger:    #A03A2A;

  --serif: "Songti TC","Songti SC","Noto Serif TC","Source Han Serif TC",
           "Source Han Serif SC","STSong",Georgia,serif;
  --sans:  -apple-system,BlinkMacSystemFont,"PingFang TC","PingFang SC",
           "Noto Sans TC","Microsoft JhengHei","Hiragino Sans GB",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65}
.wrap{max-width:480px;margin:0 auto;padding:0 20px 50px}

/* 顶栏 */
.top{display:flex;align-items:center;gap:12px;min-height:56px;padding-top:max(14px, env(safe-area-inset-top))}
.top .sp{flex:1}
.back{font-family:var(--sans);font-size:16px;background:none;border:0;padding:8px 4px 8px 0;
  color:var(--clay);cursor:pointer;min-height:44px}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--card)}
.lang button{font-family:var(--sans);font-size:15px;font-weight:500;padding:9px 15px;min-height:44px;
  border:0;background:none;color:var(--ink-soft);cursor:pointer}
.lang button.on{background:var(--ink);color:#fff}

/* 抬头 */
header{padding:12px 0 24px}
.mark{width:34px;height:2px;background:var(--clay);margin-bottom:18px}
h1{font-family:var(--serif);font-size:30px;line-height:1.3;font-weight:600;letter-spacing:.06em;margin:0 0 8px}
h2{font-family:var(--serif);font-size:25px;letter-spacing:.05em;margin:14px 0 6px}
.who,.tagline{margin:0;color:var(--ink-soft);font-size:16px}
.lede{color:var(--ink-soft);font-size:15.5px;margin:0 0 24px;line-height:1.6}

/* 已绑定顶部窄项（PWA-1 里只做视觉展示，不可点——目标页面是 PWA-3/4 才有） */
.mine{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-bottom:22px}
.m-row{display:flex;align-items:center;gap:12px;width:100%;padding:16px 20px;min-height:60px;
  border-top:1px solid var(--rule);font-size:17px;color:var(--ink)}
.m-row:first-child{border-top:0}
.m-row .t{flex:1;font-weight:500}
.m-row .sub{display:block;font-size:14.5px;color:var(--ink-soft);font-weight:400;margin-top:2px}
.m-row.hero{background:var(--warm)}
.m-row.hero .t{font-family:var(--serif);font-size:19px;letter-spacing:.04em;font-weight:600}

/* 断网横幅（index.html 专用，PWA_STYLE §8） */
.banner{display:none;margin-top:14px;padding:13px 16px;background:var(--warn-bg);border:1px solid var(--warn-br);
  border-radius:11px;font-size:15px;color:var(--warn-tx);line-height:1.55}
body.off .banner{display:block}
body.off .entries{opacity:.4;pointer-events:none}

/* 入口卡 */
.label{font-size:14px;color:var(--ink-soft);margin:0 0 9px 4px}
.entries{display:flex;flex-direction:column;gap:11px}
.entry{display:block;width:100%;text-align:left;min-height:86px;padding:19px 21px;background:var(--card);
  border:1px solid var(--rule);border-radius:14px;color:var(--ink);text-decoration:none}
.entry:active{background:var(--warm)}
.entry-t{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.04em}
.entry-t .arrow{margin-left:auto;color:var(--clay);font-family:var(--sans);font-size:18px;font-weight:400}
.entry-d{margin:4px 0 0;font-size:15px;color:var(--ink-soft);line-height:1.5}

.note{display:flex;gap:11px;margin:18px 2px 0;font-size:15px;color:var(--ink-soft);line-height:1.6}
.note .bar{flex:0 0 2px;background:var(--rule);border-radius:2px}

/* 联络卡（signature 组件——断网时唯一还能用的区块，视觉重量要跟入口卡相当） */
.contact{margin-top:26px;padding:22px 21px 20px;background:var(--warm);border:1px solid var(--rule);border-radius:14px}
.contact h3{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.05em;margin:0 0 3px}
.contact .always{font-size:14px;color:var(--ink-soft);margin:0 0 15px}
.row{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--rule)}
.row:first-of-type{border-top:0;padding-top:0}
.row dt{flex:0 0 58px;margin:0;font-size:14px;color:var(--ink-soft);padding-top:3px}
.row dd{margin:0;flex:1;font-size:16px}
dl{margin:0}
.hours span{display:block}
.tel{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.04em;color:var(--clay-deep);
  text-decoration:none;border-bottom:1.5px solid rgba(184,85,47,.32)}
.telbig{display:block;text-align:center;margin-top:10px;font-family:var(--serif);font-size:27px;
  font-weight:600;letter-spacing:.04em;color:var(--clay-deep);text-decoration:none}

/* 表单 */
.fld{margin-bottom:22px}
label{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:7px}
.req{color:var(--clay);margin-left:3px}
.opt{font-size:13.5px;color:var(--ink-mute);margin-left:5px}
input[type=text],input[type=tel],input[type=date],textarea{width:100%;font-family:var(--sans);font-size:17px;
  color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:11px;padding:13px 14px;min-height:52px}
input:focus,textarea:focus{outline:0;border-color:var(--clay)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
.two{display:flex;gap:10px;align-items:center}
.two span{color:var(--ink-soft);font-size:15px;flex:0 0 auto}
.hint{font-size:14px;color:var(--ink-mute);margin:7px 0 0;line-height:1.5}

/* chip：时段可多选，录音语言单选 */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--sans);font-size:16px;padding:11px 18px;min-height:48px;background:var(--card);
  border:1px solid var(--rule);border-radius:999px;color:var(--ink);cursor:pointer}
.chip.on{background:var(--clay);border-color:var(--clay);color:#fff}

/* 录音——本切片(PWA-1)静态展示，不接麦克风，见 form.html 内 TODO(PWA-2) */
.rec{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 17px}
.rec-top{display:flex;align-items:center;gap:14px}
.rec-btn{flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--clay);border:0;color:#fff;
  font-size:23px;display:flex;align-items:center;justify-content:center}
.rec-info{flex:1}
.rec-info .l1{font-size:16px;font-weight:500}
.rec-info .l2{font-size:14px;color:var(--ink-soft);margin-top:2px}
.rec-langs{display:flex;gap:8px;margin-top:15px;padding-top:15px;border-top:1px solid var(--rule)}
.rec-langs .chip{font-size:15px;padding:9px 15px;min-height:44px}

/* 照片——本切片(PWA-1)静态展示，不接相机，见 form.html 内 TODO(PWA-2) */
.photos{display:flex;gap:10px;flex-wrap:wrap}
.ph.add{width:88px;height:88px;border-radius:11px;background:var(--warm);border:1px dashed var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:26px;color:var(--clay)}
.ph.add small{font-size:12.5px;color:var(--ink-soft)}
.guide{margin-top:11px;padding:13px 15px;background:var(--warm);border:1px solid var(--rule);border-radius:11px;
  font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.guide b{color:var(--ink);display:block;margin-bottom:4px;font-size:15px}

/* PWA-1 里录音/拍照还没接后端：变淡 + 点不动，不能是看起来能点却没反应。
   跟 PWA_STYLE §8 断网时入口卡的处理手法一致(opacity+pointer-events)，
   不是另发明一套。提示文字放在 .stub 外面，保持清晰可读，不跟着变淡。 */
.stub{opacity:.55;pointer-events:none}
.soon-tag{display:block;margin-top:10px;font-size:13px;color:var(--ink-mute)}

/* 必填校验：字段本身标红，错误提示放在提交按钮正上方(PWA_STYLE §11)，
   不是只在表单顶部——字段一旦被重新编辑就清掉标红，不用固定几秒钟 */
input.field-error,textarea.field-error{border-color:var(--danger)}
.form-error{display:none;color:var(--danger);font-size:15px;line-height:1.5;margin:0 0 10px}
.form-error.show{display:block}

.submit{width:100%;min-height:56px;margin-top:8px;background:var(--clay);color:#fff;border:0;border-radius:12px;
  font-family:var(--sans);font-size:18px;font-weight:500;cursor:pointer}
.after{margin-top:14px;font-size:14.5px;color:var(--ink-soft);line-height:1.6;padding-left:12px;border-left:2px solid var(--rule)}

/* 成功页 / 状态圆盘 */
.center{text-align:center}
.pad{padding-top:34px}
.disc{width:66px;height:66px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:30px}
.d-ok{background:var(--warm);border:1.5px solid var(--clay);color:var(--clay-deep)}

.sum{margin-top:26px;background:var(--card);border:1px solid var(--rule);border-radius:13px;padding:18px 19px;text-align:left}
.sum .r{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--rule);font-size:16px}
.sum .r:first-child{border-top:0;padding-top:0}
.sum .r dt{flex:0 0 74px;margin:0;color:var(--ink-soft);font-size:14.5px;padding-top:2px}
.sum .r dd{margin:0;flex:1}

.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:19px 20px;margin-top:22px}
.card.warm{background:var(--warm)}
.card h3{font-family:var(--serif);font-size:17px;letter-spacing:.04em;margin:0 0 9px}
.card p{margin:0 0 13px;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.card p:last-child{margin-bottom:0}

.btn{display:block;width:100%;min-height:54px;margin-top:12px;font-family:var(--sans);font-size:17px;
  font-weight:500;border-radius:12px;cursor:pointer}
.b1{background:var(--clay);color:#fff;border:0}
.b2{background:var(--card);color:var(--clay-deep);border:1px solid var(--rule)}

/* form.html 三型共用页：按 body[data-type] 显示对应区块 */
.only-new,.only-fu,.only-ask{display:none}
body[data-type="new"] .only-new{display:block}
body[data-type="followup"] .only-fu{display:block}
body[data-type="consult"] .only-ask{display:block}

/* 已绑定 / 未绑定两态 */
.bound-only{display:none}
body.bound .bound-only{display:block}
body.bound .unbound-only{display:none}

:focus-visible{outline:2px solid var(--clay);outline-offset:2px}