/* ══════════════════════════════════════════════════════════════
   Notespark — reminders
   Isolated file. Load after the other nota-*.css files.
   ══════════════════════════════════════════════════════════════ */

/* ── Dialog ── */
.rm-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(40, 32, 20, 0.28);
}

/* Bottom sheet on a phone — a centred modal with the keyboard up leaves
   the save button somewhere unreachable. */
.nota.compact .rm-overlay {
    align-items: flex-end;
    padding: 0;
}

.rm-panel {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--n-border-light);
    border-radius: 16px;
    padding: 18px 20px 20px;
    box-shadow: 0 18px 50px rgba(70, 55, 30, 0.22);
}

/* The fields scroll, not the whole panel. On desktop this is inert —
   no height cap, so it never overflows and never scrolls. */
.rm-body {
    min-height: 0;
}

/* Bottom sheet: cap the height, scroll the fields, and let the actions
   sit below them as a normal flex sibling.

   This used to make .rm-panel itself the scroll container with .rm-actions
   `position: sticky; bottom: 0` inside it. The panel reserved 96px of
   bottom padding and the bar's `margin-bottom: -96px` cancelled it exactly,
   so the bar had no empty space to occupy and painted over the last thing
   in the flow — the datetime field. It read as the sheet being cut off; it
   was actually the field sitting underneath the buttons.

   A flex column has no such balancing act: the header and actions take
   their natural height and the body gets whatever is left. */
.nota.compact .rm-panel {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    /* Horizontal padding only — the actions bar owns the bottom now. */
    padding: 18px 20px 0;
    overflow: hidden;
}

.nota.compact .rm-body {
    flex: 1 1 auto;
    /* Without min-height:0 a flex item won't shrink below its content, so
       it would grow past max-height instead of scrolling. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nota.compact .rm-actions {
    flex: 0 0 auto;
    /* Full-bleed against the panel's horizontal padding so the divider
       spans the sheet. */
    margin: 16px -20px 0;
    /* The bottom tab bar is fixed and paints over the sheet, so the row
       has to clear it. 92px matches the clearance .editor-body uses in
       nota-mobile.css — same bar, same number, so they move together.
       The strip behind the tab bar is white sheet against a white bar,
       so it reads as continuous rather than as a gap. */
    padding: 12px 20px calc(92px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--n-border-light);
}

/* Thumb-sized targets — these are the two things you came here to press. */
.nota.compact .rm-btn {
    padding: 12px 18px;
    font-size: 15px;
}

.rm-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 750;
    color: var(--n-text);
    margin-bottom: 16px;
}

.rm-x {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--n-text-4);
    cursor: pointer;
}

    .rm-x:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

.rm-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--n-text-4);
    margin: 14px 0 6px;
}

    .rm-label:first-of-type {
        margin-top: 0;
    }

.rm-input {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    /* 16px — below that, iOS Safari zooms the viewport on focus and
       doesn't zoom back. */
    font-size: 16px;
    color: var(--n-text);
    background: #fff;
    border: 1px solid var(--n-border-light);
    border-radius: 10px;
    outline: none;
}

    .rm-input:focus {
        border-color: rgba(108, 92, 231, 0.45);
        box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
    }

.rm-when {
    margin-top: 9px;
}

/* ── Quick picks ──
   Most reminders are "later today" or "tomorrow morning". One tap for
   those leaves the picker for the awkward ones. */
.rm-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rm-chip {
    padding: 7px 13px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--n-text-2);
    background: var(--n-surface);
    border: 1px solid var(--n-border-light);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--n-transition), border-color var(--n-transition);
}

    .rm-chip:hover {
        border-color: var(--n-card-border-hover);
    }

    .rm-chip.on {
        color: var(--n-accent-text);
        background: var(--n-accent-dim);
        border-color: rgba(108, 92, 231, 0.35);
    }

.rm-error {
    margin-top: 12px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--n-danger);
    background: var(--n-danger-bg);
    border-radius: 9px;
}

.rm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.rm-btn {
    padding: 9px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
}

.rm-cancel {
    background: none;
    color: var(--n-text-3);
}

    .rm-cancel:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

.rm-save {
    background: var(--n-accent);
    color: #fff;
}

    .rm-save:hover {
        background: var(--n-accent-hover);
    }

    .rm-save:disabled {
        opacity: 0.55;
        cursor: default;
    }

/* ══════════════════════════════════════════════════════════════
   Reminder rows — on a note, and on the Today timeline
   ══════════════════════════════════════════════════════════════ */
.rm-strip {
    margin: 18px 0 6px;
    padding: 14px 0 0;
    border-top: 1px solid var(--n-border-light);
}

.rm-strip-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: var(--n-text-3);
    margin-bottom: 10px;
}

.rm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 7px;
    background: #fff;
    border: 1px solid var(--n-border-light);
    border-left: 3px solid var(--n-text-4);
    border-radius: 0 11px 11px 0;
    font-family: inherit;
    text-align: left;
}

    /* Overdue is amber, not red. A reminder you haven't got to isn't an
   error, and red items that never clear stop being read. */
    .rm-row.overdue {
        border-left-color: #d8a84a;
        background: rgba(216, 168, 74, 0.07);
    }

    .rm-row.done {
        opacity: 0.5;
    }

        .rm-row.done .rm-row-title {
            text-decoration: line-through;
        }

.rm-row-body {
    flex: 1;
    min-width: 0;
}

.rm-row-title {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--n-text);
}

