/* =====================================================================
   Ridgebeam Ops design system.

   The approved redesign (Jen, 2026-09-10), expressed once, here. The
   mockups in ~/Documents/rbdash-redesign-mockups/ carry the same values
   as inline styles because a mockup has nowhere else to put them; a
   real application does, and this is it.

   THE PALETTE IS CLOSED. Four brand colours and three functional ones,
   named below. A fifth brand colour is not a styling choice somebody
   can make in a template, it is a change to the design, so every colour
   a template uses comes from a variable here. If a page needs a hex
   literal, that is the signal the vocabulary is missing something and
   the fix belongs in this file.

   ONE ACCENT PER SCREEN. Safety Orange marks the single thing the page
   most wants a person to do. Two orange buttons on one screen means
   neither is the accent, so the second one is navy.
   ===================================================================== */

:root {
  /* ---- Brand: the four, and no more ------------------------------- */
  --rb-navy:        #1B2A3A;  /* ink, active nav, primary buttons      */
  --rb-orange:      #FF6A2B;  /* THE accent, one purpose per screen    */
  /* `--brand-accent` is what the older form buttons ask for (13 of them,
     in the add forms). It was never defined, so every one of those
     buttons drew with no background and read as plain text: Jen pressed
     the wrong Save on 2026-10-09 because "Save changes" did not look
     like a button. Defined here, once, as the accent. */
  --brand-accent:   var(--rb-orange);
  --rb-sand:        #E8DCC8;  /* callouts and the "numbers" panel      */
  --rb-paper:       #FAF8F5;  /* the page ground                       */

  /* ---- Surfaces and lines ----------------------------------------- */
  --rb-card:        #FFFFFF;
  --rb-line:        #E5DFD4;  /* card edges, top bar and nav row       */
  --rb-hairline:    #EFEAE1;  /* rules INSIDE a card, one step lighter */
  --rb-sand-line:   #D8C9AE;  /* a rule drawn on sand                  */
  --rb-dashed:      #D8CFC0;  /* the "add something" dashed bar        */

  /* ---- Ink, in three weights -------------------------------------- */
  /* THE WHOLE SCALE MOVED ONE NOTCH DARKER on 2026-09-10, after Jen
     read the live site and said it was hard to read. She was right and
     it was measurable: the old --rb-ink-faint scored 3.46:1 against the
     paper background, which FAILS WCAG AA for normal-size text (4.5:1),
     and it was carrying description paragraphs at 12.5px. Small and
     under-contrast at the same time is the worst pairing available.

     The shift is deliberately a shift, not a re-pick: each tone takes
     the next one's old job, so the hierarchy that was designed still
     reads and only the floor comes up. Contrast against the paper
     ground (#FAF8F5):

       ink          #1B2A3A  13.77:1   unchanged, already fine
       ink-soft     #4C5A67   6.68:1   was #5C6B7A, 5.16:1
       ink-faint    #63707F   4.77:1   was #7A8794, 3.46:1  <- was failing
       ink-fainter  #7A8794   3.46:1   was #A9B2BC, 2.03:1

     ink-fainter is placeholders, disabled controls and em-dash
     stand-ins, never a sentence, so 3.46:1 is the right floor for it
     rather than a failure. Nothing that carries meaning sits below
     4.5:1 any more. */
  --rb-ink:         #1B2A3A;  /* body text: the navy again             */
  --rb-ink-soft:    #4C5A67;  /* secondary sentences                   */
  --rb-ink-faint:   #63707F;  /* labels, metadata, timestamps          */
  --rb-ink-fainter: #7A8794;  /* placeholders and disabled text        */

  /* ---- Functional: late / failed / overdue ------------------------ */
  --rb-bad:         #B4452C;
  --rb-bad-bg:      #FBEAE4;
  --rb-bad-border:  #EFC5B5;

  /* ---- Functional: done / paid / healthy -------------------------- */
  --rb-good:        #456F4F;
  --rb-good-bg:     #E8F2EC;
  --rb-good-border: #CFE3D7;

  /* ---- Functional: waiting / warning ------------------------------ */
  --rb-warn:        #7D631F;  /* the TEXT tone; #D9A036 is the fill    */
  --rb-warn-fill:   #D9A036;
  --rb-warn-bg:     #FBF1DE;
  --rb-warn-border: #EDDCBC;

  /* ---- The navy tint ---------------------------------------------- */
  /* "With engineering" on the wish list, and anything else that is
     neither good nor bad but has been picked up by somebody. This is
     NOT a fifth brand colour: it is Blueprint Navy tinted, the same way
     --rb-orange-bg is Safety Orange tinted, and it appears in the
     approved wish list mockup. A genuinely new hue would need Jen. */
  --rb-navy-text:   #3D5570;
  --rb-navy-bg:     #E9EDF2;
  --rb-navy-border: #CBD6E2;

  /* ---- The orange chip tint --------------------------------------- */
  --rb-orange-text:   #B04612;  /* orange is unreadable as small text  */
  --rb-orange-bg:     #FFF1E9;
  --rb-orange-border: #F5CDB5;

  /* ---- Type ------------------------------------------------------- */
  /* Every stack ends in real system fonts on purpose. The woff2 files
     are fetched by fetch-vendor.sh and gitignored, so a fresh clone or
     a CI box has none of them. That must degrade to a plain-looking
     page, never to an unstyled one. */
  --rb-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --rb-font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rb-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
                     Consolas, monospace;

  /* ---- Geometry --------------------------------------------------- */
  --rb-radius:       10px;   /* cards                                  */
  --rb-radius-sm:    7px;    /* buttons and filter pills               */
  --rb-radius-chip:  6px;    /* status chips and inputs                */
  --rb-topbar-h:     64px;
  --rb-navrow-h:     46px;
}

