/* Sign-in uses the shared appearance tokens; artwork is decorative. */
.ui-connection { min-height: 100dvh; }
.ui-connection-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(23rem, 1fr); min-height: 100dvh; }
.ui-connection-story { background: #102334; color: #eff5fa; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem); }
.ui-connection .ui-connection-brand { display: inline-flex; gap: .7rem; align-items: center; color: #eff5fa; text-decoration: none; font-size: 1.55rem; font-weight: 700; }
.ui-connection-art { display: block; width: 100%; height: min(48dvh, 30rem); object-fit: contain; margin: 1.5rem 0; }
.ui-connection-story h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 650; line-height: 1.18; max-width: 30rem; }
.ui-connection-story p { color: #bdd0df; max-width: 28rem; margin: 1rem 0 0; line-height: 1.65; }
.ui-connection-form { display: flex; flex-direction: column; align-items: center; padding: 1.5rem clamp(1.25rem, 4vw, 4rem); min-width: 0; }
.ui-connection-toolbar { display: flex; align-items: center; align-self: flex-end; gap: .5rem; font-size: .8rem; margin-bottom: 2rem; }
.ui-connection-toolbar label { font-weight: 400; }
.ui-connection-card { width: min(100%, 26rem); margin-block: auto; padding-block: 2rem; }
.ui-connection-card h2 { font-size: 1.6rem; margin: 0 0 .6rem; }
.ui-connection-card h3 { font-size: 1.2rem; }
.ui-connection-card form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.ui-connection-card input { width: 100%; }
.ui-connection-card details { font-size: .85rem; }
.ui-connection-card summary { cursor: pointer; color: var(--ui-muted); margin-bottom: .7rem; }
.ui-connection-card .ui-private-key, .ui-connection-card li { overflow-wrap: anywhere; }
.ui-connection-card #message { margin: 1rem 0 0; font-size: .9rem; }
.ui-connection-card #message:empty { display: none; }
.ui-connection-card section { border-top: 1px solid var(--ui-border); padding-top: 1rem; margin-top: 1.5rem; }
.ui-connection [hidden] { display: none !important; }
@media (max-width: 800px) {
    .ui-connection-layout { grid-template-columns: 1fr; }
    .ui-connection-story { padding: 1.3rem 1.5rem; gap: 1rem; }
    .ui-connection-art { display: none; }
    .ui-connection-story h1 { font-size: 1.65rem; }
    .ui-connection-story p { margin-top: .5rem; font-size: .85rem; }
    .ui-connection-form { padding: 1rem 1.5rem 2rem; }
    .ui-connection-toolbar { margin-bottom: 0; }
    .ui-connection-card { padding-block: 1.5rem; }
}