/* =========================================================================
   ReplaProject — the parts that are not in the shared family stylesheet.

   Everything general lives in repla.css on the `rp-` prefix and is identical
   across the family. This file is only what a project tool needs and the
   others do not: board columns, a month grid, a task page, a dependency list.
   Its prefix is `rproj-`, matching the API key prefix, so a class here is
   never mistaken for one the whole family shares.
   ========================================================================= */

/* --- small shared bits ------------------------------------------------- */

.rproj-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.rp-icon { flex: none; vertical-align: -0.15em; }

.rproj-search { position: relative; max-width: 340px; flex: 1 1 220px; }
.rproj-search .rp-input { padding-left: 34px; }
.rproj-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--rp-text-3); pointer-events: none; display: flex;
}

/* The shared sidebar footer lays its children out in a row. This product puts
   several links in it, which then wrap into one run-on line. Stack them. */
.rp-sidebar-foot { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.rp-sidebar-foot > a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px; font-size: 13px; border-radius: 6px;
}
.rp-sidebar-foot > form { margin: 0; }
.rp-sidebar-foot .rp-btn { width: 100%; justify-content: flex-start; gap: 8px; }

.rproj-whoami {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.rproj-whoami .rp-help { display: block; font-size: 11px; }

/* --- the reference: WEB-14 --------------------------------------------- */
/* Tabular figures so a column of references lines up, and the whole thing
   selectable in one double-click because people paste these into chat. */
.rproj-ref {
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  /* Was --rp-text-3, which measures 3.16:1. A task reference is the thing
     people quote to each other; it has to be legible. */
  color: var(--rp-text-2); white-space: nowrap;
}
a.rproj-ref:hover { color: var(--rp-accent-strong); }

/* --- priority and state dots ------------------------------------------- */

.rproj-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rproj-prio {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--rp-text-2); white-space: nowrap;
}

.rproj-overdue { color: var(--rp-danger); font-weight: 600; }
.rproj-blocked {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--rp-warning);
}

/* --- board -------------------------------------------------------------- */

.rproj-board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 12px; min-height: 60vh;
}
.rproj-col {
  flex: 0 0 288px; background: var(--rp-surface-2);
  border: 1px solid var(--rp-border); border-radius: 12px;
  display: flex; flex-direction: column; max-height: calc(100vh - 210px);
}
.rproj-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--rp-border);
  position: sticky; top: 0; background: var(--rp-surface-2);
  border-radius: 12px 12px 0 0; z-index: 1;
}
/* A bar in the column's own colour across the top. The 10px dot was doing
   this job and was too small to separate two columns at a glance — which is
   the entire point of letting somebody colour them. */
.rproj-col { position: relative; overflow: hidden; }
.rproj-col[data-column]::before,
.rproj-col.has-tone::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--tone, var(--rp-border-2));
}
.rproj-col-head { padding-top: 13px; }
.rproj-col-head h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.rproj-col-count {
  margin-left: auto; font-size: 12px; color: var(--rp-text-2);
  font-variant-numeric: tabular-nums;
}
/* A column past its work-in-progress limit says so in the danger colour —
   the whole reason for setting one is that it should be uncomfortable. */
.rproj-col-count.over { color: var(--rp-danger); font-weight: 700; }
.rproj-col-body {
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; flex: 1;
}
.rproj-col-body.drag-over {
  background: var(--rp-accent-soft);
  outline: 2px dashed var(--rp-accent-line); outline-offset: -6px;
}

.rproj-card {
  background: var(--rp-surface); border: 1px solid var(--rp-border);
  border-radius: 10px; display: block;
  box-shadow: 0 1px 2px rgba(20,22,43,.04);
}
.rproj-card-link {
  display: block; padding: 10px 12px; color: inherit; text-decoration: none;
}
.rproj-card-link:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: -2px; }

/* The move fallback. Quiet until it is wanted: it is redundant for anyone who
   can drag, and essential for anyone who cannot. */
.rproj-card-move { padding: 0 8px 8px; }
.rproj-card-move .rp-select {
  font-size: 11.5px; padding: 3px 22px 3px 7px; height: auto;
  color: var(--rp-text-2); background-color: var(--rp-surface-2);
  border-color: transparent;
}
.rproj-card:hover .rproj-card-move .rp-select,
.rproj-card-move .rp-select:focus { border-color: var(--rp-border-2); }
.rproj-card:hover { border-color: var(--rp-border-2); }
.rproj-card[draggable="true"] { cursor: grab; }
.rproj-card.dragging { opacity: .45; }
.rproj-card-title {
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  color: var(--rp-text); margin: 4px 0 8px;
}
.rproj-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--rp-text-2);
}
.rproj-card-top { display: flex; align-items: center; gap: 8px; }

/* --- calendar ----------------------------------------------------------- */

/* A month has seven columns whatever the screen is. Below about 700px they
   would crush to something unreadable, so the grid keeps a floor and its
   wrapper (.rp-table-wrap) scrolls sideways instead — the one thing on the
   page allowed to. */
