/* ============================================================================
   The task board: /manufacturing/projects, the five project pages, and the
   board blocks other pages borrow (seat cards on /onboard, task cards and the
   project nav on /manufacturing/os). Markup is in src/components/board/; the
   data is src/data/board.json, read only through src/lib/board.mjs.

   New classes only. Nothing here restyles a class another page already uses,
   so no rule needs scoping to the Clearer view, and a page that does not load
   this file looks exactly as it did.

   Rules of the expression layer apply (see expression.css): the HTML holds the
   true final state, entrances play once, reduced motion gets the final state at
   once. One thing moves on its own here, the map's top rail drawing across the
   five projects; the nodes and task cards rise through [data-ex-reveal]. No
   counters, no progress bars, no ambient loops. Badges and CLA dots never
   animate: a state that moves reads as a state that is changing.
   ============================================================================ */

/* ---- Status and notes ---------------------------------------------------- */
.ed .board-status { margin: var(--space-4) 0 0; font-family: var(--font-mono); font-size: var(--ed-small, 13px); letter-spacing: .02em; line-height: 1.6; color: var(--ed-quiet); max-width: 72ch; }
.ed .board-why,
.ed .board-shadow,
.ed .board-research { margin: var(--space-4) 0 0; max-width: 62ch; font-size: .9375rem; line-height: 1.65; color: var(--ed-body); }
.ed .board-why strong,
.ed .board-shadow strong,
.ed .board-research strong { color: var(--ed-ink); font-weight: 600; }
.ed .board-research a { color: var(--ed-accent); }
/* The shadow label links to the principle that defines it; it keeps the label's ink. */
.ed .board-shadow strong a { color: inherit; text-decoration: underline; text-decoration-color: var(--ed-rule-strong); text-underline-offset: .18em; }
.ed .board-shadow strong a:hover,
.ed .board-shadow strong a:focus-visible { color: var(--ed-accent); text-decoration-color: var(--ed-accent); }
.ed .board-research__note { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ed-quiet); }
.ed .board-principle { margin: 0; max-width: 60ch; font-size: var(--ed-lede); line-height: 1.55; color: var(--ed-ink); }
.ed .board-prose { margin: 0; max-width: 62ch; font-size: var(--ed-lede); line-height: 1.55; color: var(--ed-body); }
.ed .board-prose + p { margin: var(--space-6) 0 0; }
.ed .board-note { margin: var(--space-6) 0 0; max-width: 62ch; font-size: var(--text-sm); line-height: 1.6; color: var(--ed-quiet); }
.ed .board-note a { color: var(--ed-accent); }
.ed .board-site { margin: var(--space-3) 0 0; max-width: 72ch; font-size: var(--text-sm); line-height: 1.6; color: var(--ed-quiet); }
.ed .board-site a { color: var(--ed-accent); }
.ed .board-src { margin: var(--space-3) 0 0; max-width: 72ch; font-size: var(--text-sm); line-height: 1.6; color: var(--ed-quiet); }
.ed .board-src > span { margin-right: .5em; font-family: var(--font-mono); font-size: var(--ed-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ed-quiet); }
.ed .board-src a { color: var(--ed-body); text-decoration: underline; text-decoration-color: var(--ed-rule-strong); text-underline-offset: .18em; }
.ed .board-src a:hover { color: var(--ed-accent); text-decoration-color: var(--ed-accent); }
.ed .board-src__group { font-weight: 600; color: var(--ed-body); }
.ed .board-also { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--ed-accent); max-width: 62ch; font-size: var(--text-sm); line-height: 1.6; color: var(--ed-quiet); }
.ed td > .board-also { display: block; margin-top: var(--space-1); }
.ed .board-stamp { display: inline-block; margin: 0 0 0 var(--space-2); padding: 2px 7px; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--mo-warning); border: 1px dashed var(--mo-warning); vertical-align: middle; }
.ed p.board-stamp { display: block; width: fit-content; margin: 0 0 var(--space-3); }

/* ---- Navigation across the five and the foundation ------------------------ */
.ed .board-nav ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ed .board-nav li { margin: 0; }
.ed .board-nav a { display: inline-block; padding: 6px 10px; font-family: var(--font-mono); font-size: var(--ed-label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ed-body); border: 1px solid var(--ed-rule-strong); transition: color 200ms var(--ed-ease), border-color 200ms var(--ed-ease); }
.ed .board-nav a:hover,
.ed .board-nav a:focus-visible { color: var(--ed-accent); border-color: var(--ed-accent); }
.ed .board-nav a[aria-current="page"] { color: var(--ed-accent); border-color: var(--ed-accent); background: var(--ed-accent-soft); }

