/* ============================================================================
   震後建物快篩助手 · v2 stylesheet
   Palette kept from v1 (the "blueprint" identity):
     paper #f4f5f2 · ink #1b2733 · blueprint blue #24557e
     grades: A #bf3a2b (danger) · B #b47a06 (caution) · C #2f7d4f (ok)
   Grade colors are reserved EXCLUSIVELY for severity.
   ==========================================================================*/
:root{
  --paper:#f4f5f2; --card:#ffffff; --ink:#1b2733; --ink-soft:#4a5a68;
  --line:#d8dcd6; --blueprint:#24557e; --blueprint-soft:#e8eef4;
  --a:#bf3a2b; --a-bg:#faece9; --b:#b47a06; --b-bg:#faf3e2;
  --c:#2f7d4f; --c-bg:#e9f4ed;
  --radius:10px; --shadow:0 1px 3px rgba(27,39,51,.08),0 4px 14px rgba(27,39,51,.06);
  --mono:"SFMono-Regular",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:16px;line-height:1.65;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
h2{margin:0;font-size:1.15rem;letter-spacing:.02em}

/* ---------- top bar ------------------------------------------------------ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;background:var(--ink);color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:34px;height:34px;border-radius:6px;flex:none;
  background:
    linear-gradient(0deg,transparent 46%,rgba(255,255,255,.85) 47%,rgba(255,255,255,.85) 53%,transparent 54%),
    linear-gradient(90deg,transparent 46%,rgba(255,255,255,.85) 47%,rgba(255,255,255,.85) 53%,transparent 54%),
    var(--blueprint);
}
.brand-name{font-weight:700;letter-spacing:.04em}
.brand-sub{font-size:.72rem;color:#b9c4cd;letter-spacing:.18em}
.topbar-right{display:flex;align-items:center;gap:10px}
.pill{
  font-size:.78rem;padding:4px 12px;border-radius:99px;white-space:nowrap;
  border:1px solid transparent;
}
.pill-wait{background:#33424f;color:#c7d1d9}
.pill-ok{background:#1d3a2a;color:#9fd8b4;border-color:#2f7d4f}
.pill-warn{background:#43350f;color:#ecd28f;border-color:#b47a06}
.pill-down{background:#4a201a;color:#f0b0a6;border-color:#bf3a2b}
.lang-switch{display:flex;border:1px solid #4a5a68;border-radius:7px;overflow:hidden}
.lang-btn{background:transparent;color:#b9c4cd;border:0;padding:5px 12px;font-size:.8rem}
.lang-btn.active{background:#fff;color:var(--ink);font-weight:700}

/* ---------- notices ------------------------------------------------------ */
.notice-bar{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--blueprint-soft);border-bottom:1px solid var(--line);
  padding:9px 20px;font-size:.86rem;color:var(--ink-soft);
}
.notice-dot{width:8px;height:8px;border-radius:50%;background:var(--blueprint);flex:none;margin-top:7px}
.outage{
  margin:16px auto 0;max-width:980px;
  background:var(--a-bg);border:1.5px solid var(--a);border-radius:var(--radius);
  padding:16px 20px;color:#7d2318;
}
.outage-title{font-weight:800;letter-spacing:.08em;margin-bottom:4px}
.outage-contact{margin-top:8px;font-size:.9rem;font-weight:600}

/* ---------- layout / tabs ------------------------------------------------ */
.wrap{max-width:980px;margin:0 auto;padding:20px 16px 60px}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{
  flex:1;padding:12px 10px;border-radius:var(--radius);
  border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);
  font-weight:700;letter-spacing:.06em;
}
.tab.active{border-color:var(--blueprint);color:var(--blueprint);background:var(--blueprint-soft)}
.panel[hidden]{display:none}

/* ---------- steps -------------------------------------------------------- */
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:18px;
}
.step-head{margin-bottom:14px}
.step-no{
  font-family:var(--mono);font-size:.72rem;color:var(--blueprint);
  letter-spacing:.2em;border:1px solid var(--blueprint);
  padding:2px 8px;border-radius:4px;display:inline-block;margin-bottom:8px;
}
.step-sub{margin:6px 0 0;font-size:.88rem;color:var(--ink-soft)}

/* ---------- step 1 : shooting guide -------------------------------------- */
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.guide-card{
  margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#fafbf9;
}
.guide-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#e6e9e4}
.guide-card.noimg img{display:none}
.guide-card.noimg::before{
  content:"（示意圖）";display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#eceeeb 0 10px,#e3e6e2 10px 20px);
  color:#9aa5ad;font-size:.8rem;
}
.guide-card figcaption{padding:8px 10px;font-size:.8rem;color:var(--ink-soft);display:grid;gap:2px}
.guide-card figcaption b{font-size:.85rem}
.guide-card.good figcaption b{color:var(--c)}
.guide-card.bad figcaption b{color:var(--a)}