/* =====================================================================
   Ground
   ===================================================================== */

body.rb {
  margin: 0;
  min-height: 100vh;
  background: var(--rb-paper);
  color: var(--rb-ink);
  font-family: var(--rb-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Bare element selectors, NOT `body.rb a`.

   `body.rb a` scores 0-1-2, which beats every single-class component
   rule below it: .rb-btn-primary, .rb-nav-link, .rb-menu-item and
   .rb-tag are all 0-1-0. The symptom was a navy "Back to clients"
   button on the 403 page with navy text on it, i.e. an invisible
   label, and nav links a shade too dark. A plain `a` scores 0-0-1 and
   loses to all of them, which is the order this file wants. Every
   component that needs a hover of its own declares one. */
a { color: var(--rb-ink); }
a:hover { color: var(--rb-orange); }

/* Every number in a column lines up. Counts and percentages read wrong
   when the digits jitter between rows. */
.rb-num { font-variant-numeric: tabular-nums; }

/* =====================================================================
   The shell: top bar over nav row. This replaced the left sidebar
   (Jen's call, 2026-09-10: she preferred the top-nav layout).
   ===================================================================== */

.rb-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  height: var(--rb-topbar-h);
  background: var(--rb-card);
  border-bottom: 1px solid var(--rb-line);
}

.rb-wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.rb-wordmark:hover { color: var(--rb-ink); }
.rb-wordmark-name {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.rb-wordmark-sub {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rb-ink-faint);
  line-height: 1.4;
}

/* The search box in the top bar is the way into the ask-the-dashboard
   widget. It is a button, not an input: the real input lives in the
   widget, and having two would mean deciding which one is authoritative
   every time somebody types in the wrong one. */
.rb-search {
  flex-grow: 1;
  max-width: 480px;
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rb-paper);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-chip);
  padding: 9px 14px;
  font-family: var(--rb-font-body);
  font-size: 14px;
  color: var(--rb-ink-faint);
  cursor: pointer;
  text-align: left;
}
.rb-search:hover { border-color: var(--rb-ink-fainter); color: var(--rb-ink-soft); }

.rb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--rb-navy);
  color: var(--rb-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
/* The small one on a row, sand rather than navy so a list of them does
   not read as a column of full stops. */
.rb-avatar-sm {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--rb-sand);
  color: var(--rb-navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.rb-avatar-sm.is-me { background: var(--rb-navy); color: var(--rb-paper); }

.rb-signout {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-family: var(--rb-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rb-ink-fainter);
  cursor: pointer;
}
.rb-signout:hover { color: var(--rb-orange); }

/* ---- Nav row ------------------------------------------------------ */

.rb-navrow {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 32px;
  height: var(--rb-navrow-h);
  background: var(--rb-card);
  border-bottom: 1px solid var(--rb-line);
}

.rb-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  font-size: 14.5px;
  color: var(--rb-ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.rb-nav-link:hover { color: var(--rb-navy); }
.rb-nav-link.is-active {
  font-weight: 600;
  color: var(--rb-navy);
  border-bottom-color: var(--rb-navy);
}

/* Dropdowns are <details>/<summary>. No JavaScript: a menu that stops
   working because a script failed to load is a page a person cannot
   navigate away from. Keyboard and screen readers get this for free. */
.rb-menu { position: relative; display: flex; }
.rb-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.rb-menu > summary::-webkit-details-marker { display: none; }
.rb-menu[open] > summary { color: var(--rb-navy); }
.rb-menu-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 4px;
  z-index: 40;
  min-width: 208px;
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-chip);
  box-shadow: 0 10px 28px rgba(27, 42, 58, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.rb-menu-item {
  padding: 8px 12px;
  border-radius: var(--rb-radius-chip);
  font-size: 14.5px;
  color: var(--rb-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.rb-menu-item:hover { background: var(--rb-paper); color: var(--rb-navy); }
.rb-menu-item.is-active { color: var(--rb-navy); font-weight: 600; background: var(--rb-paper); }

.rb-stamp {
  font-family: var(--rb-font-mono);
  font-size: 12px;
  color: var(--rb-ink-faint);
  display: flex;
  align-items: center;
}

/* =====================================================================
   Page body
   ===================================================================== */

.rb-main { padding: 30px 52px 40px 52px; }
@media (max-width: 900px) {
  .rb-topbar, .rb-navrow { padding-left: 18px; padding-right: 18px; }
  .rb-main { padding: 22px 18px 32px 18px; }
  /* More links than fit. Scrolling the row keeps every page reachable;
     a wrapped second row would push the page content down on every
     screen to serve the narrowest one. */
  .rb-navrow { overflow-x: auto; }
}

/* NARROW SCREENS. Not the design target (the mockups are 1440 wide and
   both operators work on laptops) but a page that runs off the side of
   a phone is broken, not merely cramped: the row is a rigid four-zone
   flex line, so at 375px the title column collapsed to one word per
   line and the buttons left the screen entirely.

   The fix is to let the row wrap and give the title the full width,
   with the state, owner and buttons flowing underneath it. */
@media (max-width: 760px) {
  .rb-topbar { gap: 12px; }
  /* The Ask widget's own button is still bottom-right on every screen,
     so hiding this loses nothing but the shortcut. */
  .rb-search { display: none; }

  .rb-row { flex-wrap: wrap; gap: 10px 12px; }
  .rb-row-main { flex-basis: 100%; order: -1; }
  .rb-row-state { width: auto; }
  .rb-row-actions { margin-left: auto; }
}

.rb-h1 {
  font-family: var(--rb-font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.rb-h2 {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
}
.rb-h3 {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
}
.rb-sub { font-size: 15px; color: var(--rb-ink-soft); margin: 0; }

/* The uppercase mono label above a heading or beside a panel title. */
.rb-eyebrow {
  font-family: var(--rb-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-ink-faint);
}
.rb-eyebrow.is-bad { color: var(--rb-bad); }

/* =====================================================================
   Cards, panels, callouts
   ===================================================================== */

.rb-card {
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
}
.rb-card-pad { padding: 16px 22px; }

/* Sand. Used for the counts panel and for a callout that is telling you
   something rather than warning you. */
.rb-sand {
  background: var(--rb-sand);
  border-radius: var(--rb-radius);
}
.rb-sand-rule { border-top: 1px solid var(--rb-sand-line); }
.rb-hairline { border-top: 1px solid var(--rb-hairline); }

/* The "add one of these" bar at the top of a list. */
.rb-addbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--rb-card);
  border: 1px dashed var(--rb-dashed);
  border-radius: 9px;
  padding: 12px 18px;
}
.rb-addbar:focus-within { border-color: var(--rb-orange); border-style: solid; }

/* =====================================================================
   Chips: the state as a word, not as an inference from which buttons
   happen to be showing.
   ===================================================================== */

.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--rb-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--rb-radius-chip);
  background: var(--rb-paper);
  color: var(--rb-ink-soft);
  border: 1px solid var(--rb-line);
  white-space: nowrap;
}
.rb-chip.is-active  { background: var(--rb-orange-bg); color: var(--rb-orange-text); border-color: var(--rb-orange-border); }
.rb-chip.is-good    { background: var(--rb-good-bg);   color: var(--rb-good);        border-color: var(--rb-good-border); }
.rb-chip.is-bad     { background: var(--rb-bad-bg);    color: var(--rb-bad);         border-color: var(--rb-bad-border); }
.rb-chip.is-warn    { background: var(--rb-warn-bg);   color: var(--rb-warn);        border-color: var(--rb-warn-border); }
.rb-chip.is-muted   { color: var(--rb-ink-faint); }

/* Mixed case, for a name rather than a state: the deal tag. */
.rb-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--rb-radius-chip);
  font-size: 12px;
  color: var(--rb-orange-text);
  background: var(--rb-orange-bg);
  border: 1px solid var(--rb-orange-border);
  text-decoration: none;
  white-space: nowrap;
}
.rb-tag:hover { color: var(--rb-orange-text); border-color: var(--rb-orange); }
.rb-tag.is-unknown {
  color: var(--rb-ink-faint);
  background: var(--rb-paper);
  border-color: var(--rb-line);
}

/* =====================================================================
   Buttons
   ===================================================================== */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--rb-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--rb-radius-chip);
  border: 1px solid var(--rb-line);
  background: var(--rb-card);
  color: var(--rb-ink-soft);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.rb-btn:hover { border-color: var(--rb-ink-fainter); color: var(--rb-navy); }

