/* RentReaper — contract C9. Tokens locked per docs/brand.md; helpers prefixed rr-. build1 "Working Ledger" neutrals (owner-locked 2026-09-05): warm off-white ladder paper -> paper-2 -> panel -> card. Owner CR 2026-09-06 (C9 v1.17): on these app/admin surfaces the grey ladder does the structure — --rule frames and bars, --hair hairlines — and ink is reserved for text and buttons; the standalone homepage keeps build1's ink frames. */
:root {
  --paper: #f5f3ef;         /* warm off-white page */
  --paper-2: #edeae3;       /* alternating warm band / panel foot strips */
  --panel: #e7e3db;         /* module header-bar fill */
  --card: #faf9f6;          /* brightest surface — framed card bodies */
  --ink: #221f1b;           /* near-black — text, buttons; not app-surface frames (C9 v1.17) */
  --ink-soft: #38342d;
  --muted: #5f5b53;         /* secondary/body-muted */
  --faint: #8a857b;         /* tertiary text, timestamps, fine print */
  --rule: #d3cec4;          /* mid-weight rule */
  --hair: #e6e2d9;          /* hairline internal divider */
  --accent: #42535f;        /* Payne's Slate — links / CTAs / focus / active nav (never a status) */
  --accent-dark: #364552;   /* hover state of the accent only */
  /* semantic signal palette (W8-01) — status only; --accent is never one of these */
  --ok: #3f6b3a;        --ok-fill: #e5ecdc;       /* enquiry sent */
  --warn: #8a5814;      --warn-fill: #f3e8ce;     /* sending / attention */
  --err: #a4392b;       --err-fill: #f3e0da;      /* failed / reconnect */
  --info: #3a6060;      --info-fill: #dfeae7;     /* manual / no agent email */
  --pending: #6b5f50;   --pending-fill: #ece4d5;  /* queued */
  --fail: #a4392b;          /* legacy alias -> --err (pre-W8 helpers) */
  --serif: Georgia, 'Times New Roman', serif;
  --mono: 'Courier New', Courier, monospace;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --max: 1000px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.55; }
body { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Shell ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s5); }
/* Every page opens on the same step below the nav rule, whatever leads it (a compartment,
   a dateline, an h1). Adjoining margins collapse, so a leading h1 takes s5, not s5 + its own. */
main.wrap > :first-child { margin-top: var(--s5); }

.nav { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
       padding: var(--s4) 0 var(--s3); border-bottom: 2px solid var(--rule); }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 22px; text-transform: uppercase;
            letter-spacing: 0.06em; text-decoration: none; color: var(--ink); }
.nav .rr-links { display: flex; gap: 28px; font-family: var(--serif); font-size: 15px; align-items: baseline; }
.nav .rr-links a { text-decoration: none; color: var(--ink); border-bottom: 1px solid transparent; }
.nav .rr-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav .rr-links a[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
/* Sign out is a POST form; its button is dressed as a nav link. */
.nav .rr-links form { display: inline; }
.nav .rr-links button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
                        background: none; border: 0; padding: 0; cursor: pointer; }
.nav .rr-links button:hover { color: var(--accent); }

