/* Calmly Writer Online: what the free editor in a browser tab shows differently
   from the app, loaded after the app's own style.css. The app's stylesheet
   stays the app's; nothing here applies anywhere else (online-assemble.js
   links this file only into the online page). */

/* One document at a time: no strip of tabs at the top (nor the band it sits
   in), no recent files (there are no files), and nothing that writes to a
   path. Nor Find, which is the browser's here (calmly.js show_search). */
#tabcontainer,
#onlytabs,
#addtab,
#opopenrecent,
#opsavedirect,
#opexport,
#opupdateavailable,
#opfind {
    display: none !important;
}

/* Text is selected as text. The app's style.css gives div.main
   `user-select: all`, from when .main itself was the contenteditable; it is
   the editor's wrapper now, not editable, and Firefox takes `all` at its
   word: a click in the text selected the whole of .main, and ProseMirror,
   its caret left where it was, did Enter and Backspace there (at the end of
   the document, after a click in the middle of a list). Chromium, the app's
   only engine, ignores it inside an editable element. */
div.main {
    user-select: text;
}

/* At calmlywriter.com (without www), while its documents go to www and the
   page with them (www_move.js): nothing to type into that would be left
   behind. */
html.cw-moving body {
    visibility: hidden;
}

/* Without the band, the scrollbar runs from the top of the page: the track's
   margin was the room for the strip of tabs. */
.wrapper::-webkit-scrollbar-track,
body.touch-mode .wrapper::-webkit-scrollbar-track {
    margin-top: 0;
}

/* No word target, for now: its button beside the counter is the only way to
   set one (calmly.js openWritingGoalDialog), and a target is never stored, so
   without it there is none. */
#set_target_button {
    display: none !important;
}

/* No shortcuts shown, neither on the menu's items nor while Ctrl is held
   (#shortcuts): in a browser tab most of them are the browser's
   (browser_keys.js). */
#options .shortcuts,
#shortcuts {
    display: none !important;
}

/* The menu opens from the Calmly Writer lotus at the top left, as it always
   did online (online-assemble.js puts it in place of the app's icon). */
#calmlylogo img {
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px;
    padding: 1px;
}

body.touch-mode #calmlylogo {
    padding: 0;
}

/* It fades in and out where it is, as in the old online editor, instead of
   the app's slide from above: in at once, out slowly after a second's pause
   once the user writes. */
#calmlylogo,
#calmlylogo.menu-visible,
#calmlylogo.hide-delayed {
    transform: none;
}

#calmlylogo {
    transition: opacity 0.2s ease-out;
}

#calmlylogo.hide-delayed {
    transition: opacity 0.8s ease-out 1s;
}

/* A page in a browser shows the hand over what can be clicked, as every other
   page does; the app, a window of its own, keeps the arrow of a desktop app.
   The lotus, the menu and its side panels (Open, Save, Preferences), and the
   formatting toolbar over a selection and the link's tooltip. */
#calmlylogo,
#options a.option,
#openrecent_window a.option,
#preferences_window a.option,
#preferences_window [role="radio"],
.side_window select,
.editor_tooltip a:not(.btdisabled),
#tooltip_make_links_openable {
    cursor: pointer;
}

/* Licenses, at the end of Preferences: the app sets the arrow on it inline. */
#preferences_window a.option[role="button"] {
    cursor: pointer !important;
}

/* The menu's last item, the paid app: its platforms on a second line, under
   the label. */
#opgetpro {
    margin-top: 12px;
}

#opgetpro .getpro_platforms,
.online_moreoptions .getpro_platforms {
    display: block;
    padding-left: 0px;
    font-size: 12px;
    opacity: .55;
}

/* In the settings panel, "More options" (preferences.js): its last row. */
.online_moreoptions {
    margin-bottom: 16px;
}

/* ── Welcome screen ─────────────────────────────────────────────────────── */

/* A card over the editor, in the site's type (Google Sans Flex, the latin
   subset, served with the page: the policy allows no font from elsewhere). It
   is fetched only when the welcome is shown, the one thing that uses it. */
