/* /reminders/ — the Reminders sub-app.
 *
 * Only what the shared sheets do not own: the shell header, buttons and page container
 * (app-shell.css), modal chrome (modal.css), custom selects (dropdown.css) and the toast
 * surface (js/shared/toast.js) all come from ../css/ and ../js/shared/.
 *
 * Colour contract: every surface, text and border goes through the SCHEME-AWARE roles in
 * tokens.css / shared.css (--md-surface-container-*, --md-on-surface*, --md-outline*, --brand*,
 * --signal-error-ink), which resolve per scheme on their own — so there is no `.dark` override
 * in this file and no hex literal.
 *
 * Do NOT use --inv-*. tokens.css declares that family scheme-invariant ("the always-dark panel
 * family"): it is the same dark value in light mode. The first version of this sheet read it as
 * a theme-aware surface, which painted every card dark on a light page and left the reminder
 * titles (dark text) unreadable; --inv-50/55/60/70/90 do not exist at all, so their fallbacks
 * were what actually rendered.
 */

/* --- page rhythm --- */
.rm-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block: var(--layout-pad) calc(var(--layout-pad) + env(safe-area-inset-bottom, 0px));
}

/* --- header: the Add action on phones is an icon-only square, like the shell's own icon buttons.
   app-shell.css gives .shell-btn a 44px/20px-padding box at <=640px; with the label hidden that
   is a wide pill, so pin it to the icon-button size the rest of the bar uses. --- */
.rm-add { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
    .rm-add { width: 44px; padding: 0; }
}
@media (max-width: 480px) {
    .rm-add { width: 40px; height: 40px; }
}

/* --- filter chips --- */
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--md-outline-variant);
    background: transparent;
    color: var(--md-on-surface-variant);
    border-radius: var(--md-shape-full);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.rm-chip:hover { background: var(--state-hover-tint); }
.rm-chip[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
}
.rm-chip:focus-visible,
.rm-ghost:focus-visible,
.rm-icon-btn:focus-visible,
.rm-day:focus-visible,
.rm-check:focus-visible,
.rm-select-check:focus-visible,
.rm-switch:focus-visible {
    outline: 2px solid var(--md-focus-ring-color);
    outline-offset: 2px;
}

/* Open-reminder count, printed inside the Active chip (it used to float in the app bar). */
.rm-count {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.rm-count.hidden { display: none; }

/* --- buttons (the filled action is the shared .shell-btn-filled; only the quiet one is local) --- */
.rm-ghost {
    border: 1px solid var(--md-outline-variant);
    background: transparent;
    color: var(--md-on-surface-variant);
    border-radius: var(--md-shape-full);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.14s ease;
}
.rm-ghost:hover { background: var(--state-hover-tint); }
.rm-ghost.is-danger { color: var(--signal-error-ink); }
.rm-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

.rm-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    border-radius: var(--md-shape-full);
    cursor: pointer;
    line-height: 0;
    transition: background-color 0.14s ease, color 0.14s ease;
}
/* Hover: the tint and the accent are two rules on purpose. check:contrast pairs a color with a
   background declared in the SAME rule and cannot tell which scheme a var() resolves in, so a
   combined rule reads the accent against the wrong surface. */
.rm-icon-btn:hover { background: var(--brand-container); }
.rm-icon-btn:hover { color: var(--brand-ink); }
.rm-icon-btn.is-danger:hover { color: var(--signal-error-ink); }

/* Press reaction — this app's own half of the shared press contract (check:ui-motion).
   Every control below declares cursor:pointer, so each one has to move on :active; the suite's
   spring is reused rather than a second easing curve. Declared here (not in css/shared.css) so the
   change stays inside this app and no SHARED_CACHE_NAME bump is owed to the other eight workers. */
.rm-chip:active,
.rm-ghost:active,
.rm-icon-btn:active,
.rm-day:active,
.rm-check:active,
.rm-select-check:active,
.rm-switch:active {
    transform: scale(0.96);
    transition-duration: var(--md-duration-xs);
}
@media (prefers-reduced-motion: reduce) {
    .rm-chip, .rm-ghost, .rm-icon-btn, .rm-day, .rm-select-check { transition: none; }
    .rm-chip:active, .rm-ghost:active, .rm-icon-btn:active,
    .rm-day:active, .rm-check:active, .rm-select-check:active, .rm-switch:active { transform: none; }
}