.rproj-cal {
  width: 100%; min-width: 660px;
  border-collapse: collapse; table-layout: fixed;
}
.rproj-cal th {
  text-align: left; padding: 8px 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--rp-text-2); border-bottom: 1px solid var(--rp-border-2);
}
.rproj-cal td {
  border: 1px solid var(--rp-border); vertical-align: top;
  height: 112px; padding: 6px; width: 14.28%;
}
.rproj-cal td.outside { background: var(--rp-surface-2); }
.rproj-cal td.today { background: var(--rp-accent-soft); }
.rproj-cal-day {
  font-size: 12px; font-weight: 600; color: var(--rp-text-2);
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.rproj-cal td.today .rproj-cal-day { color: var(--rp-accent-strong); }
.rproj-cal-item {
  display: block; font-size: 11.5px; line-height: 1.35;
  padding: 3px 5px; border-radius: 5px; margin-bottom: 3px;
  background: var(--rp-surface-2); border-left: 3px solid var(--rp-border-2);
  color: var(--rp-text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rproj-cal-item:hover { background: var(--rp-accent-soft); }
.rproj-cal-more { font-size: 11px; color: var(--rp-text-2); padding-left: 5px; }

/* --- the task page ------------------------------------------------------ */

.rproj-task { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
@media (max-width: 900px) {
  .rproj-task { grid-template-columns: 1fr; }
  /* A board column is narrower than a phone; the board itself scrolls. */
  .rproj-col { flex-basis: 82vw; max-width: 320px; max-height: none; }
  .rproj-filterbar .rp-field { flex: 1 1 100%; min-width: 0; }
}

.rproj-prose { font-size: 14.5px; line-height: 1.65; color: var(--rp-text); }
.rproj-prose > :first-child { margin-top: 0; }
.rproj-prose > :last-child { margin-bottom: 0; }
.rproj-prose h1, .rproj-prose h2, .rproj-prose h3 { line-height: 1.3; }
.rproj-prose pre {
  background: var(--rp-surface-2); border: 1px solid var(--rp-border);
  border-radius: 8px; padding: 12px; overflow-x: auto; font-size: 13px;
}
.rproj-prose code { font-size: .92em; }
.rproj-prose blockquote {
  border-left: 3px solid var(--rp-border-2); margin-left: 0;
  padding-left: 14px; color: var(--rp-text-2);
}
.rproj-prose table { border-collapse: collapse; width: 100%; }
.rproj-prose th, .rproj-prose td {
  border: 1px solid var(--rp-border); padding: 6px 9px; text-align: left;
}

.rproj-comment { display: flex; gap: 10px; padding: 12px 0; }
.rproj-comment + .rproj-comment { border-top: 1px solid var(--rp-border); }
.rproj-comment-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
  font-size: 13px;
}
.rproj-comment-head strong { font-weight: 600; }

.rproj-deps { list-style: none; margin: 0; padding: 0; }
.rproj-deps li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; font-size: 13px;
}
.rproj-deps li + li { border-top: 1px solid var(--rp-border); }

.rproj-checkitem {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 0;
  font-size: 13.5px;
}
.rproj-checkitem.done > span { color: var(--rp-text-3); text-decoration: line-through; }

.rproj-history { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.rproj-history li {
  padding: 6px 0; color: var(--rp-text-2);
  border-bottom: 1px solid var(--rp-border);
}
.rproj-history b { color: var(--rp-text); font-weight: 600; }

/* --- the writing box ----------------------------------------------------
   Built to look like the other inputs, because it IS one as far as the person
   using it is concerned. The toolbar sits inside the same border rather than
   floating above it, so the whole thing reads as a single field. */

.rproj-editor {
  border: 1px solid var(--rp-border-2); border-radius: var(--rp-radius-sm, 8px);
  background: var(--rp-surface); overflow: hidden;
}
.rproj-editor:focus-within {
  border-color: var(--rp-accent);
  box-shadow: 0 0 0 3px var(--rp-accent-soft);
}

.rproj-editor-bar {
  display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
  padding: 5px 6px; background: var(--rp-surface-2);
  border-bottom: 1px solid var(--rp-border);
}

.rproj-editor-btn {
  min-width: 30px; height: 28px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--rp-text-2); font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer;
}
.rproj-editor-btn:hover { background: var(--rp-surface); color: var(--rp-text); }
.rproj-editor-btn:focus-visible {
  outline: 2px solid var(--rp-accent); outline-offset: -1px;
}
/* An active button uses the accent as DECORATION only — a tint and a border.
   The letter on it stays the text colour, because words never sit on
   --rp-accent. */
.rproj-editor-btn.is-on {
  background: var(--rp-accent-soft); border-color: var(--rp-accent-line);
  color: var(--rp-text);
}
.rproj-editor-sep {
  width: 1px; height: 18px; margin: 0 4px; background: var(--rp-border-2);
}
.rproj-editor-spacer { flex: 1; }
.rproj-editor-html { font-size: 11px; font-weight: 600; letter-spacing: .03em; }

.rproj-editor-area {
  padding: 12px 14px; min-height: 120px; outline: none;
  font-size: 14.5px; line-height: 1.65; color: var(--rp-text);
  overflow-y: auto; max-height: 60vh;
}
.rproj-editor-area:empty::before,
.rproj-editor-area[data-empty]::before {
  content: attr(data-placeholder);
  color: var(--rp-text-3); pointer-events: none;
}
.rproj-editor-area > :first-child { margin-top: 0; }
.rproj-editor-area > :last-child { margin-bottom: 0; }
.rproj-editor-area p { margin: 0 0 0.75em; }
.rproj-editor-area ul, .rproj-editor-area ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.rproj-editor-area h1, .rproj-editor-area h2,
.rproj-editor-area h3, .rproj-editor-area h4 { margin: 1em 0 .4em; line-height: 1.3; }
.rproj-editor-area blockquote {
  margin: 0 0 .75em; padding-left: 14px;
  border-left: 3px solid var(--rp-border-2); color: var(--rp-text-2);
}
.rproj-editor-area pre {
  background: var(--rp-surface-2); border: 1px solid var(--rp-border);
  border-radius: 6px; padding: 10px 12px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  white-space: pre-wrap;
}
.rproj-editor-area a { color: var(--rp-accent-strong); text-decoration: underline; }

/* The textarea is still the thing that submits. It is hidden while the
   formatted view is showing, and shown when somebody asks for HTML. */
.rproj-editor-source { display: none; }
.rproj-editor.is-source .rproj-editor-area { display: none; }
.rproj-editor.is-source .rproj-editor-source {
  display: block; width: 100%; border: none; border-radius: 0;
  padding: 12px 14px; min-height: 200px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--rp-surface);
}
.rproj-editor.is-source .rproj-editor-source:focus { outline: none; box-shadow: none; }
/* Only the HTML button stays usable in source mode — the rest act on a view
   that is not on screen. */
.rproj-editor.is-source .rproj-editor-btn:not(.rproj-editor-html) {
  opacity: .35; pointer-events: none;
}

.rproj-editor.is-missing { border-color: var(--rp-danger); }
.rproj-editor-note {
  margin: 6px 0 0; font-size: 12.3px; color: var(--rp-danger); font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .rproj-editor { transition: border-color .12s ease, box-shadow .12s ease; }
}

/* The project's email address. Big enough to read out over a phone, and
   user-select:all so one click takes the whole thing — people copy this. */
.rproj-address {
  display: block; padding: 10px 12px; border-radius: 8px;
  background: var(--rp-accent-soft); border: 1px solid var(--rp-accent-line);
  color: var(--rp-text); font-size: 14px; word-break: break-all;
  user-select: all; -webkit-user-select: all;
}

/* --- capacity bars ------------------------------------------------------ */

.rproj-load { display: flex; flex-direction: column; gap: 10px; }
.rproj-load-row { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: center; }
.rproj-load-bar {
  height: 8px; border-radius: 99px; background: var(--rp-border);
  overflow: hidden; margin-top: 4px;
}
/* display:block matters. The fill is a <span>, and an inline element ignores
   both height and a percentage width — the bar renders as an empty track and
   looks like the data failed to load. */
.rproj-load-fill {
  display: block; height: 100%; min-width: 2px;
  background: var(--rp-accent); border-radius: 99px;
}
.rproj-load-fill.over { background: var(--rp-danger); }
.rproj-load-num {
  text-align: right; font-size: 12.5px; color: var(--rp-text-2);
  font-variant-numeric: tabular-nums;
}

/* --- the filter bar above every view -----------------------------------
   Its own class rather than the shared `rp-inline`, which is a GRID of
   auto-fit 220px columns — right for a form, wrong for a toolbar of small
   controls, which it stacks into one narrow column each. */
.rproj-filterbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.rproj-filterbar .rp-field { margin: 0; min-width: 150px; flex: 0 1 auto; }
.rproj-filterbar .rp-check { margin: 0; white-space: nowrap; }
.rproj-filterbar-checks { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding-bottom: 9px; }
.rproj-filterbar-buttons { display: flex; gap: 8px; }

.rproj-viewtools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rp-border);
}

