/* Shared by sign-in, mail, contacts, settings, and embedded application panes. */
:root {
    --desk: #f7f9fc; --paper: #fff; --ink: #202124; --subtle: #465463;
    --rule: #dce3ea; --active: #d3e3fd; --hover: #edf2fa; --accent: #0b57d0;
    --on-accent: #fff; --search: #e9eef6; --compose: #c2e7ff; --compose-ink: #102c41;
    --read: #f2f6fc; --snack: #303134; --snack-ink: #fff; --star: #925b00;
    --nx-bg: var(--desk); --nx-surface: var(--paper); --nx-fg: var(--ink);
    --nx-muted: var(--subtle); --nx-line: var(--rule); --nx-action: var(--accent);
    --nx-on: var(--on-accent); --nx-tint: var(--active);
}
html.dark-mode {
    color-scheme: dark;
    --desk: #171b21; --paper: #22272e; --ink: #ecf0f7; --subtle: #bdc7d4;
    --rule: #3b444e; --active: #334e78; --hover: #313c4b; --accent: #abc7ff;
    --on-accent: #13315c; --search: #303845; --compose: #354e69; --compose-ink: #d7ecff;
    --read: #272e37; --snack: #e4e8ee; --snack-ink: #202428; --star: #fcc567;
}
body.task-login,body:not(.task-login) #layout-menu,body:not(.task-login) #layout-sidebar,.nexus-pane{font-family:Roboto,"Segoe UI",sans-serif}
body.task-login #layout{background:radial-gradient(ellipse at 80% 13%,#ccdcf466,transparent 48%),var(--nx-bg);overflow:auto}
body.task-login #layout-content{width:100%;height:auto;min-height:100%;margin:0;padding:32px 18px;box-sizing:border-box;display:flex!important;flex-direction:column;align-items:center;justify-content:safe center;background:transparent;border:0}
body.task-login #logo{display:none!important}
body.task-login #login-form{position:static;box-sizing:border-box;width:min(100%,440px);max-width:440px;flex:none;height:auto;margin:auto;padding:32px;background:var(--nx-surface);color:var(--nx-fg);border:1px solid var(--nx-line);border-radius:18px;box-shadow:0 16px 50px #173c3414;text-align:left}
.nexus-wordmark{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:650;letter-spacing:-.05em;color:var(--nx-fg)}
.nexus-wordmark i{width:32px;height:32px;background:url(mark.svg) center/contain no-repeat}
.nexus-intro h2{font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.045em;margin:26px 0 8px;color:var(--nx-fg)}
.nexus-intro p{font-size:14px;line-height:1.5;color:var(--nx-muted);margin:0 0 23px}
body.task-login #login-form table,body.task-login #login-form tbody,body.task-login #login-form tr,body.task-login #login-form td.input{display:block;width:100%;max-width:none;margin:0;padding:0}
body.task-login #login-form td.title{display:block!important;padding:0;text-align:left;font-size:13px;font-weight:650;color:var(--nx-fg)}
body.task-login #login-form label{margin:0 0 5px;color:inherit}
body.task-login #login-form .input-group-prepend{display:none}
body.task-login #login-form input.form-control{box-sizing:border-box;width:100%;height:44px;padding:9px 12px;margin-bottom:15px;border-radius:8px;border:1px solid var(--nx-line);background:var(--nx-surface);color:var(--nx-fg);font-size:15px}
body.task-login #login-form input:focus{outline:2px solid var(--nx-action);outline-offset:1px}
body.task-login #login-form .formbuttons{margin:5px 0 0}
body.task-login #rcmloginsubmit{width:100%;background:var(--nx-action);color:var(--nx-on);border:0;border-radius:8px;text-transform:none!important;font-size:15px;font-weight:650;height:44px}
body.task-login #login-footer{position:static;margin:0;padding:0;height:0;overflow:hidden}
body:not(.task-login) #layout-menu,body:not(.task-login) #taskmenu{background:var(--desk);color:var(--ink)}
body:not(.task-login) #layout-menu img#logo{max-height:38px;width:auto}
body:not(.task-login) #taskmenu a{color:var(--subtle)}
body:not(.task-login) #taskmenu a.selected,body:not(.task-login) #taskmenu a:hover{background:var(--active);color:var(--ink)}
body:not(.task-login) #taskmenu a.compose{color:var(--accent)}
body:not(.task-login) #layout-sidebar,body:not(.task-login) #layout-sidebar .scroller{background:var(--nx-bg);color:var(--nx-fg)}
body:not(.task-login) #layout .header,body:not(.task-login) #layout .footer{background:var(--nx-surface);color:var(--nx-fg);border-color:var(--nx-line)}
body:not(.task-login) #layout-sidebar .folderlist li>a{padding-top:4px;padding-bottom:4px;color:var(--nx-fg)}
body:not(.task-login) #layout-sidebar .folderlist li.selected>a{background:var(--nx-tint);color:var(--nx-action);box-shadow:inset 3px 0 var(--nx-action)}
body:not(.task-login) #layout-list .messagelist tr.selected td{background:var(--nx-tint);color:var(--nx-fg)}
body:not(.task-login) .btn-primary{background:var(--nx-action);border-color:var(--nx-action);color:var(--nx-on)}
.nexus-pane{margin:0;min-height:100vh;display:grid;place-items:center;text-align:center;background:var(--nx-bg);color:var(--nx-fg)}
.nexus-pane main{padding:24px}.nexus-pane h1{font-size:21px;letter-spacing:-.035em;margin:14px 0 6px}.nexus-pane p{color:var(--nx-muted);font-size:14px;margin:0}
.envelope{width:50px;height:36px;background:var(--nx-tint);border:2px solid var(--nx-action);border-radius:7px;margin:auto;position:relative;overflow:hidden}.envelope:before{content:"";position:absolute;top:-18px;left:6px;width:33px;height:33px;border:solid var(--nx-action);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media(max-width:480px){body.task-login #login-form{padding:25px 20px}.nexus-intro h2{font-size:26px}}

/* Transient feedback uses one inverse surface. Severity and progress retain their own cues. */
html body #messagestack {
    position: fixed; inset: auto auto max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    width: max-content; max-width: min(480px, calc(100vw - 40px)); height: auto; pointer-events: none;
    font: 400 14px/1.45 Roboto, "Segoe UI", sans-serif;
}
html body #messagestack > .ui.content.alert {
    box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: fit-content;
    max-width: 100%; min-height: 48px; margin: 6px 0 0; padding: 8px 10px 8px 18px;
    background: var(--snack); color: var(--snack-ink); border: 0; border-radius: 12px;
    box-shadow: 0 3px 12px #0003; pointer-events: auto; text-shadow: none;
}
html body #messagestack > .content > span { overflow-wrap: anywhere; margin: 0; padding: 0; }
html body #messagestack > .content > i.icon { position: static; flex: none; margin: 0; color: inherit; }
html body #messagestack > :is(.notice,.information,.confirmation) > i.icon { display: none; }
html body #messagestack > :is(.error,.warning) > i.icon::before { color: #ffc684; }
html.dark-mode body #messagestack > :is(.error,.warning) > i.icon::before { color: #873900; }
html body #messagestack > .loading { padding-right: 18px; }
html body #messagestack > .loading > i.icon::before { color: var(--snack-ink); }
.nx-dismiss {
    flex: none; margin-inline-start: auto; width: 32px; height: 32px; cursor: pointer;
    border: none; border-radius: 50%; background: transparent; color: inherit; font: 22px/1 sans-serif;
}
.nx-dismiss:hover, .nx-dismiss:focus-visible { background: color-mix(in srgb, currentColor 17%, transparent); }