@font-face {
    font-family: 'Google Sans Flex';
    src: url(GoogleSansFlex-latin.woff2) format('woff2');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

#splash_screen {
    /* Ink: the site's near-black on light themes, near-white on dark ones. */
    --splash-ink: rgb(23, 23, 23);
    --splash-on-ink: #fff;
    --splash-card: var(--modal, #fff);
    --splash-line: color-mix(in srgb, var(--splash-ink) 14%, transparent);
    --splash-backdrop: rgba(20, 20, 20, .26);
    position: fixed;
    inset: 0;
    /* Over the counter and the touch format bar (9001-9100), under the app's
       dialogs (9999). */
    z-index: 9500;
    /* The page behind doesn't scroll; this does, card and all, when the card
       is taller than the window. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--splash-ink) 30%, transparent) transparent;
    display: flex;
    justify-content: center;
    padding: 48px 0;
    box-sizing: border-box;
    background: var(--splash-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: var(--splash-ink);
    font-family: 'Google Sans Flex', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-optical-sizing: auto;
    animation: splash-in .35s ease-out;
}

body.darkmode #splash_screen,
body.bluemode #splash_screen,
body.blackmode #splash_screen,
body.oldschool #splash_screen {
    --splash-ink: rgb(240, 240, 240);
    --splash-on-ink: rgb(23, 23, 23);
    --splash-backdrop: rgba(0, 0, 0, .55);
}

body.dunemode #splash_screen {
    --splash-ink: rgb(53, 48, 37);
    --splash-on-ink: rgb(252, 246, 228);
}

#splash_screen[hidden] {
    display: none;
}

@keyframes splash-in {
    from { opacity: 0; }
}

@keyframes splash-card-in {
    from { opacity: 0; transform: translateY(16px); }
}

#splash_content {
    box-sizing: border-box;
    width: min(540px, calc(100% - 32px));
    height: max-content;
    margin: auto 0;
    padding: 32px 32px 28px;
    border-radius: 28px;
    background: var(--splash-card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .06);
    animation: splash-card-in .45s cubic-bezier(.2, .8, .2, 1);
}

.splash_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.splash_top img {
    display: block;
}

.splash_help {
    color: inherit;
    font-size: 15px;
    text-decoration: none;
    opacity: .7;
}

.splash_help:hover {
    opacity: 1;
    text-decoration: underline;
}

#splash_content h1 {
    margin: 28px 0 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--splash-line);
    font-size: 30px;
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.splash_lead {
    margin: 24px 0 0;
    font-size: 19px;
    line-height: 1.38;
}

.splash_actions {
    display: grid;
    margin-top: 28px;
}

.splash_button {
    min-height: 50px;
    padding: 8px 16px;
    border: 1.5px solid var(--splash-ink);
    border-radius: 12px;
    background: transparent;
    color: var(--splash-ink);
    font: inherit;
    font-size: 17px;
    font-weight: 550;
    cursor: pointer;
    transition: background-color .15s, opacity .15s;
}

#start_writing {
    background: var(--splash-ink);
    color: var(--splash-on-ink);
}

#start_writing:hover {
    opacity: .85;
}

.splash_button:focus-visible {
    outline: 2px solid var(--main-button, rgb(42, 186, 255));
    outline-offset: 2px;
}

#p_android_promo {
    margin: 20px 0 0;
    text-align: center;
    font-size: 15px;
}

#p_android_promo a {
    color: inherit;
    text-decoration: none;
}

.newpill .newtag {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 4px;
    border-radius: 999px;
    background: var(--splash-ink);
    color: var(--splash-on-ink);
    font-size: 80%;
}

/* A phone: the card is the whole screen. */
@media (max-width: 600px) {
    #splash_screen {
        padding: 0;
    }

    #splash_content {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 24px 20px;
        border-radius: 0;
        box-shadow: none;
    }

    .splash_lead {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #splash_screen,
    #splash_content {
        animation: none;
    }
}

/* ── Open and Save panels (the app's side panel, #openrecent_window) ────── */

/* The panels' fields and buttons are of the family of the app's dropdowns
   (select.selectdropdown): 36px high, rounded, on a tint of the text colour,
   and lined up with them and the titles, 10px in. */
#openrecent_window {
    --online-control-bg: color-mix(in srgb, var(--default-text-color) 8%, transparent);
    --online-control-hover: color-mix(in srgb, var(--default-text-color) 13%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
    #openrecent_window {
        --online-control-bg: var(--selector-background);
        --online-control-hover: var(--menu-hover);
    }
}

/* Their first title (after the back arrow, shown only when narrow) at the
   height of Settings' first one, which calmly.js puts 16px down a panel
   without padding: the 12px of #openrecent_window are for the desktop's list
   of recent files. */
#openrecent_window {
    padding-top: 0;
}

#openrecent_window > .menuback + .prTitle {
    margin-top: 16px;
}

.online_field {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 22px);
    height: 36px;
    margin: 4px 12px 12px 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    outline: none;
    background-color: var(--online-control-bg);
    color: var(--default-text-color);
    font: inherit;
    font-size: 14px;
    transition: background-color .2s ease-out, box-shadow .2s ease-out;
}

.online_field:focus {
    box-shadow: 0 0 0 1.5px var(--main-button, rgb(42, 186, 255));
}

.online_field::placeholder {
    color: var(--default-text-color);
    opacity: .5;
}

