/* ─────────────────────────────────────────────────────────────
   Recess — design tokens + the register device
   Extracted from the review artifact (Recess Beta.dc.html).

   PROVENANCE, so you know what to trust:
   · :root tokens        — the literal values used in the artifact, named.
   · @keyframes          — lifted verbatim. These are the real thing.
   · .rc-* classes       — NEWLY AUTHORED here. The artifact styles
                           everything with inline style attributes; there
                           were no classes to extract. These are my
                           translation of the repeated inline patterns
                           into the rules you'd actually ship. Treat them
                           as a starting sheet, not as extracted code.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ground + frame */
  --rc-bone:        #FDF8F3;  /* page + card ground */
  --rc-warm-grey:   #E3D7CD;  /* hairline rules, inner dividers */
  --rc-frame:       #EFE6DC;  /* outer desk around a device frame */

  /* ink */
  --rc-ink:         #2E2724;  /* THE colour: type, borders, fills */
  --rc-ink-soft:    #6E5B52;  /* secondary type — ON BONE ONLY (see note) */

  /* the one tint */
  --rc-tint:        #F1E4D8;  /* card fills, form fields, "yours" blocks */

  /* accent — once per screen */
  --rc-accent:      #BC4A33;
  --rc-accent-on:   #FFFFFF;  /* 5.04:1 on --rc-accent */

  /* CONTRAST RULE, load-bearing:
     --rc-ink-soft on --rc-tint is 3.1:1 and FAILS body text.
     Small text on a tint block must be --rc-ink (7.3:1).
     --rc-ink-soft is legal on --rc-bone only. */

  /* type */
  --rc-display: Rockwell, "Bookman Old Style", Georgia, serif;   /* → Alfa Slab One */
  --rc-ui:      "Helvetica Neue", Helvetica, Arial, sans-serif;  /* → Archivo */

  --rc-label-size: 10px;
  --rc-label-track: .14em;

  /* structure */
  --rc-edge:       2.5px;   /* card border */
  --rc-edge-frame: 3px;     /* device / surface frame */
  --rc-edge-hair:  1.5px;   /* inner divider */

  /* motion */
  --rc-deal:   640ms cubic-bezier(.16,.86,.28,1);
  --rc-travel: 980ms cubic-bezier(.35,.05,.2,1);
  --rc-settle: 420ms cubic-bezier(.2,.85,.3,1);
  --rc-commit: 420ms cubic-bezier(.2,.85,.3,1);
  --rc-land:   300ms ease-out;
}

/* ── resets ─────────────────────────────────────────────── */

html, body { margin: 0; padding: 0; background: var(--rc-frame); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { font-family: var(--rc-ui); color: var(--rc-ink); }

a { color: var(--rc-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rc-ink-soft); }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; text-align: left; }
input, textarea { font: inherit; color: var(--rc-ink); }
::placeholder { color: var(--rc-ink); opacity: 1; }  /* moss placeholders fail on tint */

/* ── type roles ─────────────────────────────────────────── */

.rc-display { font-family: var(--rc-display); font-weight: 700; line-height: 1.1; }
.rc-label {
  font-size: var(--rc-label-size);
  letter-spacing: var(--rc-label-track);
  text-transform: uppercase;
  font-weight: 700;
}
.rc-meta { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--rc-ink-soft); }

/* ── THE REGISTER DEVICE ────────────────────────────────────
   The one non-negotiable pattern. Whose voice is this?
   Three redundant channels, never colour alone:
     yours → solid edge + tint fill + filled square glyph + roman
     ours  → dashed edge + no fill  + hollow round glyph + italic
   Applies identically on a card, on the calendar, in the rail. */

.rc-yours {
  border: var(--rc-edge) solid var(--rc-ink);
  background: var(--rc-tint);
}
.rc-ours {
  border: var(--rc-edge) dashed var(--rc-ink);
  background: var(--rc-bone);
  font-style: italic;
}
.rc-glyph-yours { width: 9px; height: 9px; background: var(--rc-ink); }
.rc-glyph-ours  { width: 9px; height: 9px; border: 2px dashed var(--rc-ink); border-radius: 50%; }

/* waiting for someone's life to happen — NEVER a shimmer */
.rc-empty {
  border: var(--rc-edge) dashed var(--rc-ink-soft);
  background: transparent;
}
.rc-glyph-empty { width: 12px; height: 12px; border: 2px solid var(--rc-ink-soft); }

/* ── surfaces ───────────────────────────────────────────── */

.rc-frame { background: var(--rc-bone); border: var(--rc-edge-frame) solid var(--rc-ink); overflow: hidden; }
.rc-rule  { height: 7px; background: repeating-linear-gradient(90deg, var(--rc-ink) 0 11px, var(--rc-bone) 11px 22px); }
.rc-hair  { border-top: 2px solid var(--rc-warm-grey); }

.rc-card { display: flex; flex-direction: column; padding: 15px 16px 14px; min-height: 250px; }
/* margin-bottom is NOT optional: without it the chip and the display-type title below
   it overlap, because the title's line-height is 1.08 and its ascenders run up into
   the chip's box. */
.rc-card__marker { align-self: flex-start; background: var(--rc-ink); color: var(--rc-bone); padding: 4px 8px; margin-bottom: 11px; }
.rc-card__name   { font-family: var(--rc-display); font-weight: 700; font-size: 23px; line-height: 1.08; }
.rc-card__foot   { margin-top: auto; padding-top: 14px; }
.rc-card__shape  { border-top: var(--rc-edge-hair) solid var(--rc-ink); padding-top: 10px; color: var(--rc-ink); }

/* one game vs a set — the face must say which, a tap is never a coin flip */
.rc-card--set { position: relative; }
.rc-card--set::before,
.rc-card--set::after {
  content: ""; position: absolute; inset: 0;
  border: var(--rc-edge) solid var(--rc-ink); background: var(--rc-tint); z-index: -1;
}
.rc-card--set::before { transform: translate(6px, -6px); }
.rc-card--set::after  { transform: translate(12px, -12px); }

.rc-btn {
  background: var(--rc-accent); color: var(--rc-accent-on);
  font-family: var(--rc-display); font-weight: 700; font-size: 16px;
  padding: 11px 14px; text-align: center;
}
.rc-btn--quiet { background: none; color: var(--rc-ink); border: 2px solid var(--rc-ink); }
/* dismissing a game is first-class, never a menu item */
.rc-btn--dismiss { background: none; color: var(--rc-ink); border: 2px solid var(--rc-ink); line-height: 1.15; }

/* touch floors — both layouts are read at close range */
@media (pointer: coarse) {
  .rc-btn, .rc-btn--quiet, .rc-btn--dismiss { min-height: 46px; }
  .rc-nav__item { min-height: 56px; }
}

/* ── motion: five moments, each showing something that happened ── */

/* 1. a card being DEALT — from off-frame, pivoting on its corner */
@keyframes deal {
  0%   { transform: translate3d(148px,-96px,0) rotate(-11deg) scale(.94); opacity: 0;
         box-shadow: 14px 22px 0 -6px rgba(46,39,36,.28); }
  22%  { opacity: 1; }
  68%  { transform: translate3d(-6px,7px,0) rotate(1.1deg) scale(1.004);
         box-shadow: 5px 8px 0 -3px rgba(46,39,36,.22); }
  86%  { transform: translate3d(2px,-2px,0) rotate(-.35deg) scale(1); }
  100% { transform: none; opacity: 1; box-shadow: 0 0 0 0 rgba(46,39,36,0); }
}

/* 2. a fact TRAVELLING into the playground rail as it is placed
      — the most valuable animation here. Offsets are the desktop
        conversation→rail delta; recompute from real geometry. */
@keyframes travel {
  0%   { opacity: 0; transform: translate(0,0) scale(1); }
  14%  { opacity: 1; }
  88%  { opacity: .9; }
  100% { opacity: 0; transform: translate(556px,-196px) scale(.84); }
}
@keyframes settle {
  0%   { transform: translateY(-10px); opacity: 0; }
  70%  { transform: translateY(2px);   opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* 3. a rating LANDING */
@keyframes landed { 0% { opacity: 0; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } }

/* 4. a dashed suggestion turning SOLID when accepted */
@keyframes commit { 0% { transform: scale(.985); } 55% { transform: scale(1.012); } 100% { transform: none; } }

/* 5. a dismissed game ACKNOWLEDGING what it learned, then going */
@keyframes acked   { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
@keyframes leaving { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(.985); } }

/* the wait, when there IS a real wait — one dot at a time, left to right */
@keyframes tick { 0%, 20% { opacity: 1; transform: translateY(-2px); } 40%, 100% { opacity: .25; transform: none; } }
.rc-tick > * { width: 9px; height: 9px; background: var(--rc-ink); animation: tick 1080ms ease-in-out infinite; }
.rc-tick > :nth-child(2) { animation-delay: 360ms; }
.rc-tick > :nth-child(3) { animation-delay: 720ms; }

/* Nothing loops except a real wait. Empty blocks never shimmer.
   Nothing animates to fill time it did not take. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}

/* ── the playbook's own layout ───────────────────────────────
   Layout only. Every colour, edge, glyph and duration above is the design's;
   nothing here re-states an identity decision. */

/* 1180px, matching Alpha's playground (`.home` in companion-home/web/styles.css).
   Not a taste call - it is the width Marco already reads Recess at every day, and the
   two surfaces sit behind the same nav.

   This was 60rem/960px, and raising `body.wired` to 76rem on its own changed nothing
   because THIS is the binding constraint - the outer cap was never what was clamping
   the board. Two stacked max-widths, and the fix went to the wrong one. If the board
   ever looks narrow again, measure `.rc-frame` before touching anything above it. */
.rc-frame{max-width:1180px;margin:26px auto;padding:0 0 26px}
.rc-top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px}
.rc-mark{font-family:var(--rc-display);font-weight:700;font-size:23px}
.rc-date{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--rc-ink);
  border:2px solid var(--rc-ink);border-radius:99px;padding:4px 12px}
.rc-h1{font-size:34px;margin:24px 22px 14px}
/* .rc-h2 and .rc-sub have been on shipped pages since the rules screen and were
   never in this sheet, so they have been rendering on browser defaults - a Times
   heading in the middle of a Rockwell page. Written here at the same weights as
   their neighbours rather than invented: h2 is the h1's step down, and .rc-sub is
   the same secondary voice as .rc-blank__why. */
.rc-h2{font-family:var(--rc-display);font-weight:700;font-size:19px;
  margin:26px 22px 8px;line-height:1.15}
.rc-sub{font-size:14px;line-height:1.5;color:var(--rc-ink-soft);margin:0 22px 14px}
.rc-day-h{font-size:19px;margin:26px 22px 8px}

.rc-toggle{display:flex;margin:0 22px 16px;border:var(--rc-edge) solid var(--rc-ink);width:max-content}
.rc-seg{font-family:var(--rc-display);font-weight:700;font-size:17px;padding:11px 26px;
  text-decoration:none;color:var(--rc-ink);border-right:var(--rc-edge) solid var(--rc-ink)}
.rc-seg:last-child{border-right:0}
.rc-seg.on{background:var(--rc-ink);color:var(--rc-bone)}

.rc-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 22px 14px}
.rc-chip{border:2px solid var(--rc-ink);padding:4px 11px;font-size:12px;
  text-transform:uppercase;letter-spacing:.09em}
.rc-meta{margin:0 22px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rc-ink-soft)}

.rc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:0 22px 22px}
.rc-day{border:2px solid var(--rc-ink);padding:8px 4px;text-align:center;background:var(--rc-bone);
  display:block;text-decoration:none;color:var(--rc-ink)}