/* The one a person is most likely to want on that row. */
.rb-btn.is-strong { font-weight: 600; color: var(--rb-navy); }

/* Page-level actions, bigger. */
.rb-btn-lg {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--rb-radius-sm);
}
.rb-btn-primary {
  background: var(--rb-navy);
  border-color: var(--rb-navy);
  color: #FFFFFF;
}
.rb-btn-primary:hover { background: #24374a; border-color: #24374a; color: #FFFFFF; }

/* THE accent. One per screen. */
/* THE LABEL IS NAVY, NOT WHITE, and that is a contrast fix rather than
   a taste change. White on Safety Orange scores 2.86:1, which fails
   WCAG AA for normal text by a wide margin, and this is the button the
   page most wants somebody to press.

   The two ways out were darkening the fill or changing the label.
   Darkening the fill enough to carry white text means #C2470F, which is
   no longer Safety Orange, and the palette is closed: the brand colour
   is not the thing to spend here. Blueprint Navy on Safety Orange is
   5.11:1, passes, and spends nothing at all, because both are already
   brand colours sitting next to each other everywhere else. */
.rb-btn-accent {
  background: var(--rb-orange);
  border-color: var(--rb-orange);
  color: var(--rb-navy);
}
.rb-btn-accent:hover { background: #ef5c1e; border-color: #ef5c1e; color: var(--rb-navy); }

.rb-btn:disabled, .rb-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Filter pills: Everyone / Mine / Show done. */
.rb-pill {
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--rb-radius-sm);
  border: 1px solid var(--rb-line);
  background: var(--rb-card);
  color: var(--rb-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.rb-pill:hover { color: var(--rb-navy); border-color: var(--rb-ink-fainter); }
.rb-pill.is-on {
  font-weight: 600;
  background: var(--rb-navy);
  border-color: var(--rb-navy);
  color: var(--rb-paper);
}
.rb-pill.is-on:hover { color: var(--rb-paper); }

/* =====================================================================
   Inputs
   ===================================================================== */

.rb-input, .rb-select, .rb-textarea {
  font-family: var(--rb-font-body);
  font-size: 14.5px;
  color: var(--rb-ink);
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-chip);
  padding: 8px 12px;
}
.rb-input::placeholder, .rb-textarea::placeholder { color: var(--rb-ink-fainter); }
.rb-input:focus, .rb-select:focus, .rb-textarea:focus {
  outline: none;
  border-color: var(--rb-orange);
}
/* Inside a dashed add-bar the field carries no chrome of its own. */
.rb-input.is-bare {
  border-color: transparent;
  background: transparent;
  padding: 0;
}
.rb-input.is-bare:focus { border-color: transparent; }

/* An inline control that only looks like one on hover, used for editing
   a row without turning the list into a form. The select reassigns an
   owner; the input carries a due date. Same treatment, because they sit
   on the same row and reading as two different kinds of control would
   suggest they behave differently. */
.rb-select.is-quiet,
.rb-input.is-quiet {
  border-color: transparent;
  background: transparent;
  padding: 3px 6px;
  font-size: 14px;
  color: var(--rb-ink-soft);
}
.rb-select.is-quiet:hover,
.rb-input.is-quiet:hover { border-color: var(--rb-line); }
.rb-select.is-quiet:focus,
.rb-input.is-quiet:focus { border-color: var(--rb-orange); color: var(--rb-ink); }

/* THE DUE DATE CELL.

   An empty date input renders as "mm/dd/yyyy" in most browsers, which
   is loud placeholder text on a row that mostly has no due date. Held
   at the fainter tone so an unset date reads as an offer rather than as
   content, and comes up to full ink once a date is actually in it. */
.rb-due { display: inline-flex; align-items: center; gap: 5px; }
.rb-due .rb-input.is-quiet { color: var(--rb-ink-faint); }
.rb-due.is-late .rb-input.is-quiet { color: var(--rb-bad); }
.rb-due .rb-input.is-quiet:focus { color: var(--rb-ink); }
/* Safari and Chrome both hand the calendar button its own cursor and a
   default tint; make it follow the row rather than announce itself. */
.rb-due .rb-input.is-quiet::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.45;
}
.rb-due .rb-input.is-quiet:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* AN EMPTY DUE DATE IS A CALENDAR ICON AND NOTHING ELSE.

   A date input with no value draws the browser's own "mm/dd/yyyy", and
   most tasks have no due date, so the first version repeated that string
   down the whole list. Jen asked for it hidden until hover, the same
   week she asked for the dashboard to be less cluttered.

   INVISIBLE WAS THE ORIGINAL BUG, though: before this control existed
   the slot rendered nothing at all, so there was nowhere to click and no
   way to give a task a date. Hiding it completely would walk straight
   back into that. So the resting state keeps the calendar glyph, faint
   but present, which is the affordance; only the placeholder text goes.

   `width` is set rather than the text merely hidden, because
   transparent text still reserves its box and would leave a ragged gap
   in the middle of every meta line.

   REVEALED BY :focus-within AS WELL AS :hover, and that is not
   decoration: a control reachable only by pointing at it is broken for
   anyone tabbing through the page. Tab order and mouse get the same
   thing. */
.rb-due.is-empty .rb-input.is-quiet {
  width: 1.4rem;
  padding-left: 0;
  padding-right: 0;
  /* Hides the browser-drawn mm/dd/yyyy. A date input has no
     ::placeholder to target, so the field's own text colour is the
     only handle on it. */
  color: transparent;
}
.rb-due.is-empty .rb-input.is-quiet::-webkit-calendar-picker-indicator {
  opacity: 0.3;
}
.rb-due.is-empty:hover .rb-input.is-quiet,
.rb-due.is-empty:focus-within .rb-input.is-quiet {
  width: auto;
  padding-left: 6px;
  padding-right: 6px;
  color: var(--rb-ink-faint);
}
.rb-due.is-empty:hover .rb-input.is-quiet::-webkit-calendar-picker-indicator,
.rb-due.is-empty:focus-within .rb-input.is-quiet::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Firefox draws no calendar indicator at all, so the rules above would
   leave 1.4rem of nothing: a control that is genuinely invisible rather
   than merely quiet. There, the field keeps its own faint glyph. */
@supports not selector(::-webkit-calendar-picker-indicator) {
  .rb-due.is-empty .rb-input.is-quiet {
    width: auto;
    padding-left: 6px;
    padding-right: 6px;
    color: var(--rb-ink-fainter);
  }
}

/* =====================================================================
   Rows: a list of things, each of which is one record.
   ===================================================================== */

.rb-rows {
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
  display: flex;
  flex-direction: column;
}
.rb-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rb-hairline);
  min-width: 0;
}
.rb-rows > .rb-row:last-child { border-bottom: none; }
.rb-row.is-done { opacity: 0.5; }
.rb-row-main { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rb-row-title { font-size: 15px; font-weight: 500; }
.rb-row.is-done .rb-row-title { text-decoration: line-through; color: var(--rb-ink-faint); }
/* A task's words and note open its editor (2026-09-23). Quiet until
   the pointer is on them, so a list of tasks still reads as a list. */
.rb-editable { cursor: text; border-radius: 4px; }
.rb-editable:hover { background: var(--rb-hairline); }
.rb-add-note { color: var(--rb-ink-fainter); opacity: 0; transition: opacity .15s; }
.rb-row:hover .rb-add-note, .rb-add-note:focus { opacity: 1; }
@media (hover: none) { .rb-add-note { opacity: 1; } }
.rb-row-editing { background: var(--rb-card); }
.rb-row-meta {
  font-size: 12.5px;
  color: var(--rb-ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rb-row-meta a { color: var(--rb-ink-faint); }
.rb-row-meta a:hover { color: var(--rb-orange); }
.rb-row-empty {
  padding: 26px 20px;
  text-align: center;
  font-size: 14.5px;
  color: var(--rb-ink-faint);
}

/* The three fixed zones either side of the flexible middle. Classes
   rather than inline widths on the element, so the narrow-screen rules
   below can actually reach them. */
.rb-row-state   { width: 104px; flex-shrink: 0; }
.rb-row-owner   { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.rb-row-actions { flex-shrink: 0; display: flex; gap: 8px; justify-content: flex-end; }
.rb-row-owner-name {
  font-size: 13.5px;
  color: var(--rb-ink-faint);
  white-space: nowrap;
}

/* The note under a list explaining a rule the list obeys. */
.rb-note { margin-top: 14px; font-size: 13.5px; color: var(--rb-ink-soft); }

/* =====================================================================
   Small stuff
   ===================================================================== */

.rb-mono { font-family: var(--rb-font-mono); font-size: 13.5px; }
.rb-late { color: var(--rb-bad); }
.rb-saved { font-size: 12.5px; color: var(--rb-good); }
.rb-saved.is-bad { color: var(--rb-bad); }

/* The dashed add-bar is a <details> summary, so the disclosure triangle
   has to go: the bar's own plus sign is the affordance. */
.rb-newtask > summary { list-style: none; cursor: pointer; }
.rb-newtask > summary::-webkit-details-marker { display: none; }
.rb-newtask[open] > summary { border-style: solid; border-color: var(--rb-orange); }


/* =====================================================================
   Tables

   Used where a row really is a record with the same five facts every
   time (issues, the version census, the ledger). Where half the columns
   are empty on most rows, .rb-rows is the better shape: see the note at
   the top of _task_row.html.
   ===================================================================== */

.rb-table-wrap {
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
  overflow-x: auto;
}
.rb-table { border-collapse: collapse; width: 100%; }
.rb-table th {
  font-family: var(--rb-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-ink-faint);
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rb-line);
  white-space: nowrap;
}
.rb-table td {
  font-size: 14.5px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rb-hairline);
  vertical-align: top;
}
.rb-table tr:last-child td { border-bottom: none; }
.rb-table th.rb-num, .rb-table td.rb-num { text-align: right; }
.rb-table-title { font-weight: 600; font-size: 15px; }
/* The one plain-English sentence under a row's name saying what it
   means for the business. The redesign asks for one on every issue. */
.rb-table-why { font-size: 13px; color: var(--rb-ink-faint); margin-top: 3px; }
.rb-table-why.is-bad { color: var(--rb-bad); font-weight: 500; }

/* =====================================================================
   Banners: a standing warning that should not sit quietly.
   ===================================================================== */

.rb-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14.5px;
  background: var(--rb-sand);
  border: 1px solid transparent;
  text-decoration: none;
}
.rb-banner.is-bad  { background: var(--rb-bad-bg);  border-color: var(--rb-bad-border); }
.rb-banner.is-warn { background: var(--rb-warn-bg); border-color: var(--rb-warn-border); }
.rb-banner-more {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}

/* =====================================================================
   Home: the attention cards and the right rail
   ===================================================================== */

/* The main column and the rail. Collapses to one column before the rail
   gets too narrow to hold a version string on one line. */
.rb-split { display: flex; gap: 28px; align-items: flex-start; }
.rb-split-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rb-rail { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1000px) {
  .rb-split { flex-direction: column; }
  .rb-rail { width: 100%; }
}

/* One thing that wants a person, with the sentence that says why. */
.rb-attn {
  background: var(--rb-card);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rb-attn-why { font-size: 14.5px; color: var(--rb-ink-soft); line-height: 1.5; }

/* A label and its number on one line. The rail is made of these. */
.rb-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rb-kv-label { font-size: 14.5px; }
.rb-kv-value {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
/* Same line, but the right-hand side is a version string rather than a
   count, so it is mono and quiet. */
.rb-kv-mono {
  font-family: var(--rb-font-mono);
  font-size: 13.5px;
  color: var(--rb-ink-soft);
}
.rb-kv-mono.is-newest { color: var(--rb-ink); font-weight: 500; }
.rb-kv-mono.is-behind { color: var(--rb-bad); }

/* =====================================================================
   Grids, tiles, empty states
   ===================================================================== */

.rb-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.rb-empty {
  border: 1px dashed var(--rb-line);
  border-radius: var(--rb-radius);
  padding: 40px 20px;
  text-align: center;
  background: var(--rb-card);
}

/* A count with a word after it: "2 open", "1 with engineering". Reads
   live off the linked record, never stored. */
.rb-count {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--rb-paper);
  color: var(--rb-ink);
  border: 1px solid var(--rb-line);
  white-space: nowrap;
}
.rb-count.is-eng  { background: var(--rb-navy-bg);  color: var(--rb-navy-text); border-color: var(--rb-navy-border); }
.rb-count.is-good { background: var(--rb-good-bg);  color: var(--rb-good);      border-color: var(--rb-good-border); }

.rb-chip.is-eng { background: var(--rb-navy-bg); color: var(--rb-navy-text); border-color: var(--rb-navy-border); }

/* Progress. Width is set inline from the computed value: a stored
   percentage is right until one write path forgets to recompute it. */
.rb-bar {
  background: var(--rb-hairline);
  border-radius: 999px;
  overflow: hidden;
  height: 6px;
}
.rb-bar > span { display: block; height: 100%; background: var(--rb-orange); }

/* A dot that marks a row as the bad one. */
.rb-dot {
  height: 7px; width: 7px;
  border-radius: 50%;
  background: var(--rb-ink-fainter);
  flex-shrink: 0;
}
.rb-dot.is-bad  { background: var(--rb-bad); }
.rb-dot.is-warn { background: var(--rb-warn-fill); }
.rb-dot.is-good { background: var(--rb-good); }

/* The quiet line under a panel, or at the foot of the rail. */
.rb-footnote {
  font-family: var(--rb-font-mono);
  font-size: 12px;
  color: var(--rb-ink-faint);
}

/* Putting something away. Hovers toward the "late/failed" tone rather
   than the accent: it is reversible, but it should not look casual. */
.rb-archive:hover { color: var(--rb-bad); border-color: var(--rb-bad-border); }

/* =====================================================================
   Tone utilities.

   These exist because fourteen templates were written in Tailwind's
   dark-slate utilities and the redesign had to move all of them. The
   first pass did it with rb-legacy-shim.css, which re-pointed Tailwind's
   own class names at this palette. That was the right thing for a
   changeover and the wrong thing to keep: it meant `text-slate-500` in
   a template no longer meant slate, so the markup said one thing and
   the screen showed another.

   These say what they mean. A page using them owes Tailwind nothing,
   which is what lets the shim be deleted and, later, lets Tailwind
   itself go.

   Prefer a component class (.rb-chip, .rb-btn, .rb-table) where one
   fits. Reach for these for the one-off run of text inside a page.
   ===================================================================== */

.rb-t-ink     { color: var(--rb-ink); }
.rb-t-soft    { color: var(--rb-ink-soft); }
.rb-t-faint   { color: var(--rb-ink-faint); }
.rb-t-fainter { color: var(--rb-ink-fainter); }
.rb-t-bad     { color: var(--rb-bad); }
.rb-t-good    { color: var(--rb-good); }
.rb-t-warn    { color: var(--rb-warn); }
.rb-t-accent  { color: var(--rb-orange-text); }

.rb-bg-paper  { background-color: var(--rb-paper); }
.rb-bg-card   { background-color: var(--rb-card); }
.rb-bg-sand   { background-color: var(--rb-sand); }
.rb-bg-bad    { background-color: var(--rb-bad-bg); }
.rb-bg-good   { background-color: var(--rb-good-bg); }
.rb-bg-warn   { background-color: var(--rb-warn-bg); }
.rb-bg-accent { background-color: var(--rb-orange-bg); }

.rb-bd        { border-color: var(--rb-line); }
.rb-bd-hair   { border-color: var(--rb-hairline); }
.rb-bd-bad    { border-color: var(--rb-bad-border); }
.rb-bd-good   { border-color: var(--rb-good-border); }
.rb-bd-warn   { border-color: var(--rb-warn-border); }
.rb-bd-accent { border-color: var(--rb-orange-border); }

/* Every child, not `* + *`: Tailwind 4's divide-y draws the line as the
   BOTTOM border of every child but the last, so the sibling selector
   missed the first row and its line fell back to the ink colour (seen
   on the project page, 2026-09-23). */
.rb-divide > * { border-color: var(--rb-hairline); }

/* The milestone tick. A checkbox that is a real button, because ticking
   a milestone is a write with an audit row and not a form field. Two
   states and nothing between them: done is green and filled, not done
   is an empty outline whose tick is invisible until it is earned. */
.rb-tick {
  border-color: var(--rb-line);
  color: transparent;
  background: var(--rb-card);
  cursor: pointer;
}
.rb-tick:hover { border-color: var(--rb-ink-fainter); }
.rb-tick.is-on {
  border-color: var(--rb-good);
  background: var(--rb-good-bg);
  color: var(--rb-good);
}
.rb-tick.is-on:hover { background: var(--rb-good-border); }

/* Remove, on a step or a phase. Quiet until pointed at, because it is
   the rare action on a row whose everyday action is the tick beside
   it. It puts the row away; nothing is deleted. */
.rb-remove {
  font-size: 11px;
  color: var(--rb-ink-fainter);
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
}
.rb-remove:hover { color: var(--rb-bad); text-decoration: underline; }

/* The activity feed's row marker. Grey for an ordinary write, solid red
   for one that failed: the redesign asks for the failure to be findable
   by scanning the left edge. */
.rb-bg-dot       { background-color: var(--rb-ink-fainter); }
.rb-bg-bad-solid { background-color: var(--rb-bad); }

/* =====================================================================
   Analytics (/analytics, Jen only)

   Plain CSS bars, no chart library: the page is counts over days and a
   bar is a div with a height. Bars are the navy tint, not orange, so
   the page keeps orange free for the one thing it wants pressed (Apply
   on the date range). An empty slot keeps a 2px hairline stub so a
   quiet day reads as a day with nothing, not as a missing day.
   ===================================================================== */

.rb-an-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rb-an-toolbar form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.rb-an-stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .rb-an-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rb-an-stat-value {
  font-family: var(--rb-font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.rb-an-stat-note { font-size: 13px; color: var(--rb-warn); margin-top: 4px; }

.rb-an-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
}
.rb-an-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
}
.rb-an-col > span {
  display: block;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--rb-navy-text);
}
.rb-an-col.is-zero > span { background: var(--rb-hairline); }
a.rb-an-col:hover > span { background: var(--rb-navy); }
.rb-an-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--rb-ink-faint);
  margin-top: 8px;
}