.rr-dateline { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;
              color: var(--faint); padding: var(--s2) 0; border-bottom: 2px solid var(--rule);
              display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

.rr-footer { margin-top: var(--s6); padding: var(--s5) 0; border-top: 2px solid var(--rule);
            font-family: var(--serif); font-size: 14px;
            color: var(--muted); display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.rr-footer a { color: var(--muted); text-decoration: none; }
.rr-footer a:hover { color: var(--accent); }

/* ---------- Type ---------- */
h1 { font-family: var(--serif); font-weight: 400; font-size: 3.4rem; letter-spacing: -1.5px; line-height: 1.1;
     margin: var(--s6) 0 var(--s3); }
h1 strong { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px;
            text-decoration-color: var(--accent); }
.rr-standfirst { font-size: 1.1rem; color: var(--muted); max-width: 560px; margin: 0 0 var(--s5); }
h2 { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s3); font-size: 0.95rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* build1 eyebrow treatment: section kickers set accent, tracked wide. */
.kicker { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; text-transform: uppercase;
          letter-spacing: 0.1em; color: var(--accent); margin: 0 0 var(--s2); }
.rr-num { font-family: var(--mono); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--accent);
         margin-right: var(--s2); vertical-align: -2px; }

.rule { border: 0; border-top: 2px solid var(--rule); margin: var(--s4) 0; }
.rule-strong { border: 0; border-top: 3px solid var(--rule); margin: var(--s5) 0 var(--s3); }

/* Numbered section head: kicker sits on a 3 px ink rule, number set accent. */
.rr-section { margin-top: var(--s6); }
.rr-section-head { border-top: 3px solid var(--rule); padding-top: var(--s2); display: flex;
                  justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.rr-section-head .kicker { margin: 0; color: var(--ink); }
.rr-section-head .rr-aside { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
                           letter-spacing: 1px; color: var(--faint); }

/* ---------- Buttons (build1: serif, sentence case, square) ---------- */
.btn { display: inline-block; font-family: var(--serif); font-weight: 400; font-size: 16px;
       padding: 12px 28px; border: 2px solid var(--ink); background: transparent;
       color: var(--ink); text-decoration: none; cursor: pointer; line-height: 1.4; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--paper); }
.btn-ghost { border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus { background: transparent; border-color: var(--accent); color: var(--accent); }
.rr-actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s4); }
.rr-saved { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* ---------- Layout ---------- */
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.rr-broadsheet { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s6); align-items: start;
                 margin-top: var(--s5); }
/* the rail stacks on the same beat as `.module + .module` in the main flow */
.rr-rail { display: flex; flex-direction: column; gap: var(--s4); }
.rr-sticky { position: sticky; top: var(--s4); }

/* ---------- Cards (right rail) ---------- */
.card { border: 2px solid var(--rule); background: var(--card); padding: var(--s4); }
.card .kicker { margin-bottom: var(--s2); }
.card p { font-size: 0.9rem; margin-bottom: var(--s2); }
.card p:last-child { margin-bottom: 0; }
.card .btn { margin-top: var(--s2); padding: 10px 20px; font-size: 0.75rem; }
.rr-card-strong { border-color: var(--rule); border-width: 3px; }
.rr-card-placeholder { border-style: dashed; }
.rr-card-placeholder p { color: var(--faint); }

/* ---------- Matches table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;
            color: var(--faint); text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 2px solid var(--rule); }
.table td { padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 2px solid var(--rule); vertical-align: top;
            height: 52px; line-height: 1.5; }
.table .rr-numcell { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; }
.table .rr-when { color: var(--muted); white-space: nowrap; }

/* Leading rule mark: first cell carries a 3 px left rule in the status colour AND mono status text. */
.table .rr-mark { padding-left: var(--s3); border-left: 3px solid var(--pending); white-space: nowrap; width: 1%; }
.rr-ok .rr-mark { border-left-color: var(--ok); }
.rr-warn .rr-mark { border-left-color: var(--warn); }
.rr-err .rr-mark, .rr-fail .rr-mark { border-left-color: var(--err); }
.rr-info .rr-mark { border-left-color: var(--info); }
.rr-pending .rr-mark { border-left-color: var(--pending); }

.badge { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.badge-ok { color: var(--ok); }
.badge-fail { color: var(--err); }
.badge-pending { color: var(--pending); }

/* W8-01 signal status chips: hard-edged, signal text + border + fill tint
   (build1 chip recipe: 1.5px border, weight 400). */
.sig-ok, .sig-warn, .sig-err, .sig-info, .sig-pending {
  font-family: var(--mono); font-weight: 400; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  display: inline-block; padding: 5px 10px; border: 1.5px solid var(--pending); white-space: nowrap; }
.sig-ok      { color: var(--ok);      border-color: var(--ok);      background: var(--ok-fill); }
.sig-warn    { color: var(--warn);    border-color: var(--warn);    background: var(--warn-fill); }
.sig-err     { color: var(--err);     border-color: var(--err);     background: var(--err-fill); }
.sig-info    { color: var(--info);    border-color: var(--info);    background: var(--info-fill); }
.sig-pending { color: var(--pending); border-color: var(--pending); background: var(--pending-fill); }

.rr-title { font-weight: 700; }
/* Match feedback: two mono toggle keys + one honest caption. The labels are phrases
   ("More like this"), so they take a framed key rather than reading as one run of text;
   pressed is a filled key with an ink edge (an interaction state, not a frame). */
.rr-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); font-family: var(--mono); font-size: 0.7rem;
            text-transform: uppercase; letter-spacing: 1px; }