.rm-row-when {
    font-size: 11.5px;
    color: var(--n-text-3);
    margin-top: 2px;
}

.rm-row.overdue .rm-row-when {
    color: #8a6220;
    font-weight: 650;
}

.rm-row-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--n-text-4);
    cursor: pointer;
    flex-shrink: 0;
}

    .rm-row-act:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

    .rm-row-act.danger:hover {
        background: var(--n-danger-bg);
        color: var(--n-danger);
    }

/* Reveal-on-hover doesn't exist on touch, so the actions stay put. */
@media (hover: none) {
    .rm-row-act {
        opacity: 1 !important;
    }
}

/* ── Due badge on the Today nav item ── */
.rm-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #8a6220;
    background: rgba(216, 168, 74, 0.22);
    border-radius: 9px;
}

/* ══════════════════════════════════════════════════════════════
   Reminders on the Today rail
   Reminders sit on the spine with everything else rather than in a
   block above it — the rail already carries upcoming meetings with
   hollow dots, so a future item there is an established idea, and a
   reminder at 10:32 belongs at 10:32.
   ══════════════════════════════════════════════════════════════ */
.tl-rem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--n-surface);
    border-radius: 10px;
}

    .tl-rem.overdue {
        background: rgba(216, 168, 74, 0.12);
    }

    .tl-rem.done {
        opacity: 0.5;
    }

        .tl-rem.done .tl-rem-title {
            text-decoration: line-through;
        }

.tl-rem-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tl-rem-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--n-text);
}

.tl-rem-sub {
    font-size: 10.5px;
    color: var(--n-text-4);
}

/* The add button sits with the day arrows but reads as an action rather
   than navigation. */
.tl-addrem {
    color: var(--n-accent-text) !important;
    background: var(--n-accent-dim) !important;
    border-color: rgba(108, 92, 231, 0.30) !important;
}

/* "Reminder" prefix on the rail. The rows around it read "Edited X" and
   "Created Y", so a bare title doesn't announce itself as something still
   to do. */
.tl-rem-label {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a6220;
    background: rgba(216, 168, 74, 0.22);
    border-radius: 5px;
    vertical-align: 1px;
}

/* ══════════════════════════════════════════════════════════════
   Sidebar capture rows
   Quick note, Voice note and Remind me are the three ways of starting
   something. They're siblings of New Note, so they should read as one
   quiet group — the outlined boxes made them compete with each other
   and with the primary button above.
   ══════════════════════════════════════════════════════════════ */
.nota.theme-light .sb-caprow {
    border: none !important;
    background: none !important;
    border-radius: 9px;
}

    .nota.theme-light .sb-caprow:hover {
        background: var(--n-surface-hover) !important;
    }

/* Colour lives on the icon only. Three outlined pills in three colours
   was more insistent than a capture shortcut needs to be. */
.nota.theme-light .cap-quick .nota-icon {
    color: #d9a521;
}

.nota.theme-light .cap-voice .nota-icon {
    color: #d64545;
}

.nota.theme-light .cap-remind .nota-icon {
    color: var(--n-accent-text);
}

.nota.theme-light .sb-cap-lbl {
    color: var(--n-text-2) !important;
}

/* Recording keeps its outline — that one IS a state worth announcing. */
.nota.theme-light .sb-caprow.recording {
    background: rgba(229, 115, 115, 0.10) !important;
    border: 1px solid rgba(229, 115, 115, 0.40) !important;
}

/* Reminder shortcut in the mobile hero, matching the voice and quick
   note buttons beside it. */
.nota.theme-light .home-hero-action.cap-remind .nota-icon {
    color: var(--n-accent-text);
}

/* ══════════════════════════════════════════════════════════════
   Mobile hero layout
   The brand and the action buttons were sharing one row, and with six
   buttons the logo was overlapped. Stack them: logo centred on its own
   line, actions as a centred row beneath.
   ══════════════════════════════════════════════════════════════ */
.nota.compact .home-hero-brand {
    display: flex !important;
    justify-content: center;
    margin-bottom: 12px;
}

/* The base rule is position:absolute (top-right), which is why six buttons
   floated over the logo rather than pushing it down. Put them back in
   normal flow so they occupy their own row. */
.nota.compact .home-hero-actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 0 0 4px;
}

/* The hero itself has to stack rather than lay its children out in a row. */
.nota.compact .home-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ══════════════════════════════════════════════════════════════
   Reminders on Home
   The section reuses .home-sec / .home-row so it sits in the same
   rhythm as Recently edited and Quick notes. Only the overdue
   treatment and the done tick are new.
   ══════════════════════════════════════════════════════════════ */
.sec-ic-remind {
    color: var(--n-accent-text);
}

/* Amber, not red — matching the timeline rows. A reminder you haven't
   got to isn't an error, and red items that never clear stop being read. */
.home-sec-count.overdue {
    color: #8a6220;
    background: rgba(216, 168, 74, 0.22);
}

.home-row.hr-remind.overdue .home-row-meta {
    color: #8a6220;
    font-weight: 650;
}

/* The tick sits where the date does on a note row, so the columns line
   up down the list. Bigger target on touch, per the 32px floor. */
.home-row.hr-remind .home-row-date {
    cursor: pointer;
    color: var(--n-text-4);
    border-radius: 7px;
}

    .home-row.hr-remind .home-row-date:hover {
        color: var(--n-success, #10B981);
        background: var(--n-surface-hover);
    }

.nota.compact .home-row.hr-remind .home-row-date {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}