/*
 * 1VTEŘINA -- the clothes of the webmail.
 *
 * The mailbox of the site wears the clothes of the site: the same greys,
 * the same thin lines, the same letters, the same small print. The theme
 * of the mailbox is the theme of the hour of the day at the place of the
 * visitor: light at day, dark at night. The plugin puts the class
 * `dark-mode` on the page, and these are the clothes of both times of the
 * day.
 *
 * The file is served from the plugin of the site:
 *   /static.php/plugins/vterina/vterina.css
 */

/* ------------------------------------------------------------- the letters */

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/PublicSans-normal-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/PublicSans-italic-latin.woff2') format('woff2');
}

/* ------------------------------------------------------------ the colours */

:root {
    --vt-bg: #f3f2ef;
    --vt-ink: #17171b;
    --vt-dim: #55555f;
    --vt-faint: #85858f;
    --vt-rule: rgba(0, 0, 0, .12);
    --vt-rule-soft: rgba(0, 0, 0, .07);
    --vt-hover: rgba(0, 0, 0, .04);
    --vt-picked: rgba(0, 0, 0, .06);
    --vt-danger: #b3261e;
    --vt-ok: #1f7a4d;
}

html.dark-mode {
    --vt-bg: #05060a;
    --vt-ink: #e9e9ec;
    --vt-dim: #8b8b96;
    --vt-faint: #5c5c66;
    --vt-rule: rgba(255, 255, 255, .12);
    --vt-rule-soft: rgba(255, 255, 255, .07);
    --vt-hover: rgba(255, 255, 255, .05);
    --vt-picked: rgba(255, 255, 255, .07);
    --vt-danger: #ff8a8a;
    --vt-ok: #9fe8b0;
}

/* ------------------------------------------------------------------ the page */

html,
body {
    background-color: var(--vt-bg);
    color: var(--vt-ink);
}

body {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
}

/* The columns of the mailbox are not boxes: they are the page itself,
   divided by thin lines. */
#layout,
#layout-sidebar,
#layout-list,
#layout-content,
#layout-content > .content,
#layout-content > .formcontent {
    background-color: transparent;
    color: var(--vt-ink);
}

#layout-sidebar,
#layout-list {
    border-right-color: var(--vt-rule);
}

#layout-sidebar.sidebar-right {
    border-left-color: var(--vt-rule);
}

/* The column on the left -- the mark of the mailbox, the tasks, the
   buttons at the bottom -- is not a dark box: it is the page with a thin
   line on its right, like the rail of the site. */
@media screen and (min-width: 481px) {
    #layout-menu {
        background-color: transparent;
        border-right: 1px solid var(--vt-rule);
    }

    #layout-menu .popover-header {
        background-color: transparent !important;
        border-bottom: 1px solid var(--vt-rule-soft);
    }

    /* The mark at the head of the rail: small and quiet, the way the
       gear of the site stands in its own column. */
    #layout-menu .popover-header img,
    #layout-menu #logo {
        max-height: 26px;
        max-width: 26px;
        width: auto;
        opacity: .5;
        filter: grayscale(1);
    }

    /* The tasks: a sign, and the word under it in small capitals. The
       words are long and the rail is narrow, so the letters are small
       enough to fit. */
    #taskmenu a,
    #taskmenu a.button {
        padding: .45rem .1rem;
        color: var(--vt-dim);
        background: none;
        font-size: 9px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    #taskmenu a:before {
        color: inherit;
        font-size: 1.5em;
    }

    #taskmenu a:hover,
    #taskmenu a:focus,
    #taskmenu a.selected,
    #taskmenu a.selected:hover {
        color: var(--vt-ink);
        background-color: var(--vt-hover);
    }

    #taskmenu .special-buttons,
    #taskmenu .action-buttons {
        background-color: transparent;
    }

    #taskmenu .action-buttons a,
    #taskmenu a.logout {
        color: var(--vt-dim) !important;
        background: none;
    }

    #taskmenu .action-buttons a:hover,
    #taskmenu a.logout:hover {
        color: var(--vt-ink) !important;
        background-color: var(--vt-hover);
    }

    #taskmenu .inner {
        font-size: 9px;
        letter-spacing: .1em;
    }
}

/* The bar of the search belongs to the column; it is not a white box
   laid on top of it. */
.searchbar,
.searchbar.menu {
    background-color: transparent;
    border-color: var(--vt-rule);
}

/* The line of the quota is a line, not the blue of the stock skin. */
.quota-widget .value {
    background-color: var(--vt-dim);
    opacity: .45;
}

/* The little menus that float over the list are the page lifted a
   little: the same thin line around them, no blue grey of the stock
   skin. */
.menu.listing-hover-menu,
.popover .menu {
    border-color: var(--vt-rule);
}