.rr-thumb { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 5px 8px;
           border: 1px solid var(--rule); background: var(--paper-2); color: var(--muted); cursor: pointer; }
.rr-thumb:hover, .rr-thumb:focus { border-color: var(--accent); color: var(--accent); }
.rr-thumb[aria-pressed="true"] { border-color: var(--ink); background: var(--panel); color: var(--ink); }
.feedback-note { font-size: 0.8rem; color: var(--faint); margin: var(--s1) 0 0; }
.rr-enq { color: var(--muted); }
.rr-enq .badge { display: block; }
.rr-enq .rr-agent { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }

.rr-empty { border-left: 3px solid var(--rule); padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: 520px; }
.rr-empty p:last-child { margin: 0; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.field input, .field select, .field textarea { font-family: var(--serif); font-size: 0.95rem; line-height: 1.5; color: var(--ink);
    background: var(--paper); border: 2px solid var(--rule); padding: 10px 12px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 2px; }
.field textarea { min-height: 160px; resize: vertical; }
.field-hint { font-size: 0.85rem; color: var(--faint); margin: 0; }
.field.rr-invalid input { border-color: var(--fail); }
.rr-check { display: flex; gap: var(--s2); align-items: baseline; font-size: 0.95rem; }
.rr-check input { width: auto; margin: 0; }
.rr-check .field-hint { margin-left: var(--s4); }

/* Correction box: newspaper-style, 3 px fail rule on the left. */
.errors { border-left: 3px solid var(--fail); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.errors .kicker { color: var(--fail); margin-bottom: var(--s1); }
.errors ul { margin: 0; padding-left: 18px; font-size: 0.95rem; }
.errors li { margin: 0; }
.errors a { color: var(--accent); }

/* Preferences: sticky preview column with the headline figure. */
.rr-prefs { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: start; }
.rr-preview { border-top: 3px solid var(--rule); padding-top: var(--s2); }
.rr-figure { font-family: var(--serif); font-weight: 400; font-size: 3rem; letter-spacing: -1.5px; line-height: 1; margin: var(--s3) 0 var(--s1);
            color: var(--accent); }
.rr-figure-of { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; }
.rr-preview-line { font-size: 0.95rem; color: var(--muted); margin-bottom: var(--s3); }
.rr-sample { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--rule); }
.rr-sample li { padding: var(--s2) 0; border-bottom: 2px solid var(--rule); font-size: 0.9rem; display: flex; gap: var(--s2); }
.rr-sample .rr-numcell { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); min-width: 20px; }

/* Login: left-aligned editorial column under the marketing nav. */
.rr-column { max-width: 520px; }
.rr-column h1 { font-size: 2.6rem; margin-top: var(--s5); }
.rr-column p { color: var(--muted); }
.rr-column .field { max-width: 420px; }
.rr-state { margin-top: var(--s6); padding-top: var(--s3); border-top: 3px solid var(--rule); }
.rr-state:first-of-type { border-top: 0; padding-top: 0; }
.rr-state .kicker { border-left: 3px solid var(--accent); padding-left: var(--s2); }