.rb-an-two {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .rb-an-two { grid-template-columns: minmax(0, 1fr); }
}

.rb-an-funnel { display: flex; flex-direction: column; gap: 12px; }
.rb-an-stage {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
}
@media (max-width: 700px) {
  .rb-an-stage { grid-template-columns: 140px minmax(0, 1fr) 56px; }
}
.rb-an-track {
  height: 26px;
  border-radius: var(--rb-radius-chip);
  background: var(--rb-hairline);
  overflow: hidden;
}
.rb-an-track > span {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--rb-navy-text);
}

.rb-an-path {
  font-family: var(--rb-font-mono);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

/* =====================================================================
   Tailwind's size utilities, nudged up one step.

   Tailwind still supplies LAYOUT on the pages that were converted for
   colour but not re-typeset, and its size scale starts small: text-xs
   is 12px and text-[10px] means what it says. Jen read the live site on
   2026-09-10 and said it was hard to read, so the same +1px rule that
   was applied to rb.css and to the inline sizes is applied here, in one
   place, rather than by editing 170 class attributes.

   These are `body.rb .foo`, specificity 0-2-1, which beats Tailwind's
   own 0-1-0 whatever order the runtime injects its stylesheet in. Same
   mechanism the old colour shim used, and the same reason it worked.

   This block dies with Tailwind. When the layout half is finally
   removed there is nothing here to migrate: the sizes it is correcting
   will not exist. */
body.rb .text-\[8px\]  { font-size: 9px; }
body.rb .text-\[9px\]  { font-size: 10px; }
body.rb .text-\[10px\] { font-size: 11px; }
body.rb .text-\[11px\] { font-size: 12px; }
body.rb .text-xs       { font-size: 13px; }
body.rb .text-sm       { font-size: 15px; }

/* =====================================================================
   Revenue and Business projections (2026-10-24)

   Charts draw on a canvas, which cannot read a CSS variable, so the
   scripts read these same variables once with getComputedStyle. The
   palette stays closed: a chart colour is a variable named here or
   above, never a hex literal in a template.
   ===================================================================== */

:root {
  --rb-chart-in:      var(--rb-navy);
  --rb-chart-out:     var(--rb-sand-line);
  --rb-chart-kept:    var(--rb-good);
  --rb-chart-line:    var(--rb-bad);       /* break-even, the 105% ceiling */
  --rb-chart-soft:    var(--rb-navy-border); /* one-time money             */
  --rb-chart-mid:     var(--rb-navy-text);
  --rb-chart-quiet:   #A9B2BC;              /* ink-fainter's old tone, a grey */
  --rb-chart-grid:    var(--rb-hairline);
  --rb-chart-ink:     var(--rb-ink-faint);
}

.rb-seg { display: inline-flex; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-sm); overflow: hidden; background: var(--rb-card); }
.rb-seg button { font: 500 13px var(--rb-font-body); padding: 7px 13px; border: 0; background: transparent; color: var(--rb-ink-soft); cursor: pointer; }
.rb-seg button + button { border-left: 1px solid var(--rb-line); }
.rb-seg button.is-on { background: var(--rb-navy); color: #FFFFFF; }

.rb-mx-card { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); padding: 18px 22px; min-width: 0; }
.rb-mx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rb-mx-head .rb-h2 { margin-right: auto; }
.rb-mx-chart { position: relative; height: 290px; }
.rb-mx-chart.is-sm { height: 230px; }
.rb-mx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--rb-ink-soft); margin-bottom: 8px; }
.rb-mx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb-mx-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rb-mx-ln { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.rb-mx-ln.is-dash { border-top-style: dashed; }
.rb-mx-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rb-mx-stat { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); padding: 14px 18px; }
.rb-mx-label { font-size: 13px; color: var(--rb-ink-faint); }
.rb-mx-sub { font-size: 12.5px; color: var(--rb-ink-faint); margin-top: 2px; }
.rb-mx-two { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rb-mx-two { grid-template-columns: minmax(0, 1fr); } }
.rb-mx-insights { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rb-mx-insight { border-radius: var(--rb-radius); padding: 13px 16px; font-size: 14px; line-height: 1.45; border: 1px solid var(--rb-line); background: var(--rb-card); }
.rb-mx-insight b { display: block; font-family: var(--rb-font-display); font-size: 15px; margin-bottom: 3px; }
.rb-mx-insight.is-good { background: var(--rb-good-bg); border-color: var(--rb-good-border); }
.rb-mx-insight.is-warn { background: var(--rb-warn-bg); border-color: var(--rb-warn-border); }
.rb-mx-insight.is-navy { background: var(--rb-navy-bg); border-color: var(--rb-navy-border); }
.rb-mx-note { font-size: 12.5px; color: var(--rb-ink-faint); margin-top: 8px; }
.rb-mx-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.rb-mx-list td { padding: 7px 0; border-bottom: 1px solid var(--rb-hairline); vertical-align: top; }
.rb-mx-list tr:last-child td { border-bottom: 0; }
.rb-mx-list td.rb-num { text-align: right; white-space: nowrap; padding-left: 12px; }
.rb-mx-owed { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; padding: 14px 20px;
  background: var(--rb-warn-bg); border: 1px solid var(--rb-warn-border); border-radius: var(--rb-radius); }
.rb-mx-dial { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rb-hairline); }
.rb-mx-dial label { font-size: 13.5px; }
.rb-mx-dial output { font: 600 13.5px var(--rb-font-body); font-variant-numeric: tabular-nums; }
.rb-mx-dial input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--rb-navy); }
.rb-mx-dial .rb-mx-was { grid-column: 1 / -1; font-size: 11.5px; color: var(--rb-ink-faint); }
.rb-mx-dial .rb-mx-was.is-changed { color: var(--rb-orange-text); }
/* The "?" beside a dial: its meaning shows on hover, keyboard focus or tap. */
.rb-mx-dial { position: relative; }
.rb-mx-dl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rb-mx-q { flex: none; width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid var(--rb-line); background: var(--rb-card); color: var(--rb-ink-faint); font: 600 11px/1 var(--rb-font-body); cursor: help; }
.rb-mx-q:hover, .rb-mx-q:focus-visible { border-color: var(--rb-navy); color: var(--rb-navy); }
.rb-mx-tip { display: none; position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 20; padding: 10px 12px; border-radius: var(--rb-radius-sm); background: var(--rb-navy); color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 6px 18px rgba(27, 42, 58, .18); }
.rb-mx-dl:hover .rb-mx-tip, .rb-mx-q:focus + .rb-mx-tip { display: block; }
.rb-mx-rail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 1000px) { .rb-mx-rail { position: static; max-height: none; } }
details.rb-mx-more > summary { cursor: pointer; font-size: 13.5px; font-weight: 500; padding: 10px 0; color: var(--rb-navy-text); }

