/* ===== Reminders (Phase 29) =====

   Built entirely from the existing theme tokens, so dark mode and RTL work
   without a second stylesheet. Two choices carry the module's identity, and
   both come from vocabulary this app already has:

     the time column   Oswald, the face the app uses on its plates and its
                       brand mark, set tabular. A reminders list is read
                       down the left edge by time, the way a shift board is.
     the hazard edge   an overdue reminder gets the same diagonal stripe the
                       Maintenance Mode banner uses (--hazard-a / --hazard-b).
                       It is the one loud thing here, and it only appears when
                       something is actually late.

   Everything else is deliberately quiet. Logical properties throughout
   (inset-inline, margin-inline, border-inline-start) so Arabic and Kurdish
   mirror correctly. */

:root{
  --rem-late:var(--rust);
  --rem-late-soft:var(--pill-red-bg);
  --rem-rail:88px;
}

/* ---------- header button ---------- */
.rem-topbar-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:11px; cursor:pointer;
  background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink);
  font:600 13px/1 'Inter',sans-serif; box-shadow:var(--shadow);
  margin-inline-start:auto;
}
.rem-topbar-btn:hover{ background:var(--surface-hover); }
.rem-topbar-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rem-topbar-btn svg{ color:var(--steel); }
.rem-topbar-btn.has-due svg{ color:var(--rem-late); }
.rem-badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:20px;
  background:var(--rem-late); color:#fff; font:700 11px/20px 'Inter',sans-serif; text-align:center;
}
/* The EOTM strip grows to fill the bar; when it is visible it already pushes
   the button to the end, so the auto margin would only add a gap. */
.eotm-strip:not(.hidden) ~ .rem-topbar-btn{ margin-inline-start:0; }
@media (max-width:640px){
  .rem-topbar-label{ display:none; }
  .rem-topbar-btn{ padding:9px 10px; }
}

/* ---------- hub ---------- */
#remindersOverlay > .modal.rem-hub{
  max-width:720px; display:flex; flex-direction:column;
  max-height:88vh; max-height:88dvh; overflow:hidden;
}
.rem-hub > .modal-head{ flex:0 0 auto; gap:12px; }
.rem-hub-head-actions{ display:flex; align-items:center; gap:8px; }
/* app.css styles every `.modal-head button` as a bare icon button (no
   background, soft ink), and that selector outranks `.btn-primary`. The one
   real button in this header restates the primary look at matching weight. */
.modal-head .btn.btn-primary.rem-new-btn{
  padding:8px 14px; font-size:13px;
  background:var(--btn-primary-bg); border-color:var(--btn-primary-bg); color:var(--btn-primary-ink);
}
.modal-head .btn.btn-primary.rem-new-btn:hover{ filter:brightness(1.06); }
.rem-x{ width:34px; height:34px; border-radius:9px; font-size:15px; }
.rem-x:hover{ background:var(--surface-hover); }

.rem-hub-controls{ flex:0 0 auto; padding:12px 22px 10px; border-bottom:1px solid var(--panel-edge); display:flex; flex-direction:column; gap:10px; }
.rem-tabs{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin:0 -4px; padding:0 4px; }
.rem-tabs::-webkit-scrollbar{ display:none; }
.rem-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:9px; border:1px solid transparent; background:none;
  color:var(--ink-soft); font:600 13px/1 'Inter',sans-serif; cursor:pointer; white-space:nowrap;
}
.rem-tab:hover{ color:var(--ink); background:var(--surface-hover); }
.rem-tab.active{ color:var(--ink); background:var(--surface-soft); border-color:var(--panel-edge); }
.rem-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.rem-tab-n{
  min-width:18px; padding:2px 6px; border-radius:10px; font-size:11px; line-height:14px; text-align:center;
  background:var(--pill-gray-bg); color:var(--pill-gray-text);
}
.rem-tab[data-rem-tab="today"] .rem-tab-n{ background:var(--rem-late-soft); color:var(--pill-red-text); }
.rem-hub-filters{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rem-search{
  flex:1 1 220px; min-width:0; border:1px solid var(--panel-edge); border-radius:10px; padding:8px 11px;
  background:var(--panel); color:var(--ink); font:13px 'Inter',sans-serif;
}
.rem-search:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
.rem-scope{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; user-select:none; }

.rem-hub-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:6px 22px 18px; }
.rem-hub-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 22px 14px; border-top:1px solid var(--panel-edge); font-size:12.5px; color:var(--ink-soft);
}
.rem-hub-foot span{ flex:1 1 260px; }