/* ---------- Responsive (640 px) ---------- */
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  h1 { font-size: 2.2rem; letter-spacing: -1px; margin-top: var(--s5); }
  .rr-column h1 { font-size: 2rem; }
  .nav { flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .nav .rr-links { gap: var(--s3); width: 100%; font-size: 0.75rem; }
  .row2, .rr-broadsheet, .rr-prefs { grid-template-columns: 1fr; gap: var(--s4); }
  .rr-sticky { position: static; }

  /* Table collapses to ruled blocks; the status rule moves to the row edge. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { border-left: 3px solid var(--pending); padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 2px solid var(--rule); }
  .table tr.rr-ok { border-left-color: var(--ok); }
  .table tr.rr-warn { border-left-color: var(--warn); }
  .table tr.rr-err, .table tr.rr-fail { border-left-color: var(--err); }
  .table tr.rr-info { border-left-color: var(--info); }
  .table tr.rr-pending { border-left-color: var(--pending); }
  .table td { border: 0; padding: 2px 0; height: auto; }
  .table td.rr-mark { border-left: 0; padding-left: 0; width: auto; }
  .table td.rr-when, .table td.rr-numcell { display: inline-block; margin-right: var(--s3); }
  .table td[data-label]::before { content: attr(data-label) " "; font-family: var(--mono); font-size: 0.7rem;
                                   text-transform: uppercase; letter-spacing: 1px; color: var(--faint); }
  .rr-enq .badge { display: inline; }
}

/* ---------- W8-01 compartment module system (build1 panel anatomy: rule frame,
   panel-bg mono bar, bright card body) ---------- */
.module { border: 2px solid var(--rule); background: var(--card); }
.module + .module { margin-top: var(--s4); }
.module-bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
              padding: 13px var(--s4); background: var(--panel); border-bottom: 2px solid var(--rule);
              font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em;
              font-size: 0.72rem; color: var(--ink); }
.module-bar .aside { color: var(--muted); letter-spacing: 0.04em; }
.module-body { padding: var(--s4); }
.module-body.pad-lg { padding: var(--s5); }
.module-body > :last-child { margin-bottom: 0; }
.module--strong { border-width: 3px; }
/* tables inside a compartment lose the top rule the bar already draws */
.rr-admin .module table { border-top: 0; }
.rr-admin .module { overflow-x: auto; }
/* W8-06 matches pager: prev/next flanking a page mark, on the compartment's foot rule */
.rr-pager { display: flex; align-items: center; gap: var(--s3);
            padding: var(--s3) var(--s4); border-top: 2px solid var(--rule); }
.rr-pager-mark { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
                 letter-spacing: 1.5px; color: var(--muted); margin: 0 auto; }

/* ---------- W8-01 chips / tags (build1: 1.5px chip / 1px tag, weight 400) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 400;
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 10px;
        border: 1.5px solid var(--rule); background: var(--paper-2); color: var(--muted); white-space: nowrap; }
.tag { display: inline-block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em;
       text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); }

/* ---------- W8-02 ledger ENTRY rows (dashboard matches) ---------- */
/* A framed match row inside a .module compartment: left signal-spine keyed to
   status, a status chip, address / price / beds, time. Replaces the bare table. */
.module-body.pad-0 { padding: 0; }
/* Flanks are narrow and fixed (a status chip fits ~120px; the time reads "03 Sep 12:00"
   and "View listing" ~104px) so the address column keeps the room it needs. */
.entry { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 120px); gap: var(--s3);
         padding: var(--s4); border-left: 5px solid var(--pending); }
.entry + .entry { border-top: 1px solid var(--hair); }
.entry.is-ok { border-left-color: var(--ok); }
.entry.is-warn { border-left-color: var(--warn); }
.entry.is-err { border-left-color: var(--err); }
.entry.is-info { border-left-color: var(--info); }
.entry.is-pending { border-left-color: var(--pending); }
.entry .colL { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; min-width: 0; }
.entry .colL .badge, .entry .colL .sig-ok, .entry .colL .sig-warn, .entry .colL .sig-err, .entry .colL .sig-info, .entry .colL .sig-pending { white-space: normal; max-width: 100%; }
.entry .colR { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); text-align: right; }
.entry .time { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 1px; color: var(--muted); white-space: nowrap; }
.entry .addr { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.35; margin: 0 0 var(--s2); overflow-wrap: anywhere; }
.entry .addr a { text-decoration: none; color: var(--ink); }
.entry .addr a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry .lot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; margin-bottom: var(--s2); }
.entry .rr-enq { font-size: 0.85rem; margin: 0 0 var(--s2); }
/* data lines step on s2; the feedback row is a different beat, so it gets s3 */
.entry .rr-thumbs { margin-top: var(--s3); }

/* ledger figure (price / beds), reusable across pages */
.figs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; }
.fig { display: inline-flex; align-items: baseline; gap: 6px; }
.fig .n { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--ink); }
.fig .u { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--faint); }

/* ---------- W8-02 right-rail side compartment ---------- */
.railcard .module-body p { font-size: 0.9rem; }
.railcard .module-body p:last-child { margin-bottom: 0; }
.railcard .btn { margin-top: var(--s3); }
.railcard .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
                 padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 0.9rem; }