/* Only a day with something on it is a link, so only that one may look like one. */
a.rc-day:hover{background:var(--rc-tint)}
a.rc-day.on:hover{background:var(--rc-ink)}
/* The anchor lands under nothing - there is no fixed header - but a little breathing
   room above the heading stops the jump feeling like it clipped the day. */
.rc-day-h{scroll-margin-top:18px}
.rc-day.rc-yours{background:var(--rc-tint)}
.rc-day.on{background:var(--rc-ink)}
.rc-day.on .rc-dow,.rc-day.on .rc-dom{color:var(--rc-bone)}
.rc-day.on .rc-glyph-yours{background:var(--rc-bone)}
.rc-dow{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.rc-dom{display:block;font-family:var(--rc-display);font-weight:700;font-size:18px}
.rc-day i{display:inline-block;margin-top:4px}

.rc-row{display:flex;gap:12px;align-items:flex-start;margin:0 22px 9px}
.rc-at{font-weight:700;font-size:13px;padding-top:13px;min-width:3.1rem}
.rc-blk{flex:1;padding:11px 14px;margin:0 22px 9px}
.rc-row .rc-blk{margin:0}
.rc-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.rc-hd i{flex:none}
.rc-title{font-size:16px}
.rc-why{font-size:14px;color:var(--rc-ink);margin:6px 0 0}
.rc-feeds{border:1.5px solid var(--rc-ink);padding:2px 7px;font-size:10px;
  text-transform:uppercase;letter-spacing:.09em}
.rc-asking{font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.rc-quiet{font-size:11px;color:var(--rc-ink-soft)}
.rc-kind{background:var(--rc-ink);color:var(--rc-bone);font-size:10px;padding:3px 7px;
  text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.rc-mini{font-size:11px;padding:4px 9px;margin-top:7px}
.rc-empty{margin:0 22px 12px}

/* ---------------------------------------------------------------------------
   THE FEEDS PICKER (2026-08-28)

   It was a <select multiple> + a text box + a third dropdown, side by side. Two
   ways in with no hint which one you were meant to use, and picking a second lane
   needed a held modifier key - which on a phone, where this surface lives, is not
   a hard gesture but an impossible one.

   Now every lane is a pill you tap. `aria-pressed` carries the state and the CSS
   reads it directly, so there is one truth rather than a class and an attribute
   drifting apart. The pill reuses .rc-ctl (the board's control chip) - same
   border-always, same dark fill when on - because it is the same object doing the
   same job, and a second chip idiom is a second thing to keep in step.
   --------------------------------------------------------------------------- */
.rc-picker{margin-top:8px}
.rc-lanes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:2px}
.lanepill{cursor:pointer;font-family:var(--rc-ui)}
.lanepill[aria-pressed="true"]{background:var(--rc-ink);color:var(--rc-bone)}
/* At the cap the unpressed ones go quiet. The refusal is still the server's - this
   only says so BEFORE the tap rather than after it. Pointer-events stay on so the
   pill is still focusable and readable; the handler is what declines. */
.lanepill.dim{opacity:.36;cursor:not-allowed}

/* The typed lane. A DASHED pill sitting IN the row, not a box beside it: it makes
   the same object the list makes, and on enter it becomes an ordinary filled pill.
   Dashed vs solid is the same not-yet-real device the register uses elsewhere. */
.rc-newlane{border:2px dashed var(--rc-ink-soft);background:var(--rc-bone);
  display:inline-flex;align-items:center;padding:0 3px 0 10px}
.rc-newlane input{border:0;background:transparent;color:var(--rc-ink);
  font-family:var(--rc-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  width:8.5rem;padding:8px 0;outline:none}
/* --rc-ink at .68 is ~5:1 even on the tint, so the hint stays legible where
   --rc-ink-soft would not (see the CONTRAST RULE at the top of this file). */
.rc-newlane input::placeholder{color:var(--rc-ink);opacity:.68;text-transform:none;
  letter-spacing:normal;font-style:italic}
.rc-newlane input:focus-visible{outline:2px solid var(--rc-ink);outline-offset:3px}
.rc-newlane .laneadd{border:0;background:transparent;color:var(--rc-ink);cursor:pointer;
  font-family:var(--rc-ui);font-size:15px;line-height:1;padding:0 7px}
.rc-picker .lanecount{font-weight:700;font-style:normal}

/* ---------------------------------------------------------------------------
   THE BOARD (design 2026-08-13)

   Three controls - kind, tag, order - and a card that can be read, edited,
   converted or dismissed without leaving the row. Every control is a real
   <form>/<a>, never a script: this surface renders server-side and a filter
   that needs JS to work is a filter that does not work with JS off.
   --------------------------------------------------------------------------- */
/* One control row. Every row starts at the same left edge and carries a label in
   the same slot, so the three of them read as a stack rather than as three
   differently-indented lines. `margin-left:auto` is deliberately NOT used: a
   wrapped flex line still honours it, which is what left the order row starting
   in the middle of the screen at some window widths. */
.rc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 22px 10px}
.rc-bar > .rc-label{width:4.2rem;flex:none;color:var(--rc-ink-soft)}

/* A control chip. `.on` is the dark fill; the border is ALWAYS there, so the
   unselected ones stay visible objects rather than fading into the ground. */
.rc-ctl{border:2px solid var(--rc-ink);background:var(--rc-bone);color:var(--rc-ink);
  padding:8px 13px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap}
.rc-ctl.on{background:var(--rc-ink);color:var(--rc-bone)}
.rc-ctl b{font-weight:700;opacity:.72}

/* The tag search. It replaced a chip row that clipped on mobile at 14 tags.
   The <form> IS the box - it used to be a <span> wrapping a <form>, and since a
   form is a block element it broke out of the inline container and drew itself
   somewhere else entirely. One element, one border. */
.rc-find{display:flex;align-items:center;gap:9px;border:2px solid var(--rc-ink);
  background:var(--rc-tint);padding:6px 12px;width:18rem;max-width:100%;margin:0}
.rc-hash{font-size:13px;font-weight:700;flex:none}
.rc-find input{flex:1;min-width:0;background:transparent;border:0;outline:none;
  font-size:14px;color:var(--rc-ink);padding:4px 0}
.rc-find .rc-act{flex:none}

/* auto-fill, so the column count follows the window instead of being fixed at three.
   The MINIMUM is what actually decides how this reads, and it is 18rem rather than 16:
   at 16rem a 1180px frame fits a fourth column, so widening the frame made every card
   NARROWER (271px, down from 293) and the longest title went from five lines to six.
   More columns is not the same as more room. 18rem holds it at three across ~370px on
   a desktop, and it still collapses to two and then one on the way down. */
.rc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));
  gap:16px;margin:0 22px 12px}
.rc-card{background:var(--rc-tint);border:2px solid var(--rc-ink);padding:13px 14px 11px;
  display:flex;flex-direction:column;min-height:168px}
.rc-card .rc-title{font-family:var(--rc-display);font-weight:700;font-size:16px;
  line-height:1.3;margin-bottom:10px}
.rc-card.done{background:var(--rc-bone);border-color:var(--rc-ink-soft);min-height:130px}
.rc-card.done .rc-title{color:var(--rc-ink-soft);text-decoration:line-through}
.rc-card.done .rc-kind{background:none;color:var(--rc-ink-soft)}

.rc-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.rc-tag{display:inline-flex;align-items:center;gap:6px;background:var(--rc-bone);
  border:1.5px solid var(--rc-ink);padding:3px 8px;font-size:10.5px;
  letter-spacing:.05em;font-weight:700;text-decoration:none;color:var(--rc-ink)}

/* A tag pill's own x, distinct from the pill's filter-click - two controls sharing
   one visual chip, not one control doing two jobs. */
.rc-tag-wrap{display:inline-flex;align-items:center;background:var(--rc-bone);
  border:1.5px solid var(--rc-ink)}
.rc-tag-wrap .rc-tag{border:0;background:none;padding:3px 4px 3px 8px}
.rc-tag-x{border:0;background:none;color:var(--rc-ink-soft);font-size:12px;
  line-height:1;padding:3px 7px 3px 0;cursor:pointer}
.rc-tag-x:hover{color:var(--rc-ink)}

/* The `+ tag` field sits in the tag row itself, same size as the pills beside it -
   it is the next tag you have not typed yet, not a separate section. */
.rc-tag-add input{background:none;border:1.5px dashed var(--rc-ink-soft);
  padding:3px 8px;font-size:10.5px;letter-spacing:.05em;color:var(--rc-ink);
  width:64px}
.rc-tag-add input::placeholder{color:var(--rc-ink-soft)}
.rc-tag-add input:focus{border-style:solid;border-color:var(--rc-ink);outline:none}

/* The button that sits in front of the field above (toggle script in _board()).
   display:none by default - it is only ever shown once the script has run, so with
   no JS the page shows the real input instead, never both at once. */
.rc-tag-add-btn{display:none;background:none;border:1.5px dashed var(--rc-ink-soft);
  padding:3px 8px;font-size:10.5px;letter-spacing:.05em;color:var(--rc-ink-soft);
  font-family:inherit;cursor:pointer}
.rc-tag-add-btn:hover{border-style:solid;border-color:var(--rc-ink);color:var(--rc-ink)}

/* The `+` row: text, kind, add - ONE bordered box, built off `.rc-find` above it so
   the two rows read as siblings rather than as a control and a form.

   It is a FIXED width, not `flex:1`. As a growing item it filled the row, pushed the
   button onto a second line, and a lone flex item on a wrapped line stretched into a
   full-width orange bar taller than the cards under it (seen in the browser, invisible
   to every markup test). 26rem holds all three controls on one line and still shrinks
   under `max-width:100%` on a phone.

   46rem, not 26 (Marco, 2026-08-18: "make it wider so that I can actually add something
   with some level of depth"). 26rem fit the three controls and left the text field about
   fifteen characters wide, so anything longer than a phrase scrolled out of sight while
   you typed it. */
.rc-add{display:flex;align-items:center;gap:8px;border:2px solid var(--rc-ink);
  background:var(--rc-tint);padding:6px 8px 6px 12px;width:46rem;max-width:100%;margin:0}
/* A COMPOSE FIELD NEEDS A SURFACE OF ITS OWN. This was `background:transparent;border:0`,
   copied off `.rc-find` above - correct there, because a search field is announced by the
   `#` beside it and the row around it. Nothing announces this one, so it read as a line of
   grey body text and Marco could not tell it was typeable at all. The bone fill and the
   real border are the whole fix. */
.rc-add-text{flex:1;min-width:0;background:var(--rc-bone);border:1.5px solid var(--rc-ink);
  outline:none;font-size:14px;color:var(--rc-ink);padding:7px 9px;font-family:inherit}
.rc-add-text::placeholder{color:var(--rc-ink-soft)}
/* The refusal, under the row that refused. Only rendered when there is one. */
.rc-add-err{margin:6px 0 0 62px;font-size:12px;color:var(--rc-accent);font-weight:600}

/* The board mid-write. A write no longer reloads the page, so without this the screen
   is completely still between the tap and the new board arriving - and a still screen
   after a tap reads as a button that did nothing. Deliberately faint: this is normally
   under 200ms, and anything stronger would be a flash on every single action.
   `pointer-events:none` is the honest half - one write is in flight and a second tap
   is refused anyway, so the board should stop looking tappable while it is. */
.rc-working{opacity:.62;pointer-events:none;transition:opacity .12s ease}
.rc-add-kind{flex:none;background:var(--rc-bone);border:1.5px solid var(--rc-ink);
  padding:3px 4px;font-family:inherit;font-size:10.5px;letter-spacing:.05em;
  color:var(--rc-ink)}
