:root {
    --navy: #1d3557;
    --navy-light: #2a4a73;
    --bg: #f4f6fa;
    --card: #ffffff;
    --text: #1a2333;
    --muted: #6b7686;
    --blue: #2876d4;
    --line: #e6eaf1;
    --sel: #e3ecf8;
    --input-border: #d6dce6;
    --btn2: #e7ebf2;
    --danger: #c0392b;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --navy: #2e4a76;
      --bg: #10141b;
      --card: #1b212c;
      --text: #e9edf4;
      --muted: #93a0b1;
      --line: #2a323f;
      --sel: #263a57;
      --input-border: #3a4452;
      --btn2: #2a323f;
      --danger: #e0604f;
    }
  }
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  html { overflow: hidden; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    /* lock the page so iOS can't rubber-band / pull-to-refresh the whole screen */
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
  }
  header {
    background: var(--navy);
    color: #fff;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px 20px;
    margin-top: calc(-1 * env(safe-area-inset-top));
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  header h1 { font-size: 20px; font-weight: 700; letter-spacing: .3px; }
  .who-btn {
    background: rgba(255,255,255,.16); border: 0; color: #fff;
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 7px 13px; border-radius: 99px; cursor: pointer;
  }
  main {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px;
  }

  /* ---------- Bottom action bar (in-flow, not floating) ---------- */
  .action-bar {
    flex-shrink: 0; display: flex; gap: 10px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line);
  }
  .action-bar button {
    font: inherit; font-weight: 700; font-size: 16px;
    padding: 15px 0; border: 0; border-radius: 14px; cursor: pointer; color: #fff;
  }
  #bar-add { flex: 1.5; background: var(--navy); }
  #bar-scan { flex: 1; background: #2e9e5b; }

  /* ---------- "Whose phone is this?" screen ---------- */
  #picker {
    position: fixed; inset: 0; background: var(--navy);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 13px; padding: 30px; z-index: 50;
  }
  #picker h2 { color: #fff; font-size: 22px; margin-bottom: 8px; text-align: center; }
  #picker .pick {
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 340px; background: #fff; border: 0; border-radius: 16px;
    padding: 13px 16px; font: inherit; font-size: 19px; font-weight: 600; color: var(--text);
    cursor: pointer;
  }
  #picker .lock { margin-left: auto; font-size: 17px; opacity: .55; }
  .avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; font-weight: 700;
  }

  /* ---------- "What's next" banner ---------- */
  .next-up {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: var(--navy); color: #fff; border: 0; cursor: pointer;
    border-radius: 14px; padding: 12px 15px; margin-bottom: 12px;
    font: inherit; font-size: 15px; text-align: left;
  }
  .next-up .nu-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .next-up .nu-label { opacity: .7; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
  .next-up b { font-weight: 700; }
  .next-up .nu-when { margin-left: auto; opacity: .85; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* ---------- Weather ---------- */
  .wx { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .wx b { color: var(--text); font-weight: 700; }

  /* ---------- View switch + search ---------- */
  .view-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
  }
  .seg {
    display: flex; background: var(--btn2); border-radius: 12px; padding: 3px; gap: 2px;
  }
  .seg button {
    font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none;
    color: var(--muted); padding: 8px 11px; border-radius: 10px; cursor: pointer;
    white-space: nowrap;
  }
  .seg button.on {
    background: var(--card); color: var(--text);
    box-shadow: 0 1px 3px rgba(20,30,50,.14);
  }
  .icon-btn {
    border: 0; background: var(--btn2); border-radius: 12px;
    font-size: 16px; padding: 9px 12px; cursor: pointer;
  }
  /* tap-a-name filter row (also doubles as the color key) */
  .filter-chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  .fchip {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 99px;
    border: 1.5px solid var(--input-border); background: var(--card); color: var(--text);
  }
  .fchip .fdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .fchip.on { color: #fff; border-color: transparent; }
  .fchip.on .fdot { background: #fff !important; }
  .fchip.dim { opacity: .45; }
  .recap-launch {
    width: 100%; text-align: center; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--blue); background: var(--card); cursor: pointer;
    border: 1px solid var(--line); border-radius: 14px; padding: 13px; margin-bottom: 14px;
  }

  /* ---------- Recap ---------- */
  .recap-sec { font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--muted); margin: 18px 0 8px; }
  .recap-sec:first-child { margin-top: 4px; }
  .recap-big { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.1; }
  .recap-big span { font-size: 15px; font-weight: 600; color: var(--muted); }
  .recap-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
  .recap-chip {
    display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600;
    background: var(--bg); border-radius: 99px; padding: 6px 13px 6px 9px;
  }
  .recap-chip i { width: 10px; height: 10px; border-radius: 50%; }
  .recap-line { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
  .recap-line b { color: var(--text); font-weight: 700; }
  .agenda-day {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--muted); margin: 18px 4px 8px;
  }

  /* ---------- "Whose schedule is this?" chips ---------- */
  .who-chips { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
  .who-chip {
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    padding: 7px 14px; border-radius: 99px;
    border: 1.5px solid var(--input-border); background: none; color: var(--text);
  }
  .who-chip.on { color: #fff; border-color: transparent; }

  /* ---------- To-do list ---------- */
  .todo-add { display: flex; gap: 8px; margin-bottom: 14px; }
  .todo-add input {
    flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px;
    border: 1px solid var(--input-border); border-radius: 12px;
    background: var(--card); color: var(--text); outline: none;
  }
  .todo-add button {
    font: inherit; font-weight: 700; font-size: 15px; border: 0; border-radius: 12px;
    background: var(--navy); color: #fff; padding: 0 18px; cursor: pointer;
  }
  .todo-row {
    display: flex; align-items: center; gap: 12px; background: var(--card);
    border-radius: 14px; box-shadow: 0 1px 4px rgba(20,30,50,.08);
    padding: 12px 14px; margin-bottom: 10px;
  }
  .todo-row input[type=checkbox] { width: 23px; height: 23px; accent-color: var(--navy); flex-shrink: 0; }
  .todo-main { flex: 1; min-width: 0; }
  .todo-text { font-size: 16px; font-weight: 600; overflow-wrap: break-word; }
  .todo-row.done .todo-text { text-decoration: line-through; color: var(--muted); font-weight: 400; }
  .todo-del { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 4px 6px; cursor: pointer; flex-shrink: 0; }

  /* ---------- Calendar ---------- */
  .cal-card {
    background: var(--card); border-radius: 16px;
    box-shadow: 0 1px 4px rgba(20,30,50,.08); padding: 12px;
  }
  .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .cal-nav button { border: 0; background: none; font-size: 26px; color: var(--navy); padding: 0 16px 4px; cursor: pointer; }
  .cal-month { font-size: 17px; font-weight: 700; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
  .cal-dow { font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
  .cal-day {
    position: relative; padding: 5px 0 12px; border: 0; background: none;
    font: inherit; font-size: 15px; cursor: pointer; border-radius: 10px;
  }
  .cal-day .num {
    display: inline-flex; width: 27px; height: 27px;
    align-items: center; justify-content: center; border-radius: 50%;
  }
  /* days that spill in from the prev/next month — clearly greyed out */
  .cal-day.other .num { color: var(--muted); }
  .cal-day.other .cal-dots i { opacity: .55; }
  /* the first spill-over day of a month gets a little "Jul 1" label */
  .cal-day.bd .num {
    width: auto; min-width: 27px; padding: 0 7px;
    border-radius: 13px; font-size: 11px; font-weight: 700;
  }
  .cal-day.today .num { background: var(--navy); color: #fff; font-weight: 700; }
  /* days off work/school glow so they're easy to spot at a glance
     (green = UAB holiday, red = Trussville schools out, split = both);
     :not(.sel) keeps the tapped-day highlight visible on top */
  .cal-day.off-uab:not(.sel) { background: rgba(46, 158, 91, .32); }
  .cal-day.off-school:not(.sel) { background: rgba(214, 60, 44, .30); }
  .cal-day.off-both:not(.sel) {
    background: linear-gradient(135deg, rgba(46,158,91,.34) 49%, rgba(214,60,44,.32) 51%);
  }
  .cal-day.sel { background: var(--sel); }
  .cal-legend {
    display: none; gap: 16px; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 0 2px;
  }
  .cal-legend i {
    width: 9px; height: 9px; border-radius: 3px;
    display: inline-block; margin-right: 5px; vertical-align: -1px;
  }
  .cal-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; }
  .cal-dots i { width: 5px; height: 5px; border-radius: 50%; }
  @keyframes slide-left { from { transform: translateX(26px); opacity: .35; } to { transform: none; opacity: 1; } }
  @keyframes slide-right { from { transform: translateX(-26px); opacity: .35; } to { transform: none; opacity: 1; } }
  .day-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 22px 4px 10px;
  }
  .section-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--muted);
  }
  .today-chip {
    border: 1px solid var(--input-border); background: var(--card); color: var(--blue);
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 5px 13px; border-radius: 99px; cursor: pointer;
  }
  .ev {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: var(--card); border: 0; text-align: left; font: inherit; color: var(--text);
    border-radius: 14px; box-shadow: 0 1px 4px rgba(20,30,50,.08);
    padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
  }
  .ev-owner { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
  .ev-time { font-size: 12px; font-weight: 700; color: var(--muted); width: 58px; flex-shrink: 0; }
  .ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ev-title { font-size: 16px; font-weight: 600; overflow-wrap: break-word; }
  .ev-by { font-size: 12px; color: var(--muted); }
  .ev-chev { color: var(--muted); font-size: 20px; flex-shrink: 0; }

  /* ---------- Photo scan ---------- */
  #scan-wait {
    position: fixed; inset: 0; background: rgba(15,25,40,.75); z-index: 60;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; color: #fff; font-size: 17px; font-weight: 600; text-align: center; padding: 30px;
  }
  #scan-wait.open { display: flex; }
  .spin {
    width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid rgba(255,255,255,.25); border-top-color: #fff;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  #scan-list { max-height: 45vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .scan-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 4px; border-bottom: 1px solid var(--line);
  }
  .scan-item input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--navy); }
  .scan-item .si-title { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: break-word; }
  .scan-item .si-dup { display: block; font-size: 12px; font-weight: 600; color: #b8860b; margin-top: 2px; }
  .scan-item .si-when { font-size: 12px; color: var(--muted); flex-shrink: 0; text-align: right; }

  /* ---------- Add-event sheet ---------- */
  #ev-sheet {
    position: fixed; inset: 0; background: rgba(15,25,40,.45);
    display: none; align-items: flex-end; z-index: 45;
  }
  #ev-sheet.open { display: flex; }
  .sheet {
    background: var(--card); border-radius: 20px 20px 0 0; width: 100%;
    padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  }
  .sheet h3 { font-size: 18px; margin-bottom: 6px; }
  .sheet label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 0 4px; }
  .sheet input, .sheet select {
    width: 100%; font: inherit; font-size: 16px; padding: 11px 12px;
    border: 1px solid var(--input-border); border-radius: 10px;
    background: var(--bg); color: var(--text); outline: none;
  }
  .sheet-row { display: flex; gap: 10px; }
  .sheet-row > div { flex: 1; min-width: 0; }
  .loc-sug {
    border: 1px solid var(--input-border); border-radius: 10px;
    margin-top: 6px; overflow: hidden;
  }
  .loc-sug button {
    display: block; width: 100%; text-align: left; border: 0;
    background: var(--card); color: var(--text); font: inherit; font-size: 14px;
    padding: 11px 12px; cursor: pointer; border-bottom: 1px solid var(--line);
  }
  .loc-sug button:last-child { border-bottom: 0; }
  .loc-sug button:active { background: var(--sel); }

  .sheet-btns { display: flex; gap: 10px; margin-top: 20px; }
  .sheet-btns button {
    flex: 1; font: inherit; font-size: 16px; font-weight: 700;
    padding: 13px; border-radius: 12px; border: 0; cursor: pointer;
  }
  .btn-save { background: var(--navy); color: #fff; }
  .btn-cancel { background: var(--btn2); color: var(--text); }
  .btn-danger {
    background: none; color: var(--danger);
    border: 1.5px solid var(--danger) !important;
  }
  .sheet-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .sheet-stack button {
    font: inherit; font-size: 16px; font-weight: 700;
    padding: 13px; border-radius: 12px; border: 0; cursor: pointer;
  }
  #detail-when { font-size: 16px; color: var(--text); margin-top: 6px; }
  #detail-by { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .detail-loc { font-size: 15px; color: var(--text); margin-top: 12px; overflow-wrap: break-word; }
  .detail-dir {
    display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 700;
    color: var(--blue); text-decoration: none;
  }
  .detail-leave {
    margin-top: 12px; padding: 11px 14px; border-radius: 12px;
    background: var(--sel); font-size: 16px; color: var(--text);
  }
  .detail-leave b { font-weight: 800; }
  .detail-leave span { color: var(--muted); font-size: 13px; font-weight: 400; }

  /* ---------- Toast (slide-up message, replaces browser alert) ---------- */
  #toast {
    position: fixed; left: 16px; right: 16px;
    bottom: calc(90px + env(safe-area-inset-bottom));
    z-index: 80; display: flex; align-items: center; gap: 12px;
    background: var(--navy); color: #fff; border-radius: 14px;
    padding: 14px 16px; box-shadow: 0 6px 22px rgba(10,20,40,.32);
    font-size: 15px; font-weight: 600;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  #toast.show { opacity: 1; transform: none; pointer-events: auto; }
  #toast.bad { background: var(--danger); }
  #toast .toast-msg { flex: 1; min-width: 0; }
  #toast .toast-act {
    border: 0; background: rgba(255,255,255,.22); color: #fff;
    font: inherit; font-weight: 700; font-size: 14px;
    padding: 8px 14px; border-radius: 10px; cursor: pointer; flex-shrink: 0;
  }

  /* ---------- Ask sheet (styled yes/no, replaces browser confirm) ---------- */
  #ask-sheet {
    position: fixed; inset: 0; background: rgba(15,25,40,.45);
    display: none; align-items: flex-end; z-index: 70;
  }
  #ask-sheet.open { display: flex; }
  #ask-msg { font-size: 16px; color: var(--text); margin-top: 6px; white-space: pre-line; line-height: 1.45; }

  /* ---------- PIN pad (replaces the browser prompt) ---------- */
  #pin-sheet {
    position: fixed; inset: 0; background: rgba(15,25,40,.55);
    display: none; align-items: flex-end; z-index: 75;
  }
  #pin-sheet.open { display: flex; }
  #pin-input {
    width: 100%; font: inherit; font-size: 24px; letter-spacing: 8px; text-align: center;
    padding: 14px 12px; margin-top: 10px;
    border: 1px solid var(--input-border); border-radius: 12px;
    background: var(--bg); color: var(--text); outline: none;
  }
  #pin-err { color: var(--danger); font-size: 14px; font-weight: 600; margin-top: 8px; min-height: 18px; }

  /* ---------- Passcode gate (locks the app to the family) ---------- */
  #gate {
    position: fixed; inset: 0; background: var(--navy); z-index: 90;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 30px; text-align: center;
  }
  #gate.open { display: flex; }
  #gate h2 { color: #fff; font-size: 22px; }
  #gate p { color: rgba(255,255,255,.75); font-size: 14px; max-width: 300px; }
  #gate input {
    width: 100%; max-width: 260px; font: inherit; font-size: 22px; letter-spacing: 6px;
    text-align: center; padding: 14px; border: 0; border-radius: 12px; outline: none;
    background: #fff; color: var(--text);
  }
  #gate button {
    width: 100%; max-width: 260px; font: inherit; font-weight: 700; font-size: 16px;
    padding: 14px; border: 0; border-radius: 12px; background: #2e9e5b; color: #fff; cursor: pointer;
  }
  #gate .gate-err { color: #ffd0c8; font-size: 14px; font-weight: 600; min-height: 18px; }

  /* ---------- Small "syncing" hint next to the month ---------- */
  .sync-hint { font-size: 12px; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity .2s; }
  .sync-hint.on { opacity: 1; }

  /* Bigger, easier day taps (Apple recommends ~44px targets) */
  .cal-day { min-height: 44px; }

  /* Respect the phone's "reduce motion" accessibility setting */
  @media (prefers-reduced-motion: reduce) {
    #cal-grid { animation: none !important; }
    #toast { transition: none; }
    .spin { animation: none; }
  }