/* --- filter chips ------------------------------------------------------- */

.rproj-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rproj-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--rp-accent-soft); border: 1px solid var(--rp-accent-line);
  color: var(--rp-accent-strong); border-radius: 99px;
  padding: 3px 9px; font-size: 12px; font-weight: 500;
}
.rproj-chip a { color: inherit; display: flex; opacity: .7; }
.rproj-chip a:hover { opacity: 1; }

/* --- group headers in a table ------------------------------------------ */

.rproj-group-head td {
  background: var(--rp-surface-2); font-weight: 600; font-size: 12.5px;
  border-top: 1px solid var(--rp-border-2);
}
.rproj-group-head .rp-help { font-weight: 400; }

/* --- the public intake form --------------------------------------------- */

.rproj-public {
  max-width: 620px; margin: 0 auto; padding: 40px 20px 64px;
}
.rproj-public-head { margin-bottom: 22px; }
.rproj-public-head h1 { font-size: 26px; margin: 0 0 6px; }

@media print {
  .rp-sidebar, .rp-topbar, .rproj-chips { display: none !important; }
  .rp-main, .rp-content { margin: 0; padding: 0; }
}

/* ---------------------------------------------------------------------------
   Choosing what goes on the overview.

   The drag handle is the ONLY draggable-looking thing in the row. Making the
   whole row draggable fights the tick box — you go to click the checkbox,
   move two pixels, and start a drag instead.
   --------------------------------------------------------------------------- */