/* --- cards / list --- */
.rm-card {
    background: var(--md-surface-container-low);
    border-radius: var(--md-shape-lg);
    border: 1px solid var(--md-outline-variant);
    box-shadow: var(--md-elevation-1);
    /* Clips the row hover tint to the card's corners. Nothing inside the list is positioned out of
       it any more: the snooze presets are an in-flow row (.rm-snooze), not a popover. */
    overflow: hidden;
}
.rm-list { display: flex; flex-direction: column; }

/* --- bulk selection bar (inside the list card, above the rows) ------------------------------
   Reuses the ghost/chip controls and their radius; it is a plain in-flow toolbar, not a second
   sheet, so the list keeps its own hover/selected treatment underneath. */
.rm-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container);
}
.rm-bulk-bar.hidden { display: none; }
.rm-bulk-count {
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
}
.rm-bulk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* Empty state: an icon disc leading the message, so a fresh list reads as a place, not a blank.
   Same disc as .shell-empty in app-shell.css. */
.rm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 40px 16px;
    font-size: 14px;
    color: var(--md-on-surface-variant);
}
.rm-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--md-shape-full);
    background: var(--brand-container);
    color: var(--brand-ink);
}
.rm-empty-icon .material-symbols-outlined { font-size: 32px; }

.rm-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--md-outline-variant) 55%, transparent);
    transition: background-color 0.14s ease;
}
.rm-row:last-child { border-bottom: none; }
.rm-row:hover { background: var(--state-hover-tint); }

/* Circular check — the classic reminder affordance. appearance:none keeps the real input element so
   app.js's checked/disabled wiring is untouched; only the paint is custom. */
.rm-check {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: var(--md-shape-full);
    border: 2px solid var(--md-outline);
    background: transparent;
    color: var(--brand-on);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}
.rm-check::after {
    content: "";
    width: 10px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    margin-top: -2px;
    transition: transform 0.14s var(--md-spring-snappy-easing);
}
.rm-check:hover { border-color: var(--brand); }
.rm-check:checked {
    background: var(--brand);
    border-color: var(--brand);
}
.rm-check:checked::after { transform: rotate(-45deg) scale(1); }
.rm-check:checked:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.rm-check:disabled { opacity: 0.4; cursor: wait; }

/* Multi-select square (select mode only). A DIFFERENT shape and data-action from the circular
   done check above: one selects a row for a bulk action, the other still completes that row.
   It reuses the same paint tokens and only adds the small corner radius of a checkbox. */
.rm-select-check {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: var(--md-shape-xs);
    border: 2px solid var(--md-outline);
    background: transparent;
    color: var(--brand-on);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}
.rm-select-check::after {
    content: "";
    width: 9px;
    height: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    margin-top: -2px;
    transition: transform 0.14s var(--md-spring-snappy-easing);
}
.rm-select-check:hover { border-color: var(--brand); }
.rm-select-check:checked { background: var(--brand); border-color: var(--brand); }
.rm-select-check:checked::after { transform: rotate(-45deg) scale(1); }
.rm-select-check:checked:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* The selected row tint reuses the scheme-aware brand container; no radius is changed here, so
   the card's corner and the row hover/selected shape stay exactly what tip 714 shipped. */
.rm-row.is-selected { background: var(--brand-container); }

.rm-row-body { min-width: 0; flex: 1; }
.rm-row-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}
.rm-row.is-done .rm-row-title { text-decoration: line-through; opacity: 0.6; }
.rm-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.rm-due { font-size: 12px; color: var(--md-on-surface-variant); }
.rm-due.is-overdue { color: var(--signal-error-ink); font-weight: 500; }
.rm-notes {
    margin-top: 6px;
    font-size: 13px;
    color: var(--md-on-surface-variant);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.rm-badge {
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--md-shape-full);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface-variant);
}
.rm-badge.is-repeat { background: var(--brand-container); color: var(--brand-ink); }
.rm-badge.is-overdue { background: var(--md-error-container); color: var(--md-on-error-container); }
.rm-row-actions { display: flex; align-items: center; gap: 2px; flex: none; }

/* Snooze presets — an in-flow row under the reminder's own text. It used to be an absolutely
   positioned popover inside the card, which the card's overflow clipped on the last row. */
.rm-snooze {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
/* The bulk bar's own preset row reuses those chips but sits flush under its toolbar. */
.rm-bulk-presets { flex-basis: 100%; margin-top: 0; }
.rm-bulk-presets.hidden { display: none; }

.rm-footnote { font-size: 12px; color: var(--md-on-surface-variant); text-align: center; padding: 4px 8px; }
.rm-muted { font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px; }
.rm-card-title { font-size: 14px; font-weight: 600; color: var(--md-on-surface); }

/* --- quiet hours --- */
.rm-dnd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; }
.rm-dnd-times { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 16px 16px; transition: opacity 0.14s ease; }
.rm-dnd-times.is-off { opacity: 0.5; }
.rm-time-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--md-on-surface-variant); }
.rm-time, .rm-input {
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
    border-radius: var(--md-shape-md);
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.rm-time:focus, .rm-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent);
}
.rm-time { width: auto; }

