/* ══════════════════════════════════════════════════════════════
   Notespark — mobile parity with the desktop light theme
   Isolated file. Load LAST, after the other nota-*.css files.

   Desktop was rebuilt around the warm-paper palette and title-case
   headers; mobile (.nota.compact) kept the older cool-grey treatment.
   These rules bring it in line.
   ══════════════════════════════════════════════════════════════ */

/* ── Surfaces ── */
.nota.theme-light.compact,
.nota.theme-light.compact .nota-main,
.nota.theme-light.compact .nota-body {
    background: var(--n-main) !important;
}

    .nota.theme-light.compact .nota-topbar,
    .nota.theme-light.compact .home-hero {
        background: var(--n-nav) !important;
        border-bottom: 1px solid var(--n-border-light) !important;
    }

    /* ── Bottom tab bar ── */
    .nota.theme-light.compact .nota-tabbar {
        background: var(--n-nav) !important;
        border-top: 1px solid var(--n-border-light) !important;
    }

    .nota.theme-light.compact .tab-item {
        color: var(--n-text-3) !important;
        text-transform: none !important;
        font-weight: 600;
    }

        .nota.theme-light.compact .tab-item.active {
            color: var(--n-accent-text) !important;
        }

    .nota.theme-light.compact .tab-label {
        text-transform: none !important;
        letter-spacing: 0;
        font-size: 11px;
    }

    /* ── Section headers: title case, matching desktop ── */
    .nota.theme-light.compact .home-sec-name {
        text-transform: none !important;
        letter-spacing: 0.005em !important;
        font-size: 13.5px;
        font-weight: 750;
        color: var(--n-text-2) !important;
    }

    .nota.theme-light.compact .home-sec-count {
        color: var(--n-text-4) !important;
    }

/* Trash row on the mobile home list — it navigates rather than expanding,
   so its chevron points right instead of down. */
.home-sec-chev-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--n-text-4);
    transform: none !important;
}

/* ── Mobile note menu: sized for Lucide icons, not emoji glyphs ── */
.nota.theme-light .note-menu {
    background: #fffdf9 !important;
    border: 1px solid var(--n-border-light) !important;
    box-shadow: var(--n-shadow) !important;
}

.nota.theme-light .note-menu-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: var(--n-text-2) !important;
    position: relative; /* the attach item wraps a hidden InputFile */
}

    .nota.theme-light .note-menu-item:hover {
        background: var(--n-surface-hover) !important;
        color: var(--n-text) !important;
    }

    .nota.theme-light .note-menu-item.danger {
        color: var(--n-danger) !important;
    }

    .nota.theme-light .note-menu-item.active {
        color: var(--n-accent-text) !important;
    }

/* ── Attachment strip needs room above the tab bar ── */
.nota.compact .att-strip {
    padding-bottom: 12px;
}

.nota.compact .att-link {
    max-width: 200px;
}

/* ══════════════════════════════════════════════════════════════
   Mobile back control
   Routed pages (/contacts, /trash, /tag/…) had no way back — in an
   installed PWA there's no browser chrome, so they were dead ends.
   MainLayout now shows a shared back button + page title on those.
   ══════════════════════════════════════════════════════════════ */