/* The board's scale, not the 16px primary CTA - this button sits inside a filter bar
   beside 10px chips, and `.rc-btn` alone made it the loudest thing on the screen.

   It used to carry `width:auto` as well, to escape the global `button.rc-btn` that was
   full-width for every screen. That global no longer is, so the escape hatch is gone
   too: a local override for a rule that stopped existing reads as load-bearing to
   whoever touches this next. */
.rc-add .rc-btn{flex:none;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border:0;cursor:pointer}

/* The kind picker in a card's bottom row. Sized off the pills beside it, not off the
   longest word in it - `white-space:nowrap` on the row is what stops "reminder" from
   pushing the x onto a second line the way `⇄ idea` used to wrap. */
.rc-move{display:inline-flex;align-items:center;gap:5px}
.rc-move-sel{background:none;border:1.5px solid var(--rc-ink-soft);padding:2px 4px;
  font-family:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--rc-ink-soft);cursor:pointer;max-width:6.5rem}
.rc-move-sel:hover,.rc-move-sel:focus{border-color:var(--rc-ink);color:var(--rc-ink);
  outline:none}
.rc-move-go{background:none;border:1.5px solid var(--rc-ink-soft);cursor:pointer}

/* The edit pin, inline at the end of the title. Not a column beside it: as a fixed
   side column it took ~40% of a card in a three-up grid and wrapped short titles to
   four lines to make room for one glyph. */
.rc-pin{font-family:var(--rc-sans, inherit);font-size:13px;font-weight:400;
  text-decoration:none;color:var(--rc-ink-soft);white-space:nowrap;
  vertical-align:baseline;padding:0 2px}
.rc-pin:hover{color:var(--rc-ink)}

/* Pinned to the bottom so cards of different text lengths still line their
   controls up with each other across the grid. */
.rc-acts{margin-top:auto;border-top:1.5px solid var(--rc-ink);padding-top:9px;
  display:flex;align-items:center;gap:8px;min-height:2.1rem}
.rc-card.done .rc-acts{border-top-color:var(--rc-ink-soft)}
.rc-acts .rc-right{margin-left:auto;display:flex;align-items:center;gap:7px}
.rc-act{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border:0;border-bottom:1.5px solid var(--rc-ink);background:none;color:var(--rc-ink);
  padding:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.rc-act.nowrap{white-space:nowrap}
.rc-act.x{border-bottom:0;font-size:15px;line-height:1;padding:0 2px}
.rc-check{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;background:none;border:0;padding:0;
  cursor:pointer;color:var(--rc-ink)}
.rc-box{display:block;width:17px;height:17px;border:2px solid var(--rc-ink);
  background:var(--rc-bone);flex:none}
.rc-box.ticked{background:var(--rc-ink);color:var(--rc-bone);font-size:11px;
  text-align:center;line-height:13px}

.rc-edit textarea{width:100%;background:var(--rc-bone);border:2px solid var(--rc-ink);
  padding:10px 11px;font-family:var(--rc-display);font-weight:700;font-size:16px;
  line-height:1.3;resize:none;outline:none;margin-bottom:9px;color:var(--rc-ink)}
.rc-edit .rc-row2{display:flex;gap:8px;margin-bottom:9px}



/* ---------------------------------------------------------------------------
   THE EVENT SCREEN - one block's own page, both halves
   --------------------------------------------------------------------------- */
/* The block's title opens it. Underlined on hover only: every block would otherwise
   be a wall of underlines, and the row already reads as a thing you can act on. */
.rc-open{display:block;text-decoration:none;color:var(--rc-ink)}
.rc-open:hover{text-decoration:underline;text-underline-offset:3px}

.rc-half{margin:0 22px 16px;padding:16px 18px}
.rc-half .rc-label{display:block;margin-bottom:10px;color:var(--rc-ink)}
.rc-ask{font-size:24px;line-height:1.2;margin:0 0 14px}

/* Ten real buttons. A slider has no value to read back and a select hides the range
   behind a tap; the number you picked has to stay legible on the page afterwards. */
.rc-scale{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.rc-num{border:2px solid var(--rc-ink);background:var(--rc-bone);color:var(--rc-ink);
  font-family:var(--rc-display);font-weight:700;font-size:17px;width:3rem;height:3rem;
  text-align:center;cursor:pointer;padding:0}
.rc-num.on{background:var(--rc-ink);color:var(--rc-bone)}
.rc-num:hover{background:var(--rc-tint)}
.rc-num.on:hover{background:var(--rc-ink)}

/* The proposed variable. Set in the display face because it is the sentence the whole
   screen exists to show, and italic on a proposal because it is OURS until taken. */
.rc-variable{font-family:var(--rc-display);font-weight:700;font-size:21px;
  line-height:1.3;margin:0 0 12px}
.rc-ours .rc-variable{font-style:italic}
.rc-half .rc-row2{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px}
.rc-err{color:var(--rc-accent);text-transform:none;letter-spacing:0;font-size:14px}

.rc-words{display:block;margin-top:18px}
.rc-words textarea{width:100%;background:var(--rc-bone);border:2px solid var(--rc-ink);
  padding:11px 12px;font-size:15px;line-height:1.5;resize:vertical;outline:none;
  color:var(--rc-ink);margin-bottom:10px}
.rc-words .rc-why{margin:0 0 10px}

.rc-nav{display:flex;gap:0;margin:30px 22px 0;border-top:var(--rc-edge) solid var(--rc-ink);
  padding-top:0}
.rc-nav a{flex:1;text-align:center;padding:15px 8px;text-decoration:none;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  border-right:2px solid var(--rc-warm-grey)}
.rc-nav a:last-child{border-right:0}
.rc-nav a.on{background:var(--rc-accent);color:var(--rc-accent-on)}

@media (max-width:640px){
  .rc-frame{margin:0;border-left:0;border-right:0}
  .rc-row{flex-direction:column;gap:2px}
  .rc-at{padding-top:0;font-size:12px}
  .rc-toggle{width:auto}.rc-seg{flex:1;text-align:center;padding:11px 8px}
  .rc-nav{position:sticky;bottom:0;background:var(--rc-bone);margin-left:0;margin-right:0}
}

/* ── the companion: conversation + playground rail ───────────
   Layout only. Fact vs guess is THE REGISTER DEVICE above (.rc-yours / .rc-ours and
   their glyphs) - not restated here, because a second copy of an identity decision is
   how the two surfaces drift apart.

   The one structural rule the design states outright: DESKTOP HAS A RAIL, MOBILE DOES
   NOT ("same conversation, no rail - pieces arrive inline"). So the rail is not a
   narrower version of itself at 900px; it is absent, and the pieces go into the
   thread. `#rail` display:none is the switch the client reads to decide where to put
   a piece - one source of truth for the breakpoint, in CSS, where it belongs. */

/* ONE definition of where the rail stops existing. The media query below uses it, and
   the client reads it back with getPropertyValue so the number is never written twice.
   (Custom properties cannot be used inside a media query's condition, so the literal
   appears once more down there - keep the two in step; the test asserts they match.) */
:root{--rc-rail-stops: 900px}

.rc-conv{display:flex;align-items:stretch;min-height:0}
.rc-thread{flex:1;min-width:0;display:flex;flex-direction:column}
.rc-turns{flex:1;overflow-y:auto;padding:22px 30px 8px;max-height:64vh}
/* NOT `.rc-day` - that is the calendar's day CELL, a bordered box, 190 lines up. The
   name collided and the conversation's date marker drew itself as an empty calendar
   square across the top of the thread. */
.rc-daymark{margin-bottom:16px;color:var(--rc-ink-soft)}
/* WHICH ROOM YOU ARE IN - the north star game's own name, under the masthead. It
   shares the companion's page, so without this the two conversations look identical
   (2026-09-25). One line, wraps on a phone, the way back is a normal quiet link. */
.rc-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding:10px 22px;border-bottom:var(--rc-edge-hair) solid var(--rc-warm-grey)}
.rc-where b{font-family:var(--rc-display);font-size:17px}
.rc-where__back{margin-left:auto}

/* The way back into the rest of the conversation. The thread draws only a TAIL
   (companion.VISIBLE_TURNS) because the whole transcript is what stopped a phone
   rendering this page at all - 1,500 bubbles laid out 280,222px tall, and the
   browser killed the tab rather than draw it. Everything above the tail is one
   press away, and this is that press.

   It gets ITS OWN CLASS rather than borrowing the quiet link the settings block
   defines. Reusing that one read as thrift and was cross-surface coupling: a rule
   written up here for a class another surface owns changes that surface too, on a
   page nobody is looking at. Same look, same 44px target, no shared owner. */
.rc-earlier{display:flex;justify-content:center;margin:0 0 20px}
.rc-earlier__btn{position:relative;display:inline-block;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--rc-ink);
  background:none;border:0;border-bottom:1.5px solid var(--rc-ink);
  padding:6px 0;line-height:1;cursor:pointer;font-family:inherit}
/* the target reaches 44px without the visible text growing - same device as
   .rc-quietlink uses, which is where this pattern comes from. */
.rc-earlier__btn::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
.rc-earlier__btn[disabled]{opacity:.5;cursor:default}

/* theirs is the companion's voice: display serif, unboxed, it owns the page.
   yours is a block you placed: tint fill, solid edge, right-aligned. */
.rc-said{max-width:74%;margin-bottom:18px;font-family:var(--rc-display);font-weight:700;
  font-size:17px;line-height:1.45}
/* family mode: who is speaking. A tag ABOVE the line, in the UI face, so the
   name can never be read as the first word of the sentence (Marco, 2026-10-06:
   "Lucy and the check-in at the end matters..."). Drawn by famDecorate. */
.rc-said .rc-who{display:table;margin:0 0 6px;padding:2px 9px;border-radius:999px;
  background:var(--rc-accent);color:var(--rc-accent-on);font-family:var(--rc-ui);
  font-size:var(--rc-label-size);font-weight:800;line-height:1.5;
  letter-spacing:var(--rc-label-track);text-transform:uppercase}
.rc-mine{display:flex;justify-content:flex-end;margin-bottom:16px}
.rc-mine>div{max-width:74%;background:var(--rc-tint);border:var(--rc-edge) solid var(--rc-ink);
  padding:11px 14px;font-size:15px;line-height:1.5}

.rc-compose{border-top:var(--rc-edge) solid var(--rc-warm-grey);padding:14px 30px 18px;
  background:var(--rc-bone)}
.rc-compose form{margin:0}
/* THE BOX IS THE CONTROL. Both buttons sat on the line BESIDE the textarea for
   two builds, and each one took its width out of the only thing people actually
   use - on a phone that left a slot barely wider than a sentence ("on mobile
   it's just really thin", Marco 2026-08-17). Now the box owns the full width and
   the buttons float inside its own bottom corner, over padding reserved for them
   rather than over the words.

   Typing is never walled off by any of it - pills never replace the box, and
   neither does a microphone. */
.rc-msgbox{position:relative;background:var(--rc-tint);
  border:var(--rc-edge) solid var(--rc-ink);padding:12px 14px 56px}
.rc-msgbox textarea{display:block;width:100%;height:24px;background:none;border:none;
  padding:0;font:inherit;font-size:15px;line-height:1.45;color:inherit;
  resize:none;outline:none;overflow-y:hidden}
.rc-msgtools{position:absolute;right:9px;bottom:9px;
  display:flex;gap:8px;align-items:center}
.rc-icon{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:2px solid var(--rc-ink);
  background:var(--rc-bone);color:var(--rc-ink)}
.rc-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rc-send{background:var(--rc-ink);color:var(--rc-bone);border-color:var(--rc-ink)}
.rc-send[disabled]{opacity:.45;cursor:default}
/* Recording, in the accent colour, with the square filled - a stop sign reads as
   stop only when it is solid. */