.rproj-panel-list { list-style: none; margin: 0; padding: 0; }

.rproj-panel-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rp-border);
  background: var(--rp-surface);
  transition: background .12s ease, opacity .12s ease;
}
.rproj-panel-item:last-child { border-bottom: 0; }
.rproj-panel-item:hover { background: var(--rp-surface-2, #f8fafc); }

.rproj-panel-item.is-dragging { opacity: .45; }

/* Switched-off panels stay legible — greyed out, not hidden. Somebody has to
   be able to read what they are turning back on. */
.rproj-panel-item.is-off strong { color: var(--rp-muted); font-weight: 500; }

.rproj-panel-item label {
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1; cursor: pointer; margin: 0;
}
.rproj-panel-item label > span { display: flex; flex-direction: column; gap: 2px; }
.rproj-panel-item input[type="checkbox"] { margin-top: 3px; flex: none; }

.rproj-drag {
  cursor: grab; color: var(--rp-muted); flex: none;
  padding-top: 2px; touch-action: none;
}
.rproj-drag:active { cursor: grabbing; }

/* ---------------------------------------------------------------------------
   Managing board columns from the board itself.

   These used to live only under Projects → Settings → Statuses, which meant
   leaving the board to change the board.
   --------------------------------------------------------------------------- */

.rproj-col-menu { position: relative; margin-left: 4px; }

.rproj-col-menu > summary {
  list-style: none; cursor: pointer;
  color: var(--rp-muted); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 6px; user-select: none;
}
.rproj-col-menu > summary::-webkit-details-marker { display: none; }
.rproj-col-menu > summary:hover { background: var(--rp-border); color: var(--rp-text); }

.rproj-col-menu-body {
  position: absolute; right: 0; top: 26px; z-index: 30; width: 250px;
  padding: 14px; text-align: left;
  background: var(--rp-surface);
  border: 1px solid var(--rp-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 22, 43, .16);
}
.rproj-col-menu-body .rp-label { margin-top: 8px; }
.rproj-col-menu-body .rp-label:first-child { margin-top: 0; }
.rproj-col-menu-body input[type="color"] { padding: 2px; height: 32px; }

/* The "add a column" tile. Dashed so it reads as a slot to fill rather than
   a column that already exists and happens to be empty. */
.rproj-col-new {
  border: 1px dashed var(--rp-border);
  background: transparent;
  padding: 14px;
  align-self: flex-start;
}
.rproj-col-new .rp-label { display: block; }

/* Dragging a column by its header, and renaming it in place. */

.rproj-col-head { cursor: default; }
.rproj-col[data-column] .rproj-col-head { cursor: grab; }
.rproj-col.col-dragging { opacity: .5; }
.rproj-col.col-dragging .rproj-col-head { cursor: grabbing; }

/* The title only looks clickable on hover. A heading that always looks like
   a text box makes the board read as a form. */
.rproj-col-title { border-radius: 5px; padding: 1px 4px; margin: -1px -4px; }
.rproj-col-title:hover { background: var(--rp-border); }
.rproj-col-title:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 1px; }

.rproj-col-rename {
  font: inherit; font-weight: 600;
  width: 100%; padding: 1px 4px; height: auto;
}

/* The table's column picker. Same shape as the overview's panel list. */
.rproj-col-picker { list-style: none; margin: 0; padding: 0; }
.rproj-col-pick {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 2px; border-radius: 6px;
}
.rproj-col-pick:hover { background: var(--rp-surface-2, #f8fafc); }
.rproj-col-pick.is-dragging { opacity: .45; }
.rproj-col-pick.is-off span { color: var(--rp-muted); }
.rproj-col-pick .rproj-drag { padding: 0; }

/* The overview's board sits inside a card, so it needs its own edges and a
   shorter column than the full-page board. */
.rproj-board-mine {
  padding: 0 14px 14px;
  /* The full-page board is deliberately tall and scrolls sideways through
     however many columns a project has. This one sits inside a card and
     always has exactly three, so it should fill the width and stop at the
     height its cards need — not reserve 60% of the screen for nothing. */
  min-height: 0;
}
.rproj-board-mine .rproj-col {
  flex: 1 1 0;
  min-width: 232px;          /* below this they stack and scroll instead */
  max-height: none;
}
.rproj-board-mine .rproj-col-body { min-height: 76px; max-height: 420px; overflow-y: auto; }
.rproj-board-mine .rproj-col-head { cursor: default; }
/* The overview board's columns are stages, not statuses, so their colours
   are fixed: not started, in progress, finished. */
.rproj-board-mine .rproj-col:nth-child(1) { --tone: var(--rp-text-3); }
.rproj-board-mine .rproj-col:nth-child(2) { --tone: var(--rp-accent); }
.rproj-board-mine .rproj-col:nth-child(3) { --tone: var(--rp-success); }
.rproj-board-mine .rproj-col::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--tone);
}

/* ===========================================================================
   The 2026 visual uplift.

   The brief was "fresher, more colour, more graphics". The rule kept
   throughout: colour may carry meaning, but must never be the ONLY thing
   carrying it — every tinted tile still has its words, every chart still has
   its numbers. Colour that is decoration stays pale enough to put text on.
   =========================================================================== */

/* ---------- the progress ring ---------- */

.rproj-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.rproj-ring svg { position: absolute; inset: 0; }
.rproj-ring-num {
  position: relative; font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--rp-text); font-variant-numeric: tabular-nums;
}
.rproj-ring-num em { font-style: normal; font-size: 8px; color: var(--rp-text-2); }

