/*
 * Vesopa Mail — the skin.
 *
 * ---------------------------------------------------------------------------
 * IT EXTENDS ELASTIC RATHER THAN REPLACING IT
 * ---------------------------------------------------------------------------
 * Elastic is 120KB of compiled CSS covering a mail client's entire surface:
 * three responsive layouts, a dozen dialog types, the contacts grid, the
 * settings tree, print styles and a dark mode. Rewriting that from scratch to
 * change how it LOOKS would mean re-deriving every one of those decisions, and
 * the ones you would get wrong are the ones you cannot see from a screenshot —
 * the compose dialog on a phone in landscape, the folder manager, print.
 *
 * So this imports it and overrides colour, type, weight and radius. Every rule
 * below was written against a selector read out of elastic's own stylesheet,
 * not guessed: `grep`ping the compiled CSS for #37beff is how the accent list
 * was found. Nothing here touches flex or grid — the layout is Elastic's and
 * stays Elastic's, because that is the part that is hard and already works.
 *
 * ---------------------------------------------------------------------------
 * WHAT CHANGES
 * ---------------------------------------------------------------------------
 *   type      Roboto -> the system stack. A mail client should look like it
 *             belongs to the device it is on; Roboto on an iPad does not.
 *   accent    Elastic's #37beff -> Vesopa lime, with ink chosen per surface
 *             rather than one colour used everywhere (lime text on white is
 *             2.1:1 and unreadable; lime FILL with near-black ink is 12:1).
 *   chrome    Softer rules, more air, rounded rows. Closer to Apple Mail than
 *             to a 2015 web app.
 *   editor    The TinyMCE toolbar wraps instead of overflowing — see the block
 *             at the bottom, which is the fix for the bar being unusable on
 *             Android and iPad.
 */

@import url("../../elastic/styles/styles.min.css");

:root {
  --v-lime: #a5c715;
  --v-lime-ink: #6e8a0e;    /* accent TEXT on white — 4.6:1 */
  --v-lime-deep: #2f3b05;
  --v-lime-soft: #eff6d8;
  --v-on-lime: #10130a;     /* the only ink that reads on a lime fill */

  --v-ink: #1a1f14;
  --v-ink-2: #4a4c41;
  --v-ink-3: #787a6e;
  --v-rule: #e4e7dd;
  --v-rule-soft: #eef0e9;
  --v-bg: #ffffff;
  --v-bg-2: #f8f9f4;

  --v-radius: 12px;
  --v-radius-sm: 9px;

  --v-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
            Helvetica, Arial, sans-serif;
}

/* ---- Type ---------------------------------------------------------------
   Elastic sets Roboto with !important in a few places, so this has to match
   that weight to win. The icon font is deliberately untouched — overriding it
   would replace every icon in the interface with tofu. */
body,
input, select, textarea, button,
.header-title, .listing, .menu, .propform {
  font-family: var(--v-font) !important;
}
body { color: var(--v-ink); -webkit-font-smoothing: antialiased; }

/* ---- Accent -------------------------------------------------------------
   Every selector here came out of elastic's own stylesheet. A lime FILL takes
   near-black ink; lime as text is only used at --v-lime-ink, which is the
   darkened version that actually passes contrast on white. */
.btn-primary,
.floating-action-buttons a.button,
#taskmenu .action-buttons a {
  background-color: var(--v-lime) !important;
  border-color: var(--v-lime) !important;
  color: var(--v-on-lime) !important;
}
.btn-primary:hover,
.floating-action-buttons a.button:hover,
#taskmenu .action-buttons a:hover {
  background-color: #b7da21 !important;
  border-color: #b7da21 !important;
  color: var(--v-on-lime) !important;
}
.btn-primary.disabled, .btn-primary:disabled {
  background-color: #d6e08f !important;
  border-color: #d6e08f !important;
  color: #55603a !important;
}

.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
  background-color: var(--v-lime) !important;
  color: var(--v-on-lime) !important;
  font-weight: 700;
}

.quota-widget .value { background-color: var(--v-lime) !important; }

