/* @AI_CRITICAL_GUARD v3.0: UNTOUCHABLE ZONE — MACE APPROVAL REQUIRED.
   Protects: Enterprise UI/UX · Realtime Sync Logic · Core State Management ·
   Database/API Adapters · Tab Isolation · Virtual Column State ·
   QuickBase Settings Persistence · Auth Flow.
   DO NOT modify any existing logic, layout, or structure in this file without
   first submitting a RISK IMPACT REPORT to MACE and receiving explicit "CLEARED" approval.
   Violations will cause regressions. When in doubt — STOP and REPORT. */

/**
 * @file reminders.css
 * @description REMINDERS workspace (unified My + Team) — rmx-* component layer.
 *              SELF-DUAL-THEME: every rule consumes the local --rmx-* tokens
 *              declared below; dark values are the defaults and the
 *              :where(html[data-mode="light"]) block swaps ONLY tokens, so
 *              tools/theme-main regeneration is NOT required for this file.
 *              Loaded BEFORE main_theme.css (which must stay the LAST sheet).
 *              Namespace rule: class names must never contain the substring
 *              "reminder" (legacy [class*="reminder"] theme selectors leak).
 *              QA: .claude/skills/reminders-workspace-qa/SKILL.md
 * @module MUMS/Styles
 * @version rmx-1
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.rmx-shell{
  /* surfaces */
  --rmx-card:        rgba(255,255,255,.028);
  --rmx-card-2:      rgba(255,255,255,.055);
  --rmx-line:        rgba(148,163,184,.18);
  --rmx-line-2:      rgba(148,163,184,.30);
  --rmx-hover:       rgba(148,163,184,.10);
  --rmx-ink:         var(--text, #e8eeff);
  --rmx-dim:         rgba(148,163,184,.92);
  --rmx-shadow:      0 10px 26px rgba(0,0,0,.30);
  --rmx-drawer-bg:   #0e1626;
  --rmx-pop-bg:      #101a2c;
  --rmx-input-bg:    rgba(2,6,23,.35);
  --rmx-scrim:       rgba(2,6,23,.55);
  --rmx-kbd-bg:      rgba(148,163,184,.14);

  /* status families (bg wash / ink / solid) */
  --rmx-danger:      #ef4444;
  --rmx-danger-bg:   rgba(239,68,68,.14);
  --rmx-danger-ink:  #fca5a5;
  --rmx-warn:        #f59e0b;
  --rmx-warn-bg:     rgba(245,158,11,.14);
  --rmx-warn-ink:    #fcd34d;
  --rmx-info:        #3b82f6;
  --rmx-info-bg:     rgba(59,130,246,.15);
  --rmx-info-ink:    #93c5fd;
  --rmx-ok:          #22c55e;
  --rmx-ok-bg:       rgba(34,197,94,.14);
  --rmx-ok-ink:      #86efac;
  --rmx-team:        #a78bfa;
  --rmx-team-bg:     rgba(167,139,250,.14);
  --rmx-team-ink:    #c4b5fd;
  --rmx-my:          #34d399;
  --rmx-my-bg:       rgba(52,211,153,.13);
  --rmx-my-ink:      #6ee7b7;

  /* CTA */
  --rmx-cta-bg:      linear-gradient(180deg, #3b82f6, #2563eb);
  --rmx-cta-bg-h:    linear-gradient(180deg, #4f8ffb, #2f6fe8);
  --rmx-cta-ink:     #ffffff;
  --rmx-cta-ring:    rgba(59,130,246,.35);

  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--rmx-ink);
  position:relative;
}

/* Light theme = token swap only (zero structural rules).
   :where() keeps specificity at the class level so nothing else re-fights. */
:where(html[data-mode="light"]) .rmx-shell{
  --rmx-card:        #ffffff;
  --rmx-card-2:      #f6f8fc;
  --rmx-line:        #dfe5f0;
  --rmx-line-2:      #c9d3e4;
  --rmx-hover:       rgba(15,23,42,.045);
  --rmx-ink:         #16213a;
  --rmx-dim:         #64748b;
  --rmx-shadow:      0 10px 26px rgba(15,23,42,.10);
  --rmx-drawer-bg:   #ffffff;
  --rmx-pop-bg:      #ffffff;
  --rmx-input-bg:    #ffffff;
  --rmx-scrim:       rgba(15,23,42,.32);
  --rmx-kbd-bg:      rgba(15,23,42,.06);

  --rmx-danger-bg:   rgba(220,38,38,.09);
  --rmx-danger-ink:  #b91c1c;
  --rmx-warn-bg:     rgba(217,119,6,.10);
  --rmx-warn-ink:    #92400e;
  --rmx-info-bg:     rgba(37,99,235,.09);
  --rmx-info-ink:    #1d4ed8;
  --rmx-ok-bg:       rgba(22,163,74,.10);
  --rmx-ok-ink:      #15803d;
  --rmx-team-bg:     rgba(124,58,237,.09);
  --rmx-team-ink:    #6d28d9;
  --rmx-my-bg:       rgba(5,150,105,.09);
  --rmx-my-ink:      #047857;
}

/* ── Shared atoms ───────────────────────────────────────────────────────── */
.rmx-ic{ display:inline-flex; width:16px; height:16px; flex:0 0 auto; }
.rmx-ic svg{ width:100%; height:100%; }

.rmx-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:10px;
  border:1px solid var(--rmx-line);
  background:var(--rmx-card-2);
  color:var(--rmx-ink);
  font:inherit; font-size:12.5px; font-weight:650;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .06s;
}
.rmx-btn:hover{ background:var(--rmx-hover); border-color:var(--rmx-line-2); }
.rmx-btn:active{ transform:translateY(1px); }
.rmx-btn:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:2px; }
.rmx-btn.ghost{ background:transparent; }
.rmx-btn.danger{ color:var(--rmx-danger-ink); border-color:var(--rmx-danger-bg); }
.rmx-btn.danger:hover{ background:var(--rmx-danger-bg); }
.rmx-btn.icon-only{ padding:7px 9px; }
.rmx-btn.is-muted{ color:var(--rmx-warn-ink); border-color:var(--rmx-warn); background:var(--rmx-warn-bg); }
.rmx-btn .rmx-ic{ width:15px; height:15px; }
.rmx-btn.act-done{ color:var(--rmx-ok-ink); border-color:rgba(34,197,94,.38); }
.rmx-btn.act-done:hover{ background:var(--rmx-ok-bg); }

