/* ProStroy skin extension. Elastic owns the responsive navigation and widgets. */
:root {
    --ps-bg: #f6f8fc;
    --ps-surface: #ffffff;
    --ps-sidebar: #f6f8fc;
    --ps-rail: #f6f8fc;
    --ps-hover: #e8eef7;
    --ps-selected: #d3e3fd;
    --ps-read: #f2f6fc;
    --ps-unread: #ffffff;
    --ps-text: #3c4043;
    --ps-strong: #1f1f1f;
    --ps-muted: #5f6368;
    --ps-border: #e3e7ed;
    --ps-border-strong: #c4c7c5;
    --ps-accent: #0b57d0;
    --ps-accent-hover: #0842a0;
    --ps-accent-soft: #d3e3fd;
    --ps-compose: #c2e7ff;
    --ps-compose-hover: #b3dffb;
    --ps-compose-text: #001d35;
    --ps-on-accent: #ffffff;
    --ps-success: #24825d;
    --ps-error: #b74350;
    --ps-warning: #926216;
    --ps-focus: #0b57d0;
    --ps-focus-shadow: rgba(11, 87, 208, .14);
    --ps-shadow: 0 16px 48px rgba(31, 31, 31, .07);
    --ps-radius: 8px;
    color-scheme: light;
}

[data-bs-theme="dark"] {
    --ps-bg: #111722;
    --ps-surface: #182131;
    --ps-sidebar: #151e2d;
    --ps-rail: #111927;
    --ps-hover: #222e42;
    --ps-selected: #263f65;
    --ps-read: #1b2535;
    --ps-unread: #1b2539;
    --ps-text: #d6deec;
    --ps-strong: #edf2fc;
    --ps-muted: #9baac1;
    --ps-border: #2a3549;
    --ps-border-strong: #3c4961;
    --ps-accent: #a8c7fa;
    --ps-accent-hover: #c2d7fb;
    --ps-accent-soft: #263f65;
    --ps-compose: #004a77;
    --ps-compose-hover: #0a5b8c;
    --ps-compose-text: #c2e7ff;
    --ps-on-accent: #062e6f;
    --ps-success: #6ed3a5;
    --ps-error: #ff9ba5;
    --ps-warning: #e9bc73;
    --ps-focus: #a8c7fa;
    --ps-focus-shadow: rgba(168, 199, 250, .18);
    --ps-shadow: 0 16px 48px rgba(0, 0, 0, .18);
    color-scheme: dark;
}

:root body {
    color: var(--ps-text);
    background: var(--ps-bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

:root body #layout {
    background: var(--ps-bg);
}

:root body #layout > div {
    border-color: var(--ps-border);
}

:root body #layout-sidebar {
    background: var(--ps-sidebar);
}

:root body #layout-list,
:root body #layout-content {
    background: var(--ps-surface);
}

:root body #layout > div > .header,
:root body #layout > div > .footer {
    color: var(--ps-text);
    background: var(--ps-surface);
    border-color: var(--ps-border);
    font-weight: 500;
}

:root body #layout > div > .header {
    align-items: center;
    min-height: 64px;
    height: 64px;
    line-height: 1.4;
}

:root body #layout > div > .header a.button {
    color: var(--ps-muted);
}

:root body a:focus-visible,
:root body button:focus-visible,
:root body input:focus-visible,
:root body select:focus-visible,
:root body textarea:focus-visible {
    outline: 2px solid var(--ps-focus);
    outline-offset: 2px;
}