/* Application chrome only. Message HTML keeps its own typography and colors. */
body > .popover, body .ui-dialog.ui-widget {
    color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
    border-radius: 16px; box-shadow: 0 6px 28px #172c451f;
    font-family: Roboto, "Segoe UI", sans-serif;
}
body .ui-dialog .ui-dialog-content, body .ui-dialog .ui-dialog-buttonpane,
body .popover .popover-body { color: var(--ink); background: var(--paper); }
body .ui-dialog.ui-widget .ui-dialog-titlebar {
    padding: 16px 20px; background: var(--search); color: var(--ink);
    border: 0; border-radius: 15px 15px 0 0; font-weight: 600;
}
body .ui-dialog .ui-dialog-buttonpane { padding: 10px 16px; border: 0; border-radius: 0 0 15px 15px; }
body .ui-dialog .ui-dialog-buttonpane button { border-radius: 24px; padding: 7px 18px; text-transform: none; }
body .popover .menu.listing { padding: 6px; background: var(--paper); }
body .popover .menu.listing li { border: 0; }
body .popover .menu.listing li > a { color: var(--ink); padding-inline: 12px; border: 0; border-radius: 8px; }
body .popover .menu.listing li > a:hover, body .popover .menu.listing li > a:focus { background: var(--hover); color: var(--accent); }
body .popover .popover-body { border-radius: inherit; }
body :is(.ui-dialog,.popover) :is(input.form-control,select.custom-select) { border-radius: 8px; border-color: var(--rule); }
body :is(#message-objects,#compose-objects) > .alert {
    color: var(--ink); background: var(--search); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px;
}
body:is(.task-settings,.task-addressbook) { font-family: Roboto, "Segoe UI", sans-serif; color: var(--ink); }
body:is(.task-settings,.task-addressbook) #layout { background: var(--desk); }
body:is(.task-settings,.task-addressbook) #layout :is(#layout-content,#layout-list) { background: var(--paper); color: var(--ink); }
body:is(.task-settings,.task-addressbook) #layout .listing li { border-color: var(--rule); }
body:is(.task-settings,.task-addressbook) #layout .listing li.selected > a,
body:is(.task-settings,.task-addressbook) #layout .listing tr.selected td { background: var(--active); color: var(--ink); }
@media (min-width:1201px) {
    body:is(.task-settings,.task-addressbook) #layout { padding: 12px; gap: 8px; }
    body:is(.task-settings,.task-addressbook) #layout > :is(#layout-list,#layout-content) {
        border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
    }
    body:is(.task-settings,.task-addressbook) #layout-menu, body:is(.task-settings,.task-addressbook) #layout-sidebar { border: 0; }
    body:is(.task-settings,.task-addressbook) #taskmenu .special-buttons { background: var(--desk); }
    body:is(.task-settings,.task-addressbook) #taskmenu a { border-radius: 12px; }
}
body .ui-dialog.ui-widget .ui-dialog-titlebar { display: flex; align-items: center; min-height: 42px; height: auto; padding: 10px 18px; }
body .ui-dialog.ui-widget .ui-dialog-title { padding: 0; margin: 0; }
body .ui-dialog.ui-widget .ui-dialog-buttonpane { height: auto; padding: 8px 14px; }
body .ui-dialog.ui-widget .ui-dialog-buttonpane button { border: 0; background: var(--hover); color: var(--ink); }
body .ui-dialog.ui-widget .ui-dialog-buttonpane button.mainaction { background: var(--accent); color: var(--on-accent); }
body .ui-dialog.ui-widget .ui-dialog-buttonpane button.discard { background: #9d3029; color: #fff; }