.rmx-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:11px; border:1px solid transparent;
  background:var(--rmx-cta-bg); color:var(--rmx-cta-ink);
  font:inherit; font-size:13px; font-weight:750; cursor:pointer;
  box-shadow:0 6px 16px var(--rmx-cta-ring);
  transition:filter .12s, transform .06s, box-shadow .12s;
}
.rmx-cta:hover{ background:var(--rmx-cta-bg-h); filter:brightness(1.04); }
.rmx-cta:active{ transform:translateY(1px); }
.rmx-cta:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:2px; }
.rmx-cta.sm{ padding:7px 13px; font-size:12.5px; }
.rmx-cta .rmx-ic{ width:15px; height:15px; }
.rmx-cta kbd{
  font:inherit; font-size:10px; font-weight:700; opacity:.85;
  background:rgba(255,255,255,.18); border-radius:5px; padding:1px 5px; margin-left:2px;
}

.rmx-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:750; letter-spacing:.02em;
  border:1px solid var(--rmx-line);
  background:var(--rmx-card-2); color:var(--rmx-dim);
}
.rmx-badge.danger{ background:var(--rmx-danger-bg); color:var(--rmx-danger-ink); border-color:rgba(239,68,68,.35); }
.rmx-badge.warn{ background:var(--rmx-warn-bg); color:var(--rmx-warn-ink); border-color:rgba(245,158,11,.35); }
.rmx-badge.info{ background:var(--rmx-info-bg); color:var(--rmx-info-ink); border-color:rgba(59,130,246,.35); }
.rmx-badge.ok{ background:var(--rmx-ok-bg); color:var(--rmx-ok-ink); border-color:rgba(34,197,94,.35); }
.rmx-badge.muted{ opacity:.85; }