/* The folder that is open: a quiet band, not the blue of the stock
   skin. */
ul.treelist li.selected > a,
ul.treelist li.selected > div > a,
ul.treelist li.selected > div > div > a,
.folderlist li.selected > a {
    color: var(--vt-ink);
    background-color: var(--vt-picked);
}

/* The bars above the columns: the name of the column in small print. */
#layout > div > .header,
#layout > div > .footer {
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vt-dim);
    background-color: transparent;
    border-color: var(--vt-rule);
}

#layout > div > .header .header-title {
    font-weight: 400;
    letter-spacing: .18em;
}

/* The tools of the bar: no boxes, only the signs. */
.menu.toolbar a,
#layout > div > .header a.button,
#layout > div > .footer a.button {
    height: 44px;
    color: var(--vt-dim);
    border: 0 !important;
    background: none;
    border-radius: 0;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.menu.toolbar a:hover,
.menu.toolbar a:focus,
#layout > div > .header a.button:hover,
#layout > div > .footer a.button:hover {
    color: var(--vt-ink);
    background-color: var(--vt-hover);
    outline: 0;
}

.menu.toolbar a.selected {
    color: var(--vt-ink);
}

/* ------------------------------------------------------------------ the lists */

/* The rows of the list of the messages and of the folders: a thin line
   under each of them, and nothing else. */
.listing li,
.listing tbody td {
    border-bottom-color: var(--vt-rule-soft);
    color: var(--vt-ink);
}

.listing li a,
.listing tbody td,
.listing tbody td a {
    color: var(--vt-ink);
    text-decoration: none;
}

.listing li:hover > a,
.listing tbody tr:hover > td {
    background-color: var(--vt-hover);
}

.listing li.selected,
.listing tr.selected td {
    color: var(--vt-ink);
    background-color: var(--vt-picked);
}

.listing li.selected > a,
.listing tbody tr.selected td a {
    color: var(--vt-ink);
}

/* The small print of the list: the date, the size, the address. */
.messagelist td.subject span.date,
.messagelist td.subject span.size,
.messagelist td.subject span.fromto,
.listing .dim {
    color: var(--vt-dim);
}

/* The name of the folder that is open. */
.folder-list li > a,
.folderlist li > a,
#layout-sidebar .listing li a {
    color: var(--vt-dim);
}

.folder-list li.selected > a,
.folderlist li.selected > a,
.folder-list li > a:hover,
.folderlist li > a:hover {
    color: var(--vt-ink);
}

/* The bottom of the column with the folders. */
.colophon,
#layout-sidebar .footer,
.login-footer,
#login-footer {
    color: var(--vt-faint);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    background-color: transparent;
    border-color: var(--vt-rule);
}

/* -------------------------------------------------------------- the buttons */

/* The buttons of the site: a thin frame around the words, and the words
   themselves in small capitals. */
button,
.btn,
.button,
input[type=submit],
input[type=button] {
    font-family: inherit;
    border-radius: 3px;
}

button.btn,
.btn,
button.mainaction,
.button.mainaction {
    background: transparent;
    border: 1px solid var(--vt-rule);
    color: var(--vt-ink);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow: none;
}

button.btn:hover,
.btn:hover,
button.mainaction:hover,
.button.mainaction:hover {
    background: var(--vt-ink);
    border-color: var(--vt-ink);
    color: var(--vt-bg);
}

button.btn:focus,
.btn:focus,
button.mainaction:focus {
    box-shadow: none;
    outline: 1px solid var(--vt-ink);
    outline-offset: 1px;
}

.btn-primary,
.btn-danger {
    background: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-ink);
}

.btn-primary:hover {
    background: var(--vt-ink);
    color: var(--vt-bg);
}

.btn-danger:hover {
    background: var(--vt-danger);
    border-color: var(--vt-danger);
    color: var(--vt-bg);
}

/* -------------------------------------------------------------- the fields */

input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=number],
input[type=date],
input[type=datetime],
select,
textarea,
.form-control {
    background-color: transparent;
    border: 1px solid var(--vt-rule);
    border-radius: 3px;
    color: var(--vt-ink);
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--vt-faint);
}

/* The sign at the front of a field is part of the field: one frame
   around both. */
.input-group-text {
    background-color: transparent;
    border: 1px solid var(--vt-rule);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    color: var(--vt-dim);
}

.input-group > .form-control {
    border-left: 0;
    border-radius: 0 3px 3px 0;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background-color: transparent;
    border-color: var(--vt-ink);
    color: var(--vt-ink);
    box-shadow: none;
    outline: 0;
}

/* The frame around the field that is being written into is a blue one in
   the skin of Roundcube; here it is the colour of the ink. */
