/* A compact presentation of the same town and repair workflow as the full app. */
html,body{height:100%;overflow:hidden;background:#e7eee8}
body>header,.skip,.rail,.world-title,.town-stats,.camera-controls,.event-card,.world-foot,#inspector,#drawer,#toast{display:none!important}
main{height:100%;min-height:0;display:block}.world{height:100%}
#viewport{inset:0 0 104px}canvas{touch-action:pan-y;pointer-events:none}
.building-label{display:none!important}.hub-label{display:block!important;font-size:9px;padding:5px 8px;pointer-events:none}
.incident-label{font-size:10px;padding:6px 8px;pointer-events:none}.van-label{display:none!important}
.world-bottom{top:8px;right:14px;bottom:auto;left:auto;display:block;width:auto}
.playback{padding:0;background:transparent;border:0;box-shadow:none;gap:0}
.clock,.play-buttons [data-speed],#night{display:none}
.play-buttons{border:0;padding:0}.play-buttons #pause{width:36px;height:36px;background:#ffffffd9;border:1px solid #d0ddd1;border-radius:50%;color:#244e3e}
.workflow-panel,.workflow-panel[hidden]{display:block!important;position:absolute;inset:auto 18px 10px;width:auto;max-height:none;height:94px;padding:10px 14px;border:1px solid #d2dfd2;border-radius:13px;background:#fffffff5;box-shadow:0 8px 24px #173f3510;overflow:hidden}
.workflow-heading,.workflow-ticket,.case-property,.flow-steps,.workflow-description,.approval-card>p,.human-tag,.defer,.completion-card,.auto-working,#close-workflow{display:none!important}
.workflow-panel:before{content:'AI ＋ HUMAN  /  水漏れ対応デモ';display:block;color:#5a7566;font-size:9px;letter-spacing:1.1px;margin-bottom:4px}
.workflow-panel h2{font-size:14px;line-height:1.5;letter-spacing:-.03em;margin:0;color:#234c3d}
.workflow-panel .workflow-disclaimer{position:absolute;bottom:9px;left:14px;right:10px;font-size:9px;color:#6d7d73;line-height:1.5;margin:0;padding:0;border:0}
.approval-card{display:flex;align-items:center;gap:12px;margin:9px 0 0;padding:0;background:none;border:0}
.estimate-price{font-size:18px;white-space:nowrap;margin:0}.estimate-price small{font-size:9px;display:block;margin:0}
#approve-repair,#replay-repair{width:auto;min-height:36px;margin:0;padding:9px 12px;font-size:11px;background:#244f3e;color:white;border-radius:6px;line-height:1.5}
#replay-repair{margin-top:8px}#replay-repair:disabled{opacity:.6}
.workflow-panel:not([data-stage="approval"]):not([data-stage="complete"]):after{content:'受付 → 内容整理 → 人の承認 → 修繕 → 報告';display:block;font-size:10px;color:#6b8071;margin-top:6px}
#loading,#error{z-index:10}#error h2{font-size:17px}#error p{font-size:12px;max-width:260px;line-height:1.8}
@media(max-width:380px){.workflow-panel h2{font-size:14px}.workflow-panel{left:10px;right:10px;padding:13px}.workflow-panel .workflow-disclaimer{left:13px;font-size:8px}.approval-card{gap:8px}#approve-repair{padding:8px;font-size:10px}.estimate-price{font-size:16px}}

/* Keep the approval action accessible while the town takes most of the frame. */
@media(min-width:501px){
 .approval-card{position:absolute;right:14px;top:19px;margin:0;gap:10px}
 .workflow-panel[data-stage="approval"] h2{max-width:46%;font-size:12px}
 .estimate-price{font-size:16px}
 #approve-repair{font-size:10px;padding:8px 10px}
 #replay-repair{position:absolute;right:14px;top:20px;margin:0;font-size:10px;max-width:48%}
 .workflow-panel[data-stage="complete"] h2{max-width:46%;font-size:12px}
}
@media(max-width:500px){
 #viewport{bottom:132px}
 .workflow-panel,.workflow-panel[hidden]{height:122px;padding:10px 13px}
 .workflow-panel .workflow-disclaimer{bottom:8px;left:13px;font-size:8px}
 .approval-card{margin-top:6px}
 .workflow-panel h2{font-size:13px}
 .workflow-panel:not([data-stage="approval"]):not([data-stage="complete"]):after{margin-top:9px}
}

@media(max-width:500px){
 #viewport{bottom:158px}
 .workflow-panel,.workflow-panel[hidden]{height:148px;left:10px;right:10px;padding:12px}
 .workflow-panel:before{font-size:10px;letter-spacing:.35px}
 .workflow-panel h2{font-size:14px;line-height:1.45}
 .workflow-panel .workflow-disclaimer{font-size:10px;line-height:1.4;bottom:10px;left:12px;right:12px}
 .workflow-panel:not([data-stage="approval"]):not([data-stage="complete"]):after{font-size:11px;line-height:1.6;margin-top:10px}
 .approval-card{gap:8px;margin-top:8px;justify-content:space-between}
 #approve-repair,#replay-repair{min-height:44px;font-size:11px;padding:9px 10px}
 .estimate-price{font-size:17px}.estimate-price small{font-size:10px}
 .play-buttons #pause{width:44px;height:44px}
 .hub-label{font-size:9px}.world-bottom{right:10px;top:4px}
}