/* ---------- the bar chart ---------- */

.rproj-chart {
  display: flex; align-items: flex-end; gap: 6px;
  padding-top: 14px;                 /* room for a value sitting above a bar */
}
.rproj-chart-col { flex: 1; min-width: 0; text-align: center; }
.rproj-chart-track {
  height: var(--chart-h); display: flex; align-items: flex-end;
  background: linear-gradient(var(--rp-surface-2), var(--rp-surface-2))
              no-repeat center / 100% 100%;
  border-radius: 7px;
}
.rproj-chart-bar {
  width: 100%; min-height: 3px; border-radius: 7px;
  background: var(--rp-grad-accent);
  position: relative;
  transition: height .35s cubic-bezier(.2, .7, .3, 1);
}
/* A zero is drawn as a faint line rather than nothing at all, so the week
   reads as "nothing happened" instead of "this chart is broken". */
.rproj-chart-bar.is-empty { background: var(--rp-border); min-height: 2px; }
.rproj-chart-value {
  position: absolute; left: 0; right: 0; top: -15px;
  font-size: 11px; font-weight: 700; color: var(--rp-text-2);
  font-variant-numeric: tabular-nums;
}
.rproj-chart-label {
  /* --rp-text-3 measures 3.16:1 on white. Fine for a placeholder, not for a
     number somebody is meant to read. */
  margin-top: 6px; font-size: 11px; color: var(--rp-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- project rows ---------- */

.rproj-projectrow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--rp-border);
}
.rproj-projectrow:last-child { border-bottom: 0; }
/* The project's own colour, as a solid chip rather than a 10px dot. This is
   the thing that tells two projects apart at a glance in every list. */
.rproj-project-chip {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: -.02em;
  color: #fff; text-transform: uppercase;
}
.rproj-projectrow-name { flex: 1; min-width: 0; }
.rproj-projectrow-name a {
  font-weight: 600; color: var(--rp-text); text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rproj-projectrow-name a:hover { color: var(--rp-accent-strong); }
.rproj-projectrow-sub { font-size: 12.2px; color: var(--rp-text-2); }

/* ---------- board cards ---------- */

/* A stripe in the project's colour down the left edge. On a board covering
   every project this is the only thing that says which one a card is from
   without reading it. */
.rproj-card { position: relative; transition: box-shadow .12s ease, transform .12s ease; }
.rproj-card:hover { box-shadow: var(--rp-shadow-hover); }
.rproj-card[style*="--project"]::before,
.rproj-card.has-stripe::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--project, var(--rp-accent));
}
.rproj-card.has-stripe > .rproj-card-link { padding-left: 14px; }

/* ---------- priority ---------- */

/* Was a grey word with a coloured dot. Now the word carries the colour too,
   which is what makes "Urgent" findable while scanning a full column. */
.rproj-prio {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650;
  padding: 1.5px 7px 1.5px 5px; border-radius: 999px;
  /* Colour comes from the `pill` filter, which measures the text against
     the tint it actually sits on. These are only the fallbacks. */
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
}
.rproj-prio .rproj-dot { width: 6px; height: 6px; }

/* ---------- the week's load ---------- */