.rem-group{
  position:sticky; top:0; z-index:1; background:var(--panel);
  padding:12px 0 6px; font:600 12px/1.2 'Inter',sans-serif; color:var(--ink-soft);
}
.rem-group.is-overdue{ color:var(--rem-late); }

.rem-empty{
  padding:48px 16px; text-align:center; color:var(--ink-soft); font-size:13.5px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}

/* ---------- one reminder ---------- */
.rem-item{
  position:relative; display:grid; grid-template-columns:var(--rem-rail) minmax(0,1fr) auto; gap:14px;
  padding:12px 12px 12px 0; border-top:1px solid var(--panel-edge);
}
.rem-group + .rem-item{ border-top:none; }
.rem-item::before{
  content:""; position:absolute; inset-block:10px; inset-inline-start:0; width:3px; border-radius:3px;
  background:var(--panel-edge);
}
.rem-item.is-overdue::before{
  width:5px;
  background:repeating-linear-gradient(135deg, var(--hazard-a) 0 5px, var(--hazard-b) 5px 10px);
}
.rem-item.is-done{ opacity:.72; }
.rem-item.is-done::before{ background:var(--patina); }

.rem-when{ padding-inline-start:14px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.rem-when-main{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:19px; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:.2px; white-space:nowrap;
}
.rem-when-sub{ font-size:11.5px; color:var(--ink-soft); line-height:1.3; overflow-wrap:anywhere; }
.rem-item.is-overdue .rem-when-main,
.rem-item.is-overdue .rem-when-sub{ color:var(--rem-late); }
.rem-item.is-done .rem-when-main{ font-size:14px; color:var(--patina); }

.rem-main{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.rem-title{ font-weight:600; font-size:14px; color:var(--ink); line-height:1.35; overflow-wrap:anywhere; }
.rem-item.is-done .rem-title{ text-decoration:line-through; text-decoration-color:var(--ink-soft); }
.rem-note{
  font-size:12.5px; color:var(--ink-soft); line-height:1.45; white-space:pre-line; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.rem-meta{ font-size:11.5px; color:var(--ink-soft); }

.rem-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.rem-actions{ display:flex; gap:4px; }
.rem-act{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid var(--panel-edge); background:var(--panel); color:var(--ink-soft);
  cursor:pointer; font-size:15px; line-height:1;
}
.rem-act:hover{ color:var(--ink); background:var(--surface-hover); }
.rem-act:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.rem-act:disabled{ opacity:.5; cursor:default; }
.rem-act-done{ color:var(--patina); font-weight:700; }
.rem-act-done:hover{ background:var(--pill-green-bg); border-color:var(--pill-green-border); color:var(--pill-green-text); }

/* ---------- pills ---------- */
.rem-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.rem-pill{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:4px 9px; border-radius:20px; border:1px solid var(--panel-edge);
  background:var(--surface-soft); color:var(--ink); font:500 12px/1.2 'Inter',sans-serif;
}
.rem-pill-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.rem-pill-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--rem-dot, var(--accent)); }
.rem-pill-link{ cursor:pointer; }
.rem-pill-link:hover{ border-color:var(--steel); color:var(--steel); background:var(--pill-blue-soft-bg); }
.rem-pill-link:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.rem-pill-gone{ color:var(--ink-soft); border-style:dashed; background:none; }
.rem-pill-locked{ color:var(--ink-soft); background:none; }
.rem-attach-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:220px;
  padding:4px 9px; border-radius:8px; border:1px solid var(--panel-edge); background:var(--panel);
  color:var(--ink-soft); font:500 12px/1.2 'Inter',sans-serif; cursor:pointer;
}
.rem-attach-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rem-attach-chip:hover{ color:var(--ink); background:var(--surface-hover); }

/* ---------- avatars ---------- */
.rem-avs{ display:inline-flex; }
.rem-av{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:2px solid var(--panel); background:var(--pill-blue-soft-bg);
}
.rem-avs .rem-av + .rem-av{ margin-inline-start:-8px; }
.rem-av-fallback, .rem-av-more{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pill-blue-soft-text); font:700 10px/1 'Inter',sans-serif;
}
.rem-av-more{ background:var(--pill-gray-bg); color:var(--pill-gray-text); }
.rem-av-sm{ width:22px; height:22px; border-width:0; font-size:9.5px; }