/* ---- The map: Moduloa, five projects, one foundation ---------------------- */
.ed .board-map { display: grid; gap: var(--space-3); margin: 0; }
.ed .board-map__root { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--ed-rule-strong); font-size: var(--text-sm); color: var(--ed-body); }
.ed .board-map__root b { font-family: var(--font-mono); font-size: var(--ed-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-accent); }
.ed .board-map__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--ed-rule); border: 1px solid var(--ed-rule); }
.ed .board-map__row::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--ed-accent); transform-origin: left; animation: board-draw 900ms var(--ex-ease-out, cubic-bezier(.16, 1, .3, 1)) 300ms both; }
.ed .board-map__node { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-4); background: var(--ed-paper); min-width: 0; }
.ed .board-map__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); text-decoration: none; color: var(--ed-ink); }
.ed .board-map__head:hover .board-map__code,
.ed .board-map__head:focus-visible .board-map__code { text-decoration: underline; text-underline-offset: .2em; }
.ed .board-map__n { font-family: var(--font-mono); font-size: var(--ed-label); letter-spacing: .1em; color: var(--ed-quiet); }
.ed .board-map__code { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: .12em; color: var(--ed-accent); }
.ed .board-map__label { flex-basis: 100%; font-size: var(--text-sm); color: var(--ed-body); }
.ed .board-map__line { margin: 0; font-family: var(--font-display); font-size: var(--text-md); line-height: 1.3; color: var(--ed-ink); }
.ed .board-map__subs { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ed .board-map__subs li { margin: 0; padding-left: .9rem; position: relative; font-size: var(--text-sm); line-height: 1.45; }
.ed .board-map__subs li::before { content: ""; position: absolute; left: 0; top: .7em; width: .45rem; height: 1px; background: var(--ed-accent); }
.ed .board-map__subs a { color: var(--ed-body); text-decoration: none; border-bottom: 1px solid var(--ed-rule-strong); }
.ed .board-map__subs a:hover,
.ed .board-map__subs a:focus-visible { color: var(--ed-accent); border-bottom-color: var(--ed-accent); }
.ed .board-map__count { display: block; margin-top: auto; padding-top: var(--space-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ed-quiet); }
.ed .board-map__base { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-4); font-size: var(--text-sm); color: var(--ed-body); background: var(--ed-accent-soft); border: 1px solid var(--ed-accent); }
.ed .board-map__base a { text-decoration: none; }
.ed .board-map__base .board-map__count { flex-basis: 100%; margin-top: 0; padding-top: 0; }
.ed .board-map__beside { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--ed-quiet); border: 1px dashed var(--ed-rule-strong); }
.ed .board-map__beside a { color: var(--ed-accent); }
.ed .board-map figcaption { font-size: var(--text-sm); line-height: 1.6; color: var(--ed-quiet); max-width: 62ch; }
@media (min-width: 40rem) {
  .ed .board-map__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five nodes in two columns leave one cell empty, and the 1px rule shows
     through it as a grey block; the last node takes the whole row instead. */
  .ed .board-map__node:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  .ed .board-map__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ed .board-map__node:last-child:nth-child(odd) { grid-column: auto; }
}
@keyframes board-draw { from { transform: scaleX(0); } to { transform: none; } }

/* ---- Tables (the pieces and every task) ---------------------------------- */
/* .ex-table cells do not wrap, which suits figures and codes. These rows carry
   sentences, so they wrap, and a floor width keeps the columns readable; the
   table scrolls inside .ex-tablewrap on a phone instead of the page. */
.ed .board-table { min-width: 40rem; }
.ed .board-table td { white-space: normal; line-height: 1.5; }
.ed .board-table td:first-child { min-width: 14rem; }
.ed .board-table a { color: var(--ed-accent); }
.ed .board-table tbody th { padding-top: var(--space-4); color: var(--ed-ink); border-top: 1px solid var(--ed-rule-strong); }
.ed .board-table tbody:first-of-type th { border-top: 0; }
.ed .board-table tbody th a { color: var(--ed-ink); text-decoration: none; }
.ed .board-table tbody th a:hover { color: var(--ed-accent); }

/* ---- Pieces of the work -------------------------------------------------- */
.ed .board-subs { display: grid; gap: var(--space-8); }
.ed .board-sub { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--ed-rule-strong); }
.ed .board-sub h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--ed-h3); font-weight: 700; line-height: 1.25; color: var(--ed-ink); }
.ed .board-sub__fit { font-family: var(--font-mono); font-size: var(--ed-small, 13px); letter-spacing: .02em; color: var(--ed-accent); }
.ed .board-sub p { margin: var(--space-3) 0 0; max-width: 62ch; }
.ed .board-sub .board-sub__fit { margin-top: 0; }
.ed .board-sub__fit a,
.ed .board-limits a { color: var(--ed-accent); }

