:root{font-family:system-ui,-apple-system,sans-serif;color:#263f37;background:#f6f7f2;color-scheme:light}*{box-sizing:border-box}body{margin:0}header{min-height:62px;display:flex;align-items:center;gap:14px;padding:10px 22px;border-bottom:1px solid #dbe0d7}a{color:inherit}.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:650;text-decoration:none}.brand img{width:28px;height:28px}#accountName{margin-left:auto;max-width:min(32vw,320px);font-size:14px;color:#637169;text-decoration:none}.account-name-full{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-name-short{display:none}#accountName:hover{text-decoration:underline}#accountName:focus-visible{outline:2px solid #214f41;outline-offset:4px}button,input,textarea,select{font:inherit;border:1px solid #d3dbcf;border-radius:10px;padding:10px 13px;color:inherit;background:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}.primary{background:#214f41;color:white;border-color:#214f41}#entry{max-width:470px;margin:8vh auto;padding:24px}h1{font-size:34px;letter-spacing:-.8px}p{line-height:1.65;color:#637169}form label{display:block;margin:16px 0}input,textarea{display:block;width:100%;margin-top:7px;background:#fff}#login button{width:100%;margin:5px 0 18px}#notice{padding:0 22px;font-size:14px}#notice:not(:empty){padding:10px 22px}#view{height:calc(100dvh - 64px)}#view:empty{display:none}iframe{display:block;border:0;width:100%;height:100%}dialog{width:calc(100% - 36px);max-width:500px;border:1px solid #d3dbcf;border-radius:18px;background:#f6f7f2;padding:24px;max-height:85dvh;overflow:auto}dialog::backdrop{background:#263f3755}[hidden]{display:none!important}@media(max-width:650px){header{padding:10px 12px;gap:8px;flex-wrap:wrap}.brand{font-size:21px}#accountName{max-width:none;flex:none}.account-name-full{display:none}.account-name-short{display:inline}header button{font-size:13px;padding:9px}#domains{max-width:48%;font-size:13px;margin-left:auto}#entry{margin:5vh auto}#view{height:calc(100dvh - 110px)}}
#domains{max-width:34vw;min-width:0}#bindingTarget{white-space:pre-line;overflow-wrap:anywhere;color:#263f37}body{display:flex;flex-direction:column;min-height:100dvh}#view{flex:1;height:auto;min-height:0}body:has(#view:not(:empty)){height:100dvh}#view iframe{height:100%}@media(max-width:650px){#domains{max-width:48%}}

/* The platform owns global navigation; the embedded app owns its content scroll. */
body:has(#view:not(:empty)){overflow:hidden}body>header,#notice{flex:none}#view{flex:1 1 0;overflow:hidden}body.kernel-view-active>header{min-height:56px;padding-top:7px;padding-bottom:7px}@media(max-width:650px){body.kernel-view-active>header{gap:6px}body.kernel-view-active #domains{max-width:40%;margin-left:0}body.kernel-view-active .brand{font-size:18px}body.kernel-view-active .brand img{width:23px;height:23px}body.kernel-view-active #bind,body.kernel-view-active #logout{font-size:12px;padding:7px}}

/* Connection belongs to its domain selector, including the active option. */
#domains[data-connection-state="connected"]{background:#edf3e8;border-color:#b9ccb4;color:#244b3a}#domains[data-connection-state="connecting"]{border-color:#c5cfbf}#domains[data-connection-state="unavailable"]{border-color:#c7bba6}@media(max-width:650px){#domains,body.kernel-view-active #domains{max-width:calc(100vw - 130px);margin-left:0}}

/* Wide screens expose the approved domain catalog; narrow screens retain the selector. */
#domainTabs{display:none}
@media(min-width:1001px){
 body>header,body.kernel-view-active>header{gap:14px;flex-wrap:wrap;min-height:68px;padding:10px 22px;background:#f8faf5;border-bottom:1px solid #dce4d6}
 body>header>.brand{gap:9px;flex:none;font-size:22px;font-weight:650;letter-spacing:-.6px;padding-right:20px;margin-right:0;border-right:1px solid #dce4d6;line-height:32px}
 body>header>.brand img{width:27px;height:27px}
 #domains{display:none!important}
 #domainTabs:not([hidden]){display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:8px;min-width:160px}
 #domainTabs .domain-tab{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:46px;min-width:112px;max-width:200px;padding:7px 13px;background:transparent;border:1px solid transparent;border-radius:12px;line-height:16px;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
 #domainTabs .domain-tab strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.05px}
 #domainTabs .domain-tab>span{display:flex;align-items:center;gap:5px;font-size:10px;line-height:13px;color:#849083}
 #domainTabs .domain-tab>span::before{content:"";width:5px;height:5px;border-radius:50%;background:#a7b0a4}
 #domainTabs .domain-tab[data-state=connected]>span{color:#688462}
 #domainTabs .domain-tab[data-state=connected]>span::before{background:#6f9868;box-shadow:0 0 0 2px #6f98680b}
 #domainTabs .domain-tab[aria-pressed=true]{border-color:#c3d3ba;background:linear-gradient(145deg,#f5f8ef,#eaf1e3);box-shadow:inset 0 1px 0 #ffffffbd,0 1px 3px #29473206;color:#2b4d36}
 #domainTabs .domain-tab:hover{border-color:#d7e1d0;background:#f0f5e9}
 #domainTabs .domain-tab:active{background:#e6eedf}
 #domainTabs .domain-tab:focus-visible{outline-offset:2px}
 #accountName{font-size:12px;color:#7b8878;max-width:min(25vw,260px)}
 #bind,#logout{font-size:12px;min-height:36px;padding:7px 11px;border-radius:10px;border-color:#d9e2d2;background:transparent}
 #bind{background:#edf3e6;color:#47633e}
 #logout{color:#7b8878}
 #bind:hover,#logout:hover{background:#e7efdf;border-color:#bfceb4}
 
}
@media(prefers-reduced-motion:reduce){#domainTabs .domain-tab{transition:none}}

/* Settings stay beside the object they configure, outside conversation chrome. */
.header-settings{display:inline-grid;place-items:center;flex:none;width:32px;height:34px;padding:7px;border:0;border-radius:8px;color:#73836e;background:transparent}.header-settings svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.header-settings:not(:disabled):hover{background:#e6eddf;color:#31573f}.header-settings:disabled{opacity:.35;cursor:default}.header-settings:focus-visible{outline:2px solid #42664d;outline-offset:2px}
@media(min-width:1001px){
 body>header>.brand{padding-right:0;border-right:0}
 #kernelSettings{margin-left:-9px;margin-right:6px;position:relative}
 #kernelSettings::after{content:"";position:absolute;right:-11px;top:4px;bottom:4px;width:1px;background:#dce4d6}
 #activeDomainSettings{display:none!important}
 #domainTabs .domain-tab-group{display:flex;align-items:center;gap:0;min-width:140px;max-width:240px;padding-right:5px;border:1px solid #e4eadd;border-radius:12px;transition:background-color .15s ease,border-color .15s ease}
 #domainTabs .domain-tab-group[data-active=true]{border-color:#c3d3ba;background:linear-gradient(145deg,#f5f8ef,#eaf1e3);box-shadow:inset 0 1px 0 #ffffffbd,0 1px 3px #29473206}
 #domainTabs .domain-tab-group:hover{border-color:#d7e1d0;background:#f0f5e9}
 #domainTabs .domain-tab,#domainTabs .domain-tab[aria-pressed=true]{flex:1;min-width:100px;max-width:200px;padding-right:7px;border:0;background:transparent;box-shadow:none}
 #domainTabs .domain-settings{width:28px;height:30px;padding:6px;margin-right:1px}
 #domainTabs .domain-settings svg{width:16px;height:16px}
}
@media(max-width:1000px){#kernelSettings{margin-left:-7px;margin-right:0}#activeDomainSettings{margin-left:-7px}header:has(#activeDomainSettings:not([hidden])) #domains{max-width:calc(100vw - 205px)}}
@media(prefers-reduced-motion:reduce){#domainTabs .domain-tab-group{transition:none}}

/* Page mounting does not change a live domain transport's Connected state. */
.domain-view-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;height:100%;padding:28px;color:#506e58;text-align:center}.domain-view-loading strong{font-size:17px;font-weight:600}.domain-view-loading p{margin:10px 0;font-size:13px;color:#83917e}

/* Recovery belongs to its named domain, next to that domain's settings. */
.domain-reconnect{flex:none;font-size:11px;line-height:16px;white-space:nowrap;min-height:30px;padding:5px 7px;border:1px solid #d7dfd0;border-radius:7px;background:#ffffff85;color:#6b785c}.domain-reconnect:not(:disabled):hover{background:#eaf0e2;border-color:#bdcbb1}.domain-reconnect:disabled{opacity:.4;cursor:default}
@media(min-width:1001px){#activeDomainReconnect{display:none!important}#domainTabs .domain-tab-group[data-recovery=true]{max-width:340px;min-width:218px}#domainTabs .domain-reconnect{margin-right:4px}#domainTabs .domain-tab-group[data-state=unavailable] .domain-tab>span{color:#907354}#domainTabs .domain-tab-group[data-state=unavailable] .domain-tab>span::before{background:#b39a78}}
@media(max-width:1000px){#activeDomainReconnect{margin-left:-6px}header:has(#activeDomainReconnect:not([hidden])) #domains{max-width:calc(100vw - 270px)}}

/* domain-menu/1.0: one add/switch location at every viewport size. */
#domainMenu{position:relative;order:-1;flex:none;max-width:min(60vw,320px)}#domainMenu summary{list-style:none;cursor:pointer;padding:9px 12px;border:1px solid #cbd8c5;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#edf3e8}#domainMenu summary::-webkit-details-marker{display:none}#domainMenu summary:focus-visible{outline:2px solid #42664d;outline-offset:2px}.domain-menu-panel{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:min(340px,calc(100vw - 32px));padding:10px;border:1px solid #cbd8c5;border-radius:14px;background:#f8faf5;box-shadow:0 10px 36px #244b3a22;max-height:75dvh;overflow:auto}#domainMenu #domainTabs:not([hidden]){display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0}#domainMenu .domain-tab-group{display:flex;align-items:center;max-width:none;min-width:0;padding:3px;border:1px solid transparent;border-radius:10px}#domainMenu .domain-tab-group[data-active=true]{background:#eaf1e3;border-color:#c3d3ba}#domainMenu .domain-tab{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:none;padding:9px;border:0;text-align:left}#domainMenu .domain-tab strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#domainMenu .domain-tab span{font-size:12px;color:#708268}#domainMenu #bind{display:block;width:100%;margin-top:8px;border-top:1px solid #dce4d6;text-align:left}body>header>#domains,body>header>#activeDomainReconnect,body>header>#activeDomainSettings{display:none!important}
