/* Mercmarine: an ocean-inspired visual system. */
:root{--accent:#087e8b;--ink:#153646;--line:#dbe9eb}
body:not([data-interface=display]){background:radial-gradient(ellipse at 3% 5%,#d8efed 0,transparent 36%),radial-gradient(ellipse at 95% 35%,#e5edf9 0,transparent 36%),#f4f8fa;background-attachment:fixed}.bar{background:linear-gradient(110deg,#102e40,#154e5b);border-bottom:1px solid #67c8c72b}.brand-fallback{background:#e1faf3;box-shadow:0 0 0 5px #ffffff09}.card,.stat{box-shadow:0 12px 36px #173f4d09;border-color:#dce9ec}.card h2,.admin-section h2{letter-spacing:-.035em}.primary,#joinBtn,.admin-primary-button{background:linear-gradient(110deg,#087c88,#16a295);box-shadow:0 5px 14px #078b8520;font-weight:700}.primary:hover,#joinBtn:hover,.admin-primary-button:hover{filter:brightness(1.07);box-shadow:0 7px 22px #078b8536}.secondary:hover{background:#dbeeed}.danger:hover{background:#ffe1dc}button:active{transform:translateY(1px)}input,select,textarea{transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{border-color:#26a49e!important;box-shadow:0 0 0 4px #24a39b12}button{transition:background .18s,box-shadow .18s,transform .18s,filter .18s}.studio-credit{font-size:9px;opacity:.85}
/* The welcome panel pairs a calm navy surface with a drawn ocean motif. */
[data-interface=visitor] .hero{position:relative;isolation:isolate;overflow:hidden;padding:34px 30px 115px;background:linear-gradient(145deg,#12384b 0%,#145464 100%);border-radius:28px;box-shadow:0 20px 50px #173d4b19;animation:welcome-in .55s ease both}.hero>small{display:inline-block;background:#ffffff12;color:#a2e9db;border:1px solid #c9fff321;border-radius:99px;padding:7px 12px;font-size:10px}.hero h1{color:#fff;font-size:clamp(34px,3.8vw,49px);letter-spacing:-.045em;line-height:1.12}.hero p{color:#c2d9e0;font-size:14px;line-height:1.85}.hero:after{content:'';position:absolute;z-index:-1;width:490px;height:180px;border:1px solid #9befe32b;border-radius:50%;left:-70px;bottom:-110px;margin:0;padding:0;box-shadow:0 -18px 0 -1px #7ddfce10,0 -40px 0 -1px #7ddfce0b,0 -65px 0 -1px #7ddfce07;transform:rotate(-12deg)}.hero:before{content:'';position:absolute;z-index:-1;top:-75px;right:-90px;width:220px;height:220px;border-radius:50%;border:1px solid #d7fff216;box-shadow:0 0 0 24px #d7fff206,0 0 0 48px #d7fff205}.service-symbol{width:30px;height:30px;flex-basis:30px;border-radius:10px;background:linear-gradient(135deg,#dcefee,#edf7f7);font-size:19px;transition:transform .2s,background .2s}#services .q-code-button{position:relative;border-radius:16px;background:#fbfdfd;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}#services .q-code-button:hover{transform:translateY(-3px);box-shadow:0 9px 19px #1c666b12;border-color:#81bdbb}#services .q-code-button:hover .service-symbol{transform:rotate(-8deg);background:#d0eee6}#services .q-code-button.selected{box-shadow:inset 0 0 0 1px #07918b20,0 8px 20px #138d8710}.selected-service-details{border-left:4px solid #13a495}#ticket,#called,#finished{scroll-margin-top:20px;overflow-anchor:none;animation:status-in .35s ease both;outline:none}#ticket .number,#called .number{display:inline-block;padding:14px 24px;margin:16px auto;border:1px solid #cbe6e0;border-radius:20px;background:linear-gradient(125deg,#f1faf6,#e7f3f6);letter-spacing:-.04em}#ticket>.ticket-chat,#called>.ticket-chat,#finished>.ticket-chat{overflow-anchor:none}.ahead{border:1px solid #d5e9e4}.called{box-shadow:0 12px 44px #078b8517}.ticket-chat{overflow-anchor:none}.chat-message{animation:status-in .16s ease both}
/* Staff and administration share a polished operational workspace. */
[data-interface=staff] .top{padding:12px 0 18px;border-bottom:1px solid #d7e5e7;margin-bottom:24px}[data-interface=staff] .top h1,[data-interface=staff] .top h2{letter-spacing:-.04em}.stat{position:relative;overflow:hidden;border-top:3px solid #58bdb0;background:linear-gradient(145deg,#fff,#f7fbfc)}.stat:after{content:'';position:absolute;width:80px;height:80px;border-radius:50%;right:-27px;bottom:-39px;background:#3bb7ab0a}.row{transition:background .2s,border-color .2s}.row:hover{background:#f3faf8;border-color:#b6d9d5}.visit-type-badge{background:#e5f5f1;border-color:#c8e5dc;color:#22655e}[data-interface=staff] #current .number,[data-interface=staff] #num{color:#088b88}.broadcast-card{border-top:3px solid #34aa9f}.chat-heading h3{color:#1c4d59}.admin-sidebar{background:linear-gradient(160deg,#102c40,#16525b)!important;box-shadow:8px 0 35px #153f4c0b}.admin-nav-link:hover{background:#ffffff0c}.admin-section{box-shadow:0 12px 32px #213f5407}.department-summary-card{border:1px solid #d8e8e7!important;background:linear-gradient(145deg,#fff,#eff8f6)!important;border-radius:18px!important}.department-summary-card>strong{display:inline-block;background:#dff1ed;padding:5px 9px;border-radius:8px;color:#12796f}.summary-service-name{font-size:13px;line-height:1.6;color:#375963;margin:12px 0 18px;overflow-wrap:anywhere}.admin-login-card,.login{box-shadow:0 24px 70px #143d4f16!important;border:1px solid #d5e5e8}.admin-login-card{animation:welcome-in .45s ease both}.experience-heading{border-bottom:1px solid #e1ebed;padding-bottom:12px}.message-editor-grid label{color:#385b66}.message-editor-grid textarea{background:#fbfdfd!important}.admin-table-wrap{border-radius:16px;overflow:auto}
[data-interface=display] .serving-card{background:linear-gradient(145deg,#14394a,#11283e);border-color:#6ccdb829;box-shadow:0 15px 35px #0002}.display-header{background:linear-gradient(100deg,#123547,#155560)!important}.lounge-banner{background:linear-gradient(110deg,#dcefeb,#edf6f7)}
@keyframes welcome-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes status-in{from{opacity:0}to{opacity:1}}
@media(min-width:761px){[data-interface=visitor] .wrap{gap:30px}.hero{position:sticky!important;top:24px}#services .q-code-button:nth-child(3n) .service-symbol{background:#e8edf9;color:#596ca0}#services .q-code-button:nth-child(3n + 2) .service-symbol{background:#f5eedf;color:#947337}}
@media(max-width:760px){[data-interface=visitor] .hero{padding:25px 24px 42px;border-radius:22px}.hero h1{font-size:34px;max-width:340px}.hero p{font-size:13px;line-height:1.75}.hero:after{display:block}.hero>small{font-size:9px}.card{border-radius:22px}.stat{padding:18px}.summary-service-name{font-size:12px}#ticket .number,#called .number{padding:12px 18px}.studio-credit{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#services .q-code-button:hover,button:active{transform:none!important}}

.visitor-sound{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px max(18px,calc((100% - 1180px)/2));background:#f5fafb;border-bottom:1px solid #d8e8eb;font-size:11px;color:#597783}.visitor-sound button{font-size:11px;min-height:32px;padding:7px 12px}.visitor-sound span{line-height:1.5}@media(max-width:600px){.visitor-sound{padding:8px 16px;justify-content:center;gap:8px;font-size:10px}}

/* Inline service accordion */
#services .service-item{min-width:0}
#services .service-item.is-open{grid-column:1/-1}
#services .service-card{width:100%}
#services .service-card.selected,#services .service-card.selected span{color:#174651}
#services .service-chevron{margin-left:auto;flex-shrink:0;font-size:22px;color:#087f8c}
.service-expansion{padding:18px;margin-top:8px;border:1px solid #c8e4e4;border-radius:18px;background:#f5fbfa;animation:serviceOpen .2s ease-out}
.service-expansion .selected-service-details{margin-top:0}
.service-expansion .staff-selection{margin-top:16px}
.service-expansion select{width:100%;min-width:0}
.service-expansion #joinBtn{width:100%}
@keyframes serviceOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.service-expansion{animation:none}}

/* Compact progressive service choices */
#serviceExpansion{padding:20px;}
#serviceExpansion .visit-options{margin-top:0;}
#serviceExpansion .next-choice{background:#fff5d9;border:2px solid #c68a16;border-radius:14px;padding:16px;scroll-margin:24px;box-sizing:border-box;}
#serviceExpansion .selected-staff-card{padding:10px 14px;margin-top:10px;}
#serviceExpansion .selected-staff-card strong{font-size:15px;}
#serviceOptions label{display:block;min-width:0;}
#serviceOptions select{width:100%;max-width:100%;}
#subPurposeLabel:not(.hidden){margin-top:14px;background:#fff5d9;border-left:4px solid #c68a16;padding:14px;border-radius:12px;}
@media(max-width:600px){#serviceExpansion{padding:14px;}#serviceOptions{display:block;}}

[data-interface=visitor] .hero h1{font-size:clamp(38px,4.4vw,64px);max-width:none;text-align:center;width:100%;margin:0 auto 18px}
[data-interface=visitor] #ticket [data-message="registeredBody"]{background:#1252a0;color:white;padding:12px 18px;border-radius:12px;font-weight:650;line-height:1.45}
[data-interface=visitor] #ticket [data-message="registeredBody"]:empty{display:none}
[data-interface=display] .brand #companyLogo{width:clamp(150px,22vw,360px);height:clamp(76px,9vw,116px);max-width:48vw;object-fit:contain;background:white;padding:3px;border-radius:12px}
[data-interface=display] .lounge-banner,[data-interface=display] .empty-serving{position:relative;overflow:hidden;min-width:0}
[data-interface=display] .lounge-banner{display:block;height:40px;min-height:0;padding:0;background:linear-gradient(95deg,#103847,#12606a);color:white;border:1px solid #43838b;border-radius:9px}
[data-interface=display] .lobby-runner{position:absolute;left:0;top:50%;width:max-content;white-space:nowrap;line-height:1.15;color:white;visibility:hidden;transform:translateY(-50%)}
[data-interface=display] #bannerMarquee{font-size:clamp(12px,var(--ticker-size,18px),28px)}
[data-interface=display] #idleMarquee{font-size:clamp(18px,2.3vw,38px)}

[data-interface=display] #idleMarquee{position:static;transform:none;visibility:visible;white-space:normal;width:min(90%,48ch);margin:auto;text-align:center;line-height:1.4;color:#f1fbff;font-weight:650;overflow-wrap:anywhere}
[data-interface=visitor] #ticket [data-message="registeredBody"]{font-size:var(--confirmation-size,18px);overflow-wrap:anywhere}
[data-interface=visitor] #called:not(.hidden){display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:clamp(20px,4vw,48px)}
#called .turn-heading{display:flex;gap:10px;align-items:center;color:#125263}
#called .turn-heading h2{font-size:clamp(25px,4vw,40px);margin:0}
#called .number{margin:0 auto 12px}
#called h2,#called p,#called .counter{margin:0}
#called .called-staff-info{padding:10px 18px;background:#edf7f6;border-radius:12px}
#called .ticket-chat{align-self:stretch;text-align:left}

[data-interface=display] .brand #companyLogo{clip-path:inset(0 10% round 12px)}

[data-interface=display] .now-serving-section{position:relative;padding-right:250px}
.registration-qr{position:absolute;right:40px;top:65px;width:170px;text-align:center;z-index:110}
.registration-qr img{display:block;width:170px;height:170px;object-fit:contain;background:#fff;border:8px solid white;border-radius:10px}
.registration-qr strong{display:block;margin-top:10px;color:white;font-size:14px}
@media(max-width:700px){[data-interface=display] .now-serving-section{padding-right:18px}.registration-qr{position:relative;right:auto;top:auto;margin:0 auto 20px}}