:root body :is(.form-control, .custom-select, .input-group-text, .multi-input) {
    color: var(--ps-text);
    background-color: var(--ps-surface);
    border-color: var(--ps-border-strong);
    border-radius: var(--ps-radius);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

:root body :is(input.form-control, select.custom-select) {
    min-height: 40px;
}

:root body :is(.form-control, .custom-select, .multi-input):focus,
:root body .multi-input.focus {
    color: var(--ps-text);
    background-color: var(--ps-surface);
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 3px var(--ps-focus-shadow);
}

:root body .form-control::placeholder {
    color: var(--ps-muted);
    opacity: .85;
}

:root body .btn {
    border-radius: var(--ps-radius);
    min-height: 40px;
    font-weight: 600;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

:root body :is(.btn-primary, .btn.btn-primary) {
    color: var(--ps-on-accent);
    background: var(--ps-accent);
    border-color: var(--ps-accent);
}

:root body .btn-primary:not(:disabled):hover,
:root body .btn-primary:not(:disabled):focus {
    color: var(--ps-on-accent);
    background: var(--ps-accent-hover);
    border-color: var(--ps-accent-hover);
}

:root body .btn-secondary {
    color: var(--ps-text);
    background: var(--ps-surface);
    border-color: var(--ps-border-strong);
}

:root body .btn-secondary:not(:disabled):hover {
    color: var(--ps-strong);
    background: var(--ps-hover);
    border-color: var(--ps-border-strong);
}

:root body .menu.toolbar a {
    color: var(--ps-muted);
    border-radius: 6px;
    transition: color 140ms ease, background-color 140ms ease;
}

:root body .menu.toolbar a:not(.disabled):hover,
:root body .menu.toolbar a:not(.disabled):focus-visible {
    color: var(--ps-accent);
    background-color: var(--ps-selected);
}

:root body .menu.toolbar a.selected {
    color: var(--ps-accent);
    background-color: var(--ps-selected);
}

:root body .menu.pagenav,
:root body .menu.pagenav a,
:root body .menu.pagenav .pagenav-text {
    color: var(--ps-muted);
}

:root body :is(.popover, .ui-dialog, .popupmenu .listing) {
    color: var(--ps-text);
    background-color: var(--ps-surface);
    border-color: var(--ps-border);
}

:root body .popover {
    border-radius: 12px;
    box-shadow: var(--ps-shadow);
}

:root body .listing li,
:root body .listing tbody td {
    border-color: var(--ps-border);
}

:root body .listing li > a,
:root body .listing tbody td {
    color: var(--ps-text);
}

:root body .listing li.selected > a,
:root body .listing tr.selected td {
    color: var(--ps-accent);
    background: var(--ps-selected);
}

:root body .listing li > a:focus-visible {
    outline: 2px solid var(--ps-focus);
    outline-offset: -3px;
}

/* Sidebar: keep native folder IDs, nesting, keyboard handling and counters. */
:root body #folderlist-content {
    padding: 4px 12px 12px;
}

:root body #mailboxlist li.mailbox {
    border-bottom: 0;
    margin: 2px 0;
    border-radius: 24px;
}

:root body #mailboxlist li.mailbox > a {
    min-height: 44px;
    line-height: 44px;
    border-radius: 24px;
    color: var(--ps-text);
    transition: color 140ms ease, background-color 140ms ease;
}

:root body #mailboxlist li.mailbox > a:hover {
    background: var(--ps-hover);
}

:root body #mailboxlist li.mailbox.selected > a {
    color: var(--ps-accent);
    background: var(--ps-selected);
    font-weight: 600;
}

:root body #mailboxlist li.mailbox > a::before {
    color: var(--ps-muted);
    font-size: 15px;
    line-height: 44px;
}

:root body #mailboxlist div.treetoggle {
    height: 44px;
    line-height: 44px;
}

:root body #mailboxlist li.mailbox.selected > a::before {
    color: var(--ps-accent);
}

:root body #mailboxlist li.mailbox .unreadcount {
    top: 12px;
    right: 4px;
    margin: 0;
    padding: 0 6px;
    min-width: 22px;
    border-radius: 6px;
    color: var(--ps-accent);
    background: var(--ps-accent-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
}

:root body .ps-sidebar-compose {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    margin: 16px 16px 12px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--ps-compose);
    color: var(--ps-compose-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

:root body .ps-sidebar-compose:hover,
:root body .ps-sidebar-compose:focus-visible {
    color: var(--ps-compose-text);
    background: var(--ps-compose-hover);
    border-color: transparent;
    text-decoration: none;
}

:root body .ps-sidebar-compose svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

:root body.ps-enhanced-mail #layout-sidebar > .header {
    padding: 12px 16px;
    justify-content: flex-start;
    background: var(--ps-sidebar);
}

:root body #layout-sidebar .header-title.username {
    min-width: 0;
    margin: 0;
    text-align: left;
}

:root body .ps-account {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: 20px 16px;
    column-gap: 10px;
    align-items: center;
    min-width: 0;
    text-align: left;
    line-height: 1.3;
}

:root body .ps-account-avatar,
:root body .ps-account .avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ps-border);
    border-radius: 10px;
    color: var(--ps-accent);
    background: var(--ps-accent-soft);
    font-size: 14px;
    font-weight: 700;
}

:root body .ps-account-name,
:root body .ps-account-domain {
    grid-column: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root body .ps-account-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
}

:root body .ps-account-name {
    grid-row: 1;
    color: var(--ps-strong);
    font-size: 13px;
    font-weight: 650;
}