.rc-icon.on{background:var(--rc-accent);color:var(--rc-accent-on);
  border-color:var(--rc-accent)}
.rc-icon.on svg rect{fill:currentColor}
/* `hidden` loses to the flex display this rule sets, so a deployment with no
   GROQ_API_KEY would show a mic that cannot work without the reset out loud. */
.rc-icon[hidden]{display:none !important}
/* The level meter: bars fed by the live microphone. */
/* Nine bars, not five: each one is a narrower slice of the voice, so the row
   shows the shape of a sentence going by instead of one lump rising and
   falling (Marco, 2026-08-17 - "see more of the journey in the voice"). */
.rc-level{display:flex;align-items:center;gap:3px;height:24px;margin-right:4px}
.rc-level[hidden]{display:none !important}
.rc-level i{display:block;width:3px;height:24px;background:var(--rc-accent);
  transform:scaleY(.16);transform-origin:center;transition:transform 70ms linear}
/* Asked for stillness, they still get the state: the row appears, at a fixed
   height, and does not dance. Hiding it outright would take away the only signal
   that the mic is live. */
@media (prefers-reduced-motion: reduce){
  .rc-level i{transform:scaleY(.55) !important}
}
/* `hidden` loses to the flex display the bar sets on its children, so every
   control on this bar needs the reset out loud or a deployment missing that
   control's key still shows it. */
.rc-voicebar button[hidden]{display:none !important}

/* the wait, with a count. .rc-tick supplies the dots. */
.rc-wait{display:flex;align-items:center;gap:12px;border:var(--rc-edge) solid var(--rc-ink);
  background:var(--rc-bone);padding:12px 15px;width:fit-content;margin-bottom:18px}
.rc-wait .rc-tick{display:flex;gap:5px}
.rc-wait .rc-count{font-family:var(--rc-display);font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums}

.rc-rail{width:392px;flex:0 0 392px;background:var(--rc-bone);display:flex;
  flex-direction:column;min-height:0;border-left:var(--rc-edge) solid var(--rc-warm-grey)}
.rc-rail__head{padding:18px 20px 12px;border-bottom:var(--rc-edge) solid var(--rc-warm-grey)}
.rc-rail__title{font-family:var(--rc-display);font-weight:700;font-size:22px}
.rc-rail__body{flex:1;overflow-y:auto;padding:16px 20px 24px;max-height:64vh}

/* a piece, in the rail or (on mobile) in the thread. .rc-yours/.rc-ours carry the edge,
   the fill and the italic; this is padding and rhythm. */
.rc-piece{padding:13px 15px;margin-bottom:12px;animation:settle var(--rc-settle) both}
.rc-piece__top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;
  font-style:normal}
.rc-piece__name{font-family:var(--rc-display);font-weight:700;font-size:16px;line-height:1.2;
  margin-bottom:5px}
.rc-piece__desc{font-size:13.5px;line-height:1.5}
.rc-piece__fix{margin-top:9px;font-size:var(--rc-label-size);letter-spacing:var(--rc-label-track);
  text-transform:uppercase;font-weight:700;border-bottom:1.5px solid var(--rc-ink);
  font-style:normal}

/* CORRECTING A FACT, IN THE CARD. The box inherits the card's own body size, so the
   sentence looks the same while you are fixing it as it did when you decided to -
   an OS prompt showed it clipped, in a typeface the app does not own. The two
   controls stay in the card's existing label vocabulary (`fix this`, `change`)
   rather than importing the page's big accent buttons, which in a 392px rail would
   read as the loudest thing on the card. resize:vertical because a correction can
   be a paragraph and the rail is narrow. */
.rc-piece__edit textarea{display:block;width:100%;background:var(--rc-bone);
  border:2px solid var(--rc-ink);padding:9px 10px;font-size:13.5px;line-height:1.5;
  resize:vertical;outline:none;color:var(--rc-ink);font-style:normal}
.rc-piece__editrow{display:flex;align-items:center;gap:16px;margin-top:9px;
  font-style:normal}
.rc-piece__save{font-size:var(--rc-label-size);letter-spacing:var(--rc-label-track);
  text-transform:uppercase;font-weight:700;border-bottom:1.5px solid var(--rc-ink)}
.rc-piece__cancel{font-size:var(--rc-label-size);letter-spacing:var(--rc-label-track);
  text-transform:uppercase;font-weight:700;color:var(--rc-ink-soft);
  border-bottom:1.5px solid var(--rc-ink-soft)}

.rc-acc{margin-top:11px;border-top:var(--rc-edge-hair) dashed var(--rc-ink-soft);
  padding-top:10px;font-style:normal}
.rc-acc__q{font-size:11px;color:var(--rc-ink-soft);margin-bottom:8px}
.rc-dots{display:flex;align-items:center;gap:7px}
.rc-dots button{width:22px;height:22px;border:2px solid var(--rc-ink);border-radius:50%;
  background:var(--rc-bone);padding:0;flex:0 0 auto}
.rc-dots button:hover{background:var(--rc-ink)}
.rc-dots .rc-end{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rc-ink-soft)}
.rc-rated{margin-top:11px;border-top:var(--rc-edge-hair) dashed var(--rc-ink-soft);
  padding-top:10px;display:flex;align-items:center;gap:8px;font-style:normal;
  animation:landed var(--rc-land) both}
.rc-rated__tick{width:20px;height:20px;background:var(--rc-ink);color:var(--rc-bone);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  flex:0 0 auto}
.rc-rated__say{font-size:12px}
.rc-unrate{margin-left:auto;font-size:var(--rc-label-size);letter-spacing:.13em;
  text-transform:uppercase;color:var(--rc-ink-soft);
  border-bottom:1.5px solid var(--rc-ink-soft)}

/* The scale's ends. Inline beside the dots on desktop; below the row on mobile, where
   the dots grow into thumb targets and there is no room beside them. Declared BEFORE
   the media query - a later rule of equal specificity wins whatever the query says,
   and putting this after it left five unlabelled boxes on every phone. */
.rc-dots-ends{display:none}

/* ── the games shelf ─────────────────────────────────────────
   Almost nothing new: `.rc-card`, `.rc-card--set` (the stacked edge), `.rc-card__marker`
   / `__name` / `__shape` / `__foot`, `.rc-btn` and `.rc-btn--dismiss` were all already
   in the design system above - this surface is what they were drawn for. What is added
   here is the grid, the section rule, and the dashed "we picked this" chip. */
.rc-shelf{padding:26px 34px 40px}
.rc-shelf__h{font-size:40px;line-height:1;margin-bottom:6px}
.rc-shelf__sub{font-size:14px;color:var(--rc-ink-soft);margin-bottom:26px}
.rc-sec{display:flex;align-items:baseline;gap:12px;border-bottom:var(--rc-edge) solid
  var(--rc-ink);padding-bottom:7px;margin:0 0 26px}
.rc-sec__label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.rc-sec__sub{font-size:11px;color:var(--rc-ink-soft)}
.rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;margin-bottom:40px;
  padding-top:14px}
.rc-gcard{position:relative;min-width:0}
/* A TITLE AND A TEASER. The teaser is already cut to ~96 characters server-side; this
   is the belt on top of the braces, so a long unbroken word or a title of any length
   can never push a card wider than its column or spill past its edge. */
.rc-gcard__why{font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.rc-gcard__name{margin-bottom:9px;overflow-wrap:anywhere;hyphens:auto}
.rc-card{min-width:0;overflow:hidden}

/* the conditions, one tap in - native <details>, so it cannot clip and needs no JS */
.rc-detail{margin-top:10px}
.rc-detail summary{font-size:var(--rc-label-size);letter-spacing:var(--rc-label-track);
  text-transform:uppercase;font-weight:700;cursor:pointer;color:var(--rc-ink-soft);
  list-style:none}
.rc-detail summary::-webkit-details-marker{display:none}
.rc-detail summary::before{content:"+ ";font-weight:700}
.rc-detail[open] summary::before{content:"\2212 "}
.rc-detail p{font-size:13px;line-height:1.5;margin:9px 0 0;overflow-wrap:anywhere}
.rc-detail[open]{border-top:var(--rc-edge-hair) dashed var(--rc-ink-soft);padding-top:9px}

/* the reason a game cannot start yet - a sentence, not an error shoved between buttons */
.rc-blocked{font-size:12px;line-height:1.4;color:var(--rc-ink-soft);
  border:var(--rc-edge-hair) dashed var(--rc-ink-soft);padding:9px 11px}
.rc-blocked a{color:var(--rc-ink);font-weight:700}

/* the masthead's tabs - at the TOP, where a person looks for the way out */
.rc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-left:26px}
.rc-tabs a{padding:7px 13px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--rc-ink-soft);text-decoration:none}
.rc-tabs a.on{background:var(--rc-ink);color:var(--rc-bone)}
.rc-tabs a:hover{color:var(--rc-ink)}
.rc-tabs a.on:hover{color:var(--rc-bone)}
.rc-top .rc-date{margin-left:auto}

@media (max-width:640px){
  .rc-top{flex-wrap:wrap;gap:8px}
  .rc-tabs{margin-left:0;order:3;width:100%}
  .rc-tabs a{flex:1;text-align:center;padding:8px 6px}
}

.rc-back{display:inline-block;font-size:var(--rc-label-size);
  letter-spacing:var(--rc-label-track);text-transform:uppercase;font-weight:700;
  margin-bottom:12px;text-decoration:none;border-bottom:1.5px solid var(--rc-ink)}
/* the suggestion's chip: dashed box, hollow dot - the register device, not a colour */
.rc-pick{display:flex;align-items:center;gap:7px;align-self:flex-start;margin-bottom:11px;
  border:2px dashed var(--rc-ink);padding:3px 8px;font-size:9.5px;
  letter-spacing:var(--rc-label-track);text-transform:uppercase;font-weight:700}
.rc-pick i{width:7px;height:7px;border:2px dashed var(--rc-ink);border-radius:50%;
  display:block;flex:0 0 auto}
.rc-ours .rc-card__shape{border-top-style:dashed;border-top-color:var(--rc-ink-soft);
  color:var(--rc-ink-soft)}
.rc-foot-row{display:flex;gap:8px}
/* a.rc-btn is a link wearing a button - the global `a{text-decoration:underline}` was
   drawing a line through the middle of it */
.rc-foot-row .rc-btn{flex:1;text-align:center;font-size:16px;padding:11px 14px;
  text-decoration:none;display:flex;align-items:center;justify-content:center}
