/* A single viewport scene: the hardware and its connected cable scale together. */
body[data-view=outside]{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100dvh;overflow:hidden}
body[data-view=outside] .pb-exterior{height:100%;min-height:0}
body[data-view=outside] .pb-footer{width:100%;padding:8px 20px;line-height:1.3;font-size:8px}
body[data-view=inside]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;overflow:hidden}
body[data-view=inside] .pb-header{position:relative;padding:10px 20px;min-width:0;gap:10px;background:#061015e8}
body[data-view=inside] .pb-header-actions{gap:6px}
body[data-view=inside] .pb-header-actions button,body[data-view=inside] .pb-header-actions a{min-height:34px;padding:8px;font-size:9px}
body[data-view=inside] .pb-footer{width:100%;padding:8px 20px;line-height:1.3;font-size:8px}
body[data-view=inside] .pb-interior{display:block;height:100%;min-height:0;max-height:none;padding:0;overflow:hidden}
body[data-view=inside] .pb-phone-side{position:absolute;top:12px;left:56%;width:430px;margin:0;transform:translateX(-50%) scale(var(--phone-scale,.7));transform-origin:top center}
.pb-interior .pb-device{padding:16px 18px}
.pb-interior .pb-device-top{padding:0 4px 10px;font-size:11px}
.pb-interior .pb-device-face{grid-template-columns:132px minmax(0,1fr);gap:12px;padding-top:12px}
.pb-interior .pb-photo-handset{min-height:365px}
.pb-interior .pb-receiver-photo{height:365px;left:calc(50% - 31px)}
.pb-interior .pb-speaker{height:15px;margin-bottom:9px}
.pb-interior .pb-lcd{padding:8px}
.pb-interior .pb-lcd input{font-size:30px;padding-top:6px}
.pb-interior .pb-keypad{margin-top:10px;padding:8px 8px 11px;gap:7px}
.pb-interior .pb-keypad button{height:44px}
.pb-interior .pb-keypad strong{font-size:23px}
.pb-interior .pb-dial{min-height:36px;margin-top:10px;padding:8px 10px}
.pb-interior .pb-extension-note{font-size:7px;margin:8px 0 0}
.pb-interior .pb-call-actions{margin-top:10px}
.pb-interior .pb-call-actions button{min-height:42px;padding:8px;font-size:11px}
.pb-interior .pb-free-dial{width:115px}
.pb-interior .pb-quick-numbers{margin-top:6px;padding-top:6px}
.pb-interior .pb-device-foot{padding-top:8px}
.pb-interior .pb-under-phone{margin-top:5px;padding:0 6px}
.pb-interior .pb-under-phone button{min-height:30px;padding:6px 0}
.pb-interior .pb-save{margin:3px 0;font-size:8px}
.pb-interior .pb-audio-status:empty{display:none}
.pb-receiver-rest,.pb-receiver-lifted{clip-path:polygon(0 0,74% 0,74% 68.6%,0 68.6%);transform-origin:47.8% 68.6%;transition:opacity .28s ease,transform .36s ease}
.pb-receiver-cable{clip-path:polygon(0 68.6%,74% 68.6%,74% 54%,100% 54%,100% 100%,0 100%)}
.pb-receiver-rest{opacity:1}.pb-receiver-lifted{opacity:0}
.pb-offhook .pb-receiver-rest{opacity:0}.pb-offhook .pb-receiver-lifted{opacity:1;transform:translateX(-50%) rotate(-8deg)}
.pb-handset-hint{position:absolute;left:0;right:0;bottom:0;padding:6px 3px;border:1px solid #dab784;color:#ffe2b6;background:#0a171bea;font:bold 8px/1.2 var(--mono);box-shadow:0 0 12px #d6a25d22;pointer-events:none}
.pb-offhook .pb-handset-hint{visibility:hidden}
.pb-photo-handset:disabled .pb-handset-hint{visibility:hidden}
.pb-interior .pb-call-actions .pb-receiver{font-size:13px;color:#fff0c9;border-color:#d3b68a}
.pb-interior .pb-dial:not(:disabled){background:linear-gradient(#627945,#355329);border-color:#e7d29b;color:#fff2ca}
@media(prefers-reduced-motion:reduce){.pb-receiver-rest,.pb-receiver-lifted{transition:none}}
body[data-view=inside] .pb-scene{position:absolute;inset:0;display:block;width:auto;margin:0;min-height:0;padding:0}
body[data-view=inside] .pb-scene-top{position:absolute;top:18px;left:3%;width:29%;padding:0}
body[data-view=inside] .pb-scene h1{font-size:24px}
body[data-view=inside] .pb-scene-bottom{position:absolute;left:3%;bottom:14px;width:29%;height:calc(100% - 122px);max-height:calc(100% - 122px);padding:0;display:flex;flex-direction:column;justify-content:flex-end}
.pb-interior .pb-transcript{display:flex;flex-direction:column;min-height:0;max-height:100%;padding:16px}
.pb-interior .pb-transcript h2{font-size:22px;flex-shrink:0;margin:10px 0}
.pb-interior .pb-transcript #account{min-height:0;max-height:none;overflow:auto;font-size:16px;line-height:1.55;flex:1}
.pb-interior .pb-transcript-label,.pb-interior .pb-transcript>button,.pb-interior .pb-choices{flex-shrink:0}
.pb-interior .pb-clue-dock{position:absolute;right:2%;bottom:18px;width:140px;z-index:7;display:grid;gap:12px;pointer-events:auto}
.pb-clue-dock .pb-coin{min-height:48px;margin:0;padding:9px;grid-template-columns:1fr 30px}
.pb-clue-dock .pb-scratch-number{margin:0;gap:6px;min-height:45px;font-size:22px;flex-wrap:wrap;padding:4px}
.pb-clue-dock .pb-line-plate{margin:0;display:block;min-height:42px;font-size:8px}
.pb-clue-dock .pb-line-plate span{display:block;margin-top:4px}
.pb-clue-dock .pb-timetable{position:relative;inset:auto;order:0;width:100%;margin:0;padding:17px 9px 10px;font-size:8px}
.pb-clue-dock .pb-timetable strong{font-size:17px;margin:8px 0 3px}
.pb-clue-dock .pb-timetable b{font-size:23px;margin:6px 0}
@media(min-width:680px) and (max-width:1000px){
 body[data-view=inside] .pb-phone-side{left:58%;width:410px}
 body[data-view=inside] .pb-scene-top,body[data-view=inside] .pb-scene-bottom{left:2%;width:31%}
 .pb-interior .pb-clue-dock{right:1%;width:100px;gap:8px}
 .pb-clue-dock .pb-timetable>span:not(.pb-paper-pin),.pb-clue-dock .pb-timetable em{font-size:6px}
 .pb-clue-dock .pb-scratch-number{font-size:20px}
 .pb-interior .pb-transcript{padding:12px}
}
@media(max-width:679px){
 body[data-view=inside] .pb-header{display:flex;padding:7px 10px;align-items:center}
 body[data-view=inside] .pb-brand{font-size:10px}
 body[data-view=inside] .pb-brand span{display:none}
 body[data-view=inside] .pb-header-actions{max-width:none;margin:0;gap:4px;justify-content:flex-end}
 body[data-view=inside] .pb-header-actions button,body[data-view=inside] .pb-header-actions a{font-size:7px;padding:6px 5px;min-height:30px}
 body[data-view=inside] .pb-footer{padding:6px 10px;font-size:7px;flex-wrap:nowrap}
 body[data-view=inside] .pb-footer>span{display:none}
 body[data-view=inside] .pb-phone-side{top:6px;left:50%;width:350px}
 .pb-interior .pb-device{padding:10px 12px}
 .pb-interior .pb-device-top,.pb-interior .pb-speaker,.pb-interior .pb-quick-numbers,.pb-interior .pb-device-foot,.pb-interior .pb-save{display:none}
 .pb-interior .pb-device-face{grid-template-columns:105px minmax(0,1fr);gap:10px;padding-top:0;border-top:0;box-shadow:none}
 .pb-interior .pb-photo-handset{min-height:302px}
 .pb-interior .pb-receiver-photo{height:302px;left:calc(50% - 25px)}
 .pb-interior .pb-lcd{padding:6px;border-width:4px}
 .pb-interior .pb-lcd input{font-size:26px;padding:4px 0}
 .pb-interior .pb-lcd small,.pb-interior .pb-lcd>span:first-child{font-size:7px}
 .pb-interior .pb-keypad{padding:5px 5px 9px;gap:6px;margin-top:8px}
 .pb-interior .pb-keypad button{height:40px}
 .pb-interior .pb-keypad strong{font-size:21px}
 .pb-interior .pb-keypad small{font-size:6px;margin-top:2px}
 .pb-interior .pb-call-actions button{min-height:38px;font-size:10px}
 .pb-interior .pb-under-phone button{font-size:9px;min-height:24px;padding:4px 0}
 .pb-interior .pb-audio-status{font-size:7px;line-height:1.2}
 body[data-view=inside] .pb-scene{position:absolute;inset:auto 10px 57px;width:auto;height:clamp(136px,27dvh,220px);margin:0;pointer-events:auto;display:flex;flex-direction:column;gap:6px}
 body[data-view=inside] .pb-scene-top{position:static;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
 body[data-view=inside] .pb-scene h1{font-size:15px}
 .pb-interior .pb-scene-state{margin:0;padding:0;border:0;font-size:7px;gap:5px}
 .pb-interior .pb-scene-state time{font-size:10px}
 body[data-view=inside] .pb-scene-bottom{position:static;width:100%;height:auto;max-height:none;flex:1;min-height:0;display:flex}
 .pb-interior .pb-transcript{flex:1;padding:8px 10px;overflow:hidden}
 .pb-interior .pb-transcript h2{font-size:17px;margin:4px 0}
 .pb-interior .pb-transcript #account{font-size:14px;line-height:1.4}
 .pb-interior .pb-transcript #account p{margin:4px 0}
 .pb-interior .pb-transcript-label{font-size:7px}
 .pb-interior .pb-next{font-size:9px;min-height:28px;margin-top:4px;padding:5px 0}
 .pb-interior .pb-skip{font-size:8px;padding:4px 0;min-height:25px}
 .pb-interior .pb-choices{margin-top:5px}
 .pb-interior .pb-choices button{min-height:30px;font-size:8px;padding:6px}
 .pb-interior .pb-clue-dock{left:10px;right:10px;bottom:7px;width:auto;height:40px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:stretch}
 .pb-clue-dock button.pb-coin,.pb-clue-dock button.pb-scratch-number,.pb-clue-dock button.pb-line-plate,.pb-clue-dock button.pb-timetable{position:static;min-height:40px;height:40px;width:100%;margin:0;padding:4px;border:1px solid #748878;background:#122323e8;color:#e5d5b5;transform:none;clip-path:none;box-shadow:none;border-radius:3px;font:8px var(--mono);display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2px;text-shadow:none}
 .pb-clue-dock .pb-coin b,.pb-clue-dock .pb-coin i,.pb-clue-dock .pb-scratch-number small,.pb-clue-dock .pb-line-plate span,.pb-clue-dock .pb-timetable small,.pb-clue-dock .pb-timetable>span,.pb-clue-dock .pb-timetable em{display:none}
 .pb-clue-dock .pb-timetable strong,.pb-clue-dock .pb-timetable b{font:8px var(--mono);color:#e5d5b5;margin:0}
 .pb-clue-dock .pb-scratch-number span{min-width:0;font-size:15px}
}