.railcard .row:last-of-type { border-bottom: 0; }
.railcard .row .k { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); }

/* bare chip modifier: signal colour + dot, no frame — inline inside a data row */
.chip.chip--bare { border: 0; background: transparent; padding: 0; }

/* documents progress meter (canvas board B rail) */
.doc-track { display: flex; gap: 6px; margin: var(--s2) 0 var(--s3); }
.doc-track i { flex: 1; height: 8px; background: var(--hair); border: 2px solid var(--rule); }
.doc-track i.done { background: var(--ok); border-color: var(--ok); }

/* identity module (canvas board B: Account bar + avatar + chips) */
.identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.avatar { width: 52px; height: 52px; background: var(--accent); color: var(--paper); font-family: var(--mono);
          font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
          letter-spacing: 1px; flex: 0 0 auto; }
.idmeta { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.5px;
          color: var(--muted); line-height: 1.9; }
.idmeta b { color: var(--ink); }
.idmeta .sep { color: var(--rule); margin: 0 6px; }
.id-chips { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ledger-entry extras (canvas board B): action link + truthful status note */
.entry .action { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; }
.entry .action a { color: var(--accent); }
.status-note { font-size: 0.82rem; color: var(--muted); margin: 0 0 var(--s2); line-height: 1.5; }

/* reassurance strip (canvas board C) */
.reassure { display: flex; gap: var(--s3); align-items: center; border-left: 3px solid var(--info); background: var(--info-fill);
            padding: var(--s3) var(--s4); font-size: 0.9rem; color: var(--ink); margin: var(--s4) 0; }
.reassure .label { color: var(--info); }

/* privacy photo well + monogram tile (canvas board C) */
.photo-well { display: flex; gap: var(--s4); align-items: flex-start; }
/* (the canvas hatches these tiles; C9 bans that CSS function here, so the
   tiles take the solid panel warmth instead) */
.photo-tile { width: 112px; height: 112px; flex: 0 0 auto; border: 2px solid var(--rule);
              background: var(--panel);
              display: flex; align-items: center; justify-content: center; position: relative; margin: 0 0 var(--s2); }
.photo-tile .mono-init { font-family: var(--mono); font-weight: 700; font-size: 1.9rem; color: var(--ink); letter-spacing: 1px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .lock { position: absolute; bottom: 0; left: 0; right: 0; background: var(--ink); color: var(--paper);
                    font-family: var(--mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; padding: 3px; }
.rr-photo { max-width: 120px; height: auto; display: block; border: 2px solid var(--rule); margin: 0 0 var(--s2); }
.rr-reg-tile .rr-photo { max-width: 100%; }

/* live-preview profile card (canvas board C) */
.pcard .head { display: flex; gap: var(--s3); align-items: center; }
.pcard .head h3 { margin: 0; }
.pcard .head .label { margin: 4px 0 0; }
.pcard .pic { width: 56px; height: 56px; flex: 0 0 auto; border: 2px solid var(--rule);
              background: var(--panel);
              display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; color: var(--ink); }
.pcard dl { margin: var(--s3) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s3); }
.pcard dt { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); padding-top: 3px; }
.pcard dd { margin: 0; font-size: 0.9rem; color: var(--ink); }
.pcard-tags { margin-top: var(--s3); }
.pcard .blurb { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin-top: var(--s3);
                border-top: 2px solid var(--hair); padding-top: var(--s3); }

/* form layout (canvas board C): form column + sticky preview rail */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.sticky { position: sticky; top: var(--s4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field-row .field { margin-bottom: 0; }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: center; }
.range .dash { font-family: var(--mono); color: var(--faint); }
@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .sticky { position: static; }
}
@media (max-width: 640px) {
  .field-row, .range { grid-template-columns: 1fr; }
  .range .dash { display: none; }
  .photo-well { flex-direction: column; }
}
.rr-rail .module + .module, .rr-rail .card + .module, .rr-rail .module + .card { margin-top: 0; }

/* ---------- W8-02 live-preview compartment (Preferences) ---------- */
/* A framed module that mirrors what a change will do, live. */
.live-preview { border: 2px solid var(--rule); background: var(--card); }

/* ---------- W8-02 entry rows collapse on narrow screens ---------- */
@media (max-width: 640px) {
  .entry { grid-template-columns: 1fr; gap: var(--s2); }
  .entry .colR { align-items: flex-start; text-align: left; }
}

/* ---------- W3.9 admin badge aliases ---------- */
/* Admin child templates use bare <table> inside compartments, .empty and legacy badge
   names. Aliases mirror .badge-ok/-fail/-pending; .badge-warn and .empty are new. */
.rr-admin table { width: 100%; border-collapse: collapse; font-size: 0.9rem; border-top: 3px solid var(--rule); }
.rr-admin th { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
          color: var(--faint); text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 2px solid var(--rule); white-space: nowrap; }
.rr-admin td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 2px solid var(--rule); vertical-align: top; }
.badge-warn { color: var(--warn); border: 2px solid var(--warn); padding: 0 6px; }
.empty { color: var(--faint); font-style: italic; padding: var(--s3) 0; }
.badge-green { color: var(--ok); }
.badge-red { color: var(--err); }
.badge-grey, .badge-gray { color: var(--pending); }
.badge-orange { color: var(--warn); border: 2px solid var(--warn); padding: 0 6px; }
/* ---------- Shared button sizes + framed status chips ---------- */
/* (The homepage is a standalone document since the 2026-09-05 build1 swap; the
   former lp-*/W3.10 landing sections are gone. These pieces are app-shared.) */
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { display: block; width: 100%; text-align: center; }

