/* Authentication extends the existing Hilo console's type and color system. */
html[data-auth-loading] body>header,html[data-auth-loading] body>main,html[data-auth-loading] body>footer{display:none}
.auth-loading{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;text-align:center}
html:not([data-auth-loading]) .auth-loading{display:none}
.account-controls{display:flex;align-items:center;gap:14px}
.account-controls>button{white-space:nowrap;background:transparent;border-color:var(--line);min-height:40px}
#account-button{min-width:36px;min-height:36px}
.signin-page{min-height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
body.signin-page>header{width:100%;margin:0 auto;justify-content:space-between}
body.signin-page main.signin-main{width:100%;max-width:504px;padding:48px 32px 40px;margin:0 auto;flex:1}
.signin-intro h1{font-size:42px;line-height:1.08;max-width:420px;margin:0 0 16px}
.signin-intro p{font-size:16px;max-width:390px;line-height:1.65}
.signin-panel{margin-top:28px;min-height:160px}
.signin-panel #signin-status:not(:empty){margin:20px 0;font-size:14px;color:var(--ink)}
.signin-help{font-size:12px;margin-top:28px}
body.signin-page footer.signin-footer{width:100%;max-width:none;margin:0;display:flex;justify-content:center;gap:28px;padding:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.signin-footer a{padding:12px 0}
.signin-panel :is(.cl-rootBox,.cl-cardBox){width:100%;max-width:100%}
.keys-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.keys-heading h2{margin:0}
.keys-heading button{margin:0;width:auto}
.keys-dialog #create-key{margin-top:22px}
.keys-dialog #key-secret{font-family:ui-monospace,monospace;font-size:13px}
.key-list{padding:0;list-style:none;margin:0}
.key-list li{display:flex;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:16px 0}
.key-list li>div{min-width:0}
.key-list strong{font-size:13px;overflow-wrap:anywhere}
.key-list span{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.key-list button{width:auto;margin:0;color:var(--red)}
@media(max-width:800px){header .account-controls{margin-left:auto}body.signin-page main.signin-main{padding-top:40px}.signin-page .dashboard-preferences{width:auto;padding-bottom:0}.signin-page header{gap:16px}}
@media(max-width:560px){body.signin-page main.signin-main{padding:40px 24px 32px}.signin-intro h1{font-size:40px}.signin-page header{flex-wrap:wrap}.signin-page .dashboard-preferences{margin-left:auto}.account-controls{gap:8px}.account-controls>button{padding:9px 11px}.keys-dialog{padding:24px}}

/* Page-local overrides: never change the shared Clerk instance or other apps. */
.signin-page .hilo-signin .cl-cardBox{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.signin-page .hilo-signin .cl-card{padding:0;gap:24px;background:transparent;box-shadow:none}
.signin-page .hilo-signin .cl-socialButtons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.signin-page .hilo-signin :is(.cl-socialButtonsBlockButton,.cl-socialButtonsIconButton){grid-column:auto;min-width:0;min-height:46px;border:1px solid var(--control-line);border-radius:8px;padding:12px 16px;background:var(--paper);background-image:none;box-shadow:none;color:var(--ink)}
.signin-page .hilo-signin :is(.cl-socialButtonsBlockButton,.cl-socialButtonsIconButton):hover{background:var(--surface);border-color:var(--muted)}
.signin-page .hilo-signin .cl-socialButtonsBlockButtonText{font-size:14px;font-weight:500}
.signin-page .hilo-signin .cl-dividerRow{margin:0}
.signin-page .hilo-signin .cl-form{gap:20px}
.signin-page .hilo-signin .cl-formFieldLabel{margin:0;font-size:13px;color:var(--ink)}
.signin-page .hilo-signin .cl-formFieldInput{margin:0;min-height:46px;border:1px solid var(--control-line);border-radius:8px;padding:11px 12px;background:var(--paper);box-shadow:none;color:var(--ink);font-size:16px}
.signin-page .hilo-signin .cl-formButtonPrimary{min-height:46px;border:1px solid var(--purple);border-radius:8px;background:var(--purple);background-image:none;box-shadow:none;color:#fff;font-size:14px;font-weight:600}
.signin-page .hilo-signin .cl-formButtonPrimary:hover{background:var(--purple-hover);border-color:var(--purple-hover)}
.signin-page .hilo-signin :is(.cl-formFieldInput,.cl-button):focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.signin-page .hilo-signin .cl-footer{padding:20px 0 0;background:transparent;background-image:none;border:0;border-radius:0}
.signin-page .hilo-signin .cl-footerAction{justify-content:center;gap:6px}
.signin-page .hilo-signin :is(.cl-footerActionText,.cl-footerActionLink){font-size:13px}
.signin-page .hilo-signin .cl-footerActionLink{color:var(--purple);font-weight:600}

@media(max-width:560px){.signin-page .hilo-signin .cl-socialButtons{grid-template-columns:1fr}}
:root[data-theme=dark] .signin-page .hilo-signin .cl-formButtonPrimary{color:#0d1133}

.auth-loading>img{background:#fff;border-radius:6px;padding:4px;box-sizing:content-box}
.workspace-connection-line{width:118px;height:2px;background:var(--purple,#6c5cff);transform-origin:left;animation:workspace-connect 1.5s ease-in-out 3}
.workspace-arrival-mark{position:fixed;z-index:1000;pointer-events:none;transform-origin:top left;background:#fff;border-radius:6px;object-fit:contain}
@keyframes workspace-connect{0%,100%{transform:scaleX(.2);opacity:.3}50%{transform:scaleX(1);opacity:.8}}
@media(prefers-reduced-motion:reduce){.workspace-connection-line{animation:none;opacity:.4}}

/* Keep workspace utilities together; sign-in and other apps retain their headers. */
body.dashboard-page>header{padding:12px 5%;min-height:80px;column-gap:32px;row-gap:0;flex-wrap:nowrap}
.dashboard-page>header .brand{padding:0}
.dashboard-page>header nav a.nav{padding:20px 0}
.dashboard-page .account-controls{position:relative;margin-left:auto;display:block;flex:0 0 auto}
.dashboard-page #account-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:2px;border:0;border-radius:50%;background:var(--wash);color:var(--purple);font-size:14px;font-weight:600}
.dashboard-page #account-button:hover{background:var(--line)}
.account-avatar img{width:40px;height:40px;object-fit:cover;border-radius:50%}
.account-avatar img[hidden],.account-avatar span[hidden]{display:none}
.account-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:100;width:304px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 92px);overflow:auto;overscroll-behavior:contain;border:0;border-radius:12px;padding:8px;background:var(--paper);color:var(--ink);box-shadow:0 12px 36px #11133024}
.account-menu[hidden]{display:none}
.account-identity{display:grid;gap:3px;padding:12px 12px 16px;overflow-wrap:anywhere}
.account-identity strong{font-size:15px;line-height:1.4;font-weight:650}
.account-identity>span{font-size:12px;line-height:1.4;color:var(--muted)}
.account-menu-actions{display:grid}
.account-menu-actions>button,.account-menu>.account-sign-out{width:100%;min-height:44px;padding:10px 12px;border:0;background:transparent;text-align:left;font-size:13px;font-weight:500;color:var(--ink)}
.account-menu-actions>button[hidden],.account-menu>.account-sign-out[hidden]{display:none}
.account-menu-actions>button:hover,.account-menu>.account-sign-out:hover{background:var(--wash);color:var(--purple)}
.account-menu .dashboard-preferences{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center;margin:8px 0;padding:16px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.account-preference-label{font-size:12px;font-weight:500}
.account-menu .preference-switch{width:max-content}
.account-menu .preference-switch button{width:36px;min-height:40px}
.account-menu .hint{padding:0 12px;font-size:12px}
:root[data-theme=dark] .account-menu{box-shadow:0 12px 36px #0008;background:var(--surface)}
@media(max-width:700px){
 body.dashboard-page>header{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px 20px 0;gap:6px 16px}
 .dashboard-page>header .brand{grid-column:1;grid-row:1;justify-self:start}
 .dashboard-page>header .account-controls{grid-column:2;grid-row:1}
 .dashboard-page>header nav{grid-column:1/-1;grid-row:2;order:0;gap:26px;width:100%;margin:0}
 .dashboard-page>header nav a.nav{padding:14px 0}
 .dashboard-page>header nav>a:last-child{margin-left:auto}
 .account-menu{max-height:calc(100dvh - 88px)}
 .account-menu .dashboard-preferences{flex-basis:auto;order:0;justify-content:normal}
 .account-menu .preference-switch button{min-height:44px}
}

#beta-invite-form{margin:24px 0 28px}
#beta-invite-form[hidden]{display:none}
#beta-invite-form input{font-size:16px;min-height:46px}
#beta-invite-form button{min-height:46px;width:100%;margin-top:12px}
#beta-invite-error{color:var(--red)}
#signin-account{margin-top:24px}
#beta-dialog{max-height:calc(100dvh - 48px);overflow:auto}
#beta-dialog h3{margin:28px 0 12px;font-size:16px}
#beta-dialog .key-list{max-height:240px;overflow:auto}
#beta-dialog .key-list li>span{font-size:12px;color:var(--muted)}
#invite-secret-box{margin-top:24px}
#beta-usage{line-height:1.6}
#beta-dialog{box-sizing:border-box;overscroll-behavior:contain;margin:24px auto}

/* A small invitation to speak, available throughout the signed-in workspace. */
.feedback-launcher{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 16px;border:1px solid var(--purple);border-radius:28px;background:var(--paper);color:var(--purple)}
.feedback-launcher[hidden]{display:none}
.feedback-launcher:hover{background:var(--wash)}
.feedback-launcher svg,.feedback-dialog button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.feedback-launcher-note{padding-left:10px;border-left:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:500}
body.dashboard-page{padding-bottom:76px}
.feedback-dialog{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:24px auto;padding:32px;border:0;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 20px 72px rgb(13 17 51 / .22);overflow:auto;overscroll-behavior:contain}
.feedback-dialog::backdrop{background:rgb(13 17 51 / .48)}
body:has(.feedback-dialog[open]){overflow:hidden}
.feedback-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:12px}
.feedback-heading h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:36px;line-height:1.05;letter-spacing:-.025em;margin:0;text-wrap:balance}
.feedback-heading button{display:grid;place-items:center;width:44px;min-height:44px;padding:10px;flex-shrink:0}
.feedback-heading h2{min-width:0;overflow-wrap:anywhere}
.feedback-context{margin-top:24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feedback-context>span{font-size:11px;color:var(--muted)}
.feedback-context strong{display:block;font-size:14px;line-height:1.5;margin:6px 0;overflow-wrap:anywhere}
.feedback-context p{font-size:12px}
.feedback-voice-mark{display:grid;place-items:center;margin:24px auto 16px;width:72px;height:72px;color:var(--purple)}
.feedback-voice-mark svg{width:64px;height:64px;stroke:currentColor;fill:none;stroke-width:5;stroke-linecap:round}
.feedback-expectation{font-size:15px;color:var(--ink);text-align:center}
.feedback-privacy{font-size:12px;text-align:center;margin:12px 0 20px;line-height:1.7}
#feedback-quota{text-align:center}
#start-feedback{min-height:48px}
#feedback-status:not(:empty){font-size:13px;margin-top:20px;color:var(--ink)}
#feedback-error{font-size:13px;color:var(--red);margin-top:16px}
.feedback-transcript{max-height:300px;overflow:auto;margin:20px 0;min-height:90px}
.feedback-turn{padding:12px 0;border-bottom:1px solid var(--line)}
.feedback-turn strong{font-size:11px;color:var(--purple)}
.feedback-turn p{font-size:14px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}
.feedback-live-actions{display:flex;gap:12px}
.feedback-live-actions button{flex:1;min-height:46px}
#end-feedback{color:var(--red)}
#feedback-audio{max-width:100%;margin-bottom:16px}
#feedback-finished>p{margin:20px 0}
#feedback-finished .primary{margin-top:20px}
.feedback-inbox{width:min(720px,calc(100% - 32px))}
.feedback-inbox-entry summary>strong,.feedback-inbox-entry summary>span{display:block}
.feedback-inbox-entry summary>span{font-size:12px;color:var(--muted);font-weight:400;margin-top:6px;overflow-wrap:anywhere}
.feedback-inbox-summary{color:var(--ink);margin-bottom:12px}
.feedback-context-text{white-space:pre-wrap;overflow-wrap:anywhere}
#feedback-inbox-more{margin-top:20px}
@media(max-width:560px){.feedback-launcher{right:16px;bottom:max(16px,env(safe-area-inset-bottom));min-height:46px}.feedback-dialog{padding:24px}.feedback-heading h2{font-size:32px}.feedback-transcript{max-height:240px}}