/* Proddojo's own views: components structure.css has never heard of.
 *
 * What must not be here: a size, a spacing step, a radius, a border width, a
 * colour or a layout structure.css already decides, and any rule that restyles
 * one of its selectors. Those are a pull request against the shared file, not a
 * rule in this one. And never give a <td>, <th> or <tr> a display.
 */

/* A brief is the customer's words, line breaks and all. */
.brief { white-space: pre-line; }

/* The rank numeral beside a skill: I, II, III, IV. */
.rank { font-family: var(--mono); font-weight: 600; color: var(--accent); }

/* The fill of a `.bar`, in tenths: a grade out of ten, drawn without a
   width in a style attribute, which the CSP would refuse. */
.bar i.pct0 { width: 0; }
.bar i.pct1 { width: 10%; }
.bar i.pct2 { width: 20%; }
.bar i.pct3 { width: 30%; }
.bar i.pct4 { width: 40%; }
.bar i.pct5 { width: 50%; }
.bar i.pct6 { width: 60%; }
.bar i.pct7 { width: 70%; }
.bar i.pct8 { width: 80%; }
.bar i.pct9 { width: 90%; }
.bar i.pct10 { width: 100%; }

/* The browser terminal (#2). xterm.js sizes its grid to its container, so the
   container needs a height of its own; structure.css has no component for it. */
#terminal { height: 60vh; min-height: 18rem; }