.rc-set{text-decoration:none}
/* "opens a set - N" replaces the button on a library card */
.rc-set{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:var(--rc-edge) solid var(--rc-ink);background:var(--rc-bone);padding:11px 13px}
.rc-set__n{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.rc-set__go{font-family:var(--rc-display);font-weight:700;font-size:17px}
.rc-plays{font-size:10px;letter-spacing:var(--rc-label-track);text-transform:uppercase;
  color:var(--rc-ink-soft);margin-top:8px}

@media (max-width:900px){
  /* "the same cards, one per row, fewer lines. never a text row with a chevron." */
  .rc-grid{grid-template-columns:1fr;gap:20px}
  .rc-shelf{padding:18px 16px 32px}
  .rc-shelf__h{font-size:30px}
  .rc-card{min-height:0}
}

/* ── today's game, dealt into the conversation ───────────────
   It carries .rc-yours: the game is built out of things YOU said, and the register
   device is the one thing that must never be decided twice. .rc-btn / .rc-btn--quiet /
   .rc-btn--dismiss and .rc-scale / .rc-num are the existing controls, unchanged. */
.rc-gamecard{padding:16px 18px 15px;margin:6px 0 20px;max-width:94%}
.rc-gamecard__name{font-family:var(--rc-display);font-weight:700;font-size:23px;
  line-height:1.08;margin:6px 0 8px}
.rc-gamecard__body{font-size:15px;line-height:1.5;margin-bottom:12px}

/* THE SOMEONE-NEW CARD'S TWO BOXES (2026-08-28). The name is an input rather than a
   heading because the ear gets names wrong and the card used to offer no way to say
   so; it is sized as .rc-gamecard__name so correcting a spelling does not feel like
   filling in a form. The role sits under it at body size, plainly secondary and
   plainly optional - it is the field that was left out of this card on purpose, and
   leaving it out is why 114 of 121 people in the ledger have no role at all. */
.personname{font-family:var(--rc-display);font-weight:700;font-size:23px;
  line-height:1.08;margin:6px 0 8px;padding:4px 9px;width:100%;max-width:22ch;
  letter-spacing:0;text-transform:none;white-space:normal}
.personrel{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  padding:7px 10px;width:100%;max-width:34ch;margin-bottom:12px;white-space:normal}
/* CONTRAST RULE: a placeholder is instruction, not decoration - it inherits the ink
   at reduced opacity rather than a grey of its own, so it holds up in both themes. */
.personrel::placeholder{color:var(--rc-ink);opacity:.68}
.personname:disabled,.personrel:disabled{opacity:.6}
.rc-gamecard__do{font-weight:700;font-size:15px;line-height:1.4;
  border-top:var(--rc-edge-hair) solid var(--rc-ink);padding-top:10px;margin-bottom:14px}
.rc-receipt{border-left:3px solid var(--rc-ink);padding:2px 0 2px 12px;margin-bottom:12px}
.rc-receipt__q{font-size:14px;line-height:1.45;font-style:italic}
.rc-gameacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.rc-gameacts .rc-btn--dismiss{margin-left:auto;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:9px 14px}

/* `r3` - the round open. The clock row is the design's point 3: the remaining time in
   the display face at 44px (64px desktop), line-height .9, beside a 13px/1.35 two-line
   label. The two clocks are two blocks and are never added together - the play timer is
   the span you agreed to, the deadline is when it must be finished by, and a one-hour
   task can carry a one-week deadline. */
.rc-roundopen{margin-bottom:16px}
.rc-roundopen__clockrow{display:flex;align-items:flex-end;gap:12px;margin:10px 0 12px}
.rc-roundopen__num{font-family:var(--rc-display);font-weight:700;font-size:44px;
  line-height:.9}
.rc-roundopen__lab{font-size:13px;line-height:1.35;max-width:11em}
.rc-roundopen__due{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;border-top:var(--rc-edge-hair) solid var(--rc-ink);padding-top:9px;
  margin-bottom:12px}
.rc-roundopen__dueval{font-size:14px;font-weight:700}
@media (min-width:768px){ .rc-roundopen__num{font-size:64px} }

/* `r4`-`r7` - THE LINE THAT BECOMES THE CARD. When a state has one thing to say, it
   is said in the display face at the top and the card stops there: due-soon promotes
   the deadline out of the foot row, times-up states the span that ran out. Same size
   as .rc-gamecard__name, because it is playing the same part. */
.rc-roundopen__head{font-family:var(--rc-display);font-weight:700;font-size:23px;
  line-height:1.08;margin:2px 0 10px}
/* These cards have SENTENCES to say, and .rc-meta is an 11px all-caps label face -
   a paragraph set in it is unreadable. Body copy gets a body face. */
.rc-roundopen__sub{font-size:15px;line-height:1.5;margin-bottom:12px}
/* `r5` - ONE ACCENT STRIPE AND NO WORD FOR IT. The stripe is the entire signal that
   a deadline has passed: no fill, no icon, no red type. A card that also scolds in
   words would be saying it twice, and the second time is the one that stings. */
.rc-roundopen--stripe{border-left:5px solid var(--rc-accent);padding-left:14px}
@media (min-width:768px){ .rc-roundopen--stripe{border-left-width:6px} }
/* `r6`/`r7` draw the round inside their OWN dashed box, and a box has an inside.
   With no padding the cap row - "5 of 5 min · half of 10" - sat 2.5px from the right
   edge, touching the border it was within. Measured in a browser at 1400px, not
   guessed from the markup. */
.rc-roundopen.rc-ours{padding:14px 16px}
/* `r6` - WRAP IS THE DEFAULT AND READS AS THE DEFAULT: solid, and alone on its row.
   Scoped to the times-up card (.rc-ours) on purpose - in `r5` the three answers are
   deliberately equal, and ranking one of them there would undo the copy. */
.rc-roundopen.rc-ours .rc-gameacts .rc-btn{flex:1 1 100%}

.rc-close{border-top:var(--rc-edge-hair) dashed var(--rc-ink-soft);
  padding-top:14px;margin-top:4px}
.rc-close__q{font-family:var(--rc-display);font-weight:700;font-size:22px;line-height:1.18;
  margin-bottom:12px}
.rc-close textarea{width:100%;background:var(--rc-bone);border:2px solid var(--rc-ink);
  padding:11px 12px;font-size:15px;line-height:1.5;resize:vertical;outline:none;
  color:var(--rc-ink);margin-bottom:12px}
.rc-close .rc-mine{margin-bottom:16px}

@media (max-width:640px){
  .rc-gamecard{max-width:100%}
  .rc-gameacts .rc-btn--dismiss{margin-left:0}
}

/* ── the north star, written down ────────────────────────────
   A card the thread DEALS, in the family the game card already belongs to - not a
   system notice, because this product has no such family and one should not be
   invented for it. --rc-tint is the *yours* fill, and a North Star is the person's
   own words. 3px rather than the card's 2.5px: it is the one card in the thread
   that is about the whole conversation rather than one beat of it.

   NO close button, no X, no dismiss, no "later", no progress bar, no percentage,
   no toast, no modal backdrop, and no word resembling "done". Nothing here has to
   be dealt with before typing can continue - that is the entire design. */
.rc-nscard{background:var(--rc-tint);border:var(--rc-edge-frame) solid var(--rc-ink);
  padding:20px 22px 18px;margin:6px 0 20px;max-width:600px;
  animation:deal var(--rc-deal) both;transform-origin:12% 92%}
.rc-nscard__chip{align-self:flex-start;display:inline-block;background:var(--rc-ink);
  color:var(--rc-bone);font-size:var(--rc-label-size);letter-spacing:var(--rc-label-track);
  text-transform:uppercase;font-weight:700;padding:4px 8px;margin-bottom:11px}
.rc-nscard__head{font-family:var(--rc-display);font-weight:700;font-size:28px;
  line-height:1.1;margin-bottom:9px}
.rc-nscard__body{font-size:15px;line-height:1.55;margin-bottom:15px}
.rc-nscard__acts{margin-bottom:14px}
/* an ink fill, not .rc-btn: the accent budget on this card is zero, and a red
   button beside "nothing here is waiting on you" says the opposite of the words. */
.rc-nscard__act{background:var(--rc-ink);color:var(--rc-bone);text-decoration:none;
  font-family:var(--rc-display);font-weight:700;font-size:17px;padding:12px 26px;
  display:inline-block}
.rc-nscard__foot{border-top:var(--rc-edge-hair) solid var(--rc-ink);padding-top:12px;
  font-size:13.5px;line-height:1.5}
@media (max-width:640px){
  .rc-nscard{max-width:100%;padding:16px 17px 15px}
  .rc-nscard__head{font-size:22px}
  .rc-nscard__act{display:block;text-align:center;min-height:48px;padding:14px 20px}
}

/* an empty block says WHY it is empty, in words. It never shimmers. */
.rc-blank{padding:16px;margin-bottom:14px}
.rc-blank__what{margin-bottom:6px;color:var(--rc-ink-soft)}
.rc-blank__why{font-size:14px;line-height:1.5;color:var(--rc-ink)}

@media (max-width:900px){
  /* No rail. The client reads this and puts pieces in the thread instead. */
  .rc-rail{display:none}
  .rc-turns{padding:18px 16px 8px;max-height:none}
  .rc-compose{padding:12px 16px 16px}
  .rc-said,.rc-mine>div{max-width:94%}
  /* a thumb, not a cursor: the dot row becomes five full-width targets */
  .rc-piece{margin-bottom:16px}
  .rc-dots{gap:6px}
  /* The target grows to a thumb; the DOT does not. Without the inner circle the row
     reads as five empty boxes rather than a scale. */
  .rc-dots button{flex:1;width:auto;height:46px;border-radius:0;
    display:flex;align-items:center;justify-content:center}
  .rc-dots button::before{content:"";width:14px;height:14px;border:2px solid var(--rc-ink);
    border-radius:50%}
  .rc-dots button:hover{background:var(--rc-bone)}
  .rc-dots button:hover::before{background:var(--rc-ink)}
  .rc-dots .rc-end{display:none}
  .rc-dots-ends{display:flex;justify-content:space-between;margin-top:6px;font-size:9.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--rc-ink-soft)}
}