.chip .dot { width: 8px; height: 8px; background: currentColor; display: inline-block; }

/* ---------- "The Register" — housemate finder (2026-09-06 owner pick) ---------- */
/* One compartment of full-width ruled dossier entries on a fixed three-column grid:
   tile + caption | body | action rail. Grey-ladder frames per C9 v1.17; the entry
   body reuses .photo-tile / .figs-.fig / .tag / .chip and only adds what the ledger
   grammar needs. Every entry renders the same slots, sparse or rich. */
.rr-lbl { display: block; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase;
          letter-spacing: 0.08em; color: var(--faint); margin: 0 0 var(--s1); }
.rr-fine { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
           letter-spacing: 0.05em; color: var(--muted); line-height: 1.6; }
.rr-none { color: var(--faint); }

/* mechanism strip: three numbered steps across one compartment */
.rr-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.rr-step { padding: var(--s4); border-right: 1px solid var(--hair); }
.rr-step:last-child { border-right: 0; }
.rr-step h2 { font-weight: 400; font-size: 1.05rem; margin: 0 0 var(--s1); }
.rr-step p { color: var(--muted); margin: 0; }
.rr-step-num { display: block; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
               letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--s2); }

/* "Your entry" status bar: state dot + completeness meter | facts | actions */
.rr-entrybar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3) var(--s4);
               align-items: center; border: 2px solid var(--rule); background: var(--panel);
               padding: var(--s3) var(--s4); margin-top: var(--s4); }
.rr-entrybar p { margin: 0; }
.rr-entry-who { font-size: 0.95rem; }
.rr-entry-blurb { font-size: 0.9rem; color: var(--ink-soft); max-width: 62ch; margin: 0 0 var(--s1); }
/* square, like .chip .dot — rr.css stays hard-edged; the round dot is landing-only */
.rr-dot { display: inline-block; width: 8px; height: 8px; background: var(--faint);
          margin-right: var(--s2); vertical-align: middle; }
