/* Managed by mailctl. */

/* "About" opens a version-and-credits dialog. On a service run for customers it
 * is chrome that invites questions and discloses the software, so it goes. CSS
 * rather than a skin edit: the menu comes from a vendor template that a
 * Roundcube upgrade overwrites, and this file does not. */
#taskmenu a.about,
#taskmenu a.button.about { display: none !important; }

/* The banner leans entirely on Elastic's .boxwarning, so colours, spacing and
 * dark mode come for free. It carries one sentence and no sender address --
 * see the comment in banner() for why the address was taken out. */
.external-banner { font-weight: 500; }

/* --- app passwords ------------------------------------------------------- */

/* The icon for the Settings entry. Elastic enumerates the selectors that get
 * font-family: Icons, and #settings-sections .listing li > a is one of them, so
 * only the codepoint is needed here. This is the FontAwesome key -- the font is
 * the complete set, not a subset. */
#settings-sections .listing li.app-passwords > a:before { content: "\f084"; }
#settings-sections .listing li.device-setup > a:before { content: "\f10b"; }

/* --- two-step verification ------------------------------------------------
 *
 * Two pages, written here rather than adapted from somebody else's markup, so
 * the layout follows the flow instead of apologising for it.
 *
 *   the settings page   four states, one action in each. Steps are numbered
 *                       only where there really is an order, and the order runs
 *                       across two devices -- the screen and the phone -- which
 *                       is exactly when a reader needs to be told which comes
 *                       first.
 *   the gate            what you see after the password. Modelled on the
 *                       sign-in page, because that is what it is a part of, and
 *                       deliberately without the folder list or the toolbar:
 *                       nothing about the mailbox should be on screen before
 *                       the second step is done.
 */

/* --- the rows in the Settings list -------------------------------------
 *
 * Elastic draws each row's icon from a rule keyed on the class of its <li>, and
 * the list carries "settings-default-icon" -- so a section it does not recognise
 * gets the generic cog. All three sections this system adds were therefore three
 * identical cogs, which is no help at all when you are looking for one of them.
 *
 * The codepoints are Font Awesome 5 solid, which this skin ships whole
 * (fa-solid-900.woff2 is the complete family, not a subset). Two of the three are
 * already used elsewhere in the skin's own stylesheet, so they are known to
 * render here rather than assumed to.
 */
.listing.iconized li.two-factor > a:before { content: "\f3ed"; }     /* shield */
.listing.iconized li.app-passwords > a:before { content: "\f084"; }  /* key */
.listing.iconized li.device-setup > a:before { content: "\f3cd"; }   /* phone */

/* NO padding override here, and that is the point of this comment.
 *
 * An earlier version set `padding-top: .25em` on this element and the page then
 * started flush against the header with nothing above the first line -- which is
 * what "there is no padding" meant. The skin's own padding is correct; nothing
 * here should touch it.
 *
 * Nor is there a heading. Elastic hides #layout-content > .header > .header-title
 * on a wide screen and detaches .boxtitle out of the content into it, so NO
 * settings page in this interface shows a title in the content pane -- the
 * highlighted row in the list to the left is the title. A heading here would be
 * the third copy of the same words. What the page needs instead is what the list
 * row cannot say: which state it is in, and what happens next. */

/* --- the state, first thing on the page ---------------------------------- */
.tfa .tfa-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em;
    margin: 0 0 1.1em;
}

/* --- the lead ---------------------------------------------------------- */
/* Slightly larger than body text and held to a readable measure. Two short
 * paragraphs: what changes, then why it is worth doing. */
.tfa .tfa-lead {
    max-width: 58ch;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 .75em;
}
.tfa .tfa-lead:last-of-type { margin-bottom: 1.4em; }
.tfa .hint { max-width: 58ch; line-height: 1.5; }

/* --- a panel, for the things that are prerequisites rather than prose ----
 *
 * The page used to be three paragraphs and a button, which is why it read as
 * unfinished: everything had the same weight, so nothing was the answer to
 * "what do I need before I press this". */
.tfa .tfa-panel {
    max-width: 58ch;
    margin: 0 0 1.6em;
    padding: .9em 1.1em;
    border: 1px solid rgba(128, 128, 128, .28);
    border-radius: .35rem;
    background: rgba(128, 128, 128, .05);
}
.tfa .tfa-panel-title {
    font-weight: 500;
    margin: 0 0 .35em;
}
.tfa .tfa-panel p {
    margin: 0;
    line-height: 1.55;
    opacity: .9;
}