.form-control:focus:not(.is-invalid) {
    background-color: transparent;
    border-color: var(--vt-ink);
    color: var(--vt-ink);
    box-shadow: none;
    outline: 0;
}

/* The field of the recipients is a list of names, not an input, so the
   frame above does not reach it; it keeps a blue ring of its own. */
.form-control.focus,
.recipient-input.focus {
    background-color: transparent;
    border-color: var(--vt-ink);
    box-shadow: none;
    outline: 0;
}

/* The names of the fields are small capitals, like everywhere on the
   site. */
.propform label,
.formcontent label,
.form-group label,
td.title label {
    color: var(--vt-dim);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- the links */

a {
    color: var(--vt-ink);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--vt-ink);
    text-decoration: underline;
}

/* --------------------------------------------------------------- the panels */

/* The boxes of the mailbox are the same as the boxes of the site: a thin
   line around them and nothing else. */
.panel,
.box,
.ui-widget,
.ui-dialog,
.ui-menu,
.popover,
.dropdown-menu,
.quota-widget,
.message-header,
.ui-dialog .ui-dialog-content {
    background-color: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-ink);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .08);
}

.ui-widget-header,
.ui-dialog .ui-dialog-titlebar,
.popover-header,
.dropdown-menu > li > a:hover {
    background-color: transparent;
    color: var(--vt-dim);
    border-color: var(--vt-rule);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* The text of the message that is being read. */
#message-view,
#message-part,
.message-body,
.message-htmlpart,
body pre {
    background: transparent;
    color: var(--vt-ink);
}

/* --------------------------------------------------------- the login page */

/* The page in front of the mailbox wears the clothes of the site too. */
#layout-content .propform {
    margin: 0 auto;
}

#logo {
    opacity: .55;
    filter: grayscale(1);
}

#login-footer {
    border: 0;
    margin-top: 18px;
    text-align: center;
}

/* ---------------------------------------------------------- the scrollbars */

/* The scrollbar of the site: thin, quiet and round. */
html:not(.touch) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:not(.touch) ::-webkit-scrollbar-track {
    background: transparent;
}

html:not(.touch) ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 6px;
    background-color: var(--vt-faint);
    background-clip: padding-box;
}

html:not(.touch) ::-webkit-scrollbar-thumb:hover {
    background-color: var(--vt-dim);
}

html {
    scrollbar-color: var(--vt-faint) transparent;
    scrollbar-width: thin;
}

/* ----------------------------------------------------------------- the night */

/*
 * The skin of Roundcube paints the night in colours of its own, and
 * they are written down in the stylesheet with the class `dark-mode` in
 * them -- which gives them the stronger hand. The night of the site is
 * written down here with the same hand.
 */

html.dark-mode {
    scrollbar-color: var(--vt-faint) var(--vt-bg);
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track {
    background-color: transparent;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
    background-color: var(--vt-faint);
}

html.dark-mode body {
    color: var(--vt-ink);
    background-color: var(--vt-bg);
    /* The stars of the site are behind the night as well. */
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1px 1px at 42% 68%, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1px 1px at 88% 72%, rgba(255, 255, 255, .28), transparent),
        radial-gradient(1px 1px at 26% 84%, rgba(255, 255, 255, .3), transparent),
        radial-gradient(1.5px 1.5px at 60% 38%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1px 1px at 8% 52%, rgba(255, 255, 255, .24), transparent),
        radial-gradient(1px 1px at 94% 34%, rgba(255, 255, 255, .22), transparent),
        radial-gradient(1px 1px at 34% 12%, rgba(255, 255, 255, .2), transparent),
        radial-gradient(1px 1px at 68% 88%, rgba(255, 255, 255, .2), transparent);
    background-attachment: fixed;
}

html.dark-mode #layout-content,
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .footer,
html.dark-mode #layout > div > .header {
    background-color: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-dim);
}

html.dark-mode #layout > div > .footer,
html.dark-mode #layout > div > .header {
    color: var(--vt-dim);
}

/* The rail in the night: the same thin line as the page, not the blue
   grey of the stock skin. The buttons at its bottom sit on nothing. */
html.dark-mode #layout-menu {
    border-right-color: var(--vt-rule);
}

html.dark-mode #layout-menu .popover-header {
    border-bottom-color: var(--vt-rule-soft);
}

html.dark-mode #layout-menu .special-buttons a:not(:focus),
html.dark-mode #layout-menu .special-buttons a,
html.dark-mode #layout-menu .action-buttons a {
    background-color: transparent;
}

html.dark-mode #layout > div > .footer a.button,
html.dark-mode #layout > div > .header a.button,
html.dark-mode #taskmenu a,
html.dark-mode .menu.toolbar a {
    color: var(--vt-dim);
}

