/* What only the webmail needs – everything else comes from the desktop app's style.css */

/* Sign-in */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; overflow: auto; }
.login-card { width: min(400px, 100%); background: var(--panel); border-radius: 18px; padding: 34px 32px 28px; box-shadow: var(--shadow);
  display: grid; gap: 14px; }
.login-card h1 { margin: 0; font: 800 26px/1.2 var(--font-display); letter-spacing: -.02em; }
.login-card h1 span { color: var(--accent); }
.login-card > p { margin: -8px 0 6px; color: var(--muted); }
.login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.login-card input:not([type=checkbox]) { height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--text); outline: 0; }
.login-card input:focus { border-color: var(--accent); }
.login-card .remember { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); cursor: pointer; }
.login-card .remember input { width: 16px; height: 16px; accent-color: var(--accent); }
.login-card .btn { width: 100%; height: 40px; }
.login-card .code { font-size: 22px; letter-spacing: .25em; text-align: center; }
.login-error { min-height: 18px; color: var(--danger); font-size: 13px; }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12.5px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Sidebar foot: who is signed in */
.who { flex: 1; min-width: 0; padding: 0 6px; font-size: 13px; }
.who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }

/* Move dialog: the folders to choose from */
.pick-list { display: grid; gap: 2px; max-height: 50vh; overflow: auto; margin-top: 14px; }
.pick-list button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; text-align: left; }
.pick-list button:hover { background: var(--hover); }
.pick-list .pick-head { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Phones: one pane at a time */
.back-btn, .tb.back-btn, .icon-btn.back-btn { display: none; }
@media (max-width: 860px) {
  body { overflow: auto; }
  #app, #app.wide { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  #app #sidebar { display: none; }
  #app.show-nav #sidebar { display: flex; }
  #app.show-nav #list-pane, #app.show-nav #reader { display: none; }
  #app #reader { display: none; }
  #app.reading #reader { display: flex; }
  #app.reading #list-pane { display: none; }
  #app.wide:not(.show-nav) #reader { display: flex; }      /* pages (calendar, chats, protection …) have no list */
  /* a chat is as high as the screen: its messages scroll, the page doesn't */
  body:has(#reader .space.chats) { overflow: hidden; }
  #app.wide:has(#reader .space.chats) { height: 100dvh; min-height: 0; overflow: hidden; }
  #app.wide:has(#reader .space.chats) #reader { height: 100dvh; min-height: 0; overflow: hidden; }
  .back-btn, .tb.back-btn, .icon-btn.back-btn, .space .back-btn, .planner-head .back-btn { display: grid; }
}

/* Settings window (the desktop app's look: .modal.settings in style.css) – an on/off switch, phones */
.switch { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 22px; background: var(--border-strong); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-body .code-box, .dialog .code-box { margin: 10px 0 4px; }
.settings-body .form + .settings-sub, .settings-body .form + p { margin-top: 26px; }
.settings-body .form + .sec-card { margin-top: 18px; }
@media (max-width: 860px) {
  .modal.settings { flex-direction: column; height: calc(100vh - 24px); }
  .modal.settings .settings-nav { width: auto; flex-direction: row; overflow-x: auto; padding: 12px; border-right: 0;
    border-bottom: 1px solid var(--border); }
  .modal.settings .settings-nav h3, .modal.settings .settings-version, .modal.settings .acc-mail { display: none; }
  .modal.settings #set-nav { display: flex; gap: 4px; }
  .modal.settings .acc-item { width: auto !important; white-space: nowrap; }
  .modal.settings .settings-body { padding: 18px 16px 24px; }
  .sec-line { grid-template-columns: 1fr auto; }
}

/* A secret shown once (recovery code, app password, backup codes) */
.code-box { margin: 10px 0 4px; padding: 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border);
  font: 600 18px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .06em; text-align: center; user-select: all; word-break: break-all; }

/* Rules window (filters, forwarding, away reply) – the cards' look comes from style.css */
.rules-modal { width: min(820px, 100%); }
.rules-modal .modal-head select { height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); }
.rules-scroll { padding: 0 22px 22px; overflow: auto; }
.rules-pw { width: 100%; height: 38px; margin-top: 14px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--text); }
.rules-scroll .settings-sub { margin-top: 28px; }