/* RJHAPPY-1: the reminder journey's shared stylesheet, read by the Remind sheet island and by
   the vanilla page's row "Remind" button and "Last reminder" line.

   The 20 tokens below are lifted verbatim from the accepted mockup
   (docs/design/2026-09-29-reminder-journey-spec.md, "CSS Tokens Lifted from Mockup"). They are
   scoped to .rj-tokens, not :root: five of them (--bg, --accent-soft, --risk-soft, --lift,
   --font) carry different values from styles.css's page-wide :root, and existing gates pin the
   page canvas at #F6F7F5. Every element of the journey carries .rj-tokens. */
.rj-tokens {
  --bg: #F1F5F2; --surface: #FFFFFF; --surface-2: #F0F2F0; --ink: #202522; --ink-soft: #68716C;
  --line: #DDE2DE; --accent: #0F766E; --accent-ink: #0F766E; --accent-soft: #EBF3F2;
  --warn: #A65B08; --warn-soft: #FBF2E7; --risk: #B42318; --risk-soft: #FBECEA;
  --nb: #3E3A9A; --nb-soft: #EFEEFB; --nb-line: #8B87D8;
  --shadow: 0 1px 2px rgba(26,26,24,.05), 0 1px 1px rgba(26,26,24,.02);
  --lift: 0 12px 32px -12px rgba(26,26,24,.30), 0 1px 2px rgba(26,26,24,.06);
  --radius: 8px;
  --font: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Row: Remind button and Last reminder line (vanilla page) ---- */
.rj-remind-btn { min-height: 34px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent-ink); font: 500 14px/1 var(--font); cursor: pointer; white-space: nowrap; }
.rj-remind-btn.quiet { border-color: var(--line); color: var(--ink-soft); }
.rj-remind-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rj-last { display: block; font: 13px/1.35 var(--font); margin-top: 2px; overflow-wrap: anywhere; color: var(--ink); }
.rj-last.drafted { color: var(--warn); font-weight: 500; }
.rj-last.never { color: var(--ink-soft); }
#table .rj-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Sheet (island) ---- */
.rj-host { position: relative; z-index: 1000; }
.rj-host[hidden] { display: none; }
.rj-host, .rj-host * { box-sizing: border-box; }
.rj-overlay { position: fixed; inset: 0; display: grid; font: 16px/1.5 var(--font); color: var(--ink);
  -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums tabular-nums; }
.rj-overlay > * { grid-area: 1 / 1; min-width: 0; }
.rj-overlay b, .rj-overlay h3 { font-weight: 600; }
.rj-overlay button, .rj-overlay input { font: inherit; color: inherit; }
.rj-overlay button { cursor: pointer; }
.rj-overlay button:disabled { cursor: not-allowed; }
.rj-overlay button:focus-visible, .rj-overlay input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rj-dim { background: rgba(32,37,34,.30); }
.rj-sheet { justify-self: end; align-self: stretch; width: min(520px, 100%); height: 100vh; overflow: hidden;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--lift);
  display: flex; flex-direction: column; animation: rj-slidein .28s ease-out; }