html.dark-mode #taskmenu a:hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover {
    background-color: var(--vt-hover);
    color: var(--vt-ink);
}

html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected {
    background: 0 0;
    color: var(--vt-ink);
}

html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a {
    color: var(--vt-ink);
}

html.dark-mode .listing li,
html.dark-mode .listing li ul,
html.dark-mode .listing tbody td {
    border-color: var(--vt-rule-soft);
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td {
    color: var(--vt-ink);
    background-color: var(--vt-picked);
}

html.dark-mode .listing li:hover > a,
html.dark-mode .listing tbody tr:hover > td {
    background-color: var(--vt-hover);
}

html.dark-mode .messagelist td.subject span.date,
html.dark-mode .messagelist td.subject span.size,
html.dark-mode .messagelist td.subject span.fromto {
    color: var(--vt-dim);
}

html.dark-mode .colophon,
html.dark-mode #layout-sidebar .footer,
html.dark-mode .login-footer,
html.dark-mode #login-footer {
    color: var(--vt-faint);
    background-color: transparent;
    border-color: var(--vt-rule);
}

html.dark-mode button.btn,
html.dark-mode .btn,
html.dark-mode button.mainaction,
html.dark-mode .button.mainaction {
    background: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-ink);
}

html.dark-mode button.btn:hover,
html.dark-mode .btn:hover,
html.dark-mode button.mainaction:hover,
html.dark-mode .button.mainaction:hover {
    background: var(--vt-ink);
    border-color: var(--vt-ink);
    color: var(--vt-bg);
}

html.dark-mode .btn-primary,
html.dark-mode .btn-danger {
    background: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-ink);
}

html.dark-mode .btn-danger:hover {
    background: var(--vt-danger);
    border-color: var(--vt-danger);
    color: var(--vt-bg);
}

html.dark-mode input[type=text],
html.dark-mode input[type=password],
html.dark-mode input[type=email],
html.dark-mode input[type=search],
html.dark-mode input[type=number],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-control {
    background-color: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-ink);
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode .form-control:focus,
html.dark-mode input.form-control:focus,
html.dark-mode textarea.form-control:focus {
    background-color: transparent;
    border-color: var(--vt-ink);
    color: var(--vt-ink);
    box-shadow: none;
    outline: 0;
}

html.dark-mode .form-control:focus:not(.is-invalid) {
    background-color: transparent !important;
    border-color: var(--vt-ink) !important;
    color: var(--vt-ink) !important;
    box-shadow: none;
    outline: 0;
}

/* The field of the recipients is a list of names: it carries the class
   .focus instead of the state, so the rules above pass it by. */
html.dark-mode .form-control.focus,
html.dark-mode .recipient-input.focus {
    background-color: transparent;
    border-color: var(--vt-ink);
    color: var(--vt-ink);
    box-shadow: none;
}

/* The bar of the editor is the page under a thin line, in both lights. */
.html-editor .editor-toolbar,
html.dark-mode .html-editor .editor-toolbar {
    background-color: transparent;
    border-color: var(--vt-rule);
}

.html-editor .editor-toolbar .mce-i-html:focus,
.html-editor .editor-toolbar .mce-i-html:hover,
html.dark-mode .html-editor .editor-toolbar .mce-i-html:focus,
html.dark-mode .html-editor .editor-toolbar .mce-i-html:hover {
    background-color: var(--vt-hover);
    border-color: transparent;
    color: var(--vt-ink);
}

html.dark-mode .propform label,
html.dark-mode .formcontent label,
html.dark-mode .form-group label,
html.dark-mode td.title label {
    color: var(--vt-dim);
}

html.dark-mode .input-group-text {
    background-color: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-dim);
}

html.dark-mode .input-group > .form-control {
    border-left: 0;
}

html.dark-mode a {
    color: var(--vt-ink);
}

html.dark-mode .panel,
html.dark-mode .box,
html.dark-mode .ui-widget,
html.dark-mode .ui-dialog,
html.dark-mode .ui-menu,
html.dark-mode .popover,
html.dark-mode .dropdown-menu,
html.dark-mode .quota-widget,
html.dark-mode .message-header {
    background-color: transparent;
    border-color: var(--vt-rule);
    color: var(--vt-ink);
    box-shadow: 0 12px 34px rgba(255, 255, 255, .05);
}

html.dark-mode .ui-widget-header,
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .popover-header {
    background-color: transparent;
    color: var(--vt-dim);
    border-color: var(--vt-rule);
}

html.dark-mode #message-view,
html.dark-mode #message-part,
html.dark-mode .message-body,
html.dark-mode .message-htmlpart,
html.dark-mode pre {
    background: transparent;
    color: var(--vt-ink);
}

html.dark-mode #logo {
    opacity: .6;
    filter: grayscale(1);
}