/* Shared foundation for the standalone public and login screens. */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
main, header, nav, form, label, .grid > *, .brand > * { min-width: 0; }
h1, h2, h3, p, a, strong, .card, .session, .brand { overflow-wrap: anywhere; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font-size: 16px;
}
button, .button { min-height: 44px; white-space: normal; }
.grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.mark { flex-shrink: 0; }
header, main { padding: 16px; }
.wrap { margin: 16px auto; padding: 16px; }
.panel, .card, .session { padding: 14px; }
.grid { gap: 12px; }
label { gap: 5px; }
.dynamic { margin-top: 12px; }
.hero { padding: 24px 20px; }
.login { padding: 24px; }
.login .brand { margin-bottom: 18px; }
.login .intro { margin-bottom: 16px; }
.login .field { margin-bottom: 12px; }
main.card { margin: 20px auto; }
h1 { margin-top: 0; margin-bottom: 10px; }
h2 { margin-top: 18px; margin-bottom: 10px; }
h3, p { margin-top: 8px; margin-bottom: 10px; }
button { margin-top: 12px; }
@media (min-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 36px; padding: 7px 10px; }
    button, .button { min-height: 36px; padding: 8px 14px; }
    .login .field input { min-height: 36px; padding: 7px 10px; }
    .login .button { min-height: 36px; }
    .grid { gap: 10px; }
}
@media (max-width: 639px) {
    body { min-height: 100svh; }
    header { flex-direction: column; gap: 14px; }
    header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    header nav a { display: inline-flex; align-items: center; min-height: 44px; }
    header, main.wrap { padding: 16px; }
    .wrap { margin: 16px auto; }
    .panel, .card, .session { padding: 12px; }
    main.card { margin: 16px; }
    .login { padding: 20px; }
    .hero { padding: 24px 16px; }
    h1 { font-size: clamp(24px, 6vw, 32px); }
    .grid { grid-template-columns: minmax(0, 1fr); }
    .sessions label { display: grid; gap: 8px; }
    .sessions button { width: 100%; }
    .remember { min-height: 44px; }
}