:root {
  --bg: #eef1f4;
  --card: #ffffff;
  --ink: #111820;
  --muted: #5b6773;
  --line: #d3d9df;
  --steel: #1f2a36;
  --accent: #f58220;      /* hardband orange */
  --accent-dark: #c55f0a;
  --danger: #c62828;
  --ok: #2e7d32;
  --tap: 56px;            /* glove-friendly touch target */
  --radius: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font: 18px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh;
  padding-bottom: calc(96px + var(--safe-b));
}
[hidden] { display: none !important; }
/* file inputs stay in the layout (not display:none) so <label for> reliably opens them on iOS */
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }

/* ---------- top bar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  background: var(--steel); color: #fff;
  padding: calc(6px + var(--safe-t)) 6px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#title { flex: 1; font-size: 20px; margin: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  min-width: var(--tap); height: var(--tap); border: 0; border-radius: 12px;
  background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.icon-btn:active { background: rgba(255,255,255,.15); }
#backBtn { font-size: 40px; padding-bottom: 6px; }
/* team sync status pill (hidden unless config.js is filled in) */
.sync-badge {
  flex: none; max-width: 42vw; min-height: 36px; padding: 0 10px; border-radius: 18px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.14); color: #fff;
}
.sync-badge[data-state="synced"] { background: #2e7d32; }
.sync-badge[data-state="pending"], .sync-badge[data-state="syncing"] { background: var(--accent); color: #111; }
.sync-badge[data-state="offline"] { background: #5b6773; }
.sync-badge[data-state="error"] { background: var(--danger); }
.sync-badge[data-state="signedout"] { background: transparent; border: 2px solid rgba(255,255,255,.5); }
.team-card input[type=email], .team-card input[type=password] {
  width: 100%; min-height: var(--tap); font: inherit; color: var(--ink); padding: 10px 12px;
  border: 2px solid var(--line); border-radius: 12px; background: #fff; -webkit-appearance: none; appearance: none;
}

/* ---------- bottom bar ---------- */
#bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; padding: 10px 12px calc(10px + var(--safe-b));
  background: rgba(238,241,244,.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#bottombar { flex-wrap: wrap; }
#bottombar .insp-btn { flex: 1 0 100%; order: -1; }
/* active inspection session strip (under the top bar) */
.insp-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #dfe7ee; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--steel); }
.insp-bar .insp-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-bar .insp-done { min-height: 44px; padding: 0 16px; flex: none; }
/* "A new version of the app is ready" banner: the Inspecting strip's look, kept in view under the header */
.upd-bar { position: sticky; z-index: 19; flex-wrap: wrap; }
.upd-bar .insp-text { flex-basis: 100%; white-space: normal; font-weight: 700; }
.upd-bar #updBtn { margin-left: auto; }
.insp-msg { color: var(--danger); min-height: 1.2em; margin-top: 4px; }
/* tap-to-pick suggestions under a text field (instead of a datalist): same look as the condition chips */
.pick-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pick-list button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 16px; cursor: pointer; }
.pick-list button:active { background: #ffe9d6; }
.insp-msg:empty { min-height: 0; margin-top: 0; } /* only takes room when there is a message (Start inspection has 4 job fields) */
/* ---------- operator ---------- */
.op-chip { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 52px; margin: 10px 0 0; padding: 6px 14px;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.op-chip b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-chip .op-chip-l { color: var(--muted); font-size: 15px; }
.op-chip .op-chip-c { color: var(--muted); }
.op-chip.unset { border-color: var(--accent); background: #fff4ea; }
.op-chip.unset b { color: var(--accent-dark); }
.op-field select { font-weight: 700; }
.op-add { margin-top: 10px; padding: 12px; border: 2px dashed var(--accent); border-radius: 12px; background: #fffaf5; }
.op-add-row { display: grid; grid-template-columns: 1fr 7.5em; gap: 10px; }
.op-add-row > div { min-width: 0; }
.op-add-row label { display: block; font-weight: 700; font-size: 15px; margin: 0 2px 6px; color: var(--steel); }
.op-add-row input { width: 100%; min-width: 0; }
.op-add-num input { font-size: 22px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.op-add-actions { margin-top: 10px; }
.op-add-actions .btn { flex: 1; }
.op-msg { color: var(--danger); margin-top: 6px; }
.op-msg:empty { display: none; }
.op-msg .op-use { margin-top: 8px; }
.op-link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 12px; border: 2px solid var(--line); border-radius: 20px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-align: left; }
.op-link:active { background: #ffe9d6; }
.op-link.none { color: var(--muted); font-weight: 600; border-style: dashed; }
.insp-op { font-weight: 600; }
.pre-head-op { white-space: nowrap; }
.op-clear { min-height: 40px; padding: 0 10px; margin-left: 6px; font-size: 15px; }
#bottombar #libBtn { display: none; } /* hbp-v32: Library lives on the Tools page; Take Photo takes the full width */
#fSerial { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
#fSerial::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px; border-radius: var(--radius);
  border: 2px solid transparent; font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: none; user-select: none; -webkit-user-select: none; text-align: center;
}
.btn.big { min-height: 64px; font-size: 20px; }
.btn.primary { background: var(--accent); color: #111; }
.btn.primary:active { background: var(--accent-dark); }
.btn.secondary { background: var(--steel); color: #fff; }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn.danger.solid { background: var(--danger); color: #fff; }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: .45; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.stack > * + * { margin-top: 10px; }

main { padding: 12px; max-width: 760px; margin: 0 auto; }
.card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card + .card { margin-top: 12px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
h2 { font-size: 19px; margin: 18px 4px 8px; display: flex; align-items: baseline; gap: 8px; }
h2 .count { color: var(--muted); font-weight: 500; font-size: 16px; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty .big-emoji { font-size: 56px; }

/* ---------- search ---------- */
.searchbar { display: flex; gap: 8px; }
.searchbar input { flex: 1; }
input[type=search], input[type=text], input[type=date], select, textarea {
  width: 100%; min-height: var(--tap); font: inherit; color: var(--ink);
  padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 96px; resize: vertical; }
.filters { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filters > * { min-width: 0; }
.filters input, .filters select { min-width: 0; max-width: 100%; }
.filters label { font-size: 14px; color: var(--muted); display: block; }
.filters .full { grid-column: 1 / -1; }
.chip-count { display: inline-block; background: var(--accent); color: #111; border-radius: 10px; padding: 0 7px; font-size: 14px; margin-left: 4px; }

.banner { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fff4e5; border: 1px solid #f5c287; font-size: 16px; display: flex; gap: 10px; align-items: center; }
.banner a { color: var(--accent-dark); font-weight: 700; }

/* ---------- folders ---------- */
.folder {
  display: flex; align-items: center; gap: 12px; min-height: 76px;
  background: var(--card); border-radius: var(--radius); padding: 8px 12px 8px 8px;
  text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.folder + .folder { margin-top: 8px; }
.folder img, .folder .ph { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: #cfd6dd; flex: none; }
.folder .ph { display: flex; align-items: center; justify-content: center; font-size: 28px; }
.folder .meta { flex: 1; min-width: 0; }
.folder .meta b { display: block; font-size: 19px; }
.folder .meta small { display: block; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder .chev { font-size: 30px; color: var(--muted); }
.folder:active { background: #f7f7f7; }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #cfd6dd; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* BEFORE / AFTER stage badge (tiles, detail, saved screen) */
.stage-badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .5px; line-height: 1.5; vertical-align: 2px; }
.stage-badge.pre { background: var(--steel); color: #fff; }
.stage-badge.repair { background: #c55f0a; color: #fff; }
.stage-badge.plasma { background: #6a4c93; color: #fff; }
.stage-badge.inlay { background: #0077b6; color: #fff; }
.stage-badge.preheat { background: #b08900; color: #fff; }
.stage-badge.post { background: var(--accent); color: #111; }
.tile .stage-badge.on-tile { position: absolute; top: 4px; left: 4px; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.stage-badge.big { font-size: 15px; padding: 2px 10px; }
/* Before / After comparison: Before stacked over After at full width on every screen (hbp-v48: side by side made
   portrait photos skinny); on wide screens the column is capped at 700px and centered */
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 700px; margin: 0 auto; }
.cmp-panel { background: var(--card); border-radius: var(--radius); padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); min-width: 0; }
.cmp-label { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; margin: 2px 2px 8px; color: var(--steel); }
.cmp-img { width: 100%; height: auto; max-height: 75vh; object-fit: contain; background: #111; border-radius: 10px; display: block; cursor: zoom-in; }
.cmp-open { margin-top: 8px; min-height: 48px; }
.cmp-swap { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cmp-swap .btn { min-height: 44px; padding: 0 12px; font-size: 15px; flex: none; }
.cmp-kv { margin-top: 10px; }
.cmp-notes { white-space: pre-wrap; }
.pair-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 30px; margin-left: 6px; padding: 0 8px; border-radius: 8px; background: var(--steel); color: #fff; text-decoration: none; font-size: 16px; font-weight: 800; vertical-align: middle; }
.tile .cap2 { display: block; font-weight: 400; opacity: .9; }
.sn-head { margin: 14px 4px 6px; font-weight: 700; font-size: 16px; color: var(--steel); }
.result-count { margin: 12px 4px 8px; color: var(--muted); font-size: 15px; }

/* ---------- forms ---------- */
.field { margin-top: 14px; }
.field > label, .field > .lbl { display: block; font-weight: 700; font-size: 15px; margin: 0 2px 6px; color: var(--steel); }
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; min-height: var(--tap); border-radius: 12px; border: 2px solid var(--line);
  background: #fff; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; padding: 0 6px;
}
.seg button.on { background: var(--steel); border-color: var(--steel); color: #fff; }
.seg.band button.on { background: var(--accent); border-color: var(--accent); color: #111; }
/* stage toggle (Before / After; repair joints add Repair / Plasma cut / Inlay) */
.seg.stage { flex-wrap: wrap; }
.seg.stage button { min-height: 64px; line-height: 1.2; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.seg.stage button small { font-size: 14px; font-weight: 600; opacity: .85; }
.seg.stage.multi-stages button, .seg.stage.repair-stages button { flex: 1 1 calc(33.33% - 8px); min-height: 52px; font-size: 14px; }
/* Before-hardband (inspection) layout */
.pre-head { margin-top: 12px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--steel); }
.pre-head-rig { font-weight: 700; }
.notes-peek { margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-box { margin-top: 14px; border: 2px solid var(--line); border-radius: 12px; padding: 0 12px; }
.more-box > summary { min-height: var(--tap); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 16px; color: var(--steel); cursor: pointer; padding: 8px 0; }
.more-box > summary::-webkit-details-marker { display: none; }
.more-box > summary::before { content: '▸'; font-size: 18px; }
.more-box[open] > summary::before { content: '▾'; }
.more-box > summary .small { font-weight: 400; font-size: 13px; }
.more-box[open] { padding-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 16px; cursor: pointer; }
.chips button:active { background: #ffe9d6; }
.chips button.on { background: #ffe9d6; border-color: var(--accent); }
.preview { width: 100%; max-width: 700px; margin: 0 auto; height: auto; max-height: 75vh; object-fit: contain; background: #111; border-radius: var(--radius); display: block; cursor: zoom-in; }
/* hbp-v48: After with Save at the top: preview as big as fits while Save stays on screen (tap it for full screen) */
.preview.preview-fit { max-height: max(38vh, calc(100vh - 370px)); max-height: max(38vh, calc(100dvh - 370px)); }
.qinfo { text-align: center; margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.form-actions { margin-top: 18px; }
.band-diagram { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- detail ---------- */
.detail-img { width: 100%; max-width: 700px; margin: 0 auto; height: auto; max-height: 75vh; object-fit: contain; border-radius: var(--radius); background: #111; display: block; cursor: zoom-in; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 15px; }
dl.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.pager { display: flex; gap: 10px; margin-top: 10px; }
.pager .btn { flex: 1; }

/* ---------- manage ---------- */
.tabs { display: flex; gap: 6px; background: #dde3e8; padding: 4px; border-radius: 14px; }
.tabs button { flex: 1; min-height: 50px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-weight: 700; font-size: 16px; color: var(--steel); cursor: pointer; }
.tabs button.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.list-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 68px; text-align: left;
  background: var(--card); border: 0; border-radius: var(--radius); padding: 10px 14px; font: inherit; color: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.list-item + .list-item { margin-top: 8px; }
.list-item .meta { flex: 1; min-width: 0; }
.list-item .meta b { display: block; }
.list-item .meta small { display: block; color: var(--muted); font-size: 14px; }
.list-item .chev { font-size: 26px; color: var(--muted); }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(10,15,20,.55); display: flex; align-items: flex-end; justify-content: center; }
.modal {
  width: 100%; max-width: 560px; background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(18px + var(--safe-b)); max-height: 92vh; overflow: auto;
  animation: up .18s ease-out;
}
.modal h3 { margin: 0 0 6px; font-size: 21px; }
.modal p { margin: 6px 0; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(100px + var(--safe-b)); z-index: 60;
  background: #111820; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 16px; max-width: 90vw;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.progress { height: 10px; background: #d3d9df; border-radius: 5px; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .15s; }
.saved-hero { text-align: center; padding: 18px 8px 6px; }
.saved-hero .big-emoji { font-size: 60px; }

/* ---------- reject log (rejected wires per operator) ---------- */
.reject-btn { margin-top: 10px; min-height: 60px; background: #fff; color: var(--danger); border-color: var(--danger); font-weight: 800; }
.reject-btn:active { background: #fdecea; }
.rej-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; margin: 2px 4px 0; color: var(--muted); font-size: 15px; text-decoration: none; }
.rej-sum b { color: var(--danger); }
.rej-sum .rej-sum-r { color: var(--steel); font-weight: 700; white-space: nowrap; }
.rej-link { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.rej-link .chev { margin-left: auto; font-size: 22px; color: var(--muted); }
.rej-link:active { background: #fdecea; }
.result-count + .rej-link, .result-count + .rej-none { margin: 0 0 10px; }
.rej-none { margin: 0 4px 10px; }
.rej-n, .rej-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 0 8px; border-radius: 15px;
  background: var(--danger); color: #fff; font-weight: 800; }
.rej-n { min-height: 26px; font-size: 15px; }
.rej-count { min-height: 36px; font-size: 20px; min-width: 40px; }
.rej-title { font-size: 20px; font-weight: 800; color: var(--steel); }
.rej-big { font-size: 28px; font-weight: 800; color: var(--danger); margin: 2px 0 8px; }
.rej-item { cursor: default; }
.rej-item .rej-when { font-size: 17px; }
.rej-item .rej-del { flex: none; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--danger); }
#rejList, #rejItems { margin-top: 12px; }
#toast.has-action { display: flex; align-items: center; gap: 12px; }
.toast-btn { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: #111; font: inherit; font-weight: 800; cursor: pointer; }
.done-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #1e6b34; background: #e3f4e8; border-radius: 10px; padding: 1px 8px; }
.folder-head { display: flex; align-items: flex-start; gap: 8px; }
.folder-head-l { flex: 1; min-width: 0; }
.btn.ghost.complete-mini { flex: 0 0 auto; min-height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 16px; }
.tile .star-badge { position: absolute; top: 4px; right: 4px; font-size: 15px; line-height: 1; padding: 3px 4px; border-radius: 8px; background: rgba(0,0,0,.45); }
.btn.star-on { background: #fff4cc; color: var(--ink); border-color: #e0b400; }
#postTop { margin-bottom: 12px; }
#postTop #postHead { margin-bottom: 10px; }
.pre-head.has-star { position: relative; padding-right: 64px; min-height: 52px; line-height: 52px; }
.add-star { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid #e0b400; border-radius: 26px; background: #fff8dc; color: #f5b301; font-size: 34px; line-height: 1; cursor: pointer; }
.add-star.on { background: #3c4043; border-color: #3c4043; color: #c4c7c5; }
/* hbp-v41: photo detail info ~1.25x for one-hand reading */
#detailFields dt { font-size: 19px; align-self: center; }
#detailFields dd { font-size: 22px; }
#detailFields .op-link { font-size: 22px; }
#detailFields .stage-badge { font-size: 16px; }
/* hbp-v44: tong space minimums next to the pipe spec */
.tong-min { font-size: 15px; font-weight: 700; color: var(--accent-dark, #b35300); margin-top: 4px; }
#detailFields .tong-min { font-size: 17px; }

/* hbp-v45 tong space measurement */
#fldTong.tong-box { border:2px solid var(--accent-dark, #b35300); border-radius:10px; padding:8px 10px }
#fldTong.tong-box label { font-size:17px; font-weight:800 }
#fTongIn { font-size:22px; font-weight:700; max-width:10em }
#fTongIn.tong-bad { border-color:#c62828; background:#fdecea } #fTongIn.tong-near { border-color:#e0a000; background:#fff6db } #fTongIn.tong-ok { border-color:#2e7d32; background:#eaf6ea }
.tong-status { font-weight:800; font-size:16px; margin-top:4px }
.tong-status.tong-bad, .tong-bad .tong-flag { color:#c62828 } .tong-status.tong-near, .tong-near .tong-flag { color:#a86b00 } .tong-status.tong-ok { color:#2e7d32 }
.tong-hint { font-weight:700; color: var(--accent-dark, #b35300); margin:6px 0 }
.tong-card { border-left:6px solid var(--accent-dark, #b35300) }
.tong-title { margin:0 0 4px; font-size:18px }
.tong-sub { font-size:13px; font-weight:700; color:#666; margin-top:6px }
.tong-latest { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:6px 0 }
.tong-big { font-size:34px; font-weight:900 } .tong-latest.tong-bad .tong-big { color:#c62828 } .tong-latest.tong-near .tong-big { color:#a86b00 } .tong-latest.tong-ok .tong-big { color:#2e7d32 }
.tong-trend { font-size:16px; font-weight:700 } .tong-flag { font-weight:800 }
.tong-list { list-style:none; margin:4px 0 0; padding:0 } .tong-row { padding:6px 0; border-top:1px solid #eee; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline }
.tong-row.this { background:#fff8ef } .tong-val { font-size:18px } .tong-meta { color:#555; font-size:14px }
.tong-row.tong-bad { background:#fdecea } .tong-row.tong-near { background:#fff6db }
.tile .tong-badge.on-tile { position:absolute; top:4px; right:30px; font-size:15px; line-height:1; padding:3px 4px; border-radius:8px; background:rgba(0,0,0,.45) }
.tong-title .tong-badge { font-size:20px }

/* hbp-v48 full-screen photo viewer: black, photo fit to the screen, pinch / double-tap zoom, big close button */
body.viewer-on { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; background: #000; touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.viewer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; -webkit-user-drag: none; }
.viewer-close { position: absolute; top: calc(10px + var(--safe-t)); right: 10px; z-index: 2; width: 64px; height: 64px; border-radius: 32px;
  border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.6); color: #fff; font-size: 34px; font-weight: 700; line-height: 1; cursor: pointer; }
.viewer-close:active { background: rgba(255,255,255,.25); }
.viewer-hint { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); margin: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 15px; pointer-events: none; }
.viewer[data-zoomed="1"] .viewer-hint { display: none; }