.rproj-load-fill { background: var(--rp-grad-accent); }
.rproj-load-fill.over {
  background: linear-gradient(135deg, #ef5350 0%, var(--rp-danger) 100%);
}

/* ---------- section headings ---------- */

/* A small tinted icon beside a heading. Costs nothing and stops a page of
   cards reading as one undifferentiated wall. */
.rp-card-head h2 { display: flex; align-items: center; gap: 9px; }
.rproj-head-icon {
  width: 25px; height: 25px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  background: var(--rp-accent-soft); color: var(--rp-accent-strong);
}
.rproj-head-icon svg { width: 14px; height: 14px; }
.rproj-head-icon.tone-danger  { background: var(--rp-danger-soft);  color: var(--rp-danger); }
.rproj-head-icon.tone-warning { background: var(--rp-warning-soft); color: var(--rp-warning); }
.rproj-head-icon.tone-success { background: var(--rp-success-soft); color: var(--rp-success); }
.rproj-head-icon.tone-info    { background: var(--rp-info-soft);    color: var(--rp-info); }
.rproj-head-icon.tone-c4      { background: var(--rp-c4-soft);      color: var(--rp-c4-ink); }

/* ---------- the top of the overview ---------- */

.rproj-hello {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.rproj-hello h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.rproj-hello p { margin: 2px 0 0; color: var(--rp-text-2); font-size: 13.2px; }

@media (prefers-reduced-motion: reduce) {
  .rproj-chart-bar, a.rp-stat, .rproj-card { transition: none; }
  a.rp-stat:hover { transform: none; }
}

/* ---------- the Connect screen ---------- */

.rproj-step { font-size: 13px; font-weight: 700; margin: 16px 0 6px; }
.rproj-step:first-of-type { margin-top: 10px; }

.rproj-copyrow {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--rp-surface-2); border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-sm); padding: 9px 10px;
}
.rproj-copyable {
  flex: 1; min-width: 0; font-family: var(--rp-font-mono); font-size: 12.3px;
  white-space: pre-wrap; word-break: break-all; background: none; padding: 0;
}
.rproj-copyrow .rp-btn { flex: none; }

/* The address strip on a project page. Quiet enough not to compete with the
   numbers above it, but the address itself is mono on a tint so the eye lands
   on it straight away. */
.rproj-mailrow .rp-card-pad { padding-top: 12px; padding-bottom: 12px; }
.rproj-mailrow code {
  font-family: var(--rp-font-mono); font-size: 12.5px;
  background: var(--rp-surface-2); border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-sm); padding: 5px 9px;
  /* A long address must wrap rather than push the buttons off the card. */
  word-break: break-all; max-width: 100%;
}

/* The same address on a project card in the list. Never the focus there, so
   it sits under everything else at the size of the help text. */
.rproj-cardaddress {
  display: block; margin-top: 8px; font-family: var(--rp-font-mono);
  font-size: 11.5px; color: var(--rp-text-2);
  word-break: break-all; line-height: 1.5;
}

/* The delete box, and the deleted-projects list in the trash.
   A red edge rather than a red fill: enough to say "this one is different"
   without shouting at somebody who only came here to change a colour. */
.rproj-danger { border-color: #f3c4c4; }
.rproj-danger .rp-card-head h2 { color: var(--rp-danger); }

/* What deleting costs, itemised. Tight leading so four or five lines read as
   one block to be taken in at a glance. */
.rproj-losing {
  margin: 0 0 4px; padding-left: 20px;
  font-size: 13.5px; line-height: 1.7; color: var(--rp-text);
}
.rproj-losing li::marker { color: var(--rp-danger); }

.rproj-deleteform { margin-top: 14px; }
.rproj-deleteform .rp-label code {
  font-family: var(--rp-font-mono); font-weight: 700;
  background: var(--rp-surface-2); border: 1px solid var(--rp-border);
  border-radius: 4px; padding: 1px 6px;
}
/* Mono, because somebody is copying a key character by character and a
   capital I next to a lowercase l in a proportional face is a trap. */
.rproj-deleteform input { font-family: var(--rp-font-mono); letter-spacing: .04em; }

.rproj-hookrow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--rp-border);
}
.rproj-hookrow:last-of-type { border-bottom: 0; }

/* ===========================================================================
   Labels

   A label is only useful if it can be told apart at a glance from across the
   screen, so it is a SOLID pill in its own colour rather than a pale tint.
   The text colour is worked out from the background at render time — see
   services/colour.py — because the buyer picks the colour and no stylesheet
   can know whether white or navy will be readable on it.
   =========================================================================== */

.rproj-labels { display: flex; flex-wrap: wrap; gap: 6px; }

.rproj-label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; line-height: 1.5;
  letter-spacing: -.005em; white-space: nowrap;
}
.rproj-label form { display: inline-flex; }

/* The remove cross stays out of the way until the pill is hovered: a row of
   labels should read as words, not as a row of close buttons. */
.rproj-label-x {
  border: 0; background: none; padding: 0; margin-left: 1px;
  color: inherit; opacity: 0; cursor: pointer;
  display: inline-flex; transition: opacity .12s ease;
}
.rproj-label:hover .rproj-label-x,
.rproj-label-x:focus-visible { opacity: .75; }
.rproj-label-x:hover { opacity: 1; }

/* ---------- making one ---------- */

.rproj-newlabel { margin-top: 12px; border-top: 1px solid var(--rp-border); padding-top: 12px; }
.rproj-newlabel > summary {
  list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--rp-accent-strong);
  display: inline-flex; align-items: center; gap: 5px;
}
.rproj-newlabel > summary::-webkit-details-marker { display: none; }
.rproj-newlabel > summary:hover { text-decoration: underline; }
.rproj-newlabel[open] > summary { margin-bottom: 10px; }