/*
 * ACCENT LINKS ARE SCOPED TO ACTUAL LINKS, and this is a correction worth
 * recording. The first version of this rule was `a:not(.btn):not(.button)`,
 * on the assumption that an <a> in a mail client is a hyperlink. It is not:
 * Roundcube builds the folder list, the message list, the toolbar and the task
 * menu out of anchors, so one blanket rule turned every subject line, every
 * folder name and every toolbar label lime — a wall of green text that was
 * harder to read than what it replaced and looked like a broken stylesheet.
 *
 * Only two things should carry the accent: a link inside a message the
 * customer is reading, and a link inside one of our own notices.
 */
.ui.alert a:not(.btn) { color: var(--v-lime-ink); }
#messagecontent a[href],
.message-htmlpart a[href],
.message-part a[href],
#message-content a[href] { color: var(--v-lime-ink); }

.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.ui-menu .ui-state-active,
.ui-datepicker a.ui-state-active {
  background-color: var(--v-lime) !important;
  color: var(--v-on-lime) !important;
}

/* ---- The message list ---------------------------------------------------
   Apple Mail's shape: a soft wash and a coloured rule down the left for the
   selected row, rather than a saturated fill. It keeps the subject readable
   while selected, which a solid accent does not. */
.folderlist li.selected > a,
#layout-sidebar .listing li.selected > a,
.listing li.selected,
.listing tr.selected td,
.messagelist tr.selected td {
  background-color: var(--v-lime-soft) !important;
  color: var(--v-ink) !important;
  box-shadow: inset 3px 0 0 var(--v-lime);
}
.listing li:hover,
.messagelist tr:hover td { background-color: var(--v-bg-2); }

.messagelist tr td { border-color: var(--v-rule-soft) !important; }
.messagelist tr.unread td.subject,
.listing li.unread { font-weight: 700; }

/* A little more air between rows. Density is a preference elastic already
   exposes in Settings, so this only moves the comfortable default. */
.messagelist tr td.subject { line-height: 1.45; }

/* ---- Chrome -------------------------------------------------------------
   Hairlines instead of hard borders, and a white header rather than the
   grey slab. */
#layout > div > .header {
  background: var(--v-bg) !important;
  color: var(--v-ink) !important;
  border-bottom: 1px solid var(--v-rule);
  box-shadow: none;
}
#layout > div > .header a.button { color: var(--v-ink-2) !important; }
#layout-sidebar, #layout-list { border-color: var(--v-rule) !important; }
.toolbar { border-color: var(--v-rule) !important; }

/* Rounded, contained panels — the single biggest thing that separates a
   modern mail client from a 2015 one. */
@media screen and (min-width: 1024px) {
  #layout-list, #layout-content { border-radius: var(--v-radius); }
  #layout-list { overflow: hidden; }
}

a.btn, button.btn, .btn {
  border-radius: var(--v-radius-sm);
  font-weight: 600;
}

/* ---- Dark mode ----------------------------------------------------------
   Elastic ships a full dark theme; only the accent is retinted. Lime on a
   dark ground is legible as text, so links use the bright value here rather
   than the darkened one that white backgrounds need. */
html.dark-mode a:not(.btn):not(.button) { color: #c3e33a; }
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr.selected td {
  background-color: rgba(165, 199, 21, .16) !important;
  color: #f2f5e8 !important;
  box-shadow: inset 3px 0 0 var(--v-lime);
}
html.dark-mode #layout > div > .header {
  background: #21292c !important;
  color: #e9edea !important;
  border-bottom-color: #33403f;
}
html.dark-mode #layout > div > .header a.button { color: #cdd6d2 !important; }

/* =========================================================================
   The login screen
   =========================================================================
   The first thing anybody sees, and Elastic's is a bare form on grey. This
   one is a frosted card on a slowly drifting lime wash, with Material-style
   fields: the label sits inside the field and floats up when it is focused or
   filled, the field lifts to white with a lime ring, and the card's shadow
   deepens and warms while anything in it has focus. login.js supplies the
   floating labels, the Email field and the show/hide eye; everything that
   moves is here, and all of it stops for prefers-reduced-motion.

   Elastic positions the logo and the form with `top: 16vh` / `top: 20vh`,
   which pushes the button off a short landscape phone. This lays the page out
   as one centred column that scrolls instead.
   ========================================================================= */
