/* The working surface prioritizes countdown + communication at every size. */
.workspace{grid-template-areas:'countdown signals' 'pending signals' 'activity rundown' 'activity team';grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);align-items:start;row-gap:18px}
.main-column,aside{display:contents}
.countdown-panel{grid-area:countdown}.pending{grid-area:pending;margin:0}
.signals{grid-area:signals;margin:0;padding:21px;background:var(--panel);border:1px solid var(--line);border-radius:10px;align-self:stretch}
.signal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.signal-grid button{min-height:108px;font-size:16px}.signal-grid button:last-child{grid-column:1/-1;min-height:75px;flex-direction:row;justify-content:center;gap:14px}
.activity{grid-area:activity;margin:0}.rundown{grid-area:rundown;margin:0}.team{grid-area:team;margin:0}
#detailsButton,#mobileClock{display:none}
#mobileSettings{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
#mobileSettings .trial{width:100%;padding:12px;gap:12px;flex-direction:column;align-items:flex-start;border-radius:6px}
#mobileSettings .trial button,#mobileSettings .trial a{padding:10px 5px;font-size:14px}
#mobileContent{display:grid;gap:18px}#mobileContent .activity{grid-area:auto}#mobileContent .rundown,#mobileContent .team{grid-area:auto}
body.compact{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.compact header{min-height:48px;height:48px;flex:none;padding:6px 12px;gap:8px;flex-wrap:nowrap}
.compact .brand{gap:6px;font-size:12px;letter-spacing:1px}.compact .brand img{height:23px;width:23px}.compact .brand small{display:none}
.compact .header-right{width:auto;gap:6px;flex-wrap:nowrap;font-size:12px}.compact .header-right button{font-size:12px;padding:7px 8px;min-height:34px;white-space:nowrap}
.compact #connection{font-size:0;margin:0}.compact #connection:before{content:'●';font-size:10px;color:#ffad72;margin:0}.compact #connection.online:before{color:var(--green)}
.compact #detailsButton{display:block}.compact #mobileClock{display:block;font:12px var(--mono);color:var(--muted);margin-left:auto;white-space:nowrap}
.compact main{flex:1;min-height:0;width:100%;max-width:none;padding:10px;display:flex;flex-direction:column;margin:0}
.compact .heading,.compact footer{display:none}
.compact .workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:'countdown' 'signals' 'pending';gap:10px}
.compact .countdown-panel{height:100%;min-height:0;display:flex;flex-direction:column}
.compact .panel-top{padding:10px 12px;gap:8px;flex:none;font-size:12px}.compact .badge{font-size:12px;padding:4px 6px}
.compact #phase{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.compact .countdown-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 12px;gap:5px}
.compact .countdown-content .eyebrow{font-size:12px;letter-spacing:1px}
.compact .countdown-content h2{font-size:clamp(18px,4.5vw,26px);margin:0;line-height:1.3;overflow-wrap:anywhere}
.compact .timer{font-size:clamp(48px,min(20vw,16dvh),110px);letter-spacing:-3px;line-height:1.1}.compact .timer.live-text{font-size:clamp(48px,15dvh,95px);letter-spacing:3px}
.compact .target{font-size:12px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.compact .panel-bottom{min-height:42px;flex:none;padding:7px 10px;font-size:12px;gap:8px}
.compact .stop{padding:7px 8px;font-size:12px;white-space:nowrap}
.compact .signals{padding:10px;min-height:0;align-self:stretch}
.compact .signals .section-title{margin-bottom:9px}.compact .signals .section-title h2{font-size:14px}.compact .signals .section-title>span{font-size:12px;max-width:none}
.compact .signal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.compact .signal-grid button{min-height:54px;height:clamp(54px,8dvh,72px);padding:8px;font-size:16px;flex-direction:row;justify-content:center;gap:12px}
.compact .signal-grid small{display:none}.compact .signal-grid button>span{font-size:24px;height:auto}.compact .signal-grid button:last-child{min-height:44px;height:44px}
.compact .pending{padding:7px 10px;font-size:12px;line-height:1.5;max-height:64px;overflow:auto}.compact .pending button{font-size:12px;padding:5px}
.compact .fault{padding:6px 8px;margin-top:6px;font-size:12px;line-height:1.5}.compact .fault button{padding:5px 7px;font-size:12px}
.compact #toast{top:54px;bottom:auto;font-size:13px;padding:9px 14px;pointer-events:none}
.compact dialog{max-height:calc(100dvh - 20px);padding:16px}.compact #mobileDetails{width:min(720px,96vw)}
@media (orientation:landscape){
 .compact .workspace{grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:'countdown signals' 'pending signals'}
 .compact .signals{display:flex;flex-direction:column}.compact .signal-grid{flex:1;min-height:0;grid-template-rows:1fr 1fr .8fr;gap:7px}
 .compact .signal-grid button,.compact .signal-grid button:last-child{height:100%;min-height:40px}
 .compact .timer{font-size:clamp(44px,min(13vw,24dvh),130px)}.compact .timer.live-text{font-size:clamp(44px,23dvh,110px)}
 .compact .countdown-content h2{font-size:clamp(18px,3vw,28px)}
}
@media(max-height:420px) and (orientation:landscape){
 .compact header{height:40px;min-height:40px}.compact main{padding:6px 10px}.compact .workspace{gap:6px}
 .compact .panel-top{padding:6px 10px}.compact .countdown-content{gap:2px;padding:3px 8px}.compact .panel-bottom{min-height:36px;padding:4px 8px}
 .compact .signals{padding:8px}.compact .signals .section-title{margin-bottom:6px}.compact .signals .section-title>span{display:none}
 .compact .signal-grid button{font-size:15px}.compact .target{font-size:12px}
}
@media(max-width:360px){.compact .brand>span{display:none}.compact .signals .section-title>span{font-size:11px}}
@media(max-width:480px){.compact .brand>span{display:none}}
/* Both mobile views retain a direct fullscreen entry and a reversible view switch. */
.full-layout header{position:sticky;top:0;z-index:10;background:var(--bg);padding:10px 14px;gap:10px;flex-wrap:wrap}
.full-layout .header-right{flex-wrap:wrap;width:auto;gap:8px}
.full-layout .header-right button,.full-layout .header-right select{font-size:14px;min-height:40px}
.full-layout .workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:'countdown' 'signals' 'pending' 'rundown' 'team' 'activity';gap:16px}
.full-layout .heading{flex-wrap:wrap;align-items:flex-start}.full-layout .clocks{flex-wrap:wrap;gap:14px}
.full-layout .timer{font-size:clamp(40px,12vw,110px)}
.full-layout .trial{flex-direction:column;align-items:flex-start;padding:12px 16px;gap:12px}
.full-layout .trial>div{gap:14px;flex-wrap:wrap}
.full-layout .trial button,.full-layout .trial a{font-size:14px;min-height:40px;display:inline-flex;align-items:center}
.full-layout .signals{padding:14px}.full-layout .signal-grid button{min-height:70px}
.full-layout .signal-grid button:last-child{flex-wrap:wrap}
.workspace{grid-template-areas:'countdown signals' 'pending signals' 'chat rundown' 'activity team'}
.chat{grid-area:chat;background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:10px;min-width:0}
.chat-messages{height:260px;overflow:auto;overscroll-behavior:contain}
.chat-message{padding:10px 0;border-bottom:1px solid var(--line)}.chat-message>div{display:flex;gap:12px;justify-content:space-between;font-size:13px}.chat-message time{color:var(--muted);font-family:var(--mono)}.chat-message b{color:#9fc6ff}.chat-message.mine b{color:var(--green)}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);font-size:14px;margin:7px 0}
#chatForm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}.chat-label{grid-column:1/-1;font-size:13px;color:var(--muted)}#chatInput{resize:vertical;min-width:0;max-height:160px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);font:16px inherit;padding:10px;font-family:inherit;font-size:16px}.chat-hint{font-size:12px;margin:8px 0 0}
#mobileContent .chat{grid-area:auto;padding:12px}#mobileContent .chat-messages{height:190px}
#soundPrompt{width:min(440px,92vw);border-top:3px solid var(--red)}#soundPrompt h2{font-size:24px}.sound-actions{display:flex;justify-content:flex-end;gap:12px;margin:20px 0}.sound-actions button{min-height:44px}
.stop.resume{background:#243b30;border-color:#42755b;color:#9aefbe}
.compact .workspace{grid-template-areas:'countdown' 'signals' 'pending'}
.full-layout .workspace{grid-template-areas:'countdown' 'signals' 'pending' 'chat' 'rundown' 'team' 'activity'}
@media(orientation:landscape){.compact .workspace{grid-template-areas:'countdown signals' 'pending signals'}}
@media(max-width:600px){.compact .brand,.compact #mobileClock{display:none}.compact header{justify-content:center}.compact .header-right{width:100%;justify-content:space-between;gap:4px}.compact .header-right button{padding:7px 6px}.full-layout .brand{font-size:14px}.full-layout main{padding:18px 12px}.full-layout .clocks strong{font-size:18px}.full-layout .signal-grid small{display:none}}