/* The quiet-hours switch — a real toggle (appearance:none). The knob rides on ::before; the track
   fills with --brand when checked, and the knob flips to the paired --brand-on. */
.rm-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 26px;
    flex: none;
    border-radius: var(--md-shape-full);
    background: var(--md-outline);
    border: none;
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.rm-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--md-shape-full);
    background: var(--md-surface);
    box-shadow: var(--md-elevation-1);
    transition: transform 0.18s var(--md-spring-snappy-easing), background-color 0.18s ease;
}
.rm-switch:checked { background: var(--brand); }
.rm-switch:checked::before { transform: translateX(18px); background: var(--brand-on); }
.rm-switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- dialogs (bottom sheet on phones, centred card above) --- */
.rm-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: color-mix(in srgb, var(--md-scrim) 45%, transparent);
}
.rm-overlay.hidden { display: none; }
@media (min-width: 640px) { .rm-overlay { align-items: center; } }

.rm-sheet {
    background: var(--md-surface-container-low);
    color: var(--md-on-surface);
    border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--md-elevation-2);
}
@media (min-width: 640px) { .rm-sheet { border-radius: var(--md-shape-xl); max-height: 84vh; } }
.rm-sheet-sm { max-width: 26rem; }
.rm-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 8px;
}
.rm-sheet-title { font-size: 16px; font-weight: 600; color: var(--md-on-surface); }
.rm-sheet-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 4px; }
.rm-sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 6px; }
.rm-field { display: flex; flex-direction: column; gap: 6px; }
.rm-label { font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.rm-hint { font-size: 12px; color: var(--md-on-surface-variant); }
.rm-textarea { resize: none; }

.rm-weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-weekdays.hidden, .rm-field.hidden { display: none; }
.rm-day {
    width: 36px;
    height: 36px;
    border-radius: var(--md-shape-full);
    border: 1px solid var(--md-outline-variant);
    background: transparent;
    color: var(--md-on-surface-variant);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.rm-day:hover { background: var(--state-hover-tint); }
.rm-day[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
}

/* --- folder manager --- */
.rm-folder-rows { display: flex; flex-direction: column; gap: 8px; }
.rm-folder-row { display: flex; align-items: center; gap: 8px; }
.rm-folder-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* The field takes the slack; the button keeps its label on one line instead of being squeezed to
   a two-character column. */
.rm-folder-add .rm-input,
.rm-folder-row .rm-input { flex: 1; min-width: 0; }
.rm-folder-add .shell-btn { flex: none; white-space: nowrap; }
.rm-folder-empty { font-size: 13px; color: var(--md-on-surface-variant); }

/* --- quick add / search / sort --------------------------------------------------------------
   Same surface, radius and focus treatment as the editor's inputs; the quick-add field takes the
   slack and the action keeps its label. Nothing here introduces a second font or palette. */
.rm-quick-add { display: flex; align-items: center; gap: 8px; }
.rm-quick-add .rm-input { flex: 1; min-width: 0; }
.rm-quick-add .shell-btn { flex: none; white-space: nowrap; }
.rm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-search { display: flex; flex: 1 1 220px; min-width: 0; }
.rm-search .rm-input { width: 100%; }
#sort-chips { flex: none; }
@media (max-width: 640px) {
    #sort-chips { flex: 1 1 100%; }
}

/* --- derived priority dot (overdue / today / this week / later) ----------------------------
   A dot beside the title, not a new badge: the due line and its Overdue badge already carry the
   words. Colour is the only thing it adds, and every value is a scheme-aware token. */
.rm-priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--md-shape-full);
    background: var(--md-outline);
    vertical-align: 0.08em;
}
.rm-priority-dot.is-overdue { background: var(--signal-error-ink); }
.rm-priority-dot.is-today { background: var(--brand); }
.rm-priority-dot.is-week { background: var(--signal-warning-ink); }
.rm-priority-dot.is-later { background: var(--md-outline); }

/* --- date-grouped "calendar" list ----------------------------------------------------------
   Reuses .rm-row; a quiet heading per bucket and one hairline between buckets. */
.rm-group + .rm-group { border-top: 1px solid var(--md-outline-variant); }
.rm-group-title {
    margin: 0;
    padding: 10px 16px 4px;
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
}
.rm-group .rm-row:last-child { border-bottom: none; }