.task-login {
  --v-card: rgba(255, 255, 255, .82);
  --v-card-rule: rgba(26, 31, 20, .08);
  --v-field: #f3f5ee;
  --v-field-rule: #dfe3d6;
  --v-field-hover: #ccd3be;
  --v-field-focus: #ffffff;
  --v-label: #6f7266;
  --v-ring: rgba(165, 199, 21, .22);
  --v-wash-1: rgba(165, 199, 21, .30);
  --v-wash-2: rgba(214, 232, 120, .38);
  --v-wash-1-mid: rgba(165, 199, 21, .12);
  --v-wash-2-mid: rgba(214, 232, 120, .14);
  --v-wash-3: rgba(47, 59, 5, .06);
  --v-ease: cubic-bezier(.2, .8, .2, 1);
  background: var(--v-bg-2);
}
html.dark-mode .task-login {
  --v-card: rgba(30, 37, 40, .80);
  --v-card-rule: rgba(255, 255, 255, .07);
  --v-field: rgba(255, 255, 255, .045);
  --v-field-rule: rgba(255, 255, 255, .12);
  --v-field-hover: rgba(255, 255, 255, .22);
  --v-field-focus: rgba(255, 255, 255, .07);
  --v-label: #9aa59f;
  --v-ring: rgba(165, 199, 21, .20);
  --v-wash-1: rgba(165, 199, 21, .16);
  --v-wash-2: rgba(110, 138, 14, .20);
  --v-wash-1-mid: rgba(165, 199, 21, .06);
  --v-wash-2-mid: rgba(110, 138, 14, .08);
  --v-wash-3: rgba(0, 0, 0, .35);
  background: #161c1e;
}

/* The wash: three soft blobs, each drifting on its own clock so the light
   never repeats the same way twice. Fixed, behind everything, never clickable.
   No filter: blur() -- blurring three screen-sized layers every frame is what
   makes a cheap phone stutter, and the gradients are already soft. The grain
   on ::after is there to dither the banding an 8-bit gradient shows as rings. */
.task-login .v-aurora {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.task-login .v-aurora::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.task-login .v-aurora span {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.task-login .v-aurora span:nth-child(1) {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -30vmax;
  background: radial-gradient(circle, var(--v-wash-1) 0%, var(--v-wash-1-mid) 38%, transparent 70%);
  animation: v-drift-a 26s ease-in-out infinite alternate;
}
.task-login .v-aurora span:nth-child(2) {
  width: 54vmax; height: 54vmax; right: -20vmax; top: -12vmax;
  background: radial-gradient(circle, var(--v-wash-2) 0%, var(--v-wash-2-mid) 40%, transparent 70%);
  animation: v-drift-b 32s ease-in-out infinite alternate;
}
.task-login .v-aurora span:nth-child(3) {
  width: 70vmax; height: 70vmax; left: 10vmax; bottom: -52vmax;
  background: radial-gradient(circle, var(--v-wash-3) 0%, transparent 70%);
  animation: v-drift-c 38s ease-in-out infinite alternate;
}
@keyframes v-drift-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes v-drift-b { to { transform: translate3d(-12vmax, 16vmax, 0) scale(.9); } }
@keyframes v-drift-c { to { transform: translate3d(-10vmax, -8vmax, 0) scale(1.1); } }

.task-login #layout { position: relative; z-index: 1; background: transparent; }
.task-login #layout-content,
.task-login #layout-content.no-navbar {
  position: relative; z-index: 1;
  display: flex !important; flex-direction: column; align-items: center;
  min-height: 100%; overflow-y: auto;
  padding: clamp(28px, 9vh, 96px) 16px 28px;
  background: transparent !important;
  border-radius: 0;
}

/* ---- The lockup ---- */
.task-login #brand-lockup {
  width: 100%; text-align: center;
  animation: v-rise .7s var(--v-ease) both;
}
.task-login #brand-lockup .lockup {
  display: inline-block; position: static;
  width: 100%; max-width: 230px;
}
.task-login #brand-lockup #logo {
  display: block; position: static;
  width: 100%; height: auto; max-height: none; opacity: 1;
}
.task-login #brand-lockup .lockup-word {
  margin: 0; text-align: right;
  font-size: 36px; line-height: 1; letter-spacing: -.01em;
  color: #1d1d1b;
}
html.dark-mode .task-login #brand-lockup .lockup-word { color: #fff; }

