with no background
class at all, not a .card — fixed in the templates, not just here. */
.card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.card .card {
background-color: var(--wr-panel-nested);
border-color: var(--bs-border-color);
box-shadow: none;
}
/* ── Kanban boards ────────────────────────────────────────────────────────────────
Horizontal lanes that scroll as a strip rather than wrapping, because a wrapped
Kanban stops being a Kanban. Each lane is a fixed width so the board reads the same
whether a lane holds one card or twenty. */
.wr-board {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.5rem;
align-items: flex-start;
}
.wr-lane {
flex: 0 0 300px;
background-color: var(--wr-page-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: flex-basis 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
.wr-lane { transition: none; }
}
.wr-lane-header {
font-family: var(--wr-font-heading);
font-weight: 600;
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--bs-border-color);
display: flex;
align-items: center;
gap: 0.5rem;
}
.wr-lane-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wr-lane-collapse-btn {
flex: 0 0 auto;
border: 0;
background: none;
padding: 0 0.125rem;
line-height: 1;
color: inherit;
font-size: 1rem;
cursor: pointer;
}
/* min-height so an empty lane is still a drop target — a zero-height lane cannot be
dragged into, which is the one thing every Kanban has to get right. */
.wr-lane-body {
padding: 0.5rem;
min-height: 120px;
}
/* Lane collapse (UAT #11) — a header-only strip so every stage stays reachable
without horizontal scrolling, whatever the lane count. flex-basis is what the
"fit to screen" shrink math below reads, same as the expanded default above. */
.wr-lane.wr-lane-collapsed {
flex-basis: 40px;
overflow: hidden;
}
.wr-lane.wr-lane-collapsed .wr-lane-body {
display: none;
}
.wr-lane.wr-lane-collapsed .wr-lane-header {
writing-mode: vertical-rl;
text-orientation: mixed;
padding: 0.5rem 0.25rem;
justify-content: flex-start;
}
/* Counter-rotate the toggle glyph itself back upright — only the label needs to
read top-to-bottom in a 40px-wide strip. */
.wr-lane.wr-lane-collapsed .wr-lane-collapse-btn {
writing-mode: horizontal-tb;
}
/* "Fit to screen" (UAT #11): a lane's preferred size stays 300px (or 40px
collapsed) — this only turns on the shrink flexbox already knows how to do,
so the board's total width becomes min(sum of each lane's own flex-basis, the
viewport) for free, with no JS layout math. overflow-x: hidden is tidiness,
not what makes the shrink happen — flex-shrink prevents the overflow itself. */
.wr-board.wr-fit-screen {
overflow-x: hidden;
}
.wr-board.wr-fit-screen .wr-lane {
flex-shrink: 1;
min-width: 0;
}
.wr-card {
background-color: #fff;
border: 1px solid var(--bs-border-color);
/* Neutral by default, deliberately not the brand accent (owner-reported: teal here
read as a RAG colour, sitting in RAG's own visual slot on a project card, when it
was only ever the identity colour). A card with a real RAG gets it from
.wr-card-rag-* below, which is more specific and wins; a card with none — a
PRE_PLANNING project, or any activity card, which never has RAG at all — stays
this grey. Teal is still fine for links and the active-tab indicator; it is not a
status colour, and this is the one place it was being read as one. */
border-left: 3px solid var(--bs-gray-400);
border-radius: var(--bs-border-radius);
padding: 0.5rem 0.625rem;
margin-bottom: 0.5rem;
cursor: grab;
font-size: 0.875rem;
}
.wr-card:last-child {
margin-bottom: 0;
}
/* SortableJS applies these two classes itself during a drag. */
.wr-card-ghost {
opacity: 0.4;
}
.wr-card-drag {
cursor: grabbing;
}
/* RAG stripe on a project card. Semantic colours, deliberately Bootstrap's own rather
than brand navy/turquoise — this is status, not identity. */
.wr-card-rag-RED { border-left-color: var(--bs-danger); }
.wr-card-rag-AMBER { border-left-color: var(--bs-warning); }
.wr-card-rag-GREEN { border-left-color: var(--bs-success); }
/* Completion ring (UAT #12) — a conic-gradient donut, not an SVG or a JS chart
library: --pct (0-100, set inline per card) is the one moving part, and the
::after punches the centre out to #fff to match .wr-card's own background
above, which is what makes this read as a ring rather than a filled dot. Sized
for a card's own text (0.875rem, see .wr-card) to sit inline with the title. */
.wr-completion-ring {
--pct: 0;
display: inline-block;
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: conic-gradient(var(--bs-success) calc(var(--pct) * 1%), var(--bs-gray-300) 0);
position: relative;
}
.wr-completion-ring::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: #fff;
}
/* Comment notes (doc 01 §7). A left rule rather than a card per note: a thread of six
short notes as six cards is mostly border. */
.wr-note {
border-left: 3px solid var(--bs-border-color);
padding-left: 0.5rem;
margin-bottom: 0.5rem;
}
.wr-note:last-child {
margin-bottom: 0;
}
/* Rendered markdown sits inside a note, so its first and last block must not add the
vertical margin a standalone
would. */
.wr-markdown > :first-child { margin-top: 0; }
.wr-markdown > :last-child { margin-bottom: 0; }
.wr-markdown p { margin-bottom: 0.25rem; }
.wr-markdown ul { margin-bottom: 0.25rem; padding-left: 1.25rem; }
.wr-markdown code {
background-color: var(--wr-panel-nested);
padding: 0.05rem 0.25rem;
border-radius: 0.2rem;
}
/* The per-activity notes row. No top border, so the notes read as belonging to the
activity row above rather than as a row of their own. */
.wr-notes-row > td {
border-top: 0;
}
.wr-notes > summary {
cursor: pointer;
}
/* A textarea living in a fixed-layout table cell. Vertical resize only — the column
width is fixed, so a horizontal drag would push the control out of its own cell —
and a floor of one line, so it cannot be dragged away to nothing. */
.wr-cell-textarea {
resize: vertical;
min-height: calc(1.5em + 0.5rem + 2px);
}
/* ── Page-level hierarchy ─────────────────────────────────────────────────────────
Owner feedback: title, filters, board/table and footer all read at the same weight,
so the eye has nowhere obvious to land. These three classes are the fix, defined
once here and applied per page in the markup — a page opts in by using them, rather
than every page's own
/filter row being hand-tuned to look right on its own. */
/* Clearly the largest, boldest thing on the page — bigger than any .h4/.h6 a card or
tab uses elsewhere, so it reads as the answer to "what page is this", not one more
heading among several. */
.wr-page-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
/* The title block and the filter/action row beneath it need to read as two distinct
zones, not one continuous block — a rule and real padding underneath the title does
that; margin alone was not enough separation on its own. */
.wr-page-header {
padding-bottom: 1rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--bs-border-color);
}
/* The gap between the filter row and the board/table/list below it. Filters are a
control panel *above* the content, not part of the data — this is what makes that
true visually, not just structurally. */
.wr-content-gap {
margin-top: 1.75rem;
}
/* ── Progressive disclosure for "how this works" text ────────────────────────────
A page explaining its own mechanics in a permanent paragraph teaches the workflow on
every load, which is the opposite of what someone using the app daily needs. The
default view keeps one short line saying what the section *is*; the "how it works"
detail lives behind this, opened on demand. Plain / — no JS, free
keyboard and screen-reader support, and it degrades to "just more text" if CSS fails. */
.wr-info {
margin-top: 0.25rem;
}
.wr-info > summary {
cursor: pointer;
font-size: 0.8125rem;
color: var(--wr-accent-dark);
list-style: none;
}
/* Both marker styles killed explicitly — ::-webkit-details-marker for Chrome/Safari,
list-style above for Firefox, which does not use a marker pseudo-element at all. */
.wr-info > summary::-webkit-details-marker {
display: none;
}
.wr-info > summary::before {
content: "ⓘ ";
}
.wr-info > summary:hover {
text-decoration: underline;
}
.wr-info[open] > summary {
margin-bottom: 0.25rem;
}
.wr-info-body {
font-size: 0.8125rem;
}
/* The footer is metadata about the page, not content on it — deliberately the
quietest thing on screen. Smaller than .wr-subtle's 0.875rem, which everything else
"small" on the page already uses; the footer needs to read as a step down from that,
not level with it. */
footer.wr-footer {
font-size: 0.75rem;
}