/* --- steps ------------------------------------------------------------- */
.tfa .tfa-step {
    counter-increment: tfa-step;
    margin: 0 0 1.9em;
}
.tfa-setup { counter-reset: tfa-step; }
.tfa .tfa-step-title {
    display: flex;
    align-items: baseline;
    gap: .5em;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 .3em;
    padding: 0;
    border: 0;
}
.tfa .tfa-step-title::before {
    content: counter(tfa-step);
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    border-radius: 50%;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    background: rgba(128, 128, 128, .18);
}
.tfa .tfa-step > .hint { margin: 0 0 .7em 2.1em; }
.tfa .tfa-step > .tfa-qr,
.tfa .tfa-step > .tfa-manual,
.tfa .tfa-step > .tfa-confirm { margin-left: 2.1em; }

/* --- the picture ------------------------------------------------------- */
/* Its own white plate: the interface may be dark and a camera cannot read a
 * light-on-dark code. The image carries the ground as well, so this is only the
 * frame around it. */
.tfa .tfa-qr {
    display: inline-block;
    padding: .7em;
    background: #fff;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: .3rem;
    line-height: 0;
}
.tfa .tfa-qr-img { display: block; width: 208px; height: 208px; }

/* The same secret in letters, folded away because most people scan. */
.tfa .tfa-manual { margin-top: .9em; }
.tfa .tfa-manual > summary {
    cursor: pointer;
    display: inline-block;
    font-size: .9rem;
    opacity: .8;
}
.tfa .tfa-manual > summary:hover { opacity: 1; }
.tfa .tfa-manual > .hint { margin: .5em 0 .4em; }
.tfa .tfa-secret {
    display: inline-block;
    font-family: monospace;
    font-size: 1.05rem;
    letter-spacing: .06em;
    word-spacing: .35em;
    /* Selecting it must give exactly the secret and nothing around it. */
    user-select: all;
    -webkit-user-select: all;
    padding: .45em .6em;
    border-radius: .25rem;
    background: rgba(128, 128, 128, .12);
    max-width: 100%;
    overflow-wrap: break-word;
}

