/* A cutaway miniature: the workshop is the focus, the service record stays alongside. */
.workshop-dialog { width:min(1180px,calc(100vw - 32px)); max-height:94svh; overflow:auto; background:#fffaf0; }
.workshop-header { padding:24px 76px 18px 28px; border-bottom:1px solid var(--line); }
.workshop-header h2 { font-size:32px; line-height:1.4; color:var(--navy); margin:6px 0; }
.workshop-header .eyebrow { font-size:16px; letter-spacing:.06em; color:#80632e; }
.workshop-header p { font-size:18px; line-height:1.7; color:#425b61; margin:6px 0 0; }
.workshop-dialog > .dialog-close { position:sticky; float:right; top:12px; margin:12px 12px -60px 0; z-index:5; }
.workshop-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); }
.workshop-main { min-width:0; background:#d4e7e0; }
.workshop-view { height:clamp(340px,52svh,540px); position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#e7f1dc,#accdc4); }
#workshop-canvas,#workshop-poster { display:block; width:100%; height:100%; }
#workshop-canvas { touch-action:pan-y; cursor:grab; }
#workshop-canvas:active { cursor:grabbing; }
#workshop-poster { object-fit:cover; }
.workshop-hotspots { position:absolute; inset:0; pointer-events:none; }
.workshop-hotspots button { position:absolute; transform:translate(-50%,-100%); border:2px solid #fff8df; border-radius:24px; background:#143e69f2; color:#fffaf0; padding:8px 12px; min-height:44px; white-space:nowrap; font-size:16px; pointer-events:auto; box-shadow:0 4px 12px #1b4a4833; }
.workshop-hotspots button[aria-pressed=true] { background:#f3bc42; color:#173e58; }
.workshop-hint { position:absolute; left:16px; bottom:42px; padding:4px 10px; border-radius:20px; font-size:16px; color:#234f57; background:#fffaf0df; pointer-events:none; max-width:calc(100% - 32px); }
.workshop-disclaimer { position:absolute; bottom:12px; left:16px; color:#345c59; font-size:16px; pointer-events:none; }
.workshop-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:16px; border-top:1px solid #afc8bc; }
.workshop-controls button { background:#fffaf0; border:1px solid #9fb6a8; color:var(--navy); border-radius:22px; padding:6px 13px; font-size:16px; min-height:44px; }
.workshop-controls button[aria-pressed=true] { background:#143e69; color:#fffaf0; }
.workshop-story { padding:24px; border-left:1px solid var(--line); }
.workshop-kicker { color:#81612a; font-size:16px; letter-spacing:.07em; }
.workshop-topics { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 18px; }
.workshop-topics button { font-size:16px; min-height:44px; padding:6px 10px; color:#365c65; background:transparent; border-bottom:3px solid #dce3d6; }
.workshop-topics button[aria-pressed=true] { border-color:#d99f2c; color:#143e69; font-weight:700; }
.workshop-detail h3 { font-size:24px; line-height:1.5; color:var(--navy); margin:0 0 10px; }
.workshop-detail p { font-size:18px; line-height:1.85; color:#3c505c; margin:0 0 20px; }
.workshop-evidence { border-top:1px solid var(--line); padding-top:16px; font-size:16px; line-height:1.85; color:#3f5c61; }
.workshop-evidence strong { font-weight:700; color:var(--navy); }
.workshop-evidence p { margin:8px 0; }
.workshop-evidence a { display:inline-block; min-height:44px; padding:8px 0; text-underline-offset:4px; }
.workshop-note { font-size:16px; line-height:1.8; color:#5d6b5d; margin:12px 0 20px; }
.village-card #enter-workshop { margin-bottom:10px; }
.village-card #enter-workshop:not([hidden]) + #visit-village { background:transparent; color:var(--navy); border:1px solid #8eaba6; }
@media(max-width:900px) {
  .workshop-layout { grid-template-columns:1fr; }
  .workshop-story { border-left:0; border-top:1px solid var(--line); }
  .workshop-view { height:clamp(300px,48svh,460px); }
}
@media(max-width:420px) {
  .workshop-dialog { width:calc(100vw - 16px); max-width:none; }
  .workshop-header { padding:20px 62px 16px 18px; }
  .workshop-header h2 { font-size:28px; }
  .workshop-story { padding:20px 18px; }
  .workshop-hotspots button { font-size:16px; padding:6px 9px; }
  .workshop-controls { gap:6px; padding:12px; }
  .workshop-controls button { padding:6px 12px; }
  .workshop-hint { font-size:16px; }
}