/* ---------- card modal section ---------- */
.rem-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.rem-card-head label{ margin:0; }
.rem-link-btn{
  background:none; border:none; padding:4px 2px; cursor:pointer;
  color:var(--steel); font:600 12.5px/1.2 'Inter',sans-serif;
}
.rem-link-btn:hover{ text-decoration:underline; }
.rem-link-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.rem-card-list{ border:1px solid var(--panel-edge); border-radius:11px; padding:0 12px; background:var(--panel); }
.rem-card-list .rem-item{ --rem-rail:74px; padding-inline-end:0; }
.rem-card-list .rem-item:first-child{ border-top:none; }
.rem-card-list .rem-when-main{ font-size:16px; }
.rem-card-empty{ padding:12px 0; font-size:12.5px; color:var(--ink-soft); }
.rem-card-done{ border-top:1px solid var(--panel-edge); }
.rem-card-done summary{ padding:10px 0; font-size:12.5px; color:var(--ink-soft); cursor:pointer; }
.rem-card-done .rem-item:first-of-type{ border-top:none; }

/* ---------- editor ---------- */
#reminderEditOverlay > .modal.rem-editor{ max-width:560px; }
.rem-due-row{ display:flex; gap:10px; }
.rem-due-row input[type=date]{ flex:1 1 60%; }
.rem-due-row input[type=time]{ flex:1 1 40%; }
.rem-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rem-chip{
  padding:6px 11px; border-radius:20px; border:1px solid var(--panel-edge); background:var(--panel);
  color:var(--ink-soft); font:500 12px/1.2 'Inter',sans-serif; cursor:pointer;
}
.rem-chip:hover{ color:var(--ink); border-color:var(--steel); }
.rem-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.rem-hint{ margin:6px 0 0; font-size:11.5px; color:var(--ink-soft); }