.rr-dot.is-live { background: var(--ok); }
.rr-dot.is-paused { background: var(--warn); }
.rr-meter { display: flex; gap: 2px; margin-top: var(--s1); }
.rr-meter i { width: 16px; height: 6px; background: var(--hair); border: 1px solid var(--rule); }
.rr-meter i.on { background: var(--ink-soft); border-color: var(--ink-soft); }
.rr-barlinks { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.rr-barlinks form { display: inline; }

/* the register entries */
.rr-register { margin-top: var(--s4); }
.rr-reg-entry { display: grid; grid-template-columns: 112px minmax(0, 1fr) 232px; gap: var(--s4);
                padding: var(--s4); border-top: 1px solid var(--hair); }
.rr-reg-entry:first-of-type { border-top: 0; }
.rr-reg-entry.is-mutual { background: var(--paper-2); }
.rr-reg-tile .rr-lbl { text-align: center; }
.rr-reg-name { font-size: 1.5rem; font-weight: 400; line-height: 1.2; margin: 0; }
.rr-reg-course { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
                 letter-spacing: 0.08em; color: var(--muted); margin: var(--s1) 0 0; }
.rr-ledger { margin: var(--s3) 0; padding: var(--s2) 0;
             border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rr-ledger .fig .n { font-weight: 400; font-size: 1.5rem; }
.rr-ledger .fig .n.none { font-size: 1.05rem; color: var(--muted); }
.rr-reg-brief, .rr-reg-want { font-size: 0.9rem; margin: 0 0 var(--s3); }
.rr-reg-brief .rr-lbl, .rr-reg-want .rr-lbl, .rr-record .rr-lbl { display: inline; margin: 0 var(--s2) 0 0; }
.rr-reg-blurb { color: var(--ink-soft); max-width: 58ch; margin: 0 0 var(--s3); }
.rr-reg-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s4);
               border-top: 1px solid var(--hair); padding-top: var(--s2); margin-bottom: var(--s3); }
.rr-reg-meta p { font-size: 0.9rem; margin: 0; }
.rr-reg-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.tag.is-shared { border-color: var(--ink-soft); background: var(--card); color: var(--ink); }
.tag.rr-none { border-style: dashed; }
.rr-record { border: 1px solid var(--rule); background: var(--panel); padding: var(--s2) var(--s3);
             font-size: 0.9rem; margin: 0; }
.rr-reg-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
               flex-wrap: wrap; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--hair); }
.rr-reg-foot .rr-fine { max-width: 54ch; }
.rr-reg-foot summary { cursor: pointer; }

/* action rail */
.rr-reg-rail { border-left: 1px solid var(--hair); padding-left: var(--s4); }
.rr-reg-rail p { margin: 0 0 var(--s2); }
.rr-reg-rail form { margin: var(--s2) 0; }
.rr-contact { border: 1px solid var(--rule); background: var(--card); padding: var(--s2); margin: var(--s2) 0; }
.rr-contact .rr-addr { font-family: var(--mono); font-size: 0.74rem; word-break: break-all; margin: 0; }

/* empty register + the first-visit guide that replaces the entries */
.rr-reg-empty { padding: var(--s6) var(--s4); text-align: center; }
.rr-reg-empty h2 { font-weight: 400; font-size: 1.5rem; margin: var(--s2) 0; }
.rr-reg-empty p { color: var(--muted); max-width: 58ch; margin: 0 auto var(--s2); }
.rr-reg-empty .btn { margin-top: var(--s3); }
.rr-reg-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4);
              padding: var(--s3) var(--s4); border-top: 1px solid var(--hair); }
.rr-reg-row h3 { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; margin: 0 0 var(--s1); }
.rr-reg-row p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.rr-ghost { width: 112px; height: 112px; border: 2px dashed var(--rule); background: var(--paper-2); }
.rr-pagenote { max-width: 62ch; margin-top: var(--s4); }

@media (max-width: 900px) {
  .rr-reg-entry { grid-template-columns: 112px minmax(0, 1fr); }
  .rr-reg-rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hair);
                 padding-left: 0; padding-top: var(--s3); }
  .rr-steps { grid-template-columns: 1fr; }
  .rr-step { border-right: 0; border-bottom: 1px solid var(--hair); }
  .rr-step:last-child { border-bottom: 0; }
  .rr-entrybar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rr-reg-entry, .rr-reg-row { grid-template-columns: 1fr; }
  .rr-reg-meta { grid-template-columns: repeat(2, 1fr); }
  .rr-ghost { display: none; }
}
.chip.ok      { color: var(--ok);      border-color: var(--ok);      background: var(--ok-fill); }
.chip.warn    { color: var(--warn);    border-color: var(--warn);    background: var(--warn-fill); }
.chip.err     { color: var(--err);     border-color: var(--err);     background: var(--err-fill); }
.chip.info    { color: var(--info);    border-color: var(--info);    background: var(--info-fill); }
.chip.pending { color: var(--pending); border-color: var(--pending); background: var(--pending-fill); }