/* ============================================================================
   RECOVERY NETWORK, the shared look for all four redesign concepts.

   WHAT IS *NOT* IN HERE, on purpose: tokens, type scale, buttons, the opener,
   section heads, sheets, the tab bar, the footer, the map stage, filter pills,
   empty states and notes. All of those already exist in appts-shell.css and
   nx.css, which every page links. Redefining any of them is how a page drifts
   from the site, and this project has paid for that lesson once already.

   What IS in here is the vocabulary this page needs and no other page has:
   a meeting, a fellowship crest, a time state, and a day.

   Prefix: .rn-. Never a bare descendant selector like `.rn-card span`, because
   (0,1,1) beats a component's own (0,1,0) class and quietly wins arguments it
   should not be in.
   ========================================================================= */

/* ---- the fellowship crest ------------------------------------------------
   Two or four letters on the fellowship's own colour. The colours come from
   rn-data.js, re-pointed at the client brand family in the port. */
.rn-crest{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.02em;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 16px rgba(0,0,0,.34)}
.rn-crest.sm{width:34px;height:34px;border-radius:11px;font-size:11.5px}
.rn-crest.lg{width:54px;height:54px;border-radius:17px;font-size:17px}
.rn-crest.tiny{width:24px;height:24px;border-radius:8px;font-size:9px;box-shadow:none}
.rn-crest[data-len="4"]{font-size:10.5px}
.rn-crest.sm[data-len="4"]{font-size:9px}
/* ---- a meeting ----------------------------------------------------------
   ONE card definition for all four concepts. They differ in what they lead
   with and what they put around it, never in what a meeting looks like. */
.rn-card{position:relative;display:flex;flex-direction:column;gap:13px;padding:22px;
  border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair);
  text-align:left;width:100%;
  transition:border-color .22s var(--ease),background .22s var(--ease),
    transform .22s var(--ease),box-shadow .22s var(--ease)}
.rn-card:hover{border-color:var(--hair-2);background:var(--raise-2);transform:translateY(-2px);
  box-shadow:var(--shadow)}
.rn-card.rn-live{border-color:rgba(0,164,153,.5);background:rgba(0,164,153,.09)}
.rn-card.rn-soon{border-color:rgba(224,86,138,.42)}
.rn-card.rn-flat{background:none;border-color:var(--hair)}
.rn-card.rn-flat:hover{transform:none;box-shadow:none}
.rn-top{display:flex;align-items:flex-start;gap:13px}
.rn-top-tx{min-width:0;flex:1}
.rn-name{font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.018em;
  line-height:1.24;color:var(--ink);word-break:break-word}
.rn-fel{font-size:12.5px;color:var(--ink-3);margin-top:3px}
/* ---- the time line, the thing the live page has no concept of ---------- */
.rn-when{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.rn-when svg{flex:none;opacity:.75}
.rn-when .rn-at{color:var(--ink-3);font-weight:500;font-size:13.5px}
.rn-when.is-live{color:var(--teal-soft)}
.rn-when.is-starting,.rn-when.is-soon{color:var(--secondary-soft)}
html[data-theme="light"] .rn-when.is-live{color:#0a7268}
html[data-theme="light"] .rn-when.is-starting,
html[data-theme="light"] .rn-when.is-soon{color:var(--secondary)}
/* the live dot. Content must never depend on the animation to be legible, so
   the resting style is the visible one and the keyframe only pulses it. */
.rn-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--teal);
  box-shadow:0 0 0 4px rgba(0,164,153,.22);animation:rn-pulse 2.2s var(--ease) infinite}
@keyframes rn-pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,164,153,.22)}
  50%{box-shadow:0 0 0 8px rgba(0,164,153,.05)}}
@media(prefers-reduced-motion:reduce){.rn-dot{animation:none}}
/* ---- where -------------------------------------------------------------- */
.rn-where{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2)}
.rn-where svg{flex:none;margin-top:2px;opacity:.7}
.rn-where .rn-far{color:var(--ink-3)}
.rn-where.rn-online{color:var(--cyan-soft)}
html[data-theme="light"] .rn-where.rn-online{color:#00639f}
/* ---- chips -------------------------------------------------------------- */
.rn-chips{display:flex;flex-wrap:wrap;gap:7px}
.rn-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:var(--raise-2);color:var(--ink-2);
  border:1px solid var(--hair);white-space:nowrap}