/* Cited receipts under a companion post - proof, collapsed by default. */
.rc-cite{margin:2px 0 12px; max-width:640px}
.rc-cite summary{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rc-muted,#6f6a60); cursor:pointer}
.rc-cite .rc-receipt{margin-top:8px}

/* The improvement deck's verb rows. */
.rc-improve__row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.rc-improve__date,.rc-improve__why{font:inherit;font-size:13px;padding:6px 8px;
  border:1px solid var(--rc-ink,#1d1d1b);background:transparent}

/* ── the mobile bottom bar ───────────────────────────────────
   Straight from the spec's phone frames (recess-beta-states.html): three equal tabs,
   56px, 3px ink rule on top, active tab filled with the accent. It was in the spec
   from the start and never carried over. Desktop keeps the masthead tabs; below the
   rail breakpoint those hide and this replaces them - one navigation, two homes. */
.rc-bnav{display:none}
@media (max-width:900px){
  .rc-top .rc-tabs{display:none}
  .rc-bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    border-top:3px solid var(--rc-ink);background:var(--rc-bone);
    padding-bottom:env(safe-area-inset-bottom)}
  .rc-bnav a{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;
    padding:11px 4px 14px;text-align:center;font-size:10px;letter-spacing:.11em;
    text-transform:uppercase;font-weight:700;color:var(--rc-ink-soft);text-decoration:none}
  .rc-bnav a.on{background:var(--rc-accent);color:var(--rc-accent-on)}
  /* everything scrolls clear of the fixed bar - including the composer */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ── the companion out loud ──────────────────────────────────
   TTS controls. The bar lives above the composer and only appears when the
   deployment has a voice; each companion line grows a quiet "listen". Speed is
   playbackRate - client-owned, pitch-preserving, applies mid-sentence. */
.rc-voicebar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.rc-voicebar button{border:2px solid var(--rc-ink);padding:4px 10px;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--rc-bone);color:var(--rc-ink)}
.rc-voicebar button.on{background:var(--rc-accent);color:var(--rc-accent-on);
  border-color:var(--rc-accent)}

/* LIVE MODE (docs/superpowers/specs/2026-10-06-live-voice-design.md). The toggle is
   one more voice-bar button; the green badge is shown whenever the mic is open, so
   an open microphone is never invisible. No green token exists, so the badge
   carries its own (white on #1f7a45 is 5.4:1). In the thread: the line being said
   is full strength, the next one greyed while it is still being written, the quick
   reaction small and muted, and a voice turn carries a small "heard by voice". */
.rc-voicebar button.rc-live[aria-pressed=true]{background:var(--rc-ok,#1f7a45);
  color:#fff;border-color:var(--rc-ok,#1f7a45)}
.rc-livebadge{background:var(--rc-ok,#1f7a45);color:#fff;border-radius:999px;
  padding:0 .5em;font-size:.75em;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.rc-livebadge[hidden]{display:none}
.rc-saying{opacity:1}
.rc-next{opacity:.45;font-style:italic}
.rc-react{opacity:.6;font-style:italic;font-size:.9em}
.rc-heard{font-size:.75em;opacity:.6;margin-top:4px}
.rc-heard a{color:inherit}
.rc-cutoff{opacity:.6;font-style:italic}

/* CHAT MODE picker. Sits with the voice controls because it is the same kind of
   thing - a dial on how the companion behaves, owned by the player, per device.
   ALWAYS VISIBLE, unlike the voice bar: the whole point is that you can see which
   mode is live without reading back through the conversation to remember. */
.rc-modebar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.rc-modebar label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--rc-ink-soft)}
.rc-modebar select{border:2px solid var(--rc-ink);padding:4px 10px;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  font-family:inherit;background:var(--rc-bone);color:var(--rc-ink)}
.rc-modebar select.on{background:var(--rc-accent);color:var(--rc-accent-on);
  border-color:var(--rc-accent)}
.rc-say{display:block;margin-top:6px;border:0;padding:0;background:none;
  font-family:var(--rc-body,inherit);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--rc-ink-soft);cursor:pointer}
.rc-say:hover{color:var(--rc-ink)}

/* ── saying what an event feeds ──────────────────────────────
   The picker is hidden until "something else?" / "say what it feeds" is tapped.
   A list of lanes AND a free-text box, because the list is only what this person
   has already used - the first time they name a new part of their life, it
   cannot be in it. Pills never wall the composer. */
.rc-picker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;
  padding-top:10px;border-top:1.5px dashed var(--rc-warm-grey)}
.rc-picker[hidden]{display:none}
.rc-picker select,.rc-picker input{font:inherit;font-size:13px;padding:5px 7px;
  border:2px solid var(--rc-ink);background:var(--rc-bone);color:var(--rc-ink)}
.rc-picker input{min-width:9rem}
@media (max-width:640px){
  .rc-picker select,.rc-picker input{flex:1 1 100%}
}

/* ── on a phone, the week is a GLANCE ────────────────────────
   Four controls under every block turned the playbook into a form (Marco,
   2026-08-14: "it just looks messy on mobile ... should only show up if you click
   into the actual card"). So below 640px the row keeps its one badge and its
   title-link, and every way to ANSWER lives on the card the title opens - where
   there is room to show the guess, its reason, and all four answers at once.
   #feeds is the card's own section and is never hidden. */
@media (max-width:640px){
  .rc-row .rc-picker,
  .rc-row .confirm, .rc-row .elsebtn, .rc-row .letbe,
  .rc-blk > .rc-picker, .rc-blk > .elsebtn, .rc-blk > .letbe{display:none}
  #feeds .rc-picker, #feeds button{display:inline-flex}
  #feeds .rc-picker{display:flex}
}

/* ── the board receipt ────────────────────────────────────────
   What actually happened, under the reply that claimed it. The model says "putting
   that on your board" before anything is written; this line is the only one on
   screen that knows whether the row landed. A MISS is drawn as loudly as a hit -
   drawn quietly, "couldn't find that one" reads as decoration and the player walks
   away believing the card exists. */
.rc-didit{text-transform:none;letter-spacing:0;font-size:12px;
  border-left:3px solid var(--rc-ink);padding-left:9px}
.rc-didit--miss{border-left-color:var(--rc-accent);color:var(--rc-ink)}

/* THE PEOPLE PAGE (2026-08-28). One panel per person, every field a box he can type
   in. Stacked rather than tabular on purpose: 121 rows of three inputs is a phone
   screen long before it is a spreadsheet, and a table that scrolls sideways is where
   the role column goes to be ignored. */
/* A GRID, NOT A STACK. Four full-width boxes per person is 330px a row, and 128
   rows of that is a 37,000px page - measured, not guessed. Two columns halves it,
   and the name keeps its own line because it is the thing being identified. */
.prow{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;align-items:center;
  margin:0 22px 10px;padding:12px 14px}
.prow .pname{grid-column:1 / -1}
.prow .rc-sub{grid-column:1 / -1}
/* save and merge share ONE line - two full-width buttons is two more rows per
   person, and this page is 128 people long. */
.prow .psave,.prow .pmerge{justify-self:start;margin:2px 0 0}
/* Lighter and italic, not a badge: 81 badges on one page is a wall of noise, and
   the point is a quiet "this one is mine" he can read at a glance. */
.prow .pguess{font-style:italic;opacity:.72}
.prow .pguess:focus{font-style:normal;opacity:1}
.prow[hidden],.psec[hidden]{display:none}
.pfilter{width:calc(100% - 44px);box-sizing:border-box;margin:0 22px 14px;
  letter-spacing:0;text-transform:none;font-weight:400;font-size:14px;padding:9px 11px}
.prow .rc-ctl{width:100%;box-sizing:border-box;letter-spacing:0;text-transform:none;
  font-weight:400;font-size:14px;padding:7px 9px;white-space:normal}
.prow .pname{font-family:var(--rc-display);font-weight:700;font-size:19px}
/* CONTRAST RULE: a placeholder is instruction. Ink at reduced opacity, never a grey
   of its own - these boxes sit on --rc-tint, where --rc-ink-soft fails. */
.prow .rc-ctl::placeholder{color:var(--rc-ink);opacity:.68}
.prow .rc-sub{margin:0;font-size:12px;color:var(--rc-ink)}
.prow .pmsg{margin:2px 0 0}

/* ─────────────────────────────────────────────────────────────
   SETTINGS + THE SIGNED-OUT DOOR                  (2026-08-17)

   The last unstyled corner of Beta. Every rule here is from the
   settings design handoff; nothing new was invented.

   TWO COLUMNS, AND NEITHER IS .rc-frame. The board is a grid and
   wants 1180px. A form is not a grid: at 1180px an email field is
   a metre wide, which is what these caps fix (Marco, 2026-08-17).
     .rc-col   476px - settings.
     .rc-door  420px - the signed-out screens, which is the phone
               layout centred rather than a second design. A door
               has no nav to anchor against, so left-aligning it
               leaves a dead half-screen; centred reads as a door.

   .rc-col WAS 620px AND THAT WAS TOO WIDE (Marco, 2026-08-18: "all these
   fields and buttons are still unnecessarily long, they just create tons
   of white space"). The handoff's 620 was inherited from a page whose
   panels were side by side; stacked, it left a name box 581px long.
   Narrowing the COLUMN rather than capping the FIELDS was his call between
   the two, and it is the one that leaves no dead space *inside* a panel -
   a 384px box floating in a 620px tinted panel just moves the emptiness
   somewhere it reads as a mistake. 476 keeps the longest real value (a
   40-character email) on one line with room to spare.
   ───────────────────────────────────────────────────────────── */
.rc-door,.rc-col{margin:0 auto;padding:22px 18px 44px;box-sizing:border-box;
  background:var(--rc-bone);min-height:100vh}
.rc-door{max-width:456px}          /* 420 + the 18px gutters */
.rc-col {max-width:512px}          /* 476 + the 18px gutters */
/* The font-family has to be restated here and it is not redundant. tokens.css sets
   it on `body`, but server.py's PAGE template ships an inline <style> AFTER this
   file whose `body{font:16px/1.5 system-ui}` shorthand resets the family - so the
   headings came out Rockwell and every sentence under them came out system-ui.
   Fixed on the column rather than by touching that rule, which the unwired pages
   still rely on. */
.rc-door,.rc-col{font-family:var(--rc-ui)}

/* The panel. NOT .rc-card - that one is the game card and carries a
   168px min-height that leaves a one-line form floating in space. */
.rc-panel{background:var(--rc-tint);border:var(--rc-edge) solid var(--rc-ink);
  padding:16px 17px 15px;margin:0 0 14px}
.rc-panel--bone{background:var(--rc-bone)}   /* inert: nothing to fill yet, or broken */


.rc-panel h1,.rc-door h1,.rc-col h1{font-family:var(--rc-display);font-weight:700;
  font-size:26px;line-height:1.1;margin:0 0 12px}
.rc-panel h2{font-family:var(--rc-display);font-weight:700;font-size:19px;
  line-height:1.15;margin:0 0 8px}
.rc-door p,.rc-col p,.rc-panel p{font-size:15px;line-height:1.5;margin:0 0 12px}

/* Label over field. The label is the 10px uppercase rc-label; the field
   fills its panel. Inputs get the tint fill + ink border of the design. */
.rc-field{display:block;margin:0 0 12px}
.rc-field > span{display:block;font-size:var(--rc-label-size);
  letter-spacing:var(--rc-label-track);text-transform:uppercase;font-weight:700;
  color:var(--rc-ink);margin:0 0 5px}
.rc-field input,.rc-field select,.rc-field textarea{display:block;width:100%;
  box-sizing:border-box;background:var(--rc-tint);
  border:var(--rc-edge) solid var(--rc-ink);padding:12px 11px;min-height:48px;
  font:15px/1.4 var(--rc-ui);color:var(--rc-ink)}
.rc-panel .rc-field input,.rc-panel .rc-field select,
.rc-panel .rc-field textarea{background:var(--rc-bone)}
/* A pasted API key is 60 characters of gibberish. It wraps or it scrolls
   out of sight, and out of sight is how you paste half a key. */
.rc-field textarea.rc-key{font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;min-height:0}
.rc-field--bad input,.rc-field--bad textarea{border-color:var(--rc-accent)}

/* The message belongs under the field it is about, never as a page banner:
   the fix is in the field, so the sentence lives there. */
.rc-note{display:flex;gap:7px;align-items:flex-start;font-size:14px;line-height:1.45;
  margin:7px 0 0;color:var(--rc-ink)}
.rc-note::before{content:"!";flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  border:2px solid var(--rc-accent);border-radius:99px;color:var(--rc-accent);
  font:700 11px/15px var(--rc-ui);text-align:center}

/* The bottom margin is not decoration. Account stacks form / panel / form, and
   with no gap under it the Save button sat flush against the Password panel and
   read as that panel's button - which is the one misreading on this page that
   could actually cost somebody something. Inside a panel the gap goes away
   again, because there the fine print underneath is EXPLAINING the button and
   has to stay attached to it. */
/* `flex-wrap` is not decoration, it is the safety net under the line below. While
   children were `flex:1 1 0` they shrank to fit any row; sized to their words they
   cannot, so a pair of long labels on a narrow phone would run off the screen edge
   instead. Measured 2026-08-18 at 390px: every row fits today, the tightest by 36px
   ("yes, delete my account" / "erase everything now instead"), which is one longer
   verb away from not fitting. Wrapping costs nothing on the rows that already fit. */
.rc-actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 22px}
.rc-panel .rc-actions{margin-bottom:0}
/* A BUTTON IS AS WIDE AS ITS WORDS. `flex:1 1 0` made every child split the row,
   which on a one-button row is a full-width button: "Sign out" measured 620px on
   2026-08-18. Two buttons still sit side by side, each its own size, because the
   row is still a flex row - they just stop stretching to fill it.

   `.rc-actions--stack` (flex-direction:column + flex:none) used to live here and
   was deleted with this change. Nothing in the repo ever set it, and now that
   `flex:0 0 auto` IS the default its second line said nothing - a modifier that
   restates the default reads as load-bearing to whoever finds it next. */
.rc-actions > *{flex:0 0 auto}

/* WHERE FULL WIDTH IS OPTED INTO, AND IT IS ONLY THE DOOR. Sign-in, reset and
   name are single-decision screens - the one button IS the screen, on a 420px
   column with nothing to share the row with - so a full-row target is right
   there and wrong everywhere else. `display:block` is stated because the shared
   reset is inline-block, and inline-block siblings render a whitespace gap
   between them that reads as a layout bug.

   THE SETTINGS COLUMN USED TO BE IN THIS SELECTOR and that was the second half
   of the bug. #86 changed the `.rc-btn` default to `width:auto` and measured,
   but a measurement that asks "is the default doing it?" cannot see a rule that
   is ALSO doing it: `.rc-col .rc-btn` (0,2,0) beat the default and set every
   settings button back to 100%. Two independent rules have to be removed to
   change one behaviour, which is exactly the shape of thing a single before/
   after measurement hides. `.rc-col` is dropped from here; it loses nothing,
   because every button on a settings page carries `.rc-btn`, which supplies the
   box-sizing, cursor and 48px floor on its own (checked 2026-08-18: zero bare
   `<button>` elements in the settings page functions). */
.rc-door button,.rc-door .rc-btn{display:block;width:100%;
  box-sizing:border-box;cursor:pointer;min-height:48px}
.rc-door .rc-actions > *{flex:1 1 0}

/* A quiet link is a 44px hit target with a rule under the words, never a
   button - a button here would compete with the thing the screen is for. */
/* The underline hugs the words; the HIT AREA is a 44px pseudo-element centred on
   them. Padding cannot do both jobs - padded out to 44px the rule ends up 16px
   below the text and stops reading as that link's underline, and left at a
   comfortable 6px the target measures 41px, which is under the floor for every
   quiet link in the settings section. */
.rc-quietlink{position:relative;display:inline-block;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--rc-ink);
  text-decoration:none;border-bottom:1.5px solid var(--rc-ink);
  padding:6px 0;line-height:1}
