/*
    TotmNoteEditor - the full-screen editor a tapped textarea opens. See Mobile-NoteEditor-Design.md.

    Every colour comes from a Tokens.css variable and nothing here depends on Theme.css, which is
    disabled under Tradie Classic. Dark.css redefines those same tokens, so Dark Mode works under
    either base theme with no duplicate colour-only rules. The overlay is appended to <body>,
    outside .ui-page, so Classic's 80% page zoom never shrinks it.
*/

.totm-note-editor {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    /* No wider than the screen being edited. Script sets left/width from the field's own
       data-role="page" when it opens (TotmNoteEditor's fitToScreen); this is the fallback until
       then, matching Mobile.css's 760px .ui-page column - with left and right both 0 on a fixed
       element, auto side margins centre it once max-width kicks in. */
    max-width: 760px;
    margin: 0 auto;
    /* Overridden from script with the visual viewport's height where there is one, so the bottom
       of the note is never behind the on-screen keyboard. */
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease, visibility 120ms ease;
    /* Above jQuery Mobile's fixed toolbars and popups, TotmPickerSheet (3000/3001) and the camera
       (3100); below the tour (3500+) and #ModalOverlay. */
    z-index: 3200;
}

.totm-note-editor.totm-open {
    visibility: visible;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .totm-note-editor {
        transition: none;
    }
}

/* The page underneath must not scroll while the editor covers it. */
html.totm-note-editor-open,
html.totm-note-editor-open body {
    overflow: hidden;
}

.totm-note-editor-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.totm-note-editor-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--type-lg);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.totm-note-editor-count {
    flex: 0 0 auto;
    font-size: var(--type-sm);
    color: var(--text-muted);
}

.totm-note-editor-done {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: var(--btn-add-bg);
    color: var(--text-on-brand);
    font-family: var(--font);
    font-size: var(--type-base);
    font-weight: 600;
    cursor: pointer;
}

.totm-note-editor-done:hover,
.totm-note-editor-done:focus {
    background: var(--btn-add-bg-hover);
}

/*
    The !importants beat the bare `textarea` rules in Theme.css and Dark.css (which give every
    textarea a border and a surface fill) - this box is the whole screen and wants neither.
    17px: iOS zooms the page into any text box whose font is under 16px when it takes the focus.
*/
textarea.totm-note-editor-text {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    box-sizing: border-box;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border: 0 !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    resize: none;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}