.nota.compact .topbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: -6px; /* optically align with the page content */
    background: none;
    border: none;
    border-radius: 9px;
    color: var(--n-text-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--n-transition), color var(--n-transition);
}

    .topbar-back:hover,
    .topbar-back:active {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

.topbar-title {
    font-size: 16px;
    font-weight: 750;
    color: var(--n-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   TOUCH: reveal-on-hover controls
   Every action cluster in the app follows the same desktop pattern —
   opacity:0 at rest, opacity:1 on :hover. On a touch device there is
   no hover, so all of these are simply unreachable. `hover: none`
   matches phones/tablets and leaves desktop untouched.

   !important is needed because the source rules are `:hover`-qualified
   (e.g. `.att-item:hover .att-del`) and out-specify a plain selector.
   ══════════════════════════════════════════════════════════════ */
@media (hover: none) {
    .notes-list .note-card-actions, /* pin / trash on a note card   */
    .cm-item .cm-actions, /* resolve / delete a comment  */
    .att-item .att-del, /* remove an attachment        */
    .tpl-item .tpl-item-del {
        /* delete a template           */
        opacity: 1 !important;
    }
}

/* The absolute-positioned action cluster is anchored by
   `.nota.theme-light.desktop .notes-list .note-card { position: relative }`
   — desktop only. Without this, on mobile it positions against whatever
   ancestor happens to be positioned and escapes the card entirely. */
.nota.compact .notes-list .note-card {
    position: relative;
}

/* ── Tap targets ──
   22–24px icon buttons are fine for a mouse and too small for a thumb.
   ~32px is the practical floor. */
.nota.compact .nc-act,
.nota.compact .cm-act {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.nota.compact .note-card-actions {
    gap: 4px;
    top: 6px;
    right: 6px;
}

/* Title clearance grows with the buttons */
.nota.compact .notes-list .note-card-title {
    padding-right: 76px;
}

/* ══════════════════════════════════════════════════════════════
   Comments — compose row
   Desktop lays textarea + button side by side. `.cm-input` is `flex: 1`
   with no `min-width: 0`, so a textarea's intrinsic width (~20 cols)
   stops it shrinking and the Comment button gets crushed. Stack them.
   ══════════════════════════════════════════════════════════════ */
.nota.compact .cm-compose {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.nota.compact .cm-input {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    /* 16px is the threshold below which iOS Safari zooms the viewport on
       focus — and it does not zoom back out afterwards. */
    font-size: 16px;
}

.nota.compact .cm-send {
    width: 100%;
    padding: 11px 14px;
    font-size: 14.5px;
}

/* Comment actions sit inline at the bottom of each item rather than
   floating right, so a 32px target doesn't squeeze the text column. */
.nota.compact .cm-item {
    flex-wrap: wrap;
}

.nota.compact .cm-body {
    flex: 1 1 100%;
}

.nota.compact .cm-actions {
    margin-left: auto;
}

/* Just a gap before whatever follows — clearing the tab bar is handled
   once on .editor-body, at the end of this file. */
.nota.compact .cm-panel {
    padding-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════
   Linked contact chips
   `.contact-chips` already wraps, but `.contact-chip-name` is
   `white-space: nowrap` with no max-width, so one long name pushes the
   chip past the viewport edge.
   ══════════════════════════════════════════════════════════════ */
.nota.compact .contact-chip {
    max-width: 100%;
}

.nota.compact .contact-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52vw;
}

.nota.compact .contact-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
}

.nota.compact .contact-strip {
    padding-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════
   Contact detail tabs
   nota-layout.css switches `.contact-tabs` to nowrap + overflow-x on
   mobile, but flex items still shrink by default, so the tabs squash
   instead of scrolling. flex-shrink:0 is what makes that block work.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .contact-tabs .contact-tab {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .contact-tabs {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
}

/* ══════════════════════════════════════════════════════════════
   Table toolbar
   `.tt-table-toolbar` sets `flex-wrap: wrap`, but the compact rule in
   nota-layout.css (`.nota.compact .tt-toolbar { flex-wrap: nowrap
   !important; overflow-x: auto }`) already wins, so it scrolls rather
   than wrapping. Only the label needs pinning so it doesn't scroll away
   from the buttons it labels.
   ══════════════════════════════════════════════════════════════ */
.nota.compact .tt-table-toolbar .tt-table-label {
    flex-shrink: 0;
}

.nota.compact .tt-table-toolbar .tt-btn {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   Bottom tab bar clearance
   The tab bar is fixed, so the last thing in the editor sits under it —
   the Comment button, the final attachment, or the contact chips,
   depending on what's open.

   Applied once to .editor-body rather than to each strip: they stack
   (comments → contacts → attachments), so per-strip padding would only
   help whichever happened to be last and would insert dead space
   between the others.

   nota-section.css scopes its own .editor-body padding to
   `.nota.theme-light.desktop`, so there's no clash here.
   ══════════════════════════════════════════════════════════════ */
.nota.compact .editor-body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

/* ══════════════════════════════════════════════════════════════
   One back button at a time
   Two back controls stack on the section route: MainLayout's routes-back
   in the topbar, and the editor's own back-to-note-list. They do
   different things — one leaves the section, one closes the note — but
   both render as ‹, so they read as the same control shown twice.

   With a note open, back means "close the note". On the note list, back
   means "leave the section". SectionView already flags the first state
   with .has-active-note on .section-page, and .nota is a common ancestor
   of both the topbar and the page, so :has() can reach it — no Blazor
   state, no MainLayout changes, nothing routed through the layout.
   ══════════════════════════════════════════════════════════════ */
.nota.compact:has(.section-page.has-active-note) .topbar-back {
    display: none !important;
}