/* ── Noritz unified troubleshooting walkthrough ─ 1e field wrapper ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #F4F4F4;
  font-family: 'Roboto', system-ui, sans-serif;
  color: #3D3D3D;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── TOP BAR ── */
.topbar { background: #FFFFFF; border-bottom: 1px solid #E5E5E5; position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: 820px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar img { height: 28px; width: auto; display: block; }
.toplink { font-family: 'Titillium Web','Arial Narrow',sans-serif; font-weight: 700; font-size: 14px; color: #D2332A; text-decoration: none; white-space: nowrap; }
.toplink:hover { color: #A81E26; }

/* Compact code readout injected by walkthrough.js */
.topbar-code { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.topbar-code-num { font-family: 'Titillium Web','Arial Narrow',sans-serif; font-weight: 700; font-size: 16px; color: #D2332A; white-space: nowrap; }
.topbar-code-sub { font-family: 'Roboto',system-ui,sans-serif; font-size: 11.5px; color: #888888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── DECISION-PATH TRAIL (injected) ── */
.trail { background: #FFFFFF; border-bottom: 1px solid #E5E5E5; }
.trail-inner { max-width: 820px; margin: 0 auto; padding: 7px 16px; display: flex; align-items: center; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trail-label { flex: none; font-family: 'Roboto',system-ui,sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #888888; margin-right: 2px; }
.trail-chip { flex: none; font-family: 'Titillium Web','Arial Narrow',sans-serif; font-weight: 700; font-size: 12px; color: #464646; background: #F4F4F4; border: 1px solid #E5E5E5; border-radius: 12px; padding: 4px 11px; cursor: pointer; white-space: nowrap; transition: border-color 180ms ease, color 180ms ease; }
.trail-chip:hover { border-color: #D2332A; color: #D2332A; }
.trail-chip.current { color: #FFFFFF; background: #231F20; border-color: #231F20; cursor: default; }
.trail-sep { flex: none; color: #C7C7C7; font-size: 11px; line-height: 1; }

/* ── PAGE HEAD (hidden once JS compacts it into the topbar) ── */
.wrap { width: 100%; max-width: 820px; margin: 0 auto; padding: 16px 12px 200px; flex: 1; }
.eyebrow { display: inline-block; font-family: 'Titillium Web','Arial Narrow',sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #D2332A; margin-bottom: 8px; }
.head h1 { font-family: 'Titillium Web','Arial Narrow',sans-serif; font-weight: 700; line-height: 1.2; color: #231F20; font-size: 24px; margin: 0 0 4px; }
.head .subtitle { font-size: 15px; line-height: 1.45; color: #686868; }
.head { margin-bottom: 16px; }
body.wt-compact .head { display: none; }

/* ── STEP CARD ── */
.steps > section { display: none; }
.steps > section.active { display: block; animation: stepin 240ms cubic-bezier(0.22,1,0.36,1); }
@keyframes stepin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .steps > section.active { animation: none; } }

.card { background: #FFFFFF; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); padding: 10px; }
.shot { position: relative; margin: 0 auto; }
.shot img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.hot { position: absolute; display: block; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: rgba(210,51,42,0.18); }
.hot:hover { box-shadow: inset 0 0 0 3px rgba(210,51,42,0.45); }

/* "Tap to zoom" hint (injected) */
.shot-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; pointer-events: none; display: inline-flex; align-items: center; gap: 5px; background: rgba(35,31,32,0.78); color: #FFFFFF; font-family: 'Roboto',system-ui,sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; }

/* GQ60 adaptive decks: smartphone artwork on narrow screens, PC on wide */
.deck-pc { display: none; }
.deck-sp { display: block; }
.deck-sp .shot { max-width: 460px; }
@media (min-width: 768px) {
  .deck-pc { display: block; }
  .deck-sp { display: none; }
  .deck-pc .shot { max-width: 640px; }
}
/* GQ59 single deck */
.deck-one .shot { max-width: 680px; }

/* ── CHOICE BUTTONS (in flow pre-JS; moved into the action bar by JS) ── */
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Titillium Web','Arial Narrow',sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: 0.005em; padding: 15px 24px; min-width: 120px; min-height: 44px; border-radius: 17px;
  border: none; cursor: pointer; text-decoration: none; line-height: 1.25;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-normal { background: #231F20; color: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
.btn-normal:hover { background: #464646; }
.btn-abnormal, .btn-next { background: #D2332A; color: #FFFFFF; box-shadow: 0 4px 12px rgba(210,51,42,0.28); }
.btn-abnormal:hover, .btn-next:hover { background: #A81E26; }
.btn-outline { background: #FFFFFF; color: #231F20; border: 2px solid #ED1C24; padding: 13px 22px; }
.btn-outline:hover { background: #ED1C24; color: #FFFFFF; }

/* ── STICKY ACTION BAR (injected) ── */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #FFFFFF; border-top: 1px solid #E5E5E5; box-shadow: 0 -4px 16px rgba(0,0,0,0.06); }
.actionbar-inner { max-width: 820px; margin: 0 auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.actionbar .choices { margin: 0; flex-wrap: nowrap; }
.actionbar .choices .btn { flex: 1 1 0; min-width: 0; padding: 15px 10px; }
.actionbar-util { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* ── CONTROLS (legacy in-flow controls; replaced by the action bar) ── */
.controls { display: none; }
.ctl {
  font-family: 'Titillium Web','Arial Narrow',sans-serif; font-size: 14px; font-weight: 700;
  color: #464646; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 17px;
  padding: 8px 18px; min-height: 36px; cursor: pointer; text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease;
}
.ctl:hover:not(:disabled) { border-color: #D2332A; color: #D2332A; }
.ctl:disabled { opacity: 0.4; cursor: default; }
.chip {
  display: inline-flex; align-items: center; font-family: 'Roboto',system-ui,sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 4px; background: #FDE6E7; color: #A81E26; white-space: nowrap;
}

/* ── ZOOM OVERLAY (injected) ── */
.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(15,14,14,0.92); display: none; }
.zoom.open { display: block; }
.zoom-pan { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.zoom-pan img { display: block; width: 170%; max-width: none; height: auto; margin: 48px auto 24px; }
@media (min-width: 768px) { .zoom-pan img { width: 100%; max-width: 900px; } }
.zoom-close {
  position: absolute; top: 12px; right: 12px; z-index: 51; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: #FFFFFF; color: #231F20;
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  font-family: 'Roboto',system-ui,sans-serif;
}

/* ── FOOTER ── */
.foot { text-align: center; padding: 0 16px 22px; font-size: 12.5px; color: #9A9A9A; }
.foot a { color: #9A9A9A; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .topbar img { height: 24px; }
  .toplink { font-size: 13px; }
  .topbar-code-num { font-size: 15px; }
  .topbar-code-sub { display: none; }
  .wrap { padding: 12px 10px 200px; }
  .card { padding: 8px; }
}