/* Under "Documents in this browser", before them: how long they last. A box
   tinted with a warm warning colour, which leads the note in each theme. */
#openrecent_window {
    --online-warn: #c2410c;
}

body.darkmode #openrecent_window,
body.bluemode #openrecent_window,
body.blackmode #openrecent_window {
    --online-warn: #f0a35e;
}

body.dunemode #openrecent_window {
    --online-warn: #9a4a12;
}

body.oldschool #openrecent_window {
    --online-warn: #ecba6d;
}

.online_docs_note {
    margin: 2px 12px 14px 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--online-warn) 35%, transparent);
    border-radius: 9px;
    background-color: color-mix(in srgb, var(--online-warn) 9%, transparent);
    color: color-mix(in srgb, var(--default-text-color) 85%, transparent);
    font-size: 13px;
    line-height: 1.5;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .online_docs_note {
        border-color: var(--online-warn);
        background-color: transparent;
        color: var(--default-text-color);
    }
}

.online_docs_note strong {
    color: var(--online-warn);
    font-weight: 600;
}

.online_doclist {
    margin-bottom: 8px;
}

.online_docrow {
    display: flex;
    align-items: flex-start;
}

.online_docrow .online_doc {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.online_doc_title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.online_doc_meta {
    display: block;
    font-size: 12px;
    opacity: .55;
}

.online_doc_current .online_doc_title {
    font-weight: 600;
}

.online_doc_delete {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 6px 8px 0 4px;
    border-radius: 4px;
    background-color: var(--default-text-color);
    -webkit-mask: url(delete.svg) no-repeat center;
    mask: url(delete.svg) no-repeat center;
    opacity: .35;
    cursor: pointer;
}

.online_doc_delete:hover,
.online_doc_delete:focus-visible {
    opacity: .8;
}

/* The old editor's documents as they were (documents_panel.js): a link under
   the list, only where there are any, and each one's download. */
.online_originals_link {
    display: block;
    margin: 4px 12px 18px 24px;
    font-size: 13px;
    opacity: .6;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.online_originals_link:hover,
.online_originals_link:focus-visible {
    opacity: .9;
}

.online_original_download {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 6px 8px 0 4px;
    background-color: var(--default-text-color);
    -webkit-mask: url(save.svg) no-repeat center;
    mask: url(save.svg) no-repeat center;
    opacity: .35;
    pointer-events: none;
}

/* On a touch screen too, the date and size under the title: the app's
   style.css makes every .option a centred row there (body.touch-mode
   .option), which put them beside it, squeezed onto three or four lines on a
   phone. The icon at the row's middle, as the menu's are. */
body.touch-mode .online_docrow {
    align-items: center;
}

body.touch-mode .online_docrow .online_doc {
    display: block;
}

body.touch-mode .online_doc_delete,
body.touch-mode .online_original_download {
    margin-top: 0;
}

.online_doclist_empty {
    margin: 4px 24px 12px;
    opacity: .55;
    font-size: 14px;
}

/* .prevSelector puts its text 10px in, as the dropdown's label below it. */
.online_savelabel {
    display: block;
    margin: 4px 0 6px;
}

/* One under the other, as wide as the name above them. */
.online_saveactions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 12px 24px 10px;
}

.online_savebutton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background-color: var(--online-control-bg);
    color: var(--default-text-color);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease-out, opacity .2s ease-out;
}

.online_savebutton_primary {
    background-color: var(--main-button, rgb(42, 186, 255));
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .online_savebutton:hover {
        background-color: var(--online-control-hover);
    }

    .online_savebutton_primary:hover {
        background-color: var(--main-button, rgb(42, 186, 255));
        opacity: .88;
    }
}

.online_savebutton:focus-visible {
    outline: 2px solid var(--main-button, rgb(42, 186, 255));
    outline-offset: 2px;
}

/* An icon in a button, drawn in the button's colour, as the menu's are. */
.online_buttonicon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.touch-mode .online_field,
body.touch-mode .online_savebutton {
    height: 44px;
}

/* A short notice that goes away by itself (toast.js). */
#online_toast {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 2000;
    max-width: calc(100% - 32px);
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--default-text-color, #333);
    color: var(--background-color, #fff);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity .25s ease-out, transform .25s ease-out;
}

#online_toast.online_toast_shown {
    opacity: .92;
    transform: translate(-50%, 0);
}

/* The formatting toolbar, as wide as the buttons it shows here: the app's
   fixed widths count the buttons this edition hides (comments, task lists,
   code). max-content, not auto: the toolbar's box has no width of its own to
   fill. editor.js measures it to centre it on the selection. */
.editor_tooltip ul,
.editor_tooltip_extended ul {
    width: max-content;
}