/* --- a code, and the button that acts on it ---------------------------- */
.tfa .tfa-confirm,
.tfa-gate .tfa-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
}
.tfa .tfa-code,
.tfa-gate .tfa-code {
    width: 6.5em;
    flex: 0 0 auto;
    font-family: monospace;
    font-size: 1.25rem;
    letter-spacing: .18em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tfa .tfa-actions { margin: .2em 0 0; }
/* A full sentence, not a field label: it says why a code is being asked for at
 * all, which "Code" on its own does not. So it gets its own line and normal
 * weight instead of being squeezed in front of the box. */
.tfa .tfa-actions-label {
    display: block;
    max-width: 58ch;
    line-height: 1.5;
    margin-bottom: .5em;
}

/* --- state: on --------------------------------------------------------- */

/* The state, as a word in a chip. Three of them, and the colour is always
 * redundant with the word: colour alone says nothing to a reader who cannot see
 * it, and a chip that only differs by hue is a chip that has to be decoded. */
.tfa .tfa-badge {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .22em .7em;
    border-radius: 1em;
    font-size: .85rem;
    font-weight: 500;
    background: rgba(40, 167, 69, .15);
    color: #1e7e34;
    border: 1px solid rgba(40, 167, 69, .35);
}
.tfa .tfa-badge::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
/* Stated explicitly rather than left to the default, so all three modifiers have
 * a rule and nobody has to work out which state is the one without one. */
.tfa .tfa-badge-on {
    background: rgba(40, 167, 69, .15);
    color: #1e7e34;
    border-color: rgba(40, 167, 69, .35);
}
.tfa .tfa-badge-off {
    background: rgba(128, 128, 128, .12);
    color: #6c757d;
    border-color: rgba(128, 128, 128, .38);
}
.tfa .tfa-badge-setup {
    background: rgba(255, 193, 7, .16);
    color: #8a6100;
    border-color: rgba(255, 193, 7, .45);
}
html.dark-mode .tfa .tfa-badge,
html.dark-mode .tfa .tfa-badge-on { color: #7bd48c; }
html.dark-mode /* Stated explicitly rather than left to the default, so all three modifiers have
 * a rule and nobody has to work out which state is the one without one. */
.tfa .tfa-badge-on {
    background: rgba(40, 167, 69, .15);
    color: #1e7e34;
    border-color: rgba(40, 167, 69, .35);
}
.tfa .tfa-badge-off { color: #adb5bd; }
html.dark-mode .tfa .tfa-badge-setup { color: #e8c064; }
.tfa .tfa-low {
    max-width: 62ch;
    line-height: 1.5;
    color: #a2571a;
}
html.dark-mode .tfa .tfa-low { color: #e0a35e; }
.tfa .tfa-lostall {
    margin-top: 1.4em;
    padding-top: 1em;
    border-top: 1px solid rgba(128, 128, 128, .22);
}
.tfa .tfa-abandon { margin: .4em 0 0 2.1em; }

/* --- state: codes ------------------------------------------------------ */
.tfa .tfa-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5em, 11em));
    gap: .5em .7em;
    margin: 1em 0 1.2em;
    max-width: 40em;
}
.tfa .tfa-rc {
    font-family: monospace;
    font-size: 1.05rem;
    text-align: center;
    padding: .45em .3em;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: .25rem;
    background: rgba(128, 128, 128, .07);
    user-select: all;
    -webkit-user-select: all;
    font-variant-numeric: tabular-nums;
}
.tfa .tfa-codebuttons { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }

/* --- the gate ---------------------------------------------------------- */
/* The sign-in page centres a narrow column on an empty ground; this continues
 * it, so arriving here reads as the second half of signing in rather than as a
 * mail interface that will not open.
 *
 * THE LOGO NEEDS ITS OWN SIZE HERE. The skin constrains it with
 * ".task-login #logo { max-height: 100px }" -- scoped to the login task, which
 * this page is not: it runs in the settings task so the gate can be reached
 * without the mail interface loading. Borrowing the object from login.html
 * therefore borrowed none of its CSS, and the SVG expanded to fill the window --
 * a wall of colour with the code field somewhere below the fold. Reusing a
 * template object means reusing the rules that sized it, or writing them again. */
body.action-plugin-two-factor-check #layout-content {
    overflow: auto;
    text-align: center;
}
body.action-plugin-two-factor-check #logo {
    display: block;
    width: auto;
    /* The same ceiling the skin gives it on the sign-in page (.task-login #logo
     * { max-height: 100px }). This page is the second half of signing in, and a
     * logo that changes size between the two halves reads as a different site. */
    max-width: 14rem;
    max-height: 100px;
    margin: 8vh auto 2.5rem;
}
@media (max-height: 560px) {
    body.action-plugin-two-factor-check #logo { margin-top: 3vh; }
}
.tfa-gate {
    max-width: 24em;
    margin: 0 auto;
    padding: 0 1.5em 3em;
    text-align: center;
}
.tfa-gate .tfa-gate-title {
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 .5em;
    padding: 0;
    border: 0;
}
.tfa-gate .tfa-gate-lead {
    margin: 0 0 1.4em;
    line-height: 1.5;
    opacity: .85;
}
.tfa-gate .tfa-confirm { justify-content: center; }
.tfa-gate .tfa-code { font-size: 1.5rem; width: 7.5em; }
.tfa-gate .tfa-gate-alt {
    margin: 1.3em 0 0;
    font-size: .9rem;
    line-height: 1.5;
}
.tfa-gate .tfa-gate-out { margin: 2em 0 0; font-size: .9rem; }
.tfa-gate .tfa-gate-logout { opacity: .75; }
.tfa-gate .tfa-gate-logout:hover { opacity: 1; }

