/* Shared responsive layout. Keep legacy artwork and saved branding; replace geometry. */
*, *::before, *::after { box-sizing: border-box; }
body { font-size: 15px; line-height: 1.55; }
body .center-container { width: min(1280px, calc(100% - 32px)); min-width: 0; }
body .border-container { overflow: visible; }
body .header.brand { width: min(1280px, calc(100% - 32px)); min-height: 90px; height: auto; padding: 16px 24px; gap: 20px; font-size: clamp(20px, 3vw, 28px); }
body .brand img { max-width: min(240px, 35%); max-height: 64px; }
body .brand span { min-width: 0; overflow-wrap: anywhere; }
body .page-title { padding: 16px 24px; font-size: clamp(20px, 3vw, 28px); }

/* Site navigation occupies its own row instead of overlapping feature navigation. */
body .menu { position: static; width: auto; height: auto; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; box-shadow: none; z-index: auto; }
body .menu ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body .menu li { width: auto; height: auto; margin: 0; padding: 0; border-radius: 6px; z-index: auto; }
body .menu li a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; font-size: 14px; line-height: 1.3; text-shadow: none; border-radius: 6px; }
body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible { outline: 3px solid #3273dc; outline-offset: 3px; }

/* Every feature starts below site navigation and can shrink with the viewport. */
body .docs-panel > *, body .files-panel, body .settings-panel, body .viewport { min-width: 0; }
body .docs-panel article { overflow-wrap: anywhere; }
body .docs-panel pre { max-width: 100%; font-size: 13px; }
body .docs-panel article ul { list-style: disc; padding-left: 24px; }
body .docs-panel article ol { list-style: decimal; padding-left: 24px; }
body .docs-panel article li { list-style: inherit; margin-bottom: 6px; }
body .files-panel, body .settings-panel, body div.viewport { width: auto; max-width: none; margin: 0; padding: 28px; }
body .settings-panel { min-height: 0; }
body .files-list li { overflow-wrap: anywhere; }
body .settings-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .settings-actions { flex-wrap: wrap; }
body .settings-panel fieldset { min-width: 0; }
body div.tab-container { width: auto; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
body div.tab-container div.tab { float: none; width: auto; height: auto; margin: 0; padding: 8px 14px; min-height: 44px; }
body #users { width: auto; }
body #users .users { width: auto; min-height: 58px; height: auto; padding: 12px 16px; overflow-wrap: anywhere; }
body #users .users > span:first-of-type { display: block; margin-right: 80px; }
body #users .edit-user, body #users .delete-user { background-position: 0 0; cursor: pointer; }
body #users .last-login { float: none; display: block; margin: 6px 80px 0 0; }

/* Form fields stack on phones and keep labels aligned on larger screens. */
body .dialog-center, body .registration-form { width: min(560px, calc(100% - 32px)); margin: 28px auto; padding: 24px; }
body :is(.dialog-center, .registration-form, #save-your-account) .clear { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: start; margin: 12px 0; }
body :is(.dialog-center, .registration-form, #save-your-account) label { float: none; width: 170px; height: auto; margin: 0; white-space: normal; text-align: left; }
body :is(.dialog-center, .registration-form, #save-your-account) input:not([type=hidden]):not([type=checkbox]):not([type=image]),
body :is(.dialog-center, .registration-form, #save-your-account) textarea,
body :is(.dialog-center, .registration-form, #save-your-account) select { float: none !important; width: min(100%, 340px); min-width: 0; margin: 0; padding: 9px 10px; font-size: 16px; }
body .registration-form .submit-btn { position: static; margin: 20px 0; }
body .save-changes-btn { margin: 16px 0; }
body .footer { width: auto; height: auto; padding: 16px; margin: 0; }

/* Legacy account and management panels also need their fixed dimensions released. */
body #save-your-account { float: none; width: min(100%, 680px); height: auto; margin: 20px 0; padding: 20px; }
body div.assistance { float: none; width: auto; height: auto; margin: 0; padding: 20px; text-align: left; }
body .viewport .description { width: auto; height: auto; margin: 12px 0; padding: 0; }
body .viewport .mini-menu { float: none; width: auto; height: auto; margin: 0 0 8px; padding: 0; text-align: left; }

/* Both Files and original User drawers fit the viewport and scroll independently. */
body .cyborg { position: fixed; top: 12px; width: min(440px, calc(100vw - 24px)); max-width: calc(100% - 24px); height: auto; max-height: calc(100dvh - 24px); overflow: auto; z-index: 1100; }
body .cyborg:empty { display: none; }
body .cyborg-overlay { position: fixed; inset: 0; width: auto; height: auto; z-index: 1099; }
body .cyborg input:not([type=hidden]):not([type=checkbox]), body .cyborg textarea, body .cyborg select { max-width: 100%; font-size: 16px; }
body .cyborg .clear > label { float: none; text-align: left; width: auto; height: auto; white-space: normal; }
body .cyborg .clear > :is(input:not([type=hidden]), textarea, select) { float: none; width: 100%; margin: 4px 0 12px; }
body .cyborg .clear > input[type=checkbox] { width: auto; }
body .cyborg .file-user { overflow-wrap: anywhere; }
body .files-panel ~ .cyborg { top: 12px; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }

@media (max-width: 600px) {
    body .center-container, body .header.brand { width: 100%; }
    body .header.brand { min-height: 72px; padding: 12px 16px; gap: 12px; }
    body .page-title { padding: 14px 16px; }
    body .menu { padding: 10px; }
    body .menu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .menu li a { padding: 10px 8px; }
    body .docs-panel, body .files-panel, body .settings-panel, body div.viewport { padding: 20px 16px; }
    body .settings-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .settings-panel fieldset { padding: 16px; }
    body :is(.dialog-center, .registration-form, #save-your-account) label { width: 100%; }
    body :is(.dialog-center, .registration-form, #save-your-account) input:not([type=hidden]):not([type=checkbox]):not([type=image]),
    body :is(.dialog-center, .registration-form, #save-your-account) textarea,
    body :is(.dialog-center, .registration-form, #save-your-account) select { width: 100%; }
}

/* User-type filters must grow with wrapped labels; the original 32px strip
 * and eight-pixel borders otherwise cut through the responsive tabs. */
body .manage-users .tab-container { height: auto; min-height: 0; border: 0; background: transparent !important; align-items: stretch; }
body .manage-users .tab-container .tab { display: flex; align-items: center; justify-content: center; max-width: 100%; border: 1px solid #555 !important; border-radius: 6px; line-height: 1.4; letter-spacing: normal; font-size: 14px; overflow-wrap: anywhere; }
body .manage-users .tab.checked { outline: 2px solid #333; outline-offset: 1px; }
body .manage-users #users { height: auto; max-height: 65vh; border: 1px solid #ddd; }
body .manage-users #users .users { display: flow-root; }
body .manage-users #users .users.hide { display: none; }
body .manage-users #users .users > span:first-of-type { margin-left: 94px; margin-right: 0; }
body .manage-users #users .last-login { clear: both; margin: 6px 0 0 94px; }
body .users-empty { padding: 16px; }
@media (max-width: 600px) { body .manage-users .tab-container .tab { flex: 1 1 120px; } }