/* ---- The card ---- */
.task-login #login-form {
  position: relative; top: auto;
  width: 100%; max-width: 408px;
  margin: 30px auto 0; padding: 28px 26px 22px;
  text-align: left;
  background: var(--v-card);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--v-card-rule);
  border-radius: 26px;
  box-shadow:
    0 1px 2px rgba(20, 24, 10, .04),
    0 14px 34px -12px rgba(20, 24, 10, .14),
    0 40px 90px -40px rgba(90, 115, 10, .22);
  transition: box-shadow .6s var(--v-ease), transform .6s var(--v-ease);
  animation: v-rise .7s .08s var(--v-ease) both;
}
.task-login #login-form:focus-within {
  box-shadow:
    0 1px 2px rgba(20, 24, 10, .04),
    0 22px 44px -14px rgba(20, 24, 10, .18),
    0 60px 120px -36px rgba(135, 170, 12, .42);
}
html.dark-mode .task-login #login-form {
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html.dark-mode .task-login #login-form:focus-within {
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .75), 0 0 90px -20px rgba(165, 199, 21, .28),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
@keyframes v-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

.task-login .v-login-head { margin: 0 2px 20px; }
.task-login .v-login-title {
  margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em;
  color: var(--v-ink);
}
.task-login .v-login-sub { margin: 4px 0 0; font-size: 14px; color: var(--v-ink-3); }
html.dark-mode .task-login .v-login-title { color: #f2f5ee; }
html.dark-mode .task-login .v-login-sub { color: #9aa59f; }

/* ---- The fields ----
   The whole cell is the field: icon, input, eye and floating label inside one
   rounded box, so focus colours the box rather than one part of it. */
.task-login #login-form table,
.task-login #login-form tbody { display: block; width: 100%; }
.task-login #login-form tr.form-group {
  display: block; margin: 0 0 14px;
}
.task-login #login-form td.input {
  position: relative;
  display: flex !important; flex-wrap: nowrap; align-items: stretch;
  width: 100%; height: 60px; padding: 0;
  background: var(--v-field);
  border: 1.5px solid var(--v-field-rule);
  border-radius: 16px;
  transition: background-color .3s var(--v-ease), border-color .3s var(--v-ease),
    box-shadow .45s var(--v-ease), transform .3s var(--v-ease);
}
.task-login #login-form td.input:hover { border-color: var(--v-field-hover); }
.task-login #login-form td.input:focus-within {
  background: var(--v-field-focus);
  border-color: var(--v-lime);
  box-shadow: 0 0 0 4px var(--v-ring), 0 12px 26px -14px rgba(110, 138, 14, .55);
}

.task-login #login-form td.input .input-group-prepend { display: flex; margin: 0; }
.task-login #login-form td.input .input-group-text {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 100%; padding: 0 0 0 4px;
  background: transparent !important; border: 0 !important; border-radius: 0;
  font-size: 17px; color: var(--v-label);
  transition: color .3s var(--v-ease), transform .3s var(--v-ease);
}
.task-login #login-form td.input:focus-within .input-group-text {
  color: var(--v-lime-ink); transform: scale(1.06);
}
html.dark-mode .task-login #login-form td.input:focus-within .input-group-text { color: #c3e33a; }

.task-login #login-form td.input input.form-control {
  flex: 1 1 auto; min-width: 0;
  height: 100% !important;
  padding: 23px 14px 5px 2px !important;
  font-size: 16px !important; /* 16px or iOS zooms the page on focus */
  line-height: 1.3;
  color: var(--v-ink) !important;
  background: transparent !important;
  border: 0 !important; border-radius: 0 16px 16px 0 !important;
  box-shadow: none !important; outline: 0;
}
html.dark-mode .task-login #login-form td.input input.form-control { color: #eef2ea !important; }
.task-login #login-form td.input input.form-control::placeholder { color: transparent !important; }
.task-login #login-form td.input input.form-control::-webkit-input-placeholder { color: transparent !important; }
/* Keep Chrome's autofill from painting a pale blue slab inside the field. */
.task-login #login-form td.input input:-webkit-autofill {
  -webkit-text-fill-color: var(--v-ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}
html.dark-mode .task-login #login-form td.input input:-webkit-autofill { -webkit-text-fill-color: #eef2ea; }