.rproj-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* The swatch IS the radio button. A colour picker that shows the colours is
   the whole point; a dropdown of hex codes is not a choice anybody can make. */
.rproj-swatch {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  position: relative; margin: 0;
  box-shadow: inset 0 0 0 1px rgba(20, 22, 43, .14);
}
.rproj-swatch input { position: absolute; opacity: 0; width: 100%; height: 100%;
                      margin: 0; cursor: pointer; }
.rproj-swatch span[aria-hidden] { opacity: 0; display: grid; place-items: center; }
.rproj-swatch input:checked ~ span[aria-hidden] { opacity: 1; }
.rproj-swatch input:focus-visible ~ span[aria-hidden] {
  opacity: .5; outline: 2px solid var(--rp-accent-strong); outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .rproj-label-x { transition: none; opacity: .6; }
}

/* ---------------------------------------------------------------------------
   The task screen

   It had nine cards of identical weight stacked down the page, two of them
   empty and still 226px and 175px tall. The fix is hierarchy, not decoration:
   the thing you came to read is a card, the reference material folds away,
   and a section with nothing in it stops behaving like a section.
   --------------------------------------------------------------------------- */

/* A section with nothing to say and nothing to add. */
.rproj-quiet { background: transparent; border-style: dashed; box-shadow: none; }
.rproj-quiet .rp-card-head { border-bottom: 0; padding-bottom: 0; }
.rproj-quiet .rp-card-head h2 { font-size: 13.5px; color: var(--rp-text-2); }
.rproj-quiet .rp-card-pad { padding-top: 4px; }

/* Folded sections: the whole head is the control, so it has to look like one. */
.rproj-fold > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
}
.rproj-fold > summary::-webkit-details-marker { display: none; }
.rproj-fold > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid var(--rp-text-3);
  border-bottom: 2px solid var(--rp-text-3);
  transform: rotate(45deg); transition: transform .15s ease;
}
.rproj-fold[open] > summary::after { transform: rotate(-135deg); }
.rproj-fold > summary:hover { background: var(--rp-surface-2); }
.rproj-fold > summary:focus-visible {
  outline: 2px solid var(--rp-accent-strong); outline-offset: -2px;
}
.rproj-fold:not([open]) > summary { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .rproj-fold > summary::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Making a task

   The two inline boxes this replaces took a title and nothing else, so any
   task with an owner or a date meant making it and then immediately opening
   it to finish the job. This is one screen with everything on it, and still
   only one required field.
   --------------------------------------------------------------------------- */

.rproj-newtask {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 340px;
}
@media (max-width: 860px) {
  .rproj-newtask { grid-template-columns: minmax(0, 1fr); }
}

/* The title is the one thing that must be filled in, so it looks like it. */
.rp-input-lg { font-size: 17px; padding: 12px 14px; }

.rproj-newtask-side .rp-field { margin-bottom: 14px; }
.rproj-newtask-go {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--rp-border);
}

/* Labels as tickable pills rather than a list of checkboxes: the colour is
   how somebody recognises a label, so it has to be on the control. */
.rproj-labelpick { display: flex; flex-wrap: wrap; gap: 6px; }
.rproj-labelpick-one { cursor: pointer; opacity: .45; transition: opacity .12s ease; }
.rproj-labelpick-one input { position: absolute; opacity: 0; width: 0; height: 0; }
.rproj-labelpick-one:has(input:checked) { opacity: 1; }
.rproj-labelpick-one:hover { opacity: .8; }
.rproj-labelpick-one:has(input:checked):hover { opacity: 1; }
.rproj-labelpick-one:has(input:focus-visible) {
  outline: 2px solid var(--rp-accent-strong); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rproj-labelpick-one { transition: none; }
}

/* Who can add tasks — a radio list where the whole row is the control, so
   the explanation is clickable rather than decorative. */
.rproj-whocanadd { display: grid; gap: 2px; margin-top: 6px; }
.rproj-whocanadd-one {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer; margin: 0;
  border: 1px solid transparent;
}
.rproj-whocanadd-one:hover { background: var(--rp-surface-2); }
.rproj-whocanadd-one:has(input:checked) {
  background: var(--rp-accent-soft); border-color: var(--rp-accent-line);
}
.rproj-whocanadd-one input { margin-top: 3px; flex: none; }
.rproj-whocanadd-one > span { display: flex; flex-direction: column; gap: 1px; }
.rproj-whocanadd-one:has(input:focus-visible) {
  outline: 2px solid var(--rp-accent-strong); outline-offset: 1px;
}

/* The full task list on a project page. The assignee dropdown is inline, so
   handing out a morning's work is one pass down the page rather than a trip
   through each task screen. */