.rc-quietlink::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
.rc-feet{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:2px solid var(--rc-warm-grey);margin:16px 0 18px;padding:9px 0 0}

/* Back out of a settings screen. 44px, chevron, uppercase label. */
.rc-sback{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--rc-ink);text-decoration:none;min-height:44px;padding:0 2px}
.rc-shead{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.rc-shead h1{margin:0;font-size:22px}

/* Status chips. The attention chip is the ONLY accent on S0 and it is an
   outline, never a fill - a red fill reads as an error the person caused. */
.rc-schip{display:inline-block;font-size:var(--rc-label-size);
  letter-spacing:var(--rc-label-track);text-transform:uppercase;font-weight:700;
  padding:4px 8px;margin:0 6px 0 0}
.rc-schip--ink{background:var(--rc-ink);color:var(--rc-bone)}
/* A healthy connector's marker. Outlined in warm grey, not filled in ink: on a
   screen where one card is broken, a solid black CONNECTED badge on the working
   card out-shouts the accent mark on the one that needs a tap. The quiet state
   should be the quiet one. */
.rc-schip--quiet{border:2px solid var(--rc-warm-grey);color:var(--rc-ink)}
.rc-schip--attn{border:2px solid var(--rc-accent);color:var(--rc-ink)}

/* A settings-home row: whole card is the link. */
.rc-srow{display:flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--rc-ink);min-height:66px}
.rc-srow__body{flex:1 1 auto}
.rc-srow__chev{flex:0 0 auto;font-size:20px;line-height:1}

/* Numbered steps for a paste-a-key screen. Three, no more. */
.rc-steps{list-style:none;counter-reset:s;margin:0 0 14px;padding:0}
.rc-steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;
  font-size:15px;line-height:1.5;margin:0 0 9px}
.rc-steps li::before{content:counter(s);flex:0 0 auto;width:24px;height:24px;
  background:var(--rc-ink);color:var(--rc-bone);
  font:700 13px/24px var(--rc-display);text-align:center}

/* A choice list where the whole row is the target (surprise cards). */
.rc-set-row{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:2px solid var(--rc-ink);background:var(--rc-bone);
  padding:11px 12px;margin:0 0 8px;min-height:56px;box-sizing:border-box}
.rc-set-row--on{background:var(--rc-tint)}
.rc-set-row input{position:absolute;opacity:0;pointer-events:none}
.rc-set-row__box{flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  border:2px solid var(--rc-ink);background:none}
.rc-set-row--on .rc-set-row__box{background:var(--rc-ink)}

/* Deleting is the one place a screen is allowed two destructive buttons.
   They must not look alike: the waiting one is ink, the no-undo one is a
   quiet outline, so the louder button is the safer button. */
.rc-danger{border-top:2px solid var(--rc-warm-grey);margin:22px 0 0;padding:14px 0 0}
.rc-fineprint{font-size:13px;line-height:1.45;color:var(--rc-ink-soft);margin:6px 0 0}
.rc-panel .rc-fineprint{color:var(--rc-ink)}   /* ink-soft fails contrast on tint */

/* The SHARED look of every button: half of them are <button> (a form) and half are
   <a> (a link), and both have to look identical or the screen tells you which one
   submits, which is not information anybody wants. That is all this rule is for.

   IT IS NOT FULL WIDTH, and it used to be (Marco, 2026-08-18: "this wide full width
   button thing, we gotta kill this anywhere that this shows up on the site, it just
   makes no sense"). The `display:block;width:100%` here was written for the door and
   the account column - the comment even said so - but the selector names no column,
   so a rule meant for two screens applied to all of them. Every symptom traced back
   here: `confirm` / `something else?` stacked into two bars on the proposing card,
   `deal me a game` filled the chat dock, and the board's add button had to carry its
   own `width:auto` patch to escape.

   The tell it was the wrong default: `.rc-mini` exists to make a small inline button
   and sets only font-size and padding, so it lost to this rule silently. If a helper
   whose entire job is "make this smaller" cannot win, the default is doing too much.

   Full width is now OPTED INTO by the one layout that wants it: `.rc-door`, ~70
   lines above, where a single decision fills a 420px screen.

   CHANGING THIS DEFAULT WAS NOT ENOUGH ON ITS OWN, which is the part #86 got
   wrong and 2026-08-18 corrected. Two rules above ALSO forced full width -
   `.rc-actions > *{flex:1 1 0}` and `.rc-col .rc-btn{width:100%}` - so the
   settings pages kept their metre-wide buttons while this line read as fixed.
   The measurement that missed it asked whether the DEFAULT still stretched
   things, not whether ANYTHING did. When a symptom survives a fix that the code
   says should have worked, count the rules that can cause it before re-reading
   the one you changed. */
.rc-doormark{font-family:var(--rc-display);font-weight:700;font-size:23px;margin:6px 0 20px}
button.rc-btn,a.rc-btn,button.rc-btn--quiet,a.rc-btn--quiet,
button.rc-btn--dark,a.rc-btn--dark,button.rc-btn--danger,a.rc-btn--danger,
button.rc-btn--bump,button.rc-btn--blocked{
  display:inline-block;width:auto;box-sizing:border-box;border:0;cursor:pointer;
  text-decoration:none;text-align:center;font:700 16px/1.2 var(--rc-display);
  padding:13px 14px;min-height:48px}
/* These three restate `border` because the reset above them zeroes it, is later
   in the file AND is more specific (element+class beats class). A modifier that
   only exists as `.rc-btn--danger` further up silently loses - which is exactly
   what happened: the no-undo button shipped with no accent outline at all and
   looked identical to a plain one. */
button.rc-btn--quiet,a.rc-btn--quiet{background:none;color:var(--rc-ink);
  border:2px solid var(--rc-ink)}
button.rc-btn--dark,a.rc-btn--dark{background:var(--rc-ink);color:var(--rc-bone);border:0}
button.rc-btn--danger,a.rc-btn--danger{background:none;color:var(--rc-ink);
  border:2px solid var(--rc-accent)}
.rc-btn--dark{background:var(--rc-ink);color:var(--rc-bone)}
/* The accent as a WARNING MARK, not a call to action: an outline says "read this
   one" where a fill would say "press this one". The two deletion screens are the
   only place it is used this way. */
.rc-btn--danger{background:none;color:var(--rc-ink);border:2px solid var(--rc-accent)}

/* `r6` - THE SMALLER MOVE, AND IT LOOKS LIKE ONE. Dashed and narrow beside a solid
   full-width wrap: taking more time is allowed, offered, and visibly not the default.
   Dashed because it is Recess offering, matching the register device. */
button.rc-btn--bump{background:none;color:var(--rc-ink);
  border:var(--rc-edge) dashed var(--rc-ink);font-size:15px;padding:11px 14px;
  min-height:44px}
/* `r11` - THE YES WITH NOWHERE TO GO. Three rounds are already open, so the card is
   shown and only the accept goes quiet. Declining is NOT disabled - saying no is
   never the thing taken away - and the reason is printed beside it, because a dead
   button with no sentence next to it reads as a product that broke.

   Told apart by SHAPE, not by colour: a hairline dashed edge and no fill against the
   solid filled yes. Greying the type out would have been colour alone - and illegal
   besides, since --rc-ink-soft is 3.1:1 on the --rc-tint this card is filled with. */
button.rc-btn--blocked{background:none;color:var(--rc-ink);
  border:var(--rc-edge-hair) dashed var(--rc-ink);cursor:not-allowed}

/* A line Recess is saying back to you, and it is THE REGISTER DEVICE, not a new
   pattern: dashed edge, no fill, italic = ours. The first version was a solid
   edge over a tint fill, which is the app's notation for YOUR input - so on the
   sign-in screen "that email and password don't match" sat directly above two
   fields wearing the identical costume and read as a third one. */
.rc-msg{background:none;border:var(--rc-edge) dashed var(--rc-ink);font-style:italic;
  padding:10px 12px;font-size:14px;line-height:1.45;margin:0 0 14px;color:var(--rc-ink)}

.rc-srow__t{display:block;font-family:var(--rc-display);font-weight:700;font-size:19px;
  line-height:1.15}
/* Hierarchy by size and weight, never by colour: this sits on a tint panel and
   --rc-ink-soft is 3.1:1 there. See the contrast rule at the top of this file. */
.rc-srow__d{display:block;font-size:13px;line-height:1.4;color:var(--rc-ink);margin:3px 0 0}
.rc-srow__chev{opacity:.55}
.rc-srow__state{display:inline-block;font-size:var(--rc-label-size);
  letter-spacing:var(--rc-label-track);text-transform:uppercase;font-weight:700;
  color:var(--rc-ink);margin:7px 0 0}

.rc-conn{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* NOT .rc-meta and NOT .rc-count. Both already exist above and both were nearly
   reused here: `.rc-meta` is the playbook's 11px uppercase tracked label (twice
   over) and `.rc-count` is scoped to `.rc-wait`. Redefining either from down
   here does two bad things at once - the settings card inherits an uppercase
   transform it never asked for, which is exactly how "last synced 4 days ago"
   came out shouting, and every OTHER surface silently gets the settings
   font-size. A name that already means something is not a free name. */
.rc-sync{font-size:13px;line-height:1.45;color:var(--rc-ink);margin:0 0 4px}
.rc-tally{font-family:var(--rc-display);font-weight:700;font-size:17px;margin:0 0 12px}
.rc-quiet-row{display:flex;justify-content:flex-end;margin:10px 0 0}

.rc-radio{display:block;margin:0 0 8px}
.rc-radio input{position:absolute;opacity:0;pointer-events:none}
.rc-radio__box{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:2px solid var(--rc-ink);background:var(--rc-bone);padding:11px 12px;
  min-height:56px;box-sizing:border-box}
.rc-radio input:checked + .rc-radio__box{background:var(--rc-tint)}
.rc-radio__dot{flex:0 0 auto;width:16px;height:16px;margin-top:3px;border-radius:99px;
  border:2px solid var(--rc-ink)}
