/* Fesco Reports — screen UI + the print stylesheet that produces the PDF. */

/* Every CJK family that might carry 简体中文 has to be named explicitly: browsers do
   NOT fall back to an installed CJK font from a Latin-only stack, so Chinese remark
   text renders as blank space if the list stops at sans-serif.

   ORDER MATTERS. "PingFang SC" must come AFTER the Hiragino/Heiti/Songti entries.
   On macOS builds where PingFang is not a real font file the name still resolves to
   a glyph-less face, and Chrome then drops the entire Chinese run instead of
   continuing down the list — verified by rendering print-to-PDF output. Listing it
   later keeps iOS working (where Hiragino is absent and PingFang is the real font)
   without breaking macOS. */
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "Hiragino Sans GB","Heiti SC","Songti SC","PingFang SC","Microsoft YaHei",
    "Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei","Droid Sans Fallback",sans-serif;
  --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --navy:#0f172a; --accent:#b45309; --accent-soft:#fef3c7;
  --pass:#047857; --fail:#b91c1c; --hold:#b45309; --na:#64748b;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 var(--font-ui);
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.25}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}

/* ---------------- gate ---------------- */
#gate{position:fixed; inset:0; display:grid; place-items:center; background:var(--navy); padding:24px; z-index:50}
/* An id selector outranks the UA's [hidden]{display:none}, so the gate needs its
   own hidden rule or it stays on screen after unlocking. */