.rn-chip svg{opacity:.8}
.rn-chip.rn-mode-online{background:rgba(0,119,200,.18);color:var(--cyan-soft);
  border-color:rgba(0,119,200,.34)}
.rn-chip.rn-mode-hybrid{background:rgba(0,164,153,.18);color:var(--teal-soft);
  border-color:rgba(0,164,153,.34)}
.rn-chip.rn-new{background:rgba(181,37,85,.18);color:var(--secondary-soft);
  border-color:rgba(181,37,85,.34)}
html[data-theme="light"] .rn-chip.rn-mode-online{background:#E3F0FA;color:#00639f;border-color:#BCD9EF}
html[data-theme="light"] .rn-chip.rn-mode-hybrid{background:#DEF3F0;color:#0a7268;border-color:#B6E2DC}
html[data-theme="light"] .rn-chip.rn-new{background:#F8E4EC;color:var(--secondary);border-color:#EEC6D6}
/* ---- how well we know this record --------------------------------------
   The seven meetings the source flags for human re-verification are invisible
   on the live page. Here they are the one thing on the card that is coloured. */
.rn-conf{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;
  color:var(--ink-3);padding-top:12px;border-top:1px solid var(--hair)}
.rn-conf svg{flex:none;margin-top:1px}
.rn-conf.rn-ok svg{color:var(--teal-soft)}
.rn-conf.rn-warn{color:#E7C476}
.rn-conf.rn-warn svg{color:#E7C476}
html[data-theme="light"] .rn-conf.rn-ok svg{color:#0a7268}
html[data-theme="light"] .rn-conf.rn-warn{color:var(--amber)}
html[data-theme="light"] .rn-conf.rn-warn svg{color:var(--amber)}
/* ---- why this one. Facts, listed, never a model's opinion --------------- */
.rn-why{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--ink-3);
  line-height:1.4}
.rn-why b{color:var(--ink-2);font-weight:600}
/* ---- what you can do ---------------------------------------------------- */
.rn-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:4px}
.rn-icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--raise-2);border:1px solid var(--hair);color:var(--ink-2);
  transition:all .2s var(--bounce)}
.rn-icon-btn:hover{background:var(--hair);color:var(--ink)}
.rn-icon-btn[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);
  color:#fff}
/* ---- lists and grids ---------------------------------------------------- */
.rn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.rn-grid.rn-two{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
.rn-rows{display:flex;flex-direction:column;gap:12px}
/* ---- a compact meeting row, for rails and dense lists ------------------- */
.rn-row{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--r-md);
  background:var(--raise);border:1px solid transparent;text-align:left;width:100%;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.rn-row:hover{background:var(--raise-2);border-color:var(--hair)}
.rn-row.on{background:rgba(181,37,85,.15);border-color:var(--secondary)}
/* THE CHILDREN MUST BE BLOCKS. They are spans, and an inline element ignores
   both the stacking and text-overflow:ellipsis, so the name and the meta line
   rendered on ONE 19px line with the ellipsis doing nothing. Measured, not
   guessed: .rn-row-tx was 19px tall holding two lines of content. */
.rn-row-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.rn-row-n{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-row-m{display:block;font-size:12px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-row-r{flex:none;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:right}
.rn-row-r i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);font-weight:500;
  margin-top:2px}
.rn-row.rn-live-row{background:rgba(0,164,153,.12);border-color:rgba(0,164,153,.4)}
/* ---- the search and filter bar, shared by every concept ----------------- */
.rn-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* THE SEGMENT SCROLLS INSIDE ITSELF, it does not push the page sideways.
   The fellowship picker can carry six buttons, which measured 424px in a
   390px viewport and gave the whole page a horizontal scrollbar. Wide content
   gets its own scroll container; the body never scrolls sideways. */
.rn-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--raise);
  border:1px solid var(--hair);gap:2px;max-width:100%;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rn-seg::-webkit-scrollbar{display:none}
.rn-seg button{flex:none;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--ink-3);white-space:nowrap;transition:all .2s var(--ease)}
.rn-seg button:hover{color:var(--ink)}
.rn-seg button[aria-pressed="true"]{background:var(--secondary);color:#fff}
.rn-seg.rn-seg-quiet button[aria-pressed="true"]{background:var(--raise-2);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-2)}
/* ---- where you are looking from ---------------------------------------- */
.rn-from{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;
  color:var(--ink-2)}
.rn-from b{color:var(--ink);font-weight:650}
.rn-from button{font-size:13px;font-weight:600;color:var(--secondary-soft)}
html[data-theme="light"] .rn-from button{color:var(--secondary)}
.rn-from button:hover{opacity:.7}
/* ---- coverage. Said out loud, never hidden behind an empty list -------- */
.rn-coverage{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;
  border-radius:var(--r-lg);border:1px solid rgba(185,138,47,.4);
  background:rgba(185,138,47,.11)}
.rn-coverage .rn-cov-ic{width:40px;height:40px;border-radius:13px;flex:none;display:grid;
  place-items:center;background:rgba(185,138,47,.24);color:#E7C476}
.rn-coverage h4{font-family:var(--display);font-size:16px;font-weight:650;margin-bottom:5px;
  letter-spacing:-.015em}
.rn-coverage p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rn-coverage .rn-cov-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
html[data-theme="light"] .rn-coverage{border-color:#E8D3A4;background:#FBF3E2}
html[data-theme="light"] .rn-coverage .rn-cov-ic{background:#F2E2C0;color:var(--amber)}
/* ---- the day spine (concept A) ------------------------------------------ */
.rn-spine{display:flex;flex-direction:column;gap:34px}
.rn-band{display:grid;grid-template-columns:170px minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:820px){.rn-band{grid-template-columns:minmax(0,1fr);gap:14px}}
.rn-band-h{position:sticky;top:88px}
@media(max-width:820px){.rn-band-h{position:static}}
.rn-band-h .rn-band-k{font-family:var(--display);font-size:19px;font-weight:650;
  letter-spacing:-.02em;line-height:1.2;margin-bottom:5px}
.rn-band-h .rn-band-s{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.rn-band-h .rn-band-n{display:inline-block;margin-top:9px;padding:4px 10px;border-radius:999px;
  background:var(--raise-2);font-size:11.5px;font-weight:700;color:var(--ink-2)}
.rn-band.rn-b-live .rn-band-k{color:var(--teal-soft)}
.rn-band.rn-b-soon .rn-band-k{color:var(--secondary-soft)}
html[data-theme="light"] .rn-band.rn-b-live .rn-band-k{color:#0a7268}
html[data-theme="light"] .rn-band.rn-b-soon .rn-band-k{color:var(--secondary)}
/* ---- the week board (concept B and C) ----------------------------------- */
.rn-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media(max-width:1000px){.rn-week{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){.rn-week{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rn-day{padding:14px 12px;border-radius:var(--r-md);background:var(--raise);
  border:1px solid var(--hair);min-height:120px}
.rn-day.rn-today{border-color:var(--secondary);background:rgba(181,37,85,.1)}
.rn-day-h{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;display:flex;justify-content:space-between;
  align-items:baseline;gap:6px}
.rn-day.rn-today .rn-day-h{color:var(--secondary-soft)}
html[data-theme="light"] .rn-day.rn-today .rn-day-h{color:var(--secondary)}
.rn-day-h i{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-3)}
.rn-tick{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:9px;width:100%;
  text-align:left;font-size:12px;color:var(--ink-2);transition:background .18s var(--ease)}
.rn-tick:hover{background:var(--raise-2)}
.rn-tick b{font-weight:650;font-variant-numeric:tabular-nums;flex:none;color:var(--ink)}
.rn-tick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* ---- the need grid (concept D) ------------------------------------------ */
.rn-needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.rn-need{display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair);text-align:left;
  transition:all .22s var(--ease)}
.rn-need:hover{background:var(--raise-2);border-color:var(--hair-2);transform:translateY(-2px)}
.rn-need[aria-pressed="true"]{border-color:var(--secondary);background:rgba(181,37,85,.13)}
.rn-need-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff}
.rn-need-t{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.015em;
  line-height:1.25}
.rn-need-s{font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* ---- the saved board (concept C) ---------------------------------------- */
.rn-stat{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--r-md);
  background:var(--raise);border:1px solid var(--hair)}
.rn-stat b{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.rn-stat span{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.rn-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
/* ---- the glass panel in the opener, shared by all four ----------------- */
.rn-glass{background:var(--hero-glass);border:1px solid var(--hero-hair);border-radius:var(--r-lg);
  padding:24px 26px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  min-width:330px;max-width:400px;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px rgba(0,0,0,.3)}
@media(max-width:940px){.rn-glass{min-width:0;max-width:none}}
.rn-glass .rn-g-k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.68);display:block;margin-bottom:13px}
.rn-glass .rn-g-t{font-family:var(--display);font-size:20px;font-weight:650;letter-spacing:-.025em;
  line-height:1.2;color:#fff;margin-bottom:7px}
.rn-glass .rn-g-p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.76)}
.rn-glass .rn-g-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
.rn-glass .rn-g-rows{display:flex;flex-direction:column;gap:10px;margin:2px 0 4px}
.rn-glass .rn-g-row{display:flex;align-items:baseline;gap:11px;font-size:13.5px;
  color:rgba(255,255,255,.78)}
.rn-glass .rn-g-row b{font-family:var(--display);font-size:22px;font-weight:700;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;min-width:38px}
/* ---- the clock console -------------------------------------------------- */
.rn-clockctl{position:fixed;left:18px;bottom:20px;z-index:60;
  transition:transform .34s var(--bounce),opacity .24s var(--ease)}
@media(max-width:900px){.rn-clockctl{bottom:92px;left:12px}}
body.tabbar-wide .rn-clockctl{transform:translateY(150%);opacity:0;pointer-events:none}
.rn-clockctl-t{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--hair-2);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow)}
.rn-clockctl-t:hover{background:var(--raise-2)}
.rn-clockctl-t i{width:7px;height:7px;border-radius:50%;background:var(--teal);font-style:normal;
  flex:none}
.rn-clockctl-t i.moved{background:var(--gold)}
.rn-clockctl-p{position:absolute;left:0;bottom:calc(100% + 10px);width:270px;padding:15px;
  border-radius:var(--r-lg);background:rgba(17,24,40,.96);-webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);border:1px solid var(--hair-2);box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .3s var(--spring)}
html[data-theme="light"] .rn-clockctl-p{background:rgba(255,255,255,.97)}
.rn-clockctl.on .rn-clockctl-p{opacity:1;pointer-events:auto;transform:none}
.rn-clockctl-p h4{margin:0 0 3px;font-size:13px;font-weight:650}
.rn-clockctl-p p{margin:0 0 11px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.rn-clockctl-m{display:block;width:100%;text-align:left;border:1px solid transparent;
  background:var(--raise);color:inherit;font:inherit;font-size:12.5px;padding:8px 11px;
  border-radius:11px;margin-bottom:4px}
.rn-clockctl-m:hover{background:var(--raise-2)}
.rn-clockctl-m[aria-pressed="true"]{border-color:var(--teal);background:rgba(0,164,153,.16)}
.rn-clockctl-s{display:block;width:100%;margin-top:9px;border:1px solid var(--hair-2);
  background:none;color:var(--ink-2);font:inherit;font-size:12px;padding:9px;border-radius:11px}
.rn-clockctl-s:hover{background:var(--raise)}
/* ---- sheet internals ---------------------------------------------------- */
.rn-sheet-hero{display:flex;gap:15px;align-items:flex-start;margin-bottom:18px}
.rn-sheet-hero h4{font-family:var(--display);font-size:21px;font-weight:650;letter-spacing:-.025em;
  line-height:1.2;margin-bottom:5px}
.rn-sheet-hero p{font-size:13.5px;color:var(--ink-3)}
.rn-facts{display:flex;flex-direction:column;gap:1px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--hair);margin:16px 0}
.rn-fact{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;background:var(--raise);
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.rn-fact svg{flex:none;margin-top:2px;color:var(--ink-3)}
.rn-fact b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px;font-size:13px}
.rn-consent{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:14px 15px;
  border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair);
  transition:all .2s var(--ease)}
.rn-consent:hover{background:var(--raise-2)}
.rn-consent[aria-pressed="true"]{border-color:var(--teal);background:rgba(0,164,153,.12)}
.rn-consent .rn-tick-box{width:22px;height:22px;border-radius:7px;flex:none;display:grid;
  place-items:center;background:var(--raise-2);border:1px solid var(--hair-2);color:transparent}
.rn-consent[aria-pressed="true"] .rn-tick-box{background:var(--teal);border-color:var(--teal);
  color:#fff}
.rn-consent .rn-c-n{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px}
.rn-consent .rn-c-d{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* ---- what this page is not ---------------------------------------------
   The boundary statement. Every concept ends on it, because Thrive finds and
   prepares people for meetings and does not run a single one of them. */
.rn-bound{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid var(--hair);background:var(--raise)}
.rn-bound svg{flex:none;margin-top:2px;color:var(--ink-3)}
.rn-bound p{font-size:13px;line-height:1.6;color:var(--ink-3)}
.rn-bound b{color:var(--ink-2)}
/* ============================================================================
   THE LOG. The pop-up the whole loop hangs on, and the standing marks that
   carry its answers back onto the list and the map.
   ========================================================================= */

/* ---- step 1: did you get there --------------------------------------- */
.rn-logpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.rn-logopt{display:flex;gap:14px;align-items:center;padding:20px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair);text-align:left;width:100%;
  transition:all .22s var(--bounce)}
.rn-logopt:hover{background:var(--raise-2);border-color:var(--hair-2);transform:translateY(-2px)}
.rn-logopt .ic{width:46px;height:46px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--raise-2);color:var(--ink-2)}
.rn-logopt .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.rn-logopt .tx b{font-family:var(--display);font-size:16.5px;font-weight:650;letter-spacing:-.018em}
.rn-logopt .tx span{font-size:13px;color:var(--ink-3);line-height:1.4}
.rn-logopt-yes{border-color:rgba(0,164,153,.42);background:rgba(0,164,153,.1)}
.rn-logopt-yes:hover{background:rgba(0,164,153,.16);border-color:var(--teal)}
.rn-logopt-yes .ic{background:var(--teal);color:#fff}
/* ---- step 2a: how was it ---------------------------------------------- */
.rn-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
  margin-bottom:18px}
.rn-rate{display:flex;flex-direction:column;gap:3px;padding:15px 17px;border-radius:var(--r-md);
  background:var(--raise);border:1px solid var(--hair);text-align:left;
  transition:all .2s var(--bounce)}
.rn-rate:hover{background:var(--raise-2);border-color:var(--hair-2)}
.rn-rate b{font-size:14.5px;font-weight:650;color:var(--ink)}
.rn-rate span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.rn-rate[aria-pressed="true"]{border-color:var(--secondary);background:rgba(181,37,85,.14)}
.rn-rate[aria-pressed="true"] b{color:var(--secondary-soft)}
html[data-theme="light"] .rn-rate[aria-pressed="true"] b{color:var(--secondary)}
.rn-lognote{display:block}
.rn-lognote span{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:8px}
.rn-lognote .nx-input{width:100%}
/* ---- step 2b: what got in the way ------------------------------------- */
.rn-whys{display:flex;gap:9px;flex-wrap:wrap}
.rn-why-opt{padding:11px 17px;border-radius:999px;background:var(--raise);
  border:1px solid var(--hair);font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:all .2s var(--bounce)}
.rn-why-opt:hover{background:var(--raise-2);color:var(--ink)}
.rn-why-opt[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);color:#fff}
/* ---- step 3: what it adds up to --------------------------------------- */
.rn-logdone{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:var(--r-lg);
  border:1px solid rgba(0,164,153,.4);background:rgba(0,164,153,.1)}
.rn-logdone .tick{width:52px;height:52px;border-radius:17px;flex:none;display:grid;
  place-items:center;background:var(--teal);color:#fff}
.rn-logdone p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.rn-logdone p+p{margin-top:7px}
.rn-logdone b{color:var(--ink);font-weight:650}
html[data-theme="light"] .rn-logdone{border-color:#B6E2DC;background:#EAF7F5}
/* ---- STANDING: how a room sits with you, on the list and in the panel --
   The map draws the same four states into the pin itself (see pin() in
   rn-core.js), so the instrument and the record are never two things. */
.rn-stand{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:var(--raise-2);color:var(--ink-3);border:1px solid var(--hair)}
.rn-stand svg{opacity:.9}
.rn-stand.is-regular{background:rgba(0,164,153,.2);color:var(--teal-soft);
  border-color:rgba(0,164,153,.42)}
.rn-stand.is-been{background:rgba(0,164,153,.13);color:var(--teal-soft);
  border-color:rgba(0,164,153,.3)}
.rn-stand.is-kept{background:rgba(181,37,85,.16);color:var(--secondary-soft);
  border-color:rgba(181,37,85,.34)}
.rn-stand.is-not{background:var(--raise);color:var(--ink-3);border-style:dashed}
html[data-theme="light"] .rn-stand.is-regular{background:#DEF3F0;color:#0a7268;border-color:#B6E2DC}
html[data-theme="light"] .rn-stand.is-been{background:#EAF7F5;color:#0a7268;border-color:#CDEAE5}
html[data-theme="light"] .rn-stand.is-kept{background:#F8E4EC;color:var(--secondary);border-color:#EEC6D6}
/* a room you said is not for you recedes wherever it is drawn, and is never
   removed, because somebody is allowed to change their mind */
.rn-card.is-not,.rn-row.is-not{opacity:.6}
.rn-card.is-not:hover,.rn-row.is-not:hover{opacity:1}
.rn-card.is-regular{border-color:rgba(0,164,153,.42)}
/* ---- THE ASK. What the page raises itself. ---------------------------- */
.rn-ask{display:flex;gap:16px;align-items:center;padding:20px 24px;border-radius:var(--r-lg);
  border:1px solid rgba(181,37,85,.4);flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(181,37,85,.16),rgba(0,119,200,.1) 62%,rgba(0,164,153,.08))}
.rn-ask .ic{width:46px;height:46px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--secondary);color:#fff}
.rn-ask-tx{flex:1;min-width:230px}
.rn-ask-tx b{display:block;font-family:var(--display);font-size:18px;font-weight:650;
  letter-spacing:-.022em;margin-bottom:4px}
.rn-ask-tx p{font-size:14px;color:var(--ink-2);line-height:1.5}
.rn-ask-acts{display:flex;gap:10px;flex-wrap:wrap}
html[data-theme="light"] .rn-ask{border-color:#EEC6D6;
  background:linear-gradient(120deg,#FBEAF1,#EBF4FB 62%,#EAF7F5)}
/* ---- YOUR HISTORY WITH ONE ROOM, in the panel under the map ---------- */
.rn-hist{margin-top:13px;padding-top:13px;border-top:1px solid var(--hair)}
.rn-hist-h{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:9px}
.rn-hist-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);
  padding:6px 0}
.rn-hist-row .dt{color:var(--ink-3);flex:none;min-width:52px;font-variant-numeric:tabular-nums}
.rn-hist-row .rt{font-weight:600}
.rn-hist-row .rt.went{color:var(--teal-soft)}
.rn-hist-row .rt.miss{color:var(--ink-3)}
.rn-hist-row .nt{color:var(--ink-3);font-style:italic;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
html[data-theme="light"] .rn-hist-row .rt.went{color:#0a7268}

/* The .rn-toast rules were removed when the seven toast implementations became
   one. Nothing renders that class any more: NX.notify in nx-core.js builds a
   single .toast .nx-toast for every surface, and its look is in
   appts-shell.css where one definition serves all of them. */