.task-login .v-float {
  position: absolute; left: 52px; top: 50%;
  max-width: calc(100% - 110px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; line-height: 1; color: var(--v-label);
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  transform-origin: left center;
  transition: transform .28s var(--v-ease), color .28s var(--v-ease), font-weight .28s;
}
.task-login td.input:focus-within .v-float,
.task-login td.input input:not(:placeholder-shown) ~ .v-float,
.task-login td.input input:-webkit-autofill ~ .v-float {
  transform: translate3d(0, calc(-50% - 13px), 0) scale(.76);
  font-weight: 600; letter-spacing: .02em;
}
.task-login td.input:focus-within .v-float { color: var(--v-lime-ink); }
html.dark-mode .task-login td.input:focus-within .v-float { color: #c3e33a; }

/* ---- The eye ---- */
.task-login .v-eye {
  flex: 0 0 44px; align-self: center;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0 6px 0 0; padding: 0;
  color: var(--v-label); background: transparent;
  border: 0; border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--v-ease), background-color .2s var(--v-ease), transform .15s var(--v-ease);
}
.task-login .v-eye:hover { color: var(--v-ink); background: rgba(26, 31, 20, .06); }
/* Elastic's dark mode fills every <button> grey; the eye is part of the field. */
html.dark-mode .task-login #login-form .v-eye { background: transparent; border: 0; box-shadow: none; }
html.dark-mode .task-login #login-form .v-eye:hover { color: #eef2ea; background: rgba(255, 255, 255, .08); }
.task-login .v-eye:active { transform: scale(.9); }
.task-login .v-eye:focus-visible { outline: 2px solid var(--v-lime); outline-offset: -2px; }
.task-login .v-eye svg {
  width: 22px; height: 22px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.task-login .v-eye .v-eye-pupil { transition: transform .3s var(--v-ease); transform-origin: 12px 12px; }
.task-login .v-eye .v-eye-slash {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset .3s var(--v-ease);
}
.task-login .v-eye[aria-pressed="true"] { color: var(--v-lime-ink); }
html.dark-mode .task-login .v-eye[aria-pressed="true"] { color: #c3e33a; }
.task-login .v-eye[aria-pressed="true"] .v-eye-slash { stroke-dashoffset: 0; }
.task-login .v-eye[aria-pressed="true"] .v-eye-pupil { transform: scale(.7); }
/* A readable password, not a line of dots, while it is shown. */
.task-login td.input.v-revealed input.form-control { letter-spacing: .04em; }

.task-login .v-caps {
  max-height: 0; margin: -6px 4px 0; overflow: hidden; opacity: 0;
  font-size: 12.5px; font-weight: 600; color: #9a6a00;
  transition: max-height .25s var(--v-ease), opacity .25s var(--v-ease), margin .25s var(--v-ease);
}
.task-login .v-caps.v-on { max-height: 24px; margin: -4px 4px 12px; opacity: 1; }
html.dark-mode .task-login .v-caps { color: #f0c24b; }

/* ---- The button ---- */
.task-login #login-form .formbuttons { margin: 6px 0 0; }
.task-login #rcmloginsubmit {
  position: relative; overflow: hidden;
  height: 56px; border-radius: 16px !important;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  text-transform: none !important;
  box-shadow: 0 12px 26px -12px rgba(110, 138, 14, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s var(--v-ease), box-shadow .35s var(--v-ease), background-color .2s;
}
.task-login #rcmloginsubmit:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 18px 34px -14px rgba(110, 138, 14, .85), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.task-login #rcmloginsubmit:active { transform: scale(.985); box-shadow: 0 6px 16px -10px rgba(110, 138, 14, .8); }
.task-login #rcmloginsubmit:focus-visible { box-shadow: 0 0 0 4px var(--v-ring), 0 12px 26px -12px rgba(110, 138, 14, .75); }
/* A sheen that crosses the button on hover. */
.task-login #rcmloginsubmit::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  transform: translate3d(-110%, 0, 0);
  transition: transform .9s var(--v-ease);
  pointer-events: none;
}
.task-login #rcmloginsubmit:hover::after { transform: translate3d(110%, 0, 0); }

/* ---- Under the card ---- */
.task-login #login-footer {
  margin-top: 16px; text-align: center;
  font-size: 13px; color: var(--v-ink-3);
}
.task-login #login-footer > div { margin: 0; padding: 0; background: none; }
.task-login #login-footer a { color: var(--v-lime-ink); font-weight: 600; }
html.dark-mode .task-login #login-footer { color: #8e9a95; }
html.dark-mode .task-login #login-footer a { color: #c3e33a; }
.task-login .vesopa-legal {
  margin: 18px 0 0; text-align: center;
  font-size: 12px; color: var(--v-ink-3); opacity: .85;
  animation: v-rise .7s .16s var(--v-ease) both;
}
.task-login .vesopa-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html.dark-mode .task-login .vesopa-legal { color: #8e9a95; }

@media screen and (max-width: 480px) {
  .task-login #layout-content,
  .task-login #layout-content.no-navbar { padding-top: clamp(24px, 7vh, 64px); }
  .task-login #brand-lockup .lockup { max-width: 196px; }
  .task-login #brand-lockup .lockup-word { font-size: 30px; }
  .task-login #login-form { margin-top: 24px; padding: 24px 18px 18px; border-radius: 24px; }
  .task-login .v-login-title { font-size: 19px; }
}

/* A phone on its side: 390px of height. Tighten everything above the button
   so it sits on the first screen rather than just below it. */
@media screen and (max-height: 520px) {
  .task-login #layout-content,
  .task-login #layout-content.no-navbar { padding-top: 14px; }
  .task-login #brand-lockup .lockup { max-width: 150px; }
  .task-login #brand-lockup .lockup-word { font-size: 22px; }
  .task-login #login-form { margin-top: 12px; padding: 16px 18px 14px; }
  .task-login .v-login-head { margin-bottom: 12px; }
  .task-login .v-login-sub { display: none; }
  .task-login #login-form tr.form-group { margin-bottom: 10px; }
  .task-login #login-form td.input { height: 52px; }
  .task-login #rcmloginsubmit { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .task-login .v-aurora span,
  .task-login #brand-lockup,
  .task-login #login-form,
  .task-login .vesopa-legal { animation: none !important; }
  .task-login #login-form *,
  .task-login #login-form { transition-duration: .01ms !important; }
  .task-login #rcmloginsubmit::after { display: none; }
}

/* =========================================================================
   The compose toolbar, and why this block exists
   =========================================================================
   REPORTED AS "tox-toolbar__primary never works on Android, and on iPad it is
   worse". It is TinyMCE's formatting bar, and on a narrow screen its buttons
   ran off the right-hand edge with no way to reach them — no wrap, no scroll,
   no overflow menu. On a phone that meant no bold, no lists, no link button.

   THE ROOT CAUSE IS AN OPTION NAME. Roundcube's program/js/editor.js sets
   `toolbar_drawer: 'sliding'`, which is TinyMCE 4's spelling. This node runs
   TinyMCE 5.10, where it was renamed `toolbar_mode` — so the option is
   silently ignored, no drawer is ever created, and the bar is left as a
   single non-wrapping flex row. (The line even carries a comment about a
   TinyMCE issue from the version it was written for.)

   Fixing it in editor.js would mean patching an upstream file that the next
   Roundcube update overwrites. `flex-wrap: wrap` gets the same result — it is
   exactly what `toolbar_mode: 'wrap'` does — from the skin, where it survives.
   ========================================================================= */
.tox .tox-toolbar__primary,
.tox .tox-toolbar,
.tox .tox-toolbar--scrolling {
  flex-wrap: wrap !important;
  overflow-x: auto;
}
.tox .tox-toolbar__group {
  /* Groups must be allowed to break too, or the row wraps as three huge
     blocks and the last one still overflows. */
  flex-wrap: wrap;
  padding-left: 2px;
  padding-right: 2px;
}
.tox-tinymce { border-radius: var(--v-radius-sm) !important; }

@media screen and (max-width: 1024px) {
  /* Bigger targets where there is a finger rather than a pointer, and a
     toolbar that is allowed to be two or three rows tall rather than one row
     with half of it unreachable. */
  .tox .tox-tbtn { width: 40px !important; height: 40px !important; margin: 1px !important; }
  .tox .tox-toolbar__primary { padding: 2px 0; }
}