/* =====================================================================
   Clients page project rows (2026-10-24). One status per project, a bar,
   and phases on click. Shared by the Clients page and a client's page.
   ===================================================================== */
.rb-cl-client { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); }
.rb-cl-client-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--rb-hairline); }
.rb-cl-client-head h2 { margin: 0 auto 0 0; font-family: var(--rb-font-display); font-weight: 800; font-size: 20px; }
.rb-cl-client-head h2 a { color: var(--rb-ink); text-decoration: none; }
.rb-cl-who { font-size: 13px; color: var(--rb-ink-faint); }
.rb-cl-row { border-bottom: 1px solid var(--rb-hairline); }
.rb-cl-proj { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(160px, 1.4fr) minmax(190px, 1fr); gap: 8px 22px; align-items: center; padding: 14px 22px; cursor: pointer; }
.rb-cl-proj:hover { background: var(--rb-paper); }
@media (max-width: 860px) { .rb-cl-proj { grid-template-columns: minmax(0, 1fr); } }
.rb-cl-name { font-weight: 600; font-size: 15px; }
.rb-cl-sub { font-size: 13px; color: var(--rb-ink-faint); margin-top: 2px; }
.rb-cl-bar { height: 8px; border-radius: 5px; background: var(--rb-hairline); overflow: hidden; }
.rb-cl-bar span { display: block; height: 100%; background: var(--rb-navy); }
.rb-cl-bar span.is-done { background: var(--rb-good); }
.rb-cl-bar span.is-late { background: var(--rb-bad); }
.rb-cl-bar span.is-waiting { background: var(--rb-warn-fill); }
.rb-cl-bar-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--rb-ink-faint); margin-top: 6px; gap: 10px; }
.rb-cl-state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rb-cl-line { font-size: 13px; color: var(--rb-ink-soft); }
.rb-cl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-cl-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rb-ink-soft); }
.rb-cl-date .rb-input { padding: 4px 8px; font-size: 13px; }
.rb-cl-detail { padding: 4px 22px 16px 22px; background: var(--rb-paper); }
.rb-cl-phase { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px dashed var(--rb-hairline); font-size: 14px; align-items: start; }
.rb-cl-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rb-line); margin-top: 2px; box-sizing: border-box; }
.rb-cl-dot.is-done { background: var(--rb-good); border-color: var(--rb-good); }
.rb-cl-dot.is-now { border-color: var(--rb-orange); background: var(--rb-orange-bg); }
.rb-cl-proposed { padding: 12px 22px; font-size: 13px; color: var(--rb-ink-faint); }
.rb-cl-attn { border-radius: var(--rb-radius); border: 1px solid var(--rb-bad-border); background: var(--rb-bad-bg); padding: 16px 20px; }
.rb-cl-attn-title { font-family: var(--rb-font-display); font-weight: 700; font-size: 18px; color: var(--rb-ink); text-decoration: none; }
.rb-cl-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-cl-filter button { font: 500 13.5px var(--rb-font-body); padding: 7px 13px; border-radius: var(--rb-radius-sm); border: 1px solid var(--rb-line); background: var(--rb-card); color: var(--rb-ink-soft); cursor: pointer; }
.rb-cl-filter button.is-on { background: var(--rb-navy); color: #FFFFFF; border-color: var(--rb-navy); }
.rb-cl-filter b { font-family: var(--rb-font-mono); font-weight: 500; margin-left: 5px; }

/* ---- Home (2026-10-26): what needs you, the money, this week. ----
   An alert is one row: what it is, why, and the one link that fixes it.
   The left edge carries the tone so a list of ten still scans. */
.rb-home-section { margin-top: 28px; max-width: 1240px; }
.rb-home-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rb-home-alert {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--rb-card); border: 1px solid var(--rb-line);
  border-left: 4px solid var(--rb-navy-border);
  border-radius: var(--rb-radius); padding: 12px 18px;
}
.rb-home-alert.is-bad  { background: var(--rb-bad-bg); border-color: var(--rb-bad-border); border-left-color: var(--rb-bad); }
.rb-home-alert.is-warn { border-left-color: var(--rb-warn-fill); }
.rb-home-alert-body { flex: 1 1 320px; min-width: 0; }
.rb-home-alert-title { font-family: var(--rb-font-display); font-weight: 700; font-size: 16px; color: var(--rb-ink); }
.rb-home-alert-detail { font-size: 14px; color: var(--rb-ink-soft); margin-top: 2px; line-height: 1.45; }
.rb-home-alert-moves { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.rb-home-stat { text-decoration: none; color: inherit; display: block; }
.rb-home-stat:hover { border-color: var(--rb-ink-fainter); }
/* This week, as a short calendar: a day heading said once, its items
   under it, each one a link to the thing itself. */
.rb-home-week { margin-top: 12px; padding: 6px 22px; }
.rb-home-day { padding: 12px 0; border-bottom: 1px solid var(--rb-hairline); }
.rb-home-day:last-child { border-bottom: 0; }
.rb-home-day-head { font-family: var(--rb-font-display); font-weight: 700; font-size: 15px; color: var(--rb-ink); }
.rb-home-day-head span { font-family: var(--rb-font-body); font-weight: 400; color: var(--rb-ink-faint); margin-left: 6px; }
.rb-home-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 7px 10px; margin: 4px -10px 0; border-radius: var(--rb-radius-sm);
  color: var(--rb-ink); text-decoration: none; }
.rb-home-item:hover { background: var(--rb-paper); }
.rb-home-item-title { font-weight: 500; }
.rb-home-item-detail { font-size: 13.5px; color: var(--rb-ink-faint); }
/* A task reached from Home: the Tasks page opens it and marks it. */
.rb-row.is-focus, .rb-row-editing.is-focus { box-shadow: 0 0 0 2px var(--rb-orange); border-radius: var(--rb-radius); }