/* Phone-only additions to the Reminders page (the page's own CSS stays as it is). */

/* Lock screen and first unlock */
.rp-lock { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--bg, #f6f5f2); }
.rp-card { width: 100%; max-width: 360px; display: grid; gap: 10px; }
.rp-card h1 { font-family: var(--font-display, inherit); font-size: 30px; margin: 0; }
.rp-sub { margin: 0 0 8px; color: var(--muted, #777); }
.rp-card label { font-size: 13px; font-weight: 600; }
.rp-card input[type="password"] { font: inherit; font-size: 17px; padding: 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: var(--surface, #fff); color: var(--ink, #111); }
.rp-card .rp-rem { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--muted, #777); }
.rp-card button { font: inherit; font-weight: 600; font-size: 16px; padding: 13px; border: 0; border-radius: 10px; background: var(--ink, #111); color: var(--bg, #fff); }
.rp-card button:disabled { opacity: 0.5; }
.rp-bar { height: 6px; border-radius: 3px; background: var(--line, #ddd); overflow: hidden; }
.rp-bar i { display: block; height: 100%; width: 0; background: var(--ink, #111); }
.rp-msg { margin: 0; min-height: 1.4em; color: var(--muted, #777); }

/* Sync line: status, Sync, Lock */
.rp-sync { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--surface-2, #eee); border-bottom: 1px solid var(--line, #ddd); font-size: 12.5px; color: var(--muted, #777); }
.rp-sync .rp-st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-sync button { font: inherit; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: var(--ink, #111); }
.rp-sync.warn { color: var(--late, #b3261e); }

/* Phone width: bottom tabs, bigger Quick add, roomier taps */
@media (max-width: 720px) {
  html.rp-phone body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.rp-phone .viewbar .seg[role="tablist"] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr);
    margin: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); }
  html.rp-phone .viewbar .seg[role="tablist"] button { padding: 10px 2px; font-size: 12.5px; }
  html.rp-phone .qadd textarea { font-size: 17px; min-height: 44px; }
  html.rp-phone .hublink, html.rp-phone #settingsLink ~ a[href*="code"] { display: none; }
  html.rp-phone .sheet { max-height: none; }
}