/* VEYTU — integral refinement · clarity + pure lightness */
:root{--pure-gap:clamp(12px,2.2vw,24px);--pure-radius:22px;--pure-motion:42s;}
body{overflow-x:clip;}
.topbar{min-height:78px;padding:14px clamp(15px,3vw,32px);align-items:center}
.topbar .brand{align-self:center}
.topbar .top-actions{gap:9px;flex-wrap:nowrap;min-width:0}
.topbar .top-actions .icon-button{height:40px;width:40px;min-width:40px;border-radius:50%;padding:9px}
.topbar .top-actions #interfaceLanguage{width:116px;max-width:116px;font-size:13px!important;min-height:40px;height:40px;padding-inline:7px;border-radius:11px;}
.topbar .brand-name{font-weight:750;letter-spacing:-.045em}
.topbar .brand-tagline{font-size:10px;letter-spacing:.03em}
/* Homepage: retain the original identity, give orbital movement more architectural depth. */
.home{padding-block:clamp(25px,4vh,56px) 35px;row-gap:0}
.hero-orbit{filter:drop-shadow(0 14px 28px rgba(16,102,77,.06));}
.hero-orbit svg .ring-back{stroke-width:1.2}
.hero-orbit svg .ring-middle{stroke-width:1}
.hero-orbit svg .ring-highlight{stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(26,124,96,.12))}
.hero-orbit svg .person-orb{filter:drop-shadow(0 0 4px rgba(67,146,121,.18))}
/* Creation: fields above fold instead of decorative billboard consuming the screen */
.entry-view .view-top{padding-top:10px}
.entry-layout{max-width:1110px;margin:12px auto 30px;gap:20px 42px;align-items:start}
.entry-heading h2{font-size:clamp(34px,3.5vw,53px);margin:12px 0 8px}
.entry-heading p{margin:0 0 7px;line-height:1.5}
.entry-heading .server-diagnostic{margin:9px 0 0;padding:9px 12px;font-size:12px}
.entry-layout .form-card{padding:clamp(18px,2.4vw,25px);border-radius:21px;box-shadow:none}
.entry-layout .form-card label{margin-top:10px;margin-bottom:5px}
.entry-layout .form-card input,.entry-layout .form-card select{min-height:45px;max-height:50px}
.entry-layout .form-card .primary-btn{margin-top:16px;min-height:49px}
.entry-layout .form-card .recommended{margin-block:3px 2px}
.entry-layout .entry-art{height:100%;min-height:410px;max-height:560px;padding:34px;opacity:.82}
.entry-layout .entry-slogan{font-size:clamp(31px,3.3vw,46px)}
.recommended .unit-field[hidden]{display:none!important}
.recommended .unit-field{margin-top:7px}
/* Room: identity, compact audio, orbital stage, tools, exit */
.room-view.integral-room{max-width:1060px;width:100%;padding-top:8px;padding-bottom:40px}
.integral-room .session-top{padding:4px 4px 12px;margin:0;align-items:center}
.integral-room .session-info h2{font-size:clamp(20px,2vw,25px);margin:3px 0}
.integral-room .session-info p{margin:3px 0;font-size:11px}
.integral-room .call-panel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;margin:0 0 12px;border-radius:15px;box-shadow:none}
.integral-room .call-panel .call-status{flex:0 1 auto;margin:0;min-width:125px}
.integral-room .call-panel .call-controls{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;width:auto}
.integral-room .call-panel .call-controls button{min-height:39px;min-width:0;padding:8px 13px;font-size:12px;flex:0 0 auto;border-radius:12px}
.integral-room .call-panel .call-controls .redundant-finish{display:none!important}
.integral-room .call-panel .call-controls .call-destructive{background:transparent;color:var(--muted);border-color:var(--line)}
.integral-room .call-panel .audio-roster{order:3;flex:1 0 100%;margin:0;max-height:34px}
.integral-room .call-panel .call-management-details{order:4;flex:1 0 100%;margin:0}
.integral-room .call-panel .call-management-details summary{min-height:31px;padding-top:5px;font-size:11px}
.integral-room .call-panel #audioError{order:5;flex-basis:100%;margin:0}
.integral-room .call-panel #audioGrant:not(:empty){order:5;flex-basis:100%;margin:0;font-size:11px}
.integral-room .room-layout{display:block;padding-top:0}
.integral-room .orbit-panel{max-width:830px;margin-inline:auto;border-radius:27px;padding:clamp(16px,3vw,25px);box-shadow:0 7px 30px rgba(0,57,44,.035)}
.integral-room .orbit-wrap{max-width:320px;width:min(100%,320px);margin:1px auto 3px}
.integral-room .orbit-bottom{padding-top:9px}
.integral-room .orbit-actions{padding-top:0;margin-top:13px}
.integral-room .orbit-actions .primary-btn{min-height:47px;height:auto;padding:12px}
.integral-room .room-toolbar{max-width:830px;margin:8px auto 0;padding:0;gap:6px}
.integral-room .room-toolbar button{font-size:12px;min-height:41px;border-radius:11px}
.integral-room .room-exit-bar{margin-top:12px;padding-top:12px}
.integral-room .room-exit-bar #endBtn{background:transparent;color:var(--veytu-danger);border:1px solid var(--line)}
/* Orbital language: consistent across home, invitation, meeting and final. */
.orbit-wrap{isolation:isolate;}
.orbit-wrap .orbit-secondary{animation:none!important;opacity:.35;stroke-dasharray:1.4 10;stroke-width:1.1}
.orbit-wrap .orbit-progress{stroke-width:2.5;opacity:.50;stroke-linecap:round}
.orbit-wrap .orbit-track{stroke-width:1.2;opacity:.85}
.orbit-svg .planetary-halo{fill:none;stroke:var(--jade);stroke-opacity:.16;stroke-width:1}
.orbit-svg .planetary-elliptic{fill:none;stroke:var(--jade);stroke-opacity:.10;stroke-width:1}
.orbit-svg .planetary-accent{fill:none;stroke:var(--jade);stroke-opacity:.83;stroke-linecap:round;stroke-width:2.5}
.orbit-svg .planetary-accent-light{fill:none;stroke:var(--jade);stroke-opacity:.43;stroke-linecap:round;stroke-width:1.4}
.orbit-svg .planetary-planet{fill:#71bda4;stroke:var(--paper);stroke-width:2;filter:drop-shadow(0 0 3px rgba(80,185,151,.18))}
.orbit-svg .planetary-planet.amber{fill:#d7aa62}
.orbit-svg .planetary-satellite{fill:#adc5bd;opacity:.83}
.orbit-svg .planetary-spin{transform-origin:200px 200px;animation:planetary-spin var(--pure-motion) linear infinite}
.orbit-svg .planetary-spin.secondary{animation-duration:calc(var(--pure-motion) * 1.65)}
.orbit-wrap[data-orbit-direction=reverse] .planetary-spin{animation-direction:reverse}
@keyframes planetary-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
body[data-orbit-speed=slow]{--pure-motion:70s}
body[data-orbit-speed=soft]{--pure-motion:42s}
body[data-orbit-speed=dynamic]{--pure-motion:24s}
body[data-orbit-speed=still] .planetary-spin{animation:none!important}
body.reduced-motion .planetary-spin,.reduced-motion .hero-orbit .ring-highlight{animation:none!important}
@media(prefers-reduced-motion:reduce){.planetary-spin,.hero-orbit .ring-highlight{animation:none!important}}
/* One panel instead of navigating down a long document */
.integral-drawer{position:fixed;right:0;left:auto;top:0;bottom:0;margin:0;width:min(490px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;border:1px solid var(--line);border-radius:24px 0 0 24px;background:var(--bg);color:var(--ink);padding:20px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 0 56px rgba(0,26,21,.2)}
.integral-drawer::backdrop{background:#071b18a8;backdrop-filter:blur(2px)}
.integral-drawer-head{position:sticky;z-index:3;top:-20px;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.integral-drawer-head h2{font-size:20px;margin:0;font-weight:700;letter-spacing:-.035em}
.integral-drawer .sidebar{display:flex!important;max-width:none;width:100%;margin:0;flex-direction:column;gap:10px;}
.integral-drawer .side-card,.integral-drawer .notes-disclosure{width:100%;max-width:100%;padding:15px;border-radius:16px}
.integral-drawer .notes-disclosure{padding:0}
.integral-drawer .side-head{margin-bottom:12px}
.integral-drawer .side-head h3{font-size:17px}
.integral-drawer .people-list,.integral-drawer .queue-list{max-height:245px;overflow:auto}
.integral-drawer #modTools{max-width:100%}
/* Sheet geometry shared by all dialogs, safe for keyboard and reduced viewports. */
dialog.modal{width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 28px);margin:auto;border-radius:23px;padding:clamp(17px,2.5vw,24px);overscroll-behavior:contain;scroll-padding-bottom:20px}
dialog.modal .modal-top{align-items:flex-start;gap:10px;margin-bottom:10px}
dialog.modal .modal-top h2{font-size:clamp(21px,2.8vw,28px);line-height:1.14;letter-spacing:-.04em;margin:7px 0 8px}
dialog.modal .modal-top p{margin:0;font-size:12px;line-height:1.5}
dialog.modal .close-button{position:sticky;top:0;z-index:4;width:42px;height:42px;min-width:42px;border:1px solid var(--line);outline-offset:3px;box-shadow:none}
dialog.modal label{line-height:1.4}
dialog.modal textarea{min-height:78px;max-height:185px}
#prepareDialog textarea{min-height:75px;height:90px;font-size:16px!important}
#prepareDialog>label{display:block;margin:12px 0 6px}
#prepareDialog .thought-secondary{border-top:1px solid var(--line);padding-top:9px;margin-top:13px}
#prepareDialog .thought-secondary summary{font-weight:650;font-size:13px;min-height:38px;padding:8px 0;color:var(--jade);cursor:pointer}
#prepareDialog .thought-secondary label{display:block;margin:9px 0 5px;font-size:13px}
#thoughtStatus{font-size:11px;color:var(--muted);margin:11px 0}
/* Clear invite hierarchy and selectable full URL */
.integral-share .share-visual{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;margin:7px 0 13px}
.integral-share .share-code{flex:1 1 210px;font-size:clamp(21px,3vw,27px);letter-spacing:.18em;padding:17px 12px;margin:0;min-width:0}
.integral-share .share-qr{flex:0 0 112px;width:112px;height:112px;margin:0;border-radius:12px}
.integral-share #shareLink{width:100%;font-size:12px!important;overflow-x:auto;white-space:nowrap;direction:ltr;text-align:left}
.integral-share #inviteRecipient{margin-bottom:9px}
.integral-share #issueInviteBtn{width:100%;margin:0 0 10px;min-height:43px}
.integral-share .extras-line{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.integral-share .extras-line button{min-width:0}
.integral-share #nativeShare{min-height:46px}
.integral-share .notes-help{line-height:1.45}
/* Learn tips: seven original recommendations, disclosed on demand. */
.learning .lesson-card{padding:0;border-bottom:1px solid var(--line)}
.learning .learn-tip>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:53px;padding:11px 0;font-size:14px;font-weight:650;cursor:pointer}
.learning .learn-tip>summary::after{content:'+';font-size:20px;font-weight:400;color:var(--jade)}
.learning .learn-tip[open]>summary::after{content:'−'}
.learning .learn-tip>p{font-size:13px;line-height:1.55;margin:0 0 16px}
.learning .guide-link{display:block;min-height:43px;line-height:1.5;border-top:1px solid var(--line);padding-top:13px}
/* Preferences: categories instead of a mile-long modal. */
dialog.integral-settings{position:fixed;left:auto;right:0;top:0;bottom:0;margin:0;width:min(420px,100vw);max-width:100vw;max-height:100dvh;height:100dvh;border-radius:23px 0 0 23px;box-shadow:0 0 56px rgba(0,26,21,.17);padding:18px 20px}
.integral-settings #prefSections{border-top:1px solid var(--line)}
.integral-settings .integral-pref-section{border-bottom:1px solid var(--line);padding:0}
.integral-settings .integral-pref-section>summary{padding:16px 0;min-height:49px;font-size:14px;font-weight:730;color:var(--ink);cursor:pointer}
.integral-settings .integral-pref-section[open]>summary{color:var(--jade)}
.integral-settings .integral-pref-section>.pref-group{border:0;padding:0 0 15px}
.integral-settings .integral-pref-section>.pref-group>h3{display:none}
.integral-settings .pref-group select,.integral-settings .pref-group input[type=number]{max-width:100%}
.integral-settings .toggle-row{margin:9px 0!important;min-height:38px}
.integral-settings #prefsDoneBtn{margin:17px 0 0;min-height:46px}
.integral-settings #hostDurationMinutes{max-width:150px}
.integral-settings .audio-technical-details{max-width:100%}
/* Security modal: action hierarchy and invitation identification */
.integral-security .security-explainer{font-size:13px;margin:0 0 16px;color:var(--muted)}
.integral-security .security-lock-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700}
.integral-security .security-lock-help{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin:7px 0 15px}
.integral-security .security-row{padding:12px 0;gap:10px;border-top:1px solid var(--line)}
.integral-security #securityList article>p{font-size:13px;overflow-wrap:anywhere}
.integral-security .security-revoke{border-color:var(--line);color:var(--veytu-danger);background:transparent}
/* Final: single-screen role-specific composition; no marketing for existing users. */
.final-view:not([hidden]){justify-content:flex-start;gap:9px;max-width:520px;margin:0 auto;padding:clamp(15px,3vh,38px) 16px 28px}
.final-view .final-audience{max-width:420px;text-align:center;color:var(--muted);font-size:12px;line-height:1.48;margin:0 auto 3px}
.final-view h1{font-size:clamp(22px,3vw,31px);letter-spacing:-.045em}
.final-view #finalHome{margin-top:8px}
.final-view #finalReport,.final-view #finalSummary{margin-top:0}
.final-view .final-orbit{width:72px;height:72px;flex-basis:72px;opacity:.93}
.final-orbit .final-ring-moving{stroke-width:2.4;stroke-dasharray:52 250}
/* PHONE: a deliberate 2-row compact header, never oversize language controls. */
@media(max-width:700px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 9px;min-height:68px;padding:calc(9px + env(safe-area-inset-top,0px)) 12px 8px;align-items:center}
 .topbar .brand{grid-column:1;grid-row:1;min-width:0}
 .topbar .brand-name{font-size:20px}
 .topbar .veytu-symbol{width:25px;height:25px}
 .topbar .brand-tagline{font-size:8px;letter-spacing:.012em;white-space:nowrap}
 .topbar .top-actions{grid-column:2;grid-row:1;flex-wrap:wrap;justify-content:flex-end;gap:3px 6px;max-width:226px}
 .topbar .top-actions #interfaceLanguage{max-width:106px;width:106px;min-height:38px;height:38px;font-size:12px!important;padding:4px}
 .topbar .top-actions .nav-learn{font-size:12px;padding:7px 3px;min-width:33px;min-height:38px}
 .topbar .top-actions .icon-button{width:35px;height:35px;min-width:35px;min-height:35px;padding:7px}
 .topbar .top-actions .network-pill{display:none}
 .home{padding:21px 16px 27px}
 .home h1{font-size:clamp(37px,10vw,52px);margin:12px 0 11px}
 .hero-orbit{max-width:275px}
 .entry-layout{margin:7px auto 18px;gap:12px}
 .entry-layout .entry-art{display:none}
 .entry-heading h2{font-size:clamp(31px,8vw,38px);line-height:1.1}
 .entry-layout .form-card{padding:17px;border-radius:17px}
 .express-view{padding:8px 18px 23px;margin:0 auto 24px}
 .express-view .express-emblem{height:94px;width:94px;margin:6px auto 18px;box-shadow:0 0 0 11px #59978408,0 0 0 22px #59978404}
 .express-view h1{font-size:clamp(27px,7.4vw,33px);margin:12px 0 9px}
 .express-view p{font-size:12px;line-height:1.48}
 .express-view .invite-meta{padding:7px 0 12px;font-size:12px!important}
 #expressForm{margin-top:13px}
 #expressName{height:50px;margin:7px 0 10px}
 #expressSubmit{min-height:49px}
 .room-view.integral-room{padding:7px 12px calc(74px + env(safe-area-inset-bottom))}
 .integral-room .session-top{padding:0 2px 9px}
 .integral-room .session-info h2{font-size:20px}
 .integral-room .call-panel{padding:10px 11px;border-radius:13px;gap:5px 8px}
 .integral-room .call-panel .call-status{flex:0 0 100%}
 .integral-room .call-panel .call-controls{justify-content:flex-start;gap:6px;flex:0 0 100%}
 .integral-room .call-panel .call-controls button{flex:0 1 auto;width:auto;min-height:39px;font-size:11px;padding:8px 10px}
 .integral-room .call-panel .audio-roster{max-height:30px;margin-top:0}
 .integral-room .call-panel .call-management-details summary{font-size:11px;min-height:26px}
 .integral-room .orbit-panel{padding:13px 12px 18px;border-radius:19px}
 .integral-room .orbit-wrap{max-width:min(270px,73vw);margin:1px auto}
 .integral-room .orbit-bottom{gap:7px}
 .integral-room .orbit-actions{margin-top:9px}
 .integral-room .room-toolbar{padding:5px 1px;gap:5px}
 .integral-room .room-toolbar button{font-size:11px;min-height:40px;flex:1 1 100px;padding:8px 7px}
 .integral-drawer{left:0;right:0;top:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;border-radius:0;padding:12px 16px calc(18px + env(safe-area-inset-bottom))}
 .integral-drawer-head{top:-12px;margin-bottom:8px}
 dialog.integral-settings{left:0;width:100vw;max-width:100vw;border-radius:0;padding:calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))}
 .integral-share .share-visual{gap:8px}
 .integral-share .share-code{flex:1 1 160px;letter-spacing:.13em}
 .integral-share .share-qr{flex-basis:92px;width:92px;height:92px}
 .final-view:not([hidden]){padding:14px 17px 26px;gap:8px}
 .final-view .final-orbit{width:59px;height:59px;flex-basis:59px}
 .final-view h1{font-size:clamp(22px,6.7vw,27px)}
 .final-view .final-audience{font-size:12px}
}
@media(max-width:360px){.topbar .brand-name{font-size:18px}.topbar .top-actions{max-width:196px;gap:2px 3px}.topbar .top-actions #interfaceLanguage{width:94px;max-width:94px;font-size:11px!important}.topbar .top-actions .icon-button{width:33px;height:33px;min-width:33px;min-height:33px}.integral-room .orbit-wrap{max-width:230px}}
@media(max-height:640px) and (max-width:700px){.express-view .express-emblem{height:75px;width:75px;margin:0 auto 11px}.express-view h1{margin:8px 0}.final-view:not([hidden]){gap:5px;padding-top:7px}.final-view #finalHome{margin-top:3px}}

/* Coordinate frames for decorative orbital animations */
.hero-orbit .hero-extra{transform-origin:155px 155px}
.final-orbit .final-planet{transform-origin:50px 50px;animation-duration:56s}
@media(prefers-reduced-motion:reduce){.hero-orbit .hero-extra,.final-orbit .final-planet{animation:none!important}}
body.reduced-motion .hero-orbit .hero-extra,body.reduced-motion .final-orbit .final-planet,body[data-orbit-speed=still] .final-orbit .final-planet{animation:none!important}
@media(max-width:700px){
 .topbar{grid-template-columns:minmax(0,1fr) minmax(145px,176px)}
 .topbar .top-actions{max-width:176px;display:grid;grid-template-columns:100px 53px;justify-content:end;align-items:center;gap:2px 7px}
 .topbar .top-actions #interfaceLanguage{grid-column:1;grid-row:1;width:100px;max-width:100px}
 .topbar .top-actions .nav-learn{grid-column:2;grid-row:1;justify-self:end}
 .topbar .top-actions #themeButton{grid-column:1;grid-row:2;justify-self:end}
 .topbar .top-actions #settingsButton{grid-column:2;grid-row:2;justify-self:end}
 .integral-room .room-toolbar #securityBtn{flex:1 1 120px}
 .integral-room .orbit-wrap{max-width:min(242px,65vw)}
}
@media(max-width:360px){.topbar{grid-template-columns:minmax(0,1fr) 155px}.topbar .top-actions{grid-template-columns:94px 53px;gap:2px 5px}.topbar .top-actions #interfaceLanguage{width:94px;max-width:94px}.integral-room .orbit-wrap{max-width:min(220px,67vw)}}