/* Skimmer build guide v3 "3D" viewer (copied to guide/3d/viewer.css by tools/guide_3d.py). High contrast for a
   phone in sunlight: dark outlines, white controls with a 2 px black border, 44 px tap targets. */
.v3d{border:2px solid #1b1b1b;border-radius:14px;background:#fff;margin:10px 0 16px;overflow:hidden}
.v3d-head{display:flex;gap:8px;align-items:baseline;padding:8px 12px;background:#1b1b1b;color:#fff;font-size:15px;line-height:1.3}
.v3d-head strong{white-space:nowrap;color:#ffb066}
.v3d-step{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3d-stagewrap{position:relative}
.v3d-canvas{position:relative;height:min(78vw,400px);min-height:260px;background:#f6f5f0;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.v3d-canvas canvas{display:block;width:100%;height:100%}
.v3d-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:18px;
  color:#444;font-size:16px;pointer-events:none}
.v3d-msg[hidden]{display:none}
.v3d[data-state="nowebgl"] .v3d-canvas,.v3d[data-state="error"] .v3d-canvas{height:auto;min-height:0}
.v3d[data-state="nowebgl"] .v3d-msg,.v3d[data-state="error"] .v3d-msg{position:static;background:#fff4d6;border-bottom:1px solid #e0a400}
.v3d[data-state="nowebgl"] .v3d-bar,.v3d[data-state="nowebgl"] .v3d-hint,.v3d[data-state="error"] .v3d-bar,
.v3d[data-state="error"] .v3d-hint{display:none}
.v3d-tip{position:absolute;left:8px;right:8px;bottom:8px;max-height:62%;overflow:auto;background:#fff;color:#111;
  border:2px solid #1b1b1b;border-radius:12px;padding:8px 12px 6px;font-size:15px;line-height:1.4;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.v3d-tip[hidden]{display:none}
.v3d .v3d-tip p{margin:4px 0}
.tt-h{display:flex;gap:8px;align-items:flex-start}
.tt-name{flex:1;font-size:17px;padding-top:6px}
.tt-x{min-width:44px;min-height:44px;margin:-4px -8px 0 0;border:0;background:none;font-size:20px;color:#333}
.tt-k{color:#a14b00;font-weight:600;font-size:14px}
.tt-bom{font-weight:600}
.tt-note{background:#eef5ff;border-left:3px solid #6a9be0;padding:3px 8px;font-size:14px}
.tt-card{display:inline-block;min-height:44px;line-height:44px;font-weight:600;color:#1d5fbf}
.v3d-bar{display:flex;gap:6px;padding:8px 8px 0}
.vbtn{min-width:44px;min-height:44px;padding:0 10px;border:2px solid #1b1b1b;border-radius:10px;background:#fff;color:#111;
  font:inherit;font-size:15px;font-weight:700;line-height:1}
.vbtn:active{background:#eee}
.vbtn[aria-pressed="true"]{background:#1b1b1b;color:#fff}
.v3d-play{flex:1;background:#e86a00;border-color:#e86a00;color:#fff}
.v3d-sel{flex:1;min-width:0;min-height:44px;padding:0 8px;border:2px solid #1b1b1b;border-radius:10px;background:#fff;color:#111;
  font:inherit;font-size:15px}
.v3d .v3d-parts{margin:8px 10px 2px;font-size:15px;line-height:1.5}
.v3d-lbl{font-weight:700}
.v3d-note{color:#444}
.v3d-chip{display:inline-block;min-height:36px;margin:2px 0;padding:3px 10px;border:2px solid #1b1b1b;border-radius:18px;background:#fff7ec;
  color:#111;font:inherit;font-size:14px;font-weight:600}
.v3d-goto{background:#fff;min-width:44px;min-height:44px}
.v3d .v3d-hint{margin:2px 10px 10px;font-size:13px;color:#666}
.v3d-away{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;padding:8px 10px;border:2px dashed #999;border-radius:12px;
  font-size:15px;color:#333}
.v3d-away[hidden]{display:none}
.s3d{min-height:44px;padding:6px 14px;margin:4px 0 6px;font-size:15px;border-color:#1b1b1b;color:#111}
section.locked .step:has(.v3d){opacity:1}  /* the moved viewer is not dimmed in a locked stage */