:root body .ps-account-domain {
    grid-row: 2;
    color: var(--ps-muted);
    font-size: 11px;
    font-weight: 400;
}

:root body.ps-enhanced-mail #layout-sidebar > .footer.small {
    height: auto;
    min-height: 72px;
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--ps-sidebar);
    font-size: 12px;
    line-height: 1.4;
}

:root body #quotadisplay {
    color: var(--ps-muted);
    font-size: 11px;
}

:root body .ps-sync {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ps-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
}

:root body .ps-sync::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

:root body .ps-sync[data-state="ok"]::before {
    color: var(--ps-success);
}

:root body .ps-sync[data-state="error"] {
    color: var(--ps-error);
}

:root body .ps-sync[data-state="offline"] {
    color: var(--ps-warning);
}

:root body .ps-sync[data-state="loading"]::before {
    flex-basis: 10px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--ps-border-strong);
    border-top-color: var(--ps-accent);
    background: transparent;
    animation: ps-sync-turn 800ms linear infinite;
}

@keyframes ps-sync-turn {
    to { transform: rotate(360deg); }
}

/* The native two-line row remains the message's real interactive target. */
:root body #messagelist-content {
    background: var(--ps-surface);
}

:root body .messagelist td {
    color: var(--ps-text);
    background: var(--ps-read);
    border-bottom: 1px solid var(--ps-border);
    transition: background-color 140ms ease;
}

:root body .messagelist td.subject {
    padding-top: 10px;
    padding-bottom: 10px;
}

:root body .messagelist td.subject span.subject {
    color: var(--ps-text);
    font-weight: 500;
    line-height: 24px;
}

:root body .messagelist td.subject span.subject a {
    color: inherit;
}

:root body .messagelist td.subject span.fromto,
:root body .messagelist td.subject span.date,
:root body .messagelist td.subject span.size {
    color: var(--ps-muted);
    font-size: 12px;
    line-height: 22px;
}

:root body .messagelist td.subject span.fromto {
    min-width: 0;
}

:root body .messagelist td.flags,
:root body .messagelist td.threads {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--ps-muted);
}

:root body .messagelist tr.unread td {
    background: var(--ps-unread);
}

:root body .messagelist tr.unread td.subject span.subject {
    color: var(--ps-strong);
    font-weight: 700;
}

:root body .messagelist tr:hover td {
    background: var(--ps-hover);
}

:root body .messagelist tr.selected td {
    color: var(--ps-text);
    background: var(--ps-selected);
}

:root body .messagelist tr.selected td.subject span.subject {
    color: var(--ps-accent);
}

:root body .messagelist tr.flagged td.subject span.subject,
:root body .messagelist span.flagged {
    color: var(--ps-warning);
}

:root body .messagelist tr.deleted td.subject span.subject,
:root body .messagelist tr.deleted td.subject span.fromto {
    color: var(--ps-muted);
    opacity: .7;
}

:root body .messagelist td.subject span.msgicon.status.unread::before {
    color: var(--ps-accent);
}

:root body .listing-info {
    color: var(--ps-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

:root body .searchbar {
    margin: 8px 12px;
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    background: var(--ps-read);
    border: 1px solid transparent;
    border-radius: 28px;
}

:root body .searchbar:focus-within {
    background: var(--ps-surface);
    border-color: var(--ps-border-strong);
    box-shadow: 0 1px 3px var(--ps-focus-shadow);
}

:root body .searchbar form,
:root body .searchbar input,
:root body .searchbar a,
:root body .searchbar form::before {
    color: var(--ps-muted);
}

:root body .searchbar input {
    color: var(--ps-text);
    min-height: 44px;
}

:root body .searchbar form::before,
:root body .searchbar a::before {
    height: 44px;
    line-height: 44px;
}

:root body .searchbar a {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
}

/* Reader and composer: never style HTML email content with broad selectors. */
:root body #message-header {
    padding: 8px 0 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ps-border);
}

:root body #message-header > .subject {
    margin-bottom: 20px;
    color: var(--ps-strong);
    font-size: 22px;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

:root body #message-header .header-content {
    min-width: 0;
}

:root body #message-header .header-summary {
    color: var(--ps-text);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

:root body #message-header .header-links a {
    color: var(--ps-accent);
    font-size: 12px;
}

:root body #message-header > .header img.contactphoto {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 12px;
}

:root body #compose-content,
:root body #compose-headers {
    background: var(--ps-surface);
}