/* ---- Task cards ------------------------------------------------------------ */
.ed .board-tasks { display: grid; gap: var(--space-6); }
.ed .board-task { min-width: 0; padding: var(--space-4); border: 1px solid var(--ed-rule-strong); background: var(--ed-paper); }
.ed .board-task--open { border-color: var(--ed-rule-strong); }
.ed .board-task--proposed { border-style: dashed; }
.ed .board-task--committed { border-color: var(--ed-accent); box-shadow: inset 3px 0 0 var(--ed-accent); }
.ed .board-task--done { border-color: var(--ed-rule); background: transparent; }
.ed .board-task--own { border-color: var(--ed-rule); border-style: dashed; background: transparent; }
.ed .board-task--waiting { border-color: var(--ed-rule); background: transparent; }
.ed .board-task--done .board-task__title,
.ed .board-task--own .board-task__title,
.ed .board-task--waiting .board-task__title { color: var(--ed-body); }
.ed .board-task__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.ed .board-task__id { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: .12em; color: var(--ed-accent); }
.ed .board-task__title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--ed-h3); font-weight: 700; line-height: 1.25; color: var(--ed-ink); }
.ed .board-task__facts { display: grid; gap: var(--space-3); margin: 0; }
.ed .board-task__facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--ed-rule); }
.ed .board-task__facts dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-quiet); }
.ed .board-task__facts dd { margin: 0; max-width: 64ch; font-size: .9375rem; line-height: 1.6; color: var(--ed-body); }
.ed .board-task__facts dd a { color: var(--ed-accent); }
.ed .board-task__who { display: block; }
.ed .board-task__who + .board-task__who { margin-top: var(--space-1); }
.ed .board-task__go { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--ed-body); }
.ed .board-task__go a { color: var(--ed-accent); }
@media (min-width: 40rem) {
  .ed .board-task { padding: var(--space-6); }
  .ed .board-task__facts > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}

/* ---- Lists: limits, claims, needs ------------------------------------------ */
.ed .board-limits,
.ed .board-claims { max-width: 64ch; margin: 0; padding: 0; list-style: none; }
.ed .board-limits li,
.ed .board-claims li { position: relative; margin: 0; padding: .75rem 0 .75rem 1.4rem; border-top: 1px solid var(--ed-rule); color: var(--ed-body); }
.ed .board-limits li:last-child,
.ed .board-claims li:last-child { border-bottom: 1px solid var(--ed-rule); }
.ed .board-limits li::before { content: ""; position: absolute; left: 0; top: 1.4rem; width: .6rem; height: 1px; background: var(--mo-warning); }
.ed .board-claims li { font-size: var(--text-sm); }
.ed .board-claims li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: .6rem; height: 1px; background: var(--ed-accent); }
.ed .board-claims a { font-family: var(--font-mono); letter-spacing: .06em; color: var(--ed-accent); }
.ed .board-limits + .kicker { margin-top: var(--space-8); }
.ed .board-needs + .seat-grid { margin-top: var(--space-6); }

/* ---- Seat cards: what a seat has committed to, and its CLA ------------------ */
.ed .seat-card .board-seat__work { display: grid; gap: var(--space-2); margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--ed-rule); }
.ed .seat-card .board-seat__label { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-quiet); }
.ed .seat-card .board-seat__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.5; color: var(--ed-body); }
.ed .seat-card .board-seat__list li { margin: 0; }
.ed .seat-card .board-seat__list a { color: var(--ed-accent); }
.ed .seat-card .board-seat__empty { margin: 0; font-size: var(--text-sm); color: var(--ed-quiet); }
.ed .seat-card .board-cla { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--ed-body); }
.ed .seat-card .board-cla--owner { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-quiet); }
.ed .seat-card .board-cla__note { font-size: var(--text-sm); color: var(--ed-quiet); }
.ed .seat-card .board-cla .board-stamp { margin-left: 0; }

/* ---- Badges ------------------------------------------------------------------ */
/* The words carry the state; the colour only repeats it (WCAG 1.4.1). */
.ed .badge--cla-yes { color: var(--ed-accent); }
.ed .badge--cla-yes .dot { background: var(--mo-success); }
.ed .badge--cla-no { color: var(--ed-body); }
.ed .badge--cla-no .dot { background: var(--mo-error); }
.ed .badge--task-open { color: var(--ed-accent); border-color: var(--ed-accent); }
.ed .badge--task-open .dot { background: transparent; border: 1px solid var(--ed-accent); }
.ed .badge--task-proposed { color: var(--ed-quiet); border-style: dashed; border-color: var(--ed-rule-strong); }
.ed .badge--task-proposed .dot { background: var(--ed-quiet); }
.ed .badge--task-committed { color: var(--ed-accent); border-color: var(--ed-accent); background: var(--ed-accent-soft); }
.ed .badge--task-committed .dot { background: var(--ed-accent); }
.ed .badge--task-done { color: var(--ed-quiet); }
.ed .badge--task-done .dot { background: var(--ed-quiet); }
.ed .badge--task-own { color: var(--ed-quiet); }
.ed .badge--task-own .dot { background: var(--mo-info); }
.ed .badge--task-waiting { color: var(--ed-quiet); }
.ed .badge--task-waiting .dot { background: transparent; border: 1px solid var(--ed-quiet); }

/* ---- Reduced motion: the final state, at once ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ed .board-map__row::before { animation: none; }
}