.rem-picker{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  border:1px solid var(--panel-edge); border-radius:11px; padding:6px 8px; background:var(--panel);
}
.rem-picker:focus-within{ outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
.rem-picked{ display:contents; }
.rem-picker-input{
  flex:1 1 140px; min-width:120px; border:none; outline:none; background:none; padding:5px 4px;
  font:13.5px 'Inter',sans-serif; color:var(--ink);
}
/* app.css boxes every `.field input[type=text]`; inside the picker the
   container is the box, so the input underneath has to shed its own border
   and focus ring or it reads as a field inside a field. */
.field .rem-picker input.rem-picker-input{
  border:none; border-radius:0; box-shadow:none; background:none; padding:5px 4px; width:auto;
}
.field .rem-picker input.rem-picker-input:focus{ outline:none; box-shadow:none; }
.rem-picker-input:disabled{ display:none; }
.rem-chip-picked{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:3px 4px 3px 4px; border-radius:20px; background:var(--surface-soft); border:1px solid var(--panel-edge);
  font:500 12.5px/1.2 'Inter',sans-serif; color:var(--ink);
}
.rem-chip-picked > span:not(.rem-av){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; padding-inline-end:2px; }
.rem-chip-picked button{
  width:20px; height:20px; border-radius:50%; border:none; background:none; color:var(--ink-soft);
  cursor:pointer; font-size:11px; display:inline-flex; align-items:center; justify-content:center;
}
.rem-chip-picked button:hover{ background:var(--pill-red-bg); color:var(--pill-red-text); }
.rem-chip-card{ padding:0 4px 0 0; background:none; border:none; }

.rem-suggest{
  position:absolute; inset-inline:0; top:calc(100% + 4px); z-index:5;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:11px; box-shadow:var(--shadow-lift);
  max-height:260px; overflow-y:auto; padding:4px;
}
.rem-suggest-item{
  width:100%; display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px;
  border:none; background:none; color:var(--ink); cursor:pointer; text-align:start; font:13px 'Inter',sans-serif;
}
.rem-suggest-item:hover, .rem-suggest-item.is-first{ background:var(--surface-hover); }
.rem-suggest-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rem-suggest-sub{ margin-inline-start:auto; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }
.rem-suggest-empty{ padding:10px; font-size:12.5px; color:var(--ink-soft); }

.rem-attach{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rem-attach-preview{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }
.rem-attach-thumb{
  width:56px; height:56px; border-radius:10px; overflow:hidden; flex:0 0 auto; padding:0; cursor:zoom-in;
  border:1px solid var(--panel-edge); background:var(--surface-soft); display:flex; align-items:center; justify-content:center;
}
.rem-attach-thumb img{ width:100%; height:100%; object-fit:cover; }
.rem-attach-pdf{ font:700 12px 'Inter',sans-serif; color:var(--pill-red-text); }
.rem-attach-name{ font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rem-attach-busy{ font-size:12.5px; color:var(--ink-soft); }
.rem-edit-error{
  background:var(--error-bg); color:var(--danger); border-radius:10px; padding:9px 12px; font-size:12.5px;
}

/* ---------- snooze menu ---------- */
.rem-menu{
  position:fixed; z-index:260; min-width:170px; padding:4px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:11px; box-shadow:var(--shadow-lift);
}
.rem-menu button{
  display:block; width:100%; text-align:start; padding:9px 12px; border:none; background:none; border-radius:8px;
  color:var(--ink); font:500 13px 'Inter',sans-serif; cursor:pointer;
}
.rem-menu button:hover, .rem-menu button:focus-visible{ background:var(--surface-hover); outline:none; }

/* ---------- due alerts ---------- */
.rem-alerts{
  position:fixed; z-index:190; inset-inline-end:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:min(360px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.rem-alert{
  pointer-events:auto; position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:13px;
  box-shadow:var(--shadow-lift); padding:14px 14px 12px; display:flex; flex-direction:column; gap:9px;
}
.rem-alert::before{
  content:""; position:absolute; inset-inline:0; top:0; height:4px;
  background:repeating-linear-gradient(135deg, var(--hazard-a) 0 8px, var(--hazard-b) 8px 16px);
}
.rem-alert-head{ display:flex; align-items:flex-start; gap:10px; }
.rem-alert-icon{
  width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--rem-late); flex:0 0 auto;
  box-shadow:0 0 0 4px var(--rem-late-soft);
}
.rem-alert-text{ flex:1 1 auto; min-width:0; }
.rem-alert-title{ font-weight:700; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.rem-alert-when{ font-size:12px; color:var(--rem-late); margin-top:2px; }
.rem-alert-x{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; border:none; background:none;
  color:var(--ink-soft); cursor:pointer; font-size:13px; margin-block-start:-4px; margin-inline-end:-4px;
}
.rem-alert-x:hover{ background:var(--surface-hover); color:var(--ink); }
.rem-alert-note{
  font-size:12.5px; color:var(--ink-soft); white-space:pre-line; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rem-alert-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.rem-alert-actions .btn{ padding:7px 12px; font-size:12.5px; }
.rem-alert-more{
  pointer-events:auto; align-self:flex-end; border:1px solid var(--panel-edge); background:var(--panel);
  color:var(--ink); border-radius:20px; padding:7px 13px; font:600 12px 'Inter',sans-serif; cursor:pointer; box-shadow:var(--shadow);
}
@media (prefers-reduced-motion:no-preference){
  .rem-alert{ animation:remAlertIn .24s cubic-bezier(.2,.8,.2,1); }
  @keyframes remAlertIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
}

/* ---------- phones ----------
   app.css turns every dialog into a bottom sheet. The hub is a list people
   scroll and act on, so it gets the whole screen instead; the editor stays a
   tall sheet like every other form in the app. */
@media (max-width:640px){
  #remindersOverlay{ padding:0; align-items:stretch; }
  #remindersOverlay > .modal.rem-hub{
    max-width:none; width:100%; height:100vh; height:100dvh; max-height:none;
    border-radius:0; margin:0; box-shadow:none;
  }
  .rem-hub > .modal-head{ padding-top:calc(12px + env(safe-area-inset-top, 0px)); }
  .rem-new-btn{ padding:8px 11px; }
  .rem-x{ width:44px; height:44px; }
  .rem-hub-controls{ padding:10px 16px 8px; }
  .rem-hub-body{ padding:4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .rem-hub-foot{ padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }

  .rem-item{ --rem-rail:64px; grid-template-columns:var(--rem-rail) minmax(0,1fr); gap:10px; padding-inline-end:0; }
  .rem-side{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
  .rem-when{ padding-inline-start:12px; }
  .rem-when-main{ font-size:17px; }
  .rem-act{ width:40px; height:40px; }
  .rem-pill-text{ max-width:160px; }

  .rem-due-row{ flex-direction:column; }
  .rem-alerts{ inset-inline:12px; width:auto; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .rem-alert-actions .btn{ flex:1 1 auto; justify-content:center; min-height:40px; }
}