:root body #compose-headers .col-form-label {
    color: var(--ps-muted);
    font-size: 13px;
    font-weight: 500;
}

:root body #compose-attachments {
    border-color: var(--ps-border);
}

:root body #compose-options .col-form-label,
:root body #composestatusbar {
    color: var(--ps-muted);
}

:root body div.tox.tox-tinymce {
    border-color: var(--ps-border-strong);
    border-radius: var(--ps-radius);
}

:root body :is(#settings-menu, #sections-table) .selected > a,
:root body #sections-table tr.selected td {
    color: var(--ps-accent);
    background: var(--ps-selected);
}

:root body .formcontent legend {
    color: var(--ps-strong);
    border-color: var(--ps-border);
    font-weight: 600;
}

/* The branded login uses the native form and request token. */
:root body.task-login #layout {
    background: var(--ps-bg);
}

:root body.task-login #layout-content {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 40px 24px;
    background: var(--ps-bg);
    text-align: left;
}

:root body.task-login .ps-login-shell {
    width: 100%;
    max-width: 424px;
    margin: auto;
}

:root body.task-login .ps-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    color: var(--ps-strong);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.5px;
}

:root body.task-login .ps-login-brand svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--ps-accent);
}

:root body.task-login .ps-login-brand img {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

:root body.task-login .ps-login-card {
    width: 100%;
    padding: 32px;
    border: 1px solid var(--ps-border);
    border-radius: 16px;
    background: var(--ps-surface);
    box-shadow: var(--ps-shadow);
}

:root body.task-login .ps-login-card > h1 {
    margin: 0 0 28px;
    color: var(--ps-strong);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.5px;
}

:root body.task-login #login-form {
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
}

:root body.task-login #login-form table,
:root body.task-login #login-form tbody,
:root body.task-login #login-form tr,
:root body.task-login #login-form td {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

:root body.task-login #login-form td.title {
    display: block !important; /* Elastic hides labels inline during setup. */
    margin-bottom: 8px;
    color: var(--ps-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}

:root body.task-login #login-form .input-group-prepend {
    display: none;
}

:root body.task-login #login-form td.title label {
    margin: 0;
    padding: 0;
}

:root body.task-login #login-form td.input {
    margin-bottom: 20px;
}

:root body.task-login #login-form input[name="_user"],
:root body.task-login #login-form input[name="_pass"] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 12px;
    color: var(--ps-strong);
    background: var(--ps-surface);
    border: 1px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-size: 15px;
    line-height: 22px;
}

:root body.task-login #login-form .ps-address-field {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    padding-right: 12px;
    overflow: hidden;
    border: 1px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    background: var(--ps-surface);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

:root body.task-login #login-form .ps-address-field:focus-within {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 3px var(--ps-focus-shadow);
}

:root body.task-login #login-form .ps-address-field input[name="_user"] {
    min-width: 40px;
    width: 100%;
    height: 46px;
    min-height: 46px;
    flex: 1 1 auto;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

:root body.task-login .ps-address-domain {
    flex: 0 0 auto;
    color: var(--ps-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
    user-select: none;
}

:root body.task-login #login-form .formbuttons {
    margin: 4px 0 0;
    padding: 0;
}

:root body.task-login #rcmloginsubmit {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid var(--ps-accent);
    border-radius: var(--ps-radius);
    color: var(--ps-on-accent);
    background: var(--ps-accent);
    font-size: 14px;
    font-weight: 650;
    line-height: 22px;
    text-transform: none !important; /* Undo Elastic's text-uppercase utility. */
    cursor: pointer;
}

:root body.task-login #rcmloginsubmit:not(:disabled):hover {
    background: var(--ps-accent-hover);
    border-color: var(--ps-accent-hover);
}

:root body.task-login #rcmloginsubmit:disabled {
    cursor: wait;
    opacity: .65;
}

:root body.task-login #login-footer {
    margin-top: 24px;
    color: var(--ps-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

:root body.task-login #login-footer > div {
    margin: 12px 0 0;
    padding: 0;
    color: var(--ps-muted);
    background: transparent;
}

/* Only wide layouts get fixed default columns; native splitters may resize them. */
@media screen and (min-width: 1201px) {
    :root body.task-mail:not(.action-compose) #layout-sidebar:not(.sidebar-right) {
        flex: 0 0 auto;
        width: 220px;
        min-width: 200px;
        max-width: 280px;
    }

    :root body.task-mail:not(.action-compose) #layout-list {
        flex: 0 0 auto;
        width: clamp(340px, 28.5vw, 420px);
        min-width: 320px;
        max-width: 440px;
        margin: 12px 0;
        overflow: hidden;
        border-radius: 16px 0 0 16px;
    }

    :root body #layout-content {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    :root body #layout-content > .content.frame-content {
        padding: 28px 32px;
    }

    :root body.ps-enhanced-mail #layout-content {
        margin: 12px 12px 12px 0;
        overflow: hidden;
        border-radius: 0 16px 16px 0;
    }
}

