/* Compact demo entry uses existing Hithium tokens and the existing eye handler. */
.coord-demo-login { width: 100%; max-width: 390px; margin: 0 auto; }
.coord-demo-login .coord-login-overline { margin: 0 0 8px; color: var(--cx-brand-night); font-size: 14px; font-weight: 700; }
.coord-demo-login h1 { margin: 0; font-size: 28px; line-height: 1.35; color: var(--cx-ink); }
.coord-demo-login #password-login { margin: 20px 0 0; }
.coord-demo-login #password-login-hint { margin: 0 0 20px; color: var(--cx-muted); font-size: 14px; }
.coord-demo-login label { display: block; margin: 0 0 8px; color: var(--cx-ink); font-size: 14px; font-weight: 600; }
.coord-demo-login input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--cx-control); border-radius: var(--tblr-border-radius); color: var(--cx-ink); background: var(--cx-paper); font: 16px var(--cx-font); }
.coord-password-control { position: relative; margin-bottom: 20px; }
.coord-password-control #password { margin: 0; padding-right: 56px; }
.coord-password-control #password-visibility { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--tblr-border-radius); background-color: transparent; color: var(--cx-muted); font-size: 0; cursor: pointer; }
.coord-password-control #password-visibility::before { content: ""; display: block; width: 22px; height: 22px; margin: auto; background: center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526273' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.coord-password-control #password-visibility[aria-pressed="true"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526273' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E"); }
.coord-password-control #password-visibility:hover { background-color: var(--cx-brand-soft); }
.coord-demo-login button[type="submit"] { display: block; width: 100%; min-height: 48px; border: 1px solid var(--cx-brand); border-radius: var(--tblr-border-radius); color: var(--cx-on-brand); background: var(--cx-brand); font: 600 15px var(--cx-font); }
.coord-demo-login button[type="submit"]:hover { background: var(--cx-brand-hover); }
.coord-demo-login button[type="submit"]:disabled { opacity: .65; cursor: wait; }
.coord-employee-login { margin: 16px 0 0; border-top: 1px solid var(--cx-rule); }
.coord-employee-login summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 0; color: var(--cx-brand); font-size: 14px; cursor: pointer; list-style: none; }
.coord-employee-login summary::-webkit-details-marker { display: none; }
.coord-employee-login summary::after { content: "+"; font-size: 20px; }
.coord-employee-login[open] summary::after { content: "×"; }
.coord-employee-login .coord-employee-hint { color: var(--cx-muted); font-size: 13px; }
.coord-demo-login #auth-status { margin: 8px 0 0; min-height: 20px; font-size: 14px; }
.cx-environment [data-coord-demo-banner] { font-size: 13px; line-height: 1.55; }
.cx-footer:has([data-judge-boundary]) { flex-wrap: wrap; }
.cx-footer .coord-demo-footer-boundary { flex-basis: 100%; max-width: none; margin: 0; font-size: 12px; line-height: 1.6; }
.coord-demo-quota { width: max-content; max-width: 100%; margin: 12px 0 16px auto; grid-column: 1 / -1; justify-self: end; white-space: nowrap; text-align: right; color: var(--cx-muted); font-size: 14px; }
.coord-demo-quota strong { color: var(--cx-brand-night); font-variant-numeric: tabular-nums; }

@media (min-width: 701px) {
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-layout { min-height: calc(100dvh - 120px); }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-form { padding: 48px 56px; justify-content: center; }
}
@media (max-width: 700px) {
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-layout { display: block; min-height: 0; margin: 0; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) #main-content { padding: 0 0 16px; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-brand { min-height: 0; padding: 20px 24px; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-brand > img { width: 130px; height: auto; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-brand > :not(img) { display: none; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-brand > .cx-building { display: none; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-login-form { padding: 28px 24px 16px; min-height: 0; border: 0; border-radius: 0; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-footer { margin-top: 0; margin-bottom: 0; gap: 6px 12px; padding: 12px 24px; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-footer span { max-width: 100%; font-size: 12px; }
  body.l8-login-page:is([data-environment="demo"], [data-environment="dev"]) .cx-footer img { width: 70px; }
}