body:not([data-cloud-state="ready"]) .app-layout,
body:not([data-cloud-state="ready"]) .skip-link,
body:not([data-cloud-state="ready"]) .menu-toggle { display: none; }
.cloud-account { width: min(38rem, calc(100% - 2rem)); margin: 1.5rem auto; padding: 2rem; }
.cloud-account h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; }
.cloud-account p, .cloud-account li, .cloud-account code { overflow-wrap: anywhere; }
.cloud-account form { display: grid; gap: .75rem; margin-top: 1.5rem; }
.cloud-account input { width: 100%; min-height: 2.75rem; }
.cloud-account button { min-height: 2.75rem; }
.cloud-account .error { color: #982828; }
@media (max-width: 480px) { .cloud-account { padding: 1.25rem; margin: 1rem auto; } }

.cloud-tenant { margin: 1rem 0; padding: 1.25rem; }
.cloud-tenant h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); overflow-wrap: anywhere; }
.cloud-tenant li { margin-bottom: .5rem; }
.cloud-tenant summary { min-height: 2.75rem; padding: .5rem 0; cursor: pointer; font-weight: 600; }
.cloud-tenant details code { display: block; padding: .25rem 0; }

.cloud-access-dialog { width: min(38rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; overflow-y: auto; }
.cloud-access-dialog::backdrop { background: rgb(0 35 49 / 55%); }
.cloud-access-dialog form, .cloud-access-dialog fieldset { display: grid; gap: .75rem; }
.cloud-access-dialog fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cloud-access-dialog label { display: grid; gap: .35rem; }
.cloud-access-dialog input, .cloud-access-dialog select { width: 100%; min-height: 2.75rem; }
.cloud-access-dialog p { overflow-wrap: anywhere; }
.cloud-access-dialog button { min-height: 2.75rem; }
.cloud-access-dialog > button { margin-top: .75rem; }
.cloud-access-error { margin: 1rem; color: #982828; }
.app-header { min-height: 56px; }

.cloud-access-launcher { display: none; }
body[data-cloud-access="available"] .cloud-access-launcher { display: inline-flex; }

.cloud-assignment-record { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }

.cloud-history-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .75rem 0; }
.cloud-history-filters label { display: block; margin-bottom: .25rem; }
.cloud-history-filters select { width: 100%; min-width: 0; max-width: 100%; min-height: 2.75rem; }
@media (max-width: 480px) { .cloud-history-filters { grid-template-columns: minmax(0, 1fr); } }