.rproj-alltasks td { vertical-align: middle; }
.rproj-alltasks .rproj-assign { margin: 0; }
.rproj-alltasks .rproj-assign select { width: 100%; }
.rproj-alltasks .rproj-label { margin-left: 6px; vertical-align: middle; }

/* Inline editing in the project's task list. The controls stay quiet until
   somebody goes near them — a table of loud dropdowns is harder to read than
   a table of values, and reading is what this list is mostly for. */
.rproj-inline-edit { margin: 0; }
.rproj-inline-edit select,
.rproj-inline-edit input {
  width: 100%; border-color: transparent; background: transparent;
  padding-left: 6px; padding-right: 6px;
}
.rproj-inline-edit select:hover,
.rproj-inline-edit input:hover,
.rproj-inline-edit select:focus,
.rproj-inline-edit input:focus {
  border-color: var(--rp-border-2); background: var(--rp-surface);
}
/* Priority keeps its colour, so the column still scans at a glance. */
.rproj-inline-edit select[name="priority"] {
  color: var(--prio, var(--rp-text)); font-weight: 600;
}
.rproj-inline-edit input.is-overdue { color: var(--rp-danger); font-weight: 600; }
.rproj-alltasks td { padding-top: 6px; padding-bottom: 6px; }

/* The filter bar above a project's task list. One row that wraps, rather
   than a grid — the controls are different widths and a grid makes the
   narrow ones look stranded. */
.rproj-projectfilters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  margin-top: 18px;
}
.rproj-projectfilters .rp-label { margin-bottom: 4px; }

/* The critical run: a numbered sequence, each step on its own tracks so a
   long title cannot shove the hours onto a second line. */
.rproj-chain { list-style: none; margin: 0; padding: 0; }
.rproj-chain li {
  display: grid;
  grid-template-columns: 22px 76px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--rp-border);
  font-size: 13.5px;
}
.rproj-chain li:last-child { border-bottom: 0; }
.rproj-chain-n {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; align-self: center;
  background: var(--rp-danger-soft); color: var(--rp-danger);
  font-size: 11px; font-weight: 700;
}
.rproj-chain-title {
  color: var(--rp-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.rproj-chain-h {
  color: var(--rp-text-2); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The project list in the sidebar. Indented under Projects, quieter than the
   top-level items, and scrolling rather than pushing the menu off screen. */
.rp-nav-sub {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 0; max-height: 240px; overflow-y: auto;
}
.rp-nav-sub a {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 30px; border-radius: 7px;
  color: var(--rp-navy-text); text-decoration: none;
  font-size: 13px; min-width: 0;
}
.rp-nav-sub a span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-nav-sub a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.rp-nav-sub a.is-here { background: rgba(255, 255, 255, .10); color: #fff; font-weight: 600; }
.rp-nav-sub a:focus-visible {
  outline: 2px solid var(--rp-accent-on-dark); outline-offset: -2px;
}
.rp-nav-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }

/* A value the project answered, shown on a task. Plainly not a control, so
   nobody tries to change it here and wonders why it did not save. */
.rproj-inherited {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 11px; border-radius: var(--rp-radius-sm);
  background: var(--rp-surface-2); border: 1px dashed var(--rp-border-2);
  font-size: 14px;
}
.rproj-inherited a { white-space: nowrap; }

/* The bulk bar. Sticky so it stays reachable while you scroll a long list
   ticking things — a bar you have to scroll back up to find is a bar people
   stop using. */
.rproj-bulkbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 14px; position: sticky; top: 74px; z-index: 30;
  border-color: var(--rp-accent-line); background: var(--rp-accent-soft);
}
.rproj-bulk-count { font-size: 13.5px; color: var(--rp-accent-strong); }
.rproj-bulkbar .rp-select, .rproj-bulkbar .rp-input { width: auto; min-width: 140px; }
.rproj-tick { cursor: pointer; }

/* --------------------------------------------------------------------------
   Stepping between tasks, and picture thumbnails on a task
   -------------------------------------------------------------------------- */

.rproj-stepper { display: flex; gap: 4px; align-items: center; }

/* The reference is the useful part, but it is the first thing to go when the
   topbar runs out of room — the arrows still work without it. */
.rproj-stepper-ref {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
@media (max-width: 720px) {
  .rproj-stepper-ref { display: none; }
}

/* An end of the sequence. Shown rather than hidden so the pair keeps its
   place; muted rather than invisible so it reads as "nothing that way". */
.rproj-stepper .is-disabled {
  opacity: .32;
  cursor: default;
  pointer-events: none;
}

/* A thumbnail stands in for the file icon, on the same 17px line, so a list
   of files does not change shape depending on what is in it. */
.rproj-thumb {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--rp-border);
  /* A chequer, so a transparent PNG is visibly transparent rather than
     looking like it failed to load. */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eceef3 25%, transparent 25%, transparent 75%, #eceef3 75%),
    linear-gradient(45deg, #eceef3 25%, transparent 25%, transparent 75%, #eceef3 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.rproj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rproj-thumb:hover { border-color: var(--rp-accent); }