@keyframes rj-slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.rj-sh-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
.rj-sh-title { margin: 0; font-size: var(--text-lg); line-height: 1.3; overflow-wrap: anywhere; }
.rj-sh-title:focus { outline: none; }
.rj-sh-line { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.rj-sh-line b { color: var(--risk); font-weight: 600; }
.rj-asof { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); color: var(--ink-soft); }
.rj-stale { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); color: var(--warn); font-weight: 500; }
.rj-x { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--text-base); }
.rj-sh-body { padding: 16px 20px; display: grid; gap: 16px; align-content: start; flex: 1; min-height: 0; overflow-y: auto; }
.rj-sh-body.locked { opacity: .62; }
.rj-sh-foot { position: sticky; bottom: 0; margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; z-index: 2; }
.rj-foot-note { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.rj-foot-note.amber { color: var(--warn); font-weight: 500; }
.rj-foot-why { margin: 0; font-size: var(--text-sm); color: var(--warn); font-weight: 500; }
.rj-bulk .rj-foot-why { flex: 1 1 100%; }
.rj-foot-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.rj-lead-note { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font-weight: 500; font-size: var(--text-base); }
.rj-muted { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.rj-sec { display: grid; gap: 8px; }
.rj-sec-h { margin: 0; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
.rj-person { margin: 0; font-size: var(--text-sm); }
.rj-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; }
.rj-card.sel { border-color: var(--accent); background: var(--accent-soft); }
.rj-card.empty { border-style: dashed; }
.rj-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rj-card-t { font-weight: 600; font-size: var(--text-base); }
.rj-card-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rj-card-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rj-opt { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; align-items: start; font-size: var(--text-base); cursor: pointer; }
.rj-opt input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.rj-opt-v { overflow-wrap: anywhere; }
.rj-prov { display: block; font-size: var(--text-xs); color: var(--ink-soft); }
.rj-add { display: grid; gap: 6px; }
.rj-add label { font-size: var(--text-sm); color: var(--ink-soft); }
.rj-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rj-add-row input { flex: 1 1 180px; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.rj-add-row input[aria-invalid="true"] { border-color: var(--risk); }
.rj-err { margin: 0; color: var(--risk); font-size: var(--text-sm); font-weight: 500; }
.rj-subj { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.rj-subj .k { color: var(--ink-soft); margin-right: 6px; }
.rj-msg { border: 1px solid var(--line); border-radius: var(--radius); background: #FBFCFB; padding: 12px 14px; white-space: pre-wrap; font-size: var(--text-base); line-height: 1.55; overflow-wrap: anywhere; }
.rj-msg-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--text-xs); color: var(--ink-soft); }
.rj-msg-empty { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 12px 14px; font-size: var(--text-base); }
.rj-attach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rj-chipbox { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--text-sm); background: var(--surface); cursor: pointer; }
.rj-chipbox:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.rj-chipbox:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.rj-chipbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.rj-att-note { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.rj-inv { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; display: grid; gap: 4px; font-size: var(--text-sm); }
.rj-inv label { display: flex; gap: 8px; align-items: center; }
.rj-inv input { width: 16px; height: 16px; accent-color: var(--accent); }
.rj-cnt { margin: 4px 0 0; color: var(--ink-soft); }
.rj-link { border: 0; background: none; padding: 2px 4px; color: var(--accent-ink); font-weight: 500; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 2px; }
.rj-btn { min-height: 40px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: var(--text-base); }
.rj-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.rj-btn.primary:disabled { background: #9DBFBB; border-color: #9DBFBB; }
.rj-btn.outline { border-color: var(--accent); color: var(--accent-ink); }
.rj-btn.quiet { color: var(--ink-soft); }
.rj-btn.small { min-height: 34px; padding: 0 12px; font-size: var(--text-sm); }
.rj-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1 1 100%; }
.rj-stp { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: center; font-size: var(--text-base); }
.rj-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: var(--text-2xs); color: #fff; }
.rj-stp.done .rj-dot { background: var(--accent); border-color: var(--accent); }
.rj-stp.active { font-weight: 600; }
.rj-stp.active .rj-dot { border-color: var(--accent); border-top-color: transparent; animation: rj-spin 1s linear infinite; }
.rj-stp.wait { color: var(--ink-soft); }
@keyframes rj-spin { to { transform: rotate(360deg); } }
.rj-docs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.rj-doc { font-size: var(--text-xs); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.rj-done-h { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.rj-done-sub { margin: 0; font-size: var(--text-base); }
.rj-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rj-files li { font-size: var(--text-sm); padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); overflow-wrap: anywhere; }
.rj-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rj-ask { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.rj-ask.top { border-top: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-soft); }
.rj-ask-h { margin: 0; font-size: var(--text-md); font-weight: 600; }
.rj-result { margin: 0; font-size: var(--text-base); font-weight: 500; }
.rj-result.ok { color: var(--accent-ink); }
.rj-result.amber { color: var(--warn); }
.rj-follow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--text-base); }
.rj-fchip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--text-sm); }
.rj-fchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.rj-fdate { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; }

/* ---- Bulk sheet (RJBULK-1): the mockup's .sheet.bulk, rail and badges ---- */
.rj-sheet.rj-bulk { width: min(820px, 100%); }
.rj-pager { display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-sm); color: var(--ink-soft); }
.rj-pager button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.rj-bulk-grid { display: grid; grid-template-columns: 250px minmax(0,1fr); flex: 1; min-height: 0; }
.rj-brail { border-right: 1px solid var(--line); background: var(--surface-2); padding: 8px; display: grid; gap: 4px; align-content: start; overflow-y: auto; }
.rj-bitem { text-align: left; border: 1px solid transparent; border-radius: var(--radius); background: transparent; padding: 8px 10px; display: grid; gap: 3px; font-size: var(--text-sm); }
.rj-bitem[aria-current="true"] { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.rj-bn { font-weight: 600; overflow-wrap: anywhere; }
.rj-bm { color: var(--ink-soft); font-size: var(--text-xs); }
.rj-badge { justify-self: start; font-size: var(--text-2xs); font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.rj-badge.ready { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rj-badge.amber { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.rj-badge.muted { color: var(--ink-soft); }
.rj-bulk-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.rj-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rj-pane-line { margin: 0; }
.rj-pane-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

@media (max-width: 760px) {
  .rj-sheet { border-left: 0; }
  .rj-sh-head, .rj-sh-body, .rj-sh-foot { padding-left: 14px; padding-right: 14px; }
  .rj-bulk-grid { grid-template-columns: minmax(0,1fr); }
  .rj-brail { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .rj-host *, .rj-host *::before, .rj-host *::after { animation: none !important; transition: none !important; }
  .rj-stp.active .rj-dot { border-top-color: var(--accent); }
}