@import url('/base.css?v=motion-20261019');

.workspace-context{min-width:0}
.workspace-context>.muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-context>.badge{flex-shrink:0}
.account-menu{position:relative;flex:0 1 auto;min-width:0;max-width:60%}
.account-menu summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:9px;cursor:pointer;list-style:none;font-size:13px;touch-action:manipulation}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary:hover,.account-menu[open] summary{background:#ecefe4;border-color:#d9d7cb}
.account-menu summary:focus-visible{outline:3px solid #78974d;outline-offset:2px}
.account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu .badge,.account-chevron{flex-shrink:0}
.account-chevron{width:16px;height:16px;color:var(--muted)}
.account-menu[open] .account-chevron{transform:rotate(180deg)}
.account-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:4;width:160px;max-width:calc(100vw - 32px);padding:6px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgb(20 34 30 / .1)}
.account-dropdown button{width:100%;min-height:44px;border:0;text-align:left}

#sync-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 24px;background:#f5efdc;color:#6b5424;border-bottom:1px solid #dfd1ae;font-size:13px}
#sync-status[hidden]{display:none}
#sync-status button{flex-shrink:0;min-height:44px}

.invitation-entry{margin-top:20px}
.invitation-entry summary{cursor:pointer;padding:12px 0;min-height:44px;color:var(--muted)}
.invitation-entry form{margin-top:12px}
.account-provider{display:block;padding:8px 10px;overflow-wrap:anywhere;color:var(--muted)}

.badge.stopping{color:#9a6825;background:#fff5e2}
.image-ref{min-width:170px}
#notice{max-width:min(420px,calc(100vw - 32px))}
#notice:not(.show){display:none}
.recovery-card{width:100%;max-width:580px;margin:60px auto}
.recovery-card h1{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:0 0 18px}

#usage-period-form{align-items:end}
#usage-period-form label{margin:0;max-width:100%}
#billing-period-form{align-items:flex-end}
#billing-period-form label{margin:0;max-width:100%}
#billing-period-form button{min-height:42px}
#audit-period-form{align-items:flex-end}
#audit-period-form label{margin:0;max-width:100%}
#audit-period-form button{min-height:42px}
.check-label{display:flex;align-items:flex-start;gap:10px;line-height:1.6}
.check-label input{width:18px;height:18px;flex-shrink:0;margin-top:2px}
#usage-period-form a{padding:12px 8px;font-size:13px}
.usage-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.usage-metrics .metric{overflow-wrap:anywhere}
@media(max-width:700px){.usage-metrics{grid-template-columns:1fr}}

/* Small, state-change motion keeps navigation legible without animating polling refreshes. */
nav button{transition:background-color 160ms ease,color 160ms ease,transform 160ms ease}
nav button:hover{background:#f0eee6;transform:translateX(2px)}
button{transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms ease,box-shadow 160ms ease}
button.primary:hover{box-shadow:0 5px 14px rgb(49 87 68 / .18);transform:translateY(-1px)}
main.page-enter{animation:page-arrive 240ms cubic-bezier(.2,.7,.2,1) both}
@keyframes page-arrive{from{opacity:.72;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){main.page-enter{animation:none}nav button,button{transition:none}}


/* Carry the marketing site's editorial type hierarchy into the workspace. */
.page-head h1,.login h1,.recovery-card h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em}
.page-head h1{font-size:clamp(32px,3vw,40px);line-height:1.05;margin-bottom:9px}
.panel-head h2,.card>h2{font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:400;letter-spacing:-.025em}
.metric{font-family:Georgia,'Times New Roman',serif;font-size:36px;font-weight:400;letter-spacing:-.04em}
.topbar{position:sticky;top:0;z-index:3}
nav button.active{box-shadow:inset 2px 0 #315744}
button{border-radius:6px}
@media(max-width:700px){.page-head h1{font-size:30px}.metric{font-size:31px}.topbar{top:0}}