#gate[hidden],#app[hidden]{display:none}
.gatebox{width:min(360px,100%); background:#fff; border-radius:14px; padding:28px 24px; text-align:center}
.gatemark{font-size:11px; letter-spacing:.22em; font-weight:800; color:var(--accent)}
.gatebox h1{font-size:20px; margin-top:10px}
.gatebox p{color:var(--muted); font-size:14px; margin:0 0 18px}
.gatebox input{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; margin-bottom:10px}
.gatebox button{width:100%; padding:12px; border:0; border-radius:8px; background:var(--navy); color:#fff; font-weight:600}
.gateerr{color:var(--fail); font-size:13px; min-height:18px; margin-top:8px}

/* ---------------- chrome ---------------- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--navy); color:#fff;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  padding:10px 16px; padding-top:max(10px,env(safe-area-inset-top));
}
.brand{display:flex; align-items:baseline; gap:10px; color:#fff; text-decoration:none; min-width:0}
.mark{font-size:12px; letter-spacing:.2em; font-weight:800; color:#fbbf24}
.crumb{font-size:14px; color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.toolbar button{
  background:#1e293b; color:#fff; border:1px solid #334155; border-radius:8px;
  padding:8px 12px; font-size:13px; font-weight:600;
}
.toolbar button:hover{background:#334155}
.toolbar button.primary{background:#b45309; border-color:#b45309}
.toolbar button.primary:hover{background:#d97706}
.savestate{font-size:12px; color:#94a3b8; min-width:96px}

main{max-width:1080px; margin:0 auto; padding:18px 16px 80px}

/* ---------------- home ---------------- */
.newrow{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px}
.big{
  text-align:left; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:16px 18px; display:block;
}
.big:hover{border-color:var(--accent)}
.big b{display:block; font-size:16px; margin-bottom:4px}
.big i{display:block; font-style:normal; font-size:13px; color:var(--muted)}
.homehead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.homehead h2{font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0}
.ghost span{
  display:inline-block; font-size:13px; padding:7px 12px; border:1px dashed #94a3b8;
  border-radius:8px; color:var(--muted); cursor:pointer;
}
.ghost span:hover{border-color:var(--accent); color:var(--accent)}
.rlist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rlist li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; gap:12px; padding:12px 14px; flex-wrap:wrap;
}
.rlist a{flex:1 1 240px; min-width:0; text-decoration:none; color:inherit; display:grid; gap:3px}
.rtype{font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--muted)}
.rtype.inspection{color:#1d4ed8} .rtype.test{color:#7c3aed}
.rtitle{font-weight:600}
.rmeta{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rright{display:flex; align-items:center; gap:10px}
.rdate{font-size:12px; color:var(--muted)}
.verdict{font-size:11px; font-weight:800; padding:3px 8px; border-radius:20px; letter-spacing:.04em}
.verdict.r-pass{background:#d1fae5; color:var(--pass)}
.verdict.r-fail{background:#fee2e2; color:var(--fail)}
.verdict.r-hold{background:var(--accent-soft); color:var(--hold)}
.storage{font-size:12.5px; color:var(--muted); margin-top:22px; line-height:1.6}
.empty{color:var(--muted); font-size:14px; padding:14px 0}

/* ---------------- section nav ---------------- */
.secnav{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:12px; margin-bottom:6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.chip{
  flex:0 0 auto; font-size:12.5px; text-decoration:none; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:6px 12px; white-space:nowrap;
}
.chip:hover{border-color:var(--accent); color:var(--accent)}

/* ---------------- cards ---------------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px; scroll-margin-top:72px;
}
.card>h2{font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--navy);
  border-bottom:2px solid var(--line); padding-bottom:8px; margin-bottom:12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.badge{font-size:11px; font-weight:700; background:#e0e7ff; color:#3730a3; border-radius:20px; padding:2px 8px; letter-spacing:0}
.badge-fail{background:#fee2e2; color:var(--fail)}
.help,.note{font-size:12.5px; color:var(--muted); margin:0 0 12px; line-height:1.55}
.note{background:#f8fafc; border-left:3px solid var(--line); padding:8px 10px; border-radius:0 6px 6px 0}

/* ---------------- fields ---------------- */
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 12px}
.fgrid.tight{gap:8px 10px}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field>span{font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#fff;
}
.field textarea{resize:vertical; min-height:44px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field input[readonly]{background:#f8fafc; color:var(--muted)}
.field.wide{grid-column:1/-1}
.field.strong input,.field.strong select{font-weight:700}
.field.sm{max-width:170px} .field.xs{max-width:120px}
@media (min-width:700px){ .fgrid .field.sm{grid-column:span 1} }

/* ---------------- tables / rows ---------------- */
.trow,.dcard,.finding{border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; background:#fcfcfd}
.trowhead,.fhead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.tnum,.fnum{font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.05em}
.fnum{font-size:13px; background:var(--accent-soft); padding:3px 10px; border-radius:20px}
.fhactions{display:flex; gap:6px}
.tcells{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 12px}
.mini{background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 9px; font-size:12px; color:var(--muted)}
.mini:hover{border-color:var(--navy); color:var(--navy)}
.mini.danger:hover{border-color:var(--fail); color:var(--fail)}
.add{
  width:100%; background:#fff; border:1px dashed #94a3b8; border-radius:8px;
  padding:10px; font-size:13.5px; font-weight:600; color:var(--muted); margin-top:4px;
}
.add:hover{border-color:var(--accent); color:var(--accent); background:#fffbeb}
.dgroup{margin-bottom:10px}
.dgroup h4{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:6px}
.totals{display:flex; gap:16px; margin-bottom:12px; flex-wrap:wrap}
.totals span{font-size:13px; font-weight:700}
.totals i{display:block; font-style:normal; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase}

/* ---------------- checklist ---------------- */
.clgroup{border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:#fff}
.clgroup>summary{
  cursor:pointer; padding:11px 14px; display:flex; justify-content:space-between;
  align-items:center; gap:10px; font-size:14px; list-style:none;
}
.clgroup>summary::-webkit-details-marker{display:none}
.clgroup>summary::before{content:'▸'; color:var(--muted); margin-right:6px}
.clgroup[open]>summary::before{content:'▾'}
.clgroup[open]>summary{border-bottom:1px solid var(--line); background:#f8fafc}
.cltally{font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap}
.cltally em{color:var(--fail); font-style:normal}
.clrow{padding:12px 14px; border-bottom:1px solid #f1f5f9}
.clrow:last-child{border-bottom:0}
.clrow.fail{background:#fef2f2; border-left:3px solid var(--fail)}
.clsub{font-weight:600; font-size:14px; margin-bottom:2px}
.clreq{font-size:12px; color:var(--muted); margin-bottom:8px; line-height:1.5}

/* ---------------- photos ---------------- */
.photos{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line)}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin-bottom:8px}
.pthumb{position:relative; margin:0; border-radius:7px; overflow:hidden; border:1px solid var(--line); background:#fff}
.pthumb img{width:100%; aspect-ratio:1; object-fit:cover; display:block; cursor:zoom-in}
.pmiss{aspect-ratio:1; display:grid; place-items:center; color:var(--muted); background:#f1f5f9}
.pthumb figcaption{position:absolute; left:0; bottom:0; background:rgba(15,23,42,.78); color:#fff;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:0 6px 0 0}
.pdel{position:absolute; top:3px; right:3px; width:22px; height:22px; border:0; border-radius:50%;
  background:rgba(15,23,42,.72); color:#fff; font-size:15px; line-height:1; display:grid; place-items:center}
.pdel:hover{background:var(--fail)}
.addphoto span{
  display:inline-block; font-size:13px; font-weight:600; padding:9px 14px; border-radius:8px;
  border:1px dashed var(--accent); color:var(--accent); background:#fffbeb; cursor:pointer;
}
.addphoto span:hover{background:var(--accent-soft)}
.lightbox{position:fixed; inset:0; background:rgba(15,23,42,.94); display:grid; place-items:center; z-index:60; padding:20px}
.lightbox img{max-width:100%; max-height:100%; border-radius:6px}
.lbclose{position:absolute; top:16px; right:20px; background:none; border:0; color:#fff; font-size:34px; line-height:1}

/* ---------------- busy ---------------- */
.busy{position:fixed; inset:0; background:rgba(15,23,42,.6); display:grid; place-items:center; z-index:70}
.busybox{background:#fff; border-radius:12px; padding:26px 32px; text-align:center; min-width:260px}
.busybox p{margin:14px 0 4px; font-weight:600}
.busybox small{color:var(--muted); font-size:12px; word-break:break-all}
.spinner{width:30px; height:30px; margin:0 auto; border:3px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:600px){
  .newrow{grid-template-columns:1fr}
  main{padding:14px 12px 70px}
  .card{padding:14px}
  .toolbar button{padding:7px 10px; font-size:12.5px}
  .savestate{width:100%; min-width:0}
}

/* ================================================================== *
 * PRINT — this is what becomes the PDF
 * ================================================================== */
#printroot{display:none}

@media print{
  body>*:not(#printroot){display:none !important}
  #printroot{display:block}
  @page{size:Letter; margin:14mm 12mm 16mm}
  body{background:#fff; font-size:9.5pt; color:#000}
  a{color:#1d4ed8; text-decoration:none}
}

#printroot{font-size:9.5pt; color:#111827; font-family:var(--font-ui)}

/* cover */
.p-cover{page-break-after:always; padding-top:14mm}
.p-brand{font-size:9pt; letter-spacing:.28em; font-weight:800; color:#b45309}
.p-title{font-size:26pt; margin:6mm 0 1mm; letter-spacing:-.01em}
.p-sub{font-size:11pt; color:#6b7280; margin-bottom:8mm}
.p-verdict{
  display:inline-block; font-size:15pt; font-weight:800; letter-spacing:.06em;
  padding:2.5mm 8mm; border-radius:2mm; margin-bottom:9mm;
}
.p-verdict.r-pass{background:#d1fae5; color:#047857}
.p-verdict.r-fail{background:#fee2e2; color:#b91c1c}
.p-verdict.r-hold{background:#fef3c7; color:#b45309}
.p-facts{width:100%; border-collapse:collapse; margin-bottom:8mm}
.p-facts th{
  text-align:left; width:44mm; padding:2mm 3mm 2mm 0; vertical-align:top;
  font-size:8pt; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; font-weight:600;
}
.p-facts td{padding:2mm 0; border-bottom:.4pt solid #e5e7eb; vertical-align:top}
.p-covernote{font-size:8.5pt; color:#6b7280; border-left:2pt solid #b45309; padding-left:3mm; line-height:1.6}

/* sections */
.p-sec{margin-bottom:7mm}
.p-sec.p-break{page-break-before:always}
.p-sec>h2{
  font-size:11pt; text-transform:uppercase; letter-spacing:.07em; color:#0f172a;
  border-bottom:1.2pt solid #0f172a; padding-bottom:1.5mm; margin-bottom:3.5mm;
  page-break-after:avoid;
}
.p-grp{font-size:9.5pt; margin:4mm 0 2mm; color:#b45309; page-break-after:avoid}
.p-hint{font-size:8.5pt; color:#6b7280; margin:0 0 3mm}

.p-kv{width:100%; border-collapse:collapse; margin-bottom:3mm}
.p-kv th{text-align:left; width:46mm; padding:1.6mm 3mm 1.6mm 0; vertical-align:top;
  font-size:8pt; color:#6b7280; font-weight:600}
.p-kv td{padding:1.6mm 0; border-bottom:.4pt solid #eef2f7; vertical-align:top}
.p-kvsm th{width:34mm; font-size:7.5pt}
.p-kvsm td{font-size:8.5pt}

.p-tbl{width:100%; border-collapse:collapse; margin-bottom:3mm; table-layout:fixed}
.p-tbl thead{display:table-header-group}
.p-tbl th{
  background:#0f172a; color:#fff; text-align:left; font-size:7.5pt; font-weight:600;
  padding:1.6mm 2mm; text-transform:uppercase; letter-spacing:.03em;
}
.p-tbl td{
  border:.4pt solid #d1d5db; padding:1.6mm 2mm; vertical-align:top; font-size:8.5pt;
  word-wrap:break-word; overflow-wrap:anywhere;
}
.p-tbl tr{page-break-inside:avoid}
.p-req{color:#6b7280; font-size:7.5pt}
.p-tag{font-size:7pt; font-weight:800; background:#fee2e2; color:#b91c1c; padding:.4mm 1.6mm; border-radius:1mm}

.r-pass{color:#047857; font-weight:700}
.r-fail{color:#b91c1c; font-weight:700}
.r-hold{color:#b45309; font-weight:700}
.r-na{color:#6b7280}

.p-card{border:.4pt solid #d1d5db; border-radius:1.5mm; padding:3mm; margin-bottom:2.5mm; page-break-inside:avoid}
.p-cardgrp{margin-bottom:2mm}
.p-cardgrp h4{font-size:7.5pt; text-transform:uppercase; letter-spacing:.06em; color:#b45309; margin:0 0 1mm}
.p-cardvals{display:flex; flex-wrap:wrap; gap:1mm 5mm}
.p-cardvals span{font-size:8.5pt}
.p-cardvals i{display:block; font-style:normal; font-size:6.5pt; color:#6b7280; text-transform:uppercase}

/* issues */
.p-issue{border:.5pt solid #d1d5db; border-left:2.5pt solid #b45309; border-radius:1.5mm;
  padding:3mm 3.5mm; margin-bottom:3mm; page-break-inside:avoid}
.p-issuehead{margin-bottom:1.5mm}
.p-issuenum{font-size:8pt; font-weight:800; letter-spacing:.06em; background:#fef3c7; color:#b45309;
  padding:.8mm 2.5mm; border-radius:6mm}
.p-issuetext{margin:0 0 1.5mm; font-size:9.5pt; line-height:1.5; white-space:pre-wrap}
.p-meta{display:flex; flex-wrap:wrap; gap:1mm 6mm; margin:1.5mm 0}
.p-meta span{font-size:8.5pt; font-weight:600}
.p-meta i{display:block; font-style:normal; font-size:6.5pt; font-weight:600;
  color:#6b7280; text-transform:uppercase; letter-spacing:.05em}

/* clickable thumbnails */
.p-thumbs{display:flex; flex-wrap:wrap; gap:2mm; margin-top:2mm}
.p-thumb{display:block; width:26mm; text-decoration:none; page-break-inside:avoid}
.p-thumb img{width:26mm; height:26mm; object-fit:cover; border:.5pt solid #9ca3af; border-radius:1mm; display:block}
.p-thumb span{display:block; font-size:6.5pt; font-weight:700; color:#1d4ed8; text-align:center; padding-top:.6mm}

/* one photo per page */
.p-photopage{page-break-before:always; page-break-inside:avoid; height:100%}
.p-phhead{display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:.8pt solid #0f172a; padding-bottom:1.5mm; margin-bottom:3mm}
.p-phlabel{font-size:10pt; font-weight:800; letter-spacing:.04em}
.p-phback{font-size:8pt; font-weight:600}
.p-phframe{height:196mm; display:flex; align-items:center; justify-content:center;
  background:#f8fafc; border:.4pt solid #e5e7eb; border-radius:1.5mm; overflow:hidden}
.p-phframe img{max-width:100%; max-height:196mm; object-fit:contain}
.p-phcap{font-size:8.5pt; line-height:1.5; margin-top:2.5mm; color:#374151}

/* general photo grid */
.p-grid{display:grid; grid-template-columns:1fr 1fr; gap:4mm}
.p-grid figure{margin:0; page-break-inside:avoid}
.p-grid img{width:100%; height:62mm; object-fit:contain; background:#f8fafc; border:.4pt solid #e5e7eb; border-radius:1mm}
.p-grid figcaption{font-size:7pt; color:#6b7280; text-align:center; padding-top:.8mm; word-break:break-all}

.p-end{text-align:center; font-size:9pt; color:#6b7280; margin-top:8mm; padding-top:4mm; border-top:.4pt solid #d1d5db}