/*
 * HAND-WRITTEN, like not-built.css, and for the same kind of reason: the prototype cannot
 * supply it (Rev 70).
 *
 * The prototype is a page of JavaScript, so everything in it that goes somewhere is a <button>
 * or a <div> with a click handler; there is one <a> in the whole file. Here a control that
 * goes somewhere is a link, because a server-rendered page navigates with links — and a link
 * brings the browser's own styling with it: an underline, and the prototype's
 * `a{color:var(--ink-3)}` wherever the class sets no colour of its own. The prototype's
 * stylesheet never had to undo either, so the rail, the stage cards, every file reference and
 * every project name rendered underlined, and the stage counts and project names in link blue.
 *
 * This undoes exactly that and nothing else. `a:where(…)` has the specificity of a bare `a`:
 * it beats `a{color:…}` by coming after it, and loses to every class rule in platform.css — so
 * a class that sets its own colour keeps it, and one that sets none inherits, the way the
 * prototype's `button{color:inherit}` makes its buttons do.
 *
 * `test/build/links.test.ts` fails if a link carries a class this list does not name.
 */
a:where(.nav-item, .pipe-stage, .pid, .pname, .bcard, .due, .fchip, .btn, .card, .tab, .setcard, .notif-row, .sl, .bk, .acct, .paper, .iacell, .kpi) {
  color: inherit;
  text-decoration: none;
}

/* What the prototype draws as a <div>, a link draws inline unless it is told otherwise. */
a:where(.pname, .bcard) {
  display: block;
}

/* And a <button> is inline-block. */
a:where(.fchip) {
  display: inline-block;
}

/* So are the schedule's slots (#144). The booking picker's days are the prototype's own <button>s
   again (#244), and its slots are labels (`forms.css`). */
a:where(.sl) {
  display: inline-block;
}

/*
 * A button taller than its content centres the content; a block does not. The stage cards
 * share a row, so every card but the tallest is taller than its content, and the prototype's
 * sit centred in theirs where these sat at the top.
 */
a:where(.pipe-stage) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}