.rc-radio input:checked + .rc-radio__box .rc-radio__dot{background:var(--rc-ink);
  box-shadow:inset 0 0 0 2px var(--rc-bone)}
/* Keyboard users get the same ring the mouse never needed. */
.rc-radio input:focus-visible + .rc-radio__box{outline:3px solid var(--rc-accent);
  outline-offset:2px}
.rc-radio__t{font-weight:700;font-size:15px}
.rc-radio__d{font-size:14px;line-height:1.4;display:block}

/* What happens when you tap. A list, because it is four separate consequences on
   three different clocks and a paragraph makes them one blur. */
.rc-what{list-style:none;margin:0 0 10px;padding:0}
.rc-what li{position:relative;padding:0 0 0 18px;font-size:15px;line-height:1.5;
  margin:0 0 8px}
.rc-what li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  background:var(--rc-ink)}
/* The irreversible option gets its own bordered block rather than sitting in the
   same column as the reversible one. Two destructive buttons stacked in one flow
   read as first-choice and second-choice; separated, the second one reads as the
   deliberate step it is. */
.rc-danger-panel{border-color:var(--rc-accent);margin-top:24px}

/* The settings link in the masthead. Styled off .rc-date because it sits beside it,
   but it is a CONTROL rather than a label, so it carries an underline and a real
   44px hit area. The ::after overlay is how every other small link in this file
   reaches 44px without the visible text growing (see .rc-quietlink). */
.rc-gear{position:relative;display:inline-block;margin-left:14px;
  font-family:var(--rc-ui);font-size:var(--rc-label-size);letter-spacing:var(--rc-label-track);
  text-transform:uppercase;font-weight:700;color:var(--rc-ink);text-decoration:none;
  border-bottom:1.5px solid var(--rc-ink);padding:4px 0;line-height:1;white-space:nowrap}
.rc-gear::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;
  transform:translateY(-50%)}
.rc-gear:hover{color:var(--rc-accent);border-bottom-color:var(--rc-accent)}
@media (max-width:640px){
  /* .rc-top wraps here and .rc-date already holds margin-left:auto, so without this
     the wordmark, the date and this link fight over one row on a 375px screen. */
  .rc-gear{margin-left:12px}
}

/* The first-run consent line. NOT .rc-check, which is already taken: that one is
   the board's 10px uppercase tracked BUTTON label ("done", "put it back"), and
   reusing it here would render a sentence containing two links as tiny shouting
   caps. Same trap as .rc-meta/.rc-count in the settings pass - a shared token file
   means an existing name is a landmine, so the check is grep before you reuse, not
   only grep before you define.

   align-items:flex-start because this label wraps to three lines on a phone and a
   centred checkbox would float beside the middle of the paragraph. 20px box: below
   that it stops reading as a control at arm's length. */
.rc-consent{display:flex;align-items:flex-start;gap:10px;margin:16px 0 4px;
  font-family:var(--rc-ui);font-size:14px;line-height:1.45;color:var(--rc-ink);
  cursor:pointer}
.rc-consent input[type=checkbox]{flex:none;width:20px;height:20px;margin:1px 0 0;
  accent-color:var(--rc-ink);cursor:pointer}
.rc-consent a{color:var(--rc-ink);text-decoration:underline}
.rc-consent a:hover{color:var(--rc-accent)}

/* The just-minted block (server.invites_page). ITS OWN CLASS, deliberately: the
   first cut reused `.rc-box`, which is the 17x17px square of a tick-box control
   about four hundred lines up, and the whole block overflowed a seventeen pixel
   container onto the form beneath it. Named for what it is, styled from scratch. */
.rc-mint {
  border: 2px solid var(--rc-ink); background: var(--rc-bone);
  padding: 1rem 1.1rem; margin: 1.25rem 0; border-radius: 4px;
}
.rc-mint h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.rc-mint p { margin: .4rem 0 0; }

/* ONE ROW PER CODE, each copyable on its own. The first cut was a single <pre>
   with `user-select:all`, so one tap took all twenty at once - the wrong unit
   entirely, since codes are handed out one at a time to one person each. */
.rc-codelist { list-style: none; margin: .6rem 0 0; padding: 0; }
.rc-codeitem { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0; }
.rc-codeitem + .rc-codeitem { border-top: 1px solid var(--rc-hair, rgba(127,127,127,.22)); }
/* `user-select: all` so a tap takes the whole code even where the buttons cannot
   reach the clipboard - an insecure context, or an old browser. This block gets one
   chance to work, because the code cannot be shown again. */
.rc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; letter-spacing: .06em; user-select: all; -webkit-user-select: all;
  flex: 1 1 auto; }
.rc-codeacts { display: flex; gap: .4rem; flex: none; }
.rc-copy { font: inherit; font-size: .8rem; padding: .25rem .6rem; cursor: pointer;
  border: 1.5px solid var(--rc-ink); background: transparent; color: var(--rc-ink);
  border-radius: 4px; }
.rc-copy.is-done { background: var(--rc-ink); color: var(--rc-bone); }

/* The state column, tinted so the one row you are looking for is findable without
   reading every word. `sent` is the state people scan for - a link is out and has
   not been opened - so it is the one that gets emphasis. */
/* The code column in the history table. The code and its buttons sit on one line
   and the column is allowed to be the wide one - it is what the table is for. */
.rc-codecell { display: flex; align-items: center; gap: .5rem; }
/* Minted before migration 026, stored hashed only. Unrecoverable, and it says so
   rather than rendering a blank that reads like a bug. */
.rc-gone { opacity: .45; font-style: italic; }

.rc-st--live { }              /* no emphasis: nothing has happened to it yet */
.rc-st--sent { font-weight: 700; }
.rc-st--used { opacity: .55; }
.rc-st--expired { opacity: .45; text-decoration: line-through; }

/* Invite codes, shown exactly once (server.invites_page). Monospace and roomy
   line-height because these get read aloud off a screen and typed on a phone -
   the alphabet already drops 0/O and 1/I/L, and this is the other half of the
   same job. `user-select: all` so one tap takes the whole block rather than
   asking somebody to drag-select eight characters they only get one look at. */
.rc-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; line-height: 1.9; letter-spacing: .06em;
  user-select: all; -webkit-user-select: all;
  padding: .75rem .9rem; border-radius: 10px;
  background: var(--rc-tint, rgba(127,127,127,.10));
  overflow-x: auto; white-space: pre;
}
/* The code list. Small, quiet, and horizontally scrollable rather than wrapped:
   five short columns on a phone is the one table shape that stays readable.

   THE SCROLLER IS THE WRAPPER, NOT THE TABLE. `display:block; overflow-x:auto` on the
   <table> itself was the first attempt and it does not work - measured at a 485px
   body the rows still laid out 547px wide and shoved the whole page sideways, because
   table-internal boxes escape an overflow container declared on the table box. */
.rc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rc-tbl { width: 100%; border-collapse: collapse; font-size: .9rem;
          white-space: nowrap; }
.rc-tbl th, .rc-tbl td { text-align: left; padding: .4rem .7rem .4rem 0; }
.rc-tbl th { font-weight: 600; opacity: .6; font-size: .8rem;
             text-transform: lowercase; }
.rc-tbl tr + tr td { border-top: 1px solid var(--rc-hair, rgba(127,127,127,.22)); }

/* THE SCOPE PICKER, in two halves. One flat list could not hold 16 lanes and 124
   people, which is why it was capped at 12 and a rule about most people in his
   ledger could not be written at all. The second field appears only once the
   first has been answered - an empty "who" above an unanswered "where" is two
   questions at once. */
.rc-scopepick{display:grid;gap:8px;margin:10px 0}
.rc-scope-person__in{width:100%;box-sizing:border-box}

/* "this reads like 3 rules in one" - a QUESTION, never an action. Quiet, because
   it is an aside on a card that is already asking him something. */
.rc-splitoffer{margin:8px 0;font-size:13px;opacity:.85}
.rc-link{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rc-splitpart{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;
  margin:8px 0;font-size:13.5px;line-height:1.45}
.rc-splitpart em{grid-column:2;font-style:normal;opacity:.6;font-size:12px}

/* The reason box. It lives IN the card because window.prompt() drew an OS dialog
   over a dimmed page - another application interrupting his, in a typeface this
   one does not own. */

/* [hidden] LOSES TO AN AUTHOR display RULE. .rc-field sets display:block, which
   beats the UA sheet's [hidden]{display:none} on specificity alone - so both
   pickers rendered at once and the card asked three questions instead of one.
   Scoped so it outranks .rc-field without a global !important. */
.rc-scopepick [hidden]{display:none}
.rc-reason{margin-top:10px}
.rc-reason__t{width:100%;box-sizing:border-box;font:inherit;padding:8px;
  border:var(--rc-edge-hair) solid var(--rc-ink);background:transparent;
  color:inherit;border-radius:2px}
.rc-btn--quiet{background:transparent;color:var(--rc-ink);
  box-shadow:inset 0 0 0 var(--rc-edge-hair) var(--rc-ink)}

/* The graduation queue on the connectors page (server._watchlist_card). One row per
   proposed person, then the Signal B opt-in underneath.

   NOT .rc-check FOR THE CHECKBOX and not .rc-quiet-row for the form: both names were
   already taken and both would have been wrong in a way that looks like a styling bug
   rather than a collision. `.rc-check` is the board's 10px uppercase tracked BUTTON
   label, so the sentence beside the box would have rendered as tiny shouting caps -
   the exact trap `.rc-consent` was written to document. `.rc-quiet-row` is
   `justify-content:flex-end`, which would have shoved a checkbox, a paragraph and a
   button hard against the right edge of the card. The reusable half here is
   `.rc-consent`, which already IS a checkbox beside a wrapping sentence; only the two
   genuinely new shapes get new names. */
/* var(--rc-edge-hair) is a WIDTH (1.5px), not a colour - the house idiom for an
   inner divider is width + style + var(--rc-ink-soft). The first cut wrote
   var(--rc-rule), which is not a token at all: .rc-rule is a CLASS, the 7px
   striped divider up at line 111. An undefined var() does not error, it just
   drops the whole declaration, so the rows would have run together silently. */
.rc-cand{border-top:var(--rc-edge-hair) dashed var(--rc-ink-soft);
  padding:12px 0 2px;margin:0}
.rc-cand:first-of-type{border-top:0}
/* Display face, because this is a person's NAME and it is the thing being asked
   about - same weight the card's own tally gets. Wraps: an address is long and a
   phone is narrow, and a name that overflows its card is a name you cannot read. */
.rc-candwho{font-family:var(--rc-display);font-weight:700;font-size:16px;margin:0;
  overflow-wrap:anywhere}
.rc-candwho .rc-fineprint{display:block;font-family:var(--rc-ui);font-weight:400;
  margin:2px 0 0}
/* The opt-in sits below a rule because it is a DIFFERENT question from the people
   above it: those are "is this person one of yours", this is "should Recess look in a
   second place at all". Undivided, the checkbox reads as an option on the last card. */
.rc-signal{border-top:var(--rc-edge) solid var(--rc-ink);margin:16px 0 0;
  padding:4px 0 0}
.rc-scroll{overflow-x:auto;margin:12px -18px;padding:0 18px}
.rc-table{width:100%;border-collapse:collapse;font-size:13px;margin:0}
.rc-table th{text-align:left;font-weight:600;padding:8px 6px;border-bottom:var(--rc-edge) solid var(--rc-ink);vertical-align:bottom}
.rc-table td{padding:8px 6px;border-bottom:1px solid var(--rc-tint);vertical-align:top;overflow-wrap:anywhere}
.rc-table td:last-child,.rc-table th:last-child{text-align:right;white-space:nowrap}