/* =========================================================================
   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;
  color: var(--rp-text-3); 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;
}
.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-3);
  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-3); 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-3); 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; }
}