@media screen and (min-width: 769px) {
    :root body #layout-menu {
        position: relative; /* Anchor the absolute footer to the rail, not the viewport. */
        width: 56px;
        flex: 0 0 56px;
        background: var(--ps-rail);
        border-right: 1px solid var(--ps-border);
    }

    :root body #layout-menu > .ps-brand {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin: 8px auto 16px;
        border-radius: 12px;
        color: var(--ps-on-accent);
        background: var(--ps-accent);
        font-size: 13px;
        font-weight: 750;
        letter-spacing: -.5px;
        text-decoration: none;
    }

    :root body #layout-menu > .ps-brand:has(img) {
        color: inherit;
        background: transparent;
    }

    :root body #layout-menu > .ps-brand img {
        display: block;
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    :root body #layout-menu > .ps-brand svg {
        width: 24px;
        height: 24px;
    }

    :root body #layout-menu .popover-header {
        display: none;
    }

    :root body #taskmenu a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        max-width: 44px;
        margin: 4px auto;
        padding: 0;
        color: var(--ps-muted);
        background: transparent;
        border-radius: 10px;
        line-height: 44px;
    }

    :root body #taskmenu a::before {
        display: block;
        width: 24px !important;
        height: 24px !important;
        line-height: 24px;
        font-size: 19px;
    }

    :root body #taskmenu a > .inner {
        display: none;
    }

    :root body #taskmenu a.selected,
    :root body #taskmenu a.selected:hover,
    :root body #taskmenu a:not(.disabled):focus-visible {
        color: var(--ps-accent);
        background: var(--ps-accent-soft);
    }

    :root body #taskmenu a:not(.disabled):hover {
        color: var(--ps-accent);
        background: var(--ps-hover);
    }

    :root body #taskmenu .special-buttons {
        width: 100%;
        bottom: 8px;
        background: transparent;
    }

    :root body #layout-menu .special-buttons a:not(:focus) {
        background: transparent;
    }

    :root body.ps-enhanced-mail #taskmenu .action-buttons > a.compose {
        display: none;
    }

    :root body #messagelist-header > .header-title {
        margin: 0 8px;
        color: var(--ps-strong);
        font-weight: 650;
        text-align: left;
    }
}

@media screen and (min-width: 1025px) {
    :root body #layout-menu {
        width: 64px;
        flex-basis: 64px;
    }
}

/* Mobile keeps Elastic's selected-pane navigation and its native compose FAB. */
@media screen and (max-width: 768px) {
    :root body #layout-menu > .ps-brand {
        display: none;
    }

    :root body #layout-menu {
        background: var(--ps-rail);
    }

    :root body #layout > div > .header {
        height: 60px;
        min-height: 60px;
    }

    :root body #layout > div > .header > a.button,
    :root body .popover .menu a,
    :root body .menu.footer a {
        min-width: 44px;
        min-height: 44px;
    }

    :root body .btn,
    :root body :is(input.form-control, select.custom-select) {
        min-height: 44px;
    }

    :root body .ps-sidebar-compose {
        margin: 12px 16px;
    }

    :root body .floating-action-buttons a.button.compose {
        color: var(--ps-compose-text);
        background: var(--ps-compose);
        box-shadow: 0 3px 10px var(--ps-focus-shadow);
    }

    :root body #message-header > .subject {
        font-size: 20px;
    }

    :root body #message-header .header-links a {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 24px;
    }

    :root body.task-login #layout-content {
        padding: 32px 20px;
    }

    :root body.task-login .ps-login-shell {
        max-width: 400px;
    }

    :root body.task-login .ps-login-card {
        padding: 28px 24px;
    }

    :root body.task-login #login-form input[name="_user"],
    :root body.task-login #login-form input[name="_pass"] {
        font-size: 16px;
    }
}

@media screen and (max-width: 360px) {
    :root body.task-login #layout-content {
        padding: 24px 12px;
    }

    :root body.task-login .ps-login-card {
        padding: 24px 20px;
    }

    :root body.task-login .ps-address-domain {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root body *,
    :root body *::before,
    :root body *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}