/* ---------- step 2 : element cards --------------------------------------- */
.element-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.element-card{
  display:grid;gap:6px;text-align:left;padding:12px;border-radius:8px;
  border:1.5px solid var(--line);background:#fafbf9;color:var(--ink);
}
.element-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#e6e9e4}
.element-card img.noimg{display:none}
.element-card .el-name{font-weight:800;font-size:1.05rem;letter-spacing:.1em}
.element-card .el-desc{font-size:.8rem;color:var(--ink-soft)}
.element-card.selected{
  border-color:var(--blueprint);background:var(--blueprint-soft);
  box-shadow:inset 0 0 0 1px var(--blueprint);
}
.element-card.selected .el-name{color:var(--blueprint)}

/* ---------- step 3 : upload ---------------------------------------------- */
.upload-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  border-radius:8px;padding:11px 18px;font-weight:700;letter-spacing:.04em;
  border:1.5px solid transparent;
}
.btn-ghost{background:#fff;border-color:var(--blueprint);color:var(--blueprint)}
.btn-ghost:active{background:var(--blueprint-soft)}
.btn-primary{background:var(--blueprint);color:#fff}
.btn-primary:disabled{background:#9fb0bf;cursor:not-allowed}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:14px}
.thumb{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#e6e9e4}
.thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.thumb .rm{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  border:0;background:rgba(27,39,51,.75);color:#fff;font-size:.85rem;line-height:1;
}
.consent{font-size:.78rem;color:var(--ink-soft);margin:12px 0 10px}
.submit-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.submit-hint{font-size:.82rem;color:var(--ink-soft)}

/* ---------- results ------------------------------------------------------ */
.danger-strip{
  background:var(--a-bg);border:1.5px solid var(--a);color:#7d2318;
  border-radius:8px;padding:10px 14px;font-weight:700;margin-bottom:10px;
}
.summary-strip{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  background:#fafbf9;border:1px solid var(--line);border-radius:8px;
  padding:8px 14px;font-size:.88rem;margin-bottom:12px;color:var(--ink-soft);
}
.summary-strip .cnt{font-family:var(--mono);font-weight:700}
.cnt.gA{color:var(--a)}.cnt.gB{color:var(--b)}.cnt.gC{color:var(--c)}
.results-list{display:grid;gap:14px}

.result-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;overflow:hidden;
}
.result-card.danger{border:2px solid var(--a)}
.rc-top{display:flex;gap:14px;padding:14px;align-items:flex-start}
.rc-photo{width:110px;flex:none;border-radius:8px;overflow:hidden;background:#e6e9e4}
.rc-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.rc-main{flex:1;min-width:0}
.rc-meta{font-size:.78rem;color:var(--ink-soft);font-family:var(--mono);display:flex;gap:10px;flex-wrap:wrap}
.rc-wait{font-size:.9rem;color:var(--ink-soft);margin-top:6px}

/* plain-language stage dots (no acronyms anywhere) */
.stage-rail{display:flex;gap:0;margin-top:10px;flex-wrap:wrap}
.stage{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ink-soft)}
.stage + .stage::before{content:"";width:18px;height:2px;background:var(--line);margin:0 6px}
.stage .dot{width:10px;height:10px;border-radius:50%;background:#cfd6cd;flex:none}
.stage.running .dot{background:var(--blueprint);animation:pulse 1.1s infinite}
.stage.done .dot{background:var(--c)}
.stage.error .dot{background:var(--a)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.grade-chip{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  padding:6px 14px;border-radius:8px;font-weight:800;letter-spacing:.06em;
}
.grade-chip .g{font-size:1.5rem;line-height:1;font-family:var(--mono)}
.grade-A{background:var(--a-bg);color:var(--a);border:1.5px solid var(--a)}
.grade-B{background:var(--b-bg);color:var(--b);border:1.5px solid var(--b)}
.grade-C{background:var(--c-bg);color:var(--c);border:1.5px solid var(--c)}

.rc-body{padding:0 14px 14px}
.rc-meaning{margin:8px 0;font-size:.92rem}
.rc-note{
  font-size:.85rem;border-radius:8px;padding:8px 12px;margin:8px 0;
}
.rc-note.escal{background:var(--a-bg);color:#7d2318;border:1px solid var(--a)}
.rc-note.lowconf{background:var(--b-bg);color:#6e4c05;border:1px solid var(--b)}
.rc-actions{margin:8px 0 0;padding-left:1.2em;font-size:.92rem}
.rc-actions li{margin:4px 0}
.rc-error{color:var(--a);font-size:.9rem;margin-top:8px}
.rc-report{border-top:1px dashed var(--line);padding:10px 14px}
.rc-report summary{
  cursor:pointer;color:var(--blueprint);font-weight:600;font-size:.9rem;
  list-style:none;
}
.rc-report summary::-webkit-details-marker{display:none}
.rc-report summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.rc-report[open] summary::before{transform:rotate(90deg)}
.rc-report-body{
  margin-top:10px;font-size:.88rem;line-height:1.6;color:var(--ink);
  max-width:100%;overflow-x:auto;
}
.rc-report-body h1,.rc-report-body h2,.rc-report-body h3,.rc-report-body h4{
  margin:14px 0 6px;font-size:1rem;line-height:1.4;
}
.rc-report-body h1:first-child,.rc-report-body h2:first-child{margin-top:0}
.rc-report-body p{margin:6px 0}
.rc-report-body ul,.rc-report-body ol{padding-left:1.3em;margin:6px 0}
.rc-report-body li{margin:3px 0}
.rc-report-body blockquote{
  margin:8px 0;padding:6px 12px;border-left:3px solid var(--line);
  color:var(--ink-soft);font-size:.85rem;
}
.rc-report-body table{border-collapse:collapse;font-size:.85rem;min-width:100%}
.rc-report-body th,.rc-report-body td{
  border:1px solid var(--line);padding:6px 10px;text-align:left;white-space:nowrap;
}
.rc-report-body code{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-family:var(--mono);font-size:.85em;
}
.rc-btns{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px dashed var(--line)}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:7px}

/* ---------- chat --------------------------------------------------------- */
.chat-shell{display:flex;flex-direction:column;min-height:60vh}
.chat-ctx{display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--ink-soft);flex-wrap:wrap}
.chat-ctx select{
  font:inherit;font-size:.86rem;padding:6px 8px;border-radius:7px;
  border:1px solid var(--line);background:#fff;max-width:100%;
}
.chat-messages{
  flex:1;overflow-y:auto;margin:14px 0;padding:4px;display:grid;gap:10px;
  align-content:start;min-height:260px;
}
.msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:.94rem;white-space:pre-wrap;word-break:break-word}
.msg.user{justify-self:end;background:var(--blueprint);color:#fff;border-bottom-right-radius:4px}
.msg.bot{justify-self:start;background:#fafbf9;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.sys{justify-self:center;background:transparent;color:var(--ink-soft);font-size:.82rem;text-align:center}
.msg .src{margin-top:8px;font-size:.8rem}
.msg .src summary{cursor:pointer;color:var(--blueprint);font-weight:600}
.msg .src li{margin:6px 0;color:var(--ink-soft)}
.chat-en-note{font-size:.78rem;color:var(--ink-soft);margin-bottom:6px}
.chat-input-row{display:flex;gap:10px;align-items:flex-end}
.chat-input-row textarea{
  flex:1;resize:none;font:inherit;padding:10px 12px;border-radius:8px;
  border:1.5px solid var(--line);background:#fff;
}
.chat-input-row textarea:focus{outline:none;border-color:var(--blueprint)}

/* ---------- footer / toast ----------------------------------------------- */
.footer{
  max-width:980px;margin:0 auto;padding:0 16px 40px;
  font-size:.78rem;color:var(--ink-soft);display:grid;gap:6px;
}
.mongo-note{color:var(--b)}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;
  font-size:.88rem;box-shadow:var(--shadow);z-index:50;max-width:90vw;
}

/* ---------- focus / motion ------------------------------------------------ */
:focus-visible{outline:3px solid var(--blueprint);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- print: only the chosen result card ---------------------------- */
@media print{
  body.printing *{visibility:hidden}
  body.printing .print-target,
  body.printing .print-target *{visibility:visible}
  body.printing .print-target{
    position:absolute;left:0;top:0;width:100%;
    border:1px solid #000;box-shadow:none;
  }
  body.printing .print-target .rc-btns{display:none}
}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:820px){
  .guide-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:15px}
  .topbar{padding:10px 12px}
  .brand-sub{display:none}
  .wrap{padding:14px 10px 50px}
  .step{padding:14px}
  .element-grid{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .element-card .el-desc{display:none}
  .upload-row .btn{flex:1}
  .rc-top{flex-direction:row}
  .rc-photo{width:86px}
  .msg{max-width:95%}
  .tab{padding:10px 6px;font-size:.92rem}
}
@media (max-width:400px){
  .guide-grid{grid-template-columns:1fr 1fr}
  .element-grid{grid-template-columns:1fr}
  .element-card{grid-template-columns:96px 1fr;grid-template-areas:"img name" "img desc";align-items:center}
  .element-card img{grid-area:img}
  .element-card .el-name{grid-area:name}
  .element-card .el-desc{display:block;grid-area:desc}
}