/* Capstone workspace. The pinned non-negotiables sit above the prose as
   structural fields, so the template's rules are enforced by layout rather
   than by rubric feedback after the fact.

   Trap: a section that has been written into is marked by the word in its
   word count and by the check list below, not by its border alone. Do not
   reach for a coloured edge to say "done" — the border stays uniform. */

.ws-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 18px 0 6px;
}
.ws-head > div:first-child { flex: 1 1 340px; }
.ws-head h1 { font-size: var(--fs-title); }
.ws-head .sub { max-width: 58ch; margin-top: 10px; font-size: var(--fs-md); line-height: 1.6; color: var(--muted-foreground); }
.ws-stat { flex: 0 1 280px; }
.ws-stat .eyebrow { display: block; margin-bottom: 10px; }
.ws-stat .progress-row { margin-bottom: 8px; }
.ws-words { margin-bottom: 12px; font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); }

/* The three fields the genre cannot do without. Tinted ground, uniform
   hairline — the emphasis is the surface, not a painted rib. */
.pinned {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 26px;
  padding: 16px 18px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}
.pin label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.pin .hint { display: block; margin-top: 6px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted-foreground); }

.ws { display: flex; flex-direction: column; gap: 12px; }
.ws-sec {
  padding: 14px 16px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.ws-sec > .head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ws-sec h3 { flex: 1 1 auto; font-size: var(--fs-lg); }
.ws-sec .wc { font-family: var(--label); font-size: var(--fs-2xs); color: var(--muted-foreground); }
.ws-sec .ask { max-width: 74ch; margin-bottom: 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted-foreground); }
/* Written-into is said in the word count; the border stays uniform. */
.ws-sec.filled .wc { color: var(--brand-ink); }

.rt-lede { max-width: 62ch; margin-bottom: 14px; font-size: var(--fs-md); line-height: 1.6; color: var(--muted-foreground); }
.rt-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rt-row .route { flex: 1 1 190px; font-size: var(--fs-md); }
.rt-row select,
.rt-row input {
  padding: 8px 10px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: var(--fs-sm);
}
.rt-row select { flex: 0 1 190px; font-family: var(--label); font-size: var(--fs-xs); }
.rt-row input { flex: 2 1 240px; }

/* Textareas are the work surface: they must not look like the chrome. */
.ws-sec textarea,
.pin input {
  width: 100%;
  padding: 10px 12px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.6;
  resize: vertical;
}
.ws-sec textarea { min-height: 120px; }
.ws-sec textarea:focus-visible,
.pin input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.checks { list-style: none; }
.checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: var(--hairline) solid var(--border);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.checks li:last-child { border-bottom: 0; }
.checks .mark {
  flex: none;
  width: 62px;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  color: var(--muted-foreground);
}
.checks li.ok .mark { color: var(--brand-ink); }
.checks li.ok .txt { color: var(--muted-foreground); }

@media (max-width: 700px) {
  .pinned { padding: 12px 14px; }
}

.brief-note { margin-top: 14px; max-width: 58ch; }
.brief-note a { color: var(--brand-ink); text-underline-offset: 3px; }