@media (max-width: 480px) {
    .tfa .tfa-step > .hint,
    .tfa .tfa-step > .tfa-qr,
    .tfa .tfa-step > .tfa-manual,
    .tfa .tfa-step > .tfa-confirm,
    .tfa .tfa-abandon { margin-left: 0; }
    .tfa .tfa-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Only what the skin has no opinion about.
 *
 * The layout is not here on purpose. A condition row is a `.rulerow` holding a
 * `table.compact-table` inside a `.propform`, which is how managesieve draws the
 * same thing -- and that structure is what the skin's own rules address:
 *
 *   .propform td > .flexbox            { display: flex }
 *   @media (max-width: 576px)
 *     .propform table.compact-table tr { display: flex; flex-direction: column }
 *
 * So the row lays out across on a desktop and stacks on a phone without a line of
 * CSS from me. The first version of this file used a plain div with my own flex and
 * my own media query: the flex never applied (the skin scopes .flexbox to .propform
 * td), every control ended up full-width on its own line, and the mobile behaviour
 * was mine to maintain. Widths are left to the table too -- the columns size to
 * their longest option, as they do on the Filters page.
 */

/* What each rule does, under its name. */
.rules .rules-listing td.name { line-height: 1.4; }
.rules a.rules-name { font-weight: 500; }
.rules .rules-summary {
    font-size: .9rem;
    opacity: .75;
    /* Holds quoted values, which can be long: wrap rather than widen the table. */
    overflow-wrap: anywhere;
}
.rules tr.rules-off td.name { opacity: .6; }
.rules td.rules-actions { white-space: nowrap; text-align: right; }
.rules form.rules-inline { display: inline; margin: 0 0 0 .25rem; }
.rules .rules-lead { max-width: 62ch; line-height: 1.55; }
/* On a phone the buttons need the whole width rather than a nowrap column. */
@media screen and (max-width: 576px) {
    .rules td.rules-actions { white-space: normal; text-align: left; padding-top: .5rem; }
}

/* A chunk the form cannot express, shown as what it is. */
.rules .rules-kept { font-weight: 500; }
.rules .rules-rawtext,
.rules .rules-sample,
.rules .rules-body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    tab-size: 4;
    overflow-x: auto;
}
.rules .rules-rawtext {
    margin: .4rem 0;
    padding: .5rem .7rem;
    border-radius: .25rem;
    background: rgba(128, 128, 128, .1);
    font-size: .85rem;
    line-height: 1.45;
}
.rules .rules-body {
    white-space: pre;
    overflow-wrap: normal;
    resize: vertical;
    min-height: 16em;
    font-size: .95rem;
    line-height: 1.5;
}
.rules .rules-sample {
    margin: .6rem 0 0;
    padding: .7rem .9rem;
    border: 1px solid rgba(128, 128, 128, .28);
    border-radius: .25rem;
    background: rgba(128, 128, 128, .06);
    font-size: .85rem;
    line-height: 1.5;
}
.rules details.rules-raw,
.rules details.rules-example { margin: 1rem 0 0; }
.rules details.rules-raw > summary { cursor: pointer; font-weight: 500; }
.rules details.rules-example > summary { cursor: pointer; font-size: .9rem; opacity: .8; }
.rules .rules-managed {
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(128, 128, 128, .22);
}

/* The plus and the bin on each row.
 *
 * The skin already draws these, as `.propform td.rowbuttons a:before` -- scoped to
 * an anchor. An anchor cannot post a form without JavaScript, and this page works
 * without it, so the buttons are <button> and the same look is asked for here. Ten
 * lines, and the glyphs and the font are the skin's own: Icons/900 is the face it
 * loads, "\f067" the plus it uses on that row, "\f2ed" the bin. */
.rules .propform td.rowbuttons button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 2.3rem;
    height: 2.3rem;
    font-size: 1rem;
    min-width: 1.6rem;
}
.rules .propform td.rowbuttons button + button { margin-left: .5rem; }
.rules .propform td.rowbuttons button:before {
    content: "\f067";
    font-family: Icons;
    font-weight: 900;
    font-style: normal;
    display: inline-block;
    width: 1.18em;
    text-align: center;
    speak: none;
}
.rules .propform td.rowbuttons button.delete:before { content: "\f2ed"; }
.rules .propform td.rowbuttons button:hover { color: #1c69a5; }
.rules .propform td.rowbuttons button.delete:hover { color: #c0392b; }
.rules .propform td.rowbuttons button:disabled { opacity: .35; cursor: default; }
.rules .propform td.rowbuttons button:disabled:hover { color: inherit; }
/* The label is there for a screen reader; the skin hides it and so do we. */
.rules .propform td.rowbuttons button span { display: none; }

/* The form's default button, off-screen: see the note where it is emitted. */
.rules button.rules-enter {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.listing.iconized li.shared-rules > a:before { content: "\f0b0"; }   /* filter */

/* --- the unread count on the task bar ------------------------------------
 *
 * Elastic's task bar is a column of icons with a label under each. The badge sits
 * on the icon's corner, which is where every mail program puts it, and is
 * positioned against the link rather than the icon: the icon is a ::before
 * pseudo-element and nothing can be positioned relative to one.
 */
#taskmenu a.mail,
.menu a.mail { position: relative; }
.mail-badge {
    position: absolute;
    top: .55rem;
    left: 50%;
    margin-left: .35rem;
    min-width: 1.15rem;
    padding: 0 .25rem;
    box-sizing: border-box;
    border-radius: .6rem;
    background: #ff5552;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* The task bar is dark; a thin ring in its own colour keeps the badge from
     * touching the icon. */
    box-shadow: 0 0 0 2px #222f3e;
    pointer-events: none;
}
html.dark-mode .mail-badge { box-shadow: 0 0 0 2px #1a2027; }
/* On a phone the task bar is a row along the bottom and the icons are smaller. */
@media (max-width: 768px) {
    .mail-badge { top: .15rem; margin-left: .2rem; }
}