.rmx-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  background:var(--rmx-card-2); border:1px solid var(--rmx-line);
  color:var(--rmx-dim); white-space:nowrap;
}
.rmx-chip .rmx-ic{ width:11px; height:11px; }
.rmx-chip.sc-my{ background:var(--rmx-my-bg); color:var(--rmx-my-ink); border-color:rgba(52,211,153,.30); }
.rmx-chip.sc-team{ background:var(--rmx-team-bg); color:var(--rmx-team-ink); border-color:rgba(167,139,250,.30); }
.rmx-chip.pri-high{ background:var(--rmx-danger-bg); color:var(--rmx-danger-ink); border-color:rgba(239,68,68,.30); }
.rmx-chip.rep{ color:var(--rmx-info-ink); background:var(--rmx-info-bg); border-color:rgba(59,130,246,.28); }
.rmx-chip.cat{ color:var(--rmx-dim); }

.rmx-cd{
  display:inline-flex; align-items:center;
  font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:800; letter-spacing:.02em;
  padding:2px 8px; border-radius:7px; white-space:nowrap;
}
.rmx-cd.danger{ background:var(--rmx-danger-bg); color:var(--rmx-danger-ink); }
.rmx-cd.warn{ background:var(--rmx-warn-bg); color:var(--rmx-warn-ink); }
.rmx-cd.info{ background:var(--rmx-info-bg); color:var(--rmx-info-ink); }
.rmx-cd.ok{ background:var(--rmx-ok-bg); color:var(--rmx-ok-ink); }

.rmx-dim{ color:var(--rmx-dim); font-size:12px; display:flex; align-items:center; gap:6px; }
.rmx-dim .rmx-ic{ width:13px; height:13px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.rmx-hero{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.rmx-hero-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.rmx-hero-ic{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 auto;
  background:var(--rmx-info-bg); color:var(--rmx-info);
  border:1px solid rgba(59,130,246,.30);
}
.rmx-hero-ic .rmx-ic{ width:22px; height:22px; }
.rmx-title{ margin:0; font-size:19px; font-weight:850; letter-spacing:.01em; color:var(--rmx-ink); }
.rmx-sub{ margin-top:3px; font-size:12px; color:var(--rmx-dim); }
.rmx-hero-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Controls row: scope rail + filters ─────────────────────────────────── */
.rmx-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.rmx-scope{
  display:inline-flex; padding:3px; gap:2px; border-radius:11px;
  background:var(--rmx-card); border:1px solid var(--rmx-line);
}
.rmx-seg{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:9px; border:1px solid transparent;
  background:transparent; color:var(--rmx-dim);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background .12s, color .12s;
}
.rmx-seg:hover{ color:var(--rmx-ink); background:var(--rmx-hover); }
.rmx-seg:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:1px; }
.rmx-seg.is-on{
  background:var(--rmx-info-bg); color:var(--rmx-info-ink);
  border-color:rgba(59,130,246,.35);
}
.rmx-seg .rmx-ic{ width:13px; height:13px; }
.rmx-seg-n{
  font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px;
  background:var(--rmx-card-2); border:1px solid var(--rmx-line);
  font-variant-numeric:tabular-nums;
}
.rmx-seg.is-on .rmx-seg-n{ background:transparent; border-color:rgba(59,130,246,.35); }
.rmx-scope.sm .rmx-seg{ padding:5px 11px; font-size:12px; }

.rmx-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rmx-search{
  display:inline-flex; align-items:center; gap:7px;
  padding:0 10px; border-radius:10px;
  background:var(--rmx-input-bg); border:1px solid var(--rmx-line);
  color:var(--rmx-dim);
  transition:border-color .12s, box-shadow .12s;
}
.rmx-search:focus-within{ border-color:var(--rmx-info); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.rmx-search .rmx-ic{ width:14px; height:14px; }
.rmx-search input{
  border:0; outline:0; background:transparent; color:var(--rmx-ink);
  font:inherit; font-size:12.5px; padding:8px 0; min-width:200px; box-shadow:none;
}
.rmx-select{
  padding:7px 10px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:600;
  background:var(--rmx-input-bg); border:1px solid var(--rmx-line); color:var(--rmx-ink);
  cursor:pointer;
}
.rmx-select:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:1px; }

/* ── KPI rail ───────────────────────────────────────────────────────────── */
.rmx-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
  gap:10px;
}
.rmx-kpi{
  display:flex; align-items:center; gap:11px; text-align:left;
  padding:12px 14px; border-radius:13px;
  background:var(--rmx-card); border:1px solid var(--rmx-line);
  color:var(--rmx-ink); font:inherit; cursor:pointer;
  transition:border-color .12s, background .12s, box-shadow .12s;
  min-width:0;
}
.rmx-kpi:not(button){ cursor:default; }
button.rmx-kpi:hover{ border-color:var(--rmx-line-2); background:var(--rmx-card-2); }
button.rmx-kpi:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:2px; }
.rmx-kpi.wide{ grid-column:span 2; }
.rmx-kpi-ic{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--rmx-card-2); border:1px solid var(--rmx-line); color:var(--rmx-dim);
}
.rmx-kpi-ic .rmx-ic{ width:17px; height:17px; }
.rmx-kpi.t-danger .rmx-kpi-ic{ background:var(--rmx-danger-bg); color:var(--rmx-danger); border-color:rgba(239,68,68,.30); }
.rmx-kpi.t-warn   .rmx-kpi-ic{ background:var(--rmx-warn-bg);   color:var(--rmx-warn);   border-color:rgba(245,158,11,.30); }
.rmx-kpi.t-info   .rmx-kpi-ic{ background:var(--rmx-info-bg);   color:var(--rmx-info);   border-color:rgba(59,130,246,.30); }
.rmx-kpi.t-ok     .rmx-kpi-ic{ background:var(--rmx-ok-bg);     color:var(--rmx-ok);     border-color:rgba(34,197,94,.30); }
.rmx-kpi.t-next   .rmx-kpi-ic{ background:var(--rmx-info-bg);   color:var(--rmx-info);   border-color:rgba(59,130,246,.30); }
.rmx-kpi.t-team   .rmx-kpi-ic{ background:var(--rmx-team-bg);   color:var(--rmx-team);   border-color:rgba(167,139,250,.30); }
.rmx-kpi.is-on{ border-color:var(--rmx-info); box-shadow:0 0 0 3px rgba(59,130,246,.15); background:var(--rmx-card-2); }
.rmx-kpi-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rmx-kpi-val{
  font-size:20px; font-weight:850; line-height:1.15; color:var(--rmx-ink);
  font-variant-numeric:tabular-nums;
}
.rmx-kpi-val.rmx-cd{ font-size:15px; padding:1px 8px; align-self:flex-start; }
.rmx-kpi-label{
  font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rmx-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.rmx-kpi-hint{
  font-size:11px; color:var(--rmx-dim); opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ── Buckets + rows ─────────────────────────────────────────────────────── */
.rmx-list{ display:flex; flex-direction:column; gap:16px; min-height:120px; }
.rmx-bucket{ display:flex; flex-direction:column; gap:8px; }
.rmx-bucket-head{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color:var(--rmx-dim); padding:0 2px;
}
.rmx-bucket-head.is-toggle{ cursor:pointer; user-select:none; }
.rmx-bucket-head.is-toggle:hover .rmx-bucket-label{ color:var(--rmx-ink); }
.rmx-bucket-dot{ width:8px; height:8px; border-radius:99px; flex:0 0 auto; }
.rmx-bucket-dot.t-danger{ background:var(--rmx-danger); box-shadow:0 0 8px rgba(239,68,68,.55); }
.rmx-bucket-dot.t-warn{ background:var(--rmx-warn); }
.rmx-bucket-dot.t-info{ background:var(--rmx-info); }
.rmx-bucket-dot.t-ok{ background:var(--rmx-ok); }
.rmx-bucket-dot.t-muted{ background:var(--rmx-line-2); }
.rmx-bucket-count{
  font-size:10.5px; padding:1px 8px; border-radius:999px;
  background:var(--rmx-card-2); border:1px solid var(--rmx-line);
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.rmx-bucket-toggle{ margin-left:auto; font-size:10.5px; letter-spacing:.04em; color:var(--rmx-info-ink); }
.rmx-bucket-more{ font-size:11px; color:var(--rmx-dim); padding:2px 4px; }
.rmx-rows{ display:flex; flex-direction:column; gap:8px; }

.rmx-row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  gap:12px; align-items:center;
  padding:11px 12px 11px 14px;
  border-radius:13px;
  background:var(--rmx-card);
  border:1px solid var(--rmx-line);
  position:relative; cursor:pointer;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.rmx-row::before{
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:0 4px 4px 0; background:var(--rmx-line-2);
}
.rmx-row.st-danger::before{ background:var(--rmx-danger); }
.rmx-row.st-warn::before{ background:var(--rmx-warn); }
.rmx-row.st-info::before{ background:var(--rmx-info); }
.rmx-row.st-ok::before{ background:var(--rmx-ok); }
.rmx-row:hover{ background:var(--rmx-card-2); border-color:var(--rmx-line-2); }
.rmx-row:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:2px; }
.rmx-row.st-danger{ border-color:rgba(239,68,68,.30); }
.rmx-row.st-ok{ opacity:.78; }
.rmx-row.st-ok:hover{ opacity:1; }
.rmx-row.is-flash{ animation:rmxFlash 1.2s ease-in-out 2; }
@keyframes rmxFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(59,130,246,0); }
  40%{ box-shadow:0 0 0 4px rgba(59,130,246,.35); border-color:var(--rmx-info); }
}

.rmx-row-when{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  min-width:0;
}
.rmx-when-time{
  font-size:15px; font-weight:850; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; color:var(--rmx-ink); line-height:1.1;
}
.rmx-when-date{ font-size:11px; color:var(--rmx-dim); font-weight:650; }

.rmx-row-main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.rmx-row-title{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.rmx-row-name{
  font-size:13.5px; font-weight:750; color:var(--rmx-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.rmx-row.st-ok .rmx-row-name{ text-decoration:line-through; text-decoration-color:var(--rmx-line-2); }
.rmx-row-details{
  font-size:12px; color:var(--rmx-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rmx-row-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rmx-row-by{ font-size:11px; color:var(--rmx-dim); }

.rmx-row-actions{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  justify-content:flex-end;
}

/* Team ack meter */
.rmx-ack{ display:inline-flex; align-items:center; gap:7px; min-width:0; }
.rmx-ack-meter{
  width:88px; height:6px; border-radius:99px; overflow:hidden;
  background:var(--rmx-card-2); border:1px solid var(--rmx-line);
  display:inline-block;
}
.rmx-ack-fill{
  display:block; height:100%; border-radius:99px;
  background:var(--rmx-ok); min-width:2px;
  transition:width .3s ease;
}
.rmx-ack-num{
  font-size:11px; font-weight:750; color:var(--rmx-dim);
  font-variant-numeric:tabular-nums;
}
.rmx-ack-ic{ width:13px; height:13px; color:var(--rmx-dim); }
.rmx-ack.big .rmx-ack-meter{ width:180px; height:8px; }
.rmx-ack.big .rmx-ack-num{ font-size:12px; color:var(--rmx-ink); }

/* Popover (snooze / kebab / mute / data menus) */
.rmx-snz-wrap{ position:relative; display:inline-flex; }
.rmx-pop{
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:190px; padding:5px;
  border-radius:11px; border:1px solid var(--rmx-line-2);
  background:var(--rmx-pop-bg); box-shadow:var(--rmx-shadow);
  display:flex; flex-direction:column; gap:1px;
}
.rmx-pop-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:0; border-radius:8px; background:transparent;
  color:var(--rmx-ink); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; text-align:left;
}
.rmx-pop-item:hover{ background:var(--rmx-hover); }
.rmx-pop-item:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:-2px; }
.rmx-pop-item.danger{ color:var(--rmx-danger-ink); }
.rmx-pop-item.danger:hover{ background:var(--rmx-danger-bg); }
.rmx-pop-item .rmx-ic{ width:14px; height:14px; opacity:.85; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.rmx-empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:52px 20px; text-align:center;
  border:1px dashed var(--rmx-line-2); border-radius:16px;
  background:var(--rmx-card);
}
.rmx-empty-ic{ width:44px; height:44px; color:var(--rmx-dim); opacity:.75; }
.rmx-empty-ic svg{ width:100%; height:100%; }
.rmx-empty-title{ font-size:15px; font-weight:800; color:var(--rmx-ink); }
.rmx-empty-sub{ font-size:12.5px; color:var(--rmx-dim); max-width:420px; }

/* ── Drawer (editor / detail / settings) ────────────────────────────────── */
.rmx-scrim{
  position:fixed; inset:0; z-index:1290;
  background:var(--rmx-scrim);
  opacity:0; transition:opacity .18s ease;
}
.rmx-scrim.is-open{ opacity:1; }
.rmx-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1300;
  width:min(480px, 100vw);
  display:flex; flex-direction:column;
  background:var(--rmx-drawer-bg);
  border-left:1px solid var(--rmx-line-2);
  box-shadow:-18px 0 42px rgba(0,0,0,.35);
  transform:translateX(103%); transition:transform .22s cubic-bezier(.2,.8,.25,1);
}
.rmx-drawer.is-open{ transform:translateX(0); }
.rmx-dw-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:16px 18px 12px; border-bottom:1px solid var(--rmx-line);
  flex:0 0 auto;
}
.rmx-dw-title{ font-size:15.5px; font-weight:850; color:var(--rmx-ink); overflow-wrap:anywhere; }
.rmx-dw-sub{ margin-top:3px; font-size:11.5px; color:var(--rmx-dim); }
.rmx-dw-body{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:16px 18px; display:flex; flex-direction:column; gap:13px;
}
.rmx-dw-foot{
  flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px;
  padding:13px 18px; border-top:1px solid var(--rmx-line);
}
.rmx-dw-foot.wrap{ flex-wrap:wrap; justify-content:flex-start; }
.rmx-dw-sec{
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rmx-dim); margin-top:4px;
}
.rmx-dw-details{
  font-size:13px; line-height:1.55; color:var(--rmx-ink);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.rmx-dw-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--rmx-dim);
}
.rmx-dw-meta b{ color:var(--rmx-ink); font-weight:700; }
.rmx-badges{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Fields */
.rmx-field{ display:flex; flex-direction:column; gap:6px; }
.rmx-lbl{ font-size:11.5px; font-weight:750; color:var(--rmx-dim); letter-spacing:.02em; }
.rmx-lbl .req{ color:var(--rmx-danger-ink); }
.rmx-input{
  width:100%; padding:9px 11px; border-radius:10px;
  border:1px solid var(--rmx-line); background:var(--rmx-input-bg);
  color:var(--rmx-ink); font:inherit; font-size:13px;
  transition:border-color .12s, box-shadow .12s;
}
.rmx-input:focus{ outline:none; border-color:var(--rmx-info); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
textarea.rmx-input{ resize:vertical; min-height:64px; }
.rmx-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rmx-when-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.rmx-chipbtn{
  padding:4px 10px; border-radius:999px; font:inherit; font-size:11px; font-weight:700;
  border:1px solid var(--rmx-line); background:var(--rmx-card-2); color:var(--rmx-dim);
  cursor:pointer; transition:color .12s, border-color .12s, background .12s;
}
.rmx-chipbtn:hover{ color:var(--rmx-info-ink); border-color:rgba(59,130,246,.40); background:var(--rmx-info-bg); }
.rmx-days{ display:flex; gap:5px; flex-wrap:wrap; }
.rmx-day{
  width:44px; padding:7px 0; border-radius:9px; text-align:center;
  font:inherit; font-size:11.5px; font-weight:750;
  border:1px solid var(--rmx-line); background:var(--rmx-card-2); color:var(--rmx-dim);
  cursor:pointer; transition:all .12s;
}
.rmx-day:hover{ border-color:var(--rmx-line-2); color:var(--rmx-ink); }
.rmx-day.is-on{ background:var(--rmx-info-bg); color:var(--rmx-info-ink); border-color:rgba(59,130,246,.45); }
.rmx-preview{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--rmx-info-ink);
  padding:9px 11px; border-radius:10px;
  background:var(--rmx-info-bg); border:1px solid rgba(59,130,246,.25);
  min-height:20px;
}
.rmx-preview:empty{ display:none; }
.rmx-preview .rmx-ic{ width:14px; height:14px; margin-top:1px; flex:0 0 auto; }
.rmx-preview b{ color:var(--rmx-warn-ink); }
.rmx-err{
  font-size:12px; font-weight:650; color:var(--rmx-danger-ink);
  padding:9px 11px; border-radius:10px;
  background:var(--rmx-danger-bg); border:1px solid rgba(239,68,68,.35);
}

/* Ack matrix + activity log (detail drawer) */
.rmx-ackmatrix{ display:flex; flex-direction:column; gap:2px; }
.rmx-ackrow{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto auto;
  gap:9px; align-items:center; padding:7px 8px; border-radius:9px;
}
.rmx-ackrow:nth-child(odd){ background:var(--rmx-card); }
.rmx-avatar{
  width:24px; height:24px; border-radius:99px; display:grid; place-items:center;
  font-size:11px; font-weight:800; color:var(--rmx-info-ink);
  background:var(--rmx-info-bg); border:1px solid rgba(59,130,246,.30);
}
.rmx-ackrow-name{
  font-size:12.5px; font-weight:650; color:var(--rmx-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rmx-ackrow-name em{ font-style:normal; font-size:10.5px; color:var(--rmx-dim); }
.rmx-ackrow-at{ font-size:11px; color:var(--rmx-dim); font-variant-numeric:tabular-nums; }
.rmx-logrow{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--rmx-dim); padding:5px 2px;
}
.rmx-logrow .rmx-ic{ width:13px; height:13px; flex:0 0 auto; opacity:.8; }
.rmx-logrow b{ color:var(--rmx-ink); font-weight:700; }
.rmx-logrow-at{ margin-left:auto; font-size:10.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .rmx-kpi.wide{ grid-column:span 1; }
}
@media (max-width: 900px){
  .rmx-controls{ flex-direction:column; align-items:stretch; }
  .rmx-scope{ align-self:flex-start; }
  .rmx-search input{ min-width:120px; flex:1; }
  .rmx-search{ flex:1 1 160px; }
}
@media (max-width: 720px){
  .rmx-row{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .rmx-row-when{ flex-direction:row; align-items:baseline; gap:8px; }
  .rmx-row-actions{ justify-content:flex-start; }
  .rmx-kpis{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
  .rmx-hero-actions{ width:100%; justify-content:flex-start; }
  .rmx-grid2{ grid-template-columns:1fr; }
  .rmx-drawer{ width:100vw; }
}

/* ══ GLOBAL scope (rmx-2, 2026-07-17) ═══════════════════════════════════ */
/* Sky family — distinct from Mine (emerald), Team (violet) and every status
   tone; gold stays brand-only per the UI colour rule.                      */
.rmx-shell{
  --rmx-glob:        #0ea5e9;
  --rmx-glob-bg:     rgba(14,165,233,.14);
  --rmx-glob-ink:    #7dd3fc;
}
:where(html[data-mode="light"]) .rmx-shell{
  --rmx-glob-bg:     rgba(2,132,199,.09);
  --rmx-glob-ink:    #0369a1;
}
.rmx-chip.sc-global{ background:var(--rmx-glob-bg); color:var(--rmx-glob-ink); border-color:rgba(14,165,233,.32); }
.rmx-seg.seg-global .rmx-ic{ width:13px; height:13px; }
.rmx-seg.seg-global.is-on{
  background:var(--rmx-glob-bg); color:var(--rmx-glob-ink);
  border-color:rgba(14,165,233,.40);
}
.rmx-seg.seg-global.is-on .rmx-seg-n{ border-color:rgba(14,165,233,.40); }
.rmx-kpi.t-global .rmx-kpi-ic{ background:var(--rmx-glob-bg); color:var(--rmx-glob); border-color:rgba(14,165,233,.30); }

/* Case link chip — the one interactive chip on a row: it opens the shared
   QB Case Detail View, so it reads as a button (hover lift + pointer).    */
.rmx-chip.case-link{
  cursor:pointer; font:inherit; font-size:10.5px; font-weight:750;
  background:var(--rmx-info-bg); color:var(--rmx-info-ink);
  border:1px solid rgba(59,130,246,.35);
  transition:background .12s, border-color .12s, transform .06s;
}
.rmx-chip.case-link:hover{ border-color:var(--rmx-info); background:var(--rmx-card-2); }
.rmx-chip.case-link:active{ transform:translateY(1px); }
.rmx-chip.case-link:focus-visible{ outline:2px solid var(--rmx-info); outline-offset:1px; }

/* Floating alarm card — GLOBAL kind (ReminderEngine, app.js). Base card
   styles live in styles.css; this variant is self-dual-theme here because
   main_theme.css was generated before it existed. Sky accent mirrors the
   my=green / team=red convention.                                          */
.reminder-card.global{
  border-color: rgba(14,165,233,.55);
  background: color-mix(in srgb, var(--surface-1, #0d1526) 90%, rgba(14,165,233,.10));
}
.reminder-card.high.global{
  border-color: rgba(14,165,233,.75);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.reminder-card.global .rc-badge{
  border-color: rgba(14,165,233,.55);
  background: rgba(14,165,233,.12);
}
.reminder-card.global .rc-close{ border-color: rgba(14,165,233,.45); }
.reminder-card.global .reminder-pill{ border-color: rgba(14,165,233,.45); }
:where(html[data-mode="light"]) .reminder-card.global{
  border-color: rgba(2,132,199,.45);
  background: color-mix(in srgb, #ffffff 92%, rgba(2,132,199,.10));
}
:where(html[data-mode="light"]) .reminder-card.global .rc-badge{
  border-color: rgba(2,132,199,.45);
  background: rgba(2,132,199,.10);
  color:#0c4a6e;
}

/* ── Motion safety ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .rmx-drawer, .rmx-scrim, .rmx-row, .rmx-btn, .rmx-cta, .rmx-ack-fill{ transition:none !important; }
  .rmx-row.is-flash{ animation:none; box-